finpro/dist/chunk-XGOHBBAG.js

Design System

import{a as g}from"./chunk-AEVRCHAZ.js";import{a as b}from"./chunk-BHTRFUWD.js";import{a as u}from"./chunk-T72NEGXT.js";import{a as f}from"./chunk-7XLYVQDH.js";import{a}from"./chunk-ZO5WDGDN.js";import{a as s}from"./chunk-23UFIOHV.js";import{a as d}from"./chunk-2M6HTKCC.js";import{a as c,b as l,f as p,g as h,h as t,i as n,j as v}from"./chunk-GBPY57YZ.js";import{a as i}from"./chunk-NZ3RGSR6.js";var E=c`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--fp-color-border);--icon-color:var(--fp-color-content-tertiary);--text-color:var(--fp-color-content-primary);--height:var(--fp-size-5xl);--input-font:var(--fp-font-body-text-2);--line-height:var(--fp-font-body-text-2-line-height);--icon-size:var(--line-height);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--fp-size-s);--autofill-bg-color:var(--fp-color-accent-primary-background);display:flex;flex-direction:column;position:relative;gap:var(--fp-size-3xs)}.wrapper:focus-within{--border-color:var(--fp-color-primary);--icon-color:var(--fp-color-primary)}.wrapper.dirty.invalid{--border-color:var(--fp-color-danger);--icon-color:var(--fp-color-danger)}:host([size='large']) .wrapper{--height:var(--fp-size-6xl);--padding-vertical:var(--fp-size-s);--padding-horizontal:var(--fp-size-l)}:host([size='small']) .wrapper{--height:var(--fp-size-3xl);--input-font:var(--fp-font-body-text-3);--padding-vertical:var(--fp-size-4xs);--icon-size:var(--fp-font-body-text-3-line-height)}.wrapper:has(input:autofill){background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){background-color:var(--autofill-bg-color)}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--input-font);color:var(--fp-color-content-tertiary);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-wrapper{--border-size:1px;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--border-size));border-radius:4px}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:8px;flex-basis:var(--icon-size);align-self:center;height:var(--icon-size)}fp-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button fp-icon{display:none}fp-icon[name='eye']{display:inline-block}.password-visible fp-icon[name='eye']{display:none}.password-visible fp-icon[name='eye-off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--fp-font-body-text-3);padding:0 var(--padding-horizontal)}.hint p{padding:0;margin:0}::placeholder{color:var(--fp-color-content-tertiary);-webkit-text-fill-color:var(--fp-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host .wrapper:focus-within ::placeholder{color:var(--fp-color-content-tertiary);-webkit-text-fill-color:var(--fp-color-content-tertiary)}:host([disabled]) .input-wrapper{cursor:not-allowed;background-color:var(--fp-color-secondary-background);--text-color:var(--fp-color-content-passive)}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--fp-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--fp-font-caption);color:var(--fp-color-content-secondary);padding:0 var(--label-padding);background-color:var(--fp-color-primary-background);pointer-events:initial}:where(.has-icon:not(:focus-within),.has-icon:not(.has-value)) label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--fp-font-caption);color:var(--fp-color-content-secondary);padding:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--fp-color-danger)}.help-text{color:var(--fp-color-content-secondary)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon~.error-icon{display:none}`,m=E;var e=class extends u(p){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&f(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.passwordInput=!1}static get styles(){return[m]}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.internals.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisiblityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(r){this.value=r}inputHandler(r){let o=r.target.value;this.setValue(o),this.onInput(o)}changeHandler(r){let o=r.target.value;this.dirty=!0,this.setValue(o),this.onChange(o)}firstUpdated(){this.passwordInput=this.type==="password",this.setValue(this.value)}render(){let r=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
          ${this.validationMessage}
        </p>`,o=this.helpText?l`<p id="helpText" class="help-text">${this.helpText}</p>`:"",y=this.icon?l`<fp-icon class="custom-icon" name="${this.icon}"></fp-icon>`:"",x=this.label?l`<label for="input">${this.label}</label>`:"",w=this.passwordInput?l`<fp-button
          size="small"
          kind="neutral"
          variant="tertiary"
          class="${d({"reveal-button":!0,"password-visible":this.passwordVisible})}"
          aria-label="Toggle password reveal"
          @fp-click="${this.textVisiblityToggle}"
        >
          <fp-icon class="reveal-icon" slot="icon" name="eye"></fp-icon>
          <fp-icon class="reveal-icon" slot="icon" name="eye-off"></fp-icon>
        </fp-button>`:"",k={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":this.passwordInput||this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},z=this.passwordVisible?"text":"password",$=this.passwordInput?z:this.type;return l`<div class=${d(k)}>
      ${x}
      <div class="input-wrapper">
        <input
          id="input"
          type=${$}
          .value=${b(this.value)}
          placeholder="${a(this.placeholder)}"
          minlength="${a(this.minlength)}"
          maxlength="${a(this.maxlength)}"
          min="${a(this.min)}"
          max="${a(this.max)}"
          step="${a(this.step)}"
          ?required=${this.required}
          ?disabled=${this.disabled}
          @change=${this.changeHandler}
          @input=${this.inputHandler}
          aria-invalid=${this.checkValidity()?"false":"true"}
          aria-describedby=${a(this.helpText?"helpText":void 0)}
          aria-errormessage=${a(this.checkValidity()?void 0:"errorMessage")}
        />
        <div class="icon">
          ${w} ${y}
          <fp-icon class="error-icon" name="alert"></fp-icon>
        </div>
      </div>
      <div class="hint">${r} ${o}</div>
    </div>`}};e.formControlValidators=g,i([v("input")],e.prototype,"validationTarget",2),i([t({})],e.prototype,"name",2),i([t({})],e.prototype,"type",2),i([t({reflect:!0})],e.prototype,"label",2),i([t({})],e.prototype,"placeholder",2),i([t()],e.prototype,"value",2),i([t({type:Boolean})],e.prototype,"required",2),i([t({type:Number})],e.prototype,"minlength",2),i([t({type:Number})],e.prototype,"maxlength",2),i([t({type:Number})],e.prototype,"min",2),i([t({type:Number})],e.prototype,"max",2),i([t({type:Number})],e.prototype,"step",2),i([t({type:String})],e.prototype,"icon",2),i([t({type:String,reflect:!0})],e.prototype,"size",2),i([t({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([t({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),i([t({type:String,attribute:"invalid-text"})],e.prototype,"customInvalidText",2),i([t({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),i([s("fp-change")],e.prototype,"onChange",2),i([s("fp-input")],e.prototype,"onInput",2),i([s("fp-invalid")],e.prototype,"onInvalid",2),i([n()],e.prototype,"dirty",2),i([n()],e.prototype,"passwordVisible",2),i([n()],e.prototype,"passwordInput",2),e=i([h("fp-input")],e);export{e as a};
//# sourceMappingURL=chunk-XGOHBBAG.js.map