finpro/dist/chunk-UOVGZ4EU.js

Design System

import{a as b}from"./chunk-BHTRFUWD.js";import{a as d}from"./chunk-T72NEGXT.js";import{a as v}from"./chunk-ZO5WDGDN.js";import{a}from"./chunk-23UFIOHV.js";import{a as c}from"./chunk-JA3VZI2D.js";import{a as s,b as n,g as l,h as r,j as m}from"./chunk-GBPY57YZ.js";import{a as t}from"./chunk-NZ3RGSR6.js";var E=s`:host{display:inline-block;vertical-align:middle}:host *{outline:0}label{display:flex;gap:var(--fp-size-2xs);color:var(--fp-color-secondary);font:var(--fp-font-title-3);cursor:pointer;user-select:none}.label{word-break:break-all}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--fp-size-l);height:var(--fp-size-l);min-width:var(--fp-size-l);min-height:var(--fp-size-l);max-width:var(--fp-size-l);max-height:var(--fp-size-l);border:1px solid var(--fp-color-border);border-radius:var(--fp-border-radius-xs);color:var(--fp-color-content-primary-contrast);font-size:var(--fp-font-size-2xs);line-height:100%;background-color:var(--fp-color-primary-background)}:host([checked]) .label,:host(:hover) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label{color:var(--fp-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--fp-color-primary);border:0}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--fp-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--fp-color-secondary-background)}:host(:not([disabled])) input:focus-visible+.check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--fp-color-primary)}`,g=E;var O=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-checkbox-direction,column) wrap;gap:var(--fp-size-l);margin-block:var(--fp-size-s)}`,k=O;var h="fp-checkbox-group",f="fp-checkbox-group-change",o=class extends d(c){constructor(){super(...arguments);this.value=[];this.required=!1;this.focusedOptionIndex=0}static get styles(){return[k]}get options(){return[].slice.call(this.querySelectorAll(p))}get checkedOptions(){return this.options.filter(e=>e.checked).map(e=>e.value)}get availableOptions(){return this.options.filter(e=>!e.disabled)}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("keydown",this.handleKeyDown)}updated(e){e.has("value")&&(this.setValue(this.checkedOptions.join(",")),this.onChange(this.value))}handleOptionChecked(){this.value=this.checkedOptions}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if(e.key==="Tab"){if(e.shiftKey?this.focusedOptionIndex--:this.focusedOptionIndex++,this.focusedOptionIndex===this.availableOptions.length){this.tabIndex=0,this.focusedOptionIndex=0;return}}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset role="group" aria-labelledby="label" aria-required=${this.required}>
      <legend id="label">${this.label}</legend>
      <div class="options" @fp-checkbox-change=${this.handleOptionChecked}>
        <slot></slot>
      </div>
    </fieldset>`}};t([r({type:String})],o.prototype,"label",2),t([r({type:Array,reflect:!0})],o.prototype,"value",2),t([r({type:Boolean,reflect:!0})],o.prototype,"required",2),t([a("fp-checkbox-group-change")],o.prototype,"onChange",2),o=t([l(h)],o);var p="fp-checkbox",i=class extends d(c){constructor(){super(...arguments);this.checked=!1;this.required=!1;this.disabled=!1;this.indeterminate=!1;this.handleFieldValueChange=e=>{this.checked=e.detail.includes(this.value)}}static get styles(){return[g]}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(h),(e=this.field)==null||e.addEventListener(f,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(f,this.handleFieldValueChange)}updated(e){e.has("checked")&&this.required&&this.checked&&this.setValue(this.value)}update(e){super.update(e),this.indeterminate&&this.checked&&(this.checked=!1,this.requestUpdate("checked",!0))}focus(){this.checkboxElement.tabIndex=0,this.checkboxElement.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.field&&(this.checkboxElement.tabIndex=-1)}handleChange(e){let u=e.target;this.checked=u.checked,this.onChange(u.checked),this.indeterminate=!1}render(){let e="";return this.checked&&(e="check"),this.indeterminate&&(e="minus"),n`
      <label>
        <input
          type="checkbox"
          .checked=${b(this.checked)}
          ?disabled=${this.disabled}
          aria-required=${this.required}
          aria-labelledby="label"
          aria-readonly=${this.disabled}
          .indeterminate=${this.indeterminate}
          @change=${this.handleChange}
          value=${v(this.value)}
          @blur=${this.blur}
        />
        <div class="check-mark">${e?n`<fp-icon name="${e}"></fp-icon>`:null}</div>
        <span class="label"><slot></slot></span>
      </label>
    `}};t([r({type:Boolean,reflect:!0})],i.prototype,"checked",2),t([r()],i.prototype,"value",2),t([r({type:Boolean,reflect:!0})],i.prototype,"required",2),t([r({type:Boolean,reflect:!0})],i.prototype,"disabled",2),t([r({type:Boolean,reflect:!0})],i.prototype,"indeterminate",2),t([a("fp-checkbox-change")],i.prototype,"onChange",2),t([a("fp-focus")],i.prototype,"onFocus",2),t([a("fp-blur")],i.prototype,"onBlur",2),t([m("[type=checkbox]")],i.prototype,"checkboxElement",2),i=t([l(p)],i);export{p as a,i as b,h as c,f as d,o as e};
//# sourceMappingURL=chunk-UOVGZ4EU.js.map