@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
334 lines (328 loc) • 44.3 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AOwgnAK2.js';
import { c as createColorClasses } from './p-B02IfvGX.js';
import { b as config } from './p-Bt4QT_oL.js';
import { a as attachComponent } from './p-C3CE5OlV.js';
import { d as defineCustomElement$3 } from './p-B7x5gzZv.js';
import { d as defineCustomElement$2 } from './p-C9VBtzS4.js';
import { d as defineCustomElement$1 } from './p-B-fmI6sr.js';
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 = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
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('./p-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('./p-Beh6uSne.js').then(mod => mod.create(animationBuilder, el));
const swipe = this.animation === 'bottom' ? await import('./p-BGScfV_K.js') : await import('./p-CxoCRakS.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('./p-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 this; }
static get watchers() { return {
"swipeGesture": ["swipeHandlerChanged"]
}; }
static get style() { return modalCss; }
}, [257, "lar-modal", {
"color": [1],
"colorIconSmall": [1, "color-icon-small"],
"colorHeaderInputs": [1, "color-header-inputs"],
"colorValue": [1, "color-value"],
"animation": [1],
"icon": [1],
"headerSize": [1, "header-size"],
"iconSmall": [1, "icon-small"],
"subTitle": [1, "sub-title"],
"supTitle": [1, "sup-title"],
"mainTitle": [1, "main-title"],
"value": [1],
"valueTranslationValues": [8, "value-translation-values"],
"overlayIndex": [2, "overlay-index"],
"showBackdrop": [4, "show-backdrop"],
"backdropDismiss": [4, "backdrop-dismiss"],
"swipeGesture": [1028, "swipe-gesture"],
"component": [1],
"componentProps": [16],
"getComponents": [64],
"getComponent": [64],
"attachComponent": [64],
"present": [64],
"dismiss": [64]
}, [[0, "larbackdroptap", "onBackdropTap"]], {
"swipeGesture": ["swipeHandlerChanged"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lar-modal", "lar-backdrop", "lar-icon", "lar-translate"];
components.forEach(tagName => { switch (tagName) {
case "lar-modal":
if (!customElements.get(tagName)) {
customElements.define(tagName, Modal);
}
break;
case "lar-backdrop":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lar-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "lar-translate":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { Modal as M, defineCustomElement as d };
//# sourceMappingURL=p-9A4J2Z7t.js.map
//# sourceMappingURL=p-9A4J2Z7t.js.map