@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
314 lines (307 loc) • 74.6 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-C4h1muVj.js';
import { n as now, b as attachComponent, c as camelCasetoDashed } from './helpers-ue25B_tw.js';
import { c as createColorClasses, g as getAppRoot } from './theme-B02IfvGX.js';
import { b as config } from './config-Bt4QT_oL.js';
import { c as createModal } from './modal-controller-u15OmOJx.js';
import { c as createNotify } from './notify-controller-pqp6Fz1f.js';
const backdropCss = "slot-fb[hidden],slot[hidden]{display:initial !important}:host{right:0;left:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:var(--lar-backdrop-opacity, 0.92);-ms-touch-action:none;touch-action:none;z-index:2;background-color:var(--lar-backdrop-color, #000)}:host(.lar-backdrop-hide){background:transparent}:host(.lar-backdrop-no-tappable){cursor:auto}";
const Backdrop = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.larbackdroptap = createEvent(this, "larbackdroptap");
this.lastClick = -1e4;
/**
* If `true`, the backdrop will be visible. Defaults to `true`.
*/
this.visible = true;
/**
* If `true`, the backdrop will can be clicked and will emit the `larbackdroptap` event. Defaults to `true`.
*/
this.tappable = true;
/**
* If `true`, the backdrop will stop propagation on tap. Defaults to `true`.
*/
this.stopPropagation = true;
}
onTouchStart(ev) {
this.lastClick = now(ev);
this.emitTap(ev);
}
onMouseDown(ev) {
if (this.lastClick < now(ev) - 2500) {
this.emitTap(ev);
}
}
emitTap(ev) {
if (this.stopPropagation) {
ev.preventDefault();
ev.stopPropagation();
}
if (this.tappable) {
this.larbackdroptap.emit();
}
}
render() {
return (h(Host, { key: 'a69aabe4dbcb78596ae7dab9000241d2fee2e63b', tabindex: "-1", class: { 'lar-backdrop-hide': !this.visible, 'lar-backdrop-no-tappable': !this.tappable } }));
}
};
Backdrop.style = backdropCss;
function enterAnimationRight(AnimationC, baseEl) {
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('lar-backdrop'));
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.lar-modal-wrapper'));
wrapperAnimation.beforeStyles({ 'opacity': 1 })
.fromTo('translateX', '100vw', '0%');
backdropAnimation.beforeStyles({ 'opacity': 0 }).fromTo('opacity', 0, 'var(--lar-backdrop-opacity, .6)');
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(400)
.add(wrapperAnimation)
.add(backdropAnimation));
}
function enterAnimationBottom(AnimationC, baseEl) {
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('lar-backdrop'));
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.lar-modal-wrapper'));
wrapperAnimation.beforeStyles({ 'opacity': 1 })
.fromTo('translateY', '100vh', '0%');
backdropAnimation.beforeStyles({ 'opacity': 0 }).fromTo('opacity', 0, 'var(--lar-backdrop-opacity, .6)');
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(400)
.add(wrapperAnimation)
.add(backdropAnimation));
}
function leaveAnimationBottom(AnimationC, baseEl) {
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('lar-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.lar-modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation.beforeStyles({ 'opacity': 1 })
.fromTo('translateY', '0%', '100vh');
backdropAnimation.fromTo('opacity', 'var(--lar-backdrop-opacity, .6)', 0.0);
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('ease-out')
.duration(250)
.add(backdropAnimation)
.add(wrapperAnimation));
}
function leaveAnimationRight(AnimationC, baseEl) {
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('lar-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.lar-modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation.beforeStyles({ 'opacity': 1 })
.fromTo('translateX', '0%', '100vw');
backdropAnimation.fromTo('opacity', 'var(--lar-backdrop-opacity, .6)', 0.0);
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('ease-out')
.duration(250)
.add(backdropAnimation)
.add(wrapperAnimation));
}
const modalCss = "slot-fb[hidden],slot[hidden]{display:initial !important}:host{right:0;left:0;top:0;bottom:0;overflow:hidden;position:fixed;height:100%;width:100%;z-index:3}lar-backdrop{opacity:0;-webkit-transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);will-change:opacity}.lar-modal-wrapper{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);right:0;left:0;top:0;bottom:0;background-color:var(--lar-background-color, #000) !important;width:100%;height:100%;z-index:10;opacity:0;max-width:600px;min-height:300px;margin:0 auto;-webkit-overflow-scrolling:touch;-webkit-box-shadow:0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 24px 80px -16px rgba(0, 0, 0, 0.15);box-shadow:0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 24px 80px -16px rgba(0, 0, 0, 0.15);-webkit-transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);will-change:transform, opacity}.lar-modal-content{-ms-flex:1;flex:1;display:block;position:relative;margin:0 !important;padding:0 !important;-webkit-overflow-scrolling:touch}.lar-modal-scroll{--safe-area-inset-top:env(safe-area-inset-top);right:0;left:0;top:calc((var(--lar-modal-big-icon-size, 4rem) + var(--lar-modal-padding-top, 2rem)) * 2 * -1);bottom:0;padding-top:calc(var(--safe-area-inset-top) + (var(--lar-modal-big-icon-size, 4rem) + var(--lar-modal-padding-top, 2rem)) * 4);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position;-ms-scroll-chaining:none;overscroll-behavior:contain;scroll-behavior:smooth}.lar-modal-scroll.small{--safe-area-inset-top:env(safe-area-inset-top);right:0;left:0;top:calc((var(--lar-modal-small-icon-size, 1.5rem) + var(--lar-modal-padding-top, 2rem)) * 2 * -1);bottom:0;padding-top:calc(var(--safe-area-inset-top) + (var(--lar-modal-small-icon-size, 1.5rem) + var(--lar-modal-padding-top, 2rem)) * 3.5)}.lar-toolbar{position:absolute;width:100%;z-index:4;backdrop-filter:blur(var(--lar-modal-blur, 3px));-webkit-backdrop-filter:blur(var(--lar-modal-blur, 3px));padding-top:env(safe-area-inset-top);-webkit-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);will-change:backdrop-filter}.lar-start,.lar-end{min-width:40px;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)}.lar-start a{display:inline-block;-webkit-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);border-radius:50%;padding:0.4rem;margin:-0.4rem}.lar-start a:active{-webkit-transform:scale(0.9);transform:scale(0.9);background:rgba(0, 0, 0, 0.05)}.lar-value{font-size:var(--lar-modal-value-font-size, 2.2rem);white-space:nowrap;overflow:hidden !important;text-overflow:ellipsis;display:block;max-width:100%;min-height:calc(var(--lar-modal-value-font-size, 2.2rem) * 1.2);text-align:center;margin:1rem 0;font-weight:700;letter-spacing:-0.01em;text-shadow:0 1px 3px rgba(0, 0, 0, 0.12)}.lar-value:empty{display:none !important}.lar-toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;z-index:-1;opacity:var(--lar-modal-header-opacity, 0.8);-webkit-transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);background:var(--lar-background-color, #000)}.lar-toolbar-container{padding:0.8rem;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.lar-modal-body{padding:var(--lar-modal-padding-top, 2rem) var(--lar-modal-padding-right, 1rem) var(--lar-modal-padding-bottom, 1.3rem) var(--lar-modal-padding-left, 1rem);position:relative}.lar-modal-components-slot{-webkit-animation:fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;animation:fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;padding-top:1.5rem}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.lar-modal-icon{margin:calc(var(--lar-modal-big-icon-size, 4rem) / 2) auto;padding:calc(var(--lar-modal-big-icon-size, 4rem) / 3);width:var(--lar-modal-big-icon-size, 4rem);height:var(--lar-modal-big-icon-size, 4rem);border-radius:50%;text-align:center;position:relative;display:inline-block;vertical-align:middle;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform-origin:center center;transform-origin:center center}.lar-modal-icon::before{content:\"\";position:absolute;inset:-4px;border-radius:50%;background:linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.05) 100%);opacity:0.6;pointer-events:none;z-index:1}.lar-modal-icon.small{margin:calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) auto;padding:calc(var(--lar-modal-small-icon-size, 1.5rem) / 3);width:var(--lar-modal-small-icon-size, 1.5rem);height:var(--lar-modal-small-icon-size, 1.5rem)}.lar-modal-icon.small::before{inset:-2px}.lar-mid:before{content:\"\";display:inline-block;vertical-align:middle;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box}.lar-modal-icon lar-icon{display:block;width:100%;height:100%;position:relative;z-index:2;-webkit-filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));-webkit-transition:-webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.lar-modal-icon:empty,h1:empty,h2:empty{display:none !important}h2,h3{padding:0;margin:0.2rem;font-size:1.7rem;text-align:center;white-space:nowrap;overflow:hidden !important;text-overflow:ellipsis;-webkit-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}h2{font-weight:700;letter-spacing:-0.02em;text-shadow:0 1px 2px rgba(0, 0, 0, 0.08)}h3{color:var(--lar-text-color-step-250, rgb(191.25, 191.25, 191.25));font-weight:500;font-size:1rem;letter-spacing:0.01em;opacity:0.85}:host(.lar-color-primary) .lar-modal-icon lar-icon{fill:var(--lar-color-primary-contrast, #fff) !important;stroke:var(--lar-color-primary-contrast, #fff) !important}:host(.lar-color-primary) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.35);--shadow-color2:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25);--shadow-color3:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.98);--shadow-color4:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.5);background-color:#780bb7;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-primary) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.35);--shadow-color2:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.25);--shadow-color3:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.98);--shadow-color4:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.5);background-color:#780bb7;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-secondary) .lar-modal-icon lar-icon{fill:var(--lar-color-secondary-contrast, #fff) !important;stroke:var(--lar-color-secondary-contrast, #fff) !important}:host(.lar-color-secondary) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.35);--shadow-color2:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25);--shadow-color3:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.98);--shadow-color4:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.5);background-color:#7fb800;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-secondary) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.35);--shadow-color2:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.25);--shadow-color3:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.98);--shadow-color4:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.5);background-color:#7fb800;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-tertiary) .lar-modal-icon lar-icon{fill:var(--lar-color-tertiary-contrast, #fff) !important;stroke:var(--lar-color-tertiary-contrast, #fff) !important}:host(.lar-color-tertiary) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.35);--shadow-color2:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25);--shadow-color3:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.98);--shadow-color4:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.5);background-color:#00a6ed;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-tertiary) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.35);--shadow-color2:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.25);--shadow-color3:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.98);--shadow-color4:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.5);background-color:#00a6ed;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-success) .lar-modal-icon lar-icon{fill:var(--lar-color-success-contrast, #fff) !important;stroke:var(--lar-color-success-contrast, #fff) !important}:host(.lar-color-success) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.35);--shadow-color2:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25);--shadow-color3:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.98);--shadow-color4:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.5);background-color:#7fb800;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-success) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.35);--shadow-color2:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.25);--shadow-color3:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.98);--shadow-color4:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.5);background-color:#7fb800;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-warning) .lar-modal-icon lar-icon{fill:var(--lar-color-warning-contrast, #fff) !important;stroke:var(--lar-color-warning-contrast, #fff) !important}:host(.lar-color-warning) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.35);--shadow-color2:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25);--shadow-color3:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.98);--shadow-color4:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.5);background-color:#ffb400;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-warning) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.35);--shadow-color2:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.25);--shadow-color3:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.98);--shadow-color4:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.5);background-color:#ffb400;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-danger) .lar-modal-icon lar-icon{fill:var(--lar-color-danger-contrast, #fff) !important;stroke:var(--lar-color-danger-contrast, #fff) !important}:host(.lar-color-danger) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.35);--shadow-color2:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25);--shadow-color3:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.98);--shadow-color4:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.5);background-color:#f6511d;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-danger) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.35);--shadow-color2:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.25);--shadow-color3:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.98);--shadow-color4:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.5);background-color:#f6511d;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-light) .lar-modal-icon lar-icon{fill:var(--lar-color-light-contrast, #000) !important;stroke:var(--lar-color-light-contrast, #000) !important}:host(.lar-color-light) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.35);--shadow-color2:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25);--shadow-color3:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.98);--shadow-color4:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.5);background-color:#f4f5f8;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-light) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.35);--shadow-color2:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.25);--shadow-color3:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.98);--shadow-color4:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.5);background-color:#f4f5f8;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-medium) .lar-modal-icon lar-icon{fill:var(--lar-color-medium-contrast, #000) !important;stroke:var(--lar-color-medium-contrast, #000) !important}:host(.lar-color-medium) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.35);--shadow-color2:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25);--shadow-color3:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.98);--shadow-color4:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.5);background-color:#d6d6d6;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-medium) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.35);--shadow-color2:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.25);--shadow-color3:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.98);--shadow-color4:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.5);background-color:#d6d6d6;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}:host(.lar-color-dark) .lar-modal-icon lar-icon{fill:var(--lar-color-dark-contrast, #fff) !important;stroke:var(--lar-color-dark-contrast, #fff) !important}:host(.lar-color-dark) .lar-modal-icon{--shadow-color1:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.35);--shadow-color2:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25);--shadow-color3:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.98);--shadow-color4:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.5);background-color:#222428;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-big-icon-size, 4rem) / 2) var(--shadow-color2), 0 8px 32px -8px var(--shadow-color4), inset 0 0 0 var(--lar-modal-big-icon-size, 4rem) var(--shadow-color3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.15))}:host(.lar-color-dark) .lar-modal-icon.small{--shadow-color1:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.35);--shadow-color2:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.25);--shadow-color3:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.98);--shadow-color4:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.5);background-color:#222428;-webkit-box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15));box-shadow:var(--lar-modal-icon-box-shadow, 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 4) var(--shadow-color1), 0 0 0 calc(var(--lar-modal-small-icon-size, 1.5rem) / 2) var(--shadow-color2), 0 6px 24px -6px var(--shadow-color4), inset 0 0 0 var(--lar-modal-small-icon-size, 1.5rem) var(--shadow-color3), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.15))}";
const Modal = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.willPresent = createEvent(this, "larmodalwillpresent");
this.didPresent = createEvent(this, "larmodaldidpresent");
this.willDismiss = createEvent(this, "larmodalwilldismiss");
this.didDismiss = createEvent(this, "larmodaldiddismiss");
// Reference to the user's provided modal content
this.presented = false;
this.config = config;
this.components = [];
/**
* Modal appearing animation if animations enabled
* Default options are: `"bottom"`, `"right"`
*/
this.animation = 'right';
/**
* Modal header size
*/
this.headerSize = 'default';
/**
* If `true`, a backdrop will be displayed behind the modal.
*/
this.showBackdrop = true;
/**
* If `true`, the modal will be dismissed when the backdrop is clicked.
*/
this.backdropDismiss = true;
}
swipeHandlerChanged() {
if (this.gesture) {
this.gesture.enable(!!this.swipeGesture);
}
}
async componentWillLoad() {
// swipe not set and enabled by config.
if (this.swipeGesture === undefined) {
this.swipeGesture = this.config.getBoolean('swipeBack', true);
}
if (this.component) {
this.components.push({
component: this.component,
componentProps: Object.assign(Object.assign({}, this.componentProps), { modal: this.el })
});
}
}
/**
* Get modal components
*/
async getComponents() {
return this.components;
}
/**
* Get modal component. If index not provided default returned
*/
async getComponent(index) {
if (index) {
return this.components[index] || null;
}
else if (this.component && this.components[0]) {
return this.components[0];
}
return null;
}
onBackdropTap() {
if (this.backdropDismiss) {
this.dismiss();
}
}
/**
* Attach additional component to modal
*/
async attachComponent(component, componentProps) {
this.components.push({
component,
componentProps
});
}
/**
* Present the modal overlay after it has been created.
*/
async present() {
if (this.presented) {
return;
}
// Wait for component to render before querying shadow DOM
await new Promise(resolve => requestAnimationFrame(resolve));
const el = this.el.shadowRoot || this.el;
const container = el.querySelector(`.lar-modal-components-slot`);
if (!container) {
throw new Error('container is undefined');
}
this.willPresent.emit();
this.presented = true;
for (const comp of this.components) {
comp.element = await attachComponent(container, comp.component, comp.componentProps);
}
const animationBuilder = this.animation === 'bottom' ? enterAnimationBottom : enterAnimationRight;
const animation = await import('./index-Beh6uSne.js').then(mod => mod.create(animationBuilder, el));
// add 'display' to :host element before we start animating.
// first time animation controller element creation to DOM takes time and default values may show you flickering because of beforeStyles functions
// do awoid flickering with 'beforeStyles' params we display host after controller is created.
if (!this.config.getBoolean('animated', true)) {
animation.duration(0);
}
await animation.playAsync();
animation.destroy();
// OSX safari scroll fix: https://stackoverflow.com/questions/28288710/cant-scroll-inside-a-div-after-applying-webkit-transform-in-safari
const scrollContent = el.querySelector('#lar-modal-scroll');
if (scrollContent) {
scrollContent.style.overflowY = 'hidden';
setTimeout(() => {
scrollContent.style.overflowY = 'auto';
});
}
this.didPresent.emit();
}
async componentDidLoad() {
const el = this.el.shadowRoot || this.el;
const animationBuilder = this.animation === 'bottom' ? leaveAnimationBottom : leaveAnimationRight;
const dismissAnimation = await import('./index-Beh6uSne.js').then(mod => mod.create(animationBuilder, el));
const swipe = this.animation === 'bottom' ? await import('./swipe-down-CoUevpmd.js') : await import('./swipe-back-Ql5zehTC.js');
let shouldHide = false;
dismissAnimation.onFinish(() => {
if (shouldHide) {
this.willDismiss.emit();
this.didDismiss.emit();
}
});
this.gesture = swipe.createSwipeBackGesture(this.el, () => !!this.swipeGesture, () => {
return dismissAnimation && dismissAnimation.progressStart();
}, step => {
return dismissAnimation && dismissAnimation.progressStep(step);
}, async (shouldComplete, step, dur) => {
if (dismissAnimation) {
dismissAnimation.progressEnd(shouldComplete, step, dur);
}
shouldHide = shouldComplete;
});
this.swipeHandlerChanged();
}
/**
* Present the modal overlay after it has been created.
*/
async dismiss() {
if (this.presented) {
this.willDismiss.emit();
const el = this.el.shadowRoot || this.el;
const animationBuilder = this.animation === 'bottom' ? leaveAnimationBottom : leaveAnimationRight;
const animation = await import('./index-Beh6uSne.js').then(mod => mod.create(animationBuilder, el));
if (!this.config.getBoolean('animated', true)) {
animation.duration(0);
}
await animation.playAsync();
animation.destroy();
this.didDismiss.emit();
}
}
render() {
// if it comes using DOM prop, objects not supporteed, so node.tsx coverts it to JSON string
const valueTranslationValues = !!this.valueTranslationValues && typeof this.valueTranslationValues === 'string' ?
JSON.parse(this.valueTranslationValues) :
this.valueTranslationValues;
let iconSmall;
let body;
let value;
if (this.iconSmall) {
iconSmall = h("lar-icon", { key: '9fecdfd3ad1741285ab70e6347b046ff5b54a444', size: "large", color: this.colorIconSmall || this.colorHeaderInputs || this.color, icon: this.iconSmall });
}
if (this.value && this.value !== '') {
value = h("lar-translate", { key: 'a0e7ef7a0641046380fdba91ec6cc795dfacd2b2', t: this.value, values: valueTranslationValues });
}
body = [
h("div", { key: '338e3e5f6a0b1dd0add5ccd4d447e0dcaaf7b0de', class: "lar-modal-header" }, h("div", { key: 'b1c3241dbbfe487325c84b4b10c98e67403120d3', class: "lar-toolbar" }, h("div", { key: '89b267d6e2300770251f62ef6261925631ed6b41', class: "lar-toolbar-background" }), h("div", { key: 'ccbdcf15fb157deaff7d32ba5c364a2d3f4e4e3b', class: "lar-toolbar-container" }, h("div", { key: 'c8c0d514b8163cd993fe32f49f54d259860dc83f', class: "lar-start" }, h("a", { key: 'd7ae9c3e34d3db2312446899da5299df6bba2382', href: "#", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.dismiss(); } }, h("lar-icon", { key: 'c56b0d17673e12c16d413cc9ab043cd2d3a16f4d', size: "medium", icon: this.animation === 'bottom' ? 'down' : 'back', color: this.colorHeaderInputs || 'medium' }))), h("div", { key: '0216e42dabef2ec1a9e66bbad12546d0f8a02edc', class: "lar-mid" }, h("div", { key: '85fa18b756d75494c0dd7c34c1570b00907e1c8a', class: 'lar-modal-icon ' + this.headerSize }, this.icon
? h("lar-icon", { icon: this.icon })
: '')), h("div", { key: 'c35df90bc07cc198ff0a4c36af80c351c25b35f2', class: "lar-end" }, iconSmall)))),
h("div", { key: '5269152383f291f6e6dd78aef3fbc6fd4911419a', class: "lar-modal-content" }, h("div", { key: 'c9b872ba1594de02779990d50cd1511567a29d98', id: "lar-modal-scroll", class: 'lar-modal-scroll ' + this.headerSize }, h("div", { key: '69b8d9f669ea37a8d0186c40d85536ad9cdaa295', class: "lar-modal-body" }, h("h3", { key: 'd6a3615a0b2aa834fa99da3e4f86c26f3ada52e6' }, h("lar-translate", { key: '3d13792f0ea36f87ef369d42bda965103637c82f', t: this.supTitle })), h("h2", { key: '8ef27993ceb18bba2ea64dfb76ac39649355c2ff' }, h("lar-translate", { key: 'b30eaa8658945b75934ddde3802d4ff7f7667466', t: this.mainTitle })), h("h3", { key: '1c487b8ed0c91e2b3332a44a9f994adfc311bdd8' }, h("lar-translate", { key: 'c7573d310fea8e0ddd708f9a6dc77e4d4297cdb1', t: this.subTitle })), h("div", { key: '0b22711dfe43b6e6e807b425b3133c9ab98f55f8', class: "lar-value" }, value), h("slot", { key: '5bd99cf39e93361ecaa3d9999bd9e59505aa07ef', name: "lar-modal-components-slot" }, h("div", { key: '617e8f466cd647fbf2c2b95128f8076064d21e53', class: "lar-modal-components-slot" })))))
];
return (h(Host, { key: '6e1f75205bc62c94b10b74f2bf58eefbf8a8ae6f', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'lar-modal': true }), style: {
'zIndex': String(200 + (this.overlayIndex || 0)),
} }, h("lar-backdrop", { key: 'd0bb529773c077b30486db2b10ead612ee1a9dcb', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '0199095b01e7f66af7d3d3e0e63d1cced1172e35', role: "dialog", class: "lar-modal-wrapper" }, body)));
}
get el() { return getElement(this); }
static get watchers() { return {
"swipeGesture": ["swipeHandlerChanged"]
}; }
};
Modal.style = modalCss;
const nodeCss = "slot-fb[hidden],slot[hidden]{display:initial !important}:host{min-width:8rem;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}:host(.lar-node-disabled){pointer-events:none;opacity:0.2;-webkit-filter:grayscale(0.5);filter:grayscale(0.5)}:host(.lar-node-loading){pointer-events:none}:host(.lar-node-loading) .lar-icon-small{-webkit-animation:pulse 1.5s ease-in-out infinite;animation:pulse 1.5s ease-in-out infinite}@-webkit-keyframes pulse{0%,100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0.6;-webkit-transform:scale(0.95);transform:scale(0.95)}}@keyframes pulse{0%,100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0.6;-webkit-transform:scale(0.95);transform:scale(0.95)}}:host(.lar-node-small) .lar-node-box{border-radius:var(--lar-node-small-box-border-radius, 0.5rem);text-align:left;height:var(--lar-node-small-box-height, 4rem);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.lar-node-small) .lar-node-box:before{display:none}:host(.lar-node-small) .lar-icon-big{padding:var(--lar-node-small-icon-padding-top, 0.5rem) var(--lar-node-small-icon-padding-right, 0.5rem) var(--lar-node-small-icon-padding-bottom, 0.5rem) var(--lar-node-small-icon-padding-left, 0.5rem);border-radius:var(--lar-node-icon-border-radius, 50%);width:var(--lar-node-small-icon-size, 1.8rem);height:var(--lar-node-small-icon-size, 1.8rem);display:inline-block;margin-right:0.5rem;margin-left:0.5rem}:host(.lar-node-small) .lar-node-middle{height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:left;justify-content:left}:host(.lar-node-small) .lar-value-badge{position:static;margin-left:auto;margin-right:0.5rem}.titles-slot:empty{display:none}.lar-node-box{border-radius:var(--lar-node-box-border-radius, 0.5rem);position:relative;cursor:pointer;overflow:visible;background:var(--lar-background-color, #000);min-height:8rem}.lar-node-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.875rem;padding:2rem 1rem 1rem 1rem;min-height:4.25rem;position:relative;border-radius:1rem}@media (max-width: 576px){.lar-node-content{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center}}.lar-icon-main{-ms-flex-negative:0;flex-shrink:0;width:2.75rem;height:2.75rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:rgba(0, 0, 0, 0.04);border-radius:50%}.lar-icon-main lar-icon{width:1.5rem;height:1.5rem}.lar-icon-big{padding:var(--lar-node-icon-padding-top, 1.2rem) var(--lar-node-icon-padding-right, 1.2rem) var(--lar-node-icon-padding-bottom, 1.2rem) var(--lar-node-icon-padding-left, 1.2rem);border-radius:var(--lar-node-icon-border-radius, 50%);width:var(--lar-node-icon-size, 3rem);height:var(--lar-node-icon-size, 3rem);display:inline-block;background:rgba(0, 0, 0, 0.03);position:relative;z-index:1}.lar-node-titles-wrapper{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:0.125rem;padding-right:0.5rem}.lar-node-right{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.75rem;margin-left:auto}.lar-node-right .titles-slot{position:static;top:auto;right:auto}@media (max-width: 576px){.lar-node-right{width:100%;margin-left:0;margin-top:-0.25rem;-ms-flex-pack:end;justify-content:flex-end}}.lar-node-middle{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:4rem}.lar-value-badge{position:absolute;top:0.5rem;right:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.375rem;padding:0.25rem 0.5rem;background:rgba(0, 0, 0, 0.06);border-radius:0.5rem;z-index:10;max-width:50%;margin-left:0.75rem}@media (max-width: 576px){.lar-value-badge{top:0.625rem;right:0.625rem;max-width:45%;margin-left:1rem}}.lar-value-badge:has(.lar-icon-small):not(:has(.lar-value)){padding:0.25rem;background:transparent}.lar-value-badge .lar-icon-small{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1rem;height:1rem}.lar-value-badge .lar-icon-small lar-icon{width:100%;height:100%}.lar-value-badge .lar-value{font-size:0.75rem;font-weight:600;letter-spacing:0.02em;white-space:nowrap;overflow:hidden !important;text-overflow:ellipsis;line-height:1.2;-ms-flex:1;flex:1;min-width:0}@media (max-width: 576px){.lar-value-badge .lar-value{font-size:0.8125rem}}.lar-icon-small lar-icon,.lar-icon-big lar-icon{display:block;width:100%;height:100%;position:relative;z-index:2}.lar-icon-small:empty,.lar-icon-big:empty{display:none !important}.spacer{margin-top:1rem;margin-bottom:1rem}.defaultslot,.defaultslotelements{display:none}@media (max-width: 320px){:host{max-width:100%}}:host(.lar-color-primary) .lar-node-box lar-icon{fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-color-primary) .lar-icon-big lar-icon{fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-node-small.lar-color-primary) .lar-icon-big lar-icon{fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-color-secondary) .lar-node-box lar-icon{fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-color-secondary) .lar-icon-big lar-icon{fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-node-small.lar-color-secondary) .lar-icon-big lar-icon{fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-color-tertiary) .lar-node-box lar-icon{fill:var(--