@ionic/core 8.7.3 → 8.7.4-dev.11755800369.16c1f61b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ion-input.js +51 -5
- package/components/ion-textarea.js +50 -4
- package/dist/cjs/ion-input.cjs.entry.js +50 -5
- package/dist/cjs/ion-textarea.cjs.entry.js +49 -4
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/input/input.js +52 -6
- package/dist/collection/components/textarea/textarea.js +51 -5
- package/dist/docs.json +1 -1
- package/dist/esm/ion-input.entry.js +50 -5
- package/dist/esm/ion-textarea.entry.js +49 -4
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-08493d32.entry.js +4 -0
- package/dist/ionic/p-a30b23cf.entry.js +4 -0
- package/dist/types/components/input/input.d.ts +9 -0
- package/dist/types/components/textarea/textarea.d.ts +9 -0
- package/hydrate/index.js +69 -9
- package/hydrate/index.mjs +69 -9
- package/package.json +1 -1
- package/dist/ionic/p-1488b7cc.entry.js +0 -4
- package/dist/ionic/p-c5210d3e.entry.js +0 -4
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
+
*/
|
|
4
|
+
import{r as t,c as e,i as a,w as i,h as r,d as o,g as n}from"./p-4DxY6_gG.js";import{c as l}from"./p-Dm_oBkW1.js";import{d as s,i as d,b as c,c as x}from"./p-C-Cct-6D.js";import{c as p,g as h}from"./p-BHGXdud8.js";import{h as m,c as b}from"./p-DiVJyqlX.js";import{b as g}from"./p-Br3vSlYh.js";import"./p-ZjP4CjeZ.js";const f=class{constructor(i){t(this,i),this.ionChange=e(this,"ionChange",7),this.ionInput=e(this,"ionInput",7),this.ionBlur=e(this,"ionBlur",7),this.ionFocus=e(this,"ionFocus",7),this.inputId="ion-textarea-"+w++,this.helperTextId=`${this.inputId}-helper-text`,this.errorTextId=`${this.inputId}-error-text`,this.didTextareaClearOnEdit=!1,this.inheritedAttributes={},this.hasFocus=!1,this.isInvalid=!1,this.autocapitalize="none",this.autofocus=!1,this.clearOnEdit=!1,this.disabled=!1,this.name=this.inputId,this.readonly=!1,this.required=!1,this.spellcheck=!1,this.autoGrow=!1,this.value="",this.counter=!1,this.labelPlacement="start",this.onInput=t=>{const e=t.target;e&&(this.value=e.value||""),this.emitInputChange(t)},this.onChange=t=>{this.emitValueChange(t)},this.onFocus=t=>{this.hasFocus=!0,this.focusedValue=this.value,this.ionFocus.emit(t)},this.onBlur=t=>{this.hasFocus=!1,this.focusedValue!==this.value&&this.emitValueChange(t),this.didTextareaClearOnEdit=!1,this.ionBlur.emit(t),setTimeout((()=>{const t=this.checkValidationState();this.isInvalid!==t&&(this.isInvalid=t,a(this))}),100)},this.onKeyDown=t=>{this.checkClearOnEdit(t)},this.onLabelClick=t=>{t.target===t.currentTarget&&t.stopPropagation()}}debounceChanged(){const{ionInput:t,debounce:e,originalIonInput:a}=this;this.ionInput=void 0===e?null!=a?a:t:s(t,e)}valueChanged(){const t=this.nativeInput,e=this.getValue();t&&t.value!==e&&(t.value=e),this.runAutoGrow()}onDirChanged(t){this.inheritedAttributes=Object.assign(Object.assign({},this.inheritedAttributes),{dir:t}),a(this)}onClickCapture(t){const e=this.nativeInput;e&&t.target===e&&(t.stopPropagation(),this.el.click())}checkValidationState(){return this.el.classList.contains("ion-touched")&&this.el.classList.contains("ion-invalid")}connectedCallback(){const{el:t}=this;this.slotMutationController=p(t,["label","start","end"],(()=>a(this))),this.notchController=l(t,(()=>this.notchSpacerEl),(()=>this.labelSlot)),"undefined"!=typeof MutationObserver&&(this.validationObserver=new MutationObserver((()=>{const t=this.checkValidationState();this.isInvalid!==t&&(this.isInvalid=t,a(this))})),this.validationObserver.observe(t,{attributes:!0,attributeFilter:["class"]})),this.isInvalid=this.checkValidationState(),this.debounceChanged(),document.dispatchEvent(new CustomEvent("ionInputDidLoad",{detail:t}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("ionInputDidUnload",{detail:this.el})),this.slotMutationController&&(this.slotMutationController.destroy(),this.slotMutationController=void 0),this.notchController&&(this.notchController.destroy(),this.notchController=void 0),this.validationObserver&&(this.validationObserver.disconnect(),this.validationObserver=void 0)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},d(this.el)),c(this.el,["data-form-type","title","tabindex","dir"]))}componentDidLoad(){this.originalIonInput=this.ionInput,this.runAutoGrow()}componentDidRender(){var t;null===(t=this.notchController)||void 0===t||t.calculateNotchWidth()}async setFocus(){this.nativeInput&&this.nativeInput.focus()}async getInputElement(){return this.nativeInput||await new Promise((t=>x(this.el,t))),Promise.resolve(this.nativeInput)}emitValueChange(t){const{value:e}=this,a=null==e?e:e.toString();this.focusedValue=a,this.ionChange.emit({value:a,event:t})}emitInputChange(t){const{value:e}=this;this.ionInput.emit({value:e,event:t})}runAutoGrow(){this.nativeInput&&this.autoGrow&&i((()=>{var t;this.textareaWrapper&&(this.textareaWrapper.dataset.replicatedValue=null!==(t=this.value)&&void 0!==t?t:"")}))}checkClearOnEdit(t){if(!this.clearOnEdit)return;const e=["Tab","Shift","Meta","Alt","Control"].includes(t.key);this.didTextareaClearOnEdit||!this.hasValue()||e||(this.value="",this.emitInputChange(t)),e||(this.didTextareaClearOnEdit=!0)}hasValue(){return""!==this.getValue()}getValue(){return this.value||""}renderLabel(){const{label:t}=this;return r("div",{class:{"label-text-wrapper":!0,"label-text-wrapper-hidden":!this.hasLabel}},void 0===t?r("slot",{name:"label"}):r("div",{class:"label-text"},t))}get labelSlot(){return this.el.querySelector('[slot="label"]')}get hasLabel(){return void 0!==this.label||null!==this.labelSlot}renderLabelContainer(){return"md"===g(this)&&"outline"===this.fill?[r("div",{class:"textarea-outline-container"},r("div",{class:"textarea-outline-start"}),r("div",{class:{"textarea-outline-notch":!0,"textarea-outline-notch-hidden":!this.hasLabel}},r("div",{class:"notch-spacer","aria-hidden":"true",ref:t=>this.notchSpacerEl=t},this.label)),r("div",{class:"textarea-outline-end"})),this.renderLabel()]:this.renderLabel()}renderHintText(){const{helperText:t,errorText:e,helperTextId:a,errorTextId:i}=this;return[r("div",{id:a,class:"helper-text"},t),r("div",{id:i,class:"error-text"},e)]}getHintTextID(){const{isInvalid:t,helperText:e,errorText:a,helperTextId:i,errorTextId:r}=this;return t&&a?r:e?i:void 0}renderCounter(){const{counter:t,maxlength:e,counterFormatter:a,value:i}=this;if(!0===t&&void 0!==e)return r("div",{class:"counter"},h(i,e,a))}renderBottomContent(){const{counter:t,helperText:e,errorText:a,maxlength:i}=this;if(e||a||!0===t&&void 0!==i)return r("div",{class:"textarea-bottom"},this.renderHintText(),this.renderCounter())}render(){const{inputId:t,disabled:e,fill:a,shape:i,labelPlacement:n,el:l,hasFocus:s}=this,d=g(this),c=this.getValue(),x=m("ion-item",this.el),p="md"===d&&"outline"!==a&&!x,h=this.hasValue(),f=null!==l.querySelector('[slot="start"], [slot="end"]'),w="stacked"===n||"floating"===n&&(h||s||f);return r(o,{key:"075cd9dad6f4f026e421b63e4565e092b3ea0a2a",class:b(this.color,{[d]:!0,"has-value":h,"has-focus":s,"label-floating":w,[`textarea-fill-${a}`]:void 0!==a,[`textarea-shape-${i}`]:void 0!==i,[`textarea-label-placement-${n}`]:!0,"textarea-disabled":e})},r("label",{key:"acb810df87a8156e5f431d65ddba287831acfa97",class:"textarea-wrapper",htmlFor:t,onClick:this.onLabelClick},this.renderLabelContainer(),r("div",{key:"6ee9e8b9dfd562a0a23f3cc4c07c7bad4d168d56",class:"textarea-wrapper-inner"},r("div",{key:"68d1b9205ad427a2c6de6767a7eb74901fb4d508",class:"start-slot-wrapper"},r("slot",{key:"a3b407c79a73cba5cafb6f987d8018573a8c5993",name:"start"})),r("div",{key:"6de732e25024cee7b1da4eb923b8fa1c3b967223",class:"native-wrapper",ref:t=>this.textareaWrapper=t},r("textarea",Object.assign({key:"e90c595b4d0d8b1f3d2ef8cc1f9ac76ccdbc741d",class:"native-textarea",ref:t=>this.nativeInput=t,id:t,disabled:e,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeyDown,"aria-describedby":this.getHintTextID(),"aria-invalid":this.isInvalid?"true":void 0},this.inheritedAttributes),c)),r("div",{key:"dcb70f9b4c3b3123ca05225c3396bb65762fb12c",class:"end-slot-wrapper"},r("slot",{key:"2b8dd7c492b60424512a7f36ba75306697875da4",name:"end"}))),p&&r("div",{key:"f76c2c046a5a2cdcd3fa9df7a9922f429fc6dd79",class:"textarea-highlight"})),this.renderBottomContent())}get el(){return n(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"],dir:["onDirChanged"]}}};let w=0;f.style={ios:'.sc-ion-textarea-ios-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0;--padding-end:0;--padding-bottom:8px;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}.textarea-label-placement-floating.sc-ion-textarea-ios-h,.textarea-label-placement-stacked.sc-ion-textarea-ios-h{--padding-top:0px;min-height:56px}[cols].sc-ion-textarea-ios-h:not([auto-grow]){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ion-color.sc-ion-textarea-ios-h{--highlight-color-focused:var(--ion-color-base);background:initial}ion-item.sc-ion-textarea-ios-h,ion-item .sc-ion-textarea-ios-h{-ms-flex-item-align:baseline;align-self:baseline}ion-item[slot=start].sc-ion-textarea-ios-h,ion-item [slot=start].sc-ion-textarea-ios-h,ion-item[slot=end].sc-ion-textarea-ios-h,ion-item [slot=end].sc-ion-textarea-ios-h{width:auto}.native-textarea.sc-ion-textarea-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea.sc-ion-textarea-ios::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input.sc-ion-textarea-ios{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-textarea-ios{inset-inline-start:0}.cloned-input.sc-ion-textarea-ios:disabled{opacity:1}[auto-grow].sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios{height:100%}[auto-grow].sc-ion-textarea-ios-h .native-textarea.sc-ion-textarea-ios{overflow:hidden}.textarea-wrapper.sc-ion-textarea-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-textarea-ios{position:relative;width:100%;height:100%}.has-focus.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{caret-color:var(--highlight-color)}.native-wrapper.sc-ion-textarea-ios textarea.sc-ion-textarea-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.native-wrapper.sc-ion-textarea-ios{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit;grid-auto-rows:100%}.native-wrapper.sc-ion-textarea-ios::after{white-space:pre-wrap;content:attr(data-replicated-value) " ";visibility:hidden}.native-wrapper.sc-ion-textarea-ios::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner.sc-ion-textarea-ios{display:-ms-flexbox;display:flex;width:100%;min-height:inherit}.ion-touched.ion-invalid.sc-ion-textarea-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-textarea-ios-h{--highlight-color:var(--highlight-color-valid)}.textarea-bottom.sc-ion-textarea-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-textarea-ios-h,.ion-touched.ion-invalid.sc-ion-textarea-ios-h{--border-color:var(--highlight-color)}.textarea-bottom.sc-ion-textarea-ios .error-text.sc-ion-textarea-ios{display:none;color:var(--highlight-color-invalid)}.textarea-bottom.sc-ion-textarea-ios .helper-text.sc-ion-textarea-ios{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-textarea-ios-h .textarea-bottom.sc-ion-textarea-ios .error-text.sc-ion-textarea-ios{display:block}.ion-touched.ion-invalid.sc-ion-textarea-ios-h .textarea-bottom.sc-ion-textarea-ios .helper-text.sc-ion-textarea-ios{display:none}.textarea-bottom.sc-ion-textarea-ios .counter.sc-ion-textarea-ios{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.label-text-wrapper.sc-ion-textarea-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-textarea-ios,.sc-ion-textarea-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-textarea-ios,.textarea-outline-notch-hidden.sc-ion-textarea-ios{display:none}.textarea-wrapper.sc-ion-textarea-ios textarea.sc-ion-textarea-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-label-placement-start.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios{-ms-flex-direction:row;flex-direction:row}.textarea-label-placement-start.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-end.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.textarea-label-placement-end.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-ios-h .label-text.sc-ion-textarea-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.textarea-label-placement-stacked.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}[dir=rtl].sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-label-placement-stacked.sc-ion-textarea-ios-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-label-placement-stacked.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios::after,.textarea-label-placement-floating[auto-grow].sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.sc-ion-textarea-ios-h.textarea-label-placement-stacked.sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-stacked .sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-stacked.sc-ion-textarea-ios-s>[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-stacked .sc-ion-textarea-ios-s>[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-floating.sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-floating .sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-floating.sc-ion-textarea-ios-s>[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-floating .sc-ion-textarea-ios-s>[slot=end]{margin-top:8px}.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{opacity:0}.has-focus.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.has-value.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{opacity:1}.label-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.start-slot-wrapper.sc-ion-textarea-ios,.end-slot-wrapper.sc-ion-textarea-ios{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}.sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-s>[slot=end]{margin-top:0}.sc-ion-textarea-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-textarea-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-textarea-ios-h{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--padding-top:10px;--padding-end:0px;--padding-bottom:8px;--padding-start:0px;--highlight-height:0px;font-size:inherit}.textarea-disabled.sc-ion-textarea-ios-h{opacity:0.3}.sc-ion-textarea-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-textarea-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}',md:'.sc-ion-textarea-md-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0;--padding-end:0;--padding-bottom:8px;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}.textarea-label-placement-floating.sc-ion-textarea-md-h,.textarea-label-placement-stacked.sc-ion-textarea-md-h{--padding-top:0px;min-height:56px}[cols].sc-ion-textarea-md-h:not([auto-grow]){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ion-color.sc-ion-textarea-md-h{--highlight-color-focused:var(--ion-color-base);background:initial}ion-item.sc-ion-textarea-md-h,ion-item .sc-ion-textarea-md-h{-ms-flex-item-align:baseline;align-self:baseline}ion-item[slot=start].sc-ion-textarea-md-h,ion-item [slot=start].sc-ion-textarea-md-h,ion-item[slot=end].sc-ion-textarea-md-h,ion-item [slot=end].sc-ion-textarea-md-h{width:auto}.native-textarea.sc-ion-textarea-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea.sc-ion-textarea-md::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input.sc-ion-textarea-md{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-textarea-md{inset-inline-start:0}.cloned-input.sc-ion-textarea-md:disabled{opacity:1}[auto-grow].sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md{height:100%}[auto-grow].sc-ion-textarea-md-h .native-textarea.sc-ion-textarea-md{overflow:hidden}.textarea-wrapper.sc-ion-textarea-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-textarea-md{position:relative;width:100%;height:100%}.has-focus.sc-ion-textarea-md-h textarea.sc-ion-textarea-md{caret-color:var(--highlight-color)}.native-wrapper.sc-ion-textarea-md textarea.sc-ion-textarea-md{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.native-wrapper.sc-ion-textarea-md{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit;grid-auto-rows:100%}.native-wrapper.sc-ion-textarea-md::after{white-space:pre-wrap;content:attr(data-replicated-value) " ";visibility:hidden}.native-wrapper.sc-ion-textarea-md::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner.sc-ion-textarea-md{display:-ms-flexbox;display:flex;width:100%;min-height:inherit}.ion-touched.ion-invalid.sc-ion-textarea-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-textarea-md-h{--highlight-color:var(--highlight-color-valid)}.textarea-bottom.sc-ion-textarea-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-textarea-md-h,.ion-touched.ion-invalid.sc-ion-textarea-md-h{--border-color:var(--highlight-color)}.textarea-bottom.sc-ion-textarea-md .error-text.sc-ion-textarea-md{display:none;color:var(--highlight-color-invalid)}.textarea-bottom.sc-ion-textarea-md .helper-text.sc-ion-textarea-md{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md .error-text.sc-ion-textarea-md{display:block}.ion-touched.ion-invalid.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md .helper-text.sc-ion-textarea-md{display:none}.textarea-bottom.sc-ion-textarea-md .counter.sc-ion-textarea-md{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.label-text-wrapper.sc-ion-textarea-md{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-textarea-md,.sc-ion-textarea-md-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-textarea-md,.textarea-outline-notch-hidden.sc-ion-textarea-md{display:none}.textarea-wrapper.sc-ion-textarea-md textarea.sc-ion-textarea-md{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-label-placement-start.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{-ms-flex-direction:row;flex-direction:row}.textarea-label-placement-start.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-end.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.textarea-label-placement-end.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-md-h .label-text.sc-ion-textarea-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.textarea-label-placement-stacked.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-label-placement-stacked.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-label-placement-stacked.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after,.textarea-label-placement-floating[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.sc-ion-textarea-md-h.textarea-label-placement-stacked.sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-label-placement-stacked .sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-label-placement-stacked.sc-ion-textarea-md-s>[slot=end],.sc-ion-textarea-md-h.textarea-label-placement-stacked .sc-ion-textarea-md-s>[slot=end],.sc-ion-textarea-md-h.textarea-label-placement-floating.sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-label-placement-floating .sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-label-placement-floating.sc-ion-textarea-md-s>[slot=end],.sc-ion-textarea-md-h.textarea-label-placement-floating .sc-ion-textarea-md-s>[slot=end]{margin-top:8px}.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md{opacity:0}.has-focus.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.has-value.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md{opacity:1}.label-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.start-slot-wrapper.sc-ion-textarea-md,.end-slot-wrapper.sc-ion-textarea-md{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}.sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-s>[slot=end]{margin-top:0}.sc-ion-textarea-md-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-textarea-md-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.textarea-fill-solid.sc-ion-textarea-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.textarea-fill-solid.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.has-focus.textarea-fill-solid.ion-valid.sc-ion-textarea-md-h,.textarea-fill-solid.ion-touched.ion-invalid.sc-ion-textarea-md-h{--border-color:var(--highlight-color)}.textarea-fill-solid.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md{border-top:none}@media (any-hover: hover){.textarea-fill-solid.sc-ion-textarea-md-h:hover{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.textarea-fill-solid.has-focus.sc-ion-textarea-md-h{--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}.textarea-fill-solid.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}.label-floating.textarea-fill-solid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{max-width:calc(100% / 0.75)}.textarea-fill-outline.sc-ion-textarea-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.textarea-fill-outline.textarea-shape-round.sc-ion-textarea-md-h{--border-radius:28px;--padding-start:32px;--padding-end:32px}.has-focus.textarea-fill-outline.ion-valid.sc-ion-textarea-md-h,.textarea-fill-outline.ion-touched.ion-invalid.sc-ion-textarea-md-h{--border-color:var(--highlight-color)}@media (any-hover: hover){.textarea-fill-outline.sc-ion-textarea-md-h:hover{--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.textarea-fill-outline.has-focus.sc-ion-textarea-md-h{--border-width:var(--highlight-height);--border-color:var(--highlight-color)}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md{border-top:none}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{border-bottom:none}.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-fill-outline.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{position:relative}.label-floating.textarea-fill-outline.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc(\n (100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75\n )}.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after,.textarea-fill-outline.textarea-label-placement-floating[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:12px;margin-bottom:0px}.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-stacked .sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-s>[slot=end],.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-stacked .sc-ion-textarea-md-s>[slot=end],.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-floating .sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-s>[slot=end],.sc-ion-textarea-md-h.textarea-fill-outline.textarea-label-placement-floating .sc-ion-textarea-md-s>[slot=end]{margin-top:12px}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-container.sc-ion-textarea-md{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-start.sc-ion-textarea-md,.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-end.sc-ion-textarea-md{pointer-events:none}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-start.sc-ion-textarea-md,.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-notch.sc-ion-textarea-md,.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-end.sc-ion-textarea-md{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color)}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-notch.sc-ion-textarea-md{max-width:calc(100% - var(--padding-start) - var(--padding-end))}.textarea-fill-outline.sc-ion-textarea-md-h .notch-spacer.sc-ion-textarea-md{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-start.sc-ion-textarea-md{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color);width:calc(var(--padding-start) - 4px)}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-end.sc-ion-textarea-md{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}.label-floating.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-notch.sc-ion-textarea-md{border-top:none}.sc-ion-textarea-md-h{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--padding-top:18px;--padding-end:0px;--padding-bottom:8px;--padding-start:0px;--highlight-height:2px;font-size:inherit}.textarea-bottom.sc-ion-textarea-md .counter.sc-ion-textarea-md{letter-spacing:0.0333333333em}.textarea-label-placement-floating.has-focus.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-stacked.has-focus.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{color:var(--highlight-color)}.has-focus.textarea-label-placement-floating.ion-valid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-floating.ion-touched.ion-invalid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.has-focus.textarea-label-placement-stacked.ion-valid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-stacked.ion-touched.ion-invalid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{color:var(--highlight-color)}.textarea-disabled.sc-ion-textarea-md-h{opacity:0.38}.textarea-highlight.sc-ion-textarea-md{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.textarea-highlight.sc-ion-textarea-md{inset-inline-start:0}.has-focus.sc-ion-textarea-md-h .textarea-highlight.sc-ion-textarea-md{-webkit-transform:scale(1);transform:scale(1)}.in-item.sc-ion-textarea-md-h .textarea-highlight.sc-ion-textarea-md{bottom:0}.in-item.sc-ion-textarea-md-h .textarea-highlight.sc-ion-textarea-md{inset-inline-start:0}.textarea-shape-round.sc-ion-textarea-md-h{--border-radius:16px}.sc-ion-textarea-md-s>ion-button[slot=start].button-has-icon-only,.sc-ion-textarea-md-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}'};export{f as ion_textarea}
|
|
@@ -39,7 +39,12 @@ export declare class Input implements ComponentInterface {
|
|
|
39
39
|
* is applied in both cases.
|
|
40
40
|
*/
|
|
41
41
|
hasFocus: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Track validation state for proper aria-live announcements
|
|
44
|
+
*/
|
|
45
|
+
isInvalid: boolean;
|
|
42
46
|
el: HTMLIonInputElement;
|
|
47
|
+
private validationObserver?;
|
|
43
48
|
/**
|
|
44
49
|
* The color to use from your application's color palette.
|
|
45
50
|
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
@@ -261,6 +266,10 @@ export declare class Input implements ComponentInterface {
|
|
|
261
266
|
*/
|
|
262
267
|
onClickCapture(ev: Event): void;
|
|
263
268
|
componentWillLoad(): void;
|
|
269
|
+
/**
|
|
270
|
+
* Checks if the input is in an invalid state based on validation classes
|
|
271
|
+
*/
|
|
272
|
+
private checkValidationState;
|
|
264
273
|
connectedCallback(): void;
|
|
265
274
|
componentDidLoad(): void;
|
|
266
275
|
componentDidRender(): void;
|
|
@@ -40,6 +40,11 @@ export declare class Textarea implements ComponentInterface {
|
|
|
40
40
|
* is applied in both cases.
|
|
41
41
|
*/
|
|
42
42
|
hasFocus: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Track validation state for proper aria-live announcements
|
|
45
|
+
*/
|
|
46
|
+
isInvalid: boolean;
|
|
47
|
+
private validationObserver?;
|
|
43
48
|
/**
|
|
44
49
|
* The color to use from your application's color palette.
|
|
45
50
|
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
@@ -220,6 +225,10 @@ export declare class Textarea implements ComponentInterface {
|
|
|
220
225
|
* Instead, the click event from the ion-textarea is emitted.
|
|
221
226
|
*/
|
|
222
227
|
onClickCapture(ev: Event): void;
|
|
228
|
+
/**
|
|
229
|
+
* Checks if the textarea is in an invalid state based on validation classes
|
|
230
|
+
*/
|
|
231
|
+
private checkValidationState;
|
|
223
232
|
connectedCallback(): void;
|
|
224
233
|
disconnectedCallback(): void;
|
|
225
234
|
componentWillLoad(): void;
|
package/hydrate/index.js
CHANGED
|
@@ -16629,6 +16629,10 @@ class Input {
|
|
|
16629
16629
|
* is applied in both cases.
|
|
16630
16630
|
*/
|
|
16631
16631
|
this.hasFocus = false;
|
|
16632
|
+
/**
|
|
16633
|
+
* Track validation state for proper aria-live announcements
|
|
16634
|
+
*/
|
|
16635
|
+
this.isInvalid = false;
|
|
16632
16636
|
/**
|
|
16633
16637
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
16634
16638
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -16714,6 +16718,18 @@ class Input {
|
|
|
16714
16718
|
}
|
|
16715
16719
|
this.didInputClearOnEdit = false;
|
|
16716
16720
|
this.ionBlur.emit(ev);
|
|
16721
|
+
/**
|
|
16722
|
+
* Check validation state after blur to handle framework-managed classes.
|
|
16723
|
+
* Frameworks like Angular update classes asynchronously, often using
|
|
16724
|
+
* requestAnimationFrame or promises. Using setTimeout ensures we check
|
|
16725
|
+
* after all microtasks and animation frames have completed.
|
|
16726
|
+
*/
|
|
16727
|
+
setTimeout(() => {
|
|
16728
|
+
const newIsInvalid = this.checkValidationState();
|
|
16729
|
+
if (this.isInvalid !== newIsInvalid) {
|
|
16730
|
+
this.isInvalid = newIsInvalid;
|
|
16731
|
+
}
|
|
16732
|
+
}, 100);
|
|
16717
16733
|
};
|
|
16718
16734
|
this.onFocus = (ev) => {
|
|
16719
16735
|
this.hasFocus = true;
|
|
@@ -16812,10 +16828,18 @@ class Input {
|
|
|
16812
16828
|
componentWillLoad() {
|
|
16813
16829
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16814
16830
|
}
|
|
16831
|
+
/**
|
|
16832
|
+
* Checks if the input is in an invalid state based on validation classes
|
|
16833
|
+
*/
|
|
16834
|
+
checkValidationState() {
|
|
16835
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
16836
|
+
}
|
|
16815
16837
|
connectedCallback() {
|
|
16816
16838
|
const { el } = this;
|
|
16817
16839
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
16818
16840
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
16841
|
+
// Always set initial state
|
|
16842
|
+
this.isInvalid = this.checkValidationState();
|
|
16819
16843
|
this.debounceChanged();
|
|
16820
16844
|
}
|
|
16821
16845
|
componentDidLoad() {
|
|
@@ -16842,6 +16866,11 @@ class Input {
|
|
|
16842
16866
|
this.notchController.destroy();
|
|
16843
16867
|
this.notchController = undefined;
|
|
16844
16868
|
}
|
|
16869
|
+
// Clean up validation observer to prevent memory leaks
|
|
16870
|
+
if (this.validationObserver) {
|
|
16871
|
+
this.validationObserver.disconnect();
|
|
16872
|
+
this.validationObserver = undefined;
|
|
16873
|
+
}
|
|
16845
16874
|
}
|
|
16846
16875
|
/**
|
|
16847
16876
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16950,8 +16979,8 @@ class Input {
|
|
|
16950
16979
|
];
|
|
16951
16980
|
}
|
|
16952
16981
|
getHintTextID() {
|
|
16953
|
-
const {
|
|
16954
|
-
if (
|
|
16982
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16983
|
+
if (isInvalid && errorText) {
|
|
16955
16984
|
return errorTextId;
|
|
16956
16985
|
}
|
|
16957
16986
|
if (helperText) {
|
|
@@ -17064,7 +17093,7 @@ class Input {
|
|
|
17064
17093
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17065
17094
|
*/
|
|
17066
17095
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17067
|
-
return (hAsync(Host, { key: '
|
|
17096
|
+
return (hAsync(Host, { key: 'af93f93b33492571bd61d6b67414f16821132138', class: createColorClasses$1(this.color, {
|
|
17068
17097
|
[mode]: true,
|
|
17069
17098
|
'has-value': hasValue,
|
|
17070
17099
|
'has-focus': hasFocus,
|
|
@@ -17075,14 +17104,14 @@ class Input {
|
|
|
17075
17104
|
'in-item': inItem,
|
|
17076
17105
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17077
17106
|
'input-disabled': disabled,
|
|
17078
|
-
}) }, hAsync("label", { key: '
|
|
17107
|
+
}) }, hAsync("label", { key: '3d52da6c568fc5d60833e759ba78981f95ad78d5', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '11adb0df91d332a5e1d5c86af88ffbe18ad185a3', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: 'dee0e60628bc5f849c10bae0fed4a4089769266b', name: "start" }), hAsync("input", Object.assign({ key: 'c72e0da90c882a0233b2e27249d5b326eb89f820', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { key: '7aec0dff5eff8dccbcb735301a0ac02f9d58b4f9', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
17079
17108
|
/**
|
|
17080
17109
|
* This prevents mobile browsers from
|
|
17081
17110
|
* blurring the input when the clear
|
|
17082
17111
|
* button is activated.
|
|
17083
17112
|
*/
|
|
17084
17113
|
ev.preventDefault();
|
|
17085
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
17114
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '79e0789ae92590c4cea9923e4370710ba31a4c38', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '3d8d737c32ad1755954aadf14ce956f400873203', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '6d214bf9b8e4058116fd154224e93bbf33c6cb58', class: "input-highlight" })), this.renderBottomContent()));
|
|
17086
17115
|
}
|
|
17087
17116
|
get el() { return getElement(this); }
|
|
17088
17117
|
static get watchers() { return {
|
|
@@ -17134,6 +17163,7 @@ class Input {
|
|
|
17134
17163
|
"type": [1],
|
|
17135
17164
|
"value": [1032],
|
|
17136
17165
|
"hasFocus": [32],
|
|
17166
|
+
"isInvalid": [32],
|
|
17137
17167
|
"setFocus": [64],
|
|
17138
17168
|
"getInputElement": [64]
|
|
17139
17169
|
},
|
|
@@ -34893,6 +34923,10 @@ class Textarea {
|
|
|
34893
34923
|
* is applied in both cases.
|
|
34894
34924
|
*/
|
|
34895
34925
|
this.hasFocus = false;
|
|
34926
|
+
/**
|
|
34927
|
+
* Track validation state for proper aria-live announcements
|
|
34928
|
+
*/
|
|
34929
|
+
this.isInvalid = false;
|
|
34896
34930
|
/**
|
|
34897
34931
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34898
34932
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -34982,6 +35016,18 @@ class Textarea {
|
|
|
34982
35016
|
}
|
|
34983
35017
|
this.didTextareaClearOnEdit = false;
|
|
34984
35018
|
this.ionBlur.emit(ev);
|
|
35019
|
+
/**
|
|
35020
|
+
* Check validation state after blur to handle framework-managed classes.
|
|
35021
|
+
* Frameworks like Angular update classes asynchronously, often using
|
|
35022
|
+
* requestAnimationFrame or promises. Using setTimeout ensures we check
|
|
35023
|
+
* after all microtasks and animation frames have completed.
|
|
35024
|
+
*/
|
|
35025
|
+
setTimeout(() => {
|
|
35026
|
+
const newIsInvalid = this.checkValidationState();
|
|
35027
|
+
if (this.isInvalid !== newIsInvalid) {
|
|
35028
|
+
this.isInvalid = newIsInvalid;
|
|
35029
|
+
}
|
|
35030
|
+
}, 100);
|
|
34985
35031
|
};
|
|
34986
35032
|
this.onKeyDown = (ev) => {
|
|
34987
35033
|
this.checkClearOnEdit(ev);
|
|
@@ -35038,10 +35084,18 @@ class Textarea {
|
|
|
35038
35084
|
this.el.click();
|
|
35039
35085
|
}
|
|
35040
35086
|
}
|
|
35087
|
+
/**
|
|
35088
|
+
* Checks if the textarea is in an invalid state based on validation classes
|
|
35089
|
+
*/
|
|
35090
|
+
checkValidationState() {
|
|
35091
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
35092
|
+
}
|
|
35041
35093
|
connectedCallback() {
|
|
35042
35094
|
const { el } = this;
|
|
35043
35095
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
35044
35096
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
35097
|
+
// Always set initial state
|
|
35098
|
+
this.isInvalid = this.checkValidationState();
|
|
35045
35099
|
this.debounceChanged();
|
|
35046
35100
|
}
|
|
35047
35101
|
disconnectedCallback() {
|
|
@@ -35053,6 +35107,11 @@ class Textarea {
|
|
|
35053
35107
|
this.notchController.destroy();
|
|
35054
35108
|
this.notchController = undefined;
|
|
35055
35109
|
}
|
|
35110
|
+
// Clean up validation observer to prevent memory leaks
|
|
35111
|
+
if (this.validationObserver) {
|
|
35112
|
+
this.validationObserver.disconnect();
|
|
35113
|
+
this.validationObserver = undefined;
|
|
35114
|
+
}
|
|
35056
35115
|
}
|
|
35057
35116
|
componentWillLoad() {
|
|
35058
35117
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35230,8 +35289,8 @@ class Textarea {
|
|
|
35230
35289
|
];
|
|
35231
35290
|
}
|
|
35232
35291
|
getHintTextID() {
|
|
35233
|
-
const {
|
|
35234
|
-
if (
|
|
35292
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35293
|
+
if (isInvalid && errorText) {
|
|
35235
35294
|
return errorTextId;
|
|
35236
35295
|
}
|
|
35237
35296
|
if (helperText) {
|
|
@@ -35290,7 +35349,7 @@ class Textarea {
|
|
|
35290
35349
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35291
35350
|
*/
|
|
35292
35351
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35293
|
-
return (hAsync(Host, { key: '
|
|
35352
|
+
return (hAsync(Host, { key: '075cd9dad6f4f026e421b63e4565e092b3ea0a2a', class: createColorClasses$1(this.color, {
|
|
35294
35353
|
[mode]: true,
|
|
35295
35354
|
'has-value': hasValue,
|
|
35296
35355
|
'has-focus': hasFocus,
|
|
@@ -35299,7 +35358,7 @@ class Textarea {
|
|
|
35299
35358
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35300
35359
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35301
35360
|
'textarea-disabled': disabled,
|
|
35302
|
-
}) }, hAsync("label", { key: '
|
|
35361
|
+
}) }, hAsync("label", { key: 'acb810df87a8156e5f431d65ddba287831acfa97', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '6ee9e8b9dfd562a0a23f3cc4c07c7bad4d168d56', class: "textarea-wrapper-inner" }, hAsync("div", { key: '68d1b9205ad427a2c6de6767a7eb74901fb4d508', class: "start-slot-wrapper" }, hAsync("slot", { key: 'a3b407c79a73cba5cafb6f987d8018573a8c5993', name: "start" })), hAsync("div", { key: '6de732e25024cee7b1da4eb923b8fa1c3b967223', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'e90c595b4d0d8b1f3d2ef8cc1f9ac76ccdbc741d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: 'dcb70f9b4c3b3123ca05225c3396bb65762fb12c', class: "end-slot-wrapper" }, hAsync("slot", { key: '2b8dd7c492b60424512a7f36ba75306697875da4', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'f76c2c046a5a2cdcd3fa9df7a9922f429fc6dd79', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
35303
35362
|
}
|
|
35304
35363
|
get el() { return getElement(this); }
|
|
35305
35364
|
static get watchers() { return {
|
|
@@ -35344,6 +35403,7 @@ class Textarea {
|
|
|
35344
35403
|
"labelPlacement": [1, "label-placement"],
|
|
35345
35404
|
"shape": [1],
|
|
35346
35405
|
"hasFocus": [32],
|
|
35406
|
+
"isInvalid": [32],
|
|
35347
35407
|
"setFocus": [64],
|
|
35348
35408
|
"getInputElement": [64]
|
|
35349
35409
|
},
|
package/hydrate/index.mjs
CHANGED
|
@@ -16627,6 +16627,10 @@ class Input {
|
|
|
16627
16627
|
* is applied in both cases.
|
|
16628
16628
|
*/
|
|
16629
16629
|
this.hasFocus = false;
|
|
16630
|
+
/**
|
|
16631
|
+
* Track validation state for proper aria-live announcements
|
|
16632
|
+
*/
|
|
16633
|
+
this.isInvalid = false;
|
|
16630
16634
|
/**
|
|
16631
16635
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
16632
16636
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -16712,6 +16716,18 @@ class Input {
|
|
|
16712
16716
|
}
|
|
16713
16717
|
this.didInputClearOnEdit = false;
|
|
16714
16718
|
this.ionBlur.emit(ev);
|
|
16719
|
+
/**
|
|
16720
|
+
* Check validation state after blur to handle framework-managed classes.
|
|
16721
|
+
* Frameworks like Angular update classes asynchronously, often using
|
|
16722
|
+
* requestAnimationFrame or promises. Using setTimeout ensures we check
|
|
16723
|
+
* after all microtasks and animation frames have completed.
|
|
16724
|
+
*/
|
|
16725
|
+
setTimeout(() => {
|
|
16726
|
+
const newIsInvalid = this.checkValidationState();
|
|
16727
|
+
if (this.isInvalid !== newIsInvalid) {
|
|
16728
|
+
this.isInvalid = newIsInvalid;
|
|
16729
|
+
}
|
|
16730
|
+
}, 100);
|
|
16715
16731
|
};
|
|
16716
16732
|
this.onFocus = (ev) => {
|
|
16717
16733
|
this.hasFocus = true;
|
|
@@ -16810,10 +16826,18 @@ class Input {
|
|
|
16810
16826
|
componentWillLoad() {
|
|
16811
16827
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16812
16828
|
}
|
|
16829
|
+
/**
|
|
16830
|
+
* Checks if the input is in an invalid state based on validation classes
|
|
16831
|
+
*/
|
|
16832
|
+
checkValidationState() {
|
|
16833
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
16834
|
+
}
|
|
16813
16835
|
connectedCallback() {
|
|
16814
16836
|
const { el } = this;
|
|
16815
16837
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
16816
16838
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
16839
|
+
// Always set initial state
|
|
16840
|
+
this.isInvalid = this.checkValidationState();
|
|
16817
16841
|
this.debounceChanged();
|
|
16818
16842
|
}
|
|
16819
16843
|
componentDidLoad() {
|
|
@@ -16840,6 +16864,11 @@ class Input {
|
|
|
16840
16864
|
this.notchController.destroy();
|
|
16841
16865
|
this.notchController = undefined;
|
|
16842
16866
|
}
|
|
16867
|
+
// Clean up validation observer to prevent memory leaks
|
|
16868
|
+
if (this.validationObserver) {
|
|
16869
|
+
this.validationObserver.disconnect();
|
|
16870
|
+
this.validationObserver = undefined;
|
|
16871
|
+
}
|
|
16843
16872
|
}
|
|
16844
16873
|
/**
|
|
16845
16874
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16948,8 +16977,8 @@ class Input {
|
|
|
16948
16977
|
];
|
|
16949
16978
|
}
|
|
16950
16979
|
getHintTextID() {
|
|
16951
|
-
const {
|
|
16952
|
-
if (
|
|
16980
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16981
|
+
if (isInvalid && errorText) {
|
|
16953
16982
|
return errorTextId;
|
|
16954
16983
|
}
|
|
16955
16984
|
if (helperText) {
|
|
@@ -17062,7 +17091,7 @@ class Input {
|
|
|
17062
17091
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17063
17092
|
*/
|
|
17064
17093
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17065
|
-
return (hAsync(Host, { key: '
|
|
17094
|
+
return (hAsync(Host, { key: 'af93f93b33492571bd61d6b67414f16821132138', class: createColorClasses$1(this.color, {
|
|
17066
17095
|
[mode]: true,
|
|
17067
17096
|
'has-value': hasValue,
|
|
17068
17097
|
'has-focus': hasFocus,
|
|
@@ -17073,14 +17102,14 @@ class Input {
|
|
|
17073
17102
|
'in-item': inItem,
|
|
17074
17103
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17075
17104
|
'input-disabled': disabled,
|
|
17076
|
-
}) }, hAsync("label", { key: '
|
|
17105
|
+
}) }, hAsync("label", { key: '3d52da6c568fc5d60833e759ba78981f95ad78d5', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '11adb0df91d332a5e1d5c86af88ffbe18ad185a3', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: 'dee0e60628bc5f849c10bae0fed4a4089769266b', name: "start" }), hAsync("input", Object.assign({ key: 'c72e0da90c882a0233b2e27249d5b326eb89f820', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { key: '7aec0dff5eff8dccbcb735301a0ac02f9d58b4f9', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
17077
17106
|
/**
|
|
17078
17107
|
* This prevents mobile browsers from
|
|
17079
17108
|
* blurring the input when the clear
|
|
17080
17109
|
* button is activated.
|
|
17081
17110
|
*/
|
|
17082
17111
|
ev.preventDefault();
|
|
17083
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
17112
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '79e0789ae92590c4cea9923e4370710ba31a4c38', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '3d8d737c32ad1755954aadf14ce956f400873203', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '6d214bf9b8e4058116fd154224e93bbf33c6cb58', class: "input-highlight" })), this.renderBottomContent()));
|
|
17084
17113
|
}
|
|
17085
17114
|
get el() { return getElement(this); }
|
|
17086
17115
|
static get watchers() { return {
|
|
@@ -17132,6 +17161,7 @@ class Input {
|
|
|
17132
17161
|
"type": [1],
|
|
17133
17162
|
"value": [1032],
|
|
17134
17163
|
"hasFocus": [32],
|
|
17164
|
+
"isInvalid": [32],
|
|
17135
17165
|
"setFocus": [64],
|
|
17136
17166
|
"getInputElement": [64]
|
|
17137
17167
|
},
|
|
@@ -34891,6 +34921,10 @@ class Textarea {
|
|
|
34891
34921
|
* is applied in both cases.
|
|
34892
34922
|
*/
|
|
34893
34923
|
this.hasFocus = false;
|
|
34924
|
+
/**
|
|
34925
|
+
* Track validation state for proper aria-live announcements
|
|
34926
|
+
*/
|
|
34927
|
+
this.isInvalid = false;
|
|
34894
34928
|
/**
|
|
34895
34929
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34896
34930
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -34980,6 +35014,18 @@ class Textarea {
|
|
|
34980
35014
|
}
|
|
34981
35015
|
this.didTextareaClearOnEdit = false;
|
|
34982
35016
|
this.ionBlur.emit(ev);
|
|
35017
|
+
/**
|
|
35018
|
+
* Check validation state after blur to handle framework-managed classes.
|
|
35019
|
+
* Frameworks like Angular update classes asynchronously, often using
|
|
35020
|
+
* requestAnimationFrame or promises. Using setTimeout ensures we check
|
|
35021
|
+
* after all microtasks and animation frames have completed.
|
|
35022
|
+
*/
|
|
35023
|
+
setTimeout(() => {
|
|
35024
|
+
const newIsInvalid = this.checkValidationState();
|
|
35025
|
+
if (this.isInvalid !== newIsInvalid) {
|
|
35026
|
+
this.isInvalid = newIsInvalid;
|
|
35027
|
+
}
|
|
35028
|
+
}, 100);
|
|
34983
35029
|
};
|
|
34984
35030
|
this.onKeyDown = (ev) => {
|
|
34985
35031
|
this.checkClearOnEdit(ev);
|
|
@@ -35036,10 +35082,18 @@ class Textarea {
|
|
|
35036
35082
|
this.el.click();
|
|
35037
35083
|
}
|
|
35038
35084
|
}
|
|
35085
|
+
/**
|
|
35086
|
+
* Checks if the textarea is in an invalid state based on validation classes
|
|
35087
|
+
*/
|
|
35088
|
+
checkValidationState() {
|
|
35089
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
35090
|
+
}
|
|
35039
35091
|
connectedCallback() {
|
|
35040
35092
|
const { el } = this;
|
|
35041
35093
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
35042
35094
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
35095
|
+
// Always set initial state
|
|
35096
|
+
this.isInvalid = this.checkValidationState();
|
|
35043
35097
|
this.debounceChanged();
|
|
35044
35098
|
}
|
|
35045
35099
|
disconnectedCallback() {
|
|
@@ -35051,6 +35105,11 @@ class Textarea {
|
|
|
35051
35105
|
this.notchController.destroy();
|
|
35052
35106
|
this.notchController = undefined;
|
|
35053
35107
|
}
|
|
35108
|
+
// Clean up validation observer to prevent memory leaks
|
|
35109
|
+
if (this.validationObserver) {
|
|
35110
|
+
this.validationObserver.disconnect();
|
|
35111
|
+
this.validationObserver = undefined;
|
|
35112
|
+
}
|
|
35054
35113
|
}
|
|
35055
35114
|
componentWillLoad() {
|
|
35056
35115
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35228,8 +35287,8 @@ class Textarea {
|
|
|
35228
35287
|
];
|
|
35229
35288
|
}
|
|
35230
35289
|
getHintTextID() {
|
|
35231
|
-
const {
|
|
35232
|
-
if (
|
|
35290
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35291
|
+
if (isInvalid && errorText) {
|
|
35233
35292
|
return errorTextId;
|
|
35234
35293
|
}
|
|
35235
35294
|
if (helperText) {
|
|
@@ -35288,7 +35347,7 @@ class Textarea {
|
|
|
35288
35347
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35289
35348
|
*/
|
|
35290
35349
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35291
|
-
return (hAsync(Host, { key: '
|
|
35350
|
+
return (hAsync(Host, { key: '075cd9dad6f4f026e421b63e4565e092b3ea0a2a', class: createColorClasses$1(this.color, {
|
|
35292
35351
|
[mode]: true,
|
|
35293
35352
|
'has-value': hasValue,
|
|
35294
35353
|
'has-focus': hasFocus,
|
|
@@ -35297,7 +35356,7 @@ class Textarea {
|
|
|
35297
35356
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35298
35357
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35299
35358
|
'textarea-disabled': disabled,
|
|
35300
|
-
}) }, hAsync("label", { key: '
|
|
35359
|
+
}) }, hAsync("label", { key: 'acb810df87a8156e5f431d65ddba287831acfa97', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '6ee9e8b9dfd562a0a23f3cc4c07c7bad4d168d56', class: "textarea-wrapper-inner" }, hAsync("div", { key: '68d1b9205ad427a2c6de6767a7eb74901fb4d508', class: "start-slot-wrapper" }, hAsync("slot", { key: 'a3b407c79a73cba5cafb6f987d8018573a8c5993', name: "start" })), hAsync("div", { key: '6de732e25024cee7b1da4eb923b8fa1c3b967223', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'e90c595b4d0d8b1f3d2ef8cc1f9ac76ccdbc741d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: 'dcb70f9b4c3b3123ca05225c3396bb65762fb12c', class: "end-slot-wrapper" }, hAsync("slot", { key: '2b8dd7c492b60424512a7f36ba75306697875da4', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'f76c2c046a5a2cdcd3fa9df7a9922f429fc6dd79', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
35301
35360
|
}
|
|
35302
35361
|
get el() { return getElement(this); }
|
|
35303
35362
|
static get watchers() { return {
|
|
@@ -35342,6 +35401,7 @@ class Textarea {
|
|
|
35342
35401
|
"labelPlacement": [1, "label-placement"],
|
|
35343
35402
|
"shape": [1],
|
|
35344
35403
|
"hasFocus": [32],
|
|
35404
|
+
"isInvalid": [32],
|
|
35345
35405
|
"setFocus": [64],
|
|
35346
35406
|
"getInputElement": [64]
|
|
35347
35407
|
},
|