@ionic/core 8.7.3 → 8.7.4-dev.11755809082.11a7702b
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 +63 -8
- package/components/ion-textarea.js +62 -7
- package/dist/cjs/ion-input.cjs.entry.js +62 -8
- package/dist/cjs/ion-textarea.cjs.entry.js +61 -7
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/input/input.js +64 -9
- package/dist/collection/components/textarea/textarea.js +63 -8
- package/dist/docs.json +1 -1
- package/dist/esm/ion-input.entry.js +62 -8
- package/dist/esm/ion-textarea.entry.js +61 -7
- 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-1d65c601.entry.js +4 -0
- package/dist/ionic/p-33017191.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 +93 -15
- package/hydrate/index.mjs +93 -15
- 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(){const t=this.el.classList.contains("ion-touched"),e=this.el.classList.contains("ion-invalid"),a=this.el.classList.contains("ng-touched"),i=this.el.classList.contains("ng-invalid");return(t||a)&&(e||i)}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,isInvalid:o}=this;return[t&&r("div",{id:a,class:"helper-text","aria-live":"polite"},t),e&&r("div",{id:i,class:"error-text","aria-live":"assertive","aria-atomic":"true",role:"alert",style:{display:o?"block":"none"}},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:"803c7648de15b8569c3df01692548018cc660510",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:"0e3a4e5fc809437abc6780eb7f99a0c770bb9f94",class:"textarea-wrapper",htmlFor:t,onClick:this.onLabelClick},this.renderLabelContainer(),r("div",{key:"ff8d71e2d53daf4999338232d3b0a597627a3276",class:"textarea-wrapper-inner"},r("div",{key:"313f5a8dc8b62e8ae6a0638a7e201b2594c180eb",class:"start-slot-wrapper"},r("slot",{key:"32db088d41398be935f7060138e4d80a832fea85",name:"start"})),r("div",{key:"24b63ff40ffcae8816f24d9c8a6ec2e7848e0e0b",class:"native-wrapper",ref:t=>this.textareaWrapper=t},r("textarea",Object.assign({key:"2a4f918351f87d444d8922254eefa0941a6ca238",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:"2c32636d2d13560de0a54507e1668eb9f4bcc2cf",class:"end-slot-wrapper"},r("slot",{key:"ccc3549246fd9d2e309958767a7a24e1be8545fd",name:"end"}))),p&&r("div",{key:"f4719399ec530ce295b19817688b8d39d84b6b09",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,27 @@ 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
|
+
// Check for both Ionic and Angular validation classes on the element itself
|
|
16836
|
+
// Angular applies ng-touched/ng-invalid directly to the host element with ngModel
|
|
16837
|
+
const hasIonTouched = this.el.classList.contains('ion-touched');
|
|
16838
|
+
const hasIonInvalid = this.el.classList.contains('ion-invalid');
|
|
16839
|
+
const hasNgTouched = this.el.classList.contains('ng-touched');
|
|
16840
|
+
const hasNgInvalid = this.el.classList.contains('ng-invalid');
|
|
16841
|
+
// Return true if we have both touched and invalid states from either framework
|
|
16842
|
+
const isTouched = hasIonTouched || hasNgTouched;
|
|
16843
|
+
const isInvalid = hasIonInvalid || hasNgInvalid;
|
|
16844
|
+
return isTouched && isInvalid;
|
|
16845
|
+
}
|
|
16815
16846
|
connectedCallback() {
|
|
16816
16847
|
const { el } = this;
|
|
16817
16848
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
16818
16849
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
16850
|
+
// Always set initial state
|
|
16851
|
+
this.isInvalid = this.checkValidationState();
|
|
16819
16852
|
this.debounceChanged();
|
|
16820
16853
|
}
|
|
16821
16854
|
componentDidLoad() {
|
|
@@ -16842,6 +16875,11 @@ class Input {
|
|
|
16842
16875
|
this.notchController.destroy();
|
|
16843
16876
|
this.notchController = undefined;
|
|
16844
16877
|
}
|
|
16878
|
+
// Clean up validation observer to prevent memory leaks
|
|
16879
|
+
if (this.validationObserver) {
|
|
16880
|
+
this.validationObserver.disconnect();
|
|
16881
|
+
this.validationObserver = undefined;
|
|
16882
|
+
}
|
|
16845
16883
|
}
|
|
16846
16884
|
/**
|
|
16847
16885
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16943,15 +16981,15 @@ class Input {
|
|
|
16943
16981
|
* Renders the helper text or error text values
|
|
16944
16982
|
*/
|
|
16945
16983
|
renderHintText() {
|
|
16946
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
16984
|
+
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
16947
16985
|
return [
|
|
16948
|
-
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
16949
|
-
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
16986
|
+
helperText && (hAsync("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
|
|
16987
|
+
errorText && (hAsync("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
|
|
16950
16988
|
];
|
|
16951
16989
|
}
|
|
16952
16990
|
getHintTextID() {
|
|
16953
|
-
const {
|
|
16954
|
-
if (
|
|
16991
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16992
|
+
if (isInvalid && errorText) {
|
|
16955
16993
|
return errorTextId;
|
|
16956
16994
|
}
|
|
16957
16995
|
if (helperText) {
|
|
@@ -17064,7 +17102,7 @@ class Input {
|
|
|
17064
17102
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17065
17103
|
*/
|
|
17066
17104
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17067
|
-
return (hAsync(Host, { key: '
|
|
17105
|
+
return (hAsync(Host, { key: '1a141906096fc637d7de923edf6a9ea3a0168f5f', class: createColorClasses$1(this.color, {
|
|
17068
17106
|
[mode]: true,
|
|
17069
17107
|
'has-value': hasValue,
|
|
17070
17108
|
'has-focus': hasFocus,
|
|
@@ -17075,14 +17113,14 @@ class Input {
|
|
|
17075
17113
|
'in-item': inItem,
|
|
17076
17114
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17077
17115
|
'input-disabled': disabled,
|
|
17078
|
-
}) }, hAsync("label", { key: '
|
|
17116
|
+
}) }, hAsync("label", { key: '8371432bc0fd37099d3efc50705530965f27b9e1', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '3d113da062bddf47b1bc67e67162c11fe4ee7f10', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: '3fe52ada4b91ebd21b21b1445b9d4009d47f8386', name: "start" }), hAsync("input", Object.assign({ key: 'beda905e9d44797690149407ba814381ffd51d1d', 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: 'bc8579a0acb727b348bcf277f296b2dac9cb583d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
17079
17117
|
/**
|
|
17080
17118
|
* This prevents mobile browsers from
|
|
17081
17119
|
* blurring the input when the clear
|
|
17082
17120
|
* button is activated.
|
|
17083
17121
|
*/
|
|
17084
17122
|
ev.preventDefault();
|
|
17085
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
17123
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '41a64ec6fce010eb225637998d93abd859a62be7', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '9a7e6eba584748fc037aa1694d7e6e399de8b20b', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'b828e6dc43b50f46727dda196de7ad2fecc3ef30', class: "input-highlight" })), this.renderBottomContent()));
|
|
17086
17124
|
}
|
|
17087
17125
|
get el() { return getElement(this); }
|
|
17088
17126
|
static get watchers() { return {
|
|
@@ -17134,6 +17172,7 @@ class Input {
|
|
|
17134
17172
|
"type": [1],
|
|
17135
17173
|
"value": [1032],
|
|
17136
17174
|
"hasFocus": [32],
|
|
17175
|
+
"isInvalid": [32],
|
|
17137
17176
|
"setFocus": [64],
|
|
17138
17177
|
"getInputElement": [64]
|
|
17139
17178
|
},
|
|
@@ -34893,6 +34932,10 @@ class Textarea {
|
|
|
34893
34932
|
* is applied in both cases.
|
|
34894
34933
|
*/
|
|
34895
34934
|
this.hasFocus = false;
|
|
34935
|
+
/**
|
|
34936
|
+
* Track validation state for proper aria-live announcements
|
|
34937
|
+
*/
|
|
34938
|
+
this.isInvalid = false;
|
|
34896
34939
|
/**
|
|
34897
34940
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34898
34941
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -34982,6 +35025,18 @@ class Textarea {
|
|
|
34982
35025
|
}
|
|
34983
35026
|
this.didTextareaClearOnEdit = false;
|
|
34984
35027
|
this.ionBlur.emit(ev);
|
|
35028
|
+
/**
|
|
35029
|
+
* Check validation state after blur to handle framework-managed classes.
|
|
35030
|
+
* Frameworks like Angular update classes asynchronously, often using
|
|
35031
|
+
* requestAnimationFrame or promises. Using setTimeout ensures we check
|
|
35032
|
+
* after all microtasks and animation frames have completed.
|
|
35033
|
+
*/
|
|
35034
|
+
setTimeout(() => {
|
|
35035
|
+
const newIsInvalid = this.checkValidationState();
|
|
35036
|
+
if (this.isInvalid !== newIsInvalid) {
|
|
35037
|
+
this.isInvalid = newIsInvalid;
|
|
35038
|
+
}
|
|
35039
|
+
}, 100);
|
|
34985
35040
|
};
|
|
34986
35041
|
this.onKeyDown = (ev) => {
|
|
34987
35042
|
this.checkClearOnEdit(ev);
|
|
@@ -35038,10 +35093,27 @@ class Textarea {
|
|
|
35038
35093
|
this.el.click();
|
|
35039
35094
|
}
|
|
35040
35095
|
}
|
|
35096
|
+
/**
|
|
35097
|
+
* Checks if the textarea is in an invalid state based on validation classes
|
|
35098
|
+
*/
|
|
35099
|
+
checkValidationState() {
|
|
35100
|
+
// Check for both Ionic and Angular validation classes on the element itself
|
|
35101
|
+
// Angular applies ng-touched/ng-invalid directly to the host element with ngModel
|
|
35102
|
+
const hasIonTouched = this.el.classList.contains('ion-touched');
|
|
35103
|
+
const hasIonInvalid = this.el.classList.contains('ion-invalid');
|
|
35104
|
+
const hasNgTouched = this.el.classList.contains('ng-touched');
|
|
35105
|
+
const hasNgInvalid = this.el.classList.contains('ng-invalid');
|
|
35106
|
+
// Return true if we have both touched and invalid states from either framework
|
|
35107
|
+
const isTouched = hasIonTouched || hasNgTouched;
|
|
35108
|
+
const isInvalid = hasIonInvalid || hasNgInvalid;
|
|
35109
|
+
return isTouched && isInvalid;
|
|
35110
|
+
}
|
|
35041
35111
|
connectedCallback() {
|
|
35042
35112
|
const { el } = this;
|
|
35043
35113
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
35044
35114
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
35115
|
+
// Always set initial state
|
|
35116
|
+
this.isInvalid = this.checkValidationState();
|
|
35045
35117
|
this.debounceChanged();
|
|
35046
35118
|
}
|
|
35047
35119
|
disconnectedCallback() {
|
|
@@ -35053,6 +35125,11 @@ class Textarea {
|
|
|
35053
35125
|
this.notchController.destroy();
|
|
35054
35126
|
this.notchController = undefined;
|
|
35055
35127
|
}
|
|
35128
|
+
// Clean up validation observer to prevent memory leaks
|
|
35129
|
+
if (this.validationObserver) {
|
|
35130
|
+
this.validationObserver.disconnect();
|
|
35131
|
+
this.validationObserver = undefined;
|
|
35132
|
+
}
|
|
35056
35133
|
}
|
|
35057
35134
|
componentWillLoad() {
|
|
35058
35135
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35223,15 +35300,15 @@ class Textarea {
|
|
|
35223
35300
|
* Renders the helper text or error text values
|
|
35224
35301
|
*/
|
|
35225
35302
|
renderHintText() {
|
|
35226
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
35303
|
+
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
35227
35304
|
return [
|
|
35228
|
-
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
35229
|
-
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
35305
|
+
helperText && (hAsync("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
|
|
35306
|
+
errorText && (hAsync("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
|
|
35230
35307
|
];
|
|
35231
35308
|
}
|
|
35232
35309
|
getHintTextID() {
|
|
35233
|
-
const {
|
|
35234
|
-
if (
|
|
35310
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35311
|
+
if (isInvalid && errorText) {
|
|
35235
35312
|
return errorTextId;
|
|
35236
35313
|
}
|
|
35237
35314
|
if (helperText) {
|
|
@@ -35290,7 +35367,7 @@ class Textarea {
|
|
|
35290
35367
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35291
35368
|
*/
|
|
35292
35369
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35293
|
-
return (hAsync(Host, { key: '
|
|
35370
|
+
return (hAsync(Host, { key: '803c7648de15b8569c3df01692548018cc660510', class: createColorClasses$1(this.color, {
|
|
35294
35371
|
[mode]: true,
|
|
35295
35372
|
'has-value': hasValue,
|
|
35296
35373
|
'has-focus': hasFocus,
|
|
@@ -35299,7 +35376,7 @@ class Textarea {
|
|
|
35299
35376
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35300
35377
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35301
35378
|
'textarea-disabled': disabled,
|
|
35302
|
-
}) }, hAsync("label", { key: '
|
|
35379
|
+
}) }, hAsync("label", { key: '0e3a4e5fc809437abc6780eb7f99a0c770bb9f94', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'ff8d71e2d53daf4999338232d3b0a597627a3276', class: "textarea-wrapper-inner" }, hAsync("div", { key: '313f5a8dc8b62e8ae6a0638a7e201b2594c180eb', class: "start-slot-wrapper" }, hAsync("slot", { key: '32db088d41398be935f7060138e4d80a832fea85', name: "start" })), hAsync("div", { key: '24b63ff40ffcae8816f24d9c8a6ec2e7848e0e0b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '2a4f918351f87d444d8922254eefa0941a6ca238', 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: '2c32636d2d13560de0a54507e1668eb9f4bcc2cf', class: "end-slot-wrapper" }, hAsync("slot", { key: 'ccc3549246fd9d2e309958767a7a24e1be8545fd', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'f4719399ec530ce295b19817688b8d39d84b6b09', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
35303
35380
|
}
|
|
35304
35381
|
get el() { return getElement(this); }
|
|
35305
35382
|
static get watchers() { return {
|
|
@@ -35344,6 +35421,7 @@ class Textarea {
|
|
|
35344
35421
|
"labelPlacement": [1, "label-placement"],
|
|
35345
35422
|
"shape": [1],
|
|
35346
35423
|
"hasFocus": [32],
|
|
35424
|
+
"isInvalid": [32],
|
|
35347
35425
|
"setFocus": [64],
|
|
35348
35426
|
"getInputElement": [64]
|
|
35349
35427
|
},
|