@ionic/core/dist/esm-es5/ion-picker-column.entry.js

Base components for Ionic

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{d as doc}from"./index-a5d50daf.js";import{r as raf,g as getElementRoot}from"./helpers-78efeec3.js";import{a as hapticSelectionStart,b as hapticSelectionChanged,h as hapticSelectionEnd}from"./haptic-ac164e4c.js";import{a as isPlatform,b as getIonMode}from"./ionic-global-ca86cf32.js";import{c as createColorClasses}from"./theme-01f3f29c.js";import"./capacitor-59395cbd.js";var pickerColumnCss=":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";var IonPickerColumnStyle0=pickerColumnCss;var PickerColumn=function(){function e(e){var i=this;registerInstance(this,e);this.ionChange=createEvent(this,"ionChange",7);this.isScrolling=false;this.isColumnVisible=false;this.canExitInputMode=true;this.updateValueTextOnScroll=false;this.centerPickerItemInView=function(e,t,n){if(t===void 0){t=true}if(n===void 0){n=true}var r=i,a=r.isColumnVisible,o=r.scrollEl;if(a&&o){var s=e.offsetTop-3*e.clientHeight+e.clientHeight/2;if(o.scrollTop!==s){i.canExitInputMode=n;i.updateValueTextOnScroll=false;o.scroll({top:s,left:0,behavior:t?"smooth":undefined})}}};this.setPickerItemActiveState=function(e,i){if(i){e.classList.add(PICKER_ITEM_ACTIVE_CLASS)}else{e.classList.remove(PICKER_ITEM_ACTIVE_CLASS)}};this.inputModeChange=function(e){if(!i.numericInput){return}var t=e.detail,n=t.useInputMode,r=t.inputModeColumn;var a=r===undefined||r===i.el;if(!n||!a){i.setInputModeActive(false);return}i.setInputModeActive(true)};this.setInputModeActive=function(e){if(i.isScrolling){i.scrollEndCallback=function(){i.isActive=e};return}i.isActive=e};this.initializeScrollListener=function(){var e=isPlatform("ios");var t=i,n=t.el,r=t.scrollEl;var a;var o=i.activeItem;var s=function(){raf((function(){var t;if(!r)return;if(a){clearTimeout(a);a=undefined}if(!i.isScrolling){e&&hapticSelectionStart();i.isScrolling=true}var s=r.getBoundingClientRect();var l=s.x+s.width/2;var f=s.y+s.height/2;var c=n.getRootNode();var d=c instanceof ShadowRoot;var u=d?c:doc;if(u===undefined){return}var p=u.elementsFromPoint(l,f);var h=p.find((function(e){return e.tagName==="ION-PICKER-COLUMN-OPTION"}));if(o!==undefined){i.setPickerItemActiveState(o,false)}if(h===undefined||h.disabled){return}if(h!==o){e&&hapticSelectionChanged();if(i.canExitInputMode){i.exitInputMode()}}o=h;i.setPickerItemActiveState(h,true);if(i.updateValueTextOnScroll){(t=i.assistiveFocusable)===null||t===void 0?void 0:t.setAttribute("aria-valuetext",i.getOptionValueText(h))}a=setTimeout((function(){i.isScrolling=false;i.updateValueTextOnScroll=true;e&&hapticSelectionEnd();var t=i.scrollEndCallback;if(t){t();i.scrollEndCallback=undefined}i.canExitInputMode=true;i.setValue(h.value)}),250)}))};raf((function(){if(!r)return;r.addEventListener("scroll",s);i.destroyScrollListener=function(){r.removeEventListener("scroll",s)}}))};this.exitInputMode=function(){var e=i.parentEl;if(e==null)return;e.exitInputMode();i.el.classList.remove("picker-column-active")};this.findNextOption=function(e){if(e===void 0){e=1}var t=i.activeItem;if(!t)return null;var n=t;var r=t.nextElementSibling;while(r!=null){if(e>0){e--}if(r.tagName==="ION-PICKER-COLUMN-OPTION"&&!r.disabled&&e===0){return r}n=r;r=r.nextElementSibling}return n};this.findPreviousOption=function(e){if(e===void 0){e=1}var t=i.activeItem;if(!t)return null;var n=t;var r=t.previousElementSibling;while(r!=null){if(e>0){e--}if(r.tagName==="ION-PICKER-COLUMN-OPTION"&&!r.disabled&&e===0){return r}n=r;r=r.previousElementSibling}return n};this.onKeyDown=function(e){var t=isPlatform("mobile");var n=null;switch(e.key){case"ArrowDown":n=t?i.findPreviousOption():i.findNextOption();break;case"ArrowUp":n=t?i.findNextOption():i.findPreviousOption();break;case"PageUp":n=t?i.findNextOption(5):i.findPreviousOption(5);break;case"PageDown":n=t?i.findPreviousOption(5):i.findNextOption(5);break;case"Home":n=i.el.querySelector("ion-picker-column-option:first-of-type");break;case"End":n=i.el.querySelector("ion-picker-column-option:last-of-type");break}if(n!==null){i.setValue(n.value);e.preventDefault()}};this.getOptionValueText=function(e){var i;return e?(i=e.getAttribute("aria-label"))!==null&&i!==void 0?i:e.innerText:""};this.renderAssistiveFocusable=function(){var e=i.activeItem;var t=i.getOptionValueText(e);return h("div",{ref:function(e){return i.assistiveFocusable=e},class:"assistive-focusable",role:"slider",tabindex:i.disabled?undefined:0,"aria-label":i.ariaLabel,"aria-valuemin":0,"aria-valuemax":0,"aria-valuenow":0,"aria-valuetext":t,"aria-orientation":"vertical",onKeyDown:function(e){return i.onKeyDown(e)}})};this.ariaLabel=null;this.isActive=false;this.disabled=false;this.value=undefined;this.color="primary";this.numericInput=false}e.prototype.ariaLabelChanged=function(e){this.ariaLabel=e};e.prototype.valueChange=function(){if(this.isColumnVisible){this.scrollActiveItemIntoView(true)}};e.prototype.componentWillLoad=function(){var e=this;var i=this.parentEl=this.el.closest("ion-picker");var t=function(i){var t=i[i.length-1];if(t.isIntersecting){var n=e,r=n.activeItem,a=n.el;e.isColumnVisible=true;var o=getElementRoot(a).querySelector(".".concat(PICKER_ITEM_ACTIVE_CLASS));if(o){e.setPickerItemActiveState(o,false)}e.scrollActiveItemIntoView();if(r){e.setPickerItemActiveState(r,true)}e.initializeScrollListener()}else{e.isColumnVisible=false;if(e.destroyScrollListener){e.destroyScrollListener();e.destroyScrollListener=undefined}}};new IntersectionObserver(t,{threshold:.001,root:this.parentEl}).observe(this.el);if(i!==null){i.addEventListener("ionInputModeChange",(function(i){return e.inputModeChange(i)}))}};e.prototype.componentDidRender=function(){var e=this,i=e.el,t=e.activeItem,n=e.isColumnVisible,r=e.value;if(n&&!t){var a=i.querySelector("ion-picker-column-option");if(a!==null&&a.value!==r){this.setValue(a.value)}}};e.prototype.scrollActiveItemIntoView=function(){return __awaiter(this,arguments,void 0,(function(e){var i;if(e===void 0){e=false}return __generator(this,(function(t){i=this.activeItem;if(i){this.centerPickerItemInView(i,e,false)}return[2]}))}))};e.prototype.setValue=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){if(this.disabled===true||this.value===e){return[2]}this.value=e;this.ionChange.emit({value:e});return[2]}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.assistiveFocusable){this.assistiveFocusable.focus()}return[2]}))}))};e.prototype.connectedCallback=function(){var e;this.ariaLabel=(e=this.el.getAttribute("aria-label"))!==null&&e!==void 0?e:"Select a value"};Object.defineProperty(e.prototype,"activeItem",{get:function(){var e=this;var i=this.value;var t=Array.from(this.el.querySelectorAll("ion-picker-column-option"));return t.find((function(t){if(!e.disabled&&t.disabled){return false}return t.value===i}))},enumerable:false,configurable:true});e.prototype.render=function(){var e;var i=this;var t=this,n=t.color,r=t.disabled,a=t.isActive,o=t.numericInput;var s=getIonMode(this);return h(Host,{key:"a221dc10f1eb7c41637a16d2c7167c16939822fd",class:createColorClasses(n,(e={},e[s]=true,e["picker-column-active"]=a,e["picker-column-numeric-input"]=o,e["picker-column-disabled"]=r,e))},this.renderAssistiveFocusable(),h("slot",{key:"81b0656f606856f3dc0a657bf167d81a5011405e",name:"prefix"}),h("div",{key:"71b9de67c04150255dd66592601c9d926db0c31c","aria-hidden":"true",class:"picker-opts",ref:function(e){i.scrollEl=e},tabIndex:-1},h("div",{key:"ebdc2f08c83db0cf17b4be29f28fcb00f529601e",class:"picker-item-empty","aria-hidden":"true"}," "),h("div",{key:"04ab56fcb8e6a7d6af00204c4560feb99ff34a56",class:"picker-item-empty","aria-hidden":"true"}," "),h("div",{key:"6cf8f538903faf0fe1e4130f3eaf7b4e2e17cb52",class:"picker-item-empty","aria-hidden":"true"}," "),h("slot",{key:"1cc392307b70c576be5b81b5226ceba735957f0f"}),h("div",{key:"23e3f28e2a99b9aa8b7c8f68ad9583e3ca63e9e2",class:"picker-item-empty","aria-hidden":"true"}," "),h("div",{key:"8a0563f09780c3116af0caebe4f40587ec1f041f",class:"picker-item-empty","aria-hidden":"true"}," "),h("div",{key:"13207e248fc0009f37e0c90a3ee2bac2f130b856",class:"picker-item-empty","aria-hidden":"true"}," ")),h("slot",{key:"55ecf2ab5f214f936c2468cbdb7952daf89416b8",name:"suffix"}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{"aria-label":["ariaLabelChanged"],value:["valueChange"]}},enumerable:false,configurable:true});return e}();var PICKER_ITEM_ACTIVE_CLASS="option-active";PickerColumn.style=IonPickerColumnStyle0;export{PickerColumn as ion_picker_column};