wj-elements 0.1.129 → 0.1.130

package/dist/dark.css

@@ -5,216 +5,219 @@
 :host,
 .wje-theme-dark,
 .dark {
-  color-scheme: dark;
-
-  --wje-font-family: -apple-system, BlinkMacSystemFont,  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
-  --wje-font-family-secondary: "Montserrat", -apple-system, BlinkMacSystemFont,  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
-  --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont,"Inter UI",  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
-
-  --wje-border-size: 0px;
-  --wje-border-style: solid;
-
-  --wje-backdrop: rgb(0, 0, 0);
-  --wje-backdrop-opacity: .3;
-
-  /*COLORS*/
-  --wje-color: var(--wje-color-contrast-11);
-  --wje-color-dark: hsl(0, 0%, 29%);
-  --wje-color-light: hsl(0 0% 95%);
-  --wje-background: var(--wje-color-contrast-2);
-  --wje-border-color: var(--wje-color-contrast-4);
-
-  --wje-card-background: var(--wje-color-contrast-3);
-  --wje-card-color: var(--wje-color-white) !important;
-
-  --wje-color-primary: var(--wje-color-primary-1);
-  --wje-color-complete: var(--wje-color-complete-1);
-  --wje-color-success: var(--wje-color-success-1);
-  --wje-color-warning: var(--wje-color-warning-1);
-  --wje-color-danger: var(--wje-color-danger-1);
-  --wje-color-info: var(--wje-color-info-1);
-  --wje-color-menu: hsl(220, 15%, 15%);
-  --wje-color-contrast: hsl(210, 11%, 15%);
-
-  --wje-color-white: #fff;
-  --wje-color-black: #000;
-
-  /* Primary */
-  --wje-color-primary-1: hsla(254, 50%, 21%, 1);
-  --wje-color-primary-2: hsla(254, 52%, 24%, 1);
-  --wje-color-primary-3: hsla(254, 52%, 35%, 1);
-  --wje-color-primary-4: hsla(254, 54%, 39%, 1);
-  --wje-color-primary-5: hsla(254, 54%, 47%, 1);
-  --wje-color-primary-6: hsla(254, 54%, 53%, 1);
-  --wje-color-primary-7: hsla(254, 54%, 57%, 1);
-  --wje-color-primary-8: hsla(254, 68%, 66%, 1);
-  --wje-color-primary-9: hsla(254, 88%, 78%, 1);
-  --wje-color-primary-10: hsla(254, 70%, 81%, 1);
-  --wje-color-primary-11: hsla(254, 69%, 88%, 1);
-
-  /* Complete */
-  --wje-color-complete-1: hsla(211, 91%, 16%, 1);
-  --wje-color-complete-2: hsla(211, 91%, 23%, 1);
-  --wje-color-complete-3: hsla(211, 91%, 31%, 1);
-  --wje-color-complete-4: hsla(211, 93%, 35%, 1);
-  --wje-color-complete-5: hsla(211, 93%, 39%, 1);
-  --wje-color-complete-6: hsla(211, 93%, 44%, 1);
-  --wje-color-complete-7: hsla(211, 93%, 49%, 1);
-  --wje-color-complete-8: hsla(211, 93%, 55%, 1);
-  --wje-color-complete-9: hsla(211, 100%, 75%, 1);
-  --wje-color-complete-10: hsla(211, 100%, 81%, 1);
-  --wje-color-complete-11: hsla(211, 93%, 85%, 1);
-
-  /* Success */
-  --wje-color-success-1: hsla(158, 93%, 13%, 1);
-  --wje-color-success-2: hsla(158, 94%, 16%, 1);
-  --wje-color-success-3: hsla(158, 95%, 19%, 1);
-  --wje-color-success-4: hsla(158, 96%, 22%, 1);
-  --wje-color-success-5: hsla(158, 96%, 24%, 1);
-  --wje-color-success-6: hsla(158, 95%, 27%, 1);
-  --wje-color-success-7: hsla(158, 96%, 31%, 1);
-  --wje-color-success-8: hsla(158, 96%, 35%, 1);
-  --wje-color-success-9: hsla(158, 86%, 48%, 1);
-  --wje-color-success-10: hsla(158, 78%, 62%, 1);
-  --wje-color-success-11: hsla(158, 80%, 75%, 1);
-
-  /* Warning */
-  --wje-color-warning-1: hsla(47, 75%, 19%, 1);
-  --wje-color-warning-2: hsla(47, 75%, 23%, 1);
-  --wje-color-warning-3: hsla(47, 75%, 27%, 1);
-  --wje-color-warning-4: hsla(47, 74%, 31%, 1);
-  --wje-color-warning-5: hsla(47, 78%, 37%, 1);
-  --wje-color-warning-6: hsla(47, 78%, 41%, 1);
-  --wje-color-warning-7: hsla(47, 78%, 45%, 1);
-  --wje-color-warning-8: hsla(47, 80%, 52%, 1);
-  --wje-color-warning-9: hsla(47, 80%, 67%, 1);
-  --wje-color-warning-10: hsla(47, 90%, 74%, 1);
-  --wje-color-warning-11: hsla(47, 90%, 80%, 1);
-
-  /* Danger */
-  --wje-color-danger-1: hsla(3, 82%, 17%, 1);
-  --wje-color-danger-2: hsla(3, 82%, 19%, 1);
-  --wje-color-danger-3: hsla(3, 83%, 28%, 1);
-  --wje-color-danger-4: hsla(3, 83%, 32%, 1);
-  --wje-color-danger-5: hsla(3, 83%, 36%, 1);
-  --wje-color-danger-6: hsla(3, 83%, 40%, 1);
-  --wje-color-danger-7: hsla(3, 82%, 44%, 1);
-  --wje-color-danger-8: hsla(3, 72%, 58%, 1);
-  --wje-color-danger-9: hsla(3, 80%, 70%, 1);
-  --wje-color-danger-10: hsla(3, 80%, 76%, 1);
-  --wje-color-danger-11: hsla(4, 80%, 82%, 1);
-
-  /* Info */
-  --wje-color-info-1: hsla(207, 36%, 16%, 1);
-  --wje-color-info-2: hsla(207, 16%, 27%, 1);
-  --wje-color-info-3: hsla(207, 20%, 35%, 1);
-  --wje-color-info-4: hsla(210, 7%, 45%, 1);
-  --wje-color-info-5: hsla(208, 6%, 55%, 1);
-  --wje-color-info-6: hsla(203, 6%, 62%, 1);
-  --wje-color-info-7: hsla(213, 6%, 69%, 1);
-  --wje-color-info-8: hsla(203, 5%, 71%, 1);
-  --wje-color-info-9: hsla(210, 7%, 78%, 1);
-  --wje-color-info-10: hsla(204, 6%, 85%, 1);
-  --wje-color-info-11: hsla(210, 5%, 92%, 1);
-
-  /* Contrast */
-  --wje-color-contrast-0: hsla(240, 3%, 13%, 1);
-  --wje-color-contrast-1: hsla(240, 6%, 10%, 1);
-  --wje-color-contrast-2: hsla(0, 0%, 0%, 1);
-  --wje-color-contrast-3: hsla(240, 5%, 30%, 1);
-  --wje-color-contrast-4: hsla(240, 5%, 41%, 1);
-  --wje-color-contrast-5: hsla(240, 4%, 58%, 1);
-  --wje-color-contrast-6: hsla(240, 5%, 75%, 1);
-  --wje-color-contrast-7: hsla(240, 5%, 84%, 1);
-  --wje-color-contrast-8: hsla(240, 6%, 90%, 1);
-  --wje-color-contrast-9: hsla(240, 5%, 96%, 1);
-  --wje-color-contrast-10: hsla(0, 0%, 98%, 1);
-  --wje-color-contrast-11: hsla(0, 0%, 100%, 1);
-
-  /*
+    color-scheme: dark;
+
+    --wje-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+        'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --wje-font-family-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+    --wje-border-size: 0px;
+    --wje-border-style: solid;
+
+    --wje-backdrop: rgb(0, 0, 0);
+    --wje-backdrop-opacity: 0.3;
+
+    /*COLORS*/
+    --wje-color: var(--wje-color-contrast-11);
+    --wje-color-dark: hsl(0, 0%, 29%);
+    --wje-color-light: hsl(0 0% 95%);
+    --wje-background: var(--wje-color-contrast-2);
+    --wje-border-color: var(--wje-color-contrast-4);
+
+    --wje-card-background: var(--wje-color-contrast-3);
+    --wje-card-color: var(--wje-color-white) !important;
+
+    --wje-color-primary: var(--wje-color-primary-1);
+    --wje-color-complete: var(--wje-color-complete-1);
+    --wje-color-success: var(--wje-color-success-1);
+    --wje-color-warning: var(--wje-color-warning-1);
+    --wje-color-danger: var(--wje-color-danger-1);
+    --wje-color-info: var(--wje-color-info-1);
+    --wje-color-menu: hsl(220, 15%, 15%);
+    --wje-color-contrast: hsl(210, 11%, 15%);
+
+    --wje-color-white: #fff;
+    --wje-color-black: #000;
+
+    /* Primary */
+    --wje-color-primary-1: hsla(254, 50%, 21%, 1);
+    --wje-color-primary-2: hsla(254, 52%, 24%, 1);
+    --wje-color-primary-3: hsla(254, 52%, 35%, 1);
+    --wje-color-primary-4: hsla(254, 54%, 39%, 1);
+    --wje-color-primary-5: hsla(254, 54%, 47%, 1);
+    --wje-color-primary-6: hsla(254, 54%, 53%, 1);
+    --wje-color-primary-7: hsla(254, 54%, 57%, 1);
+    --wje-color-primary-8: hsla(254, 68%, 66%, 1);
+    --wje-color-primary-9: hsla(254, 88%, 78%, 1);
+    --wje-color-primary-10: hsla(254, 70%, 81%, 1);
+    --wje-color-primary-11: hsla(254, 69%, 88%, 1);
+
+    /* Complete */
+    --wje-color-complete-1: hsla(211, 91%, 16%, 1);
+    --wje-color-complete-2: hsla(211, 91%, 23%, 1);
+    --wje-color-complete-3: hsla(211, 91%, 31%, 1);
+    --wje-color-complete-4: hsla(211, 93%, 35%, 1);
+    --wje-color-complete-5: hsla(211, 93%, 39%, 1);
+    --wje-color-complete-6: hsla(211, 93%, 44%, 1);
+    --wje-color-complete-7: hsla(211, 93%, 49%, 1);
+    --wje-color-complete-8: hsla(211, 93%, 55%, 1);
+    --wje-color-complete-9: hsla(211, 100%, 75%, 1);
+    --wje-color-complete-10: hsla(211, 100%, 81%, 1);
+    --wje-color-complete-11: hsla(211, 93%, 85%, 1);
+
+    /* Success */
+    --wje-color-success-1: hsla(158, 93%, 13%, 1);
+    --wje-color-success-2: hsla(158, 94%, 16%, 1);
+    --wje-color-success-3: hsla(158, 95%, 19%, 1);
+    --wje-color-success-4: hsla(158, 96%, 22%, 1);
+    --wje-color-success-5: hsla(158, 96%, 24%, 1);
+    --wje-color-success-6: hsla(158, 95%, 27%, 1);
+    --wje-color-success-7: hsla(158, 96%, 31%, 1);
+    --wje-color-success-8: hsla(158, 96%, 35%, 1);
+    --wje-color-success-9: hsla(158, 86%, 48%, 1);
+    --wje-color-success-10: hsla(158, 78%, 62%, 1);
+    --wje-color-success-11: hsla(158, 80%, 75%, 1);
+
+    /* Warning */
+    --wje-color-warning-1: hsla(47, 75%, 19%, 1);
+    --wje-color-warning-2: hsla(47, 75%, 23%, 1);
+    --wje-color-warning-3: hsla(47, 75%, 27%, 1);
+    --wje-color-warning-4: hsla(47, 74%, 31%, 1);
+    --wje-color-warning-5: hsla(47, 78%, 37%, 1);
+    --wje-color-warning-6: hsla(47, 78%, 41%, 1);
+    --wje-color-warning-7: hsla(47, 78%, 45%, 1);
+    --wje-color-warning-8: hsla(47, 80%, 52%, 1);
+    --wje-color-warning-9: hsla(47, 80%, 67%, 1);
+    --wje-color-warning-10: hsla(47, 90%, 74%, 1);
+    --wje-color-warning-11: hsla(47, 90%, 80%, 1);
+
+    /* Danger */
+    --wje-color-danger-1: hsla(3, 82%, 17%, 1);
+    --wje-color-danger-2: hsla(3, 82%, 19%, 1);
+    --wje-color-danger-3: hsla(3, 83%, 28%, 1);
+    --wje-color-danger-4: hsla(3, 83%, 32%, 1);
+    --wje-color-danger-5: hsla(3, 83%, 36%, 1);
+    --wje-color-danger-6: hsla(3, 83%, 40%, 1);
+    --wje-color-danger-7: hsla(3, 82%, 44%, 1);
+    --wje-color-danger-8: hsla(3, 72%, 58%, 1);
+    --wje-color-danger-9: hsla(3, 80%, 70%, 1);
+    --wje-color-danger-10: hsla(3, 80%, 76%, 1);
+    --wje-color-danger-11: hsla(4, 80%, 82%, 1);
+
+    /* Info */
+    --wje-color-info-1: hsla(207, 36%, 16%, 1);
+    --wje-color-info-2: hsla(207, 16%, 27%, 1);
+    --wje-color-info-3: hsla(207, 20%, 35%, 1);
+    --wje-color-info-4: hsla(210, 7%, 45%, 1);
+    --wje-color-info-5: hsla(208, 6%, 55%, 1);
+    --wje-color-info-6: hsla(203, 6%, 62%, 1);
+    --wje-color-info-7: hsla(213, 6%, 69%, 1);
+    --wje-color-info-8: hsla(203, 5%, 71%, 1);
+    --wje-color-info-9: hsla(210, 7%, 78%, 1);
+    --wje-color-info-10: hsla(204, 6%, 85%, 1);
+    --wje-color-info-11: hsla(210, 5%, 92%, 1);
+
+    /* Contrast */
+    --wje-color-contrast-0: hsla(240, 3%, 13%, 1);
+    --wje-color-contrast-1: hsla(240, 6%, 10%, 1);
+    --wje-color-contrast-2: hsla(0, 0%, 0%, 1);
+    --wje-color-contrast-3: hsla(240, 5%, 30%, 1);
+    --wje-color-contrast-4: hsla(240, 5%, 41%, 1);
+    --wje-color-contrast-5: hsla(240, 4%, 58%, 1);
+    --wje-color-contrast-6: hsla(240, 5%, 75%, 1);
+    --wje-color-contrast-7: hsla(240, 5%, 84%, 1);
+    --wje-color-contrast-8: hsla(240, 6%, 90%, 1);
+    --wje-color-contrast-9: hsla(240, 5%, 96%, 1);
+    --wje-color-contrast-10: hsla(0, 0%, 98%, 1);
+    --wje-color-contrast-11: hsla(0, 0%, 100%, 1);
+
+    /*
    [ Elements ]
    */
 
-  /* Avatar */
-  --wje-avatar-color: var(--wje-color-contrast-11);
-  --wje-avatar-background-color: var(--wje-color-contrast-3);
-
-  /* Breadcrumb */
-  --wje-breadcrumb-a: var(--wje-color-contrast-8);
-  --wje-breadcrumb-a-hover: var(--wje-color-contrast-6);
-
-  /* Button */
-  --wje-button-border-color: var(--wje-color-contrast-1);
-
-  /* Divider */
-  --wje-divider-border-color: var(--wje-border-color);
-
-  /* File Upload - Item */
-  --wje-file-upload-item-border-width: 1px;
-  --wje-file-upload-item-border-style: solid;
-  --wje-file-upload-item-border-color: var(--wje-border-color);
-
-  /* Input */
-  --wje-input-background-color: var(--wje-background);
-  --wje-input-color: var(--wje-color);
-  --wje-input-color-invalid: var(--wje-color-danger);
-  --wje-input-border-color: var(--wje-border-color);
-  --wje-input-border-color-focus: var(--wje-color-primary);
-
-  /* Item */
-  --wje-item-color: var(--wje-color);
-  --wje-item-border-color: var(--wje-border-color);
-  --wje-item-background: transparent;
-  --wje-item-background-hover: var(--wje-color-contrast-3);
-
-  /* List */
-  --wje-list-background: var(--wje-background);
-
-  /* Menu */
-  --wje-menu-background: var(--wje-background);
-  --wje-menu-border-color: var(--wje-border-color);
-
-  /* Menu - Item */
-  --wje-menu-item-color: var(--wje-color);
-  --wje-menu-item-background: transparent;
-  --wje-menu-item-color-hover: var(--wje-color-contrast-8);
-  --wje-menu-item-background-hover: var(--wje-border-color);
-  --wje-menu-item-color-focus: var(--wje-color-contrast-8);
-  --wje-menu-item-background-focus: var(--wje-border-color);
-  --wje-menu-item-color-active: var(--wje-color-contrast-8);
-  --wje-menu-item-background-active: var(--wje-border-color);
-
-  /* Option */
-  --wje-option-highlighted: var(--wje-color-contrast-3);
-
-  /* Orgchart - Item */
-  --wje-orgchart-item-background: var(--wje-color-contrast-0);
-
-  --wje-orgchart-item-highlight-background: var(--wje-color-complete-2);
-  --wje-orgchart-item-boss-background: var(--wje-color-complete-2);
-  --wje-orgchart-item-hover-background: var(--wje-color-contrast-3);
-
-  --wje-orgchart-item-highlight-border: 1px solid var(--wje-color-complete-3);
-  --wje-orgchart-item-boss-border: 1px solid var(--wje-border-color);
-  --wje-orgchart-item-hover-border: 1px solid var(--wje-color-danger-3);
-
-  /* Rate */
-  --wje-rate-color: var(--wje-color-contrast-11);
-  --wje-rate-selected-color: var(--wje-color-danger-6);
-
-  /* Tab */
-  --wje-tab-color-active: var(--wje-color-primary-11);
-  --wje-tab-color-hover: var(--wje-color-primary-1);
-
-  /* Textarea */
-  --wje-textarea-background-color: var(--wje-background);
-  --wje-textarea-color: var(--wje-color);
-  --wje-textarea-color-invalid: var(--wje-color-danger-1);
-  --wje-textarea-border-color: var(--wje-border-color);
-  --wje-textarea-border-color-focus: var(--wje-color-primary-1);
-
-  /* Tooltip */
-  --wje-tooltip-arrow-color: var(--wje-color-contrast-4);
-  --wje-tooltip-background: var(--wje-color-contrast-4);
-  --wje-tooltip-color: var(--wje-color-contrast-11);
-}
+    /* Avatar */
+    --wje-avatar-color: var(--wje-color-contrast-11);
+    --wje-avatar-background-color: var(--wje-color-contrast-3);
+
+    /* Breadcrumb */
+    --wje-breadcrumb-a: var(--wje-color-contrast-8);
+    --wje-breadcrumb-a-hover: var(--wje-color-contrast-6);
+
+    /* Button */
+    --wje-button-border-color: var(--wje-color-contrast-1);
+
+    /* Divider */
+    --wje-divider-border-color: var(--wje-border-color);
+
+    /* File Upload - Item */
+    --wje-file-upload-item-border-width: 1px;
+    --wje-file-upload-item-border-style: solid;
+    --wje-file-upload-item-border-color: var(--wje-border-color);
+
+    /* Input */
+    --wje-input-background-color: var(--wje-background);
+    --wje-input-color: var(--wje-color);
+    --wje-input-color-invalid: var(--wje-color-danger);
+    --wje-input-border-color: var(--wje-border-color);
+    --wje-input-border-color-focus: var(--wje-color-primary);
+
+    /* Item */
+    --wje-item-color: var(--wje-color);
+    --wje-item-border-color: var(--wje-border-color);
+    --wje-item-background: transparent;
+    --wje-item-background-hover: var(--wje-color-contrast-3);
+
+    /* List */
+    --wje-list-background: var(--wje-background);
+
+    /* Menu */
+    --wje-menu-background: var(--wje-background);
+    --wje-menu-border-color: var(--wje-border-color);
+
+    /* Menu - Item */
+    --wje-menu-item-color: var(--wje-color);
+    --wje-menu-item-background: transparent;
+    --wje-menu-item-color-hover: var(--wje-color-contrast-8);
+    --wje-menu-item-background-hover: var(--wje-border-color);
+    --wje-menu-item-color-focus: var(--wje-color-contrast-8);
+    --wje-menu-item-background-focus: var(--wje-border-color);
+    --wje-menu-item-color-active: var(--wje-color-contrast-8);
+    --wje-menu-item-background-active: var(--wje-border-color);
+
+    /* Option */
+    --wje-option-highlighted: var(--wje-color-contrast-3);
+
+    /* Orgchart - Item */
+    --wje-orgchart-item-background: var(--wje-color-contrast-0);
+
+    --wje-orgchart-item-highlight-background: var(--wje-color-complete-2);
+    --wje-orgchart-item-boss-background: var(--wje-color-complete-2);
+    --wje-orgchart-item-hover-background: var(--wje-color-contrast-3);
+
+    --wje-orgchart-item-highlight-border: 1px solid var(--wje-color-complete-3);
+    --wje-orgchart-item-boss-border: 1px solid var(--wje-border-color);
+    --wje-orgchart-item-hover-border: 1px solid var(--wje-color-danger-3);
+
+    /* Rate */
+    --wje-rate-color: var(--wje-color-contrast-11);
+    --wje-rate-selected-color: var(--wje-color-danger-6);
+
+    /* Tab */
+    --wje-tab-color-active: var(--wje-color-primary-11);
+    --wje-tab-color-hover: var(--wje-color-primary-1);
+
+    /* Textarea */
+    --wje-textarea-background-color: var(--wje-background);
+    --wje-textarea-color: var(--wje-color);
+    --wje-textarea-color-invalid: var(--wje-color-danger-1);
+    --wje-textarea-border-color: var(--wje-border-color);
+    --wje-textarea-border-color-focus: var(--wje-color-primary-1);
+
+    /* Tooltip */
+    --wje-tooltip-arrow-color: var(--wje-color-contrast-4);
+    --wje-tooltip-background: var(--wje-color-contrast-4);
+    --wje-tooltip-color: var(--wje-color-contrast-11);
+}

package/dist/{infinite-scroll.element-R3y_ZQj6.js → infinite-scroll.element-BmojLp3Z.js}

@@ -2,15 +2,12 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { WjElementUtils, event } from "./wje-element.js";
-const styles = "/*\n[ Wj infinite Scroll ]\n*/\n\n:host {\n  overflow-x: auto;\n  width: var(--wje-infinite-scroll-width);\n  height: var(--wje-infinite-scroll-height);\n  display: block;\n}\n\n.native {\n  /*position: relative;*/\n}\n\n.loading {\n  position: sticky;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  background-color: var(--wje-infinite-scroll-loading-bg);\n  &.show {\n    display: flex;\n  }\n}\n\n[name=ending] {\n  display: none;\n  margin-top: 1rem;\n  text-align: center;\n}\n\n[name=ending].show {\n  display: block;\n}";
+const styles = "/*\n[ Wj infinite Scroll ]\n*/\n\n:host {\n    overflow-x: auto;\n    width: var(--wje-infinite-scroll-width);\n    height: var(--wje-infinite-scroll-height);\n    display: block;\n}\n\n.native {\n    /*position: relative;*/\n}\n\n.loading {\n    position: sticky;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 9999;\n    background-color: var(--wje-infinite-scroll-loading-bg);\n    &.show {\n        display: flex;\n    }\n}\n\n[name='ending'] {\n    display: none;\n    margin-top: 1rem;\n    text-align: center;\n}\n\n[name='ending'].show {\n    display: block;\n}\n";
 class InfiniteScroll extends WJElement {
   /**
    * Creates an instance of InfiniteScroll.
-   *
-   * @constructor
-   * @param {Object} options - The options for the InfiniteScroll.
    */
-  constructor(options = {}) {
+  constructor() {
     super();
     __publicField(this, "className", "InfiniteScroll");
     /**
@@ -27,8 +24,7 @@ class InfiniteScroll extends WJElement {
     });
     /**
      * Handles the scroll event.
-     *
-     * @param {Event} e - The event.
+     * @param {Event} e The event.
      */
     __publicField(this, "onScroll", (e) => {
       const { scrollTop, scrollHeight, clientHeight } = e.target;
@@ -57,7 +53,7 @@ class InfiniteScroll extends WJElement {
     /**
      * Interpolates the string.
      * @param template
-     * @param {Object} params - The parameters for interpolation.
+     * @param {object} params The parameters for interpolation.
      * @returns {string} The interpolated string.
      */
     __publicField(this, "interpolate", (template, params) => {
@@ -122,7 +118,6 @@ class InfiniteScroll extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -131,7 +126,6 @@ class InfiniteScroll extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -146,10 +140,6 @@ class InfiniteScroll extends WJElement {
   }
   /**
    * Prepares the component before drawing.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
    */
   beforeDraw() {
     var _a, _b;
@@ -164,11 +154,7 @@ class InfiniteScroll extends WJElement {
     }
   }
   /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
+   * Draws the component and returns a document fragment.
    * @returns {DocumentFragment}
    */
   draw() {
@@ -196,9 +182,6 @@ class InfiniteScroll extends WJElement {
   }
   /**
    * Called after the component has been drawn.
-   * @params {Object} context - The context for drawing.
-   * @params {Object} store - The store for drawing.
-   * @params {Object} params - The parameters for drawing.
    */
   async afterDraw() {
     this.queryParams = this.queryParams || "";
@@ -210,15 +193,17 @@ class InfiniteScroll extends WJElement {
   }
   /**
    * Fetches the pages from the server.
-   *
-   * @param {number} page - The page number.
-   * @returns {Promise<Object>} The response from the server.
+   * @param {number} page The page number.
+   * @returns {Promise<object>} The response from the server.
    */
   async getPages(page) {
     let hasParams = this.url.includes("?");
-    const response = await fetch(`${this.url}${hasParams ? "&" : "?"}page=${page}&size=${this.size}${this == null ? void 0 : this.queryParams}`, {
-      signal: this._signal
-    });
+    const response = await fetch(
+      `${this.url}${hasParams ? "&" : "?"}page=${page}&size=${this.size}${this == null ? void 0 : this.queryParams}`,
+      {
+        signal: this._signal
+      }
+    );
     if (!response.ok) {
       throw new Error(`An error occurred: ${response.status}`);
     }
@@ -240,8 +225,7 @@ class InfiniteScroll extends WJElement {
   }
   /**
    * Checks if there are more pages to load.
-   *
-   * @param {number} page - The page number.
+   * @param {number} page The page number.
    * @returns {boolean} Whether there are more pages to load.
    */
   hasMorePages(page) {
@@ -249,8 +233,7 @@ class InfiniteScroll extends WJElement {
   }
   /**
    * Loads the pages.
-   *
-   * @param {number} page - The page number.
+   * @param {number} page The page number.
    */
   async loadPages(page) {
     this.showLoader();
@@ -266,8 +249,7 @@ class InfiniteScroll extends WJElement {
         this.totalPages = response == null ? void 0 : response.totalPages;
         this.currentPage = page;
         this.placementObj = this;
-        if (this.hasAttribute("placement"))
-          this.placementObj = this.querySelector(this.placement);
+        if (this.hasAttribute("placement")) this.placementObj = this.querySelector(this.placement);
         event.dispatchCustomEvent(this, "wje-infinite-scroll:load", response);
         this.response = response;
         this.customForeach(this.objectName ? response[this.objectName] : response);