import{html as e,css as t}from"lit";import{createRef as i,ref as r}from"lit/directives/ref.js";import{C as l}from"./form-utils-4685920e.js";import{RequiredValidator as o}from"./lib/form/validation.js";import{accessibilityStyles as n}from"./styles/accessibility.js";import{i18n as s}from"./translation.js";import"./cc-picker-option.js";import{CcSelectEvent as a}from"./components/common.events.js";const c={get empty(){return s("cc-select.error.empty")}};class d extends l{static get properties(){return{...super.properties,disabled:{type:Boolean,reflect:!0},inline:{type:Boolean,reflect:!0},label:{type:String},options:{type:Array},readonly:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},resetValue:{type:String,attribute:"reset-value"},selectionStyle:{type:String,reflect:!0,attribute:"selection-style"},value:{type:String}}}static reactiveValidationProperties=["required","options"];constructor(){super(),this.disabled=!1,this.inline=!1,this.label="",this.selectionStyle="check",this.options=null,this.readonly=!1,this.required=!1,this.resetValue=null,this.value=null,this._errorRef=i(),this._pickerRef=i()}_getFormControlElement(){return this._pickerRef.value}_getErrorElement(){return this._errorRef.value}_getErrorMessages(){return c}_getValidator(){return this.required?new o:null}_getReactiveValidationProperties(){return d.reactiveValidationProperties}focus(){this._pickerRef.value?.focus()}_onTileSelect(e){this.readonly||(this.value=e.target.value,this.dispatchEvent(new a(this.value)))}render(){if(0===this.options?.length)return"";const t=null!=this.errorMessage&&""!==this.errorMessage;return e`
      <fieldset class="fieldset" @input=${this._onTileSelect} ${r(this._pickerRef)} tabindex="-1">
        <div class="fieldset-content">
          <legend class="legend">
            <span class="legend-text">${this.label}</span>
            ${this.required?e` <span class="required">${s("cc-picker.required")}</span> `:""}
          </legend>

          <div class="tiles" part="tiles">
            ${this.options.map((e=>this._renderOption(e,t)))}
          </div>

          <div class="help-container" id="help-id">
            <slot name="help"></slot>
          </div>

          ${t?e`<p class="error-container" id="error-id" ${r(this._errorRef)}>${this.errorMessage}</p>`:""}
        </div>
      </fieldset>
    `}_renderOption(t,i){const{body:r,footer:l,value:o,disabled:n}=t,s=this.name+"-"+o,a=this.value===o,c=this.disabled||n,d=!a&&!c&&this.readonly;return e`
      <input
        class="visually-hidden"
        type="radio"
        id="${s}"
        name="${this.name}"
        .value=${o}
        .checked=${a}
        ?disabled=${c||d&&!a}
        aria-describedby="help-id error-id"
      />
      <label for="${s}">
        <cc-picker-option
          ?selected=${a}
          ?disabled=${c}
          ?readonly=${d}
          ?error=${i}
          selection-style="${this.selectionStyle}"
        >
          <span slot="body">${r}</span>
          ${null!=l?e`<span slot="footer">${l}</span>`:""}
        </cc-picker-option>
      </label>
    `}static get styles(){return[n,t`
        /* region global */
        :host {
          display: inline-block;
        }
        /* endregion */

        /* region fieldset */
        fieldset {
          border: none;
          display: inline-block;
          margin: 0;
          padding: 0;
        }

        fieldset:focus-visible {
          border-radius: var(--cc-border-radius-default, 0.25em);
          outline: var(--cc-focus-outline-error);
          outline-offset: 0.5em;
        }

        fieldset,
        .fieldset-content {
          width: var(--cc-picker-tiles-width, fit-content);
        }
        /* endregion */

        /* region legend */
        .legend {
          align-items: flex-end;
          cursor: pointer;
          display: flex;
          gap: 2em;
          justify-content: space-between;
          padding-block-end: var(--cc-form-label-gap, 0.35em);
          width: 100%;
        }

        .legend-text {
          color: var(--cc-input-label-color, inherit);
          font-size: var(--cc-input-label-font-size, inherit);
          font-weight: var(--cc-input-label-font-weight, normal);
        }

        .required {
          color: var(--cc-color-text-weak, #404040);
          font-size: 0.9em;
          font-variant: small-caps;
        }
        /* endregion */

        /* region tiles layout */
        .tiles {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
          grid-area: input;
          padding-inline-start: var(--cc-picker-tiles-indent, 0.25em);
        }
        /* endregion */

        /* region tile */
        label {
          display: grid;
        }

        input[type='radio']:focus-visible + label cc-picker-option {
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        input[type='radio']:focus-visible + label cc-picker-option[error] {
          outline-color: var(--cc-color-border-danger, #be242d);
        }
        /* endregion */

        /* region inline layout */
        :host([inline]) .fieldset-content {
          align-items: baseline;
          display: grid;
          gap: 0 var(--cc-form-label-gap-inline, 0.75em);
          grid-auto-rows: min-content;
          grid-template-areas:
            'label input'
            'label help'
            'label error';
          grid-template-columns: auto 1fr;
        }

        :host([inline]) .legend {
          flex-direction: column;
          gap: 0;
          grid-area: label;
          line-height: normal;
          padding: 0;
          width: auto;
        }
        /* endregion */

        /* region help & error messages */
        slot[name='help']::slotted(*) {
          color: var(--cc-color-text-weak);
          font-size: 0.9em;
          margin: 0.3em 0 0;
        }

        .help-container {
          grid-area: help;
        }

        .error-container {
          color: var(--cc-color-text-danger, #be242d);
          grid-area: error;
          margin: 0.5em 0 0;
        }
        /* endregion */
      `]}}customElements.define("cc-picker",d);export{d as CcPicker};
//# sourceMappingURL=cc-picker.js.map
