@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/cjs/swirl-table-column.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlTableColumnCss = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";
+
+const SwirlTableColumn = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sort = undefined;
+    this.sortable = undefined;
+    this.maxWidth = undefined;
+    this.minWidth = "fit-content";
+    this.sticky = undefined;
+    this.width = undefined;
+  }
+  componentDidRender() {
+    const table = utils.closestPassShadow(this.el, "swirl-table");
+    table?.rerender();
+  }
+  render() {
+    const styles = {
+      flex: Boolean(this.width) ? `0 0 ${this.width}` : "",
+      maxWidth: this.maxWidth || "",
+      minWidth: this.minWidth || "",
+    };
+    return (index.h(index.Host, { "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, index.h("span", null, index.h("slot", null)), this.sortable && (index.h("span", { class: "table-column__sort-indicator" }, this.sort === "ascending" && (index.h("swirl-icon-arrow-upward", { "aria-hidden": "true", size: 20 })), this.sort === "descending" && (index.h("swirl-icon-arrow-downward", { "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlTableColumn.style = swirlTableColumnCss;
+
+exports.swirl_table_column = SwirlTableColumn;

package/dist/cjs/swirl-table-row-group.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+
+const swirlTableRowGroupCss = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}.table-row-group__header-row{padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}@media (min-width: 768px){.table-row-group__label{position:sticky;left:var(--s-space-16)}}";
+
+const SwirlTableRowGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = undefined;
+  }
+  render() {
+    const rowspan = this.el.querySelectorAll("swirl-table-row").length;
+    return (index.h(index.Host, { class: "table-row-group", role: "rowgroup" }, index.h("div", { class: "table-row-group__header-row", role: "row" }, index.h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label)), index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlTableRowGroup.style = swirlTableRowGroupCss;
+
+exports.swirl_table_row_group = SwirlTableRowGroup;

package/dist/cjs/swirl-table-row.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlTableRowCss = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}";
+
+const SwirlTableRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.highlighted = undefined;
+    this.index = undefined;
+  }
+  componentDidLoad() {
+    const table = utils.closestPassShadow(this.el, "swirl-table");
+    table?.rerender();
+  }
+  render() {
+    const className = index$1.classnames("table-row", {
+      "table-row--highlighted": this.highlighted,
+    });
+    return (index.h(index.Host, { "aria-rowindex": this.index, class: className, role: "row" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlTableRow.style = swirlTableRowCss;
+
+exports.swirl_table_row = SwirlTableRow;

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

@@ -0,0 +1,247 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const utils = require('./utils-2b6367e4.js');
+
+/* global setTimeout, clearTimeout */
+
+var dist = function debounce(fn) {
+  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  var lastCallAt = void 0;
+  var deferred = void 0;
+  var timer = void 0;
+  var pendingArgs = [];
+  return function debounced() {
+    var currentWait = getWait(wait);
+    var currentTime = new Date().getTime();
+
+    var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;
+
+    lastCallAt = currentTime;
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (isCold && options.leading) {
+      return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {
+        return result[0];
+      }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));
+    }
+
+    if (deferred) {
+      clearTimeout(timer);
+    } else {
+      deferred = defer();
+    }
+
+    pendingArgs.push(args);
+    timer = setTimeout(flush.bind(this), currentWait);
+
+    if (options.accumulate) {
+      var argsIndex = pendingArgs.length - 1;
+      return deferred.promise.then(function (results) {
+        return results[argsIndex];
+      });
+    }
+
+    return deferred.promise;
+  };
+
+  function flush() {
+    var thisDeferred = deferred;
+    clearTimeout(timer);
+
+    Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);
+
+    pendingArgs = [];
+    deferred = null;
+  }
+};
+
+function getWait(wait) {
+  return typeof wait === 'function' ? wait() : wait;
+}
+
+function defer() {
+  var deferred = {};
+  deferred.promise = new Promise(function (resolve, reject) {
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+  return deferred;
+}
+
+const swirlTableCss = ":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:0.0625rem 0 0 0 var(--s-border-default),\n    -0.0625rem 0 0 0 var(--s-border-default),\n    0 0.25rem 1rem rgba(25, 26, 28, 0.04),\n    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0.0625rem 0 0 0 var(--s-border-default),\n    -0.0625rem 0 0 0 var(--s-border-default),\n    0 0.25rem 1rem rgba(25, 26, 28, 0.04),\n    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell>*{flex-grow:1}";
+
+const SwirlTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.triggerRerender = utils.debounce(async () => {
+      await this.updateLayout();
+      this.updateScrolledState();
+      this.updateEmptyState();
+    }, 0, true);
+    this.updateLayout = dist(async () => {
+      this.resetCellStyles();
+      this.resetColumnStyles();
+      this.resetEmptyRowStyles();
+      this.resetRowGroupStyles();
+      this.layoutEmptyRow();
+      this.layoutRowGroups();
+      this.layOutCells();
+    }, 16, { leading: true });
+    this.onScroll = () => {
+      this.updateScrolledState();
+    };
+    this.onSlotChange = async () => {
+      await this.updateLayout();
+      this.updateScrolledState();
+      this.updateEmptyState();
+    };
+    this.caption = undefined;
+    this.emptyStateLabel = "No results found.";
+    this.label = undefined;
+    this.empty = undefined;
+    this.scrollable = undefined;
+    this.scrolled = undefined;
+    this.scrolledToEnd = undefined;
+  }
+  async componentDidRender() {
+    await this.updateLayout();
+    this.updateScrolledState();
+    this.updateEmptyState();
+  }
+  async onWindowResize() {
+    await this.updateLayout();
+    this.updateScrolledState();
+  }
+  /**
+   * Force a re-render of the table
+   */
+  async rerender() {
+    this.triggerRerender();
+  }
+  resetEmptyRowStyles() {
+    const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(emptyRow)) {
+      return;
+    }
+    emptyRow.style.width = "";
+  }
+  resetRowGroupStyles() {
+    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
+    tableRowGroups.forEach((tableRowGroup) => {
+      const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
+      if (!Boolean(headerRow)) {
+        return;
+      }
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
+    });
+  }
+  resetColumnStyles() {
+    const columns = this.getColumns();
+    columns.forEach((column) => {
+      column.classList.remove("table-column--has-shadow");
+      column.style.right = "";
+      column.style.left = "";
+      column.style.position = "";
+      column.style.zIndex = "";
+    });
+  }
+  resetCellStyles() {
+    const cells = this.getCells();
+    cells.forEach((cell) => {
+      cell.classList.remove("table-cell--has-shadow");
+      cell.style.flex = "";
+      cell.style.left = "";
+      cell.style.right = "";
+      cell.style.position = "";
+      cell.style.zIndex = "";
+    });
+  }
+  updateScrolledState() {
+    const isMobile = utils.isMobileViewport();
+    const scrollable = this.container.scrollWidth > this.container.clientWidth;
+    const scrolled = this.container.scrollLeft > 0;
+    const scrolledToEnd = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >=
+      Math.floor(this.container.scrollWidth);
+    if (scrollable !== this.scrollable) {
+      if (scrollable && !isMobile) {
+        this.container.classList.add("table__container--scrollable");
+      }
+      else {
+        this.container.classList.remove("table__container--scrollable");
+      }
+    }
+    if (scrolled !== this.scrolled) {
+      if (scrolled && !isMobile) {
+        this.container.classList.add("table__container--scrolled");
+      }
+      else {
+        this.container.classList.remove("table__container--scrolled");
+      }
+    }
+    if (scrolledToEnd !== this.scrolledToEnd) {
+      if (scrolledToEnd && !isMobile) {
+        this.container.classList.add("table__container--scrolled-to-end");
+      }
+      else {
+        this.container.classList.remove("table__container--scrolled-to-end");
+      }
+    }
+  }
+  getColumns() {
+    return Array.from(this.el.querySelectorAll("swirl-table-column"));
+  }
+  getCells() {
+    return Array.from(this.el.querySelectorAll("swirl-table-cell"));
+  }
+  layoutEmptyRow() {
+    const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(emptyRow)) {
+      return;
+    }
+    const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    emptyRow.style.width = scrollWidth;
+  }
+  layoutRowGroups() {
+    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
+    const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container")?.scrollWidth}px`;
+    tableRowGroups.forEach((tableRowGroup) => {
+      const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
+      if (!Boolean(headerRow)) {
+        return;
+      }
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
+    });
+  }
+  layOutCells() {
+    const columns = this.getColumns();
+    const cells = this.getCells();
+    columns.forEach((column, colIndex) => {
+      const cellsOfColumn = cells.filter((_, cellIndex) => {
+        return (colIndex - cellIndex) % columns.length === 0;
+      });
+      const columnWidth = column.width || `${column.getBoundingClientRect().width}px`;
+      cellsOfColumn.forEach((cell) => {
+        cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
+      });
+    });
+  }
+  updateEmptyState() {
+    const rowsContainer = this.el.querySelector('[slot="rows"]');
+    this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "table" }, index.h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", null, index.h("div", { id: "caption" }, this.caption))), index.h("div", { role: "rowgroup" }, index.h("div", { class: "table__header", role: "row" }, index.h("slot", { name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { class: "table__body" }, index.h("slot", { name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { class: "table__empty-row", role: "row" }, index.h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlTable.style = swirlTableCss;
+
+exports.swirl_table = SwirlTable;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+
+const swirlTabsCss = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}";
+
+const SwirlTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabActivated = index.createEvent(this, "tabActivated", 7);
+    this.tabs = [];
+    this.onActivateNextTab = () => {
+      this.activateNextTab();
+    };
+    this.onActivatePreviousTab = () => {
+      this.activatePreviousTab();
+    };
+    this.onActivateTab = (event) => {
+      this.activateTab(event.detail);
+    };
+    this.initialTab = undefined;
+    this.label = undefined;
+    this.activeTab = undefined;
+    this.tabBarTabs = [];
+  }
+  componentWillLoad() {
+    this.collectTabs();
+    this.updateTabBarTabs();
+  }
+  /**
+   * Activate a tab.
+   * @param tabId
+   */
+  async activateTab(tabId) {
+    if (this.activeTab === tabId) {
+      return;
+    }
+    this.activeTab = tabId;
+    this.tabs.forEach((tab) => (tab.active = false));
+    const tab = this.tabs.find((tab) => tab.tabId === tabId);
+    if (!Boolean(tab)) {
+      return;
+    }
+    tab.active = true;
+    this.tabActivated.emit(tab);
+    this.updateTabBarTabs();
+  }
+  activateNextTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
+    this.activateTab(this.tabs[nextIndex].tabId);
+    requestAnimationFrame(() => {
+      this.el.querySelector(".tabs__tab--active")?.focus();
+    });
+  }
+  activatePreviousTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const previousIndex = Math.max(0, currentIndex - 1);
+    this.activateTab(this.tabs[previousIndex].tabId);
+    requestAnimationFrame(() => {
+      this.el.querySelector(".tabs__tab--active")?.focus();
+    });
+  }
+  collectTabs() {
+    this.tabs = Array.from(this.el.querySelectorAll("swirl-tab"));
+    if (this.tabs.length === 0) {
+      return;
+    }
+    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
+    this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
+  }
+  updateTabBarTabs() {
+    this.tabBarTabs = this.tabs.map((tab) => ({
+      icon: tab.icon,
+      id: tab.tabId,
+      label: tab.label,
+      active: this.activeTab === tab.tabId,
+    }));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "tabs" }, index.h("swirl-tab-bar", { label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs })), index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlTabs.style = swirlTabsCss;
+
+exports.swirl_tabs = SwirlTabs;

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

@@ -0,0 +1,192 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlTextInputCss = ".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)}";
+
+const SwirlTextInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inputBlur = index.createEvent(this, "inputBlur", 7);
+    this.inputFocus = index.createEvent(this, "inputFocus", 7);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.updateIconSize(event.matches);
+    };
+    this.clear = () => {
+      this.inputEl.value = "";
+      this.value = "";
+      this.valueChange.emit("");
+      this.inputEl.focus();
+    };
+    this.onChange = (event) => {
+      const el = event.target;
+      this.value = el.value;
+    };
+    this.onBlur = (event) => {
+      this.inputBlur.emit(event);
+    };
+    this.onFocus = (event) => {
+      this.inputFocus.emit(event);
+      this.handleAutoSelect(event);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onKeyPress = (event) => {
+      if (this.type !== "number") {
+        return;
+      }
+      if (["+", "-", "e"].includes(event.key)) {
+        event.preventDefault();
+      }
+    };
+    this.decreaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      let currentValue = this.inputEl.valueAsNumber;
+      if (isNaN(this.inputEl.valueAsNumber)) {
+        currentValue = this.min !== undefined ? this.min + 1 : 1;
+      }
+      this.value = String(Math.max(this.min || -Infinity, currentValue - step));
+      this.valueChange.emit(this.value);
+    };
+    this.increaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      let currentValue = this.inputEl.valueAsNumber;
+      if (isNaN(this.inputEl.valueAsNumber)) {
+        currentValue = this.min !== undefined ? this.min - 1 : -1;
+      }
+      this.value = String(Math.min(this.max || Infinity, currentValue + step));
+      this.valueChange.emit(this.value);
+    };
+    this.togglePassword = () => {
+      if (this.type !== "password") {
+        return;
+      }
+      this.showPassword = !this.showPassword;
+    };
+    this.autoComplete = "on";
+    this.autoFocus = undefined;
+    this.autoGrow = undefined;
+    this.autoSelect = undefined;
+    this.clearable = undefined;
+    this.clearButtonLabel = "Clear input";
+    this.disabled = undefined;
+    this.disableDynamicWidth = undefined;
+    this.swirlAriaAutocomplete = undefined;
+    this.swirlAriaControls = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.swirlAriaExpanded = undefined;
+    this.swirlRole = undefined;
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.maxLength = undefined;
+    this.max = undefined;
+    this.min = undefined;
+    this.mode = undefined;
+    this.placeholder = undefined;
+    this.prefixLabel = undefined;
+    this.required = undefined;
+    this.rows = 1;
+    this.showCharacterCounter = undefined;
+    this.spellCheck = undefined;
+    this.suffixLabel = undefined;
+    this.step = undefined;
+    this.passwordToggleLabel = "Toggle password display";
+    this.type = "text";
+    this.value = undefined;
+    this.iconSize = 24;
+    this.showPassword = false;
+  }
+  componentDidLoad() {
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
+  }
+  componentDidRender() {
+    this.adjustInputSize();
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  watchValue(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.valueChange.emit(newValue);
+    }
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
+  adjustInputSize() {
+    if (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"
+        : "";
+    }
+    if (this.rows === 1 && !this.autoGrow) {
+      this.inputEl.style.height = "";
+      this.inputEl.style.width = "";
+      if (this.suffixLabel &&
+        this.type !== "password" &&
+        !this.disableDynamicWidth &&
+        !Boolean(this.placeholder)) {
+        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
+      }
+    }
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  render() {
+    const Tag = this.rows === 1 && !this.autoGrow ? "input" : "textarea";
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const showStepper = this.type === "number" && !this.disabled;
+    const showPasswordToggle = this.type === "password" && !this.disabled;
+    const showClearButton = this.clearable &&
+      !this.disabled &&
+      Boolean(this.value) &&
+      !showPasswordToggle &&
+      !showStepper &&
+      !this.showCharacterCounter;
+    const type = this.type === "password" && this.showPassword ? "text" : this.type;
+    const className = index$1.classnames("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 (index.h(index.Host, null, index.h("div", { class: className }, this.prefixLabel && (index.h("span", { class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, 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 : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (index.h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { class: "text-input__stepper" }, index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { size: this.iconSize })), index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (index.h("span", { class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+  }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+};
+SwirlTextInput.style = swirlTextInputCss;
+
+exports.swirl_text_input = SwirlTextInput;