UNPKG

forms-reactive

Version:

Reactive Form Web Component

20 lines 20 kB
import{r as t,c as o,h as e,H as n,e as i}from"./p-3e1171f6.js";import{E as a,s}from"./p-9fb36e10.js";import{g as r,r as d}from"./p-c1432a35.js";import{c}from"./p-25ec5224.js";import{p as l}from"./p-8613551a.js";import{O as p,c as h,a as u,i as f,b,f as m,p as g,d as x,e as w,s as v,G as y}from"./p-80f56a8c.js";import{c as k,g as $}from"./p-100c2286.js";import{c as j,g as T}from"./p-9c83f640.js";import{c as Y}from"./p-1fd4aad1.js";import{w as z}from"./p-3647f076.js";import{createGesture as D}from"./p-52ed752a.js";import"./p-955d90ef.js";import"./p-f9482dbc.js";import"./p-c7ee7cfe.js"; /*! * (C) Ionic http://ionicframework.com - MIT License */function C(t,o,e,n){let i;if(e==="md"){i=t==="top"?8:-8}else{i=t==="top"?10:-10}if(o&&z){M(o,n);const e=o.getBoundingClientRect();if(t==="top"){i+=e.bottom}else if(t==="bottom"){i-=z.innerHeight-e.top}return{top:`${i}px`,bottom:`${i}px`}}else{return{top:`calc(${i}px + var(--ion-safe-area-top, 0px))`,bottom:`calc(${i}px - var(--ion-safe-area-bottom, 0px))`}}}function M(t,o){if(t.offsetParent===null){l("The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.",o)}}const O=(t,o)=>Math.floor(t/2-o/2); /*! * (C) Ionic http://ionicframework.com - MIT License */const H=(t,o)=>{const e=Y();const n=Y();const{position:i,top:a,bottom:s}=o;const d=r(t);const c=d.querySelector(".toast-wrapper");n.addElement(c);switch(i){case"top":n.fromTo("transform","translateY(-100%)",`translateY(${a})`);break;case"middle":const o=O(t.clientHeight,c.clientHeight);c.style.top=`${o}px`;n.fromTo("opacity",.01,1);break;default:n.fromTo("transform","translateY(100%)",`translateY(${s})`);break}return e.easing("cubic-bezier(.155,1.105,.295,1.12)").duration(400).addAnimation(n)}; /*! * (C) Ionic http://ionicframework.com - MIT License */const P=(t,o)=>{const e=Y();const n=Y();const{position:i,top:a,bottom:s}=o;const d=r(t);const c=d.querySelector(".toast-wrapper");n.addElement(c);switch(i){case"top":n.fromTo("transform",`translateY(${a})`,"translateY(-100%)");break;case"middle":n.fromTo("opacity",.99,0);break;default:n.fromTo("transform",`translateY(${s})`,"translateY(100%)");break}return e.easing("cubic-bezier(.36,.66,.04,1)").duration(300).addAnimation(n)}; /*! * (C) Ionic http://ionicframework.com - MIT License */const E=(t,o)=>{const e=Y();const n=Y();const{position:i,top:a,bottom:s}=o;const d=r(t);const c=d.querySelector(".toast-wrapper");n.addElement(c);switch(i){case"top":c.style.setProperty("transform",`translateY(${a})`);n.fromTo("opacity",.01,1);break;case"middle":const o=O(t.clientHeight,c.clientHeight);c.style.top=`${o}px`;n.fromTo("opacity",.01,1);break;default:c.style.setProperty("transform",`translateY(${s})`);n.fromTo("opacity",.01,1);break}return e.easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation(n)}; /*! * (C) Ionic http://ionicframework.com - MIT License */const I=t=>{const o=Y();const e=Y();const n=r(t);const i=n.querySelector(".toast-wrapper");e.addElement(i).fromTo("opacity",.99,0);return o.easing("cubic-bezier(.36,.66,.04,1)").duration(300).addAnimation(e)}; /*! * (C) Ionic http://ionicframework.com - MIT License */const L=(t,o,e)=>{const n=r(t).querySelector(".toast-wrapper");const i=t.clientHeight;const a=n.getBoundingClientRect();let s=0;const d=.5;const c=t.position==="middle"?.5:0;const l=t.position==="top"?-1:1;const h=O(i,a.height);const u=[{offset:0,transform:`translateY(-${h+a.height}px)`},{offset:.5,transform:`translateY(0px)`},{offset:1,transform:`translateY(${h+a.height}px)`}];const f=Y("toast-swipe-to-dismiss-animation").addElement(n).duration(100);switch(t.position){case"middle":s=i+a.height;f.keyframes(u);f.progressStart(true,.5);break;case"top":s=a.bottom;f.keyframes([{offset:0,transform:`translateY(${o.top})`},{offset:1,transform:"translateY(-100%)"}]);f.progressStart(true,0);break;case"bottom":default:s=i-a.top;f.keyframes([{offset:0,transform:`translateY(${o.bottom})`},{offset:1,transform:"translateY(100%)"}]);f.progressStart(true,0);break}const b=t=>t*l/s;const m=t=>{const o=c+b(t.deltaY);f.progressStep(o)};const g=o=>{const i=o.velocityY;const a=(o.deltaY+i*1e3)/s*l;x.enable(false);let r=true;let c=1;let p=0;let m=0;if(t.position==="middle"){r=a>=d/2||a<=-d/2;c=1;p=0;const t=n.getBoundingClientRect();const e=t.top-h;const i=`${e}px`;const s=o.deltaY<=0?-1:1;const l=(h+t.height)*s;const u=r?`${l}px`:"0px";const b=[{offset:0,transform:`translateY(${i})`},{offset:1,transform:`translateY(${u})`}];f.keyframes(b);m=l-e}else{r=a>=d;c=r?1:0;p=b(o.deltaY);const t=r?1-p:p;m=t*s}const g=Math.min(Math.abs(m)/Math.abs(i),200);f.onFinish((()=>{if(r){e();f.destroy()}else{if(t.position==="middle"){f.keyframes(u).progressStart(true,.5)}else{f.progressStart(true,0)}x.enable(true)}}),{oneTimeCallback:true}).progressEnd(c,p,g)};const x=D({el:n,gestureName:"toast-swipe-to-dismiss",gesturePriority:p,direction:"y",onMove:m,onEnd:g});return x};const W=":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}:host{inset-inline-start: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);pointer-events:auto}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:flex;align-items:center;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-content{min-width:0}.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, var(--ion-background-color-step-50, #f2f2f2));--border-radius:14px;--button-color:var(--ion-color-primary, #0054e9);--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.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-middle{opacity:0.01}.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;min-height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";const A=W;const G=":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}:host{inset-inline-start: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);pointer-events:auto}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:flex;align-items:center;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-content{min-width:0}.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, var(--ion-background-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, #0054e9);--color:var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));--max-width:700px;--start:8px;--end:8px;font-size:0.875rem}.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:1.25rem}.toast-message{line-height:1.25rem}.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:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, var(--ion-text-color-step-900, #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, 0, 84, 233), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";const B=G;const N=class{constructor(e){t(this,e);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=h(this);this.lockController=c();this.triggerController=u();this.customHTMLEnabled=j.get("innerHTMLTemplatesEnabled",a);this.presented=false;this.dispatchCancelHandler=t=>{const o=t.detail.role;if(f(o)){const t=this.getButtons().find((t=>t.role==="cancel"));this.callButtonHandler(t)}};this.createSwipeGesture=t=>{const o=this.gesture=L(this.el,t,(()=>{this.dismiss(undefined,y)}));o.enable(true)};this.destroySwipeGesture=()=>{const{gesture:t}=this;if(t===undefined){return}t.destroy();this.gesture=undefined};this.prefersSwipeGesture=()=>{const{swipeGesture:t}=this;return t==="vertical"};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=j.getNumber("toastDuration",0);this.header=undefined;this.layout="baseline";this.message=undefined;this.keyboardClose=false;this.position="bottom";this.positionAnchor=undefined;this.buttons=undefined;this.translucent=false;this.animated=true;this.icon=undefined;this.htmlAttributes=undefined;this.swipeGesture=undefined;this.isOpen=false;this.trigger=undefined}swipeGestureChanged(){this.destroySwipeGesture();if(this.presented&&this.prefersSwipeGesture()){this.createSwipeGesture(this.lastPresentedPosition)}}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:e}=this;if(t){e.addClickListener(o,t)}}connectedCallback(){b(this.el);this.triggerChanged()}disconnectedCallback(){this.triggerController.removeClickListener()}componentWillLoad(){var t;if(!((t=this.htmlAttributes)===null||t===void 0?void 0:t.id)){m(this.el)}}componentDidLoad(){if(this.isOpen===true){d((()=>this.present()))}this.triggerChanged()}async present(){const t=await this.lockController.lock();await this.delegateController.attachViewToDom();const{el:o,position:e}=this;const n=this.getAnchorElement();const i=C(e,n,T(this),o);this.lastPresentedPosition=i;await g(this,"toastEnter",H,E,{position:e,top:i.top,bottom:i.bottom});this.revealContentToScreenReader=true;if(this.duration>0){this.durationTimeout=setTimeout((()=>this.dismiss(undefined,"timeout")),this.duration)}if(this.prefersSwipeGesture()){this.createSwipeGesture(i)}t()}async dismiss(t,o){var e,n;const i=await this.lockController.lock();const{durationTimeout:a,position:s,lastPresentedPosition:r}=this;if(a){clearTimeout(a)}const d=await x(this,t,o,"toastLeave",P,I,{position:s,top:(e=r===null||r===void 0?void 0:r.top)!==null&&e!==void 0?e:"",bottom:(n=r===null||r===void 0?void 0:r.bottom)!==null&&n!==void 0?n:""});if(d){this.delegateController.removeViewFromDom();this.revealContentToScreenReader=false}this.lastPresentedPosition=undefined;this.destroySwipeGesture();i();return d}onDidDismiss(){return w(this.el,"ionToastDidDismiss")}onWillDismiss(){return w(this.el,"ionToastWillDismiss")}getButtons(){const t=this.buttons?this.buttons.map((t=>typeof t==="string"?{text:t}:t)):[];return t}getAnchorElement(){const{position:t,positionAnchor:o,el:e}=this;if(o===undefined){return}if(t==="middle"&&o!==undefined){l('The positionAnchor property is ignored when using position="middle".',this.el);return undefined}if(typeof o==="string"){const t=document.getElementById(o);if(t===null){l(`An anchor element with an ID of "${o}" was not found in the DOM.`,e);return undefined}return t}if(o instanceof HTMLElement){return o}l("Invalid positionAnchor value:",o,e);return undefined}async buttonClick(t){const o=t.role;if(f(o)){return this.dismiss(undefined,o)}const e=await this.callButtonHandler(t);if(e){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 v(t.handler);if(o===false){return false}}catch(t){console.error(t)}}return true}renderButtons(t,o){if(t.length===0){return}const n=T(this);const i={"toast-button-group":true,[`toast-button-group-${o}`]:true};return e("div",{class:i},t.map((t=>e("button",Object.assign({},t.htmlAttributes,{type:"button",class:R(t),tabIndex:0,onClick:()=>this.buttonClick(t),part:S(t)}),e("div",{class:"toast-button-inner"},t.icon&&e("ion-icon",{"aria-hidden":"true",icon:t.icon,slot:t.text===undefined?"icon-only":undefined,class:"toast-button-icon"}),t.text),n==="md"&&e("ion-ripple-effect",{type:t.icon!==undefined&&t.text===undefined?"unbounded":"bounded"})))))}renderToastMessage(t,o=null){const{customHTMLEnabled:n,message:i}=this;if(n){return e("div",{key:t,"aria-hidden":o,class:"toast-message",part:"message",innerHTML:s(i)})}return e("div",{key:t,"aria-hidden":o,class:"toast-message",part:"message"},i)}renderHeader(t,o=null){return e("div",{key:t,class:"toast-header","aria-hidden":o,part:"header"},this.header)}render(){const{layout:t,el:o,revealContentToScreenReader:i,header:a,message:s}=this;const r=this.getButtons();const d=r.filter((t=>t.side==="start"));const c=r.filter((t=>t.side!=="start"));const p=T(this);const h={"toast-wrapper":true,[`toast-${this.position}`]:true,[`toast-layout-${t}`]:true};if(t==="stacked"&&d.length>0&&c.length>0){l("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 e(n,Object.assign({key:"34036afc0701173d51c9c11ea4a2e1d65685ba41",tabindex:"-1"},this.htmlAttributes,{style:{zIndex:`${6e4+this.overlayIndex}`},class:k(this.color,Object.assign(Object.assign({[p]:true},$(this.cssClass)),{"overlay-hidden":true,"toast-translucent":this.translucent})),onIonToastWillDismiss:this.dispatchCancelHandler}),e("div",{key:"d927e43957f47888ce4e64f1e99c935d55757af7",class:h},e("div",{key:"ca43bc42478181acdf8cdea6601a85fa95d12216",class:"toast-container",part:"container"},this.renderButtons(d,"start"),this.icon!==undefined&&e("ion-icon",{key:"fdd6fb8f6e947ed002bd2e63fdc8ec7e764f4a7d",class:"toast-icon",part:"icon",icon:this.icon,lazy:false,"aria-hidden":"true"}),e("div",{key:"37c16c81ee3e4304379dfbcabdffe73db73e4653",class:"toast-content",role:"status","aria-atomic":"true","aria-live":"polite"},!i&&a!==undefined&&this.renderHeader("oldHeader","true"),!i&&s!==undefined&&this.renderToastMessage("oldMessage","true"),i&&a!==undefined&&this.renderHeader("header"),i&&s!==undefined&&this.renderToastMessage("header")),this.renderButtons(c,"end"))))}get el(){return i(this)}static get watchers(){return{swipeGesture:["swipeGestureChanged"],isOpen:["onIsOpenChange"],trigger:["triggerChanged"]}}};const R=t=>({"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});const S=t=>f(t.role)?"button cancel":"button";N.style={ios:A,md:B};export{N as ion_toast}; //# sourceMappingURL=p-7f876d9e.entry.js.map