@ionic/core 8.7.3-dev.11755195979.1ec83531 → 8.7.3-dev.11755285796.12743331
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 +7 -38
- package/components/ion-refresher.js +18 -1
- package/components/ion-textarea.js +6 -37
- package/dist/cjs/ion-input.cjs.entry.js +7 -37
- package/dist/cjs/ion-refresher_2.cjs.entry.js +18 -1
- package/dist/cjs/ion-textarea.cjs.entry.js +6 -36
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/input/input.js +8 -39
- package/dist/collection/components/refresher/refresher.js +18 -1
- package/dist/collection/components/textarea/textarea.js +7 -38
- package/dist/docs.json +1 -1
- package/dist/esm/ion-input.entry.js +7 -37
- package/dist/esm/ion-refresher_2.entry.js +18 -1
- package/dist/esm/ion-textarea.entry.js +6 -36
- 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-8cdb4ff5.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 +31 -46
- package/hydrate/index.mjs +31 -46
- package/package.json +1 -1
- package/dist/ionic/p-44415a3b.entry.js +0 -4
- package/dist/ionic/p-ac2be9d6.entry.js +0 -4
- package/dist/ionic/p-f80f7416.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"`.
|
|
@@ -16816,12 +16812,6 @@ class Input {
|
|
|
16816
16812
|
componentWillLoad() {
|
|
16817
16813
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16818
16814
|
}
|
|
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
|
-
}
|
|
16825
16815
|
connectedCallback() {
|
|
16826
16816
|
const { el } = this;
|
|
16827
16817
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -16852,11 +16842,6 @@ class Input {
|
|
|
16852
16842
|
this.notchController.destroy();
|
|
16853
16843
|
this.notchController = undefined;
|
|
16854
16844
|
}
|
|
16855
|
-
// Clean up validation observer to prevent memory leaks
|
|
16856
|
-
if (this.validationObserver) {
|
|
16857
|
-
this.validationObserver.disconnect();
|
|
16858
|
-
this.validationObserver = undefined;
|
|
16859
|
-
}
|
|
16860
16845
|
}
|
|
16861
16846
|
/**
|
|
16862
16847
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16958,15 +16943,15 @@ class Input {
|
|
|
16958
16943
|
* Renders the helper text or error text values
|
|
16959
16944
|
*/
|
|
16960
16945
|
renderHintText() {
|
|
16961
|
-
const { helperText, errorText, helperTextId, errorTextId
|
|
16946
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
16962
16947
|
return [
|
|
16963
16948
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
16964
|
-
hAsync("div", { id: errorTextId, class: "error-text"
|
|
16949
|
+
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
16965
16950
|
];
|
|
16966
16951
|
}
|
|
16967
16952
|
getHintTextID() {
|
|
16968
|
-
const {
|
|
16969
|
-
if (
|
|
16953
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16954
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
16970
16955
|
return errorTextId;
|
|
16971
16956
|
}
|
|
16972
16957
|
if (helperText) {
|
|
@@ -17079,7 +17064,7 @@ class Input {
|
|
|
17079
17064
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17080
17065
|
*/
|
|
17081
17066
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17082
|
-
return (hAsync(Host, { key: '
|
|
17067
|
+
return (hAsync(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses$1(this.color, {
|
|
17083
17068
|
[mode]: true,
|
|
17084
17069
|
'has-value': hasValue,
|
|
17085
17070
|
'has-focus': hasFocus,
|
|
@@ -17090,14 +17075,14 @@ class Input {
|
|
|
17090
17075
|
'in-item': inItem,
|
|
17091
17076
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17092
17077
|
'input-disabled': disabled,
|
|
17093
|
-
}) }, 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) => {
|
|
17094
17079
|
/**
|
|
17095
17080
|
* This prevents mobile browsers from
|
|
17096
17081
|
* blurring the input when the clear
|
|
17097
17082
|
* button is activated.
|
|
17098
17083
|
*/
|
|
17099
17084
|
ev.preventDefault();
|
|
17100
|
-
}, 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()));
|
|
17101
17086
|
}
|
|
17102
17087
|
get el() { return getElement(this); }
|
|
17103
17088
|
static get watchers() { return {
|
|
@@ -17149,7 +17134,6 @@ class Input {
|
|
|
17149
17134
|
"type": [1],
|
|
17150
17135
|
"value": [1032],
|
|
17151
17136
|
"hasFocus": [32],
|
|
17152
|
-
"isInvalid": [32],
|
|
17153
17137
|
"setFocus": [64],
|
|
17154
17138
|
"getInputElement": [64]
|
|
17155
17139
|
},
|
|
@@ -29348,6 +29332,14 @@ class Refresher {
|
|
|
29348
29332
|
this.beginRefresh();
|
|
29349
29333
|
this.didRefresh = true;
|
|
29350
29334
|
hapticImpact({ style: ImpactStyle.Light });
|
|
29335
|
+
/**
|
|
29336
|
+
* Clear focus from any active element to prevent scroll jumps
|
|
29337
|
+
* when the refresh completes
|
|
29338
|
+
*/
|
|
29339
|
+
const activeElement = document.activeElement;
|
|
29340
|
+
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
29341
|
+
activeElement.blur();
|
|
29342
|
+
}
|
|
29351
29343
|
/**
|
|
29352
29344
|
* Translate the content element otherwise when pointer is removed
|
|
29353
29345
|
* from screen the scroll content will bounce back over the refresher
|
|
@@ -29763,6 +29755,15 @@ class Refresher {
|
|
|
29763
29755
|
this.state = 8 /* RefresherState.Refreshing */;
|
|
29764
29756
|
// place the content in a hangout position while it thinks
|
|
29765
29757
|
this.setCss(this.pullMin, this.snapbackDuration, true, '');
|
|
29758
|
+
/**
|
|
29759
|
+
* Clear focus from any active element to prevent the browser
|
|
29760
|
+
* from restoring focus and causing scroll jumps after refresh.
|
|
29761
|
+
* This ensures the view stays at the top after refresh completes.
|
|
29762
|
+
*/
|
|
29763
|
+
const activeElement = document.activeElement;
|
|
29764
|
+
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
29765
|
+
activeElement.blur();
|
|
29766
|
+
}
|
|
29766
29767
|
// emit "refresh" because it was pulled down far enough
|
|
29767
29768
|
// and they let go to begin refreshing
|
|
29768
29769
|
this.ionRefresh.emit({
|
|
@@ -29845,7 +29846,7 @@ class Refresher {
|
|
|
29845
29846
|
}
|
|
29846
29847
|
render() {
|
|
29847
29848
|
const mode = getIonMode$1(this);
|
|
29848
|
-
return (hAsync(Host, { key: '
|
|
29849
|
+
return (hAsync(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
|
|
29849
29850
|
[mode]: true,
|
|
29850
29851
|
// Used internally for styling
|
|
29851
29852
|
[`refresher-${mode}`]: true,
|
|
@@ -34892,10 +34893,6 @@ class Textarea {
|
|
|
34892
34893
|
* is applied in both cases.
|
|
34893
34894
|
*/
|
|
34894
34895
|
this.hasFocus = false;
|
|
34895
|
-
/**
|
|
34896
|
-
* Track validation state for proper aria-live announcements
|
|
34897
|
-
*/
|
|
34898
|
-
this.isInvalid = false;
|
|
34899
34896
|
/**
|
|
34900
34897
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34901
34898
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -35041,12 +35038,6 @@ class Textarea {
|
|
|
35041
35038
|
this.el.click();
|
|
35042
35039
|
}
|
|
35043
35040
|
}
|
|
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
|
-
}
|
|
35050
35041
|
connectedCallback() {
|
|
35051
35042
|
const { el } = this;
|
|
35052
35043
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -35062,11 +35053,6 @@ class Textarea {
|
|
|
35062
35053
|
this.notchController.destroy();
|
|
35063
35054
|
this.notchController = undefined;
|
|
35064
35055
|
}
|
|
35065
|
-
// Clean up validation observer to prevent memory leaks
|
|
35066
|
-
if (this.validationObserver) {
|
|
35067
|
-
this.validationObserver.disconnect();
|
|
35068
|
-
this.validationObserver = undefined;
|
|
35069
|
-
}
|
|
35070
35056
|
}
|
|
35071
35057
|
componentWillLoad() {
|
|
35072
35058
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35237,15 +35223,15 @@ class Textarea {
|
|
|
35237
35223
|
* Renders the helper text or error text values
|
|
35238
35224
|
*/
|
|
35239
35225
|
renderHintText() {
|
|
35240
|
-
const { helperText, errorText, helperTextId, errorTextId
|
|
35226
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
35241
35227
|
return [
|
|
35242
35228
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
35243
|
-
hAsync("div", { id: errorTextId, class: "error-text"
|
|
35229
|
+
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
35244
35230
|
];
|
|
35245
35231
|
}
|
|
35246
35232
|
getHintTextID() {
|
|
35247
|
-
const {
|
|
35248
|
-
if (
|
|
35233
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35234
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
35249
35235
|
return errorTextId;
|
|
35250
35236
|
}
|
|
35251
35237
|
if (helperText) {
|
|
@@ -35304,7 +35290,7 @@ class Textarea {
|
|
|
35304
35290
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35305
35291
|
*/
|
|
35306
35292
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35307
|
-
return (hAsync(Host, { key: '
|
|
35293
|
+
return (hAsync(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses$1(this.color, {
|
|
35308
35294
|
[mode]: true,
|
|
35309
35295
|
'has-value': hasValue,
|
|
35310
35296
|
'has-focus': hasFocus,
|
|
@@ -35313,7 +35299,7 @@ class Textarea {
|
|
|
35313
35299
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35314
35300
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35315
35301
|
'textarea-disabled': disabled,
|
|
35316
|
-
}) }, 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()));
|
|
35317
35303
|
}
|
|
35318
35304
|
get el() { return getElement(this); }
|
|
35319
35305
|
static get watchers() { return {
|
|
@@ -35358,7 +35344,6 @@ class Textarea {
|
|
|
35358
35344
|
"labelPlacement": [1, "label-placement"],
|
|
35359
35345
|
"shape": [1],
|
|
35360
35346
|
"hasFocus": [32],
|
|
35361
|
-
"isInvalid": [32],
|
|
35362
35347
|
"setFocus": [64],
|
|
35363
35348
|
"getInputElement": [64]
|
|
35364
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"`.
|
|
@@ -16814,12 +16810,6 @@ class Input {
|
|
|
16814
16810
|
componentWillLoad() {
|
|
16815
16811
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
16816
16812
|
}
|
|
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
|
-
}
|
|
16823
16813
|
connectedCallback() {
|
|
16824
16814
|
const { el } = this;
|
|
16825
16815
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -16850,11 +16840,6 @@ class Input {
|
|
|
16850
16840
|
this.notchController.destroy();
|
|
16851
16841
|
this.notchController = undefined;
|
|
16852
16842
|
}
|
|
16853
|
-
// Clean up validation observer to prevent memory leaks
|
|
16854
|
-
if (this.validationObserver) {
|
|
16855
|
-
this.validationObserver.disconnect();
|
|
16856
|
-
this.validationObserver = undefined;
|
|
16857
|
-
}
|
|
16858
16843
|
}
|
|
16859
16844
|
/**
|
|
16860
16845
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -16956,15 +16941,15 @@ class Input {
|
|
|
16956
16941
|
* Renders the helper text or error text values
|
|
16957
16942
|
*/
|
|
16958
16943
|
renderHintText() {
|
|
16959
|
-
const { helperText, errorText, helperTextId, errorTextId
|
|
16944
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
16960
16945
|
return [
|
|
16961
16946
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
16962
|
-
hAsync("div", { id: errorTextId, class: "error-text"
|
|
16947
|
+
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
16963
16948
|
];
|
|
16964
16949
|
}
|
|
16965
16950
|
getHintTextID() {
|
|
16966
|
-
const {
|
|
16967
|
-
if (
|
|
16951
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
16952
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
16968
16953
|
return errorTextId;
|
|
16969
16954
|
}
|
|
16970
16955
|
if (helperText) {
|
|
@@ -17077,7 +17062,7 @@ class Input {
|
|
|
17077
17062
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
17078
17063
|
*/
|
|
17079
17064
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
17080
|
-
return (hAsync(Host, { key: '
|
|
17065
|
+
return (hAsync(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses$1(this.color, {
|
|
17081
17066
|
[mode]: true,
|
|
17082
17067
|
'has-value': hasValue,
|
|
17083
17068
|
'has-focus': hasFocus,
|
|
@@ -17088,14 +17073,14 @@ class Input {
|
|
|
17088
17073
|
'in-item': inItem,
|
|
17089
17074
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
17090
17075
|
'input-disabled': disabled,
|
|
17091
|
-
}) }, 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) => {
|
|
17092
17077
|
/**
|
|
17093
17078
|
* This prevents mobile browsers from
|
|
17094
17079
|
* blurring the input when the clear
|
|
17095
17080
|
* button is activated.
|
|
17096
17081
|
*/
|
|
17097
17082
|
ev.preventDefault();
|
|
17098
|
-
}, 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()));
|
|
17099
17084
|
}
|
|
17100
17085
|
get el() { return getElement(this); }
|
|
17101
17086
|
static get watchers() { return {
|
|
@@ -17147,7 +17132,6 @@ class Input {
|
|
|
17147
17132
|
"type": [1],
|
|
17148
17133
|
"value": [1032],
|
|
17149
17134
|
"hasFocus": [32],
|
|
17150
|
-
"isInvalid": [32],
|
|
17151
17135
|
"setFocus": [64],
|
|
17152
17136
|
"getInputElement": [64]
|
|
17153
17137
|
},
|
|
@@ -29346,6 +29330,14 @@ class Refresher {
|
|
|
29346
29330
|
this.beginRefresh();
|
|
29347
29331
|
this.didRefresh = true;
|
|
29348
29332
|
hapticImpact({ style: ImpactStyle.Light });
|
|
29333
|
+
/**
|
|
29334
|
+
* Clear focus from any active element to prevent scroll jumps
|
|
29335
|
+
* when the refresh completes
|
|
29336
|
+
*/
|
|
29337
|
+
const activeElement = document.activeElement;
|
|
29338
|
+
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
29339
|
+
activeElement.blur();
|
|
29340
|
+
}
|
|
29349
29341
|
/**
|
|
29350
29342
|
* Translate the content element otherwise when pointer is removed
|
|
29351
29343
|
* from screen the scroll content will bounce back over the refresher
|
|
@@ -29761,6 +29753,15 @@ class Refresher {
|
|
|
29761
29753
|
this.state = 8 /* RefresherState.Refreshing */;
|
|
29762
29754
|
// place the content in a hangout position while it thinks
|
|
29763
29755
|
this.setCss(this.pullMin, this.snapbackDuration, true, '');
|
|
29756
|
+
/**
|
|
29757
|
+
* Clear focus from any active element to prevent the browser
|
|
29758
|
+
* from restoring focus and causing scroll jumps after refresh.
|
|
29759
|
+
* This ensures the view stays at the top after refresh completes.
|
|
29760
|
+
*/
|
|
29761
|
+
const activeElement = document.activeElement;
|
|
29762
|
+
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
29763
|
+
activeElement.blur();
|
|
29764
|
+
}
|
|
29764
29765
|
// emit "refresh" because it was pulled down far enough
|
|
29765
29766
|
// and they let go to begin refreshing
|
|
29766
29767
|
this.ionRefresh.emit({
|
|
@@ -29843,7 +29844,7 @@ class Refresher {
|
|
|
29843
29844
|
}
|
|
29844
29845
|
render() {
|
|
29845
29846
|
const mode = getIonMode$1(this);
|
|
29846
|
-
return (hAsync(Host, { key: '
|
|
29847
|
+
return (hAsync(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
|
|
29847
29848
|
[mode]: true,
|
|
29848
29849
|
// Used internally for styling
|
|
29849
29850
|
[`refresher-${mode}`]: true,
|
|
@@ -34890,10 +34891,6 @@ class Textarea {
|
|
|
34890
34891
|
* is applied in both cases.
|
|
34891
34892
|
*/
|
|
34892
34893
|
this.hasFocus = false;
|
|
34893
|
-
/**
|
|
34894
|
-
* Track validation state for proper aria-live announcements
|
|
34895
|
-
*/
|
|
34896
|
-
this.isInvalid = false;
|
|
34897
34894
|
/**
|
|
34898
34895
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
34899
34896
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -35039,12 +35036,6 @@ class Textarea {
|
|
|
35039
35036
|
this.el.click();
|
|
35040
35037
|
}
|
|
35041
35038
|
}
|
|
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
|
-
}
|
|
35048
35039
|
connectedCallback() {
|
|
35049
35040
|
const { el } = this;
|
|
35050
35041
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
|
|
@@ -35060,11 +35051,6 @@ class Textarea {
|
|
|
35060
35051
|
this.notchController.destroy();
|
|
35061
35052
|
this.notchController = undefined;
|
|
35062
35053
|
}
|
|
35063
|
-
// Clean up validation observer to prevent memory leaks
|
|
35064
|
-
if (this.validationObserver) {
|
|
35065
|
-
this.validationObserver.disconnect();
|
|
35066
|
-
this.validationObserver = undefined;
|
|
35067
|
-
}
|
|
35068
35054
|
}
|
|
35069
35055
|
componentWillLoad() {
|
|
35070
35056
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -35235,15 +35221,15 @@ class Textarea {
|
|
|
35235
35221
|
* Renders the helper text or error text values
|
|
35236
35222
|
*/
|
|
35237
35223
|
renderHintText() {
|
|
35238
|
-
const { helperText, errorText, helperTextId, errorTextId
|
|
35224
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
35239
35225
|
return [
|
|
35240
35226
|
hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
35241
|
-
hAsync("div", { id: errorTextId, class: "error-text"
|
|
35227
|
+
hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
35242
35228
|
];
|
|
35243
35229
|
}
|
|
35244
35230
|
getHintTextID() {
|
|
35245
|
-
const {
|
|
35246
|
-
if (
|
|
35231
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
35232
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
35247
35233
|
return errorTextId;
|
|
35248
35234
|
}
|
|
35249
35235
|
if (helperText) {
|
|
@@ -35302,7 +35288,7 @@ class Textarea {
|
|
|
35302
35288
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
35303
35289
|
*/
|
|
35304
35290
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
35305
|
-
return (hAsync(Host, { key: '
|
|
35291
|
+
return (hAsync(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses$1(this.color, {
|
|
35306
35292
|
[mode]: true,
|
|
35307
35293
|
'has-value': hasValue,
|
|
35308
35294
|
'has-focus': hasFocus,
|
|
@@ -35311,7 +35297,7 @@ class Textarea {
|
|
|
35311
35297
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
35312
35298
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
35313
35299
|
'textarea-disabled': disabled,
|
|
35314
|
-
}) }, 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()));
|
|
35315
35301
|
}
|
|
35316
35302
|
get el() { return getElement(this); }
|
|
35317
35303
|
static get watchers() { return {
|
|
@@ -35356,7 +35342,6 @@ class Textarea {
|
|
|
35356
35342
|
"labelPlacement": [1, "label-placement"],
|
|
35357
35343
|
"shape": [1],
|
|
35358
35344
|
"hasFocus": [32],
|
|
35359
|
-
"isInvalid": [32],
|
|
35360
35345
|
"setFocus": [64],
|
|
35361
35346
|
"getInputElement": [64]
|
|
35362
35347
|
},
|