@ionic/core/dist/ionic/p-2dca6aac.entry.js

Base components for Ionic

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import{r as t,d as i,a as e,h as s,e as n,j as a,k as o}from"./p-B_U9CtaY.js";import{d as r}from"./p-ZjP4CjeZ.js";import{r as l,g as c}from"./p-Do-uqmtX.js";import{b as d,a as h,h as p}from"./p-CKvCXMs9.js";import{c as u}from"./p-DiVJyqlX.js";import"./p-CIGNaXM1.js";const m=class{constructor(n){t(this,n),this.ionChange=i(this,"ionChange",7),this.isScrolling=!1,this.isColumnVisible=!1,this.canExitInputMode=!0,this.updateValueTextOnScroll=!1,this.ariaLabel=null,this.isActive=!1,this.disabled=!1,this.color="primary",this.numericInput=!1,this.centerPickerItemInView=(t,i=!0,e=!0)=>{const{isColumnVisible:s,scrollEl:n}=this;if(s&&n){const s=t.offsetTop-3*t.clientHeight+t.clientHeight/2;n.scrollTop!==s&&(this.canExitInputMode=e,this.updateValueTextOnScroll=!1,n.scroll({top:s,left:0,behavior:i?"smooth":void 0}))}},this.setPickerItemActiveState=(t,i)=>{i?t.classList.add(f):t.classList.remove(f)},this.inputModeChange=t=>{if(!this.numericInput)return;const{useInputMode:i,inputModeColumn:e}=t.detail;this.setInputModeActive(!(!i||void 0!==e&&e!==this.el))},this.setInputModeActive=t=>{this.isScrolling?this.scrollEndCallback=()=>{this.isActive=t}:this.isActive=t},this.initializeScrollListener=()=>{const t=e("ios"),{el:i,scrollEl:s}=this;let n,a=this.activeItem;const o=()=>{l((()=>{var e;if(!s)return;n&&(clearTimeout(n),n=void 0),this.isScrolling||(t&&d(),this.isScrolling=!0);const o=s.getBoundingClientRect(),l=o.x+o.width/2,c=o.y+o.height/2,u=i.getRootNode(),m=u instanceof ShadowRoot?u:r;if(void 0===m)return;let f=m.elementsFromPoint(l,c).find((t=>"ION-PICKER-COLUMN-OPTION"===t.tagName));if(void 0===f){const t=m.elementFromPoint(l,c);"ION-PICKER-COLUMN-OPTION"===(null==t?void 0:t.tagName)&&(f=t)}void 0!==a&&this.setPickerItemActiveState(a,!1),void 0===f||f.disabled||(f!==a&&(t&&h(),this.canExitInputMode&&this.exitInputMode()),a=f,this.setPickerItemActiveState(f,!0),this.updateValueTextOnScroll&&(null===(e=this.assistiveFocusable)||void 0===e||e.setAttribute("aria-valuetext",this.getOptionValueText(f))),n=setTimeout((()=>{this.isScrolling=!1,this.updateValueTextOnScroll=!0,t&&p();const{scrollEndCallback:i}=this;i&&(i(),this.scrollEndCallback=void 0),this.canExitInputMode=!0,this.setValue(f.value)}),250))}))};l((()=>{s&&(s.addEventListener("scroll",o),this.destroyScrollListener=()=>{s.removeEventListener("scroll",o)})}))},this.exitInputMode=()=>{const{parentEl:t}=this;null!=t&&(t.exitInputMode(),this.el.classList.remove("picker-column-active"))},this.findNextOption=(t=1)=>{const{activeItem:i}=this;if(!i)return null;let e=i,s=i.nextElementSibling;for(;null!=s;){if(t>0&&t--,"ION-PICKER-COLUMN-OPTION"===s.tagName&&!s.disabled&&0===t)return s;e=s,s=s.nextElementSibling}return e},this.findPreviousOption=(t=1)=>{const{activeItem:i}=this;if(!i)return null;let e=i,s=i.previousElementSibling;for(;null!=s;){if(t>0&&t--,"ION-PICKER-COLUMN-OPTION"===s.tagName&&!s.disabled&&0===t)return s;e=s,s=s.previousElementSibling}return e},this.onKeyDown=t=>{const i=e("mobile");let s=null;switch(t.key){case"ArrowDown":s=i?this.findPreviousOption():this.findNextOption();break;case"ArrowUp":s=i?this.findNextOption():this.findPreviousOption();break;case"PageUp":s=i?this.findNextOption(5):this.findPreviousOption(5);break;case"PageDown":s=i?this.findPreviousOption(5):this.findNextOption(5);break;case"Home":s=this.el.querySelector("ion-picker-column-option:first-of-type");break;case"End":s=this.el.querySelector("ion-picker-column-option:last-of-type")}null!==s&&(this.setValue(s.value),t.preventDefault())},this.getOptionValueText=t=>{var i;return t?null!==(i=t.getAttribute("aria-label"))&&void 0!==i?i:t.innerText:""},this.renderAssistiveFocusable=()=>{const{activeItem:t}=this,i=this.getOptionValueText(t);return s("div",{ref:t=>this.assistiveFocusable=t,class:"assistive-focusable",role:"slider",tabindex:this.disabled?void 0:0,"aria-label":this.ariaLabel,"aria-valuemin":0,"aria-valuemax":0,"aria-valuenow":0,"aria-valuetext":i,"aria-orientation":"vertical",onKeyDown:t=>this.onKeyDown(t)})}}ariaLabelChanged(t){this.ariaLabel=t}valueChange(){this.isColumnVisible&&this.scrollActiveItemIntoView(!0)}componentWillLoad(){const t=this.parentEl=this.el.closest("ion-picker");new IntersectionObserver((t=>{if(t[t.length-1].isIntersecting){const{activeItem:t,el:i}=this;this.isColumnVisible=!0;const e=c(i).querySelector(`.${f}`);e&&this.setPickerItemActiveState(e,!1),this.scrollActiveItemIntoView(),t&&this.setPickerItemActiveState(t,!0),this.initializeScrollListener()}else this.isColumnVisible=!1,this.destroyScrollListener&&(this.destroyScrollListener(),this.destroyScrollListener=void 0)}),{threshold:.001,root:this.parentEl}).observe(this.el),null!==t&&t.addEventListener("ionInputModeChange",(t=>this.inputModeChange(t)))}componentDidRender(){const{el:t,activeItem:i,isColumnVisible:e,value:s}=this;if(e&&!i){const i=t.querySelector("ion-picker-column-option");null!==i&&i.value!==s&&this.setValue(i.value)}}async scrollActiveItemIntoView(t=!1){const i=this.activeItem;i&&this.centerPickerItemInView(i,t,!1)}async setValue(t){!0!==this.disabled&&this.value!==t&&(this.value=t,this.ionChange.emit({value:t}))}async setFocus(){this.assistiveFocusable&&this.assistiveFocusable.focus()}connectedCallback(){var t;this.ariaLabel=null!==(t=this.el.getAttribute("aria-label"))&&void 0!==t?t:"Select a value"}get activeItem(){const{value:t}=this;return Array.from(this.el.querySelectorAll("ion-picker-column-option")).find((i=>!(!this.disabled&&i.disabled)&&i.value===t))}render(){const{color:t,disabled:i,isActive:e,numericInput:o}=this,r=n(this);return s(a,{key:"ea0280355b2f87895bf7dddd289ccf473aa759f3",class:u(t,{[r]:!0,"picker-column-active":e,"picker-column-numeric-input":o,"picker-column-disabled":i})},this.renderAssistiveFocusable(),s("slot",{key:"482992131cdeb85b1f61430d7fe1322a16345769",name:"prefix"}),s("div",{key:"43f7f80d621d411ef366b3ca1396299e8c9a0c97","aria-hidden":"true",class:"picker-opts",ref:t=>{this.scrollEl=t},tabIndex:-1},s("div",{key:"13a9ee686132af32240710730765de4c0003a9e8",class:"picker-item-empty","aria-hidden":"true"}," "),s("div",{key:"dbccba4920833cfcebe9b0fc763458ec3053705a",class:"picker-item-empty","aria-hidden":"true"}," "),s("div",{key:"682b43f83a5ea2e46067457f3af118535e111edb",class:"picker-item-empty","aria-hidden":"true"}," "),s("slot",{key:"d27e1e1dc0504b2f4627a29912a05bb91e8e413a"}),s("div",{key:"61c948dbb9cf7469aed3018542bc0954211585ba",class:"picker-item-empty","aria-hidden":"true"}," "),s("div",{key:"cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db",class:"picker-item-empty","aria-hidden":"true"}," "),s("div",{key:"bbc0e2d491d3f836ab849493ade2f7fa6ad9244e",class:"picker-item-empty","aria-hidden":"true"}," ")),s("slot",{key:"d25cbbe14b2914fe7b878d43b4e3f4a8c8177d24",name:"suffix"}))}get el(){return o(this)}static get watchers(){return{"aria-label":["ariaLabelChanged"],value:["valueChange"]}}},f="option-active";m.style=":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)}}";export{m as ion_picker_column}