'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b499856a.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.vocaSearchButtonClicked = index.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 (index.h("telia-icon", { name: iconName, size: "sm", class: className, "aria-hidden": ariaHidden }));
  }
  renderResetInputButton() {
    return (index.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 (index.h("telia-button", Object.assign({}, commonProps), this.renderIcon('search')));
      case SearchInputVariants.ADVANCED:
        return (index.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 (index.h("div", { class: wrapperClasses, role: "search" }, index.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), index.h("div", { class: `${this.classname}__button-wrapper` }, !!this.inputValue && this.renderResetInputButton(), this.matchVariant(this.searchButtonVariants) &&
      this.renderSearchButton()), index.h("telia-vst", { dataTrackingId: `${this.classname}` })));
  }
};
TeliaSearchInput.style = searchInputCss;

exports.telia_search_input = TeliaSearchInput;
