https://www.eu-gleichbehandlungsstelle.de/_assets/9da1c2a6d746389c…/current/public/chunks/textarea-DwXssxSD.js

1import{i as t,g as e,d as r,A as s,b as i,x as a,e as o,v as n}from"./pp-accordion-CA6w9In6.js";import{o as h}from"./pp-facet-dropdown-FY1eeaHH.js";class l extends t{static get properties(){return{textareaId:{type:String,attribute:"textarea-id"},labelSrOnly:{type:Boolean,attribute:"label-sr-only"},maxLength:{type:Number,attribute:"max-length"},requiredText:{type:String,attribute:"required-text"},charCountText:{type:String,attribute:"char-count-text"},separatorText:{type:String,attribute:"separator-text"},countUnitText:{type:String,attribute:"count-unit-text"},charCount:{type:Number,state:!0},name:{type:String},label:{type:String},placeholder:{type:String},rows:{type:Number},cols:{type:Number},errormessage:{type:String},errorid:{type:String},required:{type:Boolean},autofocus:{type:Boolean},value:{type:String}}}constructor(){super(),this.rows=5,this.cols=10,this.labelSrOnly=!1,this.requiredText="Pflichtangabe",this._children=e(this,["pp-text-info"]),this._children["pp-text-info"]&&(this.infoTextId=`info-${r()}`)}connectedCallback(){super.connectedCallback(),this.charCount=this.value?this.value.length:0}get errorMessageClasses(){return{"border-b-static-17":!this.errormessage,"focus:border-static-1":!this.errormessage,"hover:border-static-1":!this.errormessage,"outline-static-1":!this.errormessage,"outline-offset-4":!this.errormessage,"border-static-4":this.errormessage,"focus:border-static-4":this.errormessage,"hover:border-static-4":this.errormessage,"outline-static-4":this.errormessage,"-outline-offset-1":this.errormessage}}get labelClasses(){return{"sr-only":this.labelSrOnly,"inline-block":!this.labelSrOnly,"mb-10":!this._children?.["pp-text-info"]}}get infoText(){return this._children?.["pp-text-info"]?i`
2            <div id="${this.infoTextId}" class="text-16 text-static-2 mb-10">
3                ${this._children?.["pp-text-info"]}
4            </div>`:s}get describedByIds(){const t=[this.errorid,this.infoTextId].filter(t=>t).join(" ");return""===t?void 0:t}countCharacters(t){this.charCount=t.target.value.length}get displayCharacterCount(){return this.maxLength?i`
5                <p class="mt-4 typ-body-4 text-static-2" aria-live="polite">${this.charCountText} ${this.charCount} ${this.separatorText} ${this.maxLength} ${this.countUnitText}</p>`:s}get fieldFeedback(){return this.maxLength||this.errormessage?i`
6            <div class="flex items-start justify-between gap-12">
7                ${a(this.errormessage,this.errorid)}
8                ${this.displayCharacterCount}
9            </div>
10        `:s}render(){return i`
11            <div class="mb-40 mt-0">
12                <label class="${o(this.labelClasses)} typ-body-4 text-static-2 focus:outline focus:outline-1" for="${this.textareaId}">
13                    ${this.label}${n(this.required,this.requiredText)}
14                </label>
15                ${this.infoText}
16                <textarea rows="${this.rows}" cols="${this.cols}" id="${this.textareaId}" name="${this.name}"
17                        class="${o(this.errorMessageClasses)} w-full border-b-2 pb-12 pt-8 pl-12 typ-body-4 text-static-16 leading-24 placeholder-static-16 focus:outline focus:outline-1"
18                        required="${h(this.required?"":void 0)}"
19                        maxlength="${h(this.maxLength?`${this.maxLength}`:void 0)}"
20                        autofocus="${h(this.autofocus)}"
21                        aria-describedby="${h(this.describedByIds)}"
22                        placeholder="${h(this.placeholder)}"
23                        @input="${this.maxLength?this.countCharacters:void 0}">${this.value}</textarea>
24                ${this.fieldFeedback}
25            </div>
26        `}createRenderRoot(){return this}}customElements.define("pp-textarea",l);export{l as default};