import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$9 } from './telia-button2.js';
import { d as defineCustomElement$8 } from './telia-field-assistive-text2.js';
import { d as defineCustomElement$7 } from './telia-field-error2.js';
import { d as defineCustomElement$6 } from './telia-field-valid2.js';
import { d as defineCustomElement$5 } from './telia-icon2.js';
import { d as defineCustomElement$4 } from './telia-label2.js';
import { d as defineCustomElement$3 } from './telia-text-input2.js';
import { d as defineCustomElement$2 } from './telia-vst2.js';

const SearchInputVariants = {
  DEFAULT: 'default',
  SIMPLE: 'simple',
  ADVANCED: 'advanced',
};
Object.values(SearchInputVariants);

const ButtonVariant = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  EXPRESSIVE: 'expressive',
  DESTRUCTIVE: 'destructive',
  TERTIARY_PURPLE: 'tertiary-purple',
  TEXT: 'text',
  PRIMARY_WHITE: 'primary-white',
  SECONDARY_WHITE: 'secondary-white',
  EXPRESSIVE_WHITE: 'expressive-white',
};
Object.values(ButtonVariant);

const searchInputCss = ":host{--right-padding-default:calc(12rem * var(--voca-rem-multiplier));--right-padding-simple:calc(6.5rem * var(--voca-rem-multiplier));--right-padding-advanced:calc(12.1rem * var(--voca-rem-multiplier))}.telia-search-input{position:relative}.telia-search-input__leading-icon{color:rgba(0, 0, 0, 0.6);position:absolute;bottom:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier)));left:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input--isDisabled .telia-search-input__leading-icon{color:rgba(0, 0, 0, 0.4)}.telia-search-input--hasInput .telia-search-input__leading-icon,.telia-search-input--hasInput~.telia-search-input__leading-icon,.telia-search-input telia-text-input:focus-within .telia-search-input__leading-icon,.telia-search-input telia-text-input:focus-within~.telia-search-input__leading-icon{display:none}.telia-search-input .telia-search-input__input input::placeholder{color:rgba(0, 0, 0, 0.6);opacity:1}.telia-search-input .telia-search-input__input input:disabled::placeholder{color:rgba(0, 0, 0, 0.4)}.telia-search-input--simple .telia-search-input__input input::placeholder,.telia-search-input--advanced .telia-search-input__input input::placeholder{padding-left:calc(2rem * var(--voca-rem-multiplier))}.telia-search-input .telia-text-input__input{height:calc(4.4rem * var(--voca-rem-multiplier));padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc(0.8rem * var(--voca-rem-multiplier));margin-top:0}.telia-search-input .telia-text-input__input:hover{padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc((0.8rem * var(--voca-rem-multiplier)) - (0.1rem * var(--voca-rem-multiplier)))}.telia-search-input .telia-text-input__input:focus,.telia-search-input .telia-text-input__input:disabled:hover{padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input .telia-text-input__input:focus-within::placeholder{padding-left:0}.telia-search-input--default .telia-text-input__input,.telia-search-input--default .telia-text-input__input:hover,.telia-search-input--default .telia-text-input__input:focus{padding-right:var(--right-padding-default, calc(10.5rem * var(--voca-rem-multiplier)))}.telia-search-input--simple .telia-text-input__input,.telia-search-input--simple .telia-text-input__input:hover,.telia-search-input--simple .telia-text-input__input:focus{padding-right:var(--right-padding-simple, calc(5.5rem * var(--voca-rem-multiplier)))}.telia-search-input--advanced .telia-text-input__input,.telia-search-input--advanced .telia-text-input__input:hover,.telia-search-input--advanced .telia-text-input__input:focus{padding-right:var(--right-padding-advanced, calc(13.5rem * var(--voca-rem-multiplier)))}.telia-search-input__button-wrapper{display:flex;position:absolute;bottom:0;right:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input__button-wrapper .telia-search-input__search-button:last-child:not(:only-child){margin-left:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input__button-wrapper .telia-button--text.telia-button--sm.telia-button--icon-only,.telia-search-input__button-wrapper .telia-search-input__reset-input-button .telia-button--text.telia-button--sm{padding:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier))) calc(1.6rem * var(--voca-rem-multiplier))}.telia-search-input--advanced .telia-search-input__button-wrapper .telia-search-input__search-button .telia-button.telia-button--text.telia-button--sm:not(.telia-button--icon-only){padding:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier))) 0}";

const TeliaSearchInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.vocaSearchButtonClicked = createEvent(this, "vocaSearchButtonClicked", 7);
    /** Placeholder text */
    this.placeholder = 'Search...';
    /** Variant */
    this.variant = SearchInputVariants.DEFAULT;
    /** Accessibility: aria-label for the input */
    this.ariaLabel = null;
    /** Text for "Expressive" variant search button  */
    this.searchButtonText = 'Search';
    /** Accessibility: aria-label for the search button */
    this.searchButtonAriaLabel = 'Search button';
    /** Accessibility: aria-label for the reset input button */
    this.resetInputButtonAriaLabel = 'Reset input button';
    /** Set button disabled */
    this.disabled = false;
    /** Input value */
    this.inputValue = '';
    this.classname = 'telia-search-input';
    this.leadingIconVariants = [
      SearchInputVariants.SIMPLE,
      SearchInputVariants.ADVANCED,
    ];
    this.searchButtonVariants = [
      SearchInputVariants.DEFAULT,
      SearchInputVariants.ADVANCED,
    ];
    this.matchVariant = (variants) => {
      return variants.includes(this.variant);
    };
    this.handleInput = (event) => {
      this.inputValue = event.target.value;
    };
    this.handleResetInput = () => {
      var _a;
      this.inputValue = '';
      (_a = this.inputElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
    };
  }
  renderIcon(iconName, className, ariaHidden = false) {
    return (h("telia-icon", { name: iconName, size: "sm", class: className, "aria-hidden": ariaHidden }));
  }
  renderResetInputButton() {
    return (h("telia-button", { variant: "text", size: "sm", class: `${this.classname}__reset-input-button`, onClick: this.handleResetInput, allyLabel: this.resetInputButtonAriaLabel, disabled: this.disabled }, this.renderIcon('close')));
  }
  renderSearchButton() {
    const commonProps = {
      variant: ButtonVariant.TEXT,
      size: 'sm',
      class: `${this.classname}__search-button`,
      disabled: this.disabled,
      allyLabel: this.searchButtonAriaLabel,
      onClick: (event) => {
        this.vocaSearchButtonClicked.emit({ value: this.inputValue, event });
      },
    };
    switch (this.variant) {
      case SearchInputVariants.DEFAULT:
        return (h("telia-button", Object.assign({}, commonProps), this.renderIcon('search')));
      case SearchInputVariants.ADVANCED:
        return (h("telia-button", Object.assign({}, commonProps), this.searchButtonText));
    }
    return;
  }
  render() {
    const wrapperClasses = {
      [this.classname]: true,
      [`${this.classname}--${this.variant}`]: !!this.variant,
      [`${this.classname}--hasInput`]: !!this.inputValue,
      [`${this.classname}--isDisabled`]: this.disabled,
    };
    return (h("div", { class: wrapperClasses, role: "search" }, h("telia-text-input", { class: `${this.classname}__input`, label: this.label, "aria-label": this.ariaLabel, disabled: this.disabled, placeholder: this.placeholder, "aria-placeholder": this.ariaPlaceholder, onInput: this.handleInput, value: this.inputValue, ref: ref => {
        this.inputElement = ref;
      } }), this.matchVariant(this.leadingIconVariants) &&
      this.renderIcon('search', `${this.classname}__leading-icon`, true), h("div", { class: `${this.classname}__button-wrapper` }, !!this.inputValue && this.renderResetInputButton(), this.matchVariant(this.searchButtonVariants) &&
      this.renderSearchButton()), h("telia-vst", { dataTrackingId: `${this.classname}` })));
  }
  static get style() { return searchInputCss; }
}, [1, "telia-search-input", {
    "placeholder": [1],
    "label": [1],
    "variant": [8],
    "ariaLabel": [1, "aria-label"],
    "ariaPlaceholder": [1, "aria-placeholder"],
    "searchButtonText": [1, "search-button-text"],
    "searchButtonAriaLabel": [1, "search-button-aria-label"],
    "resetInputButtonAriaLabel": [1, "reset-input-button-aria-label"],
    "disabled": [4],
    "inputValue": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-search-input", "telia-button", "telia-field-assistive-text", "telia-field-error", "telia-field-valid", "telia-icon", "telia-label", "telia-text-input", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-search-input":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaSearchInput$1);
      }
      break;
    case "telia-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "telia-field-assistive-text":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "telia-field-error":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "telia-field-valid":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "telia-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "telia-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "telia-text-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaSearchInput = TeliaSearchInput$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaSearchInput, defineCustomElement };
