import{LitElement as e,html as i,css as t}from"../../../lit/index.js";import{SimpleFieldsFieldBehaviors as s}from"./simple-fields-field.js";import{SimpleFieldsCombo as o}from"./simple-fields-combo.js";import"./simple-fields-url-combo-item.js";class SimpleFieldsUrlCombo extends o{static get tag(){return"simple-fields-url-combo"}static get styles(){return[super.styles,t`
        :host([display-as="grid"]) {
          --simple-fields-url-combo-preview-size: var(
            --simple-fields-url-combo-grid-preview-size,
            100px
          );
        }
        ul[role="listbox"] li[role="option"]:not(:last-child) {
          border-bottom: 1px solid var(--simple-fields-border-color-light, #ccc);
        }
        :host([display-as="columns"]) ul[role="listbox"] li[role="option"],
        :host([display-as="grid"]) ul[role="listbox"] li[role="option"] {
          border-radius: var(--simple-fields-border-radius, 2px);
          border: 1px solid var(--simple-fields-border-color-light, #ccc);
        }
        :host([always-expanded]) #field-main-inner {
          flex-wrap: wrap;
          --simple-fields-combo-max-height: var(
            --simple-fields-url-combox-expanded-max-height,
            unset
          );
        }
        .input-bottom,
        :host([always-expanded]) .border-bottom:not(.input-bottom),
        :host([always-expanded]) [part="option-icon"],
        :host([has-suggestions="false"]) [part="option-icon"] {
          display: none;
        }
        :host([always-expanded]) .input-bottom {
          display: block;
        }
        :host([always-expanded]) ul[role="listbox"] {
          border: none;
          position: static;
          opacity: 1;
          flex: 1 0 100%;
          margin: var(--simple-fields-margin-small, 8px) 0;
        }
        :host([display-as="columns"]) ul[role="listbox"] {
          grid-gap: var(--simple-fields-button-padding, 2px);
        }
        :host([display-as="grid"]) ul[role="listbox"] {
          grid-gap: var(--simple-fields-margin-small, 8px);
        }
        :host([display-as="columns"]) ul[role="listbox"],
        :host([display-as="grid"]) ul[role="listbox"] {
          display: grid;
          grid-template-columns: repeat(
            auto-fill,
            minmax(
              calc(
                var(--simple-fields-url-combo-preview-size) + 2 *
                  var(--simple-fields-button-padding, 2px)
              ),
              1fr
            )
          );
        }
        :host([display-as="grid"]) simple-fields-url-combo-item,
        :host([display-as="grid"]) ::slotted(simple-fields-url-combo-item) {
          flex-direction: column;
          align-items: center;
          text-align: center;
          justify-content: space-between;
          padding: var(--simple-fields-margin-small, 8px);
        }
        :host([display-as="grid"]) simple-fields-url-combo-item::part(preview),
        :host([display-as="grid"])
          ::slotted(simple-fields-url-combo-item::part(preview)) {
          display: block;
          margin-right: 0;
        }
      `]}static get properties(){return{...super.properties,displayAs:{type:String,attribute:"display-as",reflect:!0},alwaysExpanded:{type:Boolean,attribute:"always-expanded",reflect:!0}}}constructor(){super(),this.grid=!1}get isListboxHidden(){return!(this.alwaysExpanded||this.expanded)||this.hidden||this.filteredOptions.length<1}get listboxTemplate(){return i`
      <div class="border-bottom input-bottom blur"></div>
      <div class="border-bottom input-bottom focus"></div>
      ${super.listboxTemplate}
    `}getListItemInner(e){return i`<simple-fields-url-combo-item
      icon="${e.icon}"
      name="${e.name}"
      preview="${e.preview}"
      type="${e.type}"
      value="${e.value}"
    >
    </simple-fields-url-combo-item>`}getOptionData(e,i){return{value:"object"==typeof e?e.value:e,name:"object"==typeof e?e.name:void 0,icon:"object"==typeof e?e.icon:void 0,preview:"object"==typeof e?e.preview:void 0,type:"object"==typeof e?e.type:void 0,id:i}}get sortedOptions(){let e=(this.itemsList||[]).map(((e,i)=>"object"==typeof e?e:this.getOptionData(e,i)));return Object.keys(this.options||{}).sort(((e,i)=>e>i?1:-1)).forEach((i=>e.push(this.getOptionData(this.options[i],e.length)))),e}possibleEmail(e){return e.match(/^\S+@\S+.\S+$/)}possiblePhone(e){return e.match(/^(\+\d{1,3}\s?)?((\(\d{3}\)\s?)|(\d{3})(\s|-?))(\d{3}(\s|-?))(\d{4})(\s?(([E|e][X|x][T|t][\:|\.|]?)|x|X)(\s?\d+))?$/)}filterOptions(e,i){super.filterOptions(e,i),this.possibleEmail(e)?(this.filteredOptions=[{value:`mailto:${e}`,id:"mailto"},...this.filteredOptions],this.open()):this.possiblePhone(e)&&(this.filteredOptions=[{value:`tel:${e.replace(/[\(\)\-\s\:\.]/g,"").replace(/[a-zA-Z]+/,"p")}`,id:"tel"},...this.filteredOptions],this.open())}}customElements.define(SimpleFieldsUrlCombo.tag,SimpleFieldsUrlCombo);export{SimpleFieldsUrlCombo};