UNPKG

@zoff-tech/zt-bottom-drawer

Version:

Bottom Drawer / Web Component

github.com/rodrigozoff/zt-bottom-drawer

rodrigozoff/zt-bottom-drawer

14 lines • 16.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import{r as t,d as o,h as i,H as e,e as n}from"./p-f6c816ce.js";import{ENABLE_HTML_CONTENT_DEFAULT as a}from"@utils/config";import{printIonWarning as r}from"@utils/logging";import{createDelegateController as s,createTriggerController as d,isCancel as l,prepareOverlay as h,setOverlayId as p,present as c,dismiss as u,eventMethod as b,safeCall as g}from"@utils/overlays";import{sanitizeDOMString as f}from"@utils/sanitization";import{getClassMap as m,createColorClasses as x}from"@utils/theme";import{c as v,g as w}from"./p-0b9b2444.js";import{createAnimation as y}from"@utils/animation/animation";import{getElementRoot as k}from"@utils/helpers"; /*! * (C) Ionic http://ionicframework.com - MIT License */const z=(t,o)=>{const i=y();const e=y();const n=k(t);const a=n.querySelector(".toast-wrapper");const r=`calc(-10px - var(--ion-safe-area-bottom, 0px))`;const s=`calc(10px + var(--ion-safe-area-top, 0px))`;e.addElement(a);switch(o){case"top":e.fromTo("transform","translateY(-100%)",`translateY(${s})`);break;case"middle":const o=Math.floor(t.clientHeight/2-a.clientHeight/2);a.style.top=`${o}px`;e.fromTo("opacity",.01,1);break;default:e.fromTo("transform","translateY(100%)",`translateY(${r})`);break}return i.easing("cubic-bezier(.155,1.105,.295,1.12)").duration(400).addAnimation(e)}; /*! * (C) Ionic http://ionicframework.com - MIT License */const T=(t,o)=>{const i=y();const e=y();const n=k(t);const a=n.querySelector(".toast-wrapper");const r=`calc(-10px - var(--ion-safe-area-bottom, 0px))`;const s=`calc(10px + var(--ion-safe-area-top, 0px))`;e.addElement(a);switch(o){case"top":e.fromTo("transform",`translateY(${s})`,"translateY(-100%)");break;case"middle":e.fromTo("opacity",.99,0);break;default:e.fromTo("transform",`translateY(${r})`,"translateY(100%)");break}return i.easing("cubic-bezier(.36,.66,.04,1)").duration(300).addAnimation(e)}; /*! * (C) Ionic http://ionicframework.com - MIT License */const D=(t,o)=>{const i=y();const e=y();const n=k(t);const a=n.querySelector(".toast-wrapper");const r=`calc(8px + var(--ion-safe-area-bottom, 0px))`;const s=`calc(8px + var(--ion-safe-area-top, 0px))`;e.addElement(a);switch(o){case"top":a.style.top=s;e.fromTo("opacity",.01,1);break;case"middle":const o=Math.floor(t.clientHeight/2-a.clientHeight/2);a.style.top=`${o}px`;e.fromTo("opacity",.01,1);break;default:a.style.bottom=r;e.fromTo("opacity",.01,1);break}return i.easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation(e)}; /*! * (C) Ionic http://ionicframework.com - MIT License */const $=t=>{const o=y();const i=y();const e=k(t);const n=e.querySelector(".toast-wrapper");i.addElement(n).fromTo("opacity",.99,0);return o.easing("cubic-bezier(.36,.66,.04,1)").duration(300).addAnimation(i)};const j=":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);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);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--start:10px;--end:10px;font-size:14px}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (backdrop-filter: blur(0)){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-top{transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-middle{opacity:0.01}.toast-wrapper.toast-bottom{transform:translate3d(0, 100%, 0);bottom:0}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:17px;font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";const C=":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);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);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:14px}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:20px}.toast-message{line-height:20px}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:14px;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";const Y=class{constructor(i){t(this,i);this.didPresent=o(this,"ionToastDidPresent",7);this.willPresent=o(this,"ionToastWillPresent",7);this.willDismiss=o(this,"ionToastWillDismiss",7);this.didDismiss=o(this,"ionToastDidDismiss",7);this.didPresentShorthand=o(this,"didPresent",7);this.willPresentShorthand=o(this,"willPresent",7);this.willDismissShorthand=o(this,"willDismiss",7);this.didDismissShorthand=o(this,"didDismiss",7);this.delegateController=s(this);this.triggerController=d();this.customHTMLEnabled=v.get("innerHTMLTemplatesEnabled",a);this.presented=false;this.dispatchCancelHandler=t=>{const o=t.detail.role;if(l(o)){const t=this.getButtons().find((t=>t.role==="cancel"));this.callButtonHandler(t)}};this.revealContentToScreenReader=false;this.overlayIndex=undefined;this.delegate=undefined;this.hasController=false;this.color=undefined;this.enterAnimation=undefined;this.leaveAnimation=undefined;this.cssClass=undefined;this.duration=v.getNumber("toastDuration",0);this.header=undefined;this.layout="baseline";this.message=undefined;this.keyboardClose=false;this.position="bottom";this.buttons=undefined;this.translucent=false;this.animated=true;this.icon=undefined;this.htmlAttributes=undefined;this.isOpen=false;this.trigger=undefined}onIsOpenChange(t,o){if(t===true&&o===false){this.present()}else if(t===false&&o===true){this.dismiss()}}triggerChanged(){const{trigger:t,el:o,triggerController:i}=this;if(t){i.addClickListener(o,t)}}connectedCallback(){h(this.el);this.triggerChanged()}disconnectedCallback(){this.triggerController.removeClickListener()}componentWillLoad(){p(this.el)}async present(){if(this.currentTransition!==undefined){await this.currentTransition}await this.delegateController.attachViewToDom();this.currentTransition=c(this,"toastEnter",z,D,this.position);await this.currentTransition;this.revealContentToScreenReader=true;this.currentTransition=undefined;if(this.duration>0){this.durationTimeout=setTimeout((()=>this.dismiss(undefined,"timeout")),this.duration)}}async dismiss(t,o){if(this.durationTimeout){clearTimeout(this.durationTimeout)}this.currentTransition=u(this,t,o,"toastLeave",T,$,this.position);const i=await this.currentTransition;if(i){this.delegateController.removeViewFromDom();this.revealContentToScreenReader=false}return i}onDidDismiss(){return b(this.el,"ionToastDidDismiss")}onWillDismiss(){return b(this.el,"ionToastWillDismiss")}getButtons(){const t=this.buttons?this.buttons.map((t=>typeof t==="string"?{text:t}:t)):[];return t}async buttonClick(t){const o=t.role;if(l(o)){return this.dismiss(undefined,o)}const i=await this.callButtonHandler(t);if(i){return this.dismiss(undefined,o)}return Promise.resolve()}async callButtonHandler(t){if(t===null||t===void 0?void 0:t.handler){try{const o=await g(t.handler);if(o===false){return false}}catch(t){console.error(t)}}return true}renderButtons(t,o){if(t.length===0){return}const e=w(this);const n={"toast-button-group":true,[`toast-button-group-${o}`]:true};return i("div",{class:n},t.map((t=>i("button",{type:"button",class:H(t),tabIndex:0,onClick:()=>this.buttonClick(t),part:"button"},i("div",{class:"toast-button-inner"},t.icon&&i("ion-icon",{"aria-hidden":"true",icon:t.icon,slot:t.text===undefined?"icon-only":undefined,class:"toast-button-icon"}),t.text),e==="md"&&i("ion-ripple-effect",{type:t.icon!==undefined&&t.text===undefined?"unbounded":"bounded"})))))}renderToastMessage(t,o=null){const{customHTMLEnabled:e,message:n}=this;if(e){return i("div",{key:t,"aria-hidden":o,class:"toast-message",part:"message",innerHTML:f(n)})}return i("div",{key:t,"aria-hidden":o,class:"toast-message",part:"message"},n)}renderHeader(t,o=null){return i("div",{key:t,class:"toast-header","aria-hidden":o,part:"header"},this.header)}render(){const{layout:t,el:o,revealContentToScreenReader:n,header:a,message:s}=this;const d=this.getButtons();const l=d.filter((t=>t.side==="start"));const h=d.filter((t=>t.side!=="start"));const p=w(this);const c={"toast-wrapper":true,[`toast-${this.position}`]:true,[`toast-layout-${t}`]:true};if(t==="stacked"&&l.length>0&&h.length>0){r("This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.",o)}return i(e,Object.assign({tabindex:"-1"},this.htmlAttributes,{style:{zIndex:`${6e4+this.overlayIndex}`},class:x(this.color,Object.assign(Object.assign({[p]:true},m(this.cssClass)),{"overlay-hidden":true,"toast-translucent":this.translucent})),onIonToastWillDismiss:this.dispatchCancelHandler}),i("div",{class:c},i("div",{class:"toast-container",part:"container"},this.renderButtons(l,"start"),this.icon!==undefined&&i("ion-icon",{class:"toast-icon",part:"icon",icon:this.icon,lazy:false,"aria-hidden":"true"}),i("div",{class:"toast-content",role:"status","aria-atomic":"true","aria-live":"polite"},!n&&a!==undefined&&this.renderHeader("oldHeader","true"),!n&&s!==undefined&&this.renderToastMessage("oldMessage","true"),n&&a!==undefined&&this.renderHeader("header"),n&&s!==undefined&&this.renderToastMessage("header")),this.renderButtons(h,"end"))))}get el(){return n(this)}static get watchers(){return{isOpen:["onIsOpenChange"],trigger:["triggerChanged"]}}};const H=t=>Object.assign({"toast-button":true,"toast-button-icon-only":t.icon!==undefined&&t.text===undefined,[`toast-button-${t.role}`]:t.role!==undefined,"ion-focusable":true,"ion-activatable":true},m(t.cssClass));Y.style={ios:j,md:C};export{Y as ion_toast}; //# sourceMappingURL=p-ed4a7162.entry.js.map