@likable-hair/svelte 3.3.26 → 3.3.28

package/dist/components/composed/search/Filters.svelte

@@ -1,323 +1,393 @@
-<script context="module"></script>
-
-<script>import "./Filters.css";
-import "../../../css/main.css";
-import Drawer from "../../simple/navigation/Drawer.svelte";
-import Menu from "../../simple/common/Menu.svelte";
-import MediaQuery from "../../simple/common/MediaQuery.svelte";
-import Button from "../../simple/buttons/Button.svelte";
-import Icon from "../../simple/media/Icon.svelte";
-import { createEventDispatcher } from "svelte";
-import { isDateMode, isSelectMode, isStringMode } from "../../../utils/filters/filters";
-import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-import Chip from "../../simple/navigation/Chip.svelte";
-import FilterEditor from "./FilterEditor.svelte";
-import MobileFilterEditor from "./MobileFilterEditor.svelte";
-import { fly } from "svelte/transition";
-import Dialog from "../../simple/dialogs/Dialog.svelte";
-import Validator from "../../../utils/filters/validator";
-import ToolTip from "../common/ToolTip.svelte";
-import { DateTime } from "luxon";
-export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = lang == "en" ? "en" : "it", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", editFilterMode = "one-edit", drawerSpace = "20rem", labelsMapper = lang == "en" ? {
-  "equal": {
-    extended: "equal to",
-    short: "equal"
-  },
-  "like": {
-    short: "includes"
-  },
-  "ilike": {
-    short: "includes"
-  },
-  "contains": {
-    short: "contains"
-  },
-  "greater": {
-    short: "greater",
-    extended: "greater than"
-  },
-  "lower": {
-    short: "lower",
-    extended: "lower than"
-  },
-  "between": {
-    short: "between",
-    extended: "is between"
-  },
-  "different": {
-    short: "different",
-    extended: "different from"
-  }
-} : {
-  "equal": {
-    extended: "uguale a",
-    short: "uguale"
-  },
-  "like": {
-    short: "include"
-  },
-  "ilike": {
-    short: "include"
-  },
-  "contains": {
-    short: "contiene"
-  },
-  "greater": {
-    short: "maggiore",
-    extended: "maggiore di"
-  },
-  "lower": {
-    short: "minore",
-    extended: "minore di"
-  },
-  "between": {
-    short: "compreso",
-    extended: "\xE8 compreso tra"
-  },
-  "different": {
-    short: "diverso",
-    extended: "diverso da"
-  }
-};
-let dispatch = createEventDispatcher();
-let open = false, mobileOpen = false, activator;
-function handleAddFilterClick() {
-  dispatch("addFilterClick");
-  open = true;
-  mobileOpen = true;
-}
-$:
-  filterOptions = filters.map((f) => {
+<script lang="ts" context="module">
+  export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+  export type LabelMapper = {
+    [label: string]: {extended?: string, short: string}
+  }
+</script>
+
+<script lang="ts">
+  import './Filters.css'
+  import '../../../css/main.css'
+  import Drawer from '../../simple/navigation/Drawer.svelte';
+  import Menu from '../../simple/common/Menu.svelte';
+  import MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import Button from '../../simple/buttons/Button.svelte';
+  import Icon from '../../simple/media/Icon.svelte';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { isDateMode, isSelectMode, isStringMode, type DateMode, type Filter, type NumberMode, type SelectMode, type StringMode } from '../../../utils/filters/filters';
+  import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+  import Chip from '../../simple/navigation/Chip.svelte';
+  import type { Locale } from '../../simple/dates/utils';
+  import FilterEditor from './FilterEditor.svelte';
+  import MobileFilterEditor from './MobileFilterEditor.svelte';
+  import { fly } from 'svelte/transition';
+  import Dialog from '../../simple/dialogs/Dialog.svelte';
+  import Validator from '../../../utils/filters/validator';
+  import ToolTip from '../common/ToolTip.svelte';
+  import { DateTime } from 'luxon';
+
+  export let
+    filters: Filter[] = [],
+    lang: 'it' | 'en' = 'en',
+    addFilterLabel: string = lang == 'en' ? "Filters" : "Filtri",
+    cancelFilterLabel : string = lang == 'en' ? "Cancel" : "Annulla",
+    applyFilterLabel : string = lang == 'en' ? "Apply filter" : "Applica filtro",
+    showActiveFilters: boolean = true,
+    filterTitleLabel: string = lang == 'en' ? "Filter by" : "Filtra per",
+    dateLocale: Locale = lang == 'en' ? 'en' : 'it',
+    betweenSeparator: string = lang == 'en' ? "and" : "e",
+    trueString: string = lang == 'en' ? "true" : "vero",
+    falseString: string = lang == 'en' ? "false" : "falso",
+    editFilterMode: 'one-edit' | 'multi-edit' = 'one-edit',
+    drawerSpace: string = '20rem',
+    // TODO create global translation mechanism
+    labelsMapper: LabelMapper = lang == 'en' ? {
+      'equal': {
+        extended: 'equal to',
+        short: 'equal'
+      },
+      'like': {
+        short: 'includes'
+      },
+      'ilike': {
+        short: 'includes'
+      },
+      'contains': {
+        short: 'contains'
+      },
+      'greater': {
+        short: 'greater',
+        extended: 'greater than'
+      },
+      'lower': {
+        short: 'lower',
+        extended: 'lower than'
+      },
+      'between': {
+        short: 'between',
+        extended: 'is between'
+      },
+      'different': {
+        short: 'different',
+        extended: 'different from'
+      }
+    } : {
+      'equal': {
+        extended: 'uguale a',
+        short: 'uguale'
+      },
+      'like': {
+        short: 'include'
+      },
+      'ilike': {
+        short: 'include'
+      },
+      'contains': {
+        short: 'contiene'
+      },
+      'greater': {
+        short: 'maggiore',
+        extended: 'maggiore di'
+      },
+      'lower': {
+        short: 'minore',
+        extended: 'minore di'
+      },
+      'between': {
+        short: 'compreso',
+        extended: 'è compreso tra'
+      },
+      'different': {
+        short: 'diverso',
+        extended: 'diverso da'
+      }
+    }
+
+
+  let dispatch = createEventDispatcher<{
+    'addFilterClick': undefined,
+    'applyFilter': undefined,
+    'removeFilter': {
+      filter: Filter
+    },
+    'removeAllFilters': undefined
+  }>()
+
+  let open: boolean = false,
+    mobileOpen: boolean = false,
+    activator: HTMLElement
+
+  function handleAddFilterClick() {
+    dispatch('addFilterClick')
+    open = true
+    mobileOpen = true
+  }
+
+  $: filterOptions = filters.map((f) => {
     return {
       title: f.label,
       name: f.name
-    };
-  });
-$:
-  deletableFilterOptions = filters.map((f) => {
+    }
+  })
+
+  $: deletableFilterOptions = filters.map((f) => {
     return {
       title: f.label,
       name: f.name,
-      appendIcon: f.active ? "mdi-delete" : void 0
-    };
-  });
-let selected;
-let focused;
-$:
-  if (!!focused && !open)
-    focused = void 0;
-let filterOpened = "new";
-let filterOptionsListActivator;
-let singleFilterActivator;
-let singleFilterMenuAnchor = "right-center";
-let singleFilterMenuOpened = false;
-let selectedFilter = void 0;
-$:
-  selectedFilterIndex = filters.findIndex((f) => {
-    return f.name === selected;
-  });
-$:
-  selectedFilter = selected === void 0 ? void 0 : filters[selectedFilterIndex];
-function handleFilterSelection(e, mobile = false) {
-  if (mobile) {
-    selected = e.detail.element.name;
-    singleFilterMenuOpened = true;
-  } else {
-    singleFilterActivator = filterOptionsListActivator;
-    singleFilterMenuAnchor = "right-center";
-    singleFilterMenuOpened = true;
-    selected = e.detail.element.name;
-    filterOpened = "new";
-  }
-  let filter = filters.find((f) => f.name === e.detail.element.name);
-  if (!!filter) {
-    if (filter.type === "custom") {
-      customFilterApplyDisabled = filter.active === void 0 || filter.active === false;
+      appendIcon: f.active ? 'mdi-delete' : undefined
     }
-  }
-}
-function handleCancelFilterClick() {
-  open = false;
-  mobileOpen = false;
-  singleFilterMenuOpened = false;
-}
-function handleApplyFilterClick() {
-  if (!!selectedFilter && !!selectedTmpFilter) {
-    selectedFilter = { ...selectedTmpFilter };
-    selectedFilter.active = true;
-    filters[selectedFilterIndex] = selectedFilter;
-    open = false;
-    mobileOpen = false;
-    singleFilterMenuOpened = false;
-    dispatch("applyFilter");
-  }
-}
-$:
-  activeFilters = filters.filter((f) => f.active);
-function handleRemoveFilter(filter) {
-  let filterIndex = filters.findIndex((f) => f.name === filter.name);
-  let filterName = filter.name;
-  filters[filterIndex].active = false;
-  tmpFilters[filterName].active = false;
-  if (Object.keys(filters[filterIndex]).includes("value")) {
-    filters[filterIndex].value = void 0;
-    if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes("value")) {
-      tmpFilters[filterName].value = void 0;
+  })
+
+  let selected: ArrayElement<NonNullable<ComponentProps<SelectableVerticalList>['elements']>>['name'] | undefined
+  let focused: ArrayElement<NonNullable<ComponentProps<SelectableVerticalList>['elements']>>['name'] | undefined
+  $: if(!!focused && !open) focused = undefined
+
+  let filterOpened: 'edit' | 'new' = 'new'
+
+
+  let filterOptionsListActivator: HTMLElement | undefined
+  let singleFilterActivator:  HTMLElement | undefined
+  let singleFilterMenuAnchor: 'right-center' | 'bottom-center' = 'right-center'
+  let singleFilterMenuOpened: boolean = false
+
+  let selectedFilter : Filter | undefined = undefined
+  $: selectedFilterIndex = filters.findIndex((f) => { return f.name === selected })
+  $: selectedFilter = selected === undefined ? undefined : filters[selectedFilterIndex]
+
+
+  function handleFilterSelection(e: CustomEvent, mobile: boolean = false) {
+    if(mobile) {
+      selected = e.detail.element.name
+      singleFilterMenuOpened = true;
+    } else {
+      singleFilterActivator = filterOptionsListActivator
+      singleFilterMenuAnchor = 'right-center'
+      singleFilterMenuOpened = true;
+      selected = e.detail.element.name
+      filterOpened = 'new'
     }
-  }
-  if (Object.keys(filters[filterIndex]).includes("from")) {
-    filters[filterIndex].from = void 0;
-    if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes("from")) {
-      tmpFilters[filterName].from = void 0;
+
+    let filter = filters.find(f => f.name === e.detail.element.name)
+    if(!!filter) {
+      if(filter.type === 'custom') {
+        customFilterApplyDisabled = filter.active === undefined || filter.active === false
+      }
     }
   }
-  if (Object.keys(filters[filterIndex]).includes("to")) {
-    filters[filterIndex].to = void 0;
-    if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes("to")) {
-      tmpFilters[filterName].to = void 0;
-    }
+
+  function handleCancelFilterClick() {
+    open = false
+    mobileOpen = false
+    singleFilterMenuOpened = false;
   }
-  if (Object.keys(filters[filterIndex]).includes("values")) {
-    filters[filterIndex].values = void 0;
-    if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes("values")) {
-      tmpFilters[filterName].values = void 0;
+
+  function handleApplyFilterClick() {
+    if(!!selectedFilter && !!selectedTmpFilter) {
+      selectedFilter = {...selectedTmpFilter}
+      selectedFilter.active = true
+      filters[selectedFilterIndex] = selectedFilter
+      open = false
+      mobileOpen = false
+      singleFilterMenuOpened = false;
+      dispatch('applyFilter')
     }
   }
-  singleFilterMenuOpened = false;
-  dispatch("removeFilter", { filter: filters[filterIndex] });
-}
-let activeFiltersActivators = {};
-function handleActiveFilterClick(filter) {
-  singleFilterActivator = activeFiltersActivators[filter.name];
-  singleFilterMenuAnchor = "bottom-center";
-  singleFilterMenuOpened = true;
-  mobileOpen = true;
-  selected = filter.name;
-  filterOpened = "edit";
-  if (filter.type === "custom") {
-    customFilterApplyDisabled = false;
-  }
-}
-function handleMobileBackTap() {
-  closeFilterMenu(0);
-}
-function closeFilterMenu(delay) {
-  setTimeout(() => {
-    singleFilterMenuOpened = false;
-  }, delay);
-}
-function handleDeleteIconClick(e) {
-  let filterIndex = e.detail.index;
-  let name = filters[filterIndex].name;
-  handleRemoveFilter({ name });
-}
-function handleRemoveAllFilters(e) {
-  if (!!e)
-    e.stopPropagation();
-  for (let i = 0; i < filters.length; i += 1) {
-    filters[i].active = false;
-    if (Object.keys(filters[i]).includes("value")) {
-      filters[i].value = void 0;
+
+  $: activeFilters = filters.filter((f) => f.active)
+
+  function handleRemoveFilter(filter: { name: string }) {
+    let filterIndex = filters.findIndex((f) => f.name === filter.name)
+    let filterName = filter.name
+    filters[filterIndex].active = false
+    tmpFilters[filterName].active = false
+    if(Object.keys(filters[filterIndex]).includes('value')) {
+      //@ts-ignore
+      filters[filterIndex].value = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('value')) {
+        //@ts-ignore
+        tmpFilters[filterName].value = undefined
+      }
     }
-    if (Object.keys(filters[i]).includes("from")) {
-      filters[i].from = void 0;
+    if(Object.keys(filters[filterIndex]).includes('from')) {
+      //@ts-ignore
+      filters[filterIndex].from = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('from')) {
+        //@ts-ignore
+        tmpFilters[filterName].from = undefined
+      }
     }
-    if (Object.keys(filters[i]).includes("to")) {
-      filters[i].to = void 0;
+    if(Object.keys(filters[filterIndex]).includes('to')) {
+      //@ts-ignore
+      filters[filterIndex].to = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('to')) {
+        //@ts-ignore
+        tmpFilters[filterName].to = undefined
+      }
     }
-    if (Object.keys(filters[i]).includes("values")) {
-      filters[i].values = void 0;
+    if(Object.keys(filters[filterIndex]).includes('values')) {
+      //@ts-ignore
+      filters[filterIndex].values = undefined
+      if(!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes('values')) {
+        //@ts-ignore
+        tmpFilters[filterName].values = undefined
+      }
     }
-    singleFilterMenuOpened = false;
+    singleFilterMenuOpened = false
+    dispatch('removeFilter', { filter: filters[filterIndex] })
   }
-  filters = filters;
-  tmpFilters = {};
-  customToBeInitialized = true;
-  dispatch("removeAllFilters");
-}
-function handleMultiEditApplyClick() {
-  open = false;
-  mobileOpen = false;
-  dispatch("applyFilter");
-}
-function handleMultiEditRemoveClick() {
-  handleRemoveAllFilters();
-  open = false;
-  mobileOpen = false;
-}
-let selectedTmpFilter = void 0;
-let tmpFilters = {};
-function handleApplyMultiFilterClick() {
-  for (let i = 0; i < filters.length; i += 1) {
-    if (!!filters[i] && !!tmpFilters[filters[i].name]) {
-      filters[i] = { ...tmpFilters[filters[i].name] };
-      filters[i].active = filters[i].type !== "custom" ? Validator.isValid(tmpFilters[filters[i].name]) : tmpFilters[filters[i].name].active;
+
+  let activeFiltersActivators: Record<string, HTMLElement> = {}
+  function handleActiveFilterClick(filter: { name: string, type: 'custom' | string }) {
+    singleFilterActivator = activeFiltersActivators[filter.name]
+    singleFilterMenuAnchor = 'bottom-center'
+    singleFilterMenuOpened = true;
+    mobileOpen=true
+    selected = filter.name
+    filterOpened = 'edit'
+
+    if(filter.type === 'custom') {
+      customFilterApplyDisabled = false
     }
   }
-  filters = filters;
-  handleMultiEditApplyClick();
-}
-function updateMultiFilterValues(filterName, newValue, newValid, mode) {
-  let filter = filters.find((f) => f.name === filterName);
-  if (!filter)
-    throw new Error("cannot find filter with name " + filterName);
-  if (!tmpFilters[filterName])
-    tmpFilters[filterName] = { ...filter };
-  let tmpFilter = tmpFilters[filterName];
-  if ("mode" in tmpFilter && !!mode) {
-    if (tmpFilter.type == "date" && isDateMode(mode)) {
-      tmpFilter.mode = mode;
-    } else if (tmpFilter.type == "number" && isDateMode(mode)) {
-      tmpFilter.mode = mode;
-    } else if (tmpFilter.type == "string" && isStringMode(mode)) {
-      tmpFilter.mode = mode;
-    } else if (tmpFilter.type == "select" && isSelectMode(mode)) {
-      tmpFilter.mode = mode;
+
+  function handleMobileBackTap() {
+    closeFilterMenu(0)
+  }
+
+  function closeFilterMenu(delay: number) {
+    setTimeout(() => {
+      singleFilterMenuOpened = false
+    }, delay)
+  }
+
+  function handleDeleteIconClick(e: CustomEvent) {
+    let filterIndex = e.detail.index
+    let name = filters[filterIndex].name
+    handleRemoveFilter({name})
+  }
+
+  function handleRemoveAllFilters(e?: MouseEvent) {
+    if(!!e) e.stopPropagation()
+    for(let i = 0; i < filters.length; i += 1) {
+      filters[i].active = false
+      if(Object.keys(filters[i]).includes('value')) {
+        //@ts-ignore
+        filters[i].value = undefined
+      }
+      if(Object.keys(filters[i]).includes('from')) {
+        //@ts-ignore
+        filters[i].from = undefined
+      }
+      if(Object.keys(filters[i]).includes('to')) {
+        //@ts-ignore
+        filters[i].to = undefined
+      }
+      if(Object.keys(filters[i]).includes('values')) {
+        //@ts-ignore
+        filters[i].values = undefined
+      }
+      singleFilterMenuOpened = false
     }
+    filters = filters
+    tmpFilters = {}
+    customToBeInitialized = true
+    dispatch('removeAllFilters')
   }
-  if (tmpFilter.type == "select") {
-    tmpFilter.values = newValue;
-  } else if ("mode" in tmpFilter && tmpFilter.mode == "between") {
-    if (tmpFilter.type == "date") {
-      if (newValue.from) {
-        tmpFilter.from = DateTime.fromJSDate(newValue.from).setLocale("it-IT").startOf("day").toJSDate();
+
+  function handleMultiEditApplyClick() {
+    open = false
+    mobileOpen = false
+    dispatch('applyFilter')
+  }
+
+  function handleMultiEditRemoveClick() {
+    handleRemoveAllFilters()
+    open = false
+    mobileOpen = false
+  }
+
+  let selectedTmpFilter: Filter | undefined = undefined
+
+  let tmpFilters: {[filterName: string]: Filter} = {}
+
+  function handleApplyMultiFilterClick() {
+    for(let i = 0; i < filters.length; i += 1) {
+      if(!!filters[i] && !!tmpFilters[filters[i].name]) {
+        filters[i] = {...tmpFilters[filters[i].name]}
+        filters[i].active = filters[i].type !== 'custom' ? Validator.isValid(tmpFilters[filters[i].name]) : tmpFilters[filters[i].name].active
+      }
+    }
+    filters = filters
+    handleMultiEditApplyClick()
+  }
+
+  function updateMultiFilterValues(filterName: string, newValue: any, newValid: boolean, mode?: NumberMode | StringMode | SelectMode | DateMode) {
+    let filter = filters.find(f => f.name === filterName)
+    if(!filter) throw new Error('cannot find filter with name ' + filterName)
+    if(!tmpFilters[filterName]) tmpFilters[filterName] = {...filter}
+    let tmpFilter = tmpFilters[filterName]
+    if('mode' in tmpFilter && !!mode) {
+      if(tmpFilter.type == 'date' && isDateMode(mode)){
+        tmpFilter.mode = mode
+      }
+      else if(tmpFilter.type == 'number' && isDateMode(mode)){
+        tmpFilter.mode = mode
+      }
+      else if(tmpFilter.type == 'string' && isStringMode(mode)){
+        tmpFilter.mode = mode
+      }
+      else if(tmpFilter.type == 'select' && isSelectMode(mode)){
+        tmpFilter.mode = mode
+      }
+    }
+    if(tmpFilter.type == 'select') {
+      tmpFilter.values = newValue
+    } else if('mode' in tmpFilter && tmpFilter.mode == 'between') {
+      if(tmpFilter.type == 'date'){
+        if(newValue.from){
+          tmpFilter.from = DateTime.fromJSDate(newValue.from).setLocale('it-IT').startOf('day').toJSDate()
+        }
+        if(newValue.to){
+          tmpFilter.to = DateTime.fromJSDate(newValue.to).setLocale('it-IT').endOf('day').toJSDate()
+        }
       }
-      if (newValue.to) {
-        tmpFilter.to = DateTime.fromJSDate(newValue.to).setLocale("it-IT").endOf("day").toJSDate();
+      else {
+        tmpFilter.from = newValue.from
+        tmpFilter.to = newValue.to
       }
     } else {
-      tmpFilter.from = newValue.from;
-      tmpFilter.to = newValue.to;
+      tmpFilter.value = newValue
+    }
+    tmpFilter.active = newValid
+  }
+
+  let customToBeInitialized = true
+  $: if(customToBeInitialized && !!tmpFilters) initCustomTmpFilters()
+
+  function initCustomTmpFilters() {
+    let customFilters = filters.filter(f => f.type === 'custom')
+    for(const customFilter of customFilters) {
+      if(!tmpFilters[customFilter.name]) {
+        tmpFilters[customFilter.name] = { ...customFilter }
+      }
     }
-  } else {
-    tmpFilter.value = newValue;
-  }
-  tmpFilter.active = newValid;
-}
-let customToBeInitialized = true;
-$:
-  if (customToBeInitialized && !!tmpFilters)
-    initCustomTmpFilters();
-function initCustomTmpFilters() {
-  let customFilters = filters.filter((f) => f.type === "custom");
-  for (const customFilter of customFilters) {
-    if (!tmpFilters[customFilter.name]) {
-      tmpFilters[customFilter.name] = { ...customFilter };
+    customToBeInitialized = false
+  }
+
+  let customFilterApplyDisabled: boolean = true
+  function updateFunction(filterName: string, newValue: any, newValid: boolean) {
+    let tmpFilter = tmpFilters[filterName]
+    if(!!tmpFilter && tmpFilter.type == 'custom') {
+      tmpFilter.value = newValue
+      tmpFilter.active = newValid
+      selectedTmpFilter = {...tmpFilter}
+      customFilterApplyDisabled = !newValid
     }
   }
-  customToBeInitialized = false;
-}
-let customFilterApplyDisabled = true;
-function updateFunction(filterName, newValue, newValid) {
-  let tmpFilter = tmpFilters[filterName];
-  if (!!tmpFilter && tmpFilter.type == "custom") {
-    tmpFilter.value = newValue;
-    tmpFilter.active = newValid;
-    selectedTmpFilter = { ...tmpFilter };
-    customFilterApplyDisabled = !newValid;
-  }
-}
-let moreItemsActivator;
+
+  let moreItemsActivator: HTMLElement
+
 </script>
 
 <MediaQuery let:mAndDown>