finpro/dist/chunk-MX7YEDGX.js

Design System

import{a as g}from"./chunk-T72NEGXT.js";import{a as i}from"./chunk-23UFIOHV.js";import{a as b}from"./chunk-2M6HTKCC.js";import{a as v}from"./chunk-JA3VZI2D.js";import{a as s,b as n,f,g as d,h as l,i as u,j as m}from"./chunk-GBPY57YZ.js";import{a as t}from"./chunk-NZ3RGSR6.js";var C=s`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--fp-font-title-3-medium);color:var(--fp-color-content-primary)}.options{display:flex;flex-flow:var(--fp-radio-direction,column) wrap;gap:16px;margin-block:var(--fp-size-xs)}`,x=C;var O=s`:host{display:inline-block;cursor:pointer;outline:0}.wrapper{outline:0}#label{display:flex;font:var(--fp-font-title-3-regular);height:var(--fp-size-m);line-height:normal;vertical-align:middle;margin-block:0;color:var(--fp-color-content-primary)}#label::before{content:'';display:inline-block;box-sizing:border-box;width:var(--fp-size-m);height:var(--fp-size-m);background-color:white;border-radius:var(--fp-border-radius-circle);border:solid 1px var(--fp-color-border);margin-right:var(--fp-size-2xs);vertical-align:middle}.selected #label::before{border-width:4px;border-color:var(--fp-color-primary)}:host(:hover) #label,.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label{color:var(--fp-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) #label{color:var(--fp-color-content-passive)}:host([disabled]) #label::before{background-color:var(--fp-color-secondary-background)}:host([disabled]) .selected #label::before{background-color:var(--fp-color-content-passive);border-color:var(--fp-color-secondary-background)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px white,0 0 0 3px var(--fp-color-primary)}`,E=O;var h="fp-radio",H="fp-checked",r=class extends v{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.handleFieldValueChange=e=>{let a=e.detail;this.selected=a===this.value}}static get styles(){return[E]}select(){this.selected=!0,this.onChecked(this.value)}get checked(){return this.selected}focus(){this.radioElement.tabIndex=0,this.radioElement.focus(),this.onFocus(this.value)}blur(){this.radioElement.tabIndex=-1,this.onBlur(this.value)}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(c),this.field||console.warn("fp-radio is designed to be used inside a fp-radio-group",this),(e=this.field)==null||e.addEventListener(p,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(p,this.handleFieldValueChange)}render(){let e=b({wrapper:!0,selected:this.selected});return n`<div
      class=${e}
      role="radio"
      aria-labelledby="label"
      aria-disabled=${this.disabled}
      aria-readonly=${this.disabled}
      @blur=${this.blur}
      @click=${this.select}>
      <p id="label"><slot></slot></p>
    </div>`}};t([l()],r.prototype,"name",2),t([l()],r.prototype,"value",2),t([l({type:Boolean,reflect:!0})],r.prototype,"disabled",2),t([u()],r.prototype,"selected",2),t([i("fp-checked")],r.prototype,"onChecked",2),t([i("fp-focus")],r.prototype,"onFocus",2),t([i("fp-blur")],r.prototype,"onBlur",2),t([m("[role=radio]")],r.prototype,"radioElement",2),r=t([d(h)],r);var c="fp-radio-group",p="fp-radio-change",o=class extends g(f){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[x]}get options(){return[].slice.call(this.querySelectorAll(h))}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let a=e.target;this.setValue(a.value),this.onChange(a.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset
      role="radiogroup"
      aria-labelledby="label"
      aria-required=${this.required}
    >
      <legend>${this.label}</legend>
      <div class="options" @fp-checked=${this.handleOptionChecked}>
        <slot></slot>
      </div>
    </fieldset>`}};t([l({type:String})],o.prototype,"label",2),t([l()],o.prototype,"value",2),t([l({type:Boolean,reflect:!0})],o.prototype,"required",2),t([i("fp-radio-change")],o.prototype,"onChange",2),o=t([d(c)],o);export{c as a,p as b,o as c,h as d,H as e,r as f};
//# sourceMappingURL=chunk-MX7YEDGX.js.map