@esri/calcite-components/dist/calcite/p-2b511b14.entry.js

Web Components for Esri's Calcite Design System.

/*!
 * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
 * v1.5.0-next.4
 */
import{r as t,c as i,h as e,H as a,a as s}from"./p-8789682d.js";import{c as o,d as n,H as r}from"./p-51fa67d7.js";import{c,d as l,g as h}from"./p-4dcc9524.js";import{d,t as m}from"./p-68f223ec.js";import{n as p,c as f,d as u}from"./p-743ed09c.js";import{c as g}from"./p-c8e46b02.js";import{s as b,a as v,c as x}from"./p-deebcc06.js";import{c as y,s as z,d as k,u as w}from"./p-9dd9a26d.js";import{c as j,u as D,d as H}from"./p-0d8324b6.js";import{t as _}from"./p-9cbcc2dd.js";import"./p-d2aa9245.js";import"./p-9280476e.js";import"./p-4929e834.js";import"./p-7fb6664e.js";import"./p-81620376.js";const C="readonly",A=class{constructor(a){t(this,a),this.calciteTextAreaInput=i(this,"calciteTextAreaInput",7),this.calciteTextAreaChange=i(this,"calciteTextAreaChange",7),this.handleInput=t=>{this.value=t.target.value,this.calciteTextAreaInput.emit()},this.handleChange=()=>{this.calciteTextAreaChange.emit()},this.contentSlotChangeHandler=()=>{this.value||this.el.childNodes.forEach((t=>{"#text"===t.nodeName&&(this.value=t.nodeValue.trim())}))},this.renderCharacterLimit=()=>this.maxLength?e("span",{class:"character-limit"},e("span",{class:{"character--over-limit":this.value?.length>this.maxLength}},this.getLocalizedCharacterLength()),"/",p.localize(this.maxLength.toString())):null,this.resizeObserver=g("resize",(async()=>{await x(this);const{textAreaHeight:t,textAreaWidth:i,elHeight:e,elWidth:a,footerHeight:s,footerWidth:o}=this.getHeightandWidthOfElements();o>0&&o!==i&&(this.footerEl.style.width=`${i}px`),a===i&&e===t+(s||0)||this.setHeightAndWidthToAuto()})),this.setHeightAndWidthToAuto=_((()=>{"vertical"!==this.resize&&"both"!==this.resize||(this.el.style.height="auto"),"horizontal"!==this.resize&&"both"!==this.resize||(this.el.style.width="auto")}),100,{leading:!1}),this.setTextAreaEl=t=>{this.textAreaEl=t,this.resizeObserver.observe(t)},this.autofocus=!1,this.columns=void 0,this.disabled=!1,this.form=void 0,this.groupSeparator=!1,this.label=void 0,this.maxLength=void 0,this.messages=void 0,this.name=void 0,this.numberingSystem=void 0,this.placeholder=void 0,this.readOnly=!1,this.required=!1,this.resize="both",this.rows=void 0,this.scale="m",this.value=void 0,this.wrap="soft",this.messageOverrides=void 0,this.defaultMessages=void 0,this.endSlotHasElements=void 0,this.startSlotHasElements=void 0,this.effectiveLocale=""}onMessagesChange(){}connectedCallback(){j(this),c(this),o(this),f(this),y(this)}async componentWillLoad(){b(this),await z(this)}componentDidLoad(){v(this)}componentDidRender(){D(this),this.setTextAreaHeight()}disconnectedCallback(){H(this),l(this),n(this),u(this),k(this),this.resizeObserver?.disconnect()}render(){const t=this.startSlotHasElements||this.endSlotHasElements||!!this.maxLength;return e(a,null,e("textarea",{"aria-invalid":m(this.value?.length>this.maxLength),"aria-label":h(this),autofocus:this.autofocus,class:{[C]:this.readOnly,"text-area--invalid":this.value?.length>this.maxLength,"footer--slotted":this.endSlotHasElements&&this.startSlotHasElements,"block-size--full":!t,"border--color":!t},cols:this.columns,disabled:this.disabled,name:this.name,onChange:this.handleChange,onInput:this.handleInput,placeholder:this.placeholder,readonly:this.readOnly,required:this.required,rows:this.rows,value:this.value,wrap:this.wrap,ref:this.setTextAreaEl}),e("span",{class:{content:!0}},e("slot",{onSlotchange:this.contentSlotChangeHandler})),e("footer",{class:{footer:!0,[C]:this.readOnly,hide:!t},ref:t=>this.footerEl=t},e("div",{class:{container:!0,"footer--end-only":!this.startSlotHasElements&&this.endSlotHasElements}},e("slot",{name:"footer-start",onSlotchange:t=>this.startSlotHasElements=d(t)}),e("slot",{name:"footer-end",onSlotchange:t=>this.endSlotHasElements=d(t)})),this.renderCharacterLimit()),e(r,{component:this}))}async setFocus(){await x(this),this.textAreaEl.focus()}async selectText(){await x(this),this.textAreaEl.select()}effectiveLocaleChange(){w(this,this.effectiveLocale)}onFormReset(){this.value=this.defaultValue}onLabelClick(){this.setFocus()}getLocalizedCharacterLength(){return p.numberFormatOptions={locale:this.effectiveLocale,numberingSystem:this.numberingSystem,signDisplay:"never",useGrouping:this.groupSeparator},p.localize(this.value?this.value.length.toString():"0")}syncHiddenFormInput(t){t.setCustomValidity(""),this.value?.length>this.maxLength&&t.setCustomValidity(this.messages.tooLong)}setTextAreaHeight(){const{textAreaHeight:t,elHeight:i,footerHeight:e}=this.getHeightandWidthOfElements();e>0&&t+e!=i&&(this.textAreaEl.style.height=i-e+"px")}getHeightandWidthOfElements(){const{height:t,width:i}=this.textAreaEl.getBoundingClientRect(),{height:e,width:a}=this.el.getBoundingClientRect(),{height:s,width:o}=this.footerEl?.getBoundingClientRect();return{textAreaHeight:t,textAreaWidth:i,elHeight:e,elWidth:a,footerHeight:s,footerWidth:o}}static get assetsDirs(){return["assets"]}get el(){return s(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};A.style="@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:inline-block;block-size:100%;inline-size:100%}textarea{position:relative;margin:0px;box-sizing:border-box;display:block;inline-size:100%;border-width:1px;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);color:var(--calcite-ui-text-1);min-inline-size:12rem;border-block-end:1px solid var(--calcite-ui-border-3)}@media screen and (max-width: 480px){textarea{resize:none}}textarea:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}textarea.text-area--invalid{border-width:1px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-danger)}textarea.text-area--invalid:focus{outline:2px solid var(--calcite-ui-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}textarea.footer--slotted{min-inline-size:18rem}.footer{box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1)}.character-limit{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}.character--over-limit{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-danger)}:host([resize=none]) textarea{resize:none}:host([resize=horizontal]) textarea{resize:horizontal}:host([resize=vertical]) textarea{resize:vertical}:host([scale=s]){font-size:var(--calcite-font-size--2)}:host([scale=s]) .footer{padding-block:0.25rem;padding-inline:0.5rem;min-block-size:1.75rem}:host([scale=s]) textarea{padding-block:0.25rem;padding-inline:0.5rem}:host([scale=s]) textarea,:host([scale=s]) .footer,:host([scale=s]) .character-limit{padding-inline-start:0.5rem;font-size:var(--calcite-font-size--2)}:host([scale=m]) textarea{padding-block:0.5rem;padding-inline:0.75rem}:host([scale=m]) .footer{padding-block:0.5rem;padding-inline:0.75rem;min-block-size:2.25rem}:host([scale=m]) textarea,:host([scale=m]) .footer,:host([scale=m]) .character-limit{padding-inline-start:0.75rem;font-size:var(--calcite-font-size--1)}:host([scale=l]){font-size:var(--calcite-font-size-0)}:host([scale=l]) textarea{padding-block:0.75rem;padding-inline:1rem}:host([scale=l]) .footer{padding-block:0.75rem;padding-inline:1rem;min-block-size:2.75rem}:host([scale=l]) textarea,:host([scale=l]) .footer,:host([scale=l]) .character-limit{padding-inline-start:1rem;font-size:var(--calcite-font-size-0)}.readonly{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium)}:host([disabled]) textarea,:host([disabled]) footer{opacity:0.5}.border--color{border-block-end-width:1px;border-color:var(--calcite-ui-border-input)}.border--color:focus{border-block-end-width:2px}textarea.block-size--full{block-size:100%}.content,.hide{display:none}.container{display:flex;inline-size:100%;justify-content:space-between}.footer--end-only{justify-content:flex-end}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";export{A as calcite_text_area}