UNPKG

@ionic/core

Version:
4 lines 11.3 kB
import{__awaiter,__generator}from"tslib"; /*! * (C) Ionic http://ionicframework.com - MIT License */import{r as registerInstance,c as createEvent,h,e as Host,f as getElement}from"./index-527b9e34.js";import{g as getElementRoot}from"./helpers-78efeec3.js";var pickerIosCss=":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}";var IonPickerIosStyle0=pickerIosCss;var pickerMdCss=":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";var IonPickerMdStyle0=pickerMdCss;var Picker=function(){function r(r){var t=this;registerInstance(this,r);this.ionInputModeChange=createEvent(this,"ionInputModeChange",7);this.useInputMode=false;this.isInHighlightBounds=function(r){var e=t.highlightEl;if(!e){return false}var n=e.getBoundingClientRect();var o=r.clientX<n.left||r.clientX>n.right;var i=r.clientY<n.top||r.clientY>n.bottom;if(o||i){return false}return true};this.onFocusOut=function(r){var e=r.relatedTarget;if(!e||e.tagName!=="ION-PICKER-COLUMN"&&e!==t.inputEl){t.exitInputMode()}};this.onFocusIn=function(r){var e=r.target;if(e.tagName!=="ION-PICKER-COLUMN"){return}if(!t.actionOnClick){var n=e;var o=n.numericInput;if(o){t.enterInputMode(n,false)}else{t.exitInputMode()}}};this.onClick=function(){var r=t.actionOnClick;if(r){r();t.actionOnClick=undefined}};this.onPointerDown=function(r){var e=t,n=e.useInputMode,o=e.inputModeColumn,i=e.el;if(t.isInHighlightBounds(r)){if(n){if(r.target.tagName==="ION-PICKER-COLUMN"){if(o&&o===r.target){t.actionOnClick=function(){t.enterInputMode()}}else{t.actionOnClick=function(){t.enterInputMode(r.target)}}}else{t.actionOnClick=function(){t.exitInputMode()}}}else{var a=i.querySelectorAll("ion-picker-column.picker-column-numeric-input");var c=a.length===1?r.target:undefined;t.actionOnClick=function(){t.enterInputMode(c)}}return}t.actionOnClick=function(){t.exitInputMode()}};this.enterInputMode=function(r,e){if(e===void 0){e=true}var n=t,o=n.inputEl,i=n.el;if(!o){return}var a=i.querySelector("ion-picker-column.picker-column-numeric-input");if(!a){return}t.useInputMode=true;t.inputModeColumn=r;if(e){if(t.destroyKeypressListener){t.destroyKeypressListener();t.destroyKeypressListener=undefined}o.focus()}else{i.addEventListener("keypress",t.onKeyPress);t.destroyKeypressListener=function(){i.removeEventListener("keypress",t.onKeyPress)}}t.emitInputModeChange()};this.onKeyPress=function(r){var e=t.inputEl;if(!e){return}var n=parseInt(r.key,10);if(!Number.isNaN(n)){e.value+=r.key;t.onInputChange()}};this.selectSingleColumn=function(){var r=t,e=r.inputEl,n=r.inputModeColumn,o=r.singleColumnSearchTimeout;if(!e||!n){return}var i=Array.from(n.querySelectorAll("ion-picker-column-option")).filter((function(r){return r.disabled!==true}));if(o){clearTimeout(o)}t.singleColumnSearchTimeout=setTimeout((function(){e.value="";t.singleColumnSearchTimeout=undefined}),1e3);if(e.value.length>=3){var a=e.value.length-2;var c=e.value.substring(a);e.value=c;t.selectSingleColumn();return}var u=i.find((function(r){var t=r.textContent;var n=t.replace(/^0+(?=[1-9])|0+(?=0$)/,"");return n===e.value}));if(u){n.setValue(u.value);return}if(e.value.length===2){var g=e.value.substring(e.value.length-1);e.value=g;t.selectSingleColumn()}};this.searchColumn=function(r,t,e){if(e===void 0){e="start"}if(!t){return false}var n=e==="start"?/^0+/:/0$/;t=t.replace(n,"");var o=Array.from(r.querySelectorAll("ion-picker-column-option")).find((function(r){return r.disabled!==true&&r.textContent.replace(n,"")===t}));if(o){r.setValue(o.value)}return!!o};this.multiColumnSearch=function(r,e,n){if(n.length===0){return}var o=n.split("");var i=o.slice(0,2).join("");var a=t.searchColumn(r,i);if(o.length>2&&a){var c=o.slice(2,4).join("");t.searchColumn(e,c)}else if(!a&&o.length>=1){var u=o[0];var g=t.searchColumn(r,u);if(!g){o.shift();u=o[0];g=t.searchColumn(r,u)}if(g&&o.length>1){var s=o.slice(1,3).join("");t.searchColumn(e,s)}}};this.selectMultiColumn=function(){var r=t,e=r.inputEl,n=r.el;if(!e){return}var o=Array.from(n.querySelectorAll("ion-picker-column")).filter((function(r){return r.numericInput}));var i=o[0];var a=o[1];var c=e.value;if(c.length>4){var u=e.value.length-4;var g=e.value.substring(u);e.value=g;c=g}t.multiColumnSearch(i,a,c)};this.onInputChange=function(){var r=t,e=r.useInputMode,n=r.inputEl,o=r.inputModeColumn;if(!e||!n){return}if(o){t.selectSingleColumn()}else{t.selectMultiColumn()}};this.emitInputModeChange=function(){var r=t,e=r.useInputMode,n=r.inputModeColumn;t.ionInputModeChange.emit({useInputMode:e,inputModeColumn:n})}}r.prototype.preventTouchStartPropagation=function(r){r.stopPropagation()};r.prototype.componentWillLoad=function(){getElementRoot(this.el).addEventListener("focusin",this.onFocusIn);getElementRoot(this.el).addEventListener("focusout",this.onFocusOut)};r.prototype.exitInputMode=function(){return __awaiter(this,void 0,void 0,(function(){var r,t,e;return __generator(this,(function(n){r=this,t=r.inputEl,e=r.useInputMode;if(!e||!t){return[2]}this.useInputMode=false;this.inputModeColumn=undefined;t.blur();t.value="";if(this.destroyKeypressListener){this.destroyKeypressListener();this.destroyKeypressListener=undefined}this.emitInputModeChange();return[2]}))}))};r.prototype.render=function(){var r=this;return h(Host,{key:"28f81e4ed44a633178561757c5199c2c98f94b74",onPointerDown:function(t){return r.onPointerDown(t)},onClick:function(){return r.onClick()}},h("input",{key:"abb3d1ad25ef63856af7804111175a4d50008bc0","aria-hidden":"true",tabindex:-1,inputmode:"numeric",type:"number",onKeyDown:function(t){var e;if(t.key==="Enter"){(e=r.inputEl)===null||e===void 0?void 0:e.blur()}},ref:function(t){return r.inputEl=t},onInput:function(){return r.onInputChange()},onBlur:function(){return r.exitInputMode()}}),h("div",{key:"334a5abdc02e6b127c57177f626d7e4ff5526183",class:"picker-before"}),h("div",{key:"ffd6271931129e88fc7c820e919d684899e420c5",class:"picker-after"}),h("div",{key:"78d1d95fd09e04f154ea59f24a1cece72c47ed7b",class:"picker-highlight",ref:function(t){return r.highlightEl=t}}),h("slot",{key:"0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5"}))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();Picker.style={ios:IonPickerIosStyle0,md:IonPickerMdStyle0};export{Picker as ion_picker};