@paperless/core 1.0.1 → 1.3.1

package/dist/esm/p-modal-body_4.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, c as createEvent } from './index-2c1bdb40.js';
 
-const modalBodyComponentCss = ".rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}:host(.is-rounded){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){:host(.is-rounded){border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@media (min-width:40rem){.tablet\\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}@media (min-width:64rem){.desktop-xs\\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}.flex{display:flex!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+const modalBodyComponentCss = ".rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}:host(.is-rounded){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){:host(.is-rounded){border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@media (min-width:40rem){.tablet\\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}@media (min-width:64rem){.desktop-xs\\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.flex{display:flex!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}";
 
 const ModalBody = class {
   constructor(hostRef) {
@@ -14,7 +14,7 @@ const ModalBody = class {
 };
 ModalBody.style = modalBodyComponentCss;
 
-const modalContainerComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-xxlarge{border-top-left-radius:.75rem!important;border-top-right-radius:.75rem!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}p-modal-container{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;animation:slideInBottom .5s ease forwards!important;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;width:100%;z-index:600}@media (min-width:40rem){p-modal-container{width:auto}}@media (min-width:64rem){p-modal-container{animation:slideInBottomSmall .5s ease forwards!important;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}p-modal-container.closing{animation:slideOutBottom .5s ease forwards!important}@media (min-width:64rem){p-modal-container.closing{animation:slideOutBottomSmall .5s ease forwards!important}}@media (min-width:40rem){.tablet\\:w-auto{width:auto!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.justify-center{justify-content:center!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+const modalContainerComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-xxlarge{border-top-left-radius:.75rem!important;border-top-right-radius:.75rem!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}p-modal-container{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;animation:slideInBottom .5s ease forwards!important;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;width:100%;z-index:600}@media (min-width:40rem){p-modal-container{width:auto}}@media (min-width:64rem){p-modal-container{animation:slideInBottomSmall .5s ease forwards!important;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}p-modal-container.closing{animation:slideOutBottom .5s ease forwards!important}@media (min-width:64rem){p-modal-container.closing{animation:slideOutBottomSmall .5s ease forwards!important}}@media (min-width:40rem){.tablet\\:w-auto{width:auto!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.justify-center{justify-content:center!important}";
 
 // $modal-xs: 20rem;
 // $modal-sm: 33.5rem;
@@ -41,7 +41,7 @@ const ModalContainer = class {
 };
 ModalContainer.style = modalContainerComponentCss;
 
-const modalFooterComponentCss = ".flex{display:flex!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.pb-6{padding-bottom:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-bottom-left-radius:0;border-bottom-right-radius:0;display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}@media (min-width:64rem){:host{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}.static{position:static!important}.rounded{border-radius:.25rem!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+const modalFooterComponentCss = ".flex{display:flex!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.pb-6{padding-bottom:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-bottom-left-radius:0;border-bottom-right-radius:0;display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}@media (min-width:64rem){:host{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}.static{position:static!important}.rounded{border-radius:.25rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}";
 
 const ModalFooter = class {
   constructor(hostRef) {
@@ -53,12 +53,12 @@ const ModalFooter = class {
 };
 ModalFooter.style = modalFooterComponentCss;
 
-const modalHeaderComponentCss = ".flex{display:flex!important}.justify-between{justify-content:space-between!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));border-top-left-radius:.75rem;border-top-right-radius:.75rem;color:rgb(39 40 56/var(--tw-text-opacity));display:flex;font-size:1.25rem;font-weight:600;justify-content:space-between;line-height:1.75rem;padding:1rem}@media (min-width:64rem){:host{font-size:1.875rem;font-weight:700;line-height:2.25rem;padding:1.5rem}}@media (min-width:64rem){.desktop-xs\\:text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+const modalHeaderComponentCss = ".flex{display:flex!important}.justify-between{justify-content:space-between!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));border-top-left-radius:.75rem;border-top-right-radius:.75rem;color:rgb(39 40 56/var(--tw-text-opacity));display:flex;font-size:1.25rem;font-weight:600;justify-content:space-between;line-height:1.75rem;padding:1rem}@media (min-width:64rem){:host{font-size:1.875rem;font-weight:700;line-height:2.25rem;padding:1.5rem}}@media (min-width:64rem){.desktop-xs\\:text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}";
 
 const ModalHeader = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 7);
+    this.close = createEvent(this, "close", 3);
     this.showClose = true;
   }
   render() {

package/dist/esm/p-modal-body_4.entry.js.map

@@ -1 +1 @@
-{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,29KAA29K;;MCO5+K,SAAS;;;mBAIqB,SAAS;mBAKrB,KAAK;;EAEhC,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IACvC,IAAI,CAAC,OAAO,IAAI,YACpB,EAAE,IAEF,eAAQ,CACL,EACT;GACL;;;;AC5BL,MAAM,0BAA0B,GAAG,wwNAAwwN;;ACE3yN;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;EACf,EAAE,EAAE,aAAa;EACjB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,kBAAkB;EACtB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,oBAAoB;CAC3B,CAAC;MAKW,cAAc;;;gBAImB,IAAI;mBAKnB,KAAK;;EAEhC,MAAM;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAExC,QACI,EAAC,IAAI,IACD,KAAK,EAAE,qBACH,IAAI,CAAC,OAAO,IAAI,SACpB,IAAI,SAAS,EAAE,IAEf,eAAQ,CACL,EACT;GACL;;;;AC1CL,MAAM,uBAAuB,GAAG,8kKAA8kK;;MCOjmK,WAAW;;;;EACpB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,iBAAW,KAAK,EAAC,kCAAkC,GAAG,EAEtD,eAAQ,CACL,EACT;GACL;;;;AChBL,MAAM,uBAAuB,GAAG,67KAA67K;;MCOh9K,WAAW;;;;qBAIA,IAAI;;EAOxB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,gBACI,eAAQ,CACL,EAEN,IAAI,CAAC,SAAS,KACX,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,GACJ,CACf,CACE,EACT;GACL;;;;;;","names":[],"sources":["./src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","./src/components/atoms/modal-body/modal-body.component.tsx","./src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","./src/components/atoms/modal-container/modal-container.component.tsx","./src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","./src/components/atoms/modal-footer/modal-footer.component.tsx","./src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","./src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n    @apply bg-white;\n    @apply px-6 tablet:px-10 desktop-xs:px-14 py-6;\n}\n\n:host(.variant-table) {\n    @apply px-6;\n}\n\n:host(.is-rounded) {\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-body',\n    styleUrl: 'modal-body.component.scss',\n    shadow: true,\n})\nexport class ModalBody {\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    /**\n     * Wether the modal body should be rounded at the bottom\n     */\n    @Prop() rounded: boolean = false;\n\n    render() {\n        return (\n            <Host\n                class={`p-modal-body variant-${this.variant} ${\n                    this.rounded && 'is-rounded'\n                }`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n","p-modal-container {\n    @apply flex flex-col w-full tablet:w-auto z-modal;\n    @apply rounded-b-none rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;\n\n    @apply animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small #{!important};\n\n    @apply shadow-4 #{!important};\n\n    &.closing {\n        @apply animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small #{!important};\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n    xs: 'tablet:w-80',\n    sm: 'tablet:w-[33.5rem]',\n    md: 'tablet:w-[38rem]',\n    lg: 'tablet:w-[47.5rem]',\n    xl: 'tablet:w-[57.5rem]',\n};\n@Component({\n    tag: 'p-modal-container',\n    styleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * Wether the container is closing\n     */\n    @Prop() closing: boolean = false;\n\n    render() {\n        const sizeClass = modalSizes[this.size];\n\n        return (\n            <Host\n                class={`p-modal-container ${\n                    this.closing && 'closing'\n                } ${sizeClass}`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-white;\n    @apply flex flex-col;\n    @apply pb-6 px-6;\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-footer',\n    styleUrl: 'modal-footer.component.scss',\n    shadow: true,\n})\nexport class ModalFooter {\n    render() {\n        return (\n            <Host class=\"p-modal-footer\">\n                <p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-mystic rounded-t-xxlarge;\n    @apply flex justify-between items-center;\n    @apply p-4 desktop-xs:p-6;\n\n    @apply text-storm-dark text-xl font-semibold;\n    @apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-header',\n    styleUrl: 'modal-header.component.scss',\n    shadow: true,\n})\nexport class ModalHeader {\n    /**\n     * Wether to show the close button on mobile\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Close click event\n     */\n    @Event() close: EventEmitter<MouseEvent>;\n\n    render() {\n        return (\n            <Host class=\"p-modal-header\">\n                <span>\n                    <slot />\n                </span>\n\n                {this.showClose && (\n                    <p-button\n                        variant=\"secondary\"\n                        icon=\"negative\"\n                        iconOnly={true}\n                        onClick={(ev) => this.close.emit(ev)}\n                        size=\"small\"\n                    ></p-button>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,29KAA29K;;MCO5+K,SAAS;;;mBAIqB,SAAS;mBAKrB,KAAK;;EAEhC,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IACvC,IAAI,CAAC,OAAO,IAAI,YACpB,EAAE,IAEF,eAAQ,CACL,EACT;GACL;;;;AC5BL,MAAM,0BAA0B,GAAG,wwNAAwwN;;ACE3yN;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;EACf,EAAE,EAAE,aAAa;EACjB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,kBAAkB;EACtB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,oBAAoB;CAC3B,CAAC;MAKW,cAAc;;;gBAImB,IAAI;mBAKnB,KAAK;;EAEhC,MAAM;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAExC,QACI,EAAC,IAAI,IACD,KAAK,EAAE,qBACH,IAAI,CAAC,OAAO,IAAI,SACpB,IAAI,SAAS,EAAE,IAEf,eAAQ,CACL,EACT;GACL;;;;AC1CL,MAAM,uBAAuB,GAAG,8kKAA8kK;;MCOjmK,WAAW;;;;EACpB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,iBAAW,KAAK,EAAC,kCAAkC,GAAG,EAEtD,eAAQ,CACL,EACT;GACL;;;;AChBL,MAAM,uBAAuB,GAAG,67KAA67K;;MCOh9K,WAAW;;;;qBAIA,IAAI;;EASxB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,gBACI,eAAQ,CACL,EAEN,IAAI,CAAC,SAAS,KACX,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,GACJ,CACf,CACE,EACT;GACL;;;;;;","names":[],"sources":["./src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","./src/components/atoms/modal-body/modal-body.component.tsx","./src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","./src/components/atoms/modal-container/modal-container.component.tsx","./src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","./src/components/atoms/modal-footer/modal-footer.component.tsx","./src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","./src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n    @apply bg-white;\n    @apply px-6 tablet:px-10 desktop-xs:px-14 py-6;\n}\n\n:host(.variant-table) {\n    @apply px-6;\n}\n\n:host(.is-rounded) {\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-body',\n    styleUrl: 'modal-body.component.scss',\n    shadow: true,\n})\nexport class ModalBody {\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    /**\n     * Wether the modal body should be rounded at the bottom\n     */\n    @Prop() rounded: boolean = false;\n\n    render() {\n        return (\n            <Host\n                class={`p-modal-body variant-${this.variant} ${\n                    this.rounded && 'is-rounded'\n                }`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n","p-modal-container {\n    @apply flex flex-col w-full tablet:w-auto z-modal;\n    @apply rounded-b-none rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;\n\n    @apply animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small #{!important};\n\n    @apply shadow-4 #{!important};\n\n    &.closing {\n        @apply animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small #{!important};\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n    xs: 'tablet:w-80',\n    sm: 'tablet:w-[33.5rem]',\n    md: 'tablet:w-[38rem]',\n    lg: 'tablet:w-[47.5rem]',\n    xl: 'tablet:w-[57.5rem]',\n};\n@Component({\n    tag: 'p-modal-container',\n    styleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * Wether the container is closing\n     */\n    @Prop() closing: boolean = false;\n\n    render() {\n        const sizeClass = modalSizes[this.size];\n\n        return (\n            <Host\n                class={`p-modal-container ${\n                    this.closing && 'closing'\n                } ${sizeClass}`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-white;\n    @apply flex flex-col;\n    @apply pb-6 px-6;\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-footer',\n    styleUrl: 'modal-footer.component.scss',\n    shadow: true,\n})\nexport class ModalFooter {\n    render() {\n        return (\n            <Host class=\"p-modal-footer\">\n                <p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    @apply bg-mystic rounded-t-xxlarge;\n    @apply flex justify-between items-center;\n    @apply p-4 desktop-xs:p-6;\n\n    @apply text-storm-dark text-xl font-semibold;\n    @apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-header',\n    styleUrl: 'modal-header.component.scss',\n    shadow: true,\n})\nexport class ModalHeader {\n    /**\n     * Wether to show the close button on mobile\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Close click event\n     */\n    @Event({\n        bubbles: false\n    }) close: EventEmitter<MouseEvent>;\n\n    render() {\n        return (\n            <Host class=\"p-modal-header\">\n                <span>\n                    <slot />\n                </span>\n\n                {this.showClose && (\n                    <p-button\n                        variant=\"secondary\"\n                        icon=\"negative\"\n                        iconOnly={true}\n                        onClick={(ev) => this.close.emit(ev)}\n                        size=\"small\"\n                    ></p-button>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/p-modal.entry.js

@@ -3,8 +3,8 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 const Modal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.closeClicked = createEvent(this, "closeClicked", 7);
-    this.closed = createEvent(this, "closed", 7);
+    this.closeClicked = createEvent(this, "closeClicked", 3);
+    this.closed = createEvent(this, "closed", 3);
     this._hasFooterSlot = false;
     this._hasHeaderSlot = false;
     this.size = 'md';

package/dist/esm/p-modal.entry.js.map

@@ -1 +1 @@
-{"file":"p-modal.entry.js","mappings":";;MAea,KAAK;;;;;IA6DN,mBAAc,GAAG,KAAK,CAAC;IACvB,mBAAc,GAAG,KAAK,CAAC;gBA1DW,IAAI;mBAKP,SAAS;;gBAUxB,KAAK;qBAKA,KAAK;qBAKd,IAAI;4BAKG,KAAK;8BAKH,IAAI;sBAKH,IAAI;oBAoBN,KAAK;;EAEjC,iBAAiB;IACb,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;IACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;GACL;EAED,MAAM;;IACF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,YAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAC5C,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAE7C,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,IACjB,kBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EACjD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,yBAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrD,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MACxC,sBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,IAErC,IAAI,CAAC,cAAc;QACd,aAAa;QACb,IAAI,CAAC,MAAM,CACJ,CACpB,EACD,oBACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,IAAI,CAAC,cAAc,IAE5B,WAAW,CACD,EACd,IAAI,CAAC,cAAc,KAChB,0BAAiB,aAAa,CAAkB,CACnD,CACe,CACX,CACV,EACT;GACL;EAEO,cAAc,CAAC,EAAc;IACjC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC1B,OAAO;KACV;IAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;GAClB;EAEM,KAAK,CAAC,EAAc;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACtB,EAAE,GAAG,CAAC,CAAC;GACX;;;;;;","names":[],"sources":["./src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State\n} from '@stencil/core';\n\n@Component({\n    tag: 'p-modal',\n    shadow: true,\n})\nexport class Modal {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    /**\n     * The Header of the modal\n     */\n    @Prop() header?: string;\n\n    /**\n     * Wether to show the modal or not\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to apply blur to the backdrop\n     */\n    @Prop() applyBlur: boolean = false;\n\n    /**\n     * Wether to show the close button in the header\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Wether to show the footer on mobile\n     */\n    @Prop() showMobileFooter = false;\n\n    /**\n     * Wether to hide the modal when the backdrop is clicked\n     */\n    @Prop() backdropClickClose = true;\n\n    /**\n     * Wether we should scroll lock the body\n     */\n    @Prop() scrollLock: boolean = true;\n\n    /**\n     * Close click event\n     */\n    @Event() closeClicked: EventEmitter<MouseEvent>;\n\n    /**\n     * Closed event\n     */\n    @Event() closed: EventEmitter<null>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    private _hasFooterSlot = false;\n    private _hasHeaderSlot = false;\n\n    @State() private _closing = false;\n\n    componentWillLoad() {\n        this._hasFooterSlot = !!this._el.querySelector(\n            ':scope > [slot=\"footer\"]'\n        );\n        this._hasHeaderSlot = !!this._el.querySelector(\n            ':scope > [slot=\"header\"]'\n        );\n    }\n\n    render() {\n        if (!this.show) {\n            return;\n        }\n\n        const headerContent = <slot name=\"header\" />;\n        const bodyContent = <slot name=\"content\" />;\n        const footerContent = <slot name=\"footer\" />;\n\n        return (\n            <Host class=\"p-modal\">\n                <p-backdrop\n                    applyBlur={this.applyBlur}\n                    onClicked={(ev) => this._backdropClick(ev.detail)}\n                    closing={this._closing}\n                    scrollLock={this.scrollLock}\n                >\n                    <p-modal-container size={this.size} closing={this._closing}>\n                        {(this.header?.length || this._hasHeaderSlot) && (\n                            <p-modal-header\n                                showClose={this.showClose}\n                                onClose={(ev) => this.close(ev.detail)}\n                            >\n                                {this._hasHeaderSlot\n                                    ? headerContent\n                                    : this.header}\n                            </p-modal-header>\n                        )}\n                        <p-modal-body\n                            variant={this.variant}\n                            rounded={!this._hasFooterSlot}\n                        >\n                            {bodyContent}\n                        </p-modal-body>\n                        {this._hasFooterSlot && (\n                            <p-modal-footer>{footerContent}</p-modal-footer>\n                        )}\n                    </p-modal-container>\n                </p-backdrop>\n            </Host>\n        );\n    }\n\n    private _backdropClick(ev: MouseEvent) {\n        if (!this.backdropClickClose) {\n            return;\n        }\n\n        this.close(ev);\n    }\n\n    public close(ev: MouseEvent) {\n        this.closeClicked.emit(ev);\n\n        this._closing = true;\n\n        setTimeout(() => {\n            this.show = false;\n            this._closing = false;\n\n            this.closed.emit();\n        }, 550);\n    }\n}\n"],"version":3}
+{"file":"p-modal.entry.js","mappings":";;MAea,KAAK;;;;;IAiEN,mBAAc,GAAG,KAAK,CAAC;IACvB,mBAAc,GAAG,KAAK,CAAC;gBA9DW,IAAI;mBAKP,SAAS;;gBAUxB,KAAK;qBAKA,KAAK;qBAKd,IAAI;4BAKG,KAAK;8BAKH,IAAI;sBAKH,IAAI;oBAwBN,KAAK;;EAEjC,iBAAiB;IACb,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;IACF,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC1C,0BAA0B,CAC7B,CAAC;GACL;EAED,MAAM;;IACF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,YAAM,IAAI,EAAC,SAAS,GAAG,CAAC;IAC5C,MAAM,aAAa,GAAG,YAAM,IAAI,EAAC,QAAQ,GAAG,CAAC;IAE7C,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS,IACjB,kBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EACjD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,yBAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrD,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,cAAc,MACxC,sBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,IAErC,IAAI,CAAC,cAAc;QACd,aAAa;QACb,IAAI,CAAC,MAAM,CACJ,CACpB,EACD,oBACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,IAAI,CAAC,cAAc,IAE5B,WAAW,CACD,EACd,IAAI,CAAC,cAAc,KAChB,0BAAiB,aAAa,CAAkB,CACnD,CACe,CACX,CACV,EACT;GACL;EAEO,cAAc,CAAC,EAAc;IACjC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC1B,OAAO;KACV;IAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;GAClB;EAEM,KAAK,CAAC,EAAc;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,UAAU,CAAC;MACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACtB,EAAE,GAAG,CAAC,CAAC;GACX;;;;;;","names":[],"sources":["./src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State\n} from '@stencil/core';\n\n@Component({\n    tag: 'p-modal',\n    shadow: true,\n})\nexport class Modal {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    /**\n     * The Header of the modal\n     */\n    @Prop() header?: string;\n\n    /**\n     * Wether to show the modal or not\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to apply blur to the backdrop\n     */\n    @Prop() applyBlur: boolean = false;\n\n    /**\n     * Wether to show the close button in the header\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Wether to show the footer on mobile\n     */\n    @Prop() showMobileFooter = false;\n\n    /**\n     * Wether to hide the modal when the backdrop is clicked\n     */\n    @Prop() backdropClickClose = true;\n\n    /**\n     * Wether we should scroll lock the body\n     */\n    @Prop() scrollLock: boolean = true;\n\n    /**\n     * Close click event\n     */\n    @Event({\n        bubbles: false\n    }) closeClicked: EventEmitter<MouseEvent>;\n\n    /**\n     * Closed event\n     */\n    @Event({\n        bubbles: false\n    }) closed: EventEmitter<null>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    private _hasFooterSlot = false;\n    private _hasHeaderSlot = false;\n\n    @State() private _closing = false;\n\n    componentWillLoad() {\n        this._hasFooterSlot = !!this._el.querySelector(\n            ':scope > [slot=\"footer\"]'\n        );\n        this._hasHeaderSlot = !!this._el.querySelector(\n            ':scope > [slot=\"header\"]'\n        );\n    }\n\n    render() {\n        if (!this.show) {\n            return;\n        }\n\n        const headerContent = <slot name=\"header\" />;\n        const bodyContent = <slot name=\"content\" />;\n        const footerContent = <slot name=\"footer\" />;\n\n        return (\n            <Host class=\"p-modal\">\n                <p-backdrop\n                    applyBlur={this.applyBlur}\n                    onClicked={(ev) => this._backdropClick(ev.detail)}\n                    closing={this._closing}\n                    scrollLock={this.scrollLock}\n                >\n                    <p-modal-container size={this.size} closing={this._closing}>\n                        {(this.header?.length || this._hasHeaderSlot) && (\n                            <p-modal-header\n                                showClose={this.showClose}\n                                onClose={(ev) => this.close(ev.detail)}\n                            >\n                                {this._hasHeaderSlot\n                                    ? headerContent\n                                    : this.header}\n                            </p-modal-header>\n                        )}\n                        <p-modal-body\n                            variant={this.variant}\n                            rounded={!this._hasFooterSlot}\n                        >\n                            {bodyContent}\n                        </p-modal-body>\n                        {this._hasFooterSlot && (\n                            <p-modal-footer>{footerContent}</p-modal-footer>\n                        )}\n                    </p-modal-container>\n                </p-backdrop>\n            </Host>\n        );\n    }\n\n    private _backdropClick(ev: MouseEvent) {\n        if (!this.backdropClickClose) {\n            return;\n        }\n\n        this.close(ev);\n    }\n\n    public close(ev: MouseEvent) {\n        this.closeClicked.emit(ev);\n\n        this._closing = true;\n\n        setTimeout(() => {\n            this.show = false;\n            this._closing = false;\n\n            this.closed.emit();\n        }, 550);\n    }\n}\n"],"version":3}

package/dist/esm/p-page-size-select_3.entry.js

@@ -5,7 +5,7 @@ import { d as defaultSize, a as defaultSizeOptions } from './constants-826f9460.
 const PageSizeSelect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.sizeChange = createEvent(this, "sizeChange", 7);
+    this.sizeChange = createEvent(this, "sizeChange", 3);
     this._defaultButtonTemplate = (size) => formatTranslation(this._locales.item, { size });
     this._defaultItemTemplate = (size) => formatTranslation(this._locales.item, { size });
     this.size = defaultSize;
@@ -45,7 +45,7 @@ const paginationComponentCss = ".flex{display:flex!important}*{box-sizing:border
 const Pagination = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.pageChange = createEvent(this, "pageChange", 7);
+    this.pageChange = createEvent(this, "pageChange", 3);
     this._pages = [];
     this._set = [];
     this._nextClick = () => {

package/dist/esm/p-page-size-select_3.entry.js.map

@@ -1 +1 @@
-{"file":"p-page-size-select.p-pagination.p-pagination-item.entry.js","mappings":"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","names":[],"sources":["./src/components/molecules/page-size-select/page-size-select.component.tsx","./src/components/molecules/pagination/pagination.component.scss?tag=p-pagination","./src/components/molecules/pagination/pagination.component.tsx","./src/components/atoms/pagination-item/pagination-item.component.scss?tag=p-pagination-item&encapsulation=shadow","./src/components/atoms/pagination-item/pagination-item.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n} from '@stencil/core';\nimport {\n    formatTranslation,\n    getLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from './constants';\n\nexport type templateFunc = (value: number) => string;\n\n@Component({\n    tag: 'p-page-size-select',\n    shadow: true,\n})\nexport class PageSizeSelect {\n    private _defaultButtonTemplate: templateFunc = (size) =>\n        formatTranslation(this._locales.item, { size });\n    private _defaultItemTemplate: templateFunc = (size) =>\n        formatTranslation(this._locales.item, { size });\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) size: number = defaultSize;\n\n    /**\n     * The available sizes\n     */\n    @Prop() sizeOptions: number[] = defaultSizeOptions;\n\n    /**\n     * Event whenever the size changes\n     */\n    @Event() sizeChange: EventEmitter<number>;\n\n    /**\n     * Chevron position\n     */\n    @Prop() chevronPosition: 'start' | 'end' = 'start';\n\n    /**\n     * The size of the button\n     */\n    @Prop() buttonSize: 'small' | 'medium' = 'small';\n\n    /**\n     * The template for the data view\n     */\n    @Prop() buttonTemplate: templateFunc = this._defaultButtonTemplate;\n\n    /**\n     * The template for the data view\n     */\n    @Prop() itemTemplate: templateFunc = this._defaultItemTemplate;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hidden: boolean = false;\n\n    /**\n     * Locales used for this component\n     */\n    @State() private _locales: any = {};\n\n    componentWillLoad() {\n        this._setLocales();\n    }\n\n    render() {\n        return (\n            <Host class={`p-page-size-select ${this.hidden && 'hidden'}`}>\n                <p-dropdown\n                    placement=\"top-start\"\n                    chevronPosition={this.chevronPosition}\n                    chevronDirection=\"down\"\n                >\n                    <p-button\n                        variant=\"secondary\"\n                        slot=\"trigger\"\n                        size={this.buttonSize}\n                    >\n                        {this.buttonTemplate\n                            ? this.buttonTemplate(this.size)\n                            : this._defaultButtonTemplate(this.size)}\n                    </p-button>\n                    <slot slot=\"items\">\n                        {this.sizeOptions.map((option) => (\n                            <p-dropdown-menu-item\n                                active={option === this.size}\n                                onClick={() => this._changeSize(option)}\n                            >\n                                {this.itemTemplate\n                                    ? this.itemTemplate(option)\n                                    : this._defaultItemTemplate(option)}\n                            </p-dropdown-menu-item>\n                        ))}\n                    </slot>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('localeChanged', { target: 'body' })\n    private async _setLocales(): Promise<void> {\n        this._locales = await getLocaleComponentStrings(this._el);\n    }\n\n    private _changeSize(s?: number) {\n        if (!s) {\n            return;\n        }\n\n        this.size = s;\n        this.sizeChange.emit(this.size);\n    }\n}\n","p-pagination {\n  @apply flex;\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch,\n} from '@stencil/core';\n\ntype PaginationSetItem = {\n    type: string;\n    value?: number | Element | JSX.Element | string;\n};\n\n@Component({\n    tag: 'p-pagination',\n    styleUrl: 'pagination.component.scss',\n})\nexport class Pagination {\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) page: number = 1;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event() pageChange: EventEmitter<number>;\n\n    /**\n     * The amount of items per page\n     */\n    @Prop() pageSize: number = 12;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hideOnSinglePage: boolean = false;\n\n    /**\n     * The total amount of items\n     */\n    @Prop() total!: number;\n\n    private _pages: number[] = [];\n    private _set: PaginationSetItem[] = [];\n\n    componentWillRender() {\n        this._generate();\n    }\n\n    render() {\n        return (\n            <Host\n                class={`p-pagination ${\n                    this.hideOnSinglePage && this._set?.length === 3 && 'hidden'\n                }`}\n            >\n                {this._set?.map((p) => {\n                    if (p.type === 'previous' || p.type === 'next') {\n                        return (\n                            <p-pagination-item\n                                onClick={() =>\n                                    p.type === 'previous'\n                                        ? this._previousClick()\n                                        : this._nextClick()\n                                }\n                            >\n                                {p.value}\n                            </p-pagination-item>\n                        );\n                    }\n\n                    if (p.type === 'ellipsis') {\n                        return <p-pagination-item>...</p-pagination-item>;\n                    }\n\n                    return (\n                        <p-pagination-item\n                            active={p.value === this.page}\n                            onClick={() => this._pageClick(p.value as number)}\n                        >\n                            {p.value}\n                        </p-pagination-item>\n                    );\n                })}\n            </Host>\n        );\n    }\n\n    @Watch('page')\n    @Watch('pageSize')\n    @Watch('total')\n    protected pageChangeHandler() {\n        this._generate();\n    }\n\n    private _generate() {\n        this._pages = this._generatePages();\n        this._set = this._generateSet();\n\n        if (this.page > this._pages?.length) {\n            this._changePage(this._pages.length);\n        }\n    }\n\n    private _changePage(p?: number) {\n        if (!p) {\n            return;\n        }\n\n        this.page = p;\n        this.pageChange.emit(this.page);\n    }\n\n    private _previousClick() {\n        const previousPage = this.page - 1;\n        if (previousPage < this._pages[0]) {\n            return;\n        }\n\n        this._changePage(previousPage);\n    }\n\n    private _nextClick = () => {\n        const nextPage = this.page + 1;\n        if (nextPage > this._pages[this._pages.length - 1]) {\n            return;\n        }\n\n        this._changePage(nextPage);\n    };\n\n    private _pageClick = (p?: number) => this._changePage(p);\n\n    private _generatePages() {\n        if (!this.total || !this.pageSize) {\n            return [];\n        }\n\n        const pages = Math.ceil(this.total / this.pageSize);\n        return new Array(pages).fill(undefined).map((_, i) => i + 1);\n    }\n\n    private _generateSet = (\n        range: number = 1,\n        enableBoundaries: boolean = true\n    ): PaginationSetItem[] => {\n        const totalPages = this._pages.length;\n\n        if (!totalPages) {\n            return [];\n        }\n\n        let start = this.page - range;\n        let end = this.page + range;\n\n        if (end > totalPages) {\n            end = totalPages;\n            start = totalPages - range * 2;\n            start = start < 1 ? 1 : start;\n        }\n\n        if (start <= 1) {\n            start = 1;\n            end = Math.min(range * 2 + 1, totalPages);\n        }\n\n        const set = [];\n\n        const previous = {\n            type: 'previous',\n            value: <p-icon variant=\"chevron\" rotate={90} />,\n        };\n\n        const next = {\n            type: 'next',\n            value: <p-icon variant=\"chevron\" rotate={-90} />,\n        };\n\n        // Disable page range, display all the pages\n        if (range === null) {\n            const p = this._pages.map((p) => ({\n                type: 'page',\n                value: p,\n            }));\n\n            return enableBoundaries ? [previous, ...p, next] : p;\n        }\n\n        if (enableBoundaries) {\n            set.push(previous);\n        }\n\n        if (start <= 3) {\n            for (let i = 1; i < start; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'page',\n                value: 1,\n            });\n\n            set.push({\n                type: 'ellipsis',\n                value: 'ellipsis',\n            });\n        }\n\n        for (let i = start; i <= end; i++) {\n            set.push({\n                type: 'page',\n                value: this._pages[i - 1],\n            });\n        }\n\n        if (end >= totalPages - 2) {\n            for (let i = end + 1; i <= totalPages; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'ellipsis',\n            });\n\n            set.push({\n                type: 'page',\n                value: this._pages[this._pages.length - 1],\n            });\n        }\n\n        if (enableBoundaries) {\n            set.push(next);\n        }\n\n        return set;\n    };\n}\n",":host {\n  @apply h-8 w-8;\n  @apply flex justify-center items-center;\n  @apply font-semibold text-storm-medium text-sm;\n  @apply rounded;\n  @apply cursor-pointer;\n}\n\n:host(:hover),\n:host(:focus) {\n  @apply text-storm;\n}\n\n:host(.active) {\n  @apply text-indigo bg-indigo-light;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'p-pagination-item',\n  styleUrl: 'pagination-item.component.scss',\n  shadow: true,\n})\nexport class PaginationItem {\n  /**\n   * Wether the pagination item is active\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    return (\n      <Host class={`p-pagination-item ${this.active && 'active'}`}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-page-size-select.p-pagination.p-pagination-item.entry.js","mappings":"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","names":[],"sources":["./src/components/molecules/page-size-select/page-size-select.component.tsx","./src/components/molecules/pagination/pagination.component.scss?tag=p-pagination","./src/components/molecules/pagination/pagination.component.tsx","./src/components/atoms/pagination-item/pagination-item.component.scss?tag=p-pagination-item&encapsulation=shadow","./src/components/atoms/pagination-item/pagination-item.component.tsx"],"sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State\n} from '@stencil/core';\nimport {\n    formatTranslation,\n    getLocaleComponentStrings\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from './constants';\n\nexport type templateFunc = (value: number) => string;\n\n@Component({\n    tag: 'p-page-size-select',\n    shadow: true,\n})\nexport class PageSizeSelect {\n    private _defaultButtonTemplate: templateFunc = (size) =>\n        formatTranslation(this._locales.item, { size });\n    private _defaultItemTemplate: templateFunc = (size) =>\n        formatTranslation(this._locales.item, { size });\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) size: number = defaultSize;\n\n    /**\n     * The available sizes\n     */\n    @Prop() sizeOptions: number[] = defaultSizeOptions;\n\n    /**\n     * Event whenever the size changes\n     */\n    @Event({\n        bubbles: false\n    }) sizeChange: EventEmitter<number>;\n\n    /**\n     * Chevron position\n     */\n    @Prop() chevronPosition: 'start' | 'end' = 'start';\n\n    /**\n     * The size of the button\n     */\n    @Prop() buttonSize: 'small' | 'medium' = 'small';\n\n    /**\n     * The template for the data view\n     */\n    @Prop() buttonTemplate: templateFunc = this._defaultButtonTemplate;\n\n    /**\n     * The template for the data view\n     */\n    @Prop() itemTemplate: templateFunc = this._defaultItemTemplate;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hidden: boolean = false;\n\n    /**\n     * Locales used for this component\n     */\n    @State() private _locales: any = {};\n\n    componentWillLoad() {\n        this._setLocales();\n    }\n\n    render() {\n        return (\n            <Host class={`p-page-size-select ${this.hidden && 'hidden'}`}>\n                <p-dropdown\n                    placement=\"top-start\"\n                    chevronPosition={this.chevronPosition}\n                    chevronDirection=\"down\"\n                >\n                    <p-button\n                        variant=\"secondary\"\n                        slot=\"trigger\"\n                        size={this.buttonSize}\n                    >\n                        {this.buttonTemplate\n                            ? this.buttonTemplate(this.size)\n                            : this._defaultButtonTemplate(this.size)}\n                    </p-button>\n                    <slot slot=\"items\">\n                        {this.sizeOptions.map((option) => (\n                            <p-dropdown-menu-item\n                                active={option === this.size}\n                                onClick={() => this._changeSize(option)}\n                            >\n                                {this.itemTemplate\n                                    ? this.itemTemplate(option)\n                                    : this._defaultItemTemplate(option)}\n                            </p-dropdown-menu-item>\n                        ))}\n                    </slot>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('localeChanged', { target: 'body' })\n    private async _setLocales(): Promise<void> {\n        this._locales = await getLocaleComponentStrings(this._el);\n    }\n\n    private _changeSize(s?: number) {\n        if (!s) {\n            return;\n        }\n\n        this.size = s;\n        this.sizeChange.emit(this.size);\n    }\n}\n","p-pagination {\n  @apply flex;\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch\n} from '@stencil/core';\n\ntype PaginationSetItem = {\n    type: string;\n    value?: number | Element | JSX.Element | string;\n};\n\n@Component({\n    tag: 'p-pagination',\n    styleUrl: 'pagination.component.scss',\n})\nexport class Pagination {\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) page: number = 1;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) pageChange: EventEmitter<number>;\n\n    /**\n     * The amount of items per page\n     */\n    @Prop() pageSize: number = 12;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hideOnSinglePage: boolean = false;\n\n    /**\n     * The total amount of items\n     */\n    @Prop() total!: number;\n\n    private _pages: number[] = [];\n    private _set: PaginationSetItem[] = [];\n\n    componentWillRender() {\n        this._generate();\n    }\n\n    render() {\n        return (\n            <Host\n                class={`p-pagination ${\n                    this.hideOnSinglePage && this._set?.length === 3 && 'hidden'\n                }`}\n            >\n                {this._set?.map((p) => {\n                    if (p.type === 'previous' || p.type === 'next') {\n                        return (\n                            <p-pagination-item\n                                onClick={() =>\n                                    p.type === 'previous'\n                                        ? this._previousClick()\n                                        : this._nextClick()\n                                }\n                            >\n                                {p.value}\n                            </p-pagination-item>\n                        );\n                    }\n\n                    if (p.type === 'ellipsis') {\n                        return <p-pagination-item>...</p-pagination-item>;\n                    }\n\n                    return (\n                        <p-pagination-item\n                            active={p.value === this.page}\n                            onClick={() => this._pageClick(p.value as number)}\n                        >\n                            {p.value}\n                        </p-pagination-item>\n                    );\n                })}\n            </Host>\n        );\n    }\n\n    @Watch('page')\n    @Watch('pageSize')\n    @Watch('total')\n    protected pageChangeHandler() {\n        this._generate();\n    }\n\n    private _generate() {\n        this._pages = this._generatePages();\n        this._set = this._generateSet();\n\n        if (this.page > this._pages?.length) {\n            this._changePage(this._pages.length);\n        }\n    }\n\n    private _changePage(p?: number) {\n        if (!p) {\n            return;\n        }\n\n        this.page = p;\n        this.pageChange.emit(this.page);\n    }\n\n    private _previousClick() {\n        const previousPage = this.page - 1;\n        if (previousPage < this._pages[0]) {\n            return;\n        }\n\n        this._changePage(previousPage);\n    }\n\n    private _nextClick = () => {\n        const nextPage = this.page + 1;\n        if (nextPage > this._pages[this._pages.length - 1]) {\n            return;\n        }\n\n        this._changePage(nextPage);\n    };\n\n    private _pageClick = (p?: number) => this._changePage(p);\n\n    private _generatePages() {\n        if (!this.total || !this.pageSize) {\n            return [];\n        }\n\n        const pages = Math.ceil(this.total / this.pageSize);\n        return new Array(pages).fill(undefined).map((_, i) => i + 1);\n    }\n\n    private _generateSet = (\n        range: number = 1,\n        enableBoundaries: boolean = true\n    ): PaginationSetItem[] => {\n        const totalPages = this._pages.length;\n\n        if (!totalPages) {\n            return [];\n        }\n\n        let start = this.page - range;\n        let end = this.page + range;\n\n        if (end > totalPages) {\n            end = totalPages;\n            start = totalPages - range * 2;\n            start = start < 1 ? 1 : start;\n        }\n\n        if (start <= 1) {\n            start = 1;\n            end = Math.min(range * 2 + 1, totalPages);\n        }\n\n        const set = [];\n\n        const previous = {\n            type: 'previous',\n            value: <p-icon variant=\"chevron\" rotate={90} />,\n        };\n\n        const next = {\n            type: 'next',\n            value: <p-icon variant=\"chevron\" rotate={-90} />,\n        };\n\n        // Disable page range, display all the pages\n        if (range === null) {\n            const p = this._pages.map((p) => ({\n                type: 'page',\n                value: p,\n            }));\n\n            return enableBoundaries ? [previous, ...p, next] : p;\n        }\n\n        if (enableBoundaries) {\n            set.push(previous);\n        }\n\n        if (start <= 3) {\n            for (let i = 1; i < start; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'page',\n                value: 1,\n            });\n\n            set.push({\n                type: 'ellipsis',\n                value: 'ellipsis',\n            });\n        }\n\n        for (let i = start; i <= end; i++) {\n            set.push({\n                type: 'page',\n                value: this._pages[i - 1],\n            });\n        }\n\n        if (end >= totalPages - 2) {\n            for (let i = end + 1; i <= totalPages; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'ellipsis',\n            });\n\n            set.push({\n                type: 'page',\n                value: this._pages[this._pages.length - 1],\n            });\n        }\n\n        if (enableBoundaries) {\n            set.push(next);\n        }\n\n        return set;\n    };\n}\n",":host {\n  @apply h-8 w-8;\n  @apply flex justify-center items-center;\n  @apply font-semibold text-storm-medium text-sm;\n  @apply rounded;\n  @apply cursor-pointer;\n}\n\n:host(:hover),\n:host(:focus) {\n  @apply text-storm;\n}\n\n:host(.active) {\n  @apply text-indigo bg-indigo-light;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'p-pagination-item',\n  styleUrl: 'pagination-item.component.scss',\n  shadow: true,\n})\nexport class PaginationItem {\n  /**\n   * Wether the pagination item is active\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    return (\n      <Host class={`p-pagination-item ${this.active && 'active'}`}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/p-select.entry.js

@@ -1,14 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2c1bdb40.js';
 import { c as childOf } from './child-of-90a8c4b5.js';
 
-const selectComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;width:100%}p-select input.read-only{text-overflow:ellipsis}.static{position:static!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}.justify-center{justify-content:center!important}";
+const selectComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;width:100%}p-select input.read-only{text-overflow:ellipsis}.static{position:static!important}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}.justify-center{justify-content:center!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
 
 const Select = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.queryChange = createEvent(this, "queryChange", 7);
-    this.valueChange = createEvent(this, "valueChange", 7);
-    this.dropdownShown = createEvent(this, "dropdownShown", 7);
+    this.queryChange = createEvent(this, "queryChange", 3);
+    this.valueChange = createEvent(this, "valueChange", 3);
+    this.dropdownShown = createEvent(this, "dropdownShown", 3);
     this.items = undefined;
     this.icon = undefined;
     this.query = undefined;

package/dist/esm/p-select.entry.js.map

@@ -1 +1 @@
-{"file":"p-select.entry.js","mappings":"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","names":[],"sources":["./src/components/molecules/select/select.component.scss?tag=p-select","./src/components/molecules/select/select.component.tsx"],"sourcesContent":["p-select {\n    @apply flex w-full flex-col;\n\n    input.read-only {\n        @apply text-ellipsis;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-select',\n    styleUrl: 'select.component.scss',\n    shadow: false,\n})\nexport class Select {\n    /**\n     * The items to show in the dropdown\n     */\n    @Prop() items: string | any[];\n\n    /**\n     * Icon of the select box\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * The current query\n     */\n    @Prop() query: string;\n\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The placeholder of the input when auto completing\n     */\n    @Prop() autocompletePlaceholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() displayKey: string = 'text';\n\n    /**\n     * The key of the object to return\n     */\n    @Prop() valueKey: string;\n\n    /**\n     * The key to identify an object\n     */\n    @Prop() identifierKey: string;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() queryKey?: string;\n\n    /**\n     * Wether to automatically select the first item\n     */\n    @Prop() autoSelectFirst: boolean = true;\n\n    /**\n     * Wether to show the chevron or not\n     */\n    @Prop() showChevron: boolean = true;\n\n    /**\n     * The maximum amount of items to display\n     */\n    @Prop() maxDisplayedItems: number = 10;\n\n    /**\n     * Wether to enable autocomplete\n     */\n    @Prop() enableAutocomplete: boolean = true;\n\n    /**\n     * Wether to keep the query or not\n     */\n    @Prop() keepQuery: boolean = true;\n\n    /**\n     * Wether the input uses async filtering\n     */\n    @Prop() asyncFilter: boolean = false;\n\n    /**\n     * Wether to show loading items\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Event when the query of the autocomplete changes\n     */\n    @Event() queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the value changes\n     */\n    @Event() valueChange: EventEmitter<any>;\n\n    /**\n     * Event when the dropdown shows\n     */\n    @Event() dropdownShown: EventEmitter<any>;\n\n    /**\n     * The size of the input group used by the select\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the select\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the select\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop() helper: string;\n\n    /**\n     * Wether the field is required\n     */\n    @Prop({ reflect: true }) required: boolean;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the select\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _selectedItem: any = null;\n\n    @State() private _isAutoCompleting: boolean = false;\n\n    get _items() {\n        if (!this.items || this.loading) {\n            return [];\n        }\n\n        let items =\n            typeof this.items === 'string'\n                ? JSON.parse(this.items)\n                : this.items;\n\n        if (typeof items?.[0] === 'string') {\n            this.displayKey = 'text';\n            this.valueKey = 'value';\n\n            items = items.map((str) => ({\n                value: str,\n                text: str,\n            }));\n        }\n\n        if (\n            this._isAutoCompleting &&\n            this.query?.length &&\n            this.query !== this._selectedItem?.[this.displayKey] &&\n            !this.asyncFilter\n        ) {\n            items = items.filter((item) => {\n                if (this.queryKey) {\n                    return this._checkvalue(this.queryKey, item);\n                }\n\n                return (\n                    this._checkvalue(this._identifierKey, item) ||\n                    this._checkvalue(this.displayKey, item)\n                );\n            });\n        }\n\n        return items?.slice(0, this.maxDisplayedItems);\n    }\n\n    get _displayValue() {\n        if (this._isAutoCompleting) {\n            return this.query;\n        }\n\n        return this._selectedItem?.[this.displayKey];\n    }\n\n    get _placeholder() {\n        return this._isAutoCompleting && this.autocompletePlaceholder?.length\n            ? this.autocompletePlaceholder\n            : this.placeholder;\n    }\n\n    get _identifierKey() {\n        return this.identifierKey ?? this.valueKey ?? 'value';\n    }\n\n    componentDidLoad() {\n        if (!this.valueKey && !this.identifierKey) {\n            throw new Error('You must provide a valueKey or identifierKey');\n        }\n\n        if (this.value) {\n            this._valueChange();\n            return;\n        }\n\n        this.itemChanges();\n    }\n\n    render() {\n        return (\n            <Host class=\"p-select\">\n                {this._showDropdown && (!!this._items.length || this.loading)}\n                {this._isAutoCompleting}\n                <p-dropdown\n                    disableTriggerClick={true}\n                    calculateWidth={true}\n                    insideClick={true}\n                    show={\n                        this._showDropdown &&\n                        (!!this._items.length || this.loading)\n                    }\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon={this.icon}\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        required={this.required}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                        focusMethod={\n                            this.enableAutocomplete ? 'focus' : 'click'\n                        }\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this._placeholder}\n                            value={this._displayValue}\n                            class={`p-input cursor-pointer ${\n                                !this._isAutoCompleting && 'read-only'\n                            }`}\n                            onFocus={(ev) => this._onFocus(ev)}\n                            onMouseDown={(ev) => this._onMouseDown(ev)}\n                            onClick={() => this._onClick()}\n                            onInput={(ev) => this._onChange(ev)}\n                        />\n\n                        {this.showChevron && (\n                            <p-icon variant=\"chevron\" slot=\"suffix\" />\n                        )}\n                    </p-input-group>\n                    <div slot=\"items\">\n                        {this.loading\n                            ? this._getLoadingItems()\n                            : this._getItems()}\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n        this._isAutoCompleting = false;\n    }\n\n    @Watch('value')\n    private _valueChange() {\n        this._preselectItem();\n    }\n\n    @Watch('items')\n    public itemChanges() {\n        this._preselectItem();\n    }\n\n    @Watch('_showDropdown')\n    public _showDropdownChanges() {\n        this.dropdownShown.emit({\n            value: this._showDropdown,\n            query: this.query,\n        });\n    }\n\n    private _preselectItem() {\n        if (this._isAutoCompleting && this.query?.length) {\n            return;\n        }\n\n        let value = this.value;\n\n        if (!this._selectedItem && !value && this.autoSelectFirst) {\n            value = this._items[0];\n        }\n\n        // if (!value) {\n        //     this._selectValue(null);\n        //     return;\n        // }\n\n        const identifier =\n            typeof value === 'object' && value !== null\n                ? value[this._identifierKey]\n                : value;\n        const parsedValue =\n            typeof identifier === 'string' || typeof identifier === 'number'\n                ? identifier\n                : JSON.stringify(identifier);\n\n        const currentValue = this._selectedItem\n            ? this._selectedItem?.[this._identifierKey]\n            : null;\n        const currentParsedValue =\n            typeof currentValue === 'string' || typeof currentValue === 'number'\n                ? currentValue\n                : JSON.stringify(currentValue);\n\n        if (this._selectedItem && currentParsedValue === parsedValue) {\n            return;\n        }\n\n        if (!this._items?.length && value) {\n            this._selectValue(value);\n            return;\n        }\n\n        const item = this._items.find((i) => {\n            const itemIdentifier = i?.[this._identifierKey];\n            const parsedItemIdentifier =\n                typeof itemIdentifier === 'string' ||\n                typeof itemIdentifier === 'number'\n                    ? itemIdentifier\n                    : JSON.stringify(itemIdentifier);\n\n            return parsedItemIdentifier === parsedValue;\n        });\n\n        this._selectValue(!!item ? item : value);\n    }\n\n    private _selectValue(item) {\n        this._selectedItem = item;\n        const value =\n            !!this.valueKey && this.valueKey !== 'false' && item !== null\n                ? item?.[this.valueKey]\n                : item;\n\n        this.query = this.keepQuery ? item?.[this.displayKey] : null;\n        this.value = value;\n        this.valueChange.emit(value);\n\n        this._onBlur(true);\n    }\n\n    private _onFocus(ev) {\n        if (!this.enableAutocomplete) {\n            ev.preventDefault();\n            ev.stopPropogation();\n\n            if (!this._showDropdown) {\n                this._showDropdown = true;\n            }\n            return;\n        }\n\n        this._showDropdown = true;\n        this._isAutoCompleting = true;\n    }\n\n    private _onMouseDown(ev) {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        ev.preventDefault();\n    }\n\n    private _onClick() {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        this._showDropdown = !this._showDropdown;\n    }\n\n    private _onBlur(force = false) {\n        if (!this.enableAutocomplete && !force) {\n            return;\n        }\n\n        this._isAutoCompleting = false;\n        this._showDropdown = false;\n    }\n\n    private _onChange(ev) {\n        if (!this.enableAutocomplete) {\n            return;\n        }\n\n        if (!this._isAutoCompleting) {\n            this._isAutoCompleting = true;\n            this._showDropdown = true;\n        }\n\n        this.query = ev.target.value;\n        this.queryChange.emit(ev.target.value);\n    }\n\n    private _checkvalue(key, item) {\n        return (\n            item?.[key]\n                ?.toString()\n                ?.toLowerCase()\n                .indexOf(this.query?.toLowerCase()) >= 0\n        );\n    }\n\n    private _getItems() {\n        return this._items.map((item) => (\n            <p-dropdown-menu-item\n                onClick={() => this._selectValue(item)}\n                active={\n                    item[this._identifierKey] ===\n                    this._selectedItem?.[this._identifierKey]\n                }\n            >\n                {item[this.displayKey]}\n            </p-dropdown-menu-item>\n        ));\n    }\n\n    private _getLoadingItems() {\n        return [0, 0, 0].map(() => (\n            <p-dropdown-menu-item enableHover={false}>\n                <p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n            </p-dropdown-menu-item>\n        ));\n    }\n}\n"],"version":3}
+{"file":"p-select.entry.js","mappings":"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","names":[],"sources":["./src/components/molecules/select/select.component.scss?tag=p-select","./src/components/molecules/select/select.component.tsx"],"sourcesContent":["p-select {\n    @apply flex w-full flex-col;\n\n    input.read-only {\n        @apply text-ellipsis;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n    tag: 'p-select',\n    styleUrl: 'select.component.scss',\n    shadow: false,\n})\nexport class Select {\n    /**\n     * The items to show in the dropdown\n     */\n    @Prop() items: string | any[];\n\n    /**\n     * Icon of the select box\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * The current query\n     */\n    @Prop() query: string;\n\n    /**\n     * The placeholder of the input\n     */\n    @Prop() placeholder: string;\n\n    /**\n     * The placeholder of the input when auto completing\n     */\n    @Prop() autocompletePlaceholder: string;\n\n    /**\n     * The current value\n     */\n    @Prop() value: any;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() displayKey: string = 'text';\n\n    /**\n     * The key of the object to return\n     */\n    @Prop() valueKey: string;\n\n    /**\n     * The key to identify an object\n     */\n    @Prop() identifierKey: string;\n\n    /**\n     * The key of the object to display\n     */\n    @Prop() queryKey?: string;\n\n    /**\n     * Wether to automatically select the first item\n     */\n    @Prop() autoSelectFirst: boolean = true;\n\n    /**\n     * Wether to show the chevron or not\n     */\n    @Prop() showChevron: boolean = true;\n\n    /**\n     * The maximum amount of items to display\n     */\n    @Prop() maxDisplayedItems: number = 10;\n\n    /**\n     * Wether to enable autocomplete\n     */\n    @Prop() enableAutocomplete: boolean = true;\n\n    /**\n     * Wether to keep the query or not\n     */\n    @Prop() keepQuery: boolean = true;\n\n    /**\n     * Wether the input uses async filtering\n     */\n    @Prop() asyncFilter: boolean = false;\n\n    /**\n     * Wether to show loading items\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Event when the query of the autocomplete changes\n     */\n    @Event({\n        bubbles: false\n    }) queryChange: EventEmitter<string>;\n\n    /**\n     * Event when the value changes\n     */\n    @Event({\n        bubbles: false\n    }) valueChange: EventEmitter<any>;\n\n    /**\n     * Event when the dropdown shows\n     */\n    @Event({\n        bubbles: false\n    }) dropdownShown: EventEmitter<any>;\n\n    /**\n     * The size of the input group used by the select\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * The prefix of the input group used by the select\n     */\n    @Prop() prefix: string;\n\n    /**\n     * The label of the input group used by the select\n     */\n    @Prop() label: string;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop() helper: string;\n\n    /**\n     * Wether the field is required\n     */\n    @Prop({ reflect: true }) required: boolean;\n\n    /**\n     * The helper of the input group used by the select\n     */\n    @Prop({ reflect: true }) error: string;\n\n    /**\n     * Wether the input group is disabled used by the select\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    @State() private _showDropdown: any = false;\n    @State() private _selectedItem: any = null;\n\n    @State() private _isAutoCompleting: boolean = false;\n\n    get _items() {\n        if (!this.items || this.loading) {\n            return [];\n        }\n\n        let items =\n            typeof this.items === 'string'\n                ? JSON.parse(this.items)\n                : this.items;\n\n        if (typeof items?.[0] === 'string') {\n            this.displayKey = 'text';\n            this.valueKey = 'value';\n\n            items = items.map((str) => ({\n                value: str,\n                text: str,\n            }));\n        }\n\n        if (\n            this._isAutoCompleting &&\n            this.query?.length &&\n            this.query !== this._selectedItem?.[this.displayKey] &&\n            !this.asyncFilter\n        ) {\n            items = items.filter((item) => {\n                if (this.queryKey) {\n                    return this._checkvalue(this.queryKey, item);\n                }\n\n                return (\n                    this._checkvalue(this._identifierKey, item) ||\n                    this._checkvalue(this.displayKey, item)\n                );\n            });\n        }\n\n        return items?.slice(0, this.maxDisplayedItems);\n    }\n\n    get _displayValue() {\n        if (this._isAutoCompleting) {\n            return this.query;\n        }\n\n        return this._selectedItem?.[this.displayKey];\n    }\n\n    get _placeholder() {\n        return this._isAutoCompleting && this.autocompletePlaceholder?.length\n            ? this.autocompletePlaceholder\n            : this.placeholder;\n    }\n\n    get _identifierKey() {\n        return this.identifierKey ?? this.valueKey ?? 'value';\n    }\n\n    componentDidLoad() {\n        if (!this.valueKey && !this.identifierKey) {\n            throw new Error('You must provide a valueKey or identifierKey');\n        }\n\n        if (this.value) {\n            this._valueChange();\n            return;\n        }\n\n        this.itemChanges();\n    }\n\n    render() {\n        return (\n            <Host class=\"p-select\">\n                {this._showDropdown && (!!this._items.length || this.loading)}\n                {this._isAutoCompleting}\n                <p-dropdown\n                    disableTriggerClick={true}\n                    calculateWidth={true}\n                    insideClick={true}\n                    show={\n                        this._showDropdown &&\n                        (!!this._items.length || this.loading)\n                    }\n                >\n                    <p-input-group\n                        slot=\"trigger\"\n                        icon={this.icon}\n                        size={this.size}\n                        prefix={this.prefix}\n                        label={this.label}\n                        helper={this.helper}\n                        required={this.required}\n                        error={this.error}\n                        disabled={this.disabled}\n                        focused={this._showDropdown}\n                        focusMethod={\n                            this.enableAutocomplete ? 'focus' : 'click'\n                        }\n                    >\n                        <input\n                            slot=\"input\"\n                            type=\"text\"\n                            placeholder={this._placeholder}\n                            value={this._displayValue}\n                            class={`p-input cursor-pointer ${\n                                !this._isAutoCompleting && 'read-only'\n                            }`}\n                            onFocus={(ev) => this._onFocus(ev)}\n                            onMouseDown={(ev) => this._onMouseDown(ev)}\n                            onClick={() => this._onClick()}\n                            onInput={(ev) => this._onChange(ev)}\n                        />\n\n                        {this.showChevron && (\n                            <p-icon variant=\"chevron\" slot=\"suffix\" />\n                        )}\n                    </p-input-group>\n                    <div slot=\"items\">\n                        {this.loading\n                            ? this._getLoadingItems()\n                            : this._getItems()}\n                    </div>\n                </p-dropdown>\n            </Host>\n        );\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler({ target }) {\n        if (!this._showDropdown || childOf(target, this._el)) {\n            return;\n        }\n\n        this._showDropdown = false;\n        this._isAutoCompleting = false;\n    }\n\n    @Watch('value')\n    private _valueChange() {\n        this._preselectItem();\n    }\n\n    @Watch('items')\n    public itemChanges() {\n        this._preselectItem();\n    }\n\n    @Watch('_showDropdown')\n    public _showDropdownChanges() {\n        this.dropdownShown.emit({\n            value: this._showDropdown,\n            query: this.query,\n        });\n    }\n\n    private _preselectItem() {\n        if (this._isAutoCompleting && this.query?.length) {\n            return;\n        }\n\n        let value = this.value;\n\n        if (!this._selectedItem && !value && this.autoSelectFirst) {\n            value = this._items[0];\n        }\n\n        // if (!value) {\n        //     this._selectValue(null);\n        //     return;\n        // }\n\n        const identifier =\n            typeof value === 'object' && value !== null\n                ? value[this._identifierKey]\n                : value;\n        const parsedValue =\n            typeof identifier === 'string' || typeof identifier === 'number'\n                ? identifier\n                : JSON.stringify(identifier);\n\n        const currentValue = this._selectedItem\n            ? this._selectedItem?.[this._identifierKey]\n            : null;\n        const currentParsedValue =\n            typeof currentValue === 'string' || typeof currentValue === 'number'\n                ? currentValue\n                : JSON.stringify(currentValue);\n\n        if (this._selectedItem && currentParsedValue === parsedValue) {\n            return;\n        }\n\n        if (!this._items?.length && value) {\n            this._selectValue(value);\n            return;\n        }\n\n        const item = this._items.find((i) => {\n            const itemIdentifier = i?.[this._identifierKey];\n            const parsedItemIdentifier =\n                typeof itemIdentifier === 'string' ||\n                typeof itemIdentifier === 'number'\n                    ? itemIdentifier\n                    : JSON.stringify(itemIdentifier);\n\n            return parsedItemIdentifier === parsedValue;\n        });\n\n        this._selectValue(!!item ? item : value);\n    }\n\n    private _selectValue(item) {\n        this._selectedItem = item;\n        const value =\n            !!this.valueKey && this.valueKey !== 'false' && item !== null\n                ? item?.[this.valueKey]\n                : item;\n\n        this.query = this.keepQuery ? item?.[this.displayKey] : null;\n        this.value = value;\n        this.valueChange.emit(value);\n\n        this._onBlur(true);\n    }\n\n    private _onFocus(ev) {\n        if (!this.enableAutocomplete) {\n            ev.preventDefault();\n            ev.stopPropogation();\n\n            if (!this._showDropdown) {\n                this._showDropdown = true;\n            }\n            return;\n        }\n\n        this._showDropdown = true;\n        this._isAutoCompleting = true;\n    }\n\n    private _onMouseDown(ev) {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        ev.preventDefault();\n    }\n\n    private _onClick() {\n        if (this.enableAutocomplete) {\n            return;\n        }\n\n        this._showDropdown = !this._showDropdown;\n    }\n\n    private _onBlur(force = false) {\n        if (!this.enableAutocomplete && !force) {\n            return;\n        }\n\n        this._isAutoCompleting = false;\n        this._showDropdown = false;\n    }\n\n    private _onChange(ev) {\n        if (!this.enableAutocomplete) {\n            return;\n        }\n\n        if (!this._isAutoCompleting) {\n            this._isAutoCompleting = true;\n            this._showDropdown = true;\n        }\n\n        this.query = ev.target.value;\n        this.queryChange.emit(ev.target.value);\n    }\n\n    private _checkvalue(key, item) {\n        return (\n            item?.[key]\n                ?.toString()\n                ?.toLowerCase()\n                .indexOf(this.query?.toLowerCase()) >= 0\n        );\n    }\n\n    private _getItems() {\n        return this._items.map((item) => (\n            <p-dropdown-menu-item\n                onClick={() => this._selectValue(item)}\n                active={\n                    item[this._identifierKey] ===\n                    this._selectedItem?.[this._identifierKey]\n                }\n            >\n                {item[this.displayKey]}\n            </p-dropdown-menu-item>\n        ));\n    }\n\n    private _getLoadingItems() {\n        return [0, 0, 0].map(() => (\n            <p-dropdown-menu-item enableHover={false}>\n                <p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n            </p-dropdown-menu-item>\n        ));\n    }\n}\n"],"version":3}

package/dist/esm/p-table.entry.js

@@ -7,19 +7,19 @@ const tableComponentCss = ".flex{display:flex!important}.flex-shrink{flex-shrink
 const Table = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.selectedRowsChange = createEvent(this, "selectedRowsChange", 7);
-    this.rowClick = createEvent(this, "rowClick", 7);
-    this.rowSelected = createEvent(this, "rowSelected", 7);
-    this.rowDeselected = createEvent(this, "rowDeselected", 7);
-    this.hasRendered = createEvent(this, "hasRendered", 7);
-    this.quickFilter = createEvent(this, "quickFilter", 7);
-    this.queryChange = createEvent(this, "queryChange", 7);
-    this.filter = createEvent(this, "filter", 7);
-    this.edit = createEvent(this, "edit", 7);
-    this.pageChange = createEvent(this, "pageChange", 7);
-    this.pageSizeChange = createEvent(this, "pageSizeChange", 7);
-    this.export = createEvent(this, "export", 7);
-    this.emptyStateActionClick = createEvent(this, "emptyStateActionClick", 7);
+    this.selectedRowsChange = createEvent(this, "selectedRowsChange", 3);
+    this.rowClick = createEvent(this, "rowClick", 3);
+    this.rowSelected = createEvent(this, "rowSelected", 3);
+    this.rowDeselected = createEvent(this, "rowDeselected", 3);
+    this.hasRendered = createEvent(this, "hasRendered", 3);
+    this.quickFilter = createEvent(this, "quickFilter", 3);
+    this.queryChange = createEvent(this, "queryChange", 3);
+    this.filter = createEvent(this, "filter", 3);
+    this.edit = createEvent(this, "edit", 3);
+    this.pageChange = createEvent(this, "pageChange", 3);
+    this.pageSizeChange = createEvent(this, "pageSizeChange", 3);
+    this.export = createEvent(this, "export", 3);
+    this.emptyStateActionClick = createEvent(this, "emptyStateActionClick", 3);
     this._ctrlDown = false;
     this._hasCustomFilterSlot = false;
     this.items = undefined;