UNPKG

forms-reactive

Version:

Reactive Form Web Component

2 lines 15.4 kB
import{r as t,c as e,h as i,H as n,e as s}from"./p-3e1171f6.js";import{g as o}from"./p-f83a4566.js";import{l as r,B as a,g as h,n as d,G as u}from"./p-80f56a8c.js";import{G as l}from"./p-c7ee7cfe.js";import{shouldUseCloseWatcher as m}from"./p-955d90ef.js";import{n as p,i as c,o as f,e as b}from"./p-c1432a35.js";import{m as w}from"./p-4da36daf.js";import{c as v,g as x,a as g}from"./p-9c83f640.js";import{h as y}from"./p-100c2286.js";import"./p-3647f076.js";import"./p-f9482dbc.js";import"./p-8613551a.js";import"./p-1fd4aad1.js";const k=":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{transform:translateX(-9999px);display:flex;position:absolute;flex-direction:column;justify-content:space-between;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);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:flex;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){order:1}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;transform:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-pane-visible.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";const C=k;const j=":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{transform:translateX(-9999px);display:flex;position:absolute;flex-direction:column;justify-content:space-between;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);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:flex;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){order:1}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;transform:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-pane-visible.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-type-overlay) .menu-inner{box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";const z=j;const S="cubic-bezier(0.32,0.72,0,1)";const A="cubic-bezier(0.0,0.0,0.2,1)";const E="cubic-bezier(1, 0, 0.68, 0.28)";const M="cubic-bezier(0.4, 0, 0.6, 1)";const O=class{constructor(i){t(this,i);this.ionWillOpen=e(this,"ionWillOpen",7);this.ionWillClose=e(this,"ionWillClose",7);this.ionDidOpen=e(this,"ionDidOpen",7);this.ionDidClose=e(this,"ionDidClose",7);this.ionMenuChange=e(this,"ionMenuChange",7);this.lastOnEnd=0;this.blocker=l.createBlocker({disableScroll:true});this.didLoad=false;this.operationCancelled=false;this.isAnimating=false;this._isOpen=false;this.inheritedAttributes={};this.handleFocus=t=>{const e=r(document);if(e&&!e.contains(this.el)){return}this.trapKeyboardFocus(t,document)};this.isPaneVisible=false;this.isEndSide=false;this.contentId=undefined;this.menuId=undefined;this.type=undefined;this.disabled=false;this.side="start";this.swipeGesture=true;this.maxEdgeStart=50}typeChanged(t,e){const i=this.contentEl;if(i){if(e!==undefined){i.classList.remove(`menu-content-${e}`)}i.classList.add(`menu-content-${t}`);i.removeAttribute("style")}if(this.menuInnerEl){this.menuInnerEl.removeAttribute("style")}this.animation=undefined}disabledChanged(){this.updateState();this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}sideChanged(){this.isEndSide=p(this.side);this.animation=undefined}swipeGestureChanged(){this.updateState()}async connectedCallback(){if(typeof customElements!=="undefined"&&customElements!=null){await customElements.whenDefined("ion-menu")}if(this.type===undefined){this.type=v.get("menuType","overlay")}const t=this.contentId!==undefined?document.getElementById(this.contentId):null;if(t===null){console.error('Menu: must have a "content" element to listen for drag events on.');return}if(this.el.contains(t)){console.error(`Menu: "contentId" should refer to the main view's ion-content, not the ion-content inside of the ion-menu.`)}this.contentEl=t;t.classList.add("menu-content");this.typeChanged(this.type,undefined);this.sideChanged();w._register(this);this.menuChanged();this.gesture=(await import("./p-52ed752a.js")).createGesture({el:document,gestureName:"menu-swipe",gesturePriority:30,threshold:10,blurOnStart:true,canStart:t=>this.canStart(t),onWillStart:()=>this.onWillStart(),onStart:()=>this.onStart(),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)});this.updateState()}componentWillLoad(){this.inheritedAttributes=c(this.el)}async componentDidLoad(){this.didLoad=true;const t=this.el.closest("ion-split-pane");if(t!==null){this.isPaneVisible=await t.isVisible()}this.menuChanged();this.updateState()}menuChanged(){if(this.didLoad){this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}}async disconnectedCallback(){await this.close(false);this.blocker.destroy();w._unregister(this);if(this.animation){this.animation.destroy()}if(this.gesture){this.gesture.destroy();this.gesture=undefined}this.animation=undefined;this.contentEl=undefined}onSplitPaneChanged(t){const e=this.el.closest("ion-split-pane");if(e!==null&&e===t.target){this.isPaneVisible=t.detail.visible;this.updateState()}}onBackdropClick(t){if(this._isOpen&&this.lastOnEnd<t.timeStamp-100){const e=t.composedPath?!t.composedPath().includes(this.menuInnerEl):false;if(e){t.preventDefault();t.stopPropagation();this.close(undefined,a)}}}onKeydown(t){if(t.key==="Escape"){this.close(undefined,a)}}isOpen(){return Promise.resolve(this._isOpen)}isActive(){return Promise.resolve(this._isActive())}open(t=true){return this.setOpen(true,t)}close(t=true,e){return this.setOpen(false,t,e)}toggle(t=true){return this.setOpen(!this._isOpen,t)}setOpen(t,e=true,i){return w._setOpen(this,t,e,i)}trapKeyboardFocus(t,e){const i=t.target;if(!i){return}if(this.el.contains(i)){this.lastFocus=i}else{const{el:t}=this;h(t);if(this.lastFocus===e.activeElement){d(t)}}}async _setOpen(t,e=true,i){if(!this._isActive()||this.isAnimating||t===this._isOpen){return false}this.beforeAnimation(t,i);await this.loadAnimation();await this.startAnimation(t,e);if(this.operationCancelled){this.operationCancelled=false;return false}this.afterAnimation(t,i);return true}async loadAnimation(){const t=this.menuInnerEl.offsetWidth;const e=p(this.side);if(t===this.width&&this.animation!==undefined&&e===this.isEndSide){return}this.width=t;this.isEndSide=e;if(this.animation){this.animation.destroy();this.animation=undefined}const i=this.animation=await w._createAnimation(this.type,this);if(!v.getBoolean("animated",true)){i.duration(0)}i.fill("both")}async startAnimation(t,e){const i=!t;const n=x(this);const s=n==="ios"?S:A;const o=n==="ios"?E:M;const r=this.animation.direction(i?"reverse":"normal").easing(i?o:s);if(e){await r.play()}else{r.play({sync:true})}if(r.getDirection()==="reverse"){r.direction("normal")}}_isActive(){return!this.disabled&&!this.isPaneVisible}canSwipe(){return this.swipeGesture&&!this.isAnimating&&this._isActive()}canStart(t){const e=!!document.querySelector("ion-modal.show-modal");if(e||!this.canSwipe()){return false}if(this._isOpen){return true}else if(w._getOpenSync()){return false}return G(window,t.currentX,this.isEndSide,this.maxEdgeStart)}onWillStart(){this.beforeAnimation(!this._isOpen,u);return this.loadAnimation()}onStart(){if(!this.isAnimating||!this.animation){f(false,"isAnimating has to be true");return}this.animation.progressStart(true,this._isOpen?1:0)}onMove(t){if(!this.isAnimating||!this.animation){f(false,"isAnimating has to be true");return}const e=P(t.deltaX,this._isOpen,this.isEndSide);const i=e/this.width;this.animation.progressStep(this._isOpen?1-i:i)}onEnd(t){if(!this.isAnimating||!this.animation){f(false,"isAnimating has to be true");return}const e=this._isOpen;const i=this.isEndSide;const n=P(t.deltaX,e,i);const s=this.width;const r=n/s;const a=t.velocityX;const h=s/2;const d=a>=0&&(a>.2||t.deltaX>h);const l=a<=0&&(a<-.2||t.deltaX<-h);const m=e?i?d:l:i?l:d;let p=!e&&m;if(e&&!m){p=true}this.lastOnEnd=t.currentTime;let c=m?.001:-.001;const w=r<0?.01:r;c+=o([0,0],[.4,0],[.6,1],[1,1],b(0,w,.9999))[0]||0;const v=this._isOpen?!m:m;this.animation.easing("cubic-bezier(0.4, 0.0, 0.6, 1)").onFinish((()=>this.afterAnimation(p,u)),{oneTimeCallback:true}).progressEnd(v?1:0,this._isOpen?1-c:c,300)}beforeAnimation(t,e){f(!this.isAnimating,"_before() should not be called while animating");if(g("android")){this.el.setAttribute("aria-hidden","true")}this.el.classList.add(W);this.el.setAttribute("tabindex","0");if(this.backdropEl){this.backdropEl.classList.add(D)}if(this.contentEl){this.contentEl.classList.add($);this.contentEl.setAttribute("aria-hidden","true")}this.blocker.block();this.isAnimating=true;if(t){this.ionWillOpen.emit()}else{this.ionWillClose.emit({role:e})}}afterAnimation(t,e){var i;this._isOpen=t;this.isAnimating=false;if(!this._isOpen){this.blocker.unblock()}if(t){if(g("android")){this.el.removeAttribute("aria-hidden")}this.ionDidOpen.emit();const t=(i=document.activeElement)===null||i===void 0?void 0:i.closest("ion-menu");if(t!==this.el){this.el.focus()}document.addEventListener("focus",this.handleFocus,true)}else{this.el.removeAttribute("aria-hidden");this.el.classList.remove(W);this.el.removeAttribute("tabindex");if(this.contentEl){this.contentEl.classList.remove($);this.contentEl.removeAttribute("aria-hidden")}if(this.backdropEl){this.backdropEl.classList.remove(D)}if(this.animation){this.animation.stop()}this.ionDidClose.emit({role:e});document.removeEventListener("focus",this.handleFocus,true)}}updateState(){const t=this._isActive();if(this.gesture){this.gesture.enable(t&&this.swipeGesture)}if(!t){if(this.isAnimating){this.operationCancelled=true}this.afterAnimation(false,u)}}render(){const{type:t,disabled:e,el:s,isPaneVisible:o,inheritedAttributes:r,side:a}=this;const h=x(this);return i(n,{key:"342db8551d26604128b29b21d2d8c37593972ed9",onKeyDown:m()?null:this.onKeydown,role:"navigation","aria-label":r["aria-label"]||"menu",class:{[h]:true,[`menu-type-${t}`]:true,"menu-enabled":!e,[`menu-side-${a}`]:true,"menu-pane-visible":o,"split-pane-side":y("ion-split-pane",s)}},i("div",{key:"3c9bec2862b7fb9d88de66b1600be01f6735e3dd",class:"menu-inner",part:"container",ref:t=>this.menuInnerEl=t},i("slot",{key:"76283b4b2a65c78646f92c3b273eea021eda499c"})),i("ion-backdrop",{key:"121c395bc4873542a1b6ae2c9e23f2e881e75d93",ref:t=>this.backdropEl=t,class:"menu-backdrop",tappable:false,stopPropagation:false,part:"backdrop"}))}get el(){return s(this)}static get watchers(){return{type:["typeChanged"],disabled:["disabledChanged"],side:["sideChanged"],swipeGesture:["swipeGestureChanged"]}}};const P=(t,e,i)=>Math.max(0,e!==i?-t:t);const G=(t,e,i,n)=>{if(i){return e>=t.innerWidth-n}else{return e<=n}};const W="show-menu";const D="show-backdrop";const $="menu-content-open";O.style={ios:C,md:z};export{O as ion_menu}; //# sourceMappingURL=p-5854be8b.entry.js.map