import{html as e,css as r}from"lit";import{classMap as t}from"lit/directives/class-map.js";import{createRef as o,ref as i}from"lit/directives/ref.js";import{C as l}from"./form-utils-4685920e.js";import{RequiredValidator as a}from"./lib/form/validation.js";import{i18n as s}from"./translation.js";import{CcSelectEvent as n}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},placeholder:{type:String},required:{type:Boolean},resetValue:{type:String,attribute:"reset-value"},value:{type:String}}}static reactiveValidationProperties=["required","options"];constructor(){super(),this.disabled=!1,this.inline=!1,this.label=null,this.options=[],this.placeholder=null,this.required=!1,this.resetValue="",this.value=null,this._errorRef=o(),this._selectRef=o()}_getFormControlElement(){return this._selectRef.value}_getErrorElement(){return this._errorRef.value}_getErrorMessages(){return c}_getValidator(){return this.required?new a:null}_getReactiveValidationProperties(){return d.reactiveValidationProperties}focus(){this._selectRef.value?.focus()}_onSelectInput(e){this.value=e.target.value,this.dispatchEvent(new n(this.value))}updated(e){(e.has("value")||e.has("options"))&&(this.shadowRoot.querySelector("select").value=this.value),super.updated(e)}render(){const r=null!=this.errorMessage&&""!==this.errorMessage;return e`
      <label for="input-id">
        <span class="label-text">${this.label}</span>
        ${this.required?e` <span class="required">${s("cc-select.required")}</span> `:""}
      </label>
      <div class="select-wrapper ${t({disabled:this.disabled})}">
        <select
          id="input-id"
          class="${t({error:r})}"
          ?disabled=${this.disabled}
          aria-describedby="help-id error-id"
          @input=${this._onSelectInput}
          .value=${this.value}
          ${i(this._selectRef)}
        >
          ${null!=this.placeholder&&""!==this.placeholder?e` <option value="" ?disabled=${this.required}>${this.placeholder}</option> `:""}
          ${this.options.map((r=>e` <option value=${r.value}>${r.label}</option> `))}
        </select>
      </div>

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

      ${r?e` <p class="error-container" id="error-id" ${i(this._errorRef)}>${this.errorMessage}</p>`:""}
    `}static get styles(){return[r`
        /* stylelint-disable no-duplicate-selectors */
        :host {
          display: inline-block;
        }

        /* region Common to cc-input-* & cc-select */

        :host([inline]) {
          align-items: baseline;
          display: inline-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;
        }

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

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

        label {
          align-items: flex-end;
          cursor: pointer;
          display: flex;
          gap: 2em;
          justify-content: space-between;
          line-height: 1.25em;
          padding-block-end: var(--cc-form-label-gap, 0.35em);
        }

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

        :host([inline]) label {
          flex-direction: column;
          gap: 0;
          grid-area: label;
          line-height: normal;
          padding: 0;
        }

        .required {
          color: var(--cc-color-text-weak);
          font-size: 0.9em;
          font-variant: small-caps;
        }

        :host([inline]) .required {
          font-size: 0.8em;
        }

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

        .error-container {
          color: var(--cc-color-text-danger);
          margin: 0.5em 0 0;
        }
        /* endregion */

        /* RESET */

        select {
          -moz-appearance: none;
          -webkit-appearance: none;
          appearance: none;
          background: none;
          border: none;
          color: inherit;
          cursor: inherit;
          font-family: inherit;
          font-size: inherit;
          line-height: inherit;
          margin: 0;
          padding: 0;
          width: 100%;
        }

        select {
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral-strong, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          grid-area: input;
          height: 2em;
          padding: 0 3em 0 0.5em;
        }

        select:hover {
          border-color: var(--cc-color-border-neutral-hovered, #777);
          cursor: pointer;
        }

        select:focus {
          border-color: var(--cc-color-border-neutral-focused, #777);
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        select.error {
          border-color: var(--cc-color-border-danger) !important;
        }

        select.error:focus {
          outline: var(--cc-focus-outline-error, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .select-wrapper {
          display: inline-flex;
          position: relative;
          vertical-align: top;
          width: 100%;
        }

        .select-wrapper::after {
          background-color: var(--cc-color-bg-primary, #000);
          clip-path: polygon(100% 0%, 0 0%, 50% 100%);
          content: '';
          height: 0.5em;
          pointer-events: none;
          position: absolute;
          right: 0.5em;
          top: 50%;
          transform: translateY(-50%);
          width: 0.8em;
        }

        .disabled::after {
          background-color: hsl(0deg 0% 62%);
        }

        select[disabled] {
          background: var(--cc-color-bg-neutral-disabled);
          border-color: var(--cc-color-border-neutral-disabled, #777);
          color: var(--cc-color-text-weak);
          opacity: 1;
          pointer-events: none;
        }
      `]}}window.customElements.define("cc-select",d);export{d as CcSelect};
//# sourceMappingURL=cc-select.js.map
