forms-reactive/dist/forms-reactive/p-81e4ca7c.entry.js

Reactive Form Web Component

import{r as t,c as i,h as e,H as n,e as o}from"./p-3e1171f6.js";import{g as s,r,a}from"./p-c1432a35.js";import{d as c}from"./p-3647f076.js";import{a as l,b as h,h as d}from"./p-55c608e9.js";import{a as p,g as u}from"./p-9c83f640.js";import{c as f}from"./p-100c2286.js";import"./p-78bffe29.js";const b=":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;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;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: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: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)))}";const g=b;const m=":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;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;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: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: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%)}";const k=m;const v=class{constructor(e){t(this,e);this.ionInputModeChange=i(this,"ionInputModeChange",7);this.useInputMode=false;this.isInHighlightBounds=t=>{const{highlightEl:i}=this;if(!i){return false}const e=i.getBoundingClientRect();const n=t.clientX<e.left||t.clientX>e.right;const o=t.clientY<e.top||t.clientY>e.bottom;if(n||o){return false}return true};this.onFocusOut=t=>{const{relatedTarget:i}=t;if(!i||i.tagName!=="ION-PICKER-COLUMN"&&i!==this.inputEl){this.exitInputMode()}};this.onFocusIn=t=>{const{target:i}=t;if(i.tagName!=="ION-PICKER-COLUMN"){return}if(!this.actionOnClick){const t=i;const e=t.numericInput;if(e){this.enterInputMode(t,false)}else{this.exitInputMode()}}};this.onClick=()=>{const{actionOnClick:t}=this;if(t){t();this.actionOnClick=undefined}};this.onPointerDown=t=>{const{useInputMode:i,inputModeColumn:e,el:n}=this;if(this.isInHighlightBounds(t)){if(i){if(t.target.tagName==="ION-PICKER-COLUMN"){if(e&&e===t.target){this.actionOnClick=()=>{this.enterInputMode()}}else{this.actionOnClick=()=>{this.enterInputMode(t.target)}}}else{this.actionOnClick=()=>{this.exitInputMode()}}}else{const i=n.querySelectorAll("ion-picker-column.picker-column-numeric-input");const e=i.length===1?t.target:undefined;this.actionOnClick=()=>{this.enterInputMode(e)}}return}this.actionOnClick=()=>{this.exitInputMode()}};this.enterInputMode=(t,i=true)=>{const{inputEl:e,el:n}=this;if(!e){return}const o=n.querySelector("ion-picker-column.picker-column-numeric-input");if(!o){return}this.useInputMode=true;this.inputModeColumn=t;if(i){if(this.destroyKeypressListener){this.destroyKeypressListener();this.destroyKeypressListener=undefined}e.focus()}else{n.addEventListener("keypress",this.onKeyPress);this.destroyKeypressListener=()=>{n.removeEventListener("keypress",this.onKeyPress)}}this.emitInputModeChange()};this.onKeyPress=t=>{const{inputEl:i}=this;if(!i){return}const e=parseInt(t.key,10);if(!Number.isNaN(e)){i.value+=t.key;this.onInputChange()}};this.selectSingleColumn=()=>{const{inputEl:t,inputModeColumn:i,singleColumnSearchTimeout:e}=this;if(!t||!i){return}const n=Array.from(i.querySelectorAll("ion-picker-column-option")).filter((t=>t.disabled!==true));if(e){clearTimeout(e)}this.singleColumnSearchTimeout=setTimeout((()=>{t.value="";this.singleColumnSearchTimeout=undefined}),1e3);if(t.value.length>=3){const i=t.value.length-2;const e=t.value.substring(i);t.value=e;this.selectSingleColumn();return}const o=n.find((({textContent:i})=>{const e=i.replace(/^0+(?=[1-9])|0+(?=0$)/,"");return e===t.value}));if(o){i.setValue(o.value);return}if(t.value.length===2){const i=t.value.substring(t.value.length-1);t.value=i;this.selectSingleColumn()}};this.searchColumn=(t,i,e="start")=>{const n=e==="start"?/^0+/:/0$/;const o=Array.from(t.querySelectorAll("ion-picker-column-option")).find((t=>t.disabled!==true&&t.textContent.replace(n,"")===i));if(o){t.setValue(o.value)}};this.selectMultiColumn=()=>{const{inputEl:t,el:i}=this;if(!t){return}const e=Array.from(i.querySelectorAll("ion-picker-column")).filter((t=>t.numericInput));const n=e[0];const o=e[1];let s=t.value;let r;switch(s.length){case 1:this.searchColumn(n,s);break;case 2:const i=t.value.substring(0,1);s=i==="0"||i==="1"?t.value:i;this.searchColumn(n,s);if(s.length===1){r=t.value.substring(t.value.length-1);this.searchColumn(o,r,"end")}break;case 3:const e=t.value.substring(0,1);s=e==="0"||e==="1"?t.value.substring(0,2):e;this.searchColumn(n,s);r=s.length===1?t.value.substring(1):t.value.substring(2);this.searchColumn(o,r,"end");break;case 4:const a=t.value.substring(0,1);s=a==="0"||a==="1"?t.value.substring(0,2):a;this.searchColumn(n,s);const c=s.length===1?t.value.substring(1,t.value.length):t.value.substring(2,t.value.length);this.searchColumn(o,c,"end");break;default:const l=t.value.length-4;const h=t.value.substring(l);t.value=h;this.selectMultiColumn();break}};this.onInputChange=()=>{const{useInputMode:t,inputEl:i,inputModeColumn:e}=this;if(!t||!i){return}if(e){this.selectSingleColumn()}else{this.selectMultiColumn()}};this.emitInputModeChange=()=>{const{useInputMode:t,inputModeColumn:i}=this;this.ionInputModeChange.emit({useInputMode:t,inputModeColumn:i})}}preventTouchStartPropagation(t){t.stopPropagation()}componentWillLoad(){s(this.el).addEventListener("focusin",this.onFocusIn);s(this.el).addEventListener("focusout",this.onFocusOut)}async exitInputMode(){const{inputEl:t,useInputMode:i}=this;if(!i||!t){return}this.useInputMode=false;this.inputModeColumn=undefined;t.blur();t.value="";if(this.destroyKeypressListener){this.destroyKeypressListener();this.destroyKeypressListener=undefined}this.emitInputModeChange()}render(){return e(n,{key:"f92214a09dc85b65873676f40fde2b802960e704",onPointerDown:t=>this.onPointerDown(t),onClick:()=>this.onClick()},e("input",{key:"6da37f75aca4ea1c9cb3bc733ebda2116279f313","aria-hidden":"true",tabindex:-1,inputmode:"numeric",type:"number",onKeyDown:t=>{var i;if(t.key==="Enter"){(i=this.inputEl)===null||i===void 0?void 0:i.blur()}},ref:t=>this.inputEl=t,onInput:()=>this.onInputChange(),onBlur:()=>this.exitInputMode()}),e("div",{key:"298e99d83dd3f5bf2798150bab0bb4024af472fa",class:"picker-before"}),e("div",{key:"ea578f04eb562a4dc6d6cc92de133dcb9fb7f42a",class:"picker-after"}),e("div",{key:"84567824956dfe967992a629904836ba8b75b3ec",class:"picker-highlight",ref:t=>this.highlightEl=t}),e("slot",{key:"df81f8fb90e1f649b608328034528f5c31c70c3b"}))}get el(){return o(this)}};v.style={ios:g,md:k};const x=":host{display:flex;position:relative;align-items: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;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;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;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)}}";const y=x;const w=class{constructor(n){t(this,n);this.ionChange=i(this,"ionChange",7);this.isScrolling=false;this.isColumnVisible=false;this.canExitInputMode=true;this.updateValueTextOnScroll=false;this.centerPickerItemInView=(t,i=true,e=true)=>{const{isColumnVisible:n,scrollEl:o}=this;if(n&&o){const n=t.offsetTop-3*t.clientHeight+t.clientHeight/2;if(o.scrollTop!==n){this.canExitInputMode=e;this.updateValueTextOnScroll=false;o.scroll({top:n,left:0,behavior:i?"smooth":undefined})}}};this.setPickerItemActiveState=(t,i)=>{if(i){t.classList.add(C)}else{t.classList.remove(C)}};this.inputModeChange=t=>{if(!this.numericInput){return}const{useInputMode:i,inputModeColumn:e}=t.detail;const n=e===undefined||e===this.el;if(!i||!n){this.setInputModeActive(false);return}this.setInputModeActive(true)};this.setInputModeActive=t=>{if(this.isScrolling){this.scrollEndCallback=()=>{this.isActive=t};return}this.isActive=t};this.initializeScrollListener=()=>{const t=p("ios");const{el:i,scrollEl:e}=this;let n;let o=this.activeItem;const s=()=>{r((()=>{var s;if(!e)return;if(n){clearTimeout(n);n=undefined}if(!this.isScrolling){t&&l();this.isScrolling=true}const r=e.getBoundingClientRect();const a=r.x+r.width/2;const p=r.y+r.height/2;const u=i.getRootNode();const f=u instanceof ShadowRoot;const b=f?u:c;if(b===undefined){return}const g=b.elementsFromPoint(a,p);const m=g.find((t=>t.tagName==="ION-PICKER-COLUMN-OPTION"));if(o!==undefined){this.setPickerItemActiveState(o,false)}if(m===undefined||m.disabled){return}if(m!==o){t&&h();if(this.canExitInputMode){this.exitInputMode()}}o=m;this.setPickerItemActiveState(m,true);if(this.updateValueTextOnScroll){(s=this.assistiveFocusable)===null||s===void 0?void 0:s.setAttribute("aria-valuetext",this.getOptionValueText(m))}n=setTimeout((()=>{this.isScrolling=false;this.updateValueTextOnScroll=true;t&&d();const{scrollEndCallback:i}=this;if(i){i();this.scrollEndCallback=undefined}this.canExitInputMode=true;this.setValue(m.value)}),250)}))};r((()=>{if(!e)return;e.addEventListener("scroll",s);this.destroyScrollListener=()=>{e.removeEventListener("scroll",s)}}))};this.exitInputMode=()=>{const{parentEl:t}=this;if(t==null)return;t.exitInputMode();this.el.classList.remove("picker-column-active")};this.findNextOption=(t=1)=>{const{activeItem:i}=this;if(!i)return null;let e=i;let n=i.nextElementSibling;while(n!=null){if(t>0){t--}if(n.tagName==="ION-PICKER-COLUMN-OPTION"&&!n.disabled&&t===0){return n}e=n;n=n.nextElementSibling}return e};this.findPreviousOption=(t=1)=>{const{activeItem:i}=this;if(!i)return null;let e=i;let n=i.previousElementSibling;while(n!=null){if(t>0){t--}if(n.tagName==="ION-PICKER-COLUMN-OPTION"&&!n.disabled&&t===0){return n}e=n;n=n.previousElementSibling}return e};this.onKeyDown=t=>{const i=p("mobile");let e=null;switch(t.key){case"ArrowDown":e=i?this.findPreviousOption():this.findNextOption();break;case"ArrowUp":e=i?this.findNextOption():this.findPreviousOption();break;case"PageUp":e=i?this.findNextOption(5):this.findPreviousOption(5);break;case"PageDown":e=i?this.findPreviousOption(5):this.findNextOption(5);break;case"Home":e=this.el.querySelector("ion-picker-column-option:first-of-type");break;case"End":e=this.el.querySelector("ion-picker-column-option:last-of-type");break}if(e!==null){this.setValue(e.value);t.preventDefault()}};this.getOptionValueText=t=>{var i;return t?(i=t.getAttribute("aria-label"))!==null&&i!==void 0?i:t.innerText:""};this.renderAssistiveFocusable=()=>{const{activeItem:t}=this;const i=this.getOptionValueText(t);return e("div",{ref:t=>this.assistiveFocusable=t,class:"assistive-focusable",role:"slider",tabindex:this.disabled?undefined: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)})};this.ariaLabel=null;this.isActive=false;this.disabled=false;this.value=undefined;this.color="primary";this.numericInput=false}ariaLabelChanged(t){this.ariaLabel=t}valueChange(){if(this.isColumnVisible){this.scrollActiveItemIntoView(true)}}componentWillLoad(){const t=this.parentEl=this.el.closest("ion-picker");const i=t=>{const i=t[t.length-1];if(i.isIntersecting){const{activeItem:t,el:i}=this;this.isColumnVisible=true;const e=s(i).querySelector(`.${C}`);if(e){this.setPickerItemActiveState(e,false)}this.scrollActiveItemIntoView();if(t){this.setPickerItemActiveState(t,true)}this.initializeScrollListener()}else{this.isColumnVisible=false;if(this.destroyScrollListener){this.destroyScrollListener();this.destroyScrollListener=undefined}}};new IntersectionObserver(i,{threshold:.001,root:this.parentEl}).observe(this.el);if(t!==null){t.addEventListener("ionInputModeChange",(t=>this.inputModeChange(t)))}}componentDidRender(){const{el:t,activeItem:i,isColumnVisible:e,value:n}=this;if(e&&!i){const i=t.querySelector("ion-picker-column-option");if(i!==null&&i.value!==n){this.setValue(i.value)}}}async scrollActiveItemIntoView(t=false){const i=this.activeItem;if(i){this.centerPickerItemInView(i,t,false)}}async setValue(t){if(this.disabled===true||this.value===t){return}this.value=t;this.ionChange.emit({value:t})}async setFocus(){if(this.assistiveFocusable){this.assistiveFocusable.focus()}}connectedCallback(){var t;this.ariaLabel=(t=this.el.getAttribute("aria-label"))!==null&&t!==void 0?t:"Select a value"}get activeItem(){const{value:t}=this;const i=Array.from(this.el.querySelectorAll("ion-picker-column-option"));return i.find((i=>{if(!this.disabled&&i.disabled){return false}return i.value===t}))}render(){const{color:t,disabled:i,isActive:o,numericInput:s}=this;const r=u(this);return e(n,{key:"a221dc10f1eb7c41637a16d2c7167c16939822fd",class:f(t,{[r]:true,["picker-column-active"]:o,["picker-column-numeric-input"]:s,["picker-column-disabled"]:i})},this.renderAssistiveFocusable(),e("slot",{key:"81b0656f606856f3dc0a657bf167d81a5011405e",name:"prefix"}),e("div",{key:"71b9de67c04150255dd66592601c9d926db0c31c","aria-hidden":"true",class:"picker-opts",ref:t=>{this.scrollEl=t},tabIndex:-1},e("div",{key:"ebdc2f08c83db0cf17b4be29f28fcb00f529601e",class:"picker-item-empty","aria-hidden":"true"}," "),e("div",{key:"04ab56fcb8e6a7d6af00204c4560feb99ff34a56",class:"picker-item-empty","aria-hidden":"true"}," "),e("div",{key:"6cf8f538903faf0fe1e4130f3eaf7b4e2e17cb52",class:"picker-item-empty","aria-hidden":"true"}," "),e("slot",{key:"1cc392307b70c576be5b81b5226ceba735957f0f"}),e("div",{key:"23e3f28e2a99b9aa8b7c8f68ad9583e3ca63e9e2",class:"picker-item-empty","aria-hidden":"true"}," "),e("div",{key:"8a0563f09780c3116af0caebe4f40587ec1f041f",class:"picker-item-empty","aria-hidden":"true"}," "),e("div",{key:"13207e248fc0009f37e0c90a3ee2bac2f130b856",class:"picker-item-empty","aria-hidden":"true"}," ")),e("slot",{key:"55ecf2ab5f214f936c2468cbdb7952daf89416b8",name:"suffix"}))}get el(){return o(this)}static get watchers(){return{"aria-label":["ariaLabelChanged"],value:["valueChange"]}}};const C="option-active";w.style=y;const I="button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";const M=I;const O="button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";const E=O;const N=class{constructor(i){t(this,i);this.pickerColumn=null;this.ariaLabel=null;this.disabled=false;this.value=undefined;this.color="primary"}onAriaLabelChange(t){this.ariaLabel=t}componentWillLoad(){const t=a(this.el,["aria-label"]);this.ariaLabel=t["aria-label"]||null}connectedCallback(){this.pickerColumn=this.el.closest("ion-picker-column")}disconnectedCallback(){this.pickerColumn=null}componentDidLoad(){const{pickerColumn:t}=this;if(t!==null){t.scrollActiveItemIntoView()}}onClick(){const{pickerColumn:t}=this;if(t!==null){t.setValue(this.value)}}render(){const{color:t,disabled:i,ariaLabel:o}=this;const s=u(this);return e(n,{key:"c1353e99c2aa19c0e3ddbe433557ed18e72e1c66",class:f(t,{[s]:true,["option-disabled"]:i})},e("button",{key:"b4ee62ecf7458a07a56e8aa494485766a87a3fcb",tabindex:"-1","aria-label":o,disabled:i,onClick:()=>this.onClick()},e("slot",{key:"9ab1e4700c27103b676670a4b3521c183c6ab83d"})))}get el(){return o(this)}static get watchers(){return{"aria-label":["onAriaLabelChange"]}}};N.style={ios:M,md:E};export{v as ion_picker,w as ion_picker_column,N as ion_picker_column_option};
//# sourceMappingURL=p-81e4ca7c.entry.js.map