npm - @paperless/core - Versions diffs - 0.1.0-alpha.43 → 0.1.0-alpha.430 - Mend

@paperless/core 0.1.0-alpha.43 → 0.1.0-alpha.430

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1091) hide show

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

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-94339e77.js';
+const modalBodyComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!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}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!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}*{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}}@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}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}";
+const ModalBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = 'default';
+    this.rounded = false;
+  }
+  render() {
+    return (h(Host, { class: `p-modal-body variant-${this.variant} ${this.rounded && 'is-rounded'}` }, h("slot", null)));
+  }
+};
+ModalBody.style = modalBodyComponentCss;
+const modalContainerComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!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}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!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}.px-2{padding-left:.5rem!important;padding-right:.5rem!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}.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}}@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}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}";
+// $modal-xs: 20rem;
+// $modal-sm: 33.5rem;
+// $modal-md: 38rem;
+// $modal-lg: 47.5rem;
+// $modal-xl: 57.5rem;
+const modalSizes = {
+  xs: 'tablet:w-80',
+  sm: 'tablet:w-[33.5rem]',
+  md: 'tablet:w-[38rem]',
+  lg: 'tablet:w-[47.5rem]',
+  xl: 'tablet:w-[57.5rem]',
+};
+const ModalContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'md';
+    this.closing = false;
+  }
+  render() {
+    const sizeClass = modalSizes[this.size];
+    return (h(Host, { class: `p-modal-container ${this.closing && 'closing'} ${sizeClass}` }, h("slot", null)));
+  }
+};
+ModalContainer.style = modalContainerComponentCss;
+const modalFooterComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!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}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.pb-6{padding-bottom:1.5rem!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}*{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}}@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}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}";
+const ModalFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "p-modal-footer" }, h("p-divider", { class: "mb-6 mt-0 hidden desktop-xs:flex" }), h("slot", null)));
+  }
+};
+ModalFooter.style = modalFooterComponentCss;
+const modalHeaderComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!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}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.rounded{border-radius:.25rem!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!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-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}.desktop-xs\\:text-3xl{font-size:1.875rem!important;line-height:2.25rem!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}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}";
+const ModalHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+    this.showClose = true;
+  }
+  render() {
+    return (h(Host, { class: "p-modal-header" }, h("span", null, h("slot", null)), this.showClose && (h("p-button", { variant: "secondary", icon: "negative", iconOnly: true, onClick: (ev) => this.close.emit(ev), size: "small" }))));
+  }
+};
+ModalHeader.style = modalHeaderComponentCss;
+export { ModalBody as p_modal_body, ModalContainer as p_modal_container, ModalFooter as p_modal_footer, ModalHeader as p_modal_header };
+//# sourceMappingURL=p-modal-body_4.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,09LAA09L;;MCO3+L,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,02OAA02O;;ACE74O;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,ygLAAygL;;MCO5hL,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,81LAA81L;;MCOj3L,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}

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

@@ -1,35 +1,57 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-fff70567.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-94339e77.js';
 const Modal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * The size of the modal container
-     */
+    this.closeClicked = createEvent(this, "closeClicked", 7);
+    this.closed = createEvent(this, "closed", 7);
+    this._hasFooterSlot = false;
+    this._hasHeaderSlot = false;
     this.size = 'md';
-    /**
-     * The variant of the modal body
-     */
     this.variant = 'default';
-    /**
-     * Wether to show the modal or not
-     */
+    this.header = undefined;
     this.show = false;
-    this._hasFooterSlot = false;
+    this.applyBlur = false;
+    this.showClose = true;
+    this.showMobileFooter = false;
+    this.backdropClickClose = true;
+    this.scrollLock = true;
+    this._closing = false;
   }
   componentWillLoad() {
-    this._hasFooterSlot = !!this._el.querySelector('[slot="footer"]');
+    this._hasFooterSlot = !!this._el.querySelector(':scope > [slot="footer"]');
+    this._hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
   }
   render() {
+    var _a;
     if (!this.show) {
       return;
     }
-    const titleContent = h("slot", { name: "title" });
+    const headerContent = h("slot", { name: "header" });
     const bodyContent = h("slot", { name: "content" });
     const footerContent = h("slot", { name: "footer" });
-    return (h(Host, { class: "p-modal" }, h("p-modal-backdrop", null, h("p-modal-container", { size: this.size }, h("p-modal-header", null, this.title ? this.title : titleContent), h("p-modal-body", { variant: this.variant }, bodyContent), this._hasFooterSlot && (h("p-modal-footer", null, footerContent))))));
+    return (h(Host, { class: "p-modal" }, h("p-backdrop", { applyBlur: this.applyBlur, onClicked: (ev) => this._backdropClick(ev.detail), closing: this._closing, scrollLock: this.scrollLock }, h("p-modal-container", { size: this.size, closing: this._closing }, (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (h("p-modal-header", { showClose: this.showClose, onClose: (ev) => this.close(ev.detail) }, this._hasHeaderSlot
+      ? headerContent
+      : this.header)), h("p-modal-body", { variant: this.variant, rounded: !this._hasFooterSlot }, bodyContent), this._hasFooterSlot && (h("p-modal-footer", null, footerContent))))));
+  }
+  _backdropClick(ev) {
+    if (!this.backdropClickClose) {
+      return;
+    }
+    this.close(ev);
+  }
+  close(ev) {
+    this.closeClicked.emit(ev);
+    this._closing = true;
+    setTimeout(() => {
+      this.show = false;
+      this._closing = false;
+      this.closed.emit();
+    }, 550);
   }
   get _el() { return getElement(this); }
 };
 export { Modal as p_modal };
+//# sourceMappingURL=p-modal.entry.js.map

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

@@ -0,0 +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}

package/dist/esm/p-navbar.entry.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host } from './index-94339e77.js';
+const navbarComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar{z-index:300!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mt-auto{margin-top:auto!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.-translate-x-full{--tw-translate-x:-100%!important}.-rotate-0,.-translate-x-full{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}.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,.scale-x-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-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.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}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) 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}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!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}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:100%}@media (min-width:64rem){:host{width:15rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;--tw-translate-x:-100%;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;gap:1.5rem;height:100vh;left:0;padding-bottom:1rem;padding-top:calc(env(safe-area-inset-top, 0) + 1rem);position:fixed;top: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));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;will-change:transform;z-index:300}@media (min-width:64rem){:host .sidebar{--tw-translate-x:0px;height:100%;position:relative;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));width:100%}}:host .sidebar .company,:host .sidebar .content,:host .sidebar .header,:host .sidebar .user{padding-left:1rem;padding-right:1rem}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;width:100%}@media (min-width:64rem){:host .sidebar .header{display:none}}:host .sidebar .content{overflow-y:auto;scrollbar-color:#528afa #dae6f0;scrollbar-width:thin}:host .sidebar .content::-webkit-scrollbar{width:.25rem}:host .sidebar .content::-webkit-scrollbar-track{background:#dae6f0}:host .sidebar .content::-webkit-scrollbar-thumb{background:#528afa}:host .sidebar .content::-webkit-scrollbar-thumb:hover{background:#528afa}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:64rem){:host .sidebar .user{display:flex}}:host .sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;width:100%}@media (min-width:64rem){:host .top-bar{display:none}}:host p-backdrop{display:none}:host p-backdrop.show{display:block}@media (min-width:64rem){.desktop-xs\\:relative{position:relative!important}.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:h-full{height:100%!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip,.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}";
+const Navbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeText = 'Close';
+    this.menuText = 'Menu';
+    this._showMenu = false;
+  }
+  render() {
+    return (h(Host, { class: "p-navbar" }, h("p-backdrop", { applyBlur: true, class: `z-navbar-backdrop desktop-xs:hidden ${this._showMenu && 'show'}`, onClicked: () => (this._showMenu = false) }), h("div", { class: `sidebar ${this._showMenu && 'show'}` }, h("div", { class: "header" }, h("p", { class: "text-xl m-0 font-semibold text-storm-dark" }, this.menuText), h("p-button", { variant: "secondary", icon: "negative", iconPosition: "end", size: "small", onClick: () => (this._showMenu = false) }, this.closeText)), h("div", { class: "company" }, h("slot", { name: "company" })), h("div", { class: "content" }, h("slot", { name: "content" })), h("div", { class: "user" }, h("slot", { name: "user" }))), h("div", { class: "top-bar" }, h("p-button", { variant: "secondary", icon: "menu", size: "small", onClick: () => (this._showMenu = true) }, this.menuText), h("slot", { name: "topbar" }))));
+  }
+  handleCloseNavbar() {
+    this._showMenu = false;
+  }
+  handleOpenNavbar() {
+    this._showMenu = true;
+  }
+};
+Navbar.style = navbarComponentCss;
+export { Navbar as p_navbar };
+//# sourceMappingURL=p-navbar.entry.js.map

package/dist/esm/p-navbar.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-navbar.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4mRAA4mR;;MCO1nR,MAAM;;;qBAIK,OAAO;oBAKR,MAAM;qBAEI,KAAK;;EAElC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IAClB,kBACI,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,uCACH,IAAI,CAAC,SAAS,IAAI,MACtB,EAAE,EACF,SAAS,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAC/B,EACd,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,IAC7C,WAAK,KAAK,EAAC,QAAQ,IACf,SAAG,KAAK,EAAC,2CAA2C,IAC/C,IAAI,CAAC,QAAQ,CACd,EAEJ,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAEtC,IAAI,CAAC,SAAS,CACR,CACT,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EAEN,WAAK,KAAK,EAAC,MAAM,IACb,YAAM,IAAI,EAAC,MAAM,GAAG,CAClB,CACJ,EAEN,WAAK,KAAK,EAAC,SAAS,IAChB,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAErC,IAAI,CAAC,QAAQ,CACP,EAEX,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACH,EACT;GACL;EAGD,iBAAiB;IACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GAC1B;EAGD,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACzB;;;;;;","names":[],"sources":["./src/components/organisms/navbar/navbar.component.scss?tag=p-navbar&encapsulation=shadow","./src/components/organisms/navbar/navbar.component.tsx"],"sourcesContent":["@import '../../../style/mixins';\n\n:host {\n @apply w-full max-h-screen-safe;\n @apply desktop-xs:w-60;\n\n .sidebar,\n .sidebar .company,\n .sidebar .content,\n .sidebar .user,\n .userbar {\n @apply flex w-full flex-col;\n }\n\n .sidebar,\n .top-bar {\n @apply bg-white;\n @apply border-0 border-solid border-mystic-dark #{!important};\n }\n\n .sidebar {\n @apply fixed top-0 left-0 z-navbar h-screen w-60 bg-white;\n @apply desktop-xs:relative desktop-xs:h-full desktop-xs:w-full;\n @apply gap-6;\n\n @apply will-change-transform;\n @apply -translate-x-full transform-gpu desktop-xs:translate-x-0;\n\n @apply py-4;\n\n padding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n @apply border-r #{!important};\n\n @apply transition-all;\n\n .company,\n .content,\n .user,\n .header {\n @apply px-4;\n }\n\n .header {\n @apply flex w-full items-center justify-between;\n @apply desktop-xs:hidden;\n }\n\n .content {\n @apply overflow-y-auto;\n\n @include scrollbarY();\n }\n\n .user {\n @apply mt-auto hidden;\n @apply desktop-xs:flex;\n }\n\n &.show {\n --tw-translate-x: env(safe-area-inset-left, 0);\n }\n }\n\n .top-bar {\n @apply flex w-full justify-between px-4 py-2;\n\n padding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);\n height: calc(env(safe-area-inset-top, 0) + 3rem);\n\n @apply border-b #{!important};\n\n @apply desktop-xs:hidden;\n }\n\n p-backdrop {\n @apply hidden;\n\n &.show {\n @apply block;\n }\n }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'p-navbar',\n styleUrl: 'navbar.component.scss',\n shadow: true,\n})\nexport class Navbar {\n /**\n * The text to display for the close button\n */\n @Prop() closeText = 'Close';\n\n /**\n * The text to display for the menu button & sidebar title\n */\n @Prop() menuText = 'Menu';\n\n @State() private _showMenu = false;\n\n render() {\n return (\n <Host class=\"p-navbar\">\n <p-backdrop\n applyBlur={true}\n class={`z-navbar-backdrop desktop-xs:hidden ${\n this._showMenu && 'show'\n }`}\n onClicked={() => (this._showMenu = false)}\n ></p-backdrop>\n <div class={`sidebar ${this._showMenu && 'show'}`}>\n <div class=\"header\">\n <p class=\"text-xl m-0 font-semibold text-storm-dark\">\n {this.menuText}\n </p>\n\n <p-button\n variant=\"secondary\"\n icon=\"negative\"\n iconPosition=\"end\"\n size=\"small\"\n onClick={() => (this._showMenu = false)}\n >\n {this.closeText}\n </p-button>\n </div>\n <div class=\"company\">\n <slot name=\"company\" />\n </div>\n <div class=\"content\">\n <slot name=\"content\" />\n </div>\n\n <div class=\"user\">\n <slot name=\"user\" />\n </div>\n </div>\n\n <div class=\"top-bar\">\n <p-button\n variant=\"secondary\"\n icon=\"menu\"\n size=\"small\"\n onClick={() => (this._showMenu = true)}\n >\n {this.menuText}\n </p-button>\n\n <slot name=\"topbar\" />\n </div>\n </Host>\n );\n }\n\n @Listen('closeNavbar', { target: 'window' })\n handleCloseNavbar() {\n this._showMenu = false;\n }\n\n @Listen('openNavbar', { target: 'window' })\n handleOpenNavbar() {\n this._showMenu = true;\n }\n}\n"],"version":3}

package/dist/esm/p-navigation-item.entry.js CHANGED Viewed

@@ -1,19 +1,22 @@
-import { r as registerInstance, h, H as Host } from './index-fff70567.js';
+import { r as registerInstance, h, H as Host } from './index-94339e77.js';
-const navigationItemComponentCss = ".static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-8{height:2rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-mystic-dark{--tw-text-opacity:1!important;color:rgb(218 230 240/var(--tw-text-opacity))!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}:host{display:inline-block;margin-bottom:.25rem;width:100%}:host>a{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(128 130 158/var(--tw-text-opacity));cursor:pointer;display:flex;font-weight:500;height:2rem;padding-left:.5rem;padding-right:.5rem;width:100%}:host>a:hover{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(39 40 56/var(--tw-text-opacity))}:host>a>p-icon{--tw-text-opacity:1;color:rgb(218 230 240/var(--tw-text-opacity));margin-right:.75rem}:host>a>p-counter{margin-left:auto}:host>a>span.has-counter{margin-right:.75rem}:host>a:hover>p-icon{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity))}:host(.active)>a{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}:host(.active)>a>p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.hover\\:bg-indigo-light:hover{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}";
+const navigationItemComponentCss = ".static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-8{height:2rem!important}.w-full{width:100%!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}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.rounded-large{border-radius:.375rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!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-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{display:inline-block;margin-bottom:.25rem;width:100%}:host>a{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-weight:600;gap:.5rem;height:2rem;padding-left:.5rem;padding-right:.5rem;text-decoration-line:none;width:100%}:host>a:hover{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity))}:host>a>p-icon{--tw-text-opacity:1;color:rgb(81 83 107/var(--tw-text-opacity))}:host>a>p-counter{margin-left:auto}:host(.active)>a{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}:host(.active)>a>p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}";
 const NavigationItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Wether the navigation item is active
-     */
     this.active = false;
+    this.icon = undefined;
+    this.counter = undefined;
+    this.href = undefined;
+    this.target = undefined;
   }
   render() {
-    return (h(Host, { class: `p-navigation-item ${this.active && 'active'}` }, h("a", { href: this.href, target: this.target }, this.icon && h("p-icon", { variant: this.icon }), h("span", { class: this.counter && 'has-counter' }, h("slot", null)), this.counter && h("p-counter", null, this.counter))));
+    return (h(Host, { class: `p-navigation-item ${this.active && 'active'}` }, h("a", { href: this.href, target: this.target }, this.icon && h("p-icon", { variant: this.icon }), h("span", { class: this.counter && 'has-counter' }, h("slot", null)), this.counter && (h("p-counter", { variant: "negative" }, this.counter)))));
   }
 };
 NavigationItem.style = navigationItemComponentCss;
 export { NavigationItem as p_navigation_item };
+//# sourceMappingURL=p-navigation-item.entry.js.map

package/dist/esm/p-navigation-item.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-navigation-item.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,qmLAAqmL;;MCQ3nL,cAAc;;;kBAIG,KAAK;;;;;;EAsB/B,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IACvD,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAClC,IAAI,CAAC,IAAI,IAAI,cAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,EAC5C,YAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACtC,eAAQ,CACL,EACN,IAAI,CAAC,OAAO,KACT,iBAAW,OAAO,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAa,CAC3D,CACD,CACD,EACT;GACL;;;;;;","names":[],"sources":["./src/components/molecules/navigation-item/navigation-item.component.scss?tag=p-navigation-item&encapsulation=shadow","./src/components/molecules/navigation-item/navigation-item.component.tsx"],"sourcesContent":[":host {\n @apply w-full inline-block mb-1;\n\n > a {\n @apply w-full h-8 px-2 cursor-pointer rounded-large no-underline;\n @apply flex items-center gap-2;\n @apply text-storm font-semibold;\n\n @apply hover:bg-indigo-light;\n\n > p-icon {\n @apply text-storm;\n }\n\n > p-counter {\n @apply ml-auto;\n }\n }\n}\n\n:host(.active) {\n > a {\n @apply text-indigo bg-indigo-light;\n\n > p-icon {\n @apply text-indigo;\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-navigation-item',\n styleUrl: 'navigation-item.component.scss',\n shadow: true,\n})\nexport class NavigationItem {\n /**\n * Wether the navigation item is active\n */\n @Prop() active: boolean = false;\n\n /**\n * Icon of the navigation item\n */\n @Prop() icon: IconVariant;\n\n /**\n * Icon of the navigation item\n */\n @Prop() counter: number | string;\n\n /**\n * The href of the navigation item\n */\n @Prop() href: string;\n\n /**\n * The target of the navigation item\n */\n @Prop() target: string;\n\n render() {\n return (\n <Host class={`p-navigation-item ${this.active && 'active'}`}>\n <a href={this.href} target={this.target}>\n {this.icon && <p-icon variant={this.icon} />}\n <span class={this.counter && 'has-counter'}>\n <slot />\n </span>\n {this.counter && (\n <p-counter variant=\"negative\">{this.counter}</p-counter>\n )}\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -0,0 +1,218 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-94339e77.js';
+import { f as formatTranslation, g as getLocaleComponentStrings } from './localization-901dc2d3.js';
+import { d as defaultSize, a as defaultSizeOptions } from './constants-826f9460.js';
+const PageSizeSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sizeChange = createEvent(this, "sizeChange", 7);
+    this._defaultButtonTemplate = (size) => formatTranslation(this._locales.item, { size });
+    this._defaultItemTemplate = (size) => formatTranslation(this._locales.item, { size });
+    this.size = defaultSize;
+    this.sizeOptions = defaultSizeOptions;
+    this.chevronPosition = 'start';
+    this.buttonSize = 'small';
+    this.buttonTemplate = this._defaultButtonTemplate;
+    this.itemTemplate = this._defaultItemTemplate;
+    this.hidden = false;
+    this._locales = {};
+  }
+  componentWillLoad() {
+    this._setLocales();
+  }
+  render() {
+    return (h(Host, { class: `p-page-size-select ${this.hidden && 'hidden'}` }, h("p-dropdown", { placement: "top-start", chevronPosition: this.chevronPosition, chevronDirection: "down" }, h("p-button", { variant: "secondary", slot: "trigger", size: this.buttonSize }, this.buttonTemplate
+      ? this.buttonTemplate(this.size)
+      : this._defaultButtonTemplate(this.size)), h("slot", { slot: "items" }, this.sizeOptions.map((option) => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
+      ? this.itemTemplate(this.size)
+      : this._defaultItemTemplate(option))))))));
+  }
+  async _setLocales() {
+    this._locales = await getLocaleComponentStrings(this._el);
+  }
+  _changeSize(s) {
+    if (!s) {
+      return;
+    }
+    this.size = s;
+    this.sizeChange.emit(this.size);
+  }
+  get _el() { return getElement(this); }
+};
+const paginationComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!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}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!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{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!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}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-dark,.text-storm-medium{--tw-text-opacity:1!important}.text-storm-medium{color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.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}*{box-sizing:border-box}p-pagination{display:flex}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}.text-lg,.text-xl{line-height:1.75rem!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!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}";
+const Pagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageChange = createEvent(this, "pageChange", 7);
+    this._pages = [];
+    this._set = [];
+    this._nextClick = () => {
+      const nextPage = this.page + 1;
+      if (nextPage > this._pages[this._pages.length - 1]) {
+        return;
+      }
+      this._changePage(nextPage);
+    };
+    this._pageClick = (p) => this._changePage(p);
+    this._generateSet = (range = 1, enableBoundaries = true) => {
+      const totalPages = this._pages.length;
+      if (!totalPages) {
+        return [];
+      }
+      let start = this.page - range;
+      let end = this.page + range;
+      if (end > totalPages) {
+        end = totalPages;
+        start = totalPages - range * 2;
+        start = start < 1 ? 1 : start;
+      }
+      if (start <= 1) {
+        start = 1;
+        end = Math.min(range * 2 + 1, totalPages);
+      }
+      const set = [];
+      const previous = {
+        type: 'previous',
+        value: h("p-icon", { variant: "chevron", rotate: 90 }),
+      };
+      const next = {
+        type: 'next',
+        value: h("p-icon", { variant: "chevron", rotate: -90 }),
+      };
+      // Disable page range, display all the pages
+      if (range === null) {
+        const p = this._pages.map((p) => ({
+          type: 'page',
+          value: p,
+        }));
+        return enableBoundaries ? [previous, ...p, next] : p;
+      }
+      if (enableBoundaries) {
+        set.push(previous);
+      }
+      if (start <= 3) {
+        for (let i = 1; i < start; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'page',
+          value: 1,
+        });
+        set.push({
+          type: 'ellipsis',
+          value: 'ellipsis',
+        });
+      }
+      for (let i = start; i <= end; i++) {
+        set.push({
+          type: 'page',
+          value: this._pages[i - 1],
+        });
+      }
+      if (end >= totalPages - 2) {
+        for (let i = end + 1; i <= totalPages; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'ellipsis',
+        });
+        set.push({
+          type: 'page',
+          value: this._pages[this._pages.length - 1],
+        });
+      }
+      if (enableBoundaries) {
+        set.push(next);
+      }
+      return set;
+    };
+    this.page = 1;
+    this.pageSize = 12;
+    this.hideOnSinglePage = false;
+    this.total = undefined;
+  }
+  componentWillRender() {
+    this._generate();
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: `p-pagination ${this.hideOnSinglePage && ((_a = this._set) === null || _a === void 0 ? void 0 : _a.length) === 3 && 'hidden'}` }, (_b = this._set) === null || _b === void 0 ? void 0 : _b.map((p) => {
+      if (p.type === 'previous' || p.type === 'next') {
+        return (h("p-pagination-item", { onClick: () => p.type === 'previous'
+            ? this._previousClick()
+            : this._nextClick() }, p.value));
+      }
+      if (p.type === 'ellipsis') {
+        return h("p-pagination-item", null, "...");
+      }
+      return (h("p-pagination-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
+    })));
+  }
+  pageChangeHandler() {
+    this._generate();
+  }
+  _generate() {
+    var _a;
+    this._pages = this._generatePages();
+    this._set = this._generateSet();
+    if (this.page > ((_a = this._pages) === null || _a === void 0 ? void 0 : _a.length)) {
+      this._changePage(this._pages.length);
+    }
+  }
+  _changePage(p) {
+    if (!p) {
+      return;
+    }
+    this.page = p;
+    this.pageChange.emit(this.page);
+  }
+  _previousClick() {
+    const previousPage = this.page - 1;
+    if (previousPage < this._pages[0]) {
+      return;
+    }
+    this._changePage(previousPage);
+  }
+  _generatePages() {
+    if (!this.total || !this.pageSize) {
+      return [];
+    }
+    const pages = Math.ceil(this.total / this.pageSize);
+    return new Array(pages).fill(undefined).map((_, i) => i + 1);
+  }
+  static get watchers() { return {
+    "page": ["pageChangeHandler"],
+    "pageSize": ["pageChangeHandler"],
+    "total": ["pageChangeHandler"]
+  }; }
+};
+Pagination.style = paginationComponentCss;
+const paginationItemComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!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}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!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{border-width:1px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!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}.font-semibold{font-weight:600!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo,.text-negative{--tw-text-opacity:1!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-negative-light,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.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}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.25rem;color:rgb(128 130 158/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;height:2rem;justify-content:center;line-height:1.25rem;width:2rem}:host(:focus),:host(:hover){--tw-text-opacity:1;color:rgb(81 83 107/var(--tw-text-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}.text-lg,.text-xl{line-height:1.75rem!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!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}";
+const PaginationItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-pagination-item ${this.active && 'active'}` }, h("slot", null)));
+  }
+};
+PaginationItem.style = paginationItemComponentCss;
+export { PageSizeSelect as p_page_size_select, Pagination as p_pagination, PaginationItem as p_pagination_item };
+//# sourceMappingURL=p-page-size-select_3.entry.js.map