import{LitElement as e,html as l,css as t}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{repeat as r}from"lit/directives/repeat.js";import{CcSelectEvent as a,CcMultiSelectEvent as s}from"./components/common.events.js";class n extends e{static get properties(){return{choices:{type:Array},disabled:{type:Boolean},hideText:{type:Boolean,attribute:"hide-text"},inline:{type:Boolean,reflect:!0},legend:{type:String},multipleValues:{type:Array,attribute:"multiple-values",reflect:!0},name:{type:String,reflect:!0},subtle:{type:Boolean},value:{type:String,reflect:!0}}}constructor(){super(),this.choices=null,this.disabled=!1,this.hideText=!1,this.inline=!1,this.legend=null,this.multipleValues=null,this.name=null,this.subtle=!1,this.value=null}_onChange(e){if(null==this.multipleValues)this.value=e.target.value,this.dispatchEvent(new a(this.value));else{const l=this.choices.filter((({value:l})=>l===e.target.value?e.target.checked:this.multipleValues.includes(l))).map((({value:e})=>e));this.multipleValues=l,this.dispatchEvent(new s(l))}}render(){const e={disabled:this.disabled,enabled:!this.disabled,"display-normal":!this.subtle,"display-subtle":this.subtle,"mode-single":null==this.multipleValues,"mode-multiple":null!=this.multipleValues},t=null==this.multipleValues?"radio":"checkbox",a=e=>null!=this.multipleValues?this.multipleValues.includes(e):this.value===e,s=null!=this.legend&&this.legend.length>0;return l`
      <div role="group" aria-labelledby=${o(s?"legend":void 0)} class="group">
        ${s?l`<div id="legend">${this.legend}</div>`:""}
        <div class="toggle-group ${i(e)}">
          ${r(this.choices,(({value:e})=>e),(({label:e,image:i,value:r})=>l`
              <!--
              If the name=null, the name of the native <input> will be 'toggle'. In order to navigate through a group of inputs using the arrow keys, each <input> must have the same name value.
            -->
              <input
                type=${t}
                name=${this.name??"toggle"}
                .value=${r}
                id=${r}
                ?disabled=${this.disabled}
                .checked=${a(r)}
                @change=${this._onChange}
                aria-label=${o(null!=i&&this.hideText?e:void 0)}
              />
              <label for=${r} title=${o(null!=i&&this.hideText?e:void 0)}>
                ${null!=i?l` <img src=${i} alt="" /> `:""}
                ${null!=i&&this.hideText?"":l` <span>${e}</span> `}
              </label>
            `))}
        </div>
      </div>
    `}static get styles(){return[t`
        /* stylelint-disable no-duplicate-selectors */
        :host {
          --cc-toggle-color: var(--cc-color-bg-primary, #000);
          --cc-toggle-img-filter: none;
          --cc-toggle-img-filter-selected: none;
          --height: 2em;

          display: inline-flex;
        }

        .group {
          display: flex;
          flex-direction: column;
          row-gap: var(--cc-form-label-gap, 0.35em);
        }

        :host([inline]) .group {
          align-items: center;
          column-gap: var(--cc-form-label-gap-inline, 0.75em);
          flex-direction: row;
        }

        #legend {
          color: var(--cc-toggle-legend-color, inherit);
          font-size: var(--cc-toggle-legend-font-size, inherit);
          font-weight: var(--cc-toggle-legend-font-weight, normal);
          line-height: 1.25em;
        }

        .toggle-group {
          background-color: var(--cc-color-bg-default, #fff);
          border-radius: var(--cc-border-radius-small, 0.15em);
          box-sizing: border-box;
          display: flex;
          height: var(--height);
          line-height: 1.25;
          overflow: visible;
          width: max-content;
        }

        /* We hide the <input> and only display the related <label> */

        input {
          -moz-appearance: none;
          -webkit-appearance: none;
          appearance: none;
          border: 0;
          display: block;
          height: 0;
          margin: 0;
          outline: none;
          width: 0;
        }

        label {
          /* used around the background */
          --space: 2px;
          --border-radius: var(--cc-toggle-border-radius, 0.15em);

          align-items: center;
          border-color: var(--cc-toggle-color);
          border-style: solid;
          color: var(--color-txt);
          cursor: pointer;
          display: grid;
          font-size: 0.85em;
          font-weight: var(--cc-toggle-font-weight, bold);
          gap: 0.6em;
          grid-auto-flow: column;
          padding: 0 0.6em;
          position: relative;
          text-transform: var(--cc-toggle-text-transform, uppercase);
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }

        label {
          border-width: 1px 0;
        }

        label:first-of-type {
          border-left-width: 1px;
          border-radius: var(--border-radius) 0 0 var(--border-radius);
        }

        label:last-of-type {
          border-radius: 0 var(--border-radius) var(--border-radius) 0;
          border-right-width: 1px;
        }

        label:not(:first-of-type) {
          margin-left: calc(var(--space) * -1);
        }

        /* Used to display a background behind the text */

        label::before {
          background-color: var(--cc-color-bg);
          border-radius: var(--cc-border-radius-small, 0.15em);
          bottom: var(--space);
          content: '';
          display: block;
          left: var(--space);
          position: absolute;
          right: var(--space);
          top: var(--space);
          z-index: 0;
        }

        /* Used to display a bottom line in display subtle */

        .display-subtle label::after {
          background-color: var(--color-subtle-border);
          bottom: 0;
          content: '';
          display: block;
          height: var(--space);
          left: 0.25em;
          position: absolute;
          right: 0.25em;
          z-index: 0;
        }

        label span,
        label img {
          z-index: 0;
        }

        img {
          display: block;
          height: 1.45em;
          width: 1.45em;
        }

        /* NOT SELECTED */

        label {
          --cc-color-bg: var(--cc-color-bg-default, #fff);
          --color-txt: var(--cc-color-text-default);
        }

        img {
          filter: var(--cc-toggle-img-filter);
        }

        /* DISABLED */

        .toggle-group.disabled {
          opacity: var(--cc-opacity-when-disabled);
        }

        .disabled label {
          cursor: default;
        }

        /* HOVERED */

        .display-normal input:not(:checked):enabled:hover + label,
        .display-subtle input:enabled:hover + label {
          --cc-color-bg: var(--cc-color-bg-neutral-hovered);
        }

        /* FOCUS */

        .toggle-group.mode-single.enabled:not(:hover):focus-within,
        .toggle-group.mode-multiple.enabled:not(:hover) input:enabled:focus + label {
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .toggle-group.mode-multiple.enabled:not(:hover) input:enabled:focus + label {
          z-index: 1;
        }

        /* ACTIVE */

        input:enabled:active + label::before {
          transform: scale(0.95);
        }

        /* SELECTED */

        input:checked + label img {
          filter: var(--cc-toggle-img-filter-selected);
        }

        .display-normal input:checked + label {
          --cc-color-bg: var(--cc-toggle-color);
          --color-txt: var(--cc-color-text-inverted, #fff);
        }

        .display-subtle input:checked + label {
          --color-txt: var(--cc-toggle-color);
          --color-subtle-border: var(--cc-toggle-color);
        }
      `]}}window.customElements.define("cc-toggle",n);export{n as CcToggle};
//# sourceMappingURL=cc-toggle.js.map
