import{LitElement as t,html as e,css as i}from"lit";import{parseRegex as r}from"./lib/regex-parse.js";import{isStringEmpty as o}from"./lib/utils.js";import{i18n as s}from"./translation.js";import"./cc-input-text.js";import{CcLogsMessageFilterChangeEvent as l}from"./components/cc-logs-message-filter/cc-logs-message-filter.events.js";class a extends t{static get properties(){return{filter:{type:String}}}constructor(){super(),this.filter={value:"",mode:"loose"},this._isValid=!0}_validateMessageFilter(){if(o(this.filter.value))this._isValid=!0;else if("regex"===this.filter.mode)try{r(this.filter.value),this._isValid=!0}catch(t){this._isValid=!1}else this._isValid=!0}_onTextFilterInput(t){this.filter={value:t.detail,mode:this.filter.mode},this.dispatchEvent(new l(this.filter))}_onTextFilterModeClick(t){const e=t.target.dataset.mode;let i;i=this.filter.mode===e?"loose":e,this.filter={value:this.filter.value,mode:i},this.dispatchEvent(new l(this.filter))}willUpdate(t){t.has("filter")&&this._validateMessageFilter()}render(){const t=s("cc-logs-message-filter.mode.strict"),i=s("cc-logs-message-filter.mode.regex");return e`
      <div class="wrapper">
        <cc-input-text
          class="logs-filter-input"
          label=${s("cc-logs-message-filter.label")}
          .value=${this.filter.value}
          inline
          @cc-input=${this._onTextFilterInput}
        >
        </cc-input-text>

        <div class="buttons-wrapper">
          ${this._isValid?"":e` <div class="error" id="error">${s("cc-logs-message-filter.bad-format")}</div> `}
          <button
            data-mode="strict"
            title="${t}"
            aria-label="${t}"
            aria-pressed=${"strict"===this.filter.mode}
            @click=${this._onTextFilterModeClick}
          >
            “”
          </button>
          <button
            data-mode="regex"
            title="${i}"
            aria-label="${i}"
            aria-pressed=${"regex"===this.filter.mode}
            @click=${this._onTextFilterModeClick}
            aria-describedby="${this._isValid?"":"error"}"
          >
            .*
          </button>
        </div>
      </div>
    `}static get styles(){return[i`
        /* stylelint-disable no-duplicate-selectors */
        :host {
          display: block;
        }

        .wrapper {
          display: flex;
          position: relative;
        }

        cc-input-text {
          --cc-input-font-family: var(--cc-ff-monospace, monospace);

          flex: 1;
        }

        .buttons-wrapper {
          align-items: center;
          display: flex;
          height: 100%;
          position: absolute;
          right: 5px;
          z-index: 2;
        }

        button {
          background: unset;
          background: var(--cc-color-bg-default, #fff);
          border: none;
          border-radius: var(--cc-border-radius-default, 0.15em);
          color: var(--cc-color-text-default, #000);
          cursor: pointer;
          display: block;
          flex-shrink: 0;
          font-family: var(--cc-ff-monospace, monospace);
          font-size: unset;
          height: 1.6em;
          margin: 0;
          padding: 0;
          width: 1.6em;
        }

        button:focus {
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
          z-index: 1;
        }

        button:active,
        button:hover {
          box-shadow: none;
          outline: 0;
        }

        button:hover {
          background-color: var(--cc-color-bg-neutral-hovered);
        }

        button:active,
        button[aria-pressed='true'] {
          background-color: var(--cc-color-bg-neutral-active);
          color: var(--cc-color-text-primary);
        }

        button::-moz-focus-inner {
          border: 0;
        }

        button:first-of-type {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        button:last-of-type {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        .error {
          background: var(--cc-color-bg-default, #fff);
          color: var(--cc-color-text-danger);
          margin-right: 0.5em;
        }
      `]}}window.customElements.define("cc-logs-message-filter-beta",a);export{a as CcLogsMessageFilter};
//# sourceMappingURL=cc-logs-message-filter.js.map
