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

Trendyol Baklava Design System

import{b as k}from"./chunk-OSNB4BPE.js";import{a as $}from"./chunk-YOV2DMM7.js";import{a as z}from"./chunk-DJOD4BTL.js";import{a as w}from"./chunk-6LT7O7T2.js";import{a as c}from"./chunk-GRL4DWKG.js";import{a as b,b as a,c as u,d as m}from"./chunk-IRDH7CN2.js";import{a as s}from"./chunk-DINNT5P2.js";import{a as f,b as y,c as x}from"./chunk-7GK5LKBV.js";import{a as v,b as d,c as g,f as p}from"./chunk-4OT5AMS5.js";import{c as r}from"./chunk-VO7C5OZC.js";var C="important",I=" !"+C,S=y(class extends x{constructor(o){var l;if(super(o),o.type!==f.ATTRIBUTE||o.name!=="style"||((l=o.strings)===null||l===void 0?void 0:l.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(o){return Object.keys(o).reduce((l,e)=>{let i=o[e];return i==null?l:l+`${e=e.includes("-")?e:e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`},"")}update(o,[l]){let{style:e}=o.element;if(this.ht===void 0){this.ht=new Set;for(let i in l)this.ht.add(i);return this.render(l)}this.ht.forEach(i=>{l[i]==null&&(this.ht.delete(i),i.includes("-")?e.removeProperty(i):e[i]="")});for(let i in l){let n=l[i];if(n!=null){this.ht.add(i);let h=typeof n=="string"&&n.endsWith(I);i.includes("-")||h?e.setProperty(i,h?n.slice(0,-11):n,h?C:""):e[i]=n}}return g}});var L=v`:host{display:inline-block;width:200px;position:relative}.wrapper{--row-count:1;--maxrow-count: ;--line-height:var(--bl-font-title-3-line-height);--scroll-height:var(--line-height);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--default-scroll-height:calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));--height:max(var(--scroll-height), var(--default-scroll-height));--input-font:var(--bl-font-body-text-2);--border-radius:var(--bl-size-3xs);--border-color:var(--bl-color-neutral-lighter);--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.input-wrapper{border:solid var(--border-size) var(--border-color);border-radius:var(--border-radius);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));padding-top:var(--padding-vertical);display:flex;box-sizing:border-box;background-color:var(--background-color);margin:0;width:0;min-width:100%}textarea{--parent-padding:calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));width:100%;align-self:stretch;outline:none;font:var(--input-font);padding:0 calc(var(--padding-horizontal) - var(--border-size));padding-bottom:var(--padding-vertical);margin:0 calc(-1 * var(--parent-padding));border:none;border-radius:var(--border-radius);color:var(--bl-color-neutral-darker);resize:vertical;background-color:transparent;display:block}:host([size="large"]) .wrapper{--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size="small"]) .wrapper{--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--input-font:var(--bl-font-body-text-3);--line-height:var(--bl-font-title-4-line-height)}textarea:disabled{background-color:var(--bl-color-neutral-lightest);color:var(--bl-color-neutral-light);cursor:not-allowed}:host([disabled]) .wrapper{--background-color:var(--bl-color-neutral-lightest)}:host([expand]) textarea{overflow:hidden;resize:none;height:var(--height)}:host([expand][max-rows]) textarea{--maxrow-height:calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));overflow-y:scroll;height:min(var(--height), var(--maxrow-height))}.wrapper:focus-within{--border-color:var(--bl-color-primary)}.dirty.max-len-invalid,.dirty.invalid{--border-color:var(--bl-color-danger)}:host([label]) ::placeholder{color:transparent;transition:color ease-out 0.4s}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{max-width:max-content;position:absolute;transition:all ease-in 0.1s;font:var(--bl-font-title-3-regular);top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);pointer-events:none;color:var(--bl-color-neutral-light)}.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}:where(.wrapper:focus-within, .wrapper.has-value) label{top:0;left:var(--padding-horizontal);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]) :where(.wrapper:focus-within, .wrapper.has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host ::placeholder,:host([label-fixed]) ::placeholder{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);background-color:initial;padding:0}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}:host([character-counter]) .hint,:host([help-text]) .hint,.dirty.invalid .hint{display:flex;gap:var(--bl-size-3xs)}.hint > *{margin:0;padding:0}.help-text,.invalid-text{flex:1}.counter-text{color:var(--bl-color-neutral-dark);margin-left:auto}:where(.max-len-invalid, .dirty.invalid) .hint > .counter-text{color:var(--bl-color-danger)}.dirty.invalid label{color:var(--bl-color-danger)}.invalid-text{display:none;color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:where(.dirty.max-len-invalid, .dirty.invalid) .hint > .invalid-text{display:inline-block}.dirty.invalid .hint > .help-text{display:none}`,E=L;var t=class extends z(p){constructor(){super(...arguments);this.name="";this.required=!1;this.disabled=!1;this.expand=!1;this.size="medium";this.labelFixed=!1;this.characterCounter=!1;this.value="";this.rows=4;this.autofocus=!1;this.spellchecker="false";this.customScrollHeight=null;this.inputId=Math.random().toString(36).substring(2);this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1}static get styles(){return[E]}connectedCallback(){var e;super.connectedCallback(),(e=this.internals.form)==null||e.addEventListener("submit",()=>{this.reportValidity()})}inputHandler(e){this.autoResize();let i=e.target.value;this.value=i,this.onInput(i)}changeHandler(e){let i=e.target.value;this.dirty=!0,this.value=i,this.onChange(i)}firstUpdated(){this.setValue(this.value),this.autoResize()}async updated(e){e.has("rows")&&this.autoResize(),e.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(e){this.value=e}validityCallback(){var e;return this.customInvalidText||((e=this.validationTarget)==null?void 0:e.validationMessage)}autoResize(){if(!this.expand)return;this.validationTarget.style.height="auto";let e=this.validationTarget.scrollHeight;this.customScrollHeight=`${e}px`,this.validationTarget.style.removeProperty("height")}render(){let e=this.internals.validity.tooLong,i=this.checkValidity()?"":d`<p class="invalid-text">${this.validationMessage}</p>`,n=this.helpText?d`<p class="help-text">${this.helpText}</p>`:"",h=this.label?d`<label for="${this.inputId}">${this.label}</label>`:"",M=this.characterCounter&&this.maxlength?`${this.value.length}/${this.maxlength}`:this.characterCounter?`${this.value.length}`:"",R=this.characterCounter?d`<p class="counter-text">${M}</p>`:"",H={wrapper:!0,"has-value":this.value!==null&&this.value!=="",dirty:this.dirty,"max-len-invalid":e,invalid:!this.checkValidity()},V={"--row-count":`${this.rows}`,"--maxrow-count":this.maxRows?`${this.maxRows}`:null,"--scroll-height":this.customScrollHeight};return d`
      <div style=${S(V)} class=${w(H)}>
        ${h}
        <fieldset class="input-wrapper">
          <legend><span>${this.label}</span></legend>
          <textarea
            id="${this.inputId}"
            name="${s(this.name)}"
            .value=${$(this.value)}
            ?autofocus=${this.autofocus}
            autocomplete="${s(this.autocomplete)}"
            inputmode="${s(this.inputmode)}"
            placeholder="${s(this.placeholder)}"
            minlength="${s(this.minlength)}"
            rows="${s(this.rows)}"
            ?required=${this.required}
            ?disabled=${this.disabled}
            spellcheck="${this.spellchecker}"
            @change=${this.changeHandler}
            @input=${this.inputHandler}
            @invalid=${this.onError}
          >
          </textarea>
        </fieldset>
        <div class="hint">${i}${n}${R}</div>
      </div>
    `}};t.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0},t.formControlValidators=k,r([m("textarea")],t.prototype,"validationTarget",2),r([a({type:String,reflect:!0})],t.prototype,"name",2),r([a({type:Boolean,reflect:!0})],t.prototype,"required",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([a({type:Boolean,reflect:!0})],t.prototype,"expand",2),r([a({type:Number,reflect:!0,attribute:"max-rows"})],t.prototype,"maxRows",2),r([a({type:String,reflect:!0})],t.prototype,"size",2),r([a({reflect:!0})],t.prototype,"label",2),r([a({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),r([a({reflect:!0})],t.prototype,"placeholder",2),r([a({type:Boolean,attribute:"character-counter",reflect:!0})],t.prototype,"characterCounter",2),r([a({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),r([a({type:String,attribute:"invalid-text",reflect:!0})],t.prototype,"customInvalidText",2),r([a({type:Number,reflect:!0})],t.prototype,"minlength",2),r([a({type:Number,reflect:!0})],t.prototype,"maxlength",2),r([a({reflect:!0})],t.prototype,"value",2),r([a({type:Number,reflect:!0})],t.prototype,"rows",2),r([a({type:String,reflect:!0})],t.prototype,"inputmode",2),r([a({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),r([a({type:String,reflect:!0})],t.prototype,"autocomplete",2),r([a({type:String,reflect:!0,attribute:"spellcheck"})],t.prototype,"spellchecker",2),r([c("bl-input")],t.prototype,"onInput",2),r([c("bl-change")],t.prototype,"onChange",2),r([c("bl-invalid")],t.prototype,"onInvalid",2),r([u()],t.prototype,"customScrollHeight",2),r([u()],t.prototype,"dirty",2),t=r([b("bl-textarea")],t);export{t as a};
/*! Bundled license information:

lit-html/directives/style-map.js:
  (**
   * @license
   * Copyright 2018 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   *)
*/
//# sourceMappingURL=chunk-FAMBVSX3.js.map