import{LitElement as e,html as t,css as i}from"../../../lit/index.js";import{SimpleFieldsContainerBehaviors as o}from"./simple-fields-container.js";import"../../simple-icon/lib/simple-icon-lite.js";import"../../simple-icon/lib/simple-icons.js";import"../../simple-icon/simple-icon.js";const SimpleFieldsFieldBehaviors=function(e){return class extends(o(e)){static get tag(){return"simple-fields-field"}static get styles(){return[super.styles,i`
          fieldset {
            margin: 0;
            padding: 0;
            border: none;
            background-color: transparent;
          }
          option {
            border-radius: 0;
          }
          option[selected] {
            background-color: var(
              --simple-fields-faded-background-color,
              rgba(0, 0, 0, 0.1)
            );
          }
          legend {
            padding-inline-start: unset;
            padding-inline-end: unset;
          }
          #field-main-inner {
            position: relative;
          }
          #options {
            display: var(--simple-fields-radio-option-display, block);
            flex-wrap: var(--simple-fields-radio-option-flex-wrap, wrap);
          }
          fieldset.block-options #options {
            display: block;
          }
          .option {
            flex-direction: row;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: space-between;
            margin: 0 var(--simple-fields-margin-small, 8px) 0 0;
            width: 100%;
          }
          fieldset.block-options .option {
            flex-direction: row-reverse;
            justify-content: flex-end;
          }
          .option:last-of-type {
            margin: 0;
          }
          .option:focus-within label {
            color: var(--simple-fields-accent-color, #003f7d);
            transition: color ease-in-out;
          }
          :host([type]) fieldset .border-bottom {
            display: block;
          }
          .box-input {
            width: calc(100% - 4px);
            padding: 2px;
          }
          .box-input:focus {
            outline: none;
          }
          .field-main.inline {
            align-items: center;
          }
          input {
            background-color: var(
              --simple-fields-background-color,
              transparent
            );
          }
          input[type="text"] {
            padding: 0;
          }
          textarea {
            margin: 0;
            transition: height 0.5s ease-in-out;
            box-sizing: border-box;
            vertical-align: bottom;
            background-color: var(
              --simple-fields-background-color,
              transparent
            );
          }
          input::placeholder {
            font-weight: var(--simple-fields-placeholder-font-weight, inherit);
            opacity: var(--simple-fields-placeholder-opacity, 0.5);
            color: var(--simple-fields-placeholder-color, black);
          }
          select.field {
            width: calc(100% - 26px);
            padding-right: 26px;
            border: none;
            background-color: var(
              --simple-fields-background-color,
              transparent
            );
            border-radius: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
          }
          :host([type="select"]) {
            cursor: pointer;
          }
          :host([type="select"]) simple-icon-lite {
            position: absolute;
            pointer-events: none;
            right: 0px;
          }
          select:focus,
          select:focus-within {
            outline: none;
          }
          :host([type="checkbox"]) span,
          :host([type="radio"]) span {
            position: relative;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
          }
          :host([type="checkbox"]) fieldset.block-options span,
          :host([type="radio"]) fieldset.block-options span {
            flex: 0 0 auto;
          }
          :host([hovered][type="checkbox"]) .field-main-single,
          :host([hovered][type="radio"]) .field-main-single,
          .field-main-multi .option:hover {
            cursor: pointer;
            color: var(--simple-fields-accent-color, #003f7d);
          }
          :host([type="checkbox"]) span:focus-within,
          :host([type="radio"]) span:focus-within {
            color: var(--simple-fields-accent-color, #003f7d);
          }
          :host([type="checkbox"]) label.checkbox-label,
          :host([type="radio"]) label.radio-label {
            flex: 0 0 auto;
            width: 80%;
          }
          :host([type="checkbox"]) input,
          :host([type="radio"]) input,
          .field-main.inline input[type="checkbox"].field,
          .field-main.inline input[type="radio"].field {
            z-index: -1;
            opacity: 0;
            min-width: 0;
            width: 0;
            margin: 0;
            flex: 0 1 0px;
          }
          :host([type="checkbox"]) simple-icon-lite,
          :host([type="radio"]) simple-icon-lite {
            flex: 0 0 auto;
          }
          :host([type="checkbox"]) simple-icon-lite:hover,
          :host([type="radio"]) simple-icon-lite:hover,
          :host([type="checkbox"]) span:focus-within simple-icon-lite,
          :host([type="radio"]) span:focus-within simple-icon-lite {
            color: var(--simple-fields-accent-color, #003f7d);
          }

          input[type="range"] {
            width: 100%;
            height: calc(
              var(--simple-fields-font-size, 16px) +
                var(--simple-fields-line-height, 22px)
            );
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            -webkit-appearance: none;
          }
          input[type="range"]:focus {
            outline: none;
          }
          input[type="range"]::-webkit-slider-runnable-track {
            width: 100%;
            height: 16px;
            cursor: pointer;
            background: var(--simple-fields-border-color-light, #ccc);
            border-radius: 8px;
            transition: all 0.5ms ease-in-out;
          }
          :host([error]) input[type="range"]::-webkit-slider-runnable-track {
            background: var(--simple-fields-faded-error-color, #ffc0c0);
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"]::-webkit-slider-thumb {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background-color: var(
              --simple-fields-background-color,
              transparent
            );
            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: -2px;
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"][readonly]::-webkit-slider-thumb,
          input[type="range"][disabled]::-webkit-slider-thumb {
            cursor: not-allowed;
          }
          input[type="range"]:focus::-webkit-slider-thumb {
            background: var(--simple-fields-accent-color, #3f51b5);
            transition: all 0.5ms ease-in-out;
          }
          :host([error]) input[type="range"]::-webkit-slider-thumb {
            background: var(--simple-fields-error-color, #b40000);
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"][readonly]::-webkit-slider-thumb,
          input[type="range"][disabled]::-webkit-slider-thumb {
            background: var(--simple-fields-border-color, #999);
            cursor: not-allowed;
            box-shadow: none;
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"]::-moz-range-track {
            width: 100%;
            height: 16px;
            cursor: pointer;
            background: var(--simple-fields-border-color-light, #ccc);
            border-radius: 8px;
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"][readonly]::-moz-range-track,
          input[type="range"][disabled]::-moz-range-track {
            cursor: not-allowed;
          }
          :host([error]) input[type="range"]::-moz-range-track {
            background: var(--simple-fields-faded-error-color, #ffc0c0);
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"]::-moz-range-thumb {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: var(--simple-fields-background-color, transparent);
            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
            cursor: pointer;
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"]:focus::-moz-range-thumb {
            background: var(--simple-fields-accent-color, #3f51b5);
            transition: all 0.5ms ease-in-out;
          }
          :host([error]) input[type="range"]::-moz-range-thumb {
            background: var(--simple-fields-error-color, #b40000);
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"][readonly]::-moz-range-thumb,
          input[type="range"][disabled]::-moz-range-thumb {
            background: var(--simple-fields-border-color, #999);
            cursor: not-allowed;
            box-shadow: none;
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"]::-ms-track {
            width: 100%;
            height: 16px;
            cursor: pointer;
            background: transparent;
            border-color: transparent;
            color: transparent;
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"][readonly]::-ms-track,
          input[type="range"][disabled]::-ms-track {
            cursor: not-allowed;
          }
          :host([error]) input[type="range"]::-ms-track {
            background: var(--simple-fields-faded-error-color, #ffc0c0);
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"]::-ms-fill-lower {
            background: var(--simple-fields-border-color-light, #ccc);
            border-radius: 8px;
          }
          input[type="range"]::-ms-fill-upper {
            background: var(--simple-fields-border-color-light, #ccc);
            border-radius: 8px;
          }
          input[type="range"]::-ms-thumb {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: var(--simple-fields-background-color, transparent);
            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
            cursor: pointer;
          }
          input[type="range"][readonly]::-ms-thumb,
          input[type="range"][disabled]::-ms-thumb {
            cursor: not-allowed;
          }
          input[type="range"]:focus::-ms-thumb {
            background: var(--simple-fields-accent-color, #3f51b5);
          }
          :host([error]) input[type="range"]::-ms-thumb {
            background: var(--simple-fields-error-color, #b40000);
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"][redonly]::-ms-thumb,
          input[type="range"][disabled]::-ms-thumb {
            background: var(--simple-fields-border-color, #999);
            cursor: not-allowed;
            box-shadow: none;
            transition: all 0.5ms ease-in-out;
          }
          input[type="range"]:focus::-ms-fill-lower {
            background: var(--simple-fields-border-color-light, #ccc);
          }
          input[type="range"]:focus::-ms-fill-upper {
            background: var(--simple-fields-border-color-light, #ccc);
          }
        `]}render(){return this.hasFieldset?this.fieldsetTemplate:super.render()}static get properties(){return{...super.properties,hovered:{type:Boolean,reflect:!0},accept:{type:String},autocomplete:{type:String},autofocus:{type:Boolean},blockOptions:{type:Boolean,attribute:"block-options"},capture:{type:String},counter:{type:String},dirname:{type:String},itemsList:{type:Array,attribute:"items-list"},list:{type:String},max:{type:Number},maxlength:{type:Number},min:{type:Number},minlength:{type:Number},multiple:{type:Boolean},options:{type:Object},placeholder:{type:String},size:{type:Number},spellcheck:{type:String},step:{type:Number},value:{reflect:!0},wrap:{type:Boolean}}}constructor(){super(),this.autocomplete="off",this.autofocus=!1,this.multiple=!1,this.readonly=!1,this.spellcheck=!1,this.itemsList=[],this.options={},this.hovered=!1,this.wrap=!1}firstUpdated(e){super.firstUpdated&&super.firstUpdated(e),["checkbox","radio"].includes(this.type)&&(this.addEventListener("click",this._selectionShortCut.bind(this)),this.addEventListener("mousedown",this._hoverState.bind(this)),this.addEventListener("mouseover",this._hoverState.bind(this)),this.addEventListener("focusin",this._hoverState.bind(this)),this.addEventListener("focusout",this._hoverStateOff.bind(this)),this.addEventListener("mouseout",this._hoverStateOff.bind(this)))}_selectionShortCut(e){let t=!!this.value;this._handleIconClick(t)}_hoverState(){this.hovered=!0}_hoverStateOff(){this.hovered=!1}updated(e){this.field||this._updateField(),e.forEach(((e,t)=>{"id"!==t||this.id||(this.id=this._generateUUID()),this._getAttributes(this.type).includes(t)&&this._updateAttribute(t),"value"===t&&this.value!==e&&this.fieldValueChanged(),["counter","maxlength","type"].includes(t)&&["text","textarea"].includes(this.type)&&this._updateCount(),("type"===t&&this.type!==e||["itemsList","options"].includes(t))&&this._updateField()}))}fieldValueChanged(){this.field.value!==this.value&&(this.field.value=this.value),this._fireValueChanged()}get hasFieldset(){return("radio"===this.type||"checkbox"===this.type)&&!this.noOptions}get fieldElementTag(){return"select"===this.type||"text"===this.type&&!this.noOptions?"select":"textarea"===this.type?"textarea":this.hasFieldset?"fieldset":"input"}get fieldMainTemplate(){return t`
        <div
          class="${this.inline||["checkbox","color","radio"].includes(this.type||"text")?"field-main inline":"field-main"} ${this.sortedOptions&&!this.sortedOptions.length>0?"field-main-multi":"field-main-single"}"
          part="field-main"
        >
          ${this.labelTemplate}
          <div id="field-main-inner" part="field-main-inner">
            ${this.prefixTemplate}
            ${"input"===this.fieldElementTag?this.inputTemplate:"select"===this.fieldElementTag?this.selectTemplate:"textarea"===this.fieldElementTag?this.textareaTemplate:""}
            ${this.suffixTemplate}
          </div>
        </div>
      `}get fieldMeta(){return t`
        <div id="fieldmeta" aria-live="polite" part="field-meta"></div>
      `}get fieldsetTemplate(){return t`
        <fieldset
          part="fieldset"
          class="${this.blockOptions?"block-options":"inline-options"}"
        >
          <legend
            class="label-main"
            ?hidden="${!this.label}"
            part="fieldset-legend"
          >
            ${this.label}${this.error||this.required?"*":""}
          </legend>
          <div id="options" part="fieldset-options">
            ${(this.sortedOptions||[]).map((e=>t`
                <div
                  class="option"
                  part="option"
                  @click="${t=>{"DIV"===t.target.tagName&&(t.preventDefault(),t.stopPropagation(),this._handleIconClick(this.getChecked(e),e))}}"
                >
                  <label
                    for="${this.id}.${e.value}"
                    class="radio-label"
                    part="option-label"
                    >${e.html?t`<div
                          @click="${t=>{t.preventDefault(),t.stopPropagation(),this._handleIconClick(this.getChecked(e),e)}}"
                        >
                          ${e.html}
                        </div>`:e.text}</label
                  >${this.getInput(e)}
                </div>
              `))}
          </div>
          ${this.fieldBottom}
        </fieldset>
      `}_handleIconClick(e,t){this.disabled||this.readonly||(this.value=t?"radio"===this.type&&e?void 0:"radio"===this.type?(t||{}).value:e?(this.value||[]).filter((e=>e!==t.value)):[...this.value||[],(t||{}).value]:!e,this.multicheck&&this.autovalidate&&(this.error=!1,this.validate()))}getOptionIcon(e){return e&&"checkbox"===this.type?"icons:check-box":"checkbox"===this.type?"icons:check-box-outline-blank":e?"icons:radio-button-checked":"icons:radio-button-unchecked"}getChecked(e){return("radio"===this.type||"checkbox"===this.type)&&(e?"radio"===this.type?this.value===(e||{}).value:(this.value||[]).includes&&(this.value||[]).includes((e||{}).value):!!this.value)}getInput(e){let i=this.getChecked(e),o=this.getOptionIcon(i);return t`
        <span class="input-option" part="option-inner">
          <input
            ?autofocus="${this.autofocus}"
            .aria-descrbedby="${this.describedBy||""}"
            .aria-invalid="${this.error?"true":"false"}"
            @blur="${this._onFocusout}"
            @change="${this._handleFieldChange}"
            ?checked="${i}"
            class="field ${["checkbox","color","file","radio","range"].includes(this.type)?"":"box-input"}"
            ?disabled="${this.disabled}"
            @focus="${this._onFocusin}"
            @click="${this._onFocusin}"
            ?hidden="${this.hidden}"
            id="${this.id}.${e?e.value:""}"
            @input="${this._handleFieldChange}"
            name="${this.id}"
            .placeholder="${this.placeholder||""}"
            ?readonly="${this.readonly}"
            ?required="${this.required}"
            tabindex="0"
            aria-label="${this.describedBy?"":this.label}"
            type="${this.type}"
            value="${e?(e||{}).value:this.value}"
            part="option-input"
          />
          ${"checkbox"!==this.type&&"radio"!==this.type?"":t`
                <simple-icon-lite
                  icon="${o}"
                  @click="${t=>{t.preventDefault(),t.stopPropagation(),this._handleIconClick(i,e)}}"
                  part="option-icon"
                >
                </simple-icon-lite>
              `}
        </span>
      `}get inputTemplate(){return this.getInput()}get multicheck(){return this.hasFieldset}get noOptions(){return this.itemsList.length<1&&Object.keys(this.options||{}).length<1}get numberError(){let e=!!this._getFieldValue()&&this._getFieldValue().length,t=!("select"!==this.type&&!this.multicheck)&&this.min,i=!("select"!==this.type&&!this.multicheck)&&this.max;return i&&e&&i<e?i-e:!!(t&&e&&t>e)&&t-e}get sortedOptions(){let e=(this.itemsList||[]).map(((e,t)=>"object"==typeof e?e:{value:e,text:e}));return Object.keys(this.options||{}).sort(((e,t)=>e>t?1:-1)).forEach((t=>e.push({value:t,text:this.options[t]}))),e}get selectTemplate(){return t`
        <select
          ?autofocus="${this.autofocus}"
          .aria-descrbedby="${this.describedBy||""}"
          aria-invalid="${this.error?"true":"false"}"
          @blur="${this._onFocusout}"
          @change="${this._handleFieldChange}"
          class="field"
          ?disabled="${this.disabled}"
          @focus="${this._onFocusin}"
          ?hidden="${this.hidden}"
          id="${this.id}"
          ?multiple="${this.multiple}"
          name="${this.id}"
          ?readonly="${this.readonly}"
          ?required="${this.required}"
          tabindex="0"
          part="select"
        >
          ${(this.sortedOptions||[]).map((e=>t`
              <option
                part="select-option"
                .id="${this.id}.${e.value}"
                ?selected="${this.multiple?this.value&&this.value.includes(e.value):this.value===e.value}"
                .value="${e.value}"
              >
                ${e.html?t`${e.html}`:e.text}
              </option>
            `))}
        </select>
        <simple-icon-lite icon="arrow-drop-down"></simple-icon-lite>
      `}get slottedFieldObserver(){}get textareaTemplate(){return t`
        <textarea
          aria-invalid="${this.error?"true":"false"}"
          ?autofocus="${this.autofocus}"
          @blur="${this._onFocusout}"
          class="field box-input"
          @change="${this._handleFieldChange}"
          @keydown="${e=>e.stopPropagation()}"
          ?disabled="${this.disabled}"
          @focus="${this._onFocusin}"
          ?hidden="${this.hidden}"
          id="${this.id}"
          @input="${this._handleFieldChange}"
          name="${this.id}"
          ?readonly="${this.readonly}"
          ?required="${this.required}"
          rows="1"
          tabindex="0"
          part="textarea"
        >
  ${this.value||""}</textarea
        >
      `}_fireValueChanged(){this.dispatchEvent(new CustomEvent("value-changed",{bubbles:!0,cancelable:!0,composed:!0,detail:this}))}_handleFieldChange(e){super._handleFieldChange(),this.multicheck&&this.autovalidate&&(this.error=!1,this.validate())}_getAttributes(e){return{checkbox:["autocomplete","form","list"],color:["autocomplete","form","list"],date:["autocomplete","form","list","max","min","step"],"datetime-local":["form","list","max","min","step"],email:["autocomplete","form","list","placeholder"],file:["autocomplete","accept","capture","form","list"],hidden:["autocomplete","form"],month:["autocomplete","form","list","max","min","step"],number:["autocomplete","form","list","max","min","step"],password:["autocomplete","form","list","maxlength","maxlength","pattern","placeholder"],radio:["autocomplete","form","list"],range:["autocomplete","form","list","max","min","step"],search:["autocomplete","dirname","form","list","maxlength","maxlength","placeholder"],select:["autocomplete","form","list","size"],tel:["autocomplete","form","list","maxlength","maxlength","pattern","placeholder"],text:["autocomplete","dirname","form","list","maxlength","maxlength","pattern","placeholder"],textarea:["autocomplete","autocomplete","form","maxlength","maxlength","placeholder","spellcheck","wrap"],time:["autocomplete","form","list","max","min","step"],url:["autocomplete","form","list","maxlength","maxlength","placeholder"],week:["autocomplete","form","list","max","min","step"]}[e]}_getFieldsetValue(){return super._getFieldsetValue()}_observeAndListen(e=!0){e?this.addEventListener("click",this.focus):this.removeEventListener("click",this.focus)}_updateAttribute(e){this.field&&this[e]!==this.field.getAttribute(e)&&(this[e]||0===this[e]?this.field.setAttribute(e,this[e]):this.field.removeAttribute(e,this[e]))}_updateField(){this.type=this._getValidType(this.type),this.field=this.shadowRoot&&this.shadowRoot.querySelector(this.fieldElementTag)?this.shadowRoot.querySelector(this.fieldElementTag):void 0,this._getAttributes(this.type).forEach((e=>this._updateAttribute(e))),"select"!==this.type&&this.field&&this._updateAttribute("value"),this.field&&this.__delayedFocus&&this.focus()}}};class SimpleFieldsField extends(SimpleFieldsFieldBehaviors(e)){}customElements.define(SimpleFieldsField.tag,SimpleFieldsField);export{SimpleFieldsField,SimpleFieldsFieldBehaviors};