@zoff-tech/zt-bottom-drawer/dist/zt-bottom-drawer/p-e28a058e.entry.js

Bottom Drawer / Web Component

import{r as t,d as e,h as i,H as n,e as s}from"./p-f6c816ce.js";import{getTimeGivenProgression as o}from"@utils/animation/cubic-bezier";import{GESTURE_CONTROLLER as h}from"@utils/gesture";import{isEndSide as r,inheritAriaAttributes as a,assert as u,clamp as d}from"@utils/helpers";import{menuController as l}from"@utils/menu-controller";import{getOverlay as m}from"@utils/overlays";import{c,g as p}from"./p-0b9b2444.js";const f=":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}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}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){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;transform:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";const b=":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}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}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){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;transform:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-overlay) .menu-inner{box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";const g="cubic-bezier(0.32,0.72,0,1)";const w="cubic-bezier(0.0,0.0,0.2,1)";const x="cubic-bezier(1, 0, 0.68, 0.28)";const y="cubic-bezier(0.4, 0, 0.6, 1)";const v='[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';const k=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=h.createBlocker({disableScroll:true});this.isAnimating=false;this._isOpen=false;this.inheritedAttributes={};this.handleFocus=t=>{const e=m(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=r(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=c.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();l._register(this);this.gesture=(await import("./p-0c0b0519.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=a(this.el)}async componentDidLoad(){this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen});this.updateState()}async disconnectedCallback(){await this.close(false);this.blocker.destroy();l._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){this.isPaneVisible=t.detail.isPane(this.el);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()}}}onKeydown(t){if(t.key==="Escape"){this.close()}}isOpen(){return Promise.resolve(this._isOpen)}isActive(){return Promise.resolve(this._isActive())}open(t=true){return this.setOpen(true,t)}close(t=true){return this.setOpen(false,t)}toggle(t=true){return this.setOpen(!this._isOpen,t)}setOpen(t,e=true){return l._setOpen(this,t,e)}focusFirstDescendant(){const{el:t}=this;const e=t.querySelector(v);if(e){e.focus()}else{t.focus()}}focusLastDescendant(){const{el:t}=this;const e=Array.from(t.querySelectorAll(v));const i=e.length>0?e[e.length-1]:null;if(i){i.focus()}else{t.focus()}}trapKeyboardFocus(t,e){const i=t.target;if(!i){return}if(this.el.contains(i)){this.lastFocus=i}else{this.focusFirstDescendant();if(this.lastFocus===e.activeElement){this.focusLastDescendant()}}}async _setOpen(t,e=true){if(!this._isActive()||this.isAnimating||t===this._isOpen){return false}this.beforeAnimation(t);await this.loadAnimation();await this.startAnimation(t,e);this.afterAnimation(t);return true}async loadAnimation(){const t=this.menuInnerEl.offsetWidth;const e=r(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}this.animation=await l._createAnimation(this.type,this);if(!c.getBoolean("animated",true)){this.animation.duration(0)}this.animation.fill("both")}async startAnimation(t,e){const i=!t;const n=p(this);const s=n==="ios"?g:w;const o=n==="ios"?x:y;const h=this.animation.direction(i?"reverse":"normal").easing(i?o:s).onFinish((()=>{if(h.getDirection()==="reverse"){h.direction("normal")}}));if(e){await h.play()}else{h.play({sync:true})}}_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(l._getOpenSync()){return false}return z(window,t.currentX,this.isEndSide,this.maxEdgeStart)}onWillStart(){this.beforeAnimation(!this._isOpen);return this.loadAnimation()}onStart(){if(!this.isAnimating||!this.animation){u(false,"isAnimating has to be true");return}this.animation.progressStart(true,this._isOpen?1:0)}onMove(t){if(!this.isAnimating||!this.animation){u(false,"isAnimating has to be true");return}const e=C(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){u(false,"isAnimating has to be true");return}const e=this._isOpen;const i=this.isEndSide;const n=C(t.deltaX,e,i);const s=this.width;const h=n/s;const r=t.velocityX;const a=s/2;const l=r>=0&&(r>.2||t.deltaX>a);const m=r<=0&&(r<-.2||t.deltaX<-a);const c=e?i?l:m:i?m:l;let p=!e&&c;if(e&&!c){p=true}this.lastOnEnd=t.currentTime;let f=c?.001:-.001;const b=h<0?.01:h;f+=o([0,0],[.4,0],[.6,1],[1,1],d(0,b,.9999))[0]||0;const g=this._isOpen?!c:c;this.animation.easing("cubic-bezier(0.4, 0.0, 0.6, 1)").onFinish((()=>this.afterAnimation(p)),{oneTimeCallback:true}).progressEnd(g?1:0,this._isOpen?1-f:f,300)}beforeAnimation(t){u(!this.isAnimating,"_before() should not be called while animating");this.el.classList.add(A);this.el.setAttribute("tabindex","0");if(this.backdropEl){this.backdropEl.classList.add(S)}if(this.contentEl){this.contentEl.classList.add(E);this.contentEl.setAttribute("aria-hidden","true")}this.blocker.block();this.isAnimating=true;if(t){this.ionWillOpen.emit()}else{this.ionWillClose.emit()}}afterAnimation(t){var e;u(this.isAnimating,"_before() should be called while animating");this._isOpen=t;this.isAnimating=false;if(!this._isOpen){this.blocker.unblock()}if(t){this.ionDidOpen.emit();const t=(e=document.activeElement)===null||e===void 0?void 0:e.closest("ion-menu");if(t!==this.el){this.el.focus()}document.addEventListener("focus",this.handleFocus,true)}else{this.el.classList.remove(A);this.el.removeAttribute("tabindex");if(this.contentEl){this.contentEl.classList.remove(E);this.contentEl.removeAttribute("aria-hidden")}if(this.backdropEl){this.backdropEl.classList.remove(S)}if(this.animation){this.animation.stop()}this.ionDidClose.emit();document.removeEventListener("focus",this.handleFocus,true)}}updateState(){const t=this._isActive();if(this.gesture){this.gesture.enable(t&&this.swipeGesture)}if(!t&&this._isOpen){this.forceClosing()}if(!this.disabled){l._setActiveMenu(this)}u(!this.isAnimating,"can not be animating")}forceClosing(){u(this._isOpen,"menu cannot be closed");this.isAnimating=true;const t=this.animation.direction("reverse");t.play({sync:true});this.afterAnimation(false)}render(){const{type:t,disabled:e,isPaneVisible:s,inheritedAttributes:o,side:h}=this;const r=p(this);return i(n,{role:"navigation","aria-label":o["aria-label"]||"menu",class:{[r]:true,[`menu-type-${t}`]:true,"menu-enabled":!e,[`menu-side-${h}`]:true,"menu-pane-visible":s}},i("div",{class:"menu-inner",part:"container",ref:t=>this.menuInnerEl=t},i("slot",null)),i("ion-backdrop",{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 C=(t,e,i)=>Math.max(0,e!==i?-t:t);const z=(t,e,i,n)=>{if(i){return e>=t.innerWidth-n}else{return e<=n}};const A="show-menu";const S="show-backdrop";const E="menu-content-open";k.style={ios:f,md:b};export{k as ion_menu};
//# sourceMappingURL=p-e28a058e.entry.js.map