@ionic/core 8.7.4-dev.11755800369.16c1f61b → 8.7.4-nightly.20250821
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 +5 -51
- package/components/ion-textarea.js +4 -50
- package/dist/cjs/ion-input.cjs.entry.js +5 -50
- package/dist/cjs/ion-textarea.cjs.entry.js +4 -49
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/input/input.js +6 -52
- package/dist/collection/components/textarea/textarea.js +5 -51
- package/dist/docs.json +1 -1
- package/dist/esm/ion-input.entry.js +5 -50
- package/dist/esm/ion-textarea.entry.js +4 -49
- 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-1488b7cc.entry.js +4 -0
- package/dist/ionic/p-c5210d3e.entry.js +4 -0
- package/dist/types/components/input/input.d.ts +0 -9
- package/dist/types/components/textarea/textarea.d.ts +0 -9
- package/hydrate/index.js +9 -69
- package/hydrate/index.mjs +9 -69
- package/package.json +1 -1
- package/dist/ionic/p-08493d32.entry.js +0 -4
- package/dist/ionic/p-a30b23cf.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(a){t(this,a),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.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)},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())}connectedCallback(){const{el:t}=this;this.slotMutationController=p(t,["label","start","end"],(()=>a(this))),this.notchController=l(t,(()=>this.notchSpacerEl),(()=>this.labelSlot)),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)}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{el:t,helperText:e,errorText:a,helperTextId:i,errorTextId:r}=this;return t.classList.contains("ion-touched")&&t.classList.contains("ion-invalid")&&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:"d9f2ede0107987fc42c99e310cd2336bad5a5755",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:"9de598b95237462bb3bccffaefe83afbb43554b8",class:"textarea-wrapper",htmlFor:t,onClick:this.onLabelClick},this.renderLabelContainer(),r("div",{key:"e33c426c6541d723ccc246bb404c03687726ff83",class:"textarea-wrapper-inner"},r("div",{key:"521e11af9d54d281b0a2b1c25bcfc6f742c18296",class:"start-slot-wrapper"},r("slot",{key:"515523f6ca3ce0e5dd08f3275c21a190fb1ca177",name:"start"})),r("div",{key:"916e01e00de8400ae00ef06bc1fb62d8be2eee08",class:"native-wrapper",ref:t=>this.textareaWrapper=t},r("textarea",Object.assign({key:"810271e6532d90e27dab1fcb26546113c1ce9cb0",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.getHintTextID()===this.errorTextId},this.inheritedAttributes),c)),r("div",{key:"80aca9ea9546dca9d38efd291a6b0be384bb6978",class:"end-slot-wrapper"},r("slot",{key:"407fab16c66a9f4a542369bfecc0d9afa0065977",name:"end"}))),p&&r("div",{key:"f00523a6698fac8a1996e04303487bef01d10f25",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,12 +39,7 @@ 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;
|
|
46
42
|
el: HTMLIonInputElement;
|
|
47
|
-
private validationObserver?;
|
|
48
43
|
/**
|
|
49
44
|
* The color to use from your application's color palette.
|
|
50
45
|
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
@@ -266,10 +261,6 @@ export declare class Input implements ComponentInterface {
|
|
|
266
261
|
*/
|
|
267
262
|
onClickCapture(ev: Event): void;
|
|
268
263
|
componentWillLoad(): void;
|
|
269
|
-
/**
|
|
270
|
-
* Checks if the input is in an invalid state based on validation classes
|
|
271
|
-
*/
|
|
272
|
-
private checkValidationState;
|
|
273
264
|
connectedCallback(): void;
|
|
274
265
|
componentDidLoad(): void;
|
|
275
266
|
componentDidRender(): void;
|
|
@@ -40,11 +40,6 @@ 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?;
|
|
48
43
|
/**
|
|
49
44
|
* The color to use from your application's color palette.
|
|
50
45
|
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
@@ -225,10 +220,6 @@ export declare class Textarea implements ComponentInterface {
|
|
|
225
220
|
* Instead, the click event from the ion-textarea is emitted.
|
|
226
221
|
*/
|
|
227
222
|
onClickCapture(ev: Event): void;
|
|
228
|
-
/**
|
|
229
|
-
* Checks if the textarea is in an invalid state based on validation classes
|
|
230
|
-
*/
|
|
231
|
-
private checkValidationState;
|
|
232
223
|
connectedCallback(): void;
|
|
233
224
|
disconnectedCallback(): void;
|
|
234
225
|
componentWillLoad(): void;
|
package/hydrate/index.js
CHANGED
|
@@ -16629,10 +16629,6 @@ 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;
|
|
16636
16632
|
/**
|
|
16637
16633
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
16638
16634
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -16718,18 +16714,6 @@ class Input {
|
|
|
16718
16714
|
}
|
|
16719
16715
|
this.didInputClearOnEdit = false;
|
|
16720
16716
|
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);
|
|
16733
16717
|
};
|
|
16734
16718
|
this.onFocus = (ev) => {
|
|
16735
16719
|
this.hasFocus = true;
|
|
@@ -16828,18 +16812,10 @@ class Input {
|
|
|
16828
16812
|
componentWillLoad() {
|
|
16829
16813
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16830
16814
|
}
|
|
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
|
-
}
|
|
16837
16815
|
connectedCallback() {
|
|
16838
16816
|
const { el } = this;
|
|
16839
16817
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
16840
16818
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
16841
|
-
// Always set initial state
|
|
16842
|
-
this.isInvalid = this.checkValidationState();
|
|
16843
16819
|
this.debounceChanged();
|
|
16844
16820
|
}
|
|
16845
16821
|
componentDidLoad() {
|
|
@@ -16866,11 +16842,6 @@ class Input {
|
|
|
16866
16842
|
this.notchController.destroy();
|
|
16867
16843
|
this.notchController = undefined;
|
|
16868
16844
|
}
|
|
16869
|
-
// Clean up validation observer to prevent memory leaks
|
|
16870
|
-
if (this.validationObserver) {
|
|
16871
|
-
this.validationObserver.disconnect();
|
|
16872
|
-
this.validationObserver = undefined;
|
|
16873
|
-
}
|
|
16874
16845
|
}
|
|
16875
16846
|
/**
|
|
16876
16847
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16979,8 +16950,8 @@ class Input {
|
|
|
16979
16950
|
];
|
|
16980
16951
|
}
|
|
16981
16952
|
getHintTextID() {
|
|
16982
|
-
const {
|
|
16983
|
-
if (
|
|
16953
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16954
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
16984
16955
|
return errorTextId;
|
|
16985
16956
|
}
|
|
16986
16957
|
if (helperText) {
|
|
@@ -17093,7 +17064,7 @@ class Input {
|
|
|
17093
17064
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17094
17065
|
*/
|
|
17095
17066
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17096
|
-
return (hAsync(Host, { key: '
|
|
17067
|
+
return (hAsync(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses$1(this.color, {
|
|
17097
17068
|
[mode]: true,
|
|
17098
17069
|
'has-value': hasValue,
|
|
17099
17070
|
'has-focus': hasFocus,
|
|
@@ -17104,14 +17075,14 @@ class Input {
|
|
|
17104
17075
|
'in-item': inItem,
|
|
17105
17076
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17106
17077
|
'input-disabled': disabled,
|
|
17107
|
-
}) }, hAsync("label", { key: '
|
|
17078
|
+
}) }, hAsync("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), hAsync("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', 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.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
17108
17079
|
/**
|
|
17109
17080
|
* This prevents mobile browsers from
|
|
17110
17081
|
* blurring the input when the clear
|
|
17111
17082
|
* button is activated.
|
|
17112
17083
|
*/
|
|
17113
17084
|
ev.preventDefault();
|
|
17114
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
17085
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
|
|
17115
17086
|
}
|
|
17116
17087
|
get el() { return getElement(this); }
|
|
17117
17088
|
static get watchers() { return {
|
|
@@ -17163,7 +17134,6 @@ class Input {
|
|
|
17163
17134
|
"type": [1],
|
|
17164
17135
|
"value": [1032],
|
|
17165
17136
|
"hasFocus": [32],
|
|
17166
|
-
"isInvalid": [32],
|
|
17167
17137
|
"setFocus": [64],
|
|
17168
17138
|
"getInputElement": [64]
|
|
17169
17139
|
},
|
|
@@ -34923,10 +34893,6 @@ class Textarea {
|
|
|
34923
34893
|
* is applied in both cases.
|
|
34924
34894
|
*/
|
|
34925
34895
|
this.hasFocus = false;
|
|
34926
|
-
/**
|
|
34927
|
-
* Track validation state for proper aria-live announcements
|
|
34928
|
-
*/
|
|
34929
|
-
this.isInvalid = false;
|
|
34930
34896
|
/**
|
|
34931
34897
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34932
34898
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -35016,18 +34982,6 @@ class Textarea {
|
|
|
35016
34982
|
}
|
|
35017
34983
|
this.didTextareaClearOnEdit = false;
|
|
35018
34984
|
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);
|
|
35031
34985
|
};
|
|
35032
34986
|
this.onKeyDown = (ev) => {
|
|
35033
34987
|
this.checkClearOnEdit(ev);
|
|
@@ -35084,18 +35038,10 @@ class Textarea {
|
|
|
35084
35038
|
this.el.click();
|
|
35085
35039
|
}
|
|
35086
35040
|
}
|
|
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
|
-
}
|
|
35093
35041
|
connectedCallback() {
|
|
35094
35042
|
const { el } = this;
|
|
35095
35043
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
35096
35044
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
35097
|
-
// Always set initial state
|
|
35098
|
-
this.isInvalid = this.checkValidationState();
|
|
35099
35045
|
this.debounceChanged();
|
|
35100
35046
|
}
|
|
35101
35047
|
disconnectedCallback() {
|
|
@@ -35107,11 +35053,6 @@ class Textarea {
|
|
|
35107
35053
|
this.notchController.destroy();
|
|
35108
35054
|
this.notchController = undefined;
|
|
35109
35055
|
}
|
|
35110
|
-
// Clean up validation observer to prevent memory leaks
|
|
35111
|
-
if (this.validationObserver) {
|
|
35112
|
-
this.validationObserver.disconnect();
|
|
35113
|
-
this.validationObserver = undefined;
|
|
35114
|
-
}
|
|
35115
35056
|
}
|
|
35116
35057
|
componentWillLoad() {
|
|
35117
35058
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35289,8 +35230,8 @@ class Textarea {
|
|
|
35289
35230
|
];
|
|
35290
35231
|
}
|
|
35291
35232
|
getHintTextID() {
|
|
35292
|
-
const {
|
|
35293
|
-
if (
|
|
35233
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35234
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
35294
35235
|
return errorTextId;
|
|
35295
35236
|
}
|
|
35296
35237
|
if (helperText) {
|
|
@@ -35349,7 +35290,7 @@ class Textarea {
|
|
|
35349
35290
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35350
35291
|
*/
|
|
35351
35292
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35352
|
-
return (hAsync(Host, { key: '
|
|
35293
|
+
return (hAsync(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses$1(this.color, {
|
|
35353
35294
|
[mode]: true,
|
|
35354
35295
|
'has-value': hasValue,
|
|
35355
35296
|
'has-focus': hasFocus,
|
|
@@ -35358,7 +35299,7 @@ class Textarea {
|
|
|
35358
35299
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35359
35300
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35360
35301
|
'textarea-disabled': disabled,
|
|
35361
|
-
}) }, hAsync("label", { key: '
|
|
35302
|
+
}) }, hAsync("label", { key: '9de598b95237462bb3bccffaefe83afbb43554b8', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'e33c426c6541d723ccc246bb404c03687726ff83', class: "textarea-wrapper-inner" }, hAsync("div", { key: '521e11af9d54d281b0a2b1c25bcfc6f742c18296', class: "start-slot-wrapper" }, hAsync("slot", { key: '515523f6ca3ce0e5dd08f3275c21a190fb1ca177', name: "start" })), hAsync("div", { key: '916e01e00de8400ae00ef06bc1fb62d8be2eee08', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '810271e6532d90e27dab1fcb26546113c1ce9cb0', 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.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), hAsync("div", { key: '80aca9ea9546dca9d38efd291a6b0be384bb6978', class: "end-slot-wrapper" }, hAsync("slot", { key: '407fab16c66a9f4a542369bfecc0d9afa0065977', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'f00523a6698fac8a1996e04303487bef01d10f25', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
35362
35303
|
}
|
|
35363
35304
|
get el() { return getElement(this); }
|
|
35364
35305
|
static get watchers() { return {
|
|
@@ -35403,7 +35344,6 @@ class Textarea {
|
|
|
35403
35344
|
"labelPlacement": [1, "label-placement"],
|
|
35404
35345
|
"shape": [1],
|
|
35405
35346
|
"hasFocus": [32],
|
|
35406
|
-
"isInvalid": [32],
|
|
35407
35347
|
"setFocus": [64],
|
|
35408
35348
|
"getInputElement": [64]
|
|
35409
35349
|
},
|
package/hydrate/index.mjs
CHANGED
|
@@ -16627,10 +16627,6 @@ 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;
|
|
16634
16630
|
/**
|
|
16635
16631
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
16636
16632
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -16716,18 +16712,6 @@ class Input {
|
|
|
16716
16712
|
}
|
|
16717
16713
|
this.didInputClearOnEdit = false;
|
|
16718
16714
|
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);
|
|
16731
16715
|
};
|
|
16732
16716
|
this.onFocus = (ev) => {
|
|
16733
16717
|
this.hasFocus = true;
|
|
@@ -16826,18 +16810,10 @@ class Input {
|
|
|
16826
16810
|
componentWillLoad() {
|
|
16827
16811
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16828
16812
|
}
|
|
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
|
-
}
|
|
16835
16813
|
connectedCallback() {
|
|
16836
16814
|
const { el } = this;
|
|
16837
16815
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
16838
16816
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
16839
|
-
// Always set initial state
|
|
16840
|
-
this.isInvalid = this.checkValidationState();
|
|
16841
16817
|
this.debounceChanged();
|
|
16842
16818
|
}
|
|
16843
16819
|
componentDidLoad() {
|
|
@@ -16864,11 +16840,6 @@ class Input {
|
|
|
16864
16840
|
this.notchController.destroy();
|
|
16865
16841
|
this.notchController = undefined;
|
|
16866
16842
|
}
|
|
16867
|
-
// Clean up validation observer to prevent memory leaks
|
|
16868
|
-
if (this.validationObserver) {
|
|
16869
|
-
this.validationObserver.disconnect();
|
|
16870
|
-
this.validationObserver = undefined;
|
|
16871
|
-
}
|
|
16872
16843
|
}
|
|
16873
16844
|
/**
|
|
16874
16845
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16977,8 +16948,8 @@ class Input {
|
|
|
16977
16948
|
];
|
|
16978
16949
|
}
|
|
16979
16950
|
getHintTextID() {
|
|
16980
|
-
const {
|
|
16981
|
-
if (
|
|
16951
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16952
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
16982
16953
|
return errorTextId;
|
|
16983
16954
|
}
|
|
16984
16955
|
if (helperText) {
|
|
@@ -17091,7 +17062,7 @@ class Input {
|
|
|
17091
17062
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17092
17063
|
*/
|
|
17093
17064
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17094
|
-
return (hAsync(Host, { key: '
|
|
17065
|
+
return (hAsync(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses$1(this.color, {
|
|
17095
17066
|
[mode]: true,
|
|
17096
17067
|
'has-value': hasValue,
|
|
17097
17068
|
'has-focus': hasFocus,
|
|
@@ -17102,14 +17073,14 @@ class Input {
|
|
|
17102
17073
|
'in-item': inItem,
|
|
17103
17074
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17104
17075
|
'input-disabled': disabled,
|
|
17105
|
-
}) }, hAsync("label", { key: '
|
|
17076
|
+
}) }, hAsync("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), hAsync("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', 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.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
17106
17077
|
/**
|
|
17107
17078
|
* This prevents mobile browsers from
|
|
17108
17079
|
* blurring the input when the clear
|
|
17109
17080
|
* button is activated.
|
|
17110
17081
|
*/
|
|
17111
17082
|
ev.preventDefault();
|
|
17112
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
17083
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
|
|
17113
17084
|
}
|
|
17114
17085
|
get el() { return getElement(this); }
|
|
17115
17086
|
static get watchers() { return {
|
|
@@ -17161,7 +17132,6 @@ class Input {
|
|
|
17161
17132
|
"type": [1],
|
|
17162
17133
|
"value": [1032],
|
|
17163
17134
|
"hasFocus": [32],
|
|
17164
|
-
"isInvalid": [32],
|
|
17165
17135
|
"setFocus": [64],
|
|
17166
17136
|
"getInputElement": [64]
|
|
17167
17137
|
},
|
|
@@ -34921,10 +34891,6 @@ class Textarea {
|
|
|
34921
34891
|
* is applied in both cases.
|
|
34922
34892
|
*/
|
|
34923
34893
|
this.hasFocus = false;
|
|
34924
|
-
/**
|
|
34925
|
-
* Track validation state for proper aria-live announcements
|
|
34926
|
-
*/
|
|
34927
|
-
this.isInvalid = false;
|
|
34928
34894
|
/**
|
|
34929
34895
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34930
34896
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -35014,18 +34980,6 @@ class Textarea {
|
|
|
35014
34980
|
}
|
|
35015
34981
|
this.didTextareaClearOnEdit = false;
|
|
35016
34982
|
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);
|
|
35029
34983
|
};
|
|
35030
34984
|
this.onKeyDown = (ev) => {
|
|
35031
34985
|
this.checkClearOnEdit(ev);
|
|
@@ -35082,18 +35036,10 @@ class Textarea {
|
|
|
35082
35036
|
this.el.click();
|
|
35083
35037
|
}
|
|
35084
35038
|
}
|
|
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
|
-
}
|
|
35091
35039
|
connectedCallback() {
|
|
35092
35040
|
const { el } = this;
|
|
35093
35041
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
35094
35042
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
35095
|
-
// Always set initial state
|
|
35096
|
-
this.isInvalid = this.checkValidationState();
|
|
35097
35043
|
this.debounceChanged();
|
|
35098
35044
|
}
|
|
35099
35045
|
disconnectedCallback() {
|
|
@@ -35105,11 +35051,6 @@ class Textarea {
|
|
|
35105
35051
|
this.notchController.destroy();
|
|
35106
35052
|
this.notchController = undefined;
|
|
35107
35053
|
}
|
|
35108
|
-
// Clean up validation observer to prevent memory leaks
|
|
35109
|
-
if (this.validationObserver) {
|
|
35110
|
-
this.validationObserver.disconnect();
|
|
35111
|
-
this.validationObserver = undefined;
|
|
35112
|
-
}
|
|
35113
35054
|
}
|
|
35114
35055
|
componentWillLoad() {
|
|
35115
35056
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35287,8 +35228,8 @@ class Textarea {
|
|
|
35287
35228
|
];
|
|
35288
35229
|
}
|
|
35289
35230
|
getHintTextID() {
|
|
35290
|
-
const {
|
|
35291
|
-
if (
|
|
35231
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35232
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
35292
35233
|
return errorTextId;
|
|
35293
35234
|
}
|
|
35294
35235
|
if (helperText) {
|
|
@@ -35347,7 +35288,7 @@ class Textarea {
|
|
|
35347
35288
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35348
35289
|
*/
|
|
35349
35290
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35350
|
-
return (hAsync(Host, { key: '
|
|
35291
|
+
return (hAsync(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses$1(this.color, {
|
|
35351
35292
|
[mode]: true,
|
|
35352
35293
|
'has-value': hasValue,
|
|
35353
35294
|
'has-focus': hasFocus,
|
|
@@ -35356,7 +35297,7 @@ class Textarea {
|
|
|
35356
35297
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35357
35298
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35358
35299
|
'textarea-disabled': disabled,
|
|
35359
|
-
}) }, hAsync("label", { key: '
|
|
35300
|
+
}) }, hAsync("label", { key: '9de598b95237462bb3bccffaefe83afbb43554b8', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'e33c426c6541d723ccc246bb404c03687726ff83', class: "textarea-wrapper-inner" }, hAsync("div", { key: '521e11af9d54d281b0a2b1c25bcfc6f742c18296', class: "start-slot-wrapper" }, hAsync("slot", { key: '515523f6ca3ce0e5dd08f3275c21a190fb1ca177', name: "start" })), hAsync("div", { key: '916e01e00de8400ae00ef06bc1fb62d8be2eee08', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '810271e6532d90e27dab1fcb26546113c1ce9cb0', 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.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), hAsync("div", { key: '80aca9ea9546dca9d38efd291a6b0be384bb6978', class: "end-slot-wrapper" }, hAsync("slot", { key: '407fab16c66a9f4a542369bfecc0d9afa0065977', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'f00523a6698fac8a1996e04303487bef01d10f25', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
35360
35301
|
}
|
|
35361
35302
|
get el() { return getElement(this); }
|
|
35362
35303
|
static get watchers() { return {
|
|
@@ -35401,7 +35342,6 @@ class Textarea {
|
|
|
35401
35342
|
"labelPlacement": [1, "label-placement"],
|
|
35402
35343
|
"shape": [1],
|
|
35403
35344
|
"hasFocus": [32],
|
|
35404
|
-
"isInvalid": [32],
|
|
35405
35345
|
"setFocus": [64],
|
|
35406
35346
|
"getInputElement": [64]
|
|
35407
35347
|
},
|