@likable-hair/svelte 3.3.13 → 3.3.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/composed/forms/AvatarDropdown.svelte +9 -2
  2. package/dist/components/composed/list/DynamicTable.css +9 -6
  3. package/dist/components/composed/list/DynamicTable.svelte +130 -91
  4. package/dist/components/composed/list/DynamicTable.svelte.d.ts +1 -0
  5. package/dist/components/simple/forms/Autocomplete.svelte +92 -90
  6. package/dist/components/simple/media/Icon.svelte +20 -32
  7. package/dist/components/simple/navigation/Chip.svelte +14 -5
  8. package/dist/css/main.css +36 -0
  9. package/package.json +1 -1
package/dist/components/composed/forms/AvatarDropdown.svelte CHANGED
@@ -80,14 +80,21 @@ let tooltipsActivator = [];
80
80
  src={avatar.src}
81
81
  --avatar-default-border="2px solid rgb(var(--global-color-background-100))"
82
82
  ></Avatar>
83
- <button
83
+ <div
84
84
  on:click|stopPropagation={() => {
85
85
  handleCloseClick({ index: i })
86
86
  }}
87
+ on:keypress={(e) => {
88
+ if (e.key === 'Enter' || e.key === ' ') {
89
+ handleCloseClick({ index: i })
90
+ }
91
+ }}
87
92
  class="unstyled-button remove-button"
93
+ role="button"
94
+ tabindex="0"
88
95
  >
89
96
  <Icon --icon-default-size="10px" name="mdi-close"></Icon>
90
- </button>
97
+ </div>
91
98
  </div>
92
99
  {/each}
93
100
  </div>
package/dist/components/composed/list/DynamicTable.css CHANGED
@@ -1,10 +1,10 @@
1
1
  :root {
2
- --dynamic-table-cell-editor-default-background-color: rgb(var(--global-color-background-300));
3
- --dynamic-table-quick-filter-default-background-color: rgb(var(--global-color-background-300));
4
- --dynamic-table-row-default-background-color-hover: rgb(var(--global-color-background-400));
5
- --dynamic-table-expanded-row-default-background-color: rgb(var(--global-color-background-500));
6
- --dynamic-table-selected-row-default-background-color: rgb(var(--global-color-primary-200));
7
- --dynamic-table-row-default-disabled-background-color: rgb(var(--global-color-primary-400));
2
+ --dynamic-table-default-cell-editor-background-color: rgb(var(--global-color-background-300));
3
+ --dynamic-table-default-quick-filter-background-color: rgb(var(--global-color-background-300));
4
+ --dynamic-table-default-row-background-color-hover: rgb(var(--global-color-background-400));
5
+ --dynamic-table-default-expanded-row-background-color: rgb(var(--global-color-background-500));
6
+ --dynamic-table-default-selected-row-background-color: rgb(var(--global-color-primary-200));
7
+ --dynamic-table-default-row-disabled-background-color: rgb(var(--global-color-primary-400));
8
8
  --dynamic-table-default-header-background-color: rgb(var(--global-color-background-500));
9
9
  --dynamic-table-default-background-color: transparent;
10
10
  --dynamic-table-default-max-height: 70vh;
@@ -16,4 +16,7 @@
16
16
  --dynamic-table-default-header-border-radius: 5px;
17
17
  --dynamic-table-default-header-height: 30px;
18
18
  --dynamic-table-default-row-min-height: auto;
19
+ --dynamic-table-default-end-line-background-color: transparent;
20
+ --dynamic-table-default-end-line-color: rgb(var(--global-color-contrast-500));
21
+ --dynamic-table-default-end-line-text-color: rgb(var(--global-color-contrast-500));
19
22
  }
package/dist/components/composed/list/DynamicTable.svelte CHANGED
@@ -35,10 +35,10 @@ import CircularLoader from "../../simple/loaders/CircularLoader.svelte";
35
35
  onMount(() => {
36
36
  updateHeaderHeight();
37
37
  window.addEventListener("resize", updateHeaderHeight);
38
- tableContainer.addEventListener("scroll", setReachedBottom);
38
+ tableContainer.addEventListener("scroll", setReachedBottomOrTop);
39
39
  return () => {
40
40
  window.removeEventListener("resize", updateHeaderHeight);
41
- tableContainer.removeEventListener("scroll", setReachedBottom);
41
+ tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
42
42
  };
43
43
  });
44
44
  let mainHeader;
@@ -48,9 +48,26 @@ function updateHeaderHeight() {
48
48
  document.documentElement.style.setProperty("--main-header-height", headerHeight + "px");
49
49
  }
50
50
  }
51
- function setReachedBottom() {
51
+ function setReachedBottomOrTop() {
52
52
  reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
53
+ reachedTop = tableContainer.scrollTop === 0;
53
54
  }
55
+ $:
56
+ if (reachedBottom && rows.length < totalRows) {
57
+ setTimeout(() => {
58
+ if (reachedBottom) {
59
+ handleLoadForward();
60
+ }
61
+ }, 30);
62
+ }
63
+ $:
64
+ if (reachedTop && currentSectionNumber > 0) {
65
+ setTimeout(() => {
66
+ if (reachedTop) {
67
+ handleLoadBackward();
68
+ }
69
+ }, 30);
70
+ }
54
71
  const [send, receive] = crossfade({
55
72
  duration: 500,
56
73
  fallback(node, params) {
@@ -70,7 +87,7 @@ let clazz = {};
70
87
  export { clazz as class };
71
88
  const dispatch = createEventDispatcher();
72
89
  export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = "id", numberOfResultsVisible = false, endLineVisible = false;
73
- let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false;
90
+ let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false, reachedTop = false;
74
91
  $:
75
92
  totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
76
93
  $:
@@ -658,75 +675,78 @@ function findAnchorElement(key) {
658
675
  />
659
676
 
660
677
  <slot name="search-bar" {handleSearchChange}>
661
- <div class="search-bar-container">
662
- {#if searchBarVisible}
663
- <SimpleTextField
664
- placeholder={searchBarPlaceholder}
665
- appendInnerIcon="mdi-magnify"
666
- bind:value={searchText}
667
- bind:input={searchBarInput}
668
- on:keydown={handleSearchBoxKeydown}
669
- --simple-textfield-default-width="450px"
670
- --simple-textfield-border-radius= 0.5rem
671
- --simple-textfield-background-color= transparent
672
- --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
673
- --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
674
- />
675
- {/if}
678
+ {#if searchBarVisible || filtersVisible}
679
+ <div class="search-bar-container">
680
+ {#if searchBarVisible}
681
+ <SimpleTextField
682
+ placeholder={searchBarPlaceholder}
683
+ appendInnerIcon="mdi-magnify"
684
+ bind:value={searchText}
685
+ bind:input={searchBarInput}
686
+ on:keydown={handleSearchBoxKeydown}
687
+ --simple-textfield-default-width="450px"
688
+ --simple-textfield-border-radius= 0.5rem
689
+ --simple-textfield-background-color= transparent
690
+ --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
691
+ --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
692
+ />
693
+ {/if}
676
694
 
677
- {#if filtersVisible}
678
- <div style="margin-left: 20px;">
679
- <Filters
680
- bind:filters
681
- on:applyFilter={() => {
682
- handleSearchChange(searchText);
683
- }}
684
- on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
685
- on:removeAllFilters={() => handleRemoveAllFilters()}
686
- --filters-default-wrapper-width="100%"
687
- {lang}
688
- {editFilterMode}
689
- {showActiveFilters}
690
- >
691
- <svelte:fragment slot="append">
692
- <slot name="filter-append" />
693
- </svelte:fragment>
694
- <svelte:fragment slot="custom-chip" let:filter>
695
- <slot name="custom-filter-chip" {filter} />
696
- </svelte:fragment>
697
- <svelte:fragment
698
- slot="custom"
699
- let:filter
700
- let:updateFunction
701
- let:mAndDown
695
+ {#if filtersVisible}
696
+ <div style="margin-left: 20px;">
697
+ <Filters
698
+ bind:filters
699
+ on:applyFilter={() => {
700
+ handleSearchChange(searchText);
701
+ }}
702
+ on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
703
+ on:removeAllFilters={() => handleRemoveAllFilters()}
704
+ --filters-default-wrapper-width="100%"
705
+ {lang}
706
+ {editFilterMode}
707
+ {showActiveFilters}
702
708
  >
703
- <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
704
- </svelte:fragment>
709
+ <svelte:fragment slot="append">
710
+ <slot name="filter-append" />
711
+ </svelte:fragment>
712
+ <svelte:fragment slot="custom-chip" let:filter>
713
+ <slot name="custom-filter-chip" {filter} />
714
+ </svelte:fragment>
715
+ <svelte:fragment
716
+ slot="custom"
717
+ let:filter
718
+ let:updateFunction
719
+ let:mAndDown
720
+ >
721
+ <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
722
+ </svelte:fragment>
705
723
 
706
- <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues let:handleRemoveAllFilters={removeAllFilters}>
707
- {#key filters}
708
- <DynamicFilters
709
- {lang}
710
- {filters}
711
- {mAndDown}
712
- on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}
713
- on:removeAllFilters={() => handleRemoveAllFilters(removeAllFilters)}
714
- >
715
- <svelte:fragment slot="custom" let:filter let:mAndDown>
716
- <slot name="custom-filter" {filter} {updateMultiFilterValues} {mAndDown}></slot>
717
- </svelte:fragment>
718
- </DynamicFilters>
719
- {/key}
720
- </svelte:fragment>
721
- </Filters>
722
- </div>
723
- {/if}
724
- </div>
724
+ <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues let:handleRemoveAllFilters={removeAllFilters}>
725
+ {#key filters}
726
+ <DynamicFilters
727
+ {lang}
728
+ {filters}
729
+ {mAndDown}
730
+ on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}
731
+ on:removeAllFilters={() => handleRemoveAllFilters(removeAllFilters)}
732
+ >
733
+ <svelte:fragment slot="custom" let:filter let:mAndDown>
734
+ <slot name="custom-filter" {filter} {updateMultiFilterValues} {mAndDown}></slot>
735
+ </svelte:fragment>
736
+ </DynamicFilters>
737
+ {/key}
738
+ </svelte:fragment>
739
+ </Filters>
740
+ </div>
741
+ {/if}
742
+ </div>
743
+ {/if}
725
744
  </slot>
726
745
 
727
- {#if quickFiltersVisible}
746
+ {#if quickFiltersVisible || numberOfResultsVisible}
747
+ <div class="quick-filters-results-container">
728
748
  <div class="quick-filters">
729
- {#if !!quickFilters && quickFilters.length > 0}
749
+ {#if !!quickFilters && quickFilters.length > 0 && quickFiltersVisible}
730
750
  {#each quickFilters as quickFilter}
731
751
  <div
732
752
  class={quickFilter.active ? "active-quick-filters" : "non-active-quick-filters"}
@@ -757,23 +777,24 @@ function findAnchorElement(key) {
757
777
  {/each}
758
778
  {/if}
759
779
  </div>
780
+ {#if numberOfResultsVisible}
781
+ <div class='results-number'>
782
+ { lang == 'en' ? 'Results: ' : 'Risultati: '}
783
+ {#if !loading}
784
+ {totalRows || rows.length}
785
+ {:else}
786
+ <CircularLoader
787
+ {loading}
788
+ --circular-loader-height='10px'
789
+ ></CircularLoader>
790
+ {/if}
791
+ </div>
792
+ {/if}
793
+ </div>
760
794
  {/if}
761
795
 
762
- {#if numberOfResultsVisible}
763
- <div class='results-number'>
764
- { lang == 'en' ? 'Results: ' : 'Risultati: '}
765
- {#if !loading}
766
- {totalRows || rows.length}
767
- {:else}
768
- <CircularLoader
769
- {loading}
770
- --circular-loader-height='10px'
771
- ></CircularLoader>
772
- {/if}
773
- </div>
774
- {/if}
775
796
  <div class="outer-container">
776
- <div class="inner-container" bind:this={tableContainer}>
797
+ <div class="inner-container" bind:this={tableContainer} on:scroll>
777
798
  <!-- <div class="table-container" bind:this={tableContainer}> -->
778
799
  <InfiniteScroll
779
800
  on:loadMore={handleLoadBackward}
@@ -915,11 +936,11 @@ function findAnchorElement(key) {
915
936
  !!row.item.disableEdit ?
916
937
  !!row.item.rowDisableBackgroundColor ?
917
938
  row.item.rowDisableBackgroundColor :
918
- 'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-row-default-disabled-background-color))' :
939
+ 'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-default-row-disabled-background-color))' :
919
940
  expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey] ) != -1 ?
920
- 'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-expanded-row-default-background-color))' :
941
+ 'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-default-expanded-row-background-color))' :
921
942
  !!selectedItems.find(i => i[uniqueKey] == row.item[uniqueKey]) ?
922
- 'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-selected-row-default-background-color))' :
943
+ 'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-row-background-color))' :
923
944
  ""
924
945
  }
925
946
  class:row-activator={cellEditorIndexRow == indexRow && !cellEditorSubItem}
@@ -1314,6 +1335,7 @@ function findAnchorElement(key) {
1314
1335
  multiple
1315
1336
  items={quickFilterActive.type.items}
1316
1337
  bind:values={quickFilterActive.type.values}
1338
+ --autocomplete-border-radius= 0.5rem
1317
1339
  --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
1318
1340
  --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
1319
1341
  >
@@ -1574,7 +1596,6 @@ function findAnchorElement(key) {
1574
1596
  .inner-container {
1575
1597
  overflow-y: auto;
1576
1598
  margin-right: -15px;
1577
- padding-right: 15px;
1578
1599
  max-height: var(--dynamic-table-max-height, var(--dynamic-table-default-max-height));
1579
1600
  }
1580
1601
 
@@ -1717,7 +1738,7 @@ function findAnchorElement(key) {
1717
1738
  .item-row:hover {
1718
1739
  background-color: var(
1719
1740
  --dynamic-table-row-background-color-hover,
1720
- var(--dynamic-table-row-default-background-color-hover)
1741
+ var(--dynamic-table-default-row-background-color-hover)
1721
1742
  );
1722
1743
  }
1723
1744
 
@@ -1732,7 +1753,7 @@ function findAnchorElement(key) {
1732
1753
  border-radius: 10px;
1733
1754
  background-color: var(
1734
1755
  --dynamic-table-cell-editor-background-color,
1735
- var(--dynamic-table-cell-editor-default-background-color)
1756
+ var(--dynamic-table-default-cell-editor-background-color)
1736
1757
  );
1737
1758
  height: 200px;
1738
1759
  width: 500px;
@@ -1741,7 +1762,7 @@ function findAnchorElement(key) {
1741
1762
  .row-activator {
1742
1763
  background-color: var(
1743
1764
  --dynamic-table-row-background-color-hover,
1744
- var(--dynamic-table-row-default-background-color-hover)
1765
+ var(--dynamic-table-default-row-background-color-hover)
1745
1766
  );
1746
1767
  }
1747
1768
 
@@ -1756,7 +1777,7 @@ function findAnchorElement(key) {
1756
1777
  border-radius: 10px;
1757
1778
  background-color: var(
1758
1779
  --dynamic-table-quick-filter-background-color,
1759
- var(--dynamic-table-quick-filter-default-background-color)
1780
+ var(--dynamic-table-default-quick-filter-background-color)
1760
1781
  );
1761
1782
  }
1762
1783
 
@@ -1803,6 +1824,11 @@ function findAnchorElement(key) {
1803
1824
  margin-bottom: 10px;
1804
1825
  }
1805
1826
 
1827
+ .quick-filters-results-container {
1828
+ display: flex;
1829
+ justify-content: space-between;
1830
+ }
1831
+
1806
1832
  .vertical-quick-filters {
1807
1833
  display: flex;
1808
1834
  flex-direction: column;
@@ -1866,7 +1892,10 @@ function findAnchorElement(key) {
1866
1892
  bottom: 0;
1867
1893
  left: 0;
1868
1894
  width: 100%;
1869
- background: white;
1895
+ background: var(
1896
+ --dynamic-table-end-line-background-color,
1897
+ var(--dynamic-table-default-end-line-background-color)
1898
+ );
1870
1899
  display: flex;
1871
1900
  justify-content: center;
1872
1901
  align-items: center;
@@ -1876,10 +1905,20 @@ function findAnchorElement(key) {
1876
1905
  .line {
1877
1906
  flex-grow: 1;
1878
1907
  height: 1px;
1879
- background: rgb(var(--global-color-contrast-800));
1908
+ background: var(
1909
+ --dynamic-table-end-line-color,
1910
+ var(--dynamic-table-default-end-line-color)
1911
+ );
1880
1912
  margin: 0 10px;
1881
1913
  }
1882
1914
 
1915
+ .text {
1916
+ color: var(
1917
+ --dynamic-table-end-line-text-color,
1918
+ var(--dynamic-table-default-end-line-text-color)
1919
+ );
1920
+ }
1921
+
1883
1922
  .results-number {
1884
1923
  margin: 0px 0px 4px 4px;
1885
1924
  display: flex;
package/dist/components/composed/list/DynamicTable.svelte.d.ts CHANGED
@@ -165,6 +165,7 @@ declare const __propDef: {
165
165
  endLineVisible?: boolean | undefined;
166
166
  };
167
167
  events: {
168
+ scroll: Event;
168
169
  click: MouseEvent;
169
170
  sort: CustomEvent<{
170
171
  sortedBy: string | undefined;
package/dist/components/simple/forms/Autocomplete.svelte CHANGED
@@ -221,104 +221,106 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
221
221
  </slot>
222
222
  </div>
223
223
 
224
- <slot name="menu">
225
- {#if !mobileDrawer}
226
- <Menu
227
- {activator}
228
- _width={localMenuWidth || ""}
229
- _height={menuHeight}
230
- _maxHeight="300px"
231
- _boxShadow={menuBoxShadow}
232
- _borderRadius={menuBorderRadius}
233
- bind:open={menuOpened}
234
- anchor="bottom-center"
235
- closeOnClickOutside
236
- bind:refreshPosition
237
- bind:menuElement
238
- bind:openingId={openingId}
239
- flipOnOverflow
240
- >
241
- <ul
242
- class={clazz.menu || ''}
243
- style:background-color="rgb(var(--global-color-background-100))"
224
+ {#key searchText}
225
+ <slot name="menu">
226
+ {#if !mobileDrawer}
227
+ <Menu
228
+ {activator}
229
+ _width={localMenuWidth || ""}
230
+ _height={menuHeight}
231
+ _maxHeight="300px"
232
+ _boxShadow={menuBoxShadow}
233
+ _borderRadius={menuBorderRadius}
234
+ bind:open={menuOpened}
235
+ anchor="bottom-center"
236
+ closeOnClickOutside
237
+ bind:refreshPosition
238
+ bind:menuElement
239
+ bind:openingId={openingId}
240
+ flipOnOverflow
244
241
  >
245
- {#each filteredItems as item, index}
246
- <li class="item-{index}">
247
- <slot
248
- name="item"
249
- {item}
250
- {index}
251
- selected={(values || []).findIndex((i) => {
252
- return i.value == item.value;
253
- }) != -1}
254
- >
255
- <div
256
- class:selection-item={true}
257
- class:focused={index == focusedIndex}
258
- class:selected={(values || []).findIndex((i) => {
242
+ <ul
243
+ class={clazz.menu || ''}
244
+ style:background-color="rgb(var(--global-color-background-100))"
245
+ >
246
+ {#each filteredItems as item, index}
247
+ <li class="item-{index}">
248
+ <slot
249
+ name="item"
250
+ {item}
251
+ {index}
252
+ selected={(values || []).findIndex((i) => {
259
253
  return i.value == item.value;
260
254
  }) != -1}
261
- on:click={() => toggle(item)}
262
- on:keypress={() => toggle(item)}
263
- role="button"
264
- tabindex="0"
265
255
  >
266
- <slot name="item-label" {item}>
267
- {item.label}
268
- </slot>
269
- </div>
270
- </slot>
271
- </li>
272
- {/each}
273
- </ul>
274
- </Menu>
275
- {:else}
276
- <MenuOrDrawer
277
- {activator}
278
- _width={localMenuWidth || ""}
279
- _height={menuHeight}
280
- _maxHeight="300px"
281
- _boxShadow={menuBoxShadow}
282
- _borderRadius={menuBorderRadius}
283
- bind:open={menuOpened}
284
- on:close
285
- >
286
- <ul
287
- class={clazz.menu || ''}
288
- style:background-color="rgb(var(--global-color-background-100))"
256
+ <div
257
+ class:selection-item={true}
258
+ class:focused={index == focusedIndex}
259
+ class:selected={(values || []).findIndex((i) => {
260
+ return i.value == item.value;
261
+ }) != -1}
262
+ on:click={() => toggle(item)}
263
+ on:keypress={() => toggle(item)}
264
+ role="button"
265
+ tabindex="0"
266
+ >
267
+ <slot name="item-label" {item}>
268
+ {item.label}
269
+ </slot>
270
+ </div>
271
+ </slot>
272
+ </li>
273
+ {/each}
274
+ </ul>
275
+ </Menu>
276
+ {:else}
277
+ <MenuOrDrawer
278
+ {activator}
279
+ _width={localMenuWidth || ""}
280
+ _height={menuHeight}
281
+ _maxHeight="300px"
282
+ _boxShadow={menuBoxShadow}
283
+ _borderRadius={menuBorderRadius}
284
+ bind:open={menuOpened}
285
+ on:close
289
286
  >
290
- {#each filteredItems as item, index}
291
- <li class="item-{index}">
292
- <slot
293
- name="item"
294
- {item}
295
- {index}
296
- selected={(values || []).findIndex((i) => {
297
- return i.value == item.value;
298
- }) != -1}
299
- >
300
- <div
301
- class:selection-item={true}
302
- class:focused={index == focusedIndex}
303
- class:selected={(values || []).findIndex((i) => {
287
+ <ul
288
+ class={clazz.menu || ''}
289
+ style:background-color="rgb(var(--global-color-background-100))"
290
+ >
291
+ {#each filteredItems as item, index}
292
+ <li class="item-{index}">
293
+ <slot
294
+ name="item"
295
+ {item}
296
+ {index}
297
+ selected={(values || []).findIndex((i) => {
304
298
  return i.value == item.value;
305
299
  }) != -1}
306
- on:click={() => toggle(item)}
307
- on:keypress={() => toggle(item)}
308
- role="button"
309
- tabindex="0"
310
300
  >
311
- <slot name="item-label" {item}>
312
- {item.label}
313
- </slot>
314
- </div>
315
- </slot>
316
- </li>
317
- {/each}
318
- </ul>
319
- </MenuOrDrawer>
320
- {/if}
321
- </slot>
301
+ <div
302
+ class:selection-item={true}
303
+ class:focused={index == focusedIndex}
304
+ class:selected={(values || []).findIndex((i) => {
305
+ return i.value == item.value;
306
+ }) != -1}
307
+ on:click={() => toggle(item)}
308
+ on:keypress={() => toggle(item)}
309
+ role="button"
310
+ tabindex="0"
311
+ >
312
+ <slot name="item-label" {item}>
313
+ {item.label}
314
+ </slot>
315
+ </div>
316
+ </slot>
317
+ </li>
318
+ {/each}
319
+ </ul>
320
+ </MenuOrDrawer>
321
+ {/if}
322
+ </slot>
323
+ {/key}
322
324
 
323
325
  <style>
324
326
  ul {
package/dist/components/simple/media/Icon.svelte CHANGED
@@ -5,16 +5,13 @@ import "../common/materialDesign.css";
5
5
  </script>
6
6
 
7
7
  {#if click}
8
- <button
8
+ <span
9
+ role="button"
9
10
  on:click
10
11
  on:keypress
11
- class="{clazz}"
12
+ class="icon mdi {name} {clazz} click"
12
13
  {tabindex}
13
- >
14
- <span
15
- class="icon mdi {name} {clazz}"
16
- />
17
- </button>
14
+ />
18
15
  {:else}
19
16
  <span
20
17
  class="icon mdi {name} {clazz}"
@@ -22,31 +19,6 @@ import "../common/materialDesign.css";
22
19
  {/if}
23
20
 
24
21
  <style>
25
- button {
26
- background: none;
27
- border: none;
28
- padding: 0;
29
- font: inherit;
30
- color: inherit;
31
- cursor: pointer;
32
- outline: inherit;
33
- height: var(
34
- --icon-container-height,
35
- var(--icon-default-container-height)
36
- );
37
- width: var(
38
- --icon-container-width,
39
- var(--icon-default-container-width)
40
- )
41
- }
42
-
43
- button:active, button:focus {
44
- color: var(
45
- --icon-active-color,
46
- rgb(var(--global-color-primary-500))
47
- );
48
- }
49
-
50
22
  .icon {
51
23
  font-size: var(
52
24
  --icon-size,
@@ -60,9 +32,25 @@ import "../common/materialDesign.css";
60
32
  .icon.click {
61
33
  cursor: var(--icon-cursor, pointer);
62
34
  pointer-events: var(--icon-pointer-events, auto);
35
+ height: var(
36
+ --icon-container-height,
37
+ var(--icon-default-container-height)
38
+ );
39
+ width: var(
40
+ --icon-container-width,
41
+ var(--icon-default-container-width)
42
+ );
63
43
  }
64
44
  .icon.click:not(.click) {
65
45
  cursor: var(--icon-cursor, default);
66
46
  pointer-events: var(--icon-pointer-events, none);
67
47
  }
48
+
49
+ .click:focus, .click:active {
50
+ color: var(
51
+ --icon-active-color,
52
+ rgb(var(--global-color-primary-500))
53
+ );
54
+ outline: none;
55
+ }
68
56
  </style>
package/dist/components/simple/navigation/Chip.svelte CHANGED
@@ -6,7 +6,15 @@ import { createEventDispatcher } from "svelte";
6
6
  export let close = false, closeIcon = "mdi-close-circle", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, buttonTabIndex = null, truncateText = false;
7
7
  const dispatch = createEventDispatcher();
8
8
  function handleChipClick(e) {
9
- dispatch("click", { native: e });
9
+ let native;
10
+ if (e instanceof KeyboardEvent) {
11
+ if (e.key !== "Enter" && e.key !== " ")
12
+ return;
13
+ native = new PointerEvent("click", { bubbles: true, cancelable: true });
14
+ e.currentTarget?.dispatchEvent(native);
15
+ } else {
16
+ dispatch("click", { native: e });
17
+ }
10
18
  }
11
19
  function handleCloseClick(e) {
12
20
  e.detail.nativeEvent.stopPropagation();
@@ -16,14 +24,15 @@ function handleCloseClick(e) {
16
24
  }
17
25
  </script>
18
26
 
19
- <button
27
+ <div
20
28
  class="chip"
21
29
  class:label
22
30
  class:outlined
23
31
  class:disabled
24
- disabled={disabled}
25
- tabindex={buttonTabIndex}
32
+ role="button"
33
+ tabindex={disabled ? -1 : buttonTabIndex}
26
34
  on:click={handleChipClick}
35
+ on:keydown={handleChipClick}
27
36
  >
28
37
  {#if filter}
29
38
  <div class="icon-before">
@@ -52,7 +61,7 @@ function handleCloseClick(e) {
52
61
  />
53
62
  </div>
54
63
  {/if}
55
- </button>
64
+ </div>
56
65
 
57
66
  <style>
58
67
  .chip {
package/dist/css/main.css CHANGED
@@ -84,6 +84,18 @@
84
84
  --global-color-warning-800: var(--global-color-light-warning-800, 114, 75, 14);
85
85
  --global-color-warning-900: var(--global-color-light-warning-900, 55, 36, 7);
86
86
  --global-color-warning-950: var(--global-color-light-warning-950, 27, 18, 3);
87
+
88
+ --global-color-success-50: var(--global-color-light-success-50, 231, 253, 237);
89
+ --global-color-success-100: var(--global-color-light-success-100, 212, 252, 225);
90
+ --global-color-success-200: var(--global-color-light-success-200, 170, 249, 200);
91
+ --global-color-success-300: var(--global-color-light-success-300, 122, 245, 170);
92
+ --global-color-success-400: var(--global-color-light-success-400, 80, 242, 140);
93
+ --global-color-success-500: var(--global-color-light-success-500, 37, 238, 110);
94
+ --global-color-success-600: var(--global-color-light-success-600, 16, 211, 89);
95
+ --global-color-success-700: var(--global-color-light-success-700, 12, 156, 66);
96
+ --global-color-success-800: var(--global-color-light-success-800, 8, 104, 44);
97
+ --global-color-success-900: var(--global-color-light-success-900, 4, 52, 22);
98
+ --global-color-success-950: var(--global-color-light-success-950, 2, 28, 12);
87
99
  }
88
100
 
89
101
  @media (prefers-color-scheme: dark) {
@@ -171,6 +183,18 @@
171
183
  --global-color-warning-800: var(--global-color-dark-warning-800, 114, 75, 14);
172
184
  --global-color-warning-900: var(--global-color-dark-warning-900, 55, 36, 7);
173
185
  --global-color-warning-950: var(--global-color-dark-warning-950, 27, 18, 3);
186
+
187
+ --global-color-success-50: var(--global-color-dark-success-50, 231, 253, 237);
188
+ --global-color-success-100: var(--global-color-dark-success-100, 212, 252, 225);
189
+ --global-color-success-200: var(--global-color-dark-success-200, 170, 249, 200);
190
+ --global-color-success-300: var(--global-color-dark-success-300, 122, 245, 170);
191
+ --global-color-success-400: var(--global-color-dark-success-400, 80, 242, 140);
192
+ --global-color-success-500: var(--global-color-dark-success-500, 37, 238, 110);
193
+ --global-color-success-600: var(--global-color-dark-success-600, 16, 211, 89);
194
+ --global-color-success-700: var(--global-color-dark-success-700, 12, 156, 66);
195
+ --global-color-success-800: var(--global-color-dark-success-800, 8, 104, 44);
196
+ --global-color-success-900: var(--global-color-dark-success-900, 4, 52, 22);
197
+ --global-color-success-950: var(--global-color-dark-success-950, 2, 28, 12);
174
198
  }
175
199
  }
176
200
 
@@ -258,4 +282,16 @@
258
282
  --global-color-warning-800: var(--global-color-dark-warning-800, 114, 75, 14);
259
283
  --global-color-warning-900: var(--global-color-dark-warning-900, 55, 36, 7);
260
284
  --global-color-warning-950: var(--global-color-dark-warning-950, 27, 18, 3);
285
+
286
+ --global-color-success-50: var(--global-color-dark-success-50, 231, 253, 237);
287
+ --global-color-success-100: var(--global-color-dark-success-100, 212, 252, 225);
288
+ --global-color-success-200: var(--global-color-dark-success-200, 170, 249, 200);
289
+ --global-color-success-300: var(--global-color-dark-success-300, 122, 245, 170);
290
+ --global-color-success-400: var(--global-color-dark-success-400, 80, 242, 140);
291
+ --global-color-success-500: var(--global-color-dark-success-500, 37, 238, 110);
292
+ --global-color-success-600: var(--global-color-dark-success-600, 16, 211, 89);
293
+ --global-color-success-700: var(--global-color-dark-success-700, 12, 156, 66);
294
+ --global-color-success-800: var(--global-color-dark-success-800, 8, 104, 44);
295
+ --global-color-success-900: var(--global-color-dark-success-900, 4, 52, 22);
296
+ --global-color-success-950: var(--global-color-dark-success-950, 2, 28, 12);
261
297
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair and others",
4
- "version": "3.3.13",
4
+ "version": "3.3.14",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",