@ionic/core 8.5.7-dev.11747865624.1ff4bb55 → 8.5.7-dev.11748379940.12698faf
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/input-shims.js +23 -0
- package/components/ion-input-otp.js +45 -28
- package/components/ion-input.js +2 -10
- package/dist/cjs/{input-shims-DGvxKeWy.js → input-shims-CQQtxW4l.js} +23 -0
- package/dist/cjs/ion-app_8.cjs.entry.js +1 -1
- package/dist/cjs/ion-input-otp.cjs.entry.js +45 -28
- package/dist/cjs/ion-input.cjs.entry.js +2 -10
- package/dist/collection/components/input/input.js +2 -10
- package/dist/collection/components/input-otp/input-otp.ios.css +4 -0
- package/dist/collection/components/input-otp/input-otp.js +44 -27
- package/dist/collection/components/input-otp/input-otp.md.css +4 -0
- package/dist/collection/utils/input-shims/hacks/scroll-assist.js +23 -0
- package/dist/docs.json +2 -2
- package/dist/esm/{input-shims-qlIPzMSm.js → input-shims-Km36_5AQ.js} +23 -0
- package/dist/esm/ion-app_8.entry.js +1 -1
- package/dist/esm/ion-input-otp.entry.js +45 -28
- package/dist/esm/ion-input.entry.js +2 -10
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-702c7264.entry.js +4 -0
- package/dist/ionic/p-BcSCNsNs.js +4 -0
- package/dist/ionic/{p-832b6c90.entry.js → p-b9fc80d5.entry.js} +1 -1
- package/dist/ionic/p-d7a74bde.entry.js +4 -0
- package/dist/types/components/input-otp/input-otp.d.ts +3 -1
- package/dist/types/components.d.ts +1 -1
- package/hydrate/index.js +46 -38
- package/hydrate/index.mjs +46 -38
- package/package.json +1 -1
- package/dist/ionic/p-178084cb.entry.js +0 -4
- package/dist/ionic/p-6805748f.entry.js +0 -4
- package/dist/ionic/p-DjV8cNim.js +0 -4
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as i,c as o,h as t,F as n,d as r,g as p}from"./p-3GtB1kQI.js";import{p as s}from"./p-CEo1SqXS.js";import{i as e}from"./p-C53feagD.js";import{c as a}from"./p-DiVJyqlX.js";import{b as l}from"./p-B7Khsp7D.js";const d=class{constructor(t){i(this,t),this.ionInput=o(this,"ionInput",7),this.ionChange=o(this,"ionChange",7),this.ionComplete=o(this,"ionComplete",7),this.ionBlur=o(this,"ionBlur",7),this.ionFocus=o(this,"ionFocus",7),this.inputRefs=[],this.inputId="ion-input-otp-"+u++,this.parsedSeparators=[],this.isKeyboardNavigation=!1,this.inputValues=[],this.hasFocus=!1,this.autocapitalize="off",this.disabled=!1,this.fill="outline",this.length=4,this.readonly=!1,this.size="medium",this.shape="round",this.type="number",this.value="",this.onInput=i=>o=>{const{validKeyPattern:t}=this,n=o.target.value;if(n.length>1||n.length>0&&!t.test(n))return this.inputRefs[i].value="",void(this.inputValues[i]="");let r=i;for(let o=0;o<i;o++)if(!this.inputValues[o]||""===this.inputValues[o]){r=o;break}this.inputValues[r]=n,r!==i&&(this.inputRefs[i].value=""),n.length>0&&this.focusNext(r),this.updateValue(o)},this.onKeyDown=i=>o=>{const{length:t}=this,n=e(this.el),r=o.target;if((!o.metaKey&&!o.ctrlKey||"v"!==o.key.toLowerCase())&&r.selectionStart===r.selectionEnd){if("Backspace"===o.key)if(this.inputValues[i]){for(let o=i;o<t-1;o++)this.inputValues[o]=this.inputValues[o+1];this.inputValues[t-1]="";for(let i=0;i<t;i++)this.inputRefs[i].value=this.inputValues[i]||"";this.updateValue(o),o.preventDefault()}else!this.inputValues[i]&&i>0&&this.focusPrevious(i);else if("ArrowLeft"===o.key||"ArrowRight"===o.key){this.isKeyboardNavigation=!0,o.preventDefault();const r="ArrowLeft"===o.key;r&&n||!r&&!n?this.inputValues[i]&&i<t-1&&this.focusNext(i):this.focusPrevious(i)}else if("Tab"===o.key)return void(this.isKeyboardNavigation=!0);if(this.inputValues[i]&&this.validKeyPattern.test(o.key)){if(!this.inputValues[t-1])for(let o=t-1;o>i;o--)this.inputValues[o]=this.inputValues[o-1],this.inputRefs[o].value=this.inputValues[o]||"";this.inputValues[i]=o.key,this.inputRefs[i].value=o.key,this.updateValue(o),o.preventDefault()}}},this.onPaste=i=>{var o,t,n;const{inputRefs:r,length:p,validKeyPattern:s}=this;i.preventDefault();const e=null===(o=i.clipboardData)||void 0===o?void 0:o.getData("text");if(!e)return void this.emitIonInput(i);const a=e.split("").filter((i=>s.test(i))).slice(0,p),l=this.getFirstEmptyIndex(),d=-1===l?0:l;a.forEach(((i,o)=>{const t=d+o;t<p&&(this.inputRefs[t].value=i,this.inputValues[t]=i)})),this.updateValue(i);const u=d+a.length;u<p?null===(t=r[u])||void 0===t||t.focus():null===(n=r[p-1])||void 0===n||n.focus()},this.onFocus=i=>o=>{var t;const{inputRefs:n}=this;this.hasFocus||(this.ionFocus.emit(o),this.focusedValue=this.value),this.hasFocus=!0;let r=i;if(!this.isKeyboardNavigation){const o=this.inputValues[i]?i:this.getFirstEmptyIndex();r=-1===o?this.length-1:o,null===(t=this.inputRefs[r])||void 0===t||t.focus()}n.forEach(((i,o)=>{i.tabIndex=o===r?0:-1})),this.isKeyboardNavigation=!1},this.onBlur=i=>{const{inputRefs:o}=this,t=i.relatedTarget;null!=t&&o.includes(t)||(this.hasFocus=!1,this.updateTabIndexes(),this.ionBlur.emit(i),this.focusedValue!==this.value&&this.emitIonChange(i))}}valueChanged(){this.initializeValues()}processSeparators(){const{separators:i,length:o}=this;if(void 0===i)return void(this.parsedSeparators=[]);if("string"==typeof i&&"all"!==i&&!/^(\d+)(,\d+)*$/.test(i))return s(`[ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${i}`,this.el),void(this.parsedSeparators=[]);let t;t="all"===i?Array.from({length:o-1},((i,o)=>o+1)):Array.isArray(i)?i:i.split(",").map((i=>parseInt(i,10))).filter((i=>!isNaN(i))),t.filter(((i,o)=>t.indexOf(i)!==o)).length>0&&s(`[ion-input-otp] - Duplicate separator positions are not allowed. Received: ${i}`,this.el);const n=t.filter((i=>i>o));n.length>0&&s(`[ion-input-otp] - The following separator positions are greater than the input length (${o}): ${n.join(", ")}. These separators will be ignored.`,this.el),this.parsedSeparators=t.filter((i=>i<=o))}componentWillLoad(){this.processSeparators(),this.initializeValues()}initializeValues(){null!=this.value&&String(this.value).length>0&&(String(this.value).split("").slice(0,this.length).forEach(((i,o)=>{this.validKeyPattern.test(i)&&(this.inputValues[o]=i)})),this.value=this.inputValues.join(""))}async reset(){this.inputValues=Array(this.length).fill(""),this.value="",this.focusedValue=null,this.hasFocus=!1,this.inputRefs.forEach((i=>{i.blur()})),this.updateTabIndexes()}async setFocus(i){var o,t;if("number"==typeof i){const t=Math.max(0,Math.min(i,this.length-1));null===(o=this.inputRefs[t])||void 0===o||o.focus()}else{const i=this.getTabbableIndex();null===(t=this.inputRefs[i])||void 0===t||t.focus()}}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}getPattern(){const{pattern:i,type:o}=this;return i||("number"===o?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:i}=this;return i||("number"==this.type?"numeric":"text")}updateValue(i){const{inputValues:o,length:t}=this,n=o.join("");this.value=n,this.emitIonInput(i),n.length===t&&this.ionComplete.emit({value:n})}emitIonChange(i){const{value:o}=this,t=null==o?o:o.toString();this.ionChange.emit({value:t,event:i})}emitIonInput(i){const{value:o}=this,t=null==o?o:o.toString();this.ionInput.emit({value:t,event:i})}focusNext(i){var o;const{inputRefs:t,length:n}=this;i<n-1&&(null===(o=t[i+1])||void 0===o||o.focus())}focusPrevious(i){var o;const{inputRefs:t}=this;i>0&&(null===(o=t[i-1])||void 0===o||o.focus())}showSeparator(i){const{length:o}=this;return this.parsedSeparators.includes(i+1)&&i<o-1}updateTabIndexes(){const{inputRefs:i,inputValues:o,length:t}=this;let n=-1;for(let i=0;i<t;i++)if(!o[i]||""===o[i]){n=i;break}i.forEach(((i,o)=>{i.tabIndex=(-1===n?o===t-1:n===o)?0:-1}))}getFirstEmptyIndex(){var i;const{inputValues:o,length:t}=this;return null!==(i=Array.from({length:t},((i,t)=>o[t]||"")).findIndex((i=>!i||""===i)))&&void 0!==i?i:-1}getTabbableIndex(){const{length:i}=this,o=this.getFirstEmptyIndex();return-1===o?i-1:o}render(){const{autocapitalize:i,color:o,disabled:p,fill:s,hasFocus:e,inputId:d,inputRefs:u,inputValues:c,length:h,readonly:g,shape:v,size:m}=this,f=l(this),b=this.getInputmode(),x=this.getTabbableIndex(),k=this.getPattern();return t(r,{key:"884f6a95d40a90eab486cd17bc3e34ee474fd7aa",class:a(o,{[f]:!0,"has-focus":e,[`input-otp-size-${m}`]:!0,[`input-otp-shape-${v}`]:!0,[`input-otp-fill-${s}`]:!0,"input-otp-disabled":p,"input-otp-readonly":g})},t("div",{key:"eb7ed18905b9c3c9ffa2b6f2866b459a509c6191",role:"group","aria-label":"One-time password input",class:"input-otp-group"},Array.from({length:h}).map(((o,r)=>t(n,null,t("div",{class:"native-wrapper"},t("input",{class:"native-input",id:`${d}-${r}`,"aria-label":`Input ${r+1} of ${h}`,type:"text",autoCapitalize:i,inputmode:b,maxLength:1,pattern:k,disabled:p,readOnly:g,tabIndex:r===x?0:-1,value:c[r]||"",autocomplete:0===r?"one-time-code":"off",ref:i=>u[r]=i,onInput:this.onInput(r),onBlur:this.onBlur,onFocus:this.onFocus(r),onKeyDown:this.onKeyDown(r),onPaste:this.onPaste})),this.showSeparator(r)&&t("div",{class:"input-otp-separator"}))))),t("div",{key:"796d62711429899348c3e6b8583167113cd610f3",class:"input-otp-description"},t("slot",{key:"30f1b8fedb63d8e3ed7b96139be218ee4584f73b"})))}get el(){return p(this)}static get watchers(){return{value:["valueChanged"],separators:["processSeparators"],length:["processSeparators"]}}};let u=0;d.style={ios:".sc-ion-input-otp-ios-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--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;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-ios{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-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:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ios{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-separator.sc-ion-input-otp-ios{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-ios-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:8px}.input-otp-size-medium.sc-ion-input-otp-ios-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-ios-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios,.input-otp-size-large.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:12px}.input-otp-shape-round.sc-ion-input-otp-ios-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-ios-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-ios-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-ios-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-disabled.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ios-h,.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-ios-h{--border-width:0.55px}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-width:1px}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}",md:".sc-ion-input-otp-md-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--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;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-md{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-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:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-md{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-md{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-separator.sc-ion-input-otp-md{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-md-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:8px}.input-otp-size-medium.sc-ion-input-otp-md-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-md-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md,.input-otp-size-large.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:12px}.input-otp-shape-round.sc-ion-input-otp-md-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-md-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-md-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-md-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-md-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-disabled.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-md-h,.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-md-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-md-h{--border-width:1px}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-width:2px}.input-otp-fill-outline.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3))}"};export{d as ion_input_otp}
|
package/dist/ionic/p-DjV8cNim.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{w as o,d as n}from"./p-ZjP4CjeZ.js";import{g as t,c as i,f as r}from"./p-B0af2jd_.js";import{f as a,m as e,r as s,c as d}from"./p-CG4wBMWx.js";import{a as c,K as l}from"./p-D13Eaw-8.js";import"./p-CEo1SqXS.js";import"./p-CIGNaXM1.js";const u=new WeakMap,f=(o,n,t,i=0,r=!1)=>{u.has(o)!==t&&(t?w(o,n,i,r):p(o,n))},w=(o,n,t,i=!1)=>{const r=n.parentNode,a=n.cloneNode(!1);a.classList.add("cloned-input"),a.tabIndex=-1,i&&(a.disabled=!0),r.appendChild(a),u.set(o,a);const e="rtl"===o.ownerDocument.dir?9999:-9999;o.style.pointerEvents="none",n.style.transform=`translate3d(${e}px,${t}px,0) scale(0)`},p=(o,n)=>{const t=u.get(o);t&&(u.delete(o),t.remove()),o.style.pointerEvents="",n.style.transform=""},m="input, textarea, [no-blur], [contenteditable]",S="$ionPaddingTimer",h=(o,n,t)=>{const i=o[S];i&&clearTimeout(i),n>0?o.style.setProperty("--keyboard-offset",`${n}px`):o[S]=setTimeout((()=>{o.style.setProperty("--keyboard-offset","0px"),t&&t()}),120)},y=(o,n,t)=>{o.addEventListener("focusout",(()=>{n&&h(n,0,t)}),{once:!0})};let b=0;const D="data-ionic-skip-scroll-assist",M=o=>{document.activeElement!==o&&(o.setAttribute(D,"true"),o.focus())},v=async(o,n,r,a,e,d,c=!1,l=0,u=!0)=>{if(!r&&!a)return;const w=((o,n,t,i)=>{var r;return((o,n,t,i)=>{const r=o.top,a=o.bottom,e=n.top,s=e+15,d=Math.min(n.bottom,i-t)-50-a,c=s-r,l=Math.round(d<0?-d:c>0?-c:0),u=Math.min(l,r-e),f=Math.abs(u);return{scrollAmount:u,scrollDuration:Math.min(400,Math.max(150,f/.3)),scrollPadding:t,inputSafeY:4-(r-s)}})((null!==(r=o.closest("ion-item,[ion-item]"))&&void 0!==r?r:o).getBoundingClientRect(),n.getBoundingClientRect(),t,i)})(o,r||a,e,l);if(r&&Math.abs(w.scrollAmount)<4)return M(n),void(d&&null!==r&&(h(r,b),y(n,r,(()=>b=0))));if(f(o,n,!0,w.inputSafeY,c),M(n),s((()=>o.click())),d&&r&&(b=w.scrollPadding,h(r,b)),"undefined"!=typeof window){let a;const e=async()=>{void 0!==a&&clearTimeout(a),window.removeEventListener("ionKeyboardDidShow",s),window.removeEventListener("ionKeyboardDidShow",e),r&&await i(r,0,w.scrollAmount,w.scrollDuration),f(o,n,!1,w.inputSafeY),M(n),d&&y(n,r,(()=>b=0))},s=()=>{window.removeEventListener("ionKeyboardDidShow",s),window.addEventListener("ionKeyboardDidShow",e)};if(r){const o=await t(r);if(u&&w.scrollAmount>o.scrollHeight-o.clientHeight-o.scrollTop)return"password"===n.type?(w.scrollAmount+=50,window.addEventListener("ionKeyboardDidShow",s)):window.addEventListener("ionKeyboardDidShow",e),void(a=setTimeout(e,1e3))}e()}},K=async(t,i)=>{if(void 0===n)return;const s="ios"===i,u="android"===i,w=t.getNumber("keyboardHeight",290),p=t.getBoolean("scrollAssist",!0),S=t.getBoolean("hideCaretOnScroll",s),h=t.getBoolean("inputBlurring",!1),y=t.getBoolean("scrollPadding",!0),b=Array.from(n.querySelectorAll("ion-input, ion-textarea")),M=new WeakMap,K=new WeakMap,j=await l.getResizeMode(),x=async n=>{await new Promise((o=>d(n,o)));const t=n.shadowRoot||n,i=t.querySelector("input")||t.querySelector("textarea"),s=r(n),l=s?null:n.closest("ion-footer");if(i){if(s&&S&&!M.has(n)){const o=((o,n,t)=>{if(!t||!n)return()=>{};const i=t=>{var i;(i=n)===i.getRootNode().activeElement&&f(o,n,t)},r=()=>f(o,n,!1),s=()=>i(!0),d=()=>i(!1);return a(t,"ionScrollStart",s),a(t,"ionScrollEnd",d),n.addEventListener("blur",r),()=>{e(t,"ionScrollStart",s),e(t,"ionScrollEnd",d),n.removeEventListener("blur",r)}})(n,i,s);M.set(n,o)}if("date"!==i.type&&"datetime-local"!==i.type&&(s||l)&&p&&!K.has(n)){const t=((n,t,i,r,a,e,s,d=!1)=>{const l=e&&(void 0===s||s.mode===c.None);let u=!1;const f=void 0!==o?o.innerHeight:0,w=o=>{!1!==u?v(n,t,i,r,o.detail.keyboardHeight,l,d,f,!1):u=!0},p=()=>{u=!1,null==o||o.removeEventListener("ionKeyboardDidShow",w),n.removeEventListener("focusout",p)},m=async()=>{t.hasAttribute(D)?t.removeAttribute(D):(v(n,t,i,r,a,l,d,f),null==o||o.addEventListener("ionKeyboardDidShow",w),n.addEventListener("focusout",p))};return n.addEventListener("focusin",m),()=>{n.removeEventListener("focusin",m),null==o||o.removeEventListener("ionKeyboardDidShow",w),n.removeEventListener("focusout",p)}})(n,i,s,l,w,y,j,u);K.set(n,t)}}};h&&(()=>{let o=!0,n=!1;const t=document;a(t,"ionScrollStart",(()=>{n=!0})),t.addEventListener("focusin",(()=>{o=!0}),!0),t.addEventListener("touchend",(i=>{if(n)return void(n=!1);const r=t.activeElement;if(!r)return;if(r.matches(m))return;const a=i.target;a!==r&&(a.matches(m)||a.closest(m)||(o=!1,setTimeout((()=>{o||r.blur()}),50)))}),!1)})();for(const o of b)x(o);n.addEventListener("ionInputDidLoad",(o=>{x(o.detail)})),n.addEventListener("ionInputDidUnload",(o=>{(o=>{if(S){const n=M.get(o);n&&n(),M.delete(o)}if(p){const n=K.get(o);n&&n(),K.delete(o)}})(o.detail)}))};export{K as startInputShims}
|