@trendyol/baklava/dist/chunk-OQ22A5U6.js

Trendyol Baklava Design System

import{a as f}from"./chunk-OSNB4BPE.js";import{a as m}from"./chunk-YOV2DMM7.js";import{a as g}from"./chunk-DJOD4BTL.js";import{a as u}from"./chunk-R5GCM62W.js";import{a as p}from"./chunk-6LT7O7T2.js";import{a as n}from"./chunk-GRL4DWKG.js";import{a as v,b as i,c,d as b}from"./chunk-IRDH7CN2.js";import{a as r}from"./chunk-DINNT5P2.js";import{a as h,b as l,f as d}from"./chunk-4OT5AMS5.js";import{c as t}from"./chunk-VO7C5OZC.js";var S=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size="large"]) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size="small"]) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;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(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) -
        var(--border-size)
    ) 0 calc(
      var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) -
        var(--border-size)
    );background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in 0.1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(
    var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) +
      var(--padding-vertical)
  )}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input::-webkit-calendar-picker-indicator{display:none}input::-moz-calendar-picker-indicator{display:none}input:autofill{background-color:var(--autofill-bg-color);/**
   * Some browsers doesn't allow setting background-color
   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**
   * Some browsers doesn't allow setting background-color
   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
   */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name="eye_on"]{display:inline-block}.password-visible bl-icon[name="eye_on"]{display:none}.password-visible bl-icon[name="eye_off"]{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}: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}`,y=S;var C={date:"calendar","datetime-local":"calendar",month:"calendar",week:"calendar",time:"clock",search:"search"},e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=a=>{a.code==="Enter"&&this.form&&u(this.form)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(a){this._customInvalidText=a,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var a;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),(a=this.form)==null||a.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.validationTarget.showPicker()}validityCallback(){var a;return this.onInvalid(this.internals.validity),this.customInvalidText||((a=this.validationTarget)==null?void 0:a.validationMessage)}async forceCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(a){let o=a.target.value;this.value=o,this.onInput(o)}changeHandler(a){let o=a.target.value;this.dirty=!0,this.value=o,this.onChange(o)}firstUpdated(){this.setValue(this.value),this.icon||(this.icon=C[this.type])}async updated(a){a.size>0&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}render(){let a=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>`:"",x=l`
      <slot name="icon">
        ${this.icon?l`<bl-icon name="${this.icon}"></bl-icon>`:l`<bl-icon class="error-icon" name="alert"></bl-icon>`}
      </slot>
    `,w=this.label?l`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",k=s?l`<bl-button
          size="small"
          kind="neutral"
          variant="tertiary"
          class="${p({"reveal-button":!0,"password-visible":this.passwordVisible})}"
          aria-label="Toggle password reveal"
          @bl-click="${this.textVisibilityToggle}"
        >
          <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
          <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
        </bl-button>`:"",z=this.icon||this._hasIconSlot,$={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":s||z||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},T=this.passwordVisible?"text":"password",V=s?T:this.type;return l`<div class=${p($)}>
      ${w}
      <fieldset class="input-wrapper">
        <legend><span>${this.label}</span></legend>
        <input
          id=${this.inputId}
          type=${V}
          .value=${m(this.value)}
          inputmode="${r(this.inputmode)}"
          ?autofocus=${this.autofocus}
          autocomplete="${r(this.autocomplete)}"
          placeholder="${r(this.placeholder)}"
          minlength="${r(this.minlength)}"
          maxlength="${r(this.maxlength)}"
          min="${r(this.min)}"
          max="${r(this.max)}"
          pattern="${r(this.pattern)}"
          step="${r(this.step)}"
          ?required=${this.required}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          @change=${this.changeHandler}
          @input=${this.inputHandler}
          aria-invalid=${this.checkValidity()?"false":"true"}
          aria-describedby=${r(this.helpText?"helpText":void 0)}
          aria-errormessage=${r(this.checkValidity()?void 0:"errorMessage")}
        />
        <div class="icon">${k} ${x}</div>
      </fieldset>
      <div class="hint">${a} ${o}</div>
    </div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=f,t([b("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({reflect:!0})],e.prototype,"min",2),t([i({reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,reflect:!0})],e.prototype,"readonly",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([v("bl-input")],e);export{e as a};
//# sourceMappingURL=chunk-OQ22A5U6.js.map