@ionic/core 8.7.3-dev.11755190119.16c6a375 → 8.7.3-dev.11755195979.1ec83531
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 +38 -7
- package/components/ion-textarea.js +37 -6
- package/dist/cjs/ion-input.cjs.entry.js +37 -7
- package/dist/cjs/ion-textarea.cjs.entry.js +36 -6
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/input/input.js +39 -8
- package/dist/collection/components/textarea/textarea.js +38 -7
- package/dist/docs.json +1 -1
- package/dist/esm/ion-input.entry.js +37 -7
- package/dist/esm/ion-textarea.entry.js +36 -6
- 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-44415a3b.entry.js +4 -0
- package/dist/ionic/p-f80f7416.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 +45 -13
- package/hydrate/index.mjs +45 -13
- package/package.json +1 -1
- package/dist/ionic/p-9f36c56a.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(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.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)},this.onKeyDown=t=>{this.checkClearOnEdit(t)},this.onLabelClick=t=>{t.target===t.currentTarget&&t.stopPropagation()}}debounceChanged(){const{ionInput:t,debounce:e,originalIonInput:a}=this;this.ionInput=void 0===e?null!=a?a:t:s(t,e)}valueChanged(){const t=this.nativeInput,e=this.getValue();t&&t.value!==e&&(t.value=e),this.runAutoGrow()}onDirChanged(t){this.inheritedAttributes=Object.assign(Object.assign({},this.inheritedAttributes),{dir:t}),a(this)}onClickCapture(t){const e=this.nativeInput;e&&t.target===e&&(t.stopPropagation(),this.el.click())}checkValidationState(){return this.el.classList.contains("ion-touched")&&this.el.classList.contains("ion-invalid")}connectedCallback(){const{el:t}=this;this.slotMutationController=p(t,["label","start","end"],(()=>a(this))),this.notchController=l(t,(()=>this.notchSpacerEl),(()=>this.labelSlot)),this.validationObserver=new MutationObserver((()=>{const t=this.checkValidationState();this.isInvalid!==t&&(this.isInvalid=t)})),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[r("div",{id:a,class:"helper-text"},t),r("div",{id:i,class:"error-text",role:o&&e?"alert":void 0,"aria-live":o&&e?"polite":"off","aria-atomic":"true"},o&&e?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:"b67193cbdbd70844901e7f58346cb6021ea8ff9b",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:"11cb5c9eefd6c82f0d94a283f65e3bfea7cfd31f",class:"textarea-wrapper",htmlFor:t,onClick:this.onLabelClick},this.renderLabelContainer(),r("div",{key:"f23c54b1d02b07ae54a729a1c871788b804031fe",class:"textarea-wrapper-inner"},r("div",{key:"d467679b2132c67307eacf29f0cb9cffe9fa3f70",class:"start-slot-wrapper"},r("slot",{key:"e75629aeb663218b24598803a400c0755bbc0958",name:"start"})),r("div",{key:"dacfbeaee43984034a59375adcda329e5cf73de4",class:"native-wrapper",ref:t=>this.textareaWrapper=t},r("textarea",Object.assign({key:"cee91118b3d2fa7f6b0660bab8384cd508e432b1",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:"7802d173e3e338776ae2a095037191fdfe771dda",class:"end-slot-wrapper"},r("slot",{key:"1b721a633799701fab2527b046c03ee23fa30c2e",name:"end"}))),p&&r("div",{key:"ae2836d8d7ab9a1a6e70c3c17bbf99e30835c39d",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"`.
|
|
@@ -16812,6 +16816,12 @@ class Input {
|
|
|
16812
16816
|
componentWillLoad() {
|
|
16813
16817
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16814
16818
|
}
|
|
16819
|
+
/**
|
|
16820
|
+
* Checks if the input is in an invalid state based on validation classes
|
|
16821
|
+
*/
|
|
16822
|
+
checkValidationState() {
|
|
16823
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
16824
|
+
}
|
|
16815
16825
|
connectedCallback() {
|
|
16816
16826
|
const { el } = this;
|
|
16817
16827
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -16842,6 +16852,11 @@ class Input {
|
|
|
16842
16852
|
this.notchController.destroy();
|
|
16843
16853
|
this.notchController = undefined;
|
|
16844
16854
|
}
|
|
16855
|
+
// Clean up validation observer to prevent memory leaks
|
|
16856
|
+
if (this.validationObserver) {
|
|
16857
|
+
this.validationObserver.disconnect();
|
|
16858
|
+
this.validationObserver = undefined;
|
|
16859
|
+
}
|
|
16845
16860
|
}
|
|
16846
16861
|
/**
|
|
16847
16862
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16943,15 +16958,15 @@ class Input {
|
|
|
16943
16958
|
* Renders the helper text or error text values
|
|
16944
16959
|
*/
|
|
16945
16960
|
renderHintText() {
|
|
16946
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
16961
|
+
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
16947
16962
|
return [
|
|
16948
16963
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
16949
|
-
hAsync("div", { id: errorTextId, class: "error-text", "aria-live":
|
|
16964
|
+
hAsync("div", { id: errorTextId, class: "error-text", role: isInvalid && errorText ? 'alert' : undefined, "aria-live": isInvalid && errorText ? 'polite' : 'off', "aria-atomic": "true" }, isInvalid && errorText ? errorText : ''),
|
|
16950
16965
|
];
|
|
16951
16966
|
}
|
|
16952
16967
|
getHintTextID() {
|
|
16953
|
-
const {
|
|
16954
|
-
if (
|
|
16968
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16969
|
+
if (isInvalid && errorText) {
|
|
16955
16970
|
return errorTextId;
|
|
16956
16971
|
}
|
|
16957
16972
|
if (helperText) {
|
|
@@ -17064,7 +17079,7 @@ class Input {
|
|
|
17064
17079
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17065
17080
|
*/
|
|
17066
17081
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17067
|
-
return (hAsync(Host, { key: '
|
|
17082
|
+
return (hAsync(Host, { key: 'fcb5d96c872ce63cb6252b6d7d302ab30e6ea83b', class: createColorClasses$1(this.color, {
|
|
17068
17083
|
[mode]: true,
|
|
17069
17084
|
'has-value': hasValue,
|
|
17070
17085
|
'has-focus': hasFocus,
|
|
@@ -17075,14 +17090,14 @@ class Input {
|
|
|
17075
17090
|
'in-item': inItem,
|
|
17076
17091
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17077
17092
|
'input-disabled': disabled,
|
|
17078
|
-
}) }, hAsync("label", { key: '
|
|
17093
|
+
}) }, hAsync("label", { key: '73bcaaf2527cbf295283b4581046fb9b361ce2dd', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '22dd6c6623a284e6a51910fa47b0a2ebdbd5971d', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: 'c02dac4336eb8e7570ed07cfa18fadca4bc6dd9d', name: "start" }), hAsync("input", Object.assign({ key: '42fc6409e9ee51feed480a672bf074cfa6f74c8f', 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: 'b124a2b970542daa6fcb45ac5546a9fde22b45be', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
17079
17094
|
/**
|
|
17080
17095
|
* This prevents mobile browsers from
|
|
17081
17096
|
* blurring the input when the clear
|
|
17082
17097
|
* button is activated.
|
|
17083
17098
|
*/
|
|
17084
17099
|
ev.preventDefault();
|
|
17085
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
17100
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '243037c08825c2bf26c53bb9507f7cd73e56a4de', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '9faff25f968c089b7716a8afb405ba5afb86a1ac', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '54bf3da059a2bf30e4990ba34abb23fd3bf137b0', class: "input-highlight" })), this.renderBottomContent()));
|
|
17086
17101
|
}
|
|
17087
17102
|
get el() { return getElement(this); }
|
|
17088
17103
|
static get watchers() { return {
|
|
@@ -17134,6 +17149,7 @@ class Input {
|
|
|
17134
17149
|
"type": [1],
|
|
17135
17150
|
"value": [1032],
|
|
17136
17151
|
"hasFocus": [32],
|
|
17152
|
+
"isInvalid": [32],
|
|
17137
17153
|
"setFocus": [64],
|
|
17138
17154
|
"getInputElement": [64]
|
|
17139
17155
|
},
|
|
@@ -34876,6 +34892,10 @@ class Textarea {
|
|
|
34876
34892
|
* is applied in both cases.
|
|
34877
34893
|
*/
|
|
34878
34894
|
this.hasFocus = false;
|
|
34895
|
+
/**
|
|
34896
|
+
* Track validation state for proper aria-live announcements
|
|
34897
|
+
*/
|
|
34898
|
+
this.isInvalid = false;
|
|
34879
34899
|
/**
|
|
34880
34900
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34881
34901
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -35021,6 +35041,12 @@ class Textarea {
|
|
|
35021
35041
|
this.el.click();
|
|
35022
35042
|
}
|
|
35023
35043
|
}
|
|
35044
|
+
/**
|
|
35045
|
+
* Checks if the textarea is in an invalid state based on validation classes
|
|
35046
|
+
*/
|
|
35047
|
+
checkValidationState() {
|
|
35048
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
35049
|
+
}
|
|
35024
35050
|
connectedCallback() {
|
|
35025
35051
|
const { el } = this;
|
|
35026
35052
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -35036,6 +35062,11 @@ class Textarea {
|
|
|
35036
35062
|
this.notchController.destroy();
|
|
35037
35063
|
this.notchController = undefined;
|
|
35038
35064
|
}
|
|
35065
|
+
// Clean up validation observer to prevent memory leaks
|
|
35066
|
+
if (this.validationObserver) {
|
|
35067
|
+
this.validationObserver.disconnect();
|
|
35068
|
+
this.validationObserver = undefined;
|
|
35069
|
+
}
|
|
35039
35070
|
}
|
|
35040
35071
|
componentWillLoad() {
|
|
35041
35072
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35206,15 +35237,15 @@ class Textarea {
|
|
|
35206
35237
|
* Renders the helper text or error text values
|
|
35207
35238
|
*/
|
|
35208
35239
|
renderHintText() {
|
|
35209
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
35240
|
+
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
35210
35241
|
return [
|
|
35211
35242
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
35212
|
-
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
35243
|
+
hAsync("div", { id: errorTextId, class: "error-text", role: isInvalid && errorText ? 'alert' : undefined, "aria-live": isInvalid && errorText ? 'polite' : 'off', "aria-atomic": "true" }, isInvalid && errorText ? errorText : ''),
|
|
35213
35244
|
];
|
|
35214
35245
|
}
|
|
35215
35246
|
getHintTextID() {
|
|
35216
|
-
const {
|
|
35217
|
-
if (
|
|
35247
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35248
|
+
if (isInvalid && errorText) {
|
|
35218
35249
|
return errorTextId;
|
|
35219
35250
|
}
|
|
35220
35251
|
if (helperText) {
|
|
@@ -35273,7 +35304,7 @@ class Textarea {
|
|
|
35273
35304
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35274
35305
|
*/
|
|
35275
35306
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35276
|
-
return (hAsync(Host, { key: '
|
|
35307
|
+
return (hAsync(Host, { key: 'b67193cbdbd70844901e7f58346cb6021ea8ff9b', class: createColorClasses$1(this.color, {
|
|
35277
35308
|
[mode]: true,
|
|
35278
35309
|
'has-value': hasValue,
|
|
35279
35310
|
'has-focus': hasFocus,
|
|
@@ -35282,7 +35313,7 @@ class Textarea {
|
|
|
35282
35313
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35283
35314
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35284
35315
|
'textarea-disabled': disabled,
|
|
35285
|
-
}) }, hAsync("label", { key: '
|
|
35316
|
+
}) }, hAsync("label", { key: '11cb5c9eefd6c82f0d94a283f65e3bfea7cfd31f', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f23c54b1d02b07ae54a729a1c871788b804031fe', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'd467679b2132c67307eacf29f0cb9cffe9fa3f70', class: "start-slot-wrapper" }, hAsync("slot", { key: 'e75629aeb663218b24598803a400c0755bbc0958', name: "start" })), hAsync("div", { key: 'dacfbeaee43984034a59375adcda329e5cf73de4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'cee91118b3d2fa7f6b0660bab8384cd508e432b1', 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: '7802d173e3e338776ae2a095037191fdfe771dda', class: "end-slot-wrapper" }, hAsync("slot", { key: '1b721a633799701fab2527b046c03ee23fa30c2e', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'ae2836d8d7ab9a1a6e70c3c17bbf99e30835c39d', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
35286
35317
|
}
|
|
35287
35318
|
get el() { return getElement(this); }
|
|
35288
35319
|
static get watchers() { return {
|
|
@@ -35327,6 +35358,7 @@ class Textarea {
|
|
|
35327
35358
|
"labelPlacement": [1, "label-placement"],
|
|
35328
35359
|
"shape": [1],
|
|
35329
35360
|
"hasFocus": [32],
|
|
35361
|
+
"isInvalid": [32],
|
|
35330
35362
|
"setFocus": [64],
|
|
35331
35363
|
"getInputElement": [64]
|
|
35332
35364
|
},
|
package/hydrate/index.mjs
CHANGED
|
@@ -16627,6 +16627,10 @@ class Input {
|
|
|
16627
16627
|
* is applied in both cases.
|
|
16628
16628
|
*/
|
|
16629
16629
|
this.hasFocus = false;
|
|
16630
|
+
/**
|
|
16631
|
+
* Track validation state for proper aria-live announcements
|
|
16632
|
+
*/
|
|
16633
|
+
this.isInvalid = false;
|
|
16630
16634
|
/**
|
|
16631
16635
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
16632
16636
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -16810,6 +16814,12 @@ class Input {
|
|
|
16810
16814
|
componentWillLoad() {
|
|
16811
16815
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16812
16816
|
}
|
|
16817
|
+
/**
|
|
16818
|
+
* Checks if the input is in an invalid state based on validation classes
|
|
16819
|
+
*/
|
|
16820
|
+
checkValidationState() {
|
|
16821
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
16822
|
+
}
|
|
16813
16823
|
connectedCallback() {
|
|
16814
16824
|
const { el } = this;
|
|
16815
16825
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -16840,6 +16850,11 @@ class Input {
|
|
|
16840
16850
|
this.notchController.destroy();
|
|
16841
16851
|
this.notchController = undefined;
|
|
16842
16852
|
}
|
|
16853
|
+
// Clean up validation observer to prevent memory leaks
|
|
16854
|
+
if (this.validationObserver) {
|
|
16855
|
+
this.validationObserver.disconnect();
|
|
16856
|
+
this.validationObserver = undefined;
|
|
16857
|
+
}
|
|
16843
16858
|
}
|
|
16844
16859
|
/**
|
|
16845
16860
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16941,15 +16956,15 @@ class Input {
|
|
|
16941
16956
|
* Renders the helper text or error text values
|
|
16942
16957
|
*/
|
|
16943
16958
|
renderHintText() {
|
|
16944
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
16959
|
+
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
16945
16960
|
return [
|
|
16946
16961
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
16947
|
-
hAsync("div", { id: errorTextId, class: "error-text", "aria-live":
|
|
16962
|
+
hAsync("div", { id: errorTextId, class: "error-text", role: isInvalid && errorText ? 'alert' : undefined, "aria-live": isInvalid && errorText ? 'polite' : 'off', "aria-atomic": "true" }, isInvalid && errorText ? errorText : ''),
|
|
16948
16963
|
];
|
|
16949
16964
|
}
|
|
16950
16965
|
getHintTextID() {
|
|
16951
|
-
const {
|
|
16952
|
-
if (
|
|
16966
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16967
|
+
if (isInvalid && errorText) {
|
|
16953
16968
|
return errorTextId;
|
|
16954
16969
|
}
|
|
16955
16970
|
if (helperText) {
|
|
@@ -17062,7 +17077,7 @@ class Input {
|
|
|
17062
17077
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17063
17078
|
*/
|
|
17064
17079
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17065
|
-
return (hAsync(Host, { key: '
|
|
17080
|
+
return (hAsync(Host, { key: 'fcb5d96c872ce63cb6252b6d7d302ab30e6ea83b', class: createColorClasses$1(this.color, {
|
|
17066
17081
|
[mode]: true,
|
|
17067
17082
|
'has-value': hasValue,
|
|
17068
17083
|
'has-focus': hasFocus,
|
|
@@ -17073,14 +17088,14 @@ class Input {
|
|
|
17073
17088
|
'in-item': inItem,
|
|
17074
17089
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17075
17090
|
'input-disabled': disabled,
|
|
17076
|
-
}) }, hAsync("label", { key: '
|
|
17091
|
+
}) }, hAsync("label", { key: '73bcaaf2527cbf295283b4581046fb9b361ce2dd', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '22dd6c6623a284e6a51910fa47b0a2ebdbd5971d', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: 'c02dac4336eb8e7570ed07cfa18fadca4bc6dd9d', name: "start" }), hAsync("input", Object.assign({ key: '42fc6409e9ee51feed480a672bf074cfa6f74c8f', 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: 'b124a2b970542daa6fcb45ac5546a9fde22b45be', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
17077
17092
|
/**
|
|
17078
17093
|
* This prevents mobile browsers from
|
|
17079
17094
|
* blurring the input when the clear
|
|
17080
17095
|
* button is activated.
|
|
17081
17096
|
*/
|
|
17082
17097
|
ev.preventDefault();
|
|
17083
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
17098
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '243037c08825c2bf26c53bb9507f7cd73e56a4de', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '9faff25f968c089b7716a8afb405ba5afb86a1ac', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '54bf3da059a2bf30e4990ba34abb23fd3bf137b0', class: "input-highlight" })), this.renderBottomContent()));
|
|
17084
17099
|
}
|
|
17085
17100
|
get el() { return getElement(this); }
|
|
17086
17101
|
static get watchers() { return {
|
|
@@ -17132,6 +17147,7 @@ class Input {
|
|
|
17132
17147
|
"type": [1],
|
|
17133
17148
|
"value": [1032],
|
|
17134
17149
|
"hasFocus": [32],
|
|
17150
|
+
"isInvalid": [32],
|
|
17135
17151
|
"setFocus": [64],
|
|
17136
17152
|
"getInputElement": [64]
|
|
17137
17153
|
},
|
|
@@ -34874,6 +34890,10 @@ class Textarea {
|
|
|
34874
34890
|
* is applied in both cases.
|
|
34875
34891
|
*/
|
|
34876
34892
|
this.hasFocus = false;
|
|
34893
|
+
/**
|
|
34894
|
+
* Track validation state for proper aria-live announcements
|
|
34895
|
+
*/
|
|
34896
|
+
this.isInvalid = false;
|
|
34877
34897
|
/**
|
|
34878
34898
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34879
34899
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -35019,6 +35039,12 @@ class Textarea {
|
|
|
35019
35039
|
this.el.click();
|
|
35020
35040
|
}
|
|
35021
35041
|
}
|
|
35042
|
+
/**
|
|
35043
|
+
* Checks if the textarea is in an invalid state based on validation classes
|
|
35044
|
+
*/
|
|
35045
|
+
checkValidationState() {
|
|
35046
|
+
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
35047
|
+
}
|
|
35022
35048
|
connectedCallback() {
|
|
35023
35049
|
const { el } = this;
|
|
35024
35050
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -35034,6 +35060,11 @@ class Textarea {
|
|
|
35034
35060
|
this.notchController.destroy();
|
|
35035
35061
|
this.notchController = undefined;
|
|
35036
35062
|
}
|
|
35063
|
+
// Clean up validation observer to prevent memory leaks
|
|
35064
|
+
if (this.validationObserver) {
|
|
35065
|
+
this.validationObserver.disconnect();
|
|
35066
|
+
this.validationObserver = undefined;
|
|
35067
|
+
}
|
|
35037
35068
|
}
|
|
35038
35069
|
componentWillLoad() {
|
|
35039
35070
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35204,15 +35235,15 @@ class Textarea {
|
|
|
35204
35235
|
* Renders the helper text or error text values
|
|
35205
35236
|
*/
|
|
35206
35237
|
renderHintText() {
|
|
35207
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
35238
|
+
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
35208
35239
|
return [
|
|
35209
35240
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
35210
|
-
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
35241
|
+
hAsync("div", { id: errorTextId, class: "error-text", role: isInvalid && errorText ? 'alert' : undefined, "aria-live": isInvalid && errorText ? 'polite' : 'off', "aria-atomic": "true" }, isInvalid && errorText ? errorText : ''),
|
|
35211
35242
|
];
|
|
35212
35243
|
}
|
|
35213
35244
|
getHintTextID() {
|
|
35214
|
-
const {
|
|
35215
|
-
if (
|
|
35245
|
+
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35246
|
+
if (isInvalid && errorText) {
|
|
35216
35247
|
return errorTextId;
|
|
35217
35248
|
}
|
|
35218
35249
|
if (helperText) {
|
|
@@ -35271,7 +35302,7 @@ class Textarea {
|
|
|
35271
35302
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35272
35303
|
*/
|
|
35273
35304
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35274
|
-
return (hAsync(Host, { key: '
|
|
35305
|
+
return (hAsync(Host, { key: 'b67193cbdbd70844901e7f58346cb6021ea8ff9b', class: createColorClasses$1(this.color, {
|
|
35275
35306
|
[mode]: true,
|
|
35276
35307
|
'has-value': hasValue,
|
|
35277
35308
|
'has-focus': hasFocus,
|
|
@@ -35280,7 +35311,7 @@ class Textarea {
|
|
|
35280
35311
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35281
35312
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35282
35313
|
'textarea-disabled': disabled,
|
|
35283
|
-
}) }, hAsync("label", { key: '
|
|
35314
|
+
}) }, hAsync("label", { key: '11cb5c9eefd6c82f0d94a283f65e3bfea7cfd31f', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f23c54b1d02b07ae54a729a1c871788b804031fe', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'd467679b2132c67307eacf29f0cb9cffe9fa3f70', class: "start-slot-wrapper" }, hAsync("slot", { key: 'e75629aeb663218b24598803a400c0755bbc0958', name: "start" })), hAsync("div", { key: 'dacfbeaee43984034a59375adcda329e5cf73de4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'cee91118b3d2fa7f6b0660bab8384cd508e432b1', 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: '7802d173e3e338776ae2a095037191fdfe771dda', class: "end-slot-wrapper" }, hAsync("slot", { key: '1b721a633799701fab2527b046c03ee23fa30c2e', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'ae2836d8d7ab9a1a6e70c3c17bbf99e30835c39d', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
35284
35315
|
}
|
|
35285
35316
|
get el() { return getElement(this); }
|
|
35286
35317
|
static get watchers() { return {
|
|
@@ -35325,6 +35356,7 @@ class Textarea {
|
|
|
35325
35356
|
"labelPlacement": [1, "label-placement"],
|
|
35326
35357
|
"shape": [1],
|
|
35327
35358
|
"hasFocus": [32],
|
|
35359
|
+
"isInvalid": [32],
|
|
35328
35360
|
"setFocus": [64],
|
|
35329
35361
|
"getInputElement": [64]
|
|
35330
35362
|
},
|