@everymatrix/helper-filters 1.44.0 → 1.45.2

package/dist/esm/helper-filters_2.entry.js

@@ -1,75 +1,75 @@
-import { r as registerInstance, c as createEvent, h as h$2 } from './index-5f4ed338.js';
+import { r as registerInstance, c as createEvent, h as h$2 } from './index-0aa988c9.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
 const TRANSLATIONS = {
-  en: {
-    filterOpen: 'Filter',
-    filterClear: 'Clear',
-    filterModalTicketTitle: 'Ticket Results',
-    filterModalDrawTitle: 'Draws Results History',
-    filterTicketPlaceholder: 'Search for a ticket ID',
-    filterDrawPlaceholder: 'Search for a draw ID',
-    filterDateRangePlaceholder: 'Date Range',
-    filterModalButton: 'Search',
-    filterFromCalendar: 'From',
-    filterToCalendar: 'To',
-    filterOrDate: 'or search by date'
-  },
-  ro: {
-    filterOpen: 'Filtrare',
-    filterClear: 'Stergere',
-    filterModalTicketTitle: 'Rezultatele biletelor',
-    filterModalDrawTitle: 'Rezultatele draw-urilor',
-    filterTicketPlaceholder: 'Cauta ID bilet',
-    filterDrawPlaceholder: 'Cauta ID draw',
-    filterDateRangePlaceholder: 'Perioada',
-    filterModalButton: 'Cauta',
-    filterOrDate: 'sau cauta dupa data'
-  },
-  fr: {
-    filterOpen: 'Filter',
-    filterClear: 'Clear',
-    filterModalTicketTitle: 'Ticket Results',
-    filterModalDrawTitle: 'Draws Results History',
-    filterTicketPlaceholder: 'Search for a ticket ID',
-    filterDrawPlaceholder: 'Search for a draw ID',
-    filterDateRangePlaceholder: 'Date Range',
-    filterModalButton: 'Search',
-    filterFromCalendar: 'From',
-    filterToCalendar: 'To',
-    filterOrDate: 'or search by date'
-  },
-  ar: {
-    filterOpen: 'Filter',
-    filterClear: 'Clear',
-    filterModalTicketTitle: 'Ticket Results',
-    filterModalDrawTitle: 'Draws Results History',
-    filterTicketPlaceholder: 'Search for a ticket ID',
-    filterDrawPlaceholder: 'Search for a draw ID',
-    filterDateRangePlaceholder: 'Date Range',
-    filterModalButton: 'Search',
-    filterFromCalendar: 'From',
-    filterToCalendar: 'To',
-    filterOrDate: 'or search by date'
-  },
-  hr: {
-    filterOpen: 'Filter',
-    filterClear: 'Očisti',
-    filterModalTicketTitle: 'Rezultati listića',
-    filterModalDrawTitle: 'Povijest rezultata Izvlačenja',
-    filterTicketPlaceholder: 'Pretraga ID listića',
-    filterDrawPlaceholder: 'Pretraga ID izvlačenja',
-    filterDateRangePlaceholder: 'Raspon datuma',
-    filterModalButton: 'Traži',
-    filterFromCalendar: 'Od',
-    filterToCalendar: 'Do',
-    filterOrDate: 'ili tražite po datumu'
-  }
+    en: {
+        filterOpen: 'Filter',
+        filterClear: 'Clear',
+        filterModalTicketTitle: 'Ticket Results',
+        filterModalDrawTitle: 'Draws Results History',
+        filterTicketPlaceholder: 'Search for a ticket ID',
+        filterDrawPlaceholder: 'Search for a draw ID',
+        filterDateRangePlaceholder: 'Date Range',
+        filterModalButton: 'Search',
+        filterFromCalendar: 'From',
+        filterToCalendar: 'To',
+        filterOrDate: 'or search by date'
+    },
+    ro: {
+        filterOpen: 'Filtrare',
+        filterClear: 'Stergere',
+        filterModalTicketTitle: 'Rezultatele biletelor',
+        filterModalDrawTitle: 'Rezultatele draw-urilor',
+        filterTicketPlaceholder: 'Cauta ID bilet',
+        filterDrawPlaceholder: 'Cauta ID draw',
+        filterDateRangePlaceholder: 'Perioada',
+        filterModalButton: 'Cauta',
+        filterOrDate: 'sau cauta dupa data'
+    },
+    fr: {
+        filterOpen: 'Filter',
+        filterClear: 'Clear',
+        filterModalTicketTitle: 'Ticket Results',
+        filterModalDrawTitle: 'Draws Results History',
+        filterTicketPlaceholder: 'Search for a ticket ID',
+        filterDrawPlaceholder: 'Search for a draw ID',
+        filterDateRangePlaceholder: 'Date Range',
+        filterModalButton: 'Search',
+        filterFromCalendar: 'From',
+        filterToCalendar: 'To',
+        filterOrDate: 'or search by date'
+    },
+    ar: {
+        filterOpen: 'Filter',
+        filterClear: 'Clear',
+        filterModalTicketTitle: 'Ticket Results',
+        filterModalDrawTitle: 'Draws Results History',
+        filterTicketPlaceholder: 'Search for a ticket ID',
+        filterDrawPlaceholder: 'Search for a draw ID',
+        filterDateRangePlaceholder: 'Date Range',
+        filterModalButton: 'Search',
+        filterFromCalendar: 'From',
+        filterToCalendar: 'To',
+        filterOrDate: 'or search by date'
+    },
+    hr: {
+        filterOpen: 'Filter',
+        filterClear: 'Očisti',
+        filterModalTicketTitle: 'Rezultati listića',
+        filterModalDrawTitle: 'Povijest rezultata Izvlačenja',
+        filterTicketPlaceholder: 'Pretraga ID listića',
+        filterDrawPlaceholder: 'Pretraga ID izvlačenja',
+        filterDateRangePlaceholder: 'Raspon datuma',
+        filterModalButton: 'Traži',
+        filterFromCalendar: 'Od',
+        filterToCalendar: 'Do',
+        filterOrDate: 'ili tražite po datumu'
+    }
 };
 const translate$1 = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
 /**
@@ -106,17 +106,17 @@ function defineCustomElement(CustomElement) {
  *
  * @private
  */
-class Lumo extends HTMLElement {
+class Lumo$2 extends HTMLElement {
   static get is() {
     return 'vaadin-lumo-styles';
   }
 
   static get version() {
-    return '24.2.5';
+    return '24.2.9';
   }
 }
 
-defineCustomElement(Lumo);
+defineCustomElement(Lumo$2);
 
 /**
  * @license
@@ -460,7 +460,7 @@ const addGlobalThemeStyles = (id, ...styles) => {
   document.head.insertAdjacentElement('afterbegin', styleTag);
 };
 
-const addLumoGlobalStyles = (id, ...styles) => {
+const addLumoGlobalStyles$2 = (id, ...styles) => {
   addGlobalThemeStyles(`lumo-${id}`, styles);
 };
 
@@ -470,7 +470,7 @@ const addLumoGlobalStyles = (id, ...styles) => {
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const colorBase = i$1`
+const colorBase$2 = i$1`
   :host {
     /* Base (background) */
     --lumo-base-color: #fff;
@@ -557,9 +557,9 @@ const colorBase = i$1`
   }
 `;
 
-addLumoGlobalStyles('color-props', colorBase);
+addLumoGlobalStyles$2('color-props', colorBase$2);
 
-const color = i$1`
+const color$2 = i$1`
   [theme~='dark'] {
     /* Base (background) */
     --lumo-base-color: hsl(214, 35%, 21%);
@@ -676,7 +676,7 @@ const color = i$1`
   }
 `;
 
-registerStyles('', color, { moduleId: 'lumo-color' });
+registerStyles('', color$2, { moduleId: 'lumo-color' });
 
 /**
  * @license
@@ -684,7 +684,7 @@ registerStyles('', color, { moduleId: 'lumo-color' });
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const sizing = i$1`
+const sizing$2 = i$1`
   :host {
     --lumo-size-xs: 1.625rem;
     --lumo-size-s: 1.875rem;
@@ -701,7 +701,7 @@ const sizing = i$1`
   }
 `;
 
-addLumoGlobalStyles('sizing-props', sizing);
+addLumoGlobalStyles$2('sizing-props', sizing$2);
 
 /**
  * @license
@@ -709,7 +709,7 @@ addLumoGlobalStyles('sizing-props', sizing);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const style = i$1`
+const style$2 = i$1`
   :host {
     /* Border radius */
     --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
@@ -739,7 +739,7 @@ i$1`
   }
 `;
 
-addLumoGlobalStyles('style-props', style);
+addLumoGlobalStyles$2('style-props', style$2);
 
 /**
  * @license
@@ -747,7 +747,7 @@ addLumoGlobalStyles('style-props', style);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const font = i$1`
+const font$2 = i$1`
   :host {
     /* prettier-ignore */
     --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -769,7 +769,7 @@ const font = i$1`
   }
 `;
 
-const typography = i$1`
+const typography$2 = i$1`
   body,
   :host {
     font-family: var(--lumo-font-family);
@@ -863,8 +863,8 @@ const typography = i$1`
   }
 `;
 
-registerStyles('', typography, { moduleId: 'lumo-typography' });
-addLumoGlobalStyles('typography-props', font);
+registerStyles('', typography$2, { moduleId: 'lumo-typography' });
+addLumoGlobalStyles$2('typography-props', font$2);
 
 registerStyles(
   'vaadin-input-container',
@@ -8364,7 +8364,60 @@ defineCustomElement(InputContainer);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const spacing = i$1`
+/**
+ * Dummy custom element used for collecting
+ * development time usage statistics.
+ *
+ * @private
+ */
+class Lumo$1 extends HTMLElement {
+  static get is() {
+    return 'vaadin-lumo-styles';
+  }
+
+  static get version() {
+    return '24.2.5';
+  }
+}
+
+defineCustomElement(Lumo$1);
+
+const addLumoGlobalStyles$1 = (id, ...styles) => {
+  addGlobalThemeStyles(`lumo-${id}`, styles);
+};
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const sizing$1 = i$1`
+  :host {
+    --lumo-size-xs: 1.625rem;
+    --lumo-size-s: 1.875rem;
+    --lumo-size-m: 2.25rem;
+    --lumo-size-l: 2.75rem;
+    --lumo-size-xl: 3.5rem;
+
+    /* Icons */
+    --lumo-icon-size-s: 1.25em;
+    --lumo-icon-size-m: 1.5em;
+    --lumo-icon-size-l: 2.25em;
+    /* For backwards compatibility */
+    --lumo-icon-size: var(--lumo-icon-size-m);
+  }
+`;
+
+addLumoGlobalStyles$1('sizing-props', sizing$1);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const spacing$1 = i$1`
   :host {
     /* Square */
     --lumo-space-xs: 0.25rem;
@@ -8389,7 +8442,7 @@ const spacing = i$1`
   }
 `;
 
-addLumoGlobalStyles('spacing-props', spacing);
+addLumoGlobalStyles$1('spacing-props', spacing$1);
 
 /**
  * @license
@@ -8397,234 +8450,1074 @@ addLumoGlobalStyles('spacing-props', spacing);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const overlay = i$1`
+const style$1 = i$1`
   :host {
-    top: var(--lumo-space-m);
-    right: var(--lumo-space-m);
-    bottom: var(--lumo-space-m);
-    left: var(--lumo-space-m);
-    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
-    /* stylelint-disable-next-line */
-    outline: 0px solid transparent;
-  }
+    /* Border radius */
+    --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
+    --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
+    --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
 
-  [part='overlay'] {
-    background-color: var(--lumo-base-color);
-    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-    border-radius: var(--lumo-border-radius-m);
-    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
-    color: var(--lumo-body-text-color);
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    font-weight: 400;
-    line-height: var(--lumo-line-height-m);
-    letter-spacing: 0;
-    text-transform: none;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
+    /* Shadow */
+    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
+    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
+    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
+    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
+    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
 
-  [part='content'] {
-    padding: var(--lumo-space-xs);
+    /* Clickable element cursor */
+    --lumo-clickable-cursor: default;
   }
+`;
 
-  [part='backdrop'] {
-    background-color: var(--lumo-shade-20pct);
-    animation: 0.2s lumo-overlay-backdrop-enter both;
-    will-change: opacity;
+/**
+ * Default values for component-specific custom properties.
+ */
+i$1`
+  html {
+    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
   }
+`;
 
-  @keyframes lumo-overlay-backdrop-enter {
-    0% {
-      opacity: 0;
-    }
-  }
+addLumoGlobalStyles$1('style-props', style$1);
 
-  :host([closing]) [part='backdrop'] {
-    animation: 0.2s lumo-overlay-backdrop-exit both;
-  }
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  @keyframes lumo-overlay-backdrop-exit {
-    100% {
-      opacity: 0;
-    }
-  }
+const colorBase$1 = i$1`
+  :host {
+    /* Base (background) */
+    --lumo-base-color: #fff;
 
-  @keyframes lumo-overlay-dummy-animation {
-    0% {
-      opacity: 1;
-    }
+    /* Tint */
+    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
+    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
+    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
+    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
+    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
+    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
+    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
+    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
+    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
+    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
+    --lumo-tint: #fff;
 
-    100% {
-      opacity: 1;
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
+    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
+    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
+    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
+    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
+    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
+    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
+    --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
+    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
+    --lumo-shade: hsl(214, 35%, 15%);
+
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-shade-5pct);
+    --lumo-contrast-10pct: var(--lumo-shade-10pct);
+    --lumo-contrast-20pct: var(--lumo-shade-20pct);
+    --lumo-contrast-30pct: var(--lumo-shade-30pct);
+    --lumo-contrast-40pct: var(--lumo-shade-40pct);
+    --lumo-contrast-50pct: var(--lumo-shade-50pct);
+    --lumo-contrast-60pct: var(--lumo-shade-60pct);
+    --lumo-contrast-70pct: var(--lumo-shade-70pct);
+    --lumo-contrast-80pct: var(--lumo-shade-80pct);
+    --lumo-contrast-90pct: var(--lumo-shade-90pct);
+    --lumo-contrast: var(--lumo-shade);
+
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+    /* Primary */
+    --lumo-primary-color: hsl(214, 100%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+    --lumo-primary-text-color: hsl(214, 100%, 43%);
+    --lumo-primary-contrast-color: #fff;
+
+    /* Error */
+    --lumo-error-color: hsl(3, 85%, 48%);
+    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+    --lumo-error-text-color: hsl(3, 89%, 42%);
+    --lumo-error-contrast-color: #fff;
+
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 25%);
+    --lumo-success-contrast-color: #fff;
+
+    /* Warning */
+    --lumo-warning-color: hsl(48, 100%, 50%);
+    --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
+    --lumo-warning-text-color: hsl(32, 100%, 30%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+  }
+
+  /* forced-colors mode adjustments */
+  @media (forced-colors: active) {
+    html {
+      --lumo-disabled-text-color: GrayText;
     }
   }
 `;
 
-registerStyles('', overlay, { moduleId: 'lumo-overlay' });
+addLumoGlobalStyles$1('color-props', colorBase$1);
 
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+const color$1 = i$1`
+  [theme~='dark'] {
+    /* Base (background) */
+    --lumo-base-color: hsl(214, 35%, 21%);
+
+    /* Tint */
+    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
+    --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
+    --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
+    --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
+    --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
+    --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
+    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
+    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
+    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
+    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
+    --lumo-tint: hsl(214, 100%, 98%);
+
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
+    --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
+    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
+    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
+    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
+    --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
+    --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
+    --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
+    --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
+    --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
+    --lumo-shade: hsl(214, 33%, 13%);
+
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-tint-5pct);
+    --lumo-contrast-10pct: var(--lumo-tint-10pct);
+    --lumo-contrast-20pct: var(--lumo-tint-20pct);
+    --lumo-contrast-30pct: var(--lumo-tint-30pct);
+    --lumo-contrast-40pct: var(--lumo-tint-40pct);
+    --lumo-contrast-50pct: var(--lumo-tint-50pct);
+    --lumo-contrast-60pct: var(--lumo-tint-60pct);
+    --lumo-contrast-70pct: var(--lumo-tint-70pct);
+    --lumo-contrast-80pct: var(--lumo-tint-80pct);
+    --lumo-contrast-90pct: var(--lumo-tint-90pct);
+    --lumo-contrast: var(--lumo-tint);
+
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+    /* Primary */
+    --lumo-primary-color: hsl(214, 90%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+    --lumo-primary-text-color: hsl(214, 90%, 77%);
+    --lumo-primary-contrast-color: #fff;
+
+    /* Error */
+    --lumo-error-color: hsl(3, 79%, 49%);
+    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+    --lumo-error-text-color: hsl(3, 100%, 80%);
+
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 46%);
+
+    /* Warning */
+    --lumo-warning-color: hsl(43, 100%, 48%);
+    --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
+    --lumo-warning-text-color: hsl(45, 100%, 60%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+  }
+
+  html {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: light;
+  }
+
+  [theme~='dark'] {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: dark;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--lumo-header-text-color);
+  }
+
+  a:where(:any-link) {
+    color: var(--lumo-primary-text-color);
+  }
+
+  a:not(:any-link) {
+    color: var(--lumo-disabled-text-color);
+  }
+
+  blockquote {
+    color: var(--lumo-secondary-text-color);
+  }
+
+  code,
+  pre {
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
+  }
+`;
+
+registerStyles('', color$1, { moduleId: 'lumo-color' });
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const font$1 = i$1`
+  :host {
+    /* prettier-ignore */
+    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+    /* Font sizes */
+    --lumo-font-size-xxs: 0.75rem;
+    --lumo-font-size-xs: 0.8125rem;
+    --lumo-font-size-s: 0.875rem;
+    --lumo-font-size-m: 1rem;
+    --lumo-font-size-l: 1.125rem;
+    --lumo-font-size-xl: 1.375rem;
+    --lumo-font-size-xxl: 1.75rem;
+    --lumo-font-size-xxxl: 2.5rem;
+
+    /* Line heights */
+    --lumo-line-height-xs: 1.25;
+    --lumo-line-height-s: 1.375;
+    --lumo-line-height-m: 1.625;
+  }
+`;
+
+const typography$1 = i$1`
+  body,
+  :host {
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  small,
+  [theme~='font-size-s'] {
+    font-size: var(--lumo-font-size-s);
+    line-height: var(--lumo-line-height-s);
+  }
+
+  [theme~='font-size-xs'] {
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
+    margin-block: 0;
+  }
+
+  :where(h1) {
+    font-size: var(--lumo-font-size-xxxl);
+  }
+
+  :where(h2) {
+    font-size: var(--lumo-font-size-xxl);
+  }
+
+  :where(h3) {
+    font-size: var(--lumo-font-size-xl);
+  }
+
+  :where(h4) {
+    font-size: var(--lumo-font-size-l);
+  }
+
+  :where(h5) {
+    font-size: var(--lumo-font-size-m);
+  }
+
+  :where(h6) {
+    font-size: var(--lumo-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  p,
+  blockquote {
+    margin-top: 0.5em;
+    margin-bottom: 0.75em;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  a:where(:any-link):hover {
+    text-decoration: underline;
+  }
+
+  hr {
+    display: block;
+    align-self: stretch;
+    height: 1px;
+    border: 0;
+    padding: 0;
+    margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
+    background-color: var(--lumo-contrast-10pct);
+  }
+
+  blockquote {
+    border-left: 2px solid var(--lumo-contrast-30pct);
+  }
+
+  b,
+  strong {
+    font-weight: 600;
+  }
+
+  /* RTL specific styles */
+  blockquote[dir='rtl'] {
+    border-left: none;
+    border-right: 2px solid var(--lumo-contrast-30pct);
+  }
+`;
+
+registerStyles('', typography$1, { moduleId: 'lumo-typography' });
+addLumoGlobalStyles$1('typography-props', font$1);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const overlay = i$1`
+  :host {
+    top: var(--lumo-space-m);
+    right: var(--lumo-space-m);
+    bottom: var(--lumo-space-m);
+    left: var(--lumo-space-m);
+    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
+    /* stylelint-disable-next-line */
+    outline: 0px solid transparent;
+  }
+
+  [part='overlay'] {
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+    color: var(--lumo-body-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 400;
+    line-height: var(--lumo-line-height-m);
+    letter-spacing: 0;
+    text-transform: none;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs);
+  }
+
+  [part='backdrop'] {
+    background-color: var(--lumo-shade-20pct);
+    animation: 0.2s lumo-overlay-backdrop-enter both;
+    will-change: opacity;
+  }
+
+  @keyframes lumo-overlay-backdrop-enter {
+    0% {
+      opacity: 0;
+    }
+  }
+
+  :host([closing]) [part='backdrop'] {
+    animation: 0.2s lumo-overlay-backdrop-exit both;
+  }
+
+  @keyframes lumo-overlay-backdrop-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-overlay-dummy-animation {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+
+registerStyles('', overlay, { moduleId: 'lumo-overlay' });
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const menuOverlayCore = i$1`
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s lumo-overlay-dummy-animation;
+  }
+
+  [part='overlay'] {
+    will-change: opacity, transform;
+  }
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-enter ease-out both;
+  }
+
+  @keyframes lumo-menu-overlay-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-exit both;
+  }
+
+  @keyframes lumo-menu-overlay-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+`;
+
+registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
+
+const menuOverlayExt = i$1`
+  /* Small viewport (bottom sheet) styles */
+  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
+  @media (max-width: 420px), (max-height: 420px) {
+    :host {
+      top: 0 !important;
+      right: 0 !important;
+      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+      left: 0 !important;
+      align-items: stretch !important;
+      justify-content: flex-end !important;
+    }
+
+    [part='overlay'] {
+      max-height: 50vh;
+      width: 100vw;
+      border-radius: 0;
+      box-shadow: var(--lumo-box-shadow-xl);
+    }
+
+    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+    [part='content'] {
+      padding: 30px var(--lumo-space-m);
+      max-height: inherit;
+      box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+    }
+
+    [part='backdrop'] {
+      display: block;
+    }
+
+    /* Animations */
+
+    :host([opening]) [part='overlay'] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
+    }
+
+    :host([closing]),
+    :host([closing]) [part='backdrop'] {
+      animation-delay: 0.14s;
+    }
+
+    :host([closing]) [part='overlay'] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-enter {
+    0% {
+      transform: translateY(150%);
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-exit {
+    100% {
+      transform: translateY(150%);
+    }
+  }
+`;
+
+const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
+
+registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
+
+const datePickerOverlay = i$1`
+  [part='overlay'] {
+    /*
+  Width:
+      date cell widths
+    + month calendar side padding
+    + year scroller width
+  */
+    /* prettier-ignore */
+    width:
+    calc(
+        var(--lumo-size-m) * 7
+      + var(--lumo-space-xs) * 2
+      + 57px
+    );
+    height: 100%;
+    max-height: calc(var(--lumo-size-m) * 14);
+    overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  [part='overlay'] {
+    flex-direction: column;
+  }
+
+  [part='content'] {
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+
+  :host([top-aligned]) [part~='overlay'] {
+    margin-top: var(--lumo-space-xs);
+  }
+
+  :host([bottom-aligned]) [part~='overlay'] {
+    margin-bottom: var(--lumo-space-xs);
+  }
+
+  @media (max-width: 420px), (max-height: 420px) {
+    [part='overlay'] {
+      width: 100vw;
+      height: 70vh;
+      max-height: 70vh;
+    }
+  }
+`;
+
+registerStyles('vaadin-date-picker-overlay', [menuOverlay, datePickerOverlay], {
+  moduleId: 'lumo-date-picker-overlay',
+});
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Dummy custom element used for collecting
+ * development time usage statistics.
+ *
+ * @private
+ */
+class Lumo extends HTMLElement {
+  static get is() {
+    return 'vaadin-lumo-styles';
+  }
+
+  static get version() {
+    return '24.2.9';
+  }
+}
+
+defineCustomElement(Lumo);
+
+const addLumoGlobalStyles = (id, ...styles) => {
+  addGlobalThemeStyles(`lumo-${id}`, styles);
+};
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const colorBase = i$1`
+  :host {
+    /* Base (background) */
+    --lumo-base-color: #fff;
+
+    /* Tint */
+    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
+    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
+    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
+    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
+    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
+    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
+    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
+    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
+    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
+    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
+    --lumo-tint: #fff;
+
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
+    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
+    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
+    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
+    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
+    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
+    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
+    --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
+    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
+    --lumo-shade: hsl(214, 35%, 15%);
+
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-shade-5pct);
+    --lumo-contrast-10pct: var(--lumo-shade-10pct);
+    --lumo-contrast-20pct: var(--lumo-shade-20pct);
+    --lumo-contrast-30pct: var(--lumo-shade-30pct);
+    --lumo-contrast-40pct: var(--lumo-shade-40pct);
+    --lumo-contrast-50pct: var(--lumo-shade-50pct);
+    --lumo-contrast-60pct: var(--lumo-shade-60pct);
+    --lumo-contrast-70pct: var(--lumo-shade-70pct);
+    --lumo-contrast-80pct: var(--lumo-shade-80pct);
+    --lumo-contrast-90pct: var(--lumo-shade-90pct);
+    --lumo-contrast: var(--lumo-shade);
+
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+    /* Primary */
+    --lumo-primary-color: hsl(214, 100%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+    --lumo-primary-text-color: hsl(214, 100%, 43%);
+    --lumo-primary-contrast-color: #fff;
+
+    /* Error */
+    --lumo-error-color: hsl(3, 85%, 48%);
+    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+    --lumo-error-text-color: hsl(3, 89%, 42%);
+    --lumo-error-contrast-color: #fff;
+
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 25%);
+    --lumo-success-contrast-color: #fff;
+
+    /* Warning */
+    --lumo-warning-color: hsl(48, 100%, 50%);
+    --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
+    --lumo-warning-text-color: hsl(32, 100%, 30%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+  }
+
+  /* forced-colors mode adjustments */
+  @media (forced-colors: active) {
+    html {
+      --lumo-disabled-text-color: GrayText;
+    }
+  }
+`;
+
+addLumoGlobalStyles('color-props', colorBase);
+
+const color = i$1`
+  [theme~='dark'] {
+    /* Base (background) */
+    --lumo-base-color: hsl(214, 35%, 21%);
+
+    /* Tint */
+    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
+    --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
+    --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
+    --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
+    --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
+    --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
+    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
+    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
+    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
+    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
+    --lumo-tint: hsl(214, 100%, 98%);
+
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
+    --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
+    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
+    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
+    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
+    --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
+    --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
+    --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
+    --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
+    --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
+    --lumo-shade: hsl(214, 33%, 13%);
+
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-tint-5pct);
+    --lumo-contrast-10pct: var(--lumo-tint-10pct);
+    --lumo-contrast-20pct: var(--lumo-tint-20pct);
+    --lumo-contrast-30pct: var(--lumo-tint-30pct);
+    --lumo-contrast-40pct: var(--lumo-tint-40pct);
+    --lumo-contrast-50pct: var(--lumo-tint-50pct);
+    --lumo-contrast-60pct: var(--lumo-tint-60pct);
+    --lumo-contrast-70pct: var(--lumo-tint-70pct);
+    --lumo-contrast-80pct: var(--lumo-tint-80pct);
+    --lumo-contrast-90pct: var(--lumo-tint-90pct);
+    --lumo-contrast: var(--lumo-tint);
+
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+    /* Primary */
+    --lumo-primary-color: hsl(214, 90%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+    --lumo-primary-text-color: hsl(214, 90%, 77%);
+    --lumo-primary-contrast-color: #fff;
+
+    /* Error */
+    --lumo-error-color: hsl(3, 79%, 49%);
+    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+    --lumo-error-text-color: hsl(3, 100%, 80%);
+
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 46%);
+
+    /* Warning */
+    --lumo-warning-color: hsl(43, 100%, 48%);
+    --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
+    --lumo-warning-text-color: hsl(45, 100%, 60%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+  }
+
+  html {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: light;
+  }
+
+  [theme~='dark'] {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: dark;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--lumo-header-text-color);
+  }
+
+  a:where(:any-link) {
+    color: var(--lumo-primary-text-color);
+  }
+
+  a:not(:any-link) {
+    color: var(--lumo-disabled-text-color);
+  }
+
+  blockquote {
+    color: var(--lumo-secondary-text-color);
+  }
+
+  code,
+  pre {
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
+  }
+`;
+
+registerStyles('', color, { moduleId: 'lumo-color' });
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const sizing = i$1`
+  :host {
+    --lumo-size-xs: 1.625rem;
+    --lumo-size-s: 1.875rem;
+    --lumo-size-m: 2.25rem;
+    --lumo-size-l: 2.75rem;
+    --lumo-size-xl: 3.5rem;
+
+    /* Icons */
+    --lumo-icon-size-s: 1.25em;
+    --lumo-icon-size-m: 1.5em;
+    --lumo-icon-size-l: 2.25em;
+    /* For backwards compatibility */
+    --lumo-icon-size: var(--lumo-icon-size-m);
+  }
+`;
+
+addLumoGlobalStyles('sizing-props', sizing);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const spacing = i$1`
+  :host {
+    /* Square */
+    --lumo-space-xs: 0.25rem;
+    --lumo-space-s: 0.5rem;
+    --lumo-space-m: 1rem;
+    --lumo-space-l: 1.5rem;
+    --lumo-space-xl: 2.5rem;
+
+    /* Wide */
+    --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
+    --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
+    --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
+    --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
+    --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
+
+    /* Tall */
+    --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
+    --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
+    --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
+    --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
+    --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
+  }
+`;
+
+addLumoGlobalStyles('spacing-props', spacing);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const style = i$1`
+  :host {
+    /* Border radius */
+    --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
+    --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
+    --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
+
+    /* Shadow */
+    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
+    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
+    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
+    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
+    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
+
+    /* Clickable element cursor */
+    --lumo-clickable-cursor: default;
+  }
+`;
+
+/**
+ * Default values for component-specific custom properties.
+ */
+i$1`
+  html {
+    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
+  }
+`;
+
+addLumoGlobalStyles('style-props', style);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const font = i$1`
+  :host {
+    /* prettier-ignore */
+    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+    /* Font sizes */
+    --lumo-font-size-xxs: 0.75rem;
+    --lumo-font-size-xs: 0.8125rem;
+    --lumo-font-size-s: 0.875rem;
+    --lumo-font-size-m: 1rem;
+    --lumo-font-size-l: 1.125rem;
+    --lumo-font-size-xl: 1.375rem;
+    --lumo-font-size-xxl: 1.75rem;
+    --lumo-font-size-xxxl: 2.5rem;
 
-const menuOverlayCore = i$1`
-  :host([opening]),
-  :host([closing]) {
-    animation: 0.14s lumo-overlay-dummy-animation;
+    /* Line heights */
+    --lumo-line-height-xs: 1.25;
+    --lumo-line-height-s: 1.375;
+    --lumo-line-height-m: 1.625;
   }
+`;
 
-  [part='overlay'] {
-    will-change: opacity, transform;
+const typography = i$1`
+  body,
+  :host {
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
-  :host([opening]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-enter ease-out both;
+  small,
+  [theme~='font-size-s'] {
+    font-size: var(--lumo-font-size-s);
+    line-height: var(--lumo-line-height-s);
   }
 
-  @keyframes lumo-menu-overlay-enter {
-    0% {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
+  [theme~='font-size-xs'] {
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-xs);
   }
 
-  :host([closing]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-exit both;
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
+    margin-block: 0;
   }
 
-  @keyframes lumo-menu-overlay-exit {
-    100% {
-      opacity: 0;
-    }
+  :where(h1) {
+    font-size: var(--lumo-font-size-xxxl);
   }
-`;
-
-registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
-
-const menuOverlayExt = i$1`
-  /* Small viewport (bottom sheet) styles */
-  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
-  @media (max-width: 420px), (max-height: 420px) {
-    :host {
-      top: 0 !important;
-      right: 0 !important;
-      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
-      align-items: stretch !important;
-      justify-content: flex-end !important;
-    }
-
-    [part='overlay'] {
-      max-height: 50vh;
-      width: 100vw;
-      border-radius: 0;
-      box-shadow: var(--lumo-box-shadow-xl);
-    }
-
-    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
-    [part='content'] {
-      padding: 30px var(--lumo-space-m);
-      max-height: inherit;
-      box-sizing: border-box;
-      -webkit-overflow-scrolling: touch;
-      overflow: auto;
-      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-    }
-
-    [part='backdrop'] {
-      display: block;
-    }
-
-    /* Animations */
-
-    :host([opening]) [part='overlay'] {
-      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
-    }
 
-    :host([closing]),
-    :host([closing]) [part='backdrop'] {
-      animation-delay: 0.14s;
-    }
+  :where(h2) {
+    font-size: var(--lumo-font-size-xxl);
+  }
 
-    :host([closing]) [part='overlay'] {
-      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
-    }
+  :where(h3) {
+    font-size: var(--lumo-font-size-xl);
   }
 
-  @keyframes lumo-mobile-menu-overlay-enter {
-    0% {
-      transform: translateY(150%);
-    }
+  :where(h4) {
+    font-size: var(--lumo-font-size-l);
   }
 
-  @keyframes lumo-mobile-menu-overlay-exit {
-    100% {
-      transform: translateY(150%);
-    }
+  :where(h5) {
+    font-size: var(--lumo-font-size-m);
   }
-`;
 
-const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
+  :where(h6) {
+    font-size: var(--lumo-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
 
-registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
+  p,
+  blockquote {
+    margin-top: 0.5em;
+    margin-bottom: 0.75em;
+  }
 
-const datePickerOverlay = i$1`
-  [part='overlay'] {
-    /*
-  Width:
-      date cell widths
-    + month calendar side padding
-    + year scroller width
-  */
-    /* prettier-ignore */
-    width:
-    calc(
-        var(--lumo-size-m) * 7
-      + var(--lumo-space-xs) * 2
-      + 57px
-    );
-    height: 100%;
-    max-height: calc(var(--lumo-size-m) * 14);
-    overflow: hidden;
-    -webkit-tap-highlight-color: transparent;
+  a {
+    text-decoration: none;
   }
 
-  [part='overlay'] {
-    flex-direction: column;
+  a:where(:any-link):hover {
+    text-decoration: underline;
   }
 
-  [part='content'] {
+  hr {
+    display: block;
+    align-self: stretch;
+    height: 1px;
+    border: 0;
     padding: 0;
-    height: 100%;
-    overflow: hidden;
-    -webkit-mask-image: none;
-    mask-image: none;
+    margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
+    background-color: var(--lumo-contrast-10pct);
   }
 
-  :host([top-aligned]) [part~='overlay'] {
-    margin-top: var(--lumo-space-xs);
+  blockquote {
+    border-left: 2px solid var(--lumo-contrast-30pct);
   }
 
-  :host([bottom-aligned]) [part~='overlay'] {
-    margin-bottom: var(--lumo-space-xs);
+  b,
+  strong {
+    font-weight: 600;
   }
 
-  @media (max-width: 420px), (max-height: 420px) {
-    [part='overlay'] {
-      width: 100vw;
-      height: 70vh;
-      max-height: 70vh;
-    }
+  /* RTL specific styles */
+  blockquote[dir='rtl'] {
+    border-left: none;
+    border-right: 2px solid var(--lumo-contrast-30pct);
   }
 `;
 
-registerStyles('vaadin-date-picker-overlay', [menuOverlay, datePickerOverlay], {
-  moduleId: 'lumo-date-picker-overlay',
-});
+registerStyles('', typography, { moduleId: 'lumo-typography' });
+addLumoGlobalStyles('typography-props', font);
 
 const button = i$1`
   :host {
@@ -9906,7 +10799,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.2.5';
+      return '24.2.9';
     }
 
     /** @protected */
@@ -11685,6 +12578,8 @@ const KeyboardMixin = dedupingMixin(
  * by the pointer or by releasing the activation key.
  *
  * @polymerMixin
+ * @mixes DisabledMixin
+ * @mixes KeyboardMixin
  */
 const ActiveMixin = (superclass) =>
   class ActiveMixinClass extends DisabledMixin(KeyboardMixin(superclass)) {
@@ -12754,7 +13649,7 @@ const fontIcons = i$1`
   }
 `;
 
-addLumoGlobalStyles('font-icons', fontIcons);
+addLumoGlobalStyles$1('font-icons', fontIcons);
 
 /**
  * @license
@@ -14075,6 +14970,14 @@ const OverlayMixin = (superClass) =>
       // and <vaadin-context-menu>).
       this.addEventListener('click', () => {});
       this.$.backdrop.addEventListener('click', () => {});
+
+      this.addEventListener('mouseup', () => {
+        // In Chrome, focus moves to body on overlay content mousedown
+        // See https://github.com/vaadin/flow-components/issues/5507
+        if (document.activeElement === document.body && this.$.overlay.getAttribute('tabindex') === '0') {
+          this.$.overlay.focus();
+        }
+      });
     }
 
     /** @protected */
@@ -23395,133 +24298,104 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 defineCustomElement(DatePicker);
 
 const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
+const HelperFiltersStyle0 = helperFiltersCss;
 
 const HelperFilters = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.filterDraw = createEvent(this, "filterDraw", 7);
-    this.filterSelection = createEvent(this, "filterSelection", 7);
-    this.filterSelectionReset = createEvent(this, "filterSelectionReset", 7);
-    /**
-     * Check if show the filter option by id
-     */
-    this.showFilterId = true;
-    /**
-     * Choose if filter by draw ID or ticket ID. By default is draw ID.
-     */
-    this.activateTicketSearch = false;
-    /**
-     * Game ID
-     */
-    this.gameId = '';
-    /**
-     * Player ID
-     */
-    this.playerId = '';
-    /**
-     * Session ID
-     */
-    this.session = '';
-    /**
-     * Instead of customEvents the widget triggers postMessages
-     */
-    this.postMessage = false;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Notifies if the quick filters from tickets are active
-     */
-    this.quickFiltersActive = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.showFilterModal = false;
-    this.showClearButton = false;
-    this.filterData = {};
-    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
-    this.limitStylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  // reset field values each time the filter modal opens
-  componentDidRender() {
-    // @TODO: to way binding?
-    if (document.getElementById('#FilterById'))
-      document.getElementById('#FilterById').value = '';
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  filterSelectionHandler(event) {
-    if (this.postMessage)
-      window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
-      this.filterSelection.emit(event);
-  }
-  filterSelectionResetHandler(event) {
-    if (this.postMessage)
-      window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
-    this.filterSelectionReset.emit(event);
-  }
-  modalCloseEvent() {
-    this.showFilterModal = false;
-  }
-  // Toggle filter modal
-  toggleFilterModal() {
-    this.showFilterModal = true;
-  }
-  // Filter search
-  filterSearch() {
-    this.modalCloseEvent();
-    this.showClearButton = true;
-    this.filterSelectionHandler(this.filterData);
-    console.log(this.showClearButton);
-  }
-  resetSearch() {
-    this.showClearButton = false;
-    this.filterSelectionResetHandler(this.filterDataReset);
-    this.filterData = {};
-  }
-  handleTicketDrawId(event) {
-    this.filterData.ticketDrawId = event.target.value;
-  }
-  handleFilterFrom(event) {
-    this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
-  }
-  handleFilterTo(event) {
-    this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
-  }
-  render() {
-    return (h$2("div", { class: "HelperFilters", ref: el => this.stylingContainer = el }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), console.log('in filter Open', this.showClearButton, this.quickFiltersActive), (this.showClearButton || this.quickFiltersActive) ?
-      h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language))
-      :
-        null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", null, translate$1('filterOrDate', this.language)), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.filterDraw = createEvent(this, "filterDraw", 7);
+        this.filterSelection = createEvent(this, "filterSelection", 7);
+        this.filterSelectionReset = createEvent(this, "filterSelectionReset", 7);
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.showFilterId = true;
+        this.activateTicketSearch = false;
+        this.gameId = '';
+        this.playerId = '';
+        this.session = '';
+        this.postMessage = false;
+        this.language = 'en';
+        this.quickFiltersActive = false;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.showFilterModal = false;
+        this.showClearButton = false;
+        this.filterData = {};
+        this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+        this.limitStylingAppends = false;
+    }
+    // reset field values each time the filter modal opens
+    componentDidRender() {
+        // @TODO: to way binding?
+        if (document.getElementById('#FilterById'))
+            document.getElementById('#FilterById').value = '';
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    filterSelectionHandler(event) {
+        if (this.postMessage)
+            window.postMessage({ type: 'filterSelection', event }, window.location.href);
+        if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+            this.filterSelection.emit(event);
+    }
+    filterSelectionResetHandler(event) {
+        if (this.postMessage)
+            window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
+        this.filterSelectionReset.emit(event);
+    }
+    modalCloseEvent() {
+        this.showFilterModal = false;
+    }
+    // Toggle filter modal
+    toggleFilterModal() {
+        this.showFilterModal = true;
+    }
+    // Filter search
+    filterSearch() {
+        this.modalCloseEvent();
+        this.showClearButton = true;
+        this.filterSelectionHandler(this.filterData);
+        console.log(this.showClearButton);
+    }
+    resetSearch() {
+        this.showClearButton = false;
+        this.filterSelectionResetHandler(this.filterDataReset);
+        this.filterData = {};
+    }
+    handleTicketDrawId(event) {
+        this.filterData.ticketDrawId = event.target.value;
+    }
+    handleFilterFrom(event) {
+        this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
+    }
+    handleFilterTo(event) {
+        this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
+    }
+    render() {
+        return (h$2("div", { key: 'd74774bd58fa3df6b0038fd979fb4aec4262d43d', class: "HelperFilters", ref: el => this.stylingContainer = el }, h$2("div", { key: '0827128924ba350888ae81e67e0306e536b15047', class: "FilterButtonsWrapper" }, h$2("button", { key: '73ae5aff5896195cd895410caf44dccfa1ac5cfc', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), console.log('in filter Open', this.showClearButton, this.quickFiltersActive), (this.showClearButton || this.quickFiltersActive) ?
+            h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language))
+            :
+                null), h$2("helper-modal", { key: 'add83df2714fdb69e8dfa7a0f5d1eb0d526fc2b4', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { key: '861b04161876b557184fe49c514867788147e4b9', class: "FilterModalHeader" }, h$2("h3", { key: '7471430912f301ff995c401b08298d9006816216', class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { key: 'af6bd8e253f332c8724e1bb40100ba5e1e59838f', class: "FilterModalBody" }, h$2("input", { key: '9edc7e14b801d40d4861625264f82b2fa213a770', id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", { key: '9665b359f9d6da19f120eb9bb315c4b144c80ced' }, translate$1('filterOrDate', this.language)), h$2("div", { key: 'd155c7d73a719aaedc581f51aa97cf21ec3125df', class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { key: '586fb38bc5c718a4afa06ebec96bec0fd46949eb', value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { key: '42e8965b2c740c19c53687c114faf6aa22f11de8', value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { key: '7529eef1b25d130d183a55e45862418444054d3c', class: "FilterModalFooter" }, h$2("button", { key: '7dac7dc7b01c1c66dde7c6670a352f597b3f75fc', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
+    }
 };
-HelperFilters.style = helperFiltersCss;
+HelperFilters.style = HelperFiltersStyle0;
 
 /**
  * @name isMobile
@@ -23530,66 +24404,59 @@ HelperFilters.style = helperFiltersCss;
  * @returns {Boolean} true or false
  */
 const isMobile = (userAgent) => {
-  return !!(userAgent.toLowerCase().match(/android/i) ||
-    userAgent.toLowerCase().match(/blackberry|bb/i) ||
-    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
-    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
 };
 
 const helperModalCss = ":host{display:block}.HelperModalWrapper{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:1}.HelperModalVisible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.HelperModalContent{position:relative;border:solid 1px #848e97;box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:80%;max-height:350px}.HelperModalClose{cursor:pointer;position:absolute;top:15px;right:15px;font-size:20px;color:#000}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:#000}";
+const HelperModalStyle0 = helperModalCss;
 
 const HelperModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cancel = createEvent(this, "modalCloseEvent", 7);
-    /**
-     * Toggles if the helper is visible or not
-     */
-    this.visible = true;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.limitStylingAppends = false;
-    this.userAgent = window.navigator.userAgent;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  handleHelperModalClose() {
-    this.visible = false;
-    this.cancel.emit();
-  }
-  ;
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cancel = createEvent(this, "modalCloseEvent", 7);
+        this.userAgent = window.navigator.userAgent;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.titleModal = undefined;
+        this.visible = true;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.limitStylingAppends = false;
+    }
+    handleHelperModalClose() {
+        this.visible = false;
+        this.cancel.emit();
+    }
+    ;
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    render() {
+        return ((this.visible &&
+            h$2("div", { key: 'ba2aed789565b37bfdbb34bdf3ccace827231653', class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, h$2("div", { key: '151ca4cd80d259ac955b92b10bf6f0df2698a937', class: "HelperModalWrapper HelperModalVisible" }, h$2("div", { key: '804cb1dea73321c4935e4a8ddb1136e98e89a070', class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h$2("span", { key: '30cf7928c1e4baa53f3514fc1930823db76c874c', class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h$2("slot", { key: '5c1323a98cdcd09669020a00affe5673856e807e' }))))));
     }
-    // end custom styling area
-  }
-  render() {
-    return ((this.visible &&
-      h$2("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, h$2("div", { class: "HelperModalWrapper HelperModalVisible" }, h$2("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h$2("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h$2("slot", null))))));
-  }
 };
-HelperModal.style = helperModalCss;
+HelperModal.style = HelperModalStyle0;
 
 export { HelperFilters as helper_filters, HelperModal as helper_modal };