@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
1 lines • 8.81 kB
JavaScript
import{r as t,c as e,h as a,a as r,g as o}from"./p-d52b3602.js";import{c as s}from"./p-c608c6dc.js";import{g as i,e as l}from"./p-086c9d13.js";import{s as n}from"./p-c5a89792.js";const c=class{constructor(a){t(this,a),this.scaleInput=e(this,"scale-input",7),this.scaleInputLegacy=e(this,"scaleInput",7),this.scaleChange=e(this,"scale-change",7),this.scaleChangeLegacy=e(this,"scaleChange",7),this.scaleFocus=e(this,"scale-focus",7),this.scaleFocusLegacy=e(this,"scaleFocus",7),this.scaleBlur=e(this,"scale-blur",7),this.scaleBlurLegacy=e(this,"scaleBlur",7),this.scaleKeyDown=e(this,"scale-keydown",7),this.scaleKeyDownLegacy=e(this,"scaleKeyDown",7),this.name="",this.label="",this.helperText="",this.status="",this.invalid=!1,this.variant="informational",this.placeholder="",this.value="",this.hasFocus=!1,this.internalId=i(),this.handleInput=t=>{const e=t.target;e&&(this.value=e.value||"",this.emitChange()),l(this,"scaleInput",t)},this.handleChange=t=>{const e=t.target;e&&(this.value=e.value||"",this.emitChange())},this.handleFocus=()=>{l(this,"scaleFocus"),this.hasFocus=!0},this.handleBlur=()=>{l(this,"scaleBlur"),this.hasFocus=!1},this.handleKeyDown=t=>{l(this,"scaleKeyDown",t)}}componentWillLoad(){null==this.inputId&&(this.inputId="input-textarea-"+this.internalId)}componentDidRender(){""!==this.status&&n({tag:"deprecated",message:'Property "status" is deprecated. Please use the "invalid" property!',type:"warn",source:this.hostElement})}emitChange(){l(this,"scaleChange",{value:null==this.value?this.value:this.value.toString()})}render(){const t="error"===this.status||this.invalid?{"aria-invalid":!0}:{},e=`helper-message-${this.internalId}`,o={"aria-describedBy":e},s=this.readonly?{readonly:"readonly"}:{};return a(r,null,a("div",{class:this.getCssClassMap()},a("div",{class:"textarea__wrapper",onClick:()=>this.focusableElement.focus(),style:!!this.resize&&"horizontal"===this.resize&&{width:"max-content"}},a("label",{class:"textarea__label",htmlFor:this.inputId},this.label),a("textarea",Object.assign({class:"textarea__control",style:!!this.resize&&{resize:this.resize},value:this.value},this.name?{name:this.name}:{},this.inputAutofocus?{autofocus:"true"}:{},{required:this.required,minLength:this.minLength,maxLength:this.maxLength,id:this.inputId,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown},this.placeholder?{placeholder:this.placeholder}:{},{disabled:this.disabled},s,this.rows?{rows:this.rows}:{},this.cols?{cols:this.cols}:{},t,this.helperText?o:{},{ref:t=>this.focusableElement=t}))),(!!this.helperText||!!this.counter)&&a("div",{class:"textarea__meta",id:e,"aria-live":"polite","aria-relevant":"additions removals"},!!this.helperText&&a("scale-helper-text",{helperText:this.helperText,variant:this.invalid?"danger":this.variant}),this.counter&&a("div",{class:"textarea__counter"},this.value?String(this.value).length:0," /"," ",this.maxLength))))}getCssClassMap(){return s("textarea",this.hasFocus&&"textarea--has-focus",this.resize&&`textarea--resize-${this.resize}`,this.disabled&&"textarea--disabled",this.transparent&&"textarea--transparent",this.status&&`textarea--status-${this.status}`,this.invalid&&"textarea--status-error",this.variant&&`textarea--variant-${this.variant}`,this.readonly&&"textarea--readonly",null!=this.value&&""!==this.value&&"animated")}get hostElement(){return o(this)}};c.style="scale-textarea{--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--border:var(--telekom-line-weight-standard) solid\n var(--telekom-color-ui-border-standard);--border-error:var(--telekom-line-weight-highlight) solid\n var(--telekom-color-functional-danger-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--background-color-hover:var(--telekom-color-ui-state-fill-hovered);--background-color-disabled:none;--focus-outline:var(--telekom-line-weight-highlight) solid\n var(--telekom-color-functional-focus-standard);--spacing-x-control:var(--telekom-spacing-composition-space-05);--spacing-bottom-control:var(--telekom-spacing-composition-space-05);--spacing-top-control:calc(\n 1.125rem - var(--telekom-spacing-composition-space-01)\n );--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:transparent;--border-color-readonly:transparent;--background-readonly:var(--telekom-color-ui-disabled);--font-weight-meta:var(--telekom-typography-font-weight-bold);--font-size-meta:var(--telekom-typography-font-size-small);--line-height-meta:var(--telekom-typography-line-spacing-standard);--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--color-meta-error:var(--telekom-color-text-and-icon-functional-danger);--spacing-control:0 calc(2rem - var(--telekom-spacing-composition-space-01))\n 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));--transition-control:var(--transition);--background-control:var(--telekom-color-ui-state-fill-standard);--transition-counter:var(--transition);--color-counter-error:var(--color-meta-error);--transition-placeholder:var(--transition);--color-placeholder:var(--telekom-color-text-and-icon-additional);--color-label:var(--telekom-color-text-and-icon-additional);--color-label-readonly:var(--telekom-color-text-and-icon-standard);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition)}.textarea{position:relative;display:flex;flex-direction:column}.textarea__wrapper{display:flex;flex-direction:column;border-radius:var(--radius);border:var(--border)}.textarea__wrapper .textarea__control{margin:0;width:100%;resize:vertical;display:flex;outline:none;padding:var(--spacing-control);z-index:1;box-sizing:border-box;transition:var(--transition-control);font:var(--telekom-text-style-body);border:none;background-color:transparent;color:var(--color-meta);margin-top:var(--spacing-top-control)}.textarea .textarea__counter{display:flex;flex-shrink:0;transition:var(--transition-counter);margin-left:auto;justify-content:flex-end;font:var(--telekom-text-style-small);color:var(--telekom-color-text-and-icon-standard)}.textarea .textarea__meta{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}.textarea:not(.textarea--disabled):not(.textarea--readonly) .textarea__wrapper:hover{border-color:var(--border-color-hover);background-color:var(--background-color-hover)}.textarea:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus .textarea__wrapper{border-color:var(--border-color-focus);outline:var(--focus-outline);outline-offset:1px}.textarea:not(.textarea--disabled) .textarea__control:focus::placeholder{color:var(--color-placeholder)}.textarea .textarea__control::placeholder,.textarea ::placeholder{color:transparent;transition:var(--transition-placeholder)}.textarea__label{top:0;left:0;color:var(--color-label);display:flex;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font:var(--telekom-text-style-ui);transform:translate(var(--spacing-x-control), 0.875rem)}.textarea--has-focus .textarea__label,.animated .textarea__label{font:var(--telekom-text-style-small-bold);transform:translate(\n var(--spacing-x-control),\n calc(0.25rem + var(--telekom-spacing-composition-space-01))\n )}.textarea--status-error .textarea__wrapper{border:var(--border-error)}.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly) .textarea__wrapper:hover,.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus .textarea__wrapper{border-color:var(--telekom-color-functional-danger-hovered)}.textarea--status-error .textarea__counter{color:var(--color-counter-error)}.textarea--transparent .textarea__control{background-color:transparent}.textarea--readonly .textarea__wrapper{border-color:var(--border-color-readonly);background:var(--background-readonly)}.textarea--readonly.textarea--has-focus .textarea__wrapper{outline:var(--focus-outline);outline-offset:1px}.textarea--readonly textarea,.textarea--readonly .textarea__wrapper .textarea__control{color:var(--color-label-readonly)}.textarea--disabled label,.textarea--disabled .textarea__label,.textarea--disabled textarea,.textarea--disabled .textarea__wrapper,.textarea--disabled .textarea__control,.textarea--disabled .textarea__meta{cursor:not-allowed;color:var(--color-disabled)}.textarea--disabled .textarea__wrapper{border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}";export{c as scale_textarea}