UNPKG

forms-reactive

Version:

Reactive Form Web Component

8 lines 13.7 kB
import{r as i,c as e,h as o,H as t,e as r}from"./p-3e1171f6.js";import{r as n}from"./p-c1432a35.js";import{c as a}from"./p-25ec5224.js";import{p as s}from"./p-8613551a.js";import{c,a as d,B as l,i as p,b as h,f as b,p as g,d as k,e as m,s as u}from"./p-80f56a8c.js";import{g as f}from"./p-100c2286.js";import{g as v}from"./p-9c83f640.js";import{c as y}from"./p-1fd4aad1.js";import"./p-3647f076.js";import"./p-955d90ef.js";import"./p-f9482dbc.js";import"./p-c7ee7cfe.js"; /*! * (C) Ionic http://ionicframework.com - MIT License */const x=i=>{const e=y();const o=y();const t=y();o.addElement(i.querySelector("ion-backdrop")).fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]);t.addElement(i.querySelector(".picker-wrapper")).fromTo("transform","translateY(100%)","translateY(0%)");return e.addElement(i).easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation([o,t])}; /*! * (C) Ionic http://ionicframework.com - MIT License */const w=i=>{const e=y();const o=y();const t=y();o.addElement(i.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)",.01);t.addElement(i.querySelector(".picker-wrapper")).fromTo("transform","translateY(0%)","translateY(100%)");return e.addElement(i).easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation([o,t])};const j=".sc-ion-picker-legacy-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;user-select:none;z-index:1001}.sc-ion-picker-legacy-ios-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-ios-h{display:none}.picker-wrapper.sc-ion-picker-legacy-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;transform:translate3d(0, 100%, 0);display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-ios:active,.picker-button.sc-ion-picker-legacy-ios:focus{outline:none}.picker-columns.sc-ion-picker-legacy-ios{display:flex;position:relative;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-ios,.picker-below-highlight.sc-ion-picker-legacy-ios{display:none;pointer-events:none}.sc-ion-picker-legacy-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-ios{display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-legacy-ios{flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-legacy-ios:last-child .picker-button.sc-ion-picker-legacy-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-legacy-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-legacy-ios,.picker-button.ion-activated.sc-ion-picker-legacy-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #0054e9);font-size:16px}.picker-columns.sc-ion-picker-legacy-ios{height:215px;perspective:1000px}.picker-above-highlight.sc-ion-picker-legacy-ios{top:0;transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}.picker-above-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-ios{top:115px;transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}.picker-below-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}";const z=j;const D=".sc-ion-picker-legacy-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;user-select:none;z-index:1001}.sc-ion-picker-legacy-md-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-md-h{display:none}.picker-wrapper.sc-ion-picker-legacy-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;transform:translate3d(0, 100%, 0);display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-md:active,.picker-button.sc-ion-picker-legacy-md:focus{outline:none}.picker-columns.sc-ion-picker-legacy-md{display:flex;position:relative;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-md,.picker-below-highlight.sc-ion-picker-legacy-md{display:none;pointer-events:none}.sc-ion-picker-legacy-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-md{display:flex;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-legacy-md,.picker-button.ion-activated.sc-ion-picker-legacy-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #0054e9);font-size:14px;font-weight:500;text-transform:uppercase;box-shadow:none}.picker-columns.sc-ion-picker-legacy-md{height:216px;perspective:1800px}.picker-above-highlight.sc-ion-picker-legacy-md{top:0;transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}.picker-above-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-md{top:115px;transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}.picker-below-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}";const P=D;const C=class{constructor(o){i(this,o);this.didPresent=e(this,"ionPickerDidPresent",7);this.willPresent=e(this,"ionPickerWillPresent",7);this.willDismiss=e(this,"ionPickerWillDismiss",7);this.didDismiss=e(this,"ionPickerDidDismiss",7);this.didPresentShorthand=e(this,"didPresent",7);this.willPresentShorthand=e(this,"willPresent",7);this.willDismissShorthand=e(this,"willDismiss",7);this.didDismissShorthand=e(this,"didDismiss",7);this.delegateController=c(this);this.lockController=a();this.triggerController=d();this.onBackdropTap=()=>{this.dismiss(undefined,l)};this.dispatchCancelHandler=i=>{const e=i.detail.role;if(p(e)){const i=this.buttons.find((i=>i.role==="cancel"));this.callButtonHandler(i)}};this.presented=false;this.overlayIndex=undefined;this.delegate=undefined;this.hasController=false;this.keyboardClose=true;this.enterAnimation=undefined;this.leaveAnimation=undefined;this.buttons=[];this.columns=[];this.cssClass=undefined;this.duration=0;this.showBackdrop=true;this.backdropDismiss=true;this.animated=true;this.htmlAttributes=undefined;this.isOpen=false;this.trigger=undefined}onIsOpenChange(i,e){if(i===true&&e===false){this.present()}else if(i===false&&e===true){this.dismiss()}}triggerChanged(){const{trigger:i,el:e,triggerController:o}=this;if(i){o.addClickListener(e,i)}}connectedCallback(){h(this.el);this.triggerChanged()}disconnectedCallback(){this.triggerController.removeClickListener()}componentWillLoad(){var i;if(!((i=this.htmlAttributes)===null||i===void 0?void 0:i.id)){b(this.el)}}componentDidLoad(){s("ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.",this.el);if(this.isOpen===true){n((()=>this.present()))}this.triggerChanged()}async present(){const i=await this.lockController.lock();await this.delegateController.attachViewToDom();await g(this,"pickerEnter",x,x,undefined);if(this.duration>0){this.durationTimeout=setTimeout((()=>this.dismiss()),this.duration)}i()}async dismiss(i,e){const o=await this.lockController.lock();if(this.durationTimeout){clearTimeout(this.durationTimeout)}const t=await k(this,i,e,"pickerLeave",w,w);if(t){this.delegateController.removeViewFromDom()}o();return t}onDidDismiss(){return m(this.el,"ionPickerDidDismiss")}onWillDismiss(){return m(this.el,"ionPickerWillDismiss")}getColumn(i){return Promise.resolve(this.columns.find((e=>e.name===i)))}async buttonClick(i){const e=i.role;if(p(e)){return this.dismiss(undefined,e)}const o=await this.callButtonHandler(i);if(o){return this.dismiss(this.getSelected(),i.role)}return Promise.resolve()}async callButtonHandler(i){if(i){const e=await u(i.handler,this.getSelected());if(e===false){return false}}return true}getSelected(){const i={};this.columns.forEach(((e,o)=>{const t=e.selectedIndex!==undefined?e.options[e.selectedIndex]:undefined;i[e.name]={text:t?t.text:undefined,value:t?t.value:undefined,columnIndex:o}}));return i}render(){const{htmlAttributes:i}=this;const e=v(this);return o(t,Object.assign({key:"dc03f252e3b59a94bc7132c953d2d3b36b62237e","aria-modal":"true",tabindex:"-1"},i,{style:{zIndex:`${2e4+this.overlayIndex}`},class:Object.assign({[e]:true,[`picker-${e}`]:true,"overlay-hidden":true},f(this.cssClass)),onIonBackdropTap:this.onBackdropTap,onIonPickerWillDismiss:this.dispatchCancelHandler}),o("ion-backdrop",{key:"bdabe9c82c41f96da5dafb1a0aa0854fa7e7ec93",visible:this.showBackdrop,tappable:this.backdropDismiss}),o("div",{key:"1380e0c8989153b425674753764f12f253f4a738",tabindex:"0","aria-hidden":"true"}),o("div",{key:"edec769bbc0993d003852d0bf1123e6e2332ebbe",class:"picker-wrapper ion-overlay-wrapper",role:"dialog"},o("div",{key:"b82c67ff47aa9412a6ff8f3b2e6230b855e92c51",class:"picker-toolbar"},this.buttons.map((i=>o("div",{class:I(i)},o("button",{type:"button",onClick:()=>this.buttonClick(i),class:O(i)},i.text))))),o("div",{key:"76485b643387f36b6b3d5f85e4d072fa18e68552",class:"picker-columns"},o("div",{key:"99268217263feb5285db1b1acd48fd0e4d5f0e7b",class:"picker-above-highlight"}),this.presented&&this.columns.map((i=>o("ion-picker-legacy-column",{col:i}))),o("div",{key:"2dd7e488bc4e9695094f0758567e626e0bb5979d",class:"picker-below-highlight"}))),o("div",{key:"8b2f3ae798a4ddcdd4e2716ebba1de797e446ac4",tabindex:"0","aria-hidden":"true"}))}get el(){return r(this)}static get watchers(){return{isOpen:["onIsOpenChange"],trigger:["triggerChanged"]}}};const I=i=>({[`picker-toolbar-${i.role}`]:i.role!==undefined,"picker-toolbar-button":true});const O=i=>Object.assign({"picker-button":true,"ion-activatable":true},f(i.cssClass));C.style={ios:z,md:P};export{C as ion_picker_legacy}; //# sourceMappingURL=p-c146d345.entry.js.map