@likable-hair/svelte 3.1.38 → 3.1.40

package/dist/components/composed/forms/YearPickerTextField.svelte

@@ -48,7 +48,6 @@ onMount(() => {
 function handleInputChange(event) {
   setTimeout(() => {
     const typedValue = mask.value;
-    console.log(typedValue);
     if (typedValue !== void 0 && typedValue !== null) {
       const yearIndex = pattern.indexOf("yyyy");
       const year = typedValue.substring(yearIndex, yearIndex + 4);
@@ -165,6 +164,9 @@ $:
           bind:selectedYear={selectedYear}
           on:click={handleYearSelect}
           {disabled}
+          selectableYears={[...Array((maxYearInRange - minYearInRange) + 1).keys()].map((v) => {
+            return minYearInRange + v
+          })}
         ></YearSelector>
       </div>
     </Menu>

package/dist/components/composed/list/PaginatedTable.svelte

@@ -81,6 +81,8 @@ function handleFiltersChange() {
       on:applyFilter={handleFiltersChange}
       on:removeFilter={handleFiltersChange}
       on:removeAllFilters={handleFiltersChange}
+      on:removeFilter
+      on:removeAllFilter
       --filters-default-wrapper-width="100%"
       {lang}
       {editFilterMode}

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -32,6 +32,10 @@ declare const __propDef: {
         calculateRowClasses?: CalculateRowClasses | undefined;
     };
     events: {
+        removeFilter: CustomEvent<{
+            filter: import("../../../utils/filters/filters").Filter;
+        }>;
+        removeAllFilter: CustomEvent<any>;
         sort: CustomEvent<{
             sortedBy: string | undefined;
             sortDirection: string;

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte

@@ -93,7 +93,24 @@ $:
                     --icon-default-size="1.3rem"
                     deletable={false}
                     on:select={(e) => handleMenuSelection(e.detail.option)}
-                  ></ColorInvertedSelector>
+                  >
+                    <svelte:fragment slot="prepend" let:option let:handleClickClose let:index>
+                      <slot name="prepend" {option} {handleClickClose} {index} {sidebarExpanded}>
+                        {#if !!option.icon}
+                          <Icon
+                            name={option.icon}
+                          ></Icon>
+                        {/if}
+                      </slot>
+                    </svelte:fragment>
+                    <svelte:fragment slot="option" let:option>
+                      <slot name="option" {option}>
+                        <div class="label">
+                          {option.label}
+                        </div>
+                      </slot>
+                    </svelte:fragment>
+                  </ColorInvertedSelector>
                 </div>
               </slot>
             </div>
@@ -150,6 +167,14 @@ $:
     transition: all .2s cubic-bezier(.4,0,.2,1);
   }
 
+  .label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    position: relative;
+  }
+
   @media (min-width: 1024.1px) {
     .side-bar.opened {
       width: var(

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte.d.ts

@@ -42,6 +42,15 @@ declare const __propDef: {
             hamburgerVisible: boolean;
             sidebarExpanded: boolean;
         };
+        prepend: {
+            option: Option;
+            handleClickClose: (option: Option, index: number) => void;
+            index: any;
+            sidebarExpanded: boolean;
+        };
+        option: {
+            option: Option;
+        };
         user: {
             hamburgerVisible: boolean;
             sidebarExpanded: boolean;

package/dist/components/simple/lists/ColorInvertedSelector.svelte

@@ -29,7 +29,7 @@ function handleClickClose(option, index) {
   role="listbox"
 >
   {#each options as option, index}
-    <li>
+    <li >
       <button
         class:selected={selectedIndex == index}
         class="element {clazz?.element || ''} {selectedIndex == index ? clazz.selected : ''}"
@@ -39,7 +39,7 @@ function handleClickClose(option, index) {
         <div class="icon-and-title">
           {#if !!$$slots.prepend || !!option.icon}
             <div>
-              <slot name="prepend" {option} {handleClickClose}>
+              <slot name="prepend" {option} {handleClickClose} {index}>
                 {#if !!option.icon}
                   <Icon
                     name={option.icon}
@@ -113,6 +113,7 @@ function handleClickClose(option, index) {
       var(--color-inverted-selector-default-font-size)
     );
     max-width: 100%;
+    position: var(--color-inverted-selector-icon-and-title-position, relative);
   }
 
   .element {
@@ -138,6 +139,7 @@ function handleClickClose(option, index) {
     background-color: transparent;
     font-size: inherit;
     color: inherit;
+    position: var(--color-inverted-selector-element-position, relative);
   }
 
   .label {
@@ -145,6 +147,7 @@ function handleClickClose(option, index) {
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1;
+    position: relative;
   }
 
   .element:not(.selected):hover {

package/dist/components/simple/lists/ColorInvertedSelector.svelte.d.ts

@@ -34,6 +34,7 @@ declare const __propDef: {
         prepend: {
             option: Option;
             handleClickClose: (option: Option, index: number) => void;
+            index: any;
         };
         option: {
             option: Option;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.1.38",
+  "version": "3.1.40",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",