import { r as i, c as r, h as a, H as t } from "./index.61732cef.js";
import { c } from "./index-orsBiyT_.fc4357c3.js";
import { D as h } from "./media-query.service-CCYT6DU8.f0931fdc.js";
import "react";
import "react-dom";
import "./utils-CCck-DTo.e4e43b6a.js";
const o = () => ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}", l = class {
  constructor(e) {
    i(this, e), this.clear = r(this, "clear", 7), this.inputBlur = r(this, "inputBlur", 7), this.inputFocus = r(this, "inputFocus", 7), this.inputInput = r(this, "inputInput", 7), this.valueChange = r(this, "valueChange", 7), this.clearButtonLabel = "Clear search term", this.placeholder = "Search \u2026", this.variant = "filled", this.clearable = !0, this.mediaQueryUnsubscribe = () => {
    }, this.handleClear = () => {
      this.input.value = "", this.input.focus(), this.valueChange.emit(""), this.clear.emit();
    }, this.onBlur = (s) => {
      this.inputBlur.emit(s);
    }, this.onChange = (s) => {
      this.valueChange.emit(s.target.value);
    }, this.onFocus = (s) => {
      this.inputFocus.emit(s);
    }, this.onInput = (s) => {
      this.inputInput.emit(s.target.value);
    };
  }
  componentDidLoad() {
    this.mediaQueryUnsubscribe = h.subscribe((e) => {
      this.forceIconProps(e);
    }), this.autoFocus && setTimeout(() => {
      this.input.focus();
    });
  }
  disconnectedCallback() {
    this.mediaQueryUnsubscribe();
  }
  forceIconProps(e) {
    if (!Boolean(this.iconEl))
      return;
    const s = this.iconEl.children[0];
    s == null || s.setAttribute("size", e ? "20" : "24");
  }
  onKeyDown(e) {
    (e.code === "KeyK" || e.code === "Slash") && (e.ctrlKey || e.metaKey) && this.input.focus();
  }
  render() {
    const e = c("search", `search--variant-${this.variant}`, {
      "search--disabled": this.disabled
    });
    return a(t, { key: "381e7cebfedbb7457577359d2e313f4f1aa3a5e3" }, a("span", { key: "1e82a83ed7e7198036e94cd967bd9aa85f8afc90", class: e, ref: (s) => this.iconEl = s }, a("swirl-icon-search", { key: "b34f04e136625da4e0dedaf355ab7cc10e0f097a", "aria-hidden": "true", class: "search__icon" }), a("input", { key: "fe90612f9c9d81f94cb937439b1b5cfa4c97d33c", "aria-disabled": this.disabled ? "true" : void 0, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (s) => this.input = s, type: "search", value: this.value }), !this.disabled && this.clearable && a("button", { key: "bd60c7985bc69b589e7427230016a634dc93e6cd", "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, a("swirl-icon-cancel", { key: "b69342dc3a4ef43940a9abb038d2f7e1d4e8b508" }))));
  }
};
l.style = o();
export {
  l as swirl_search
};
