@likable-hair/svelte 3.3.20 → 3.3.21

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

@@ -1,392 +1,323 @@
-<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',
-    // 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) => {
+<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", 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) => {
     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' : undefined
+      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;
     }
-  })
-
-  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'
+  }
+}
+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 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("from")) {
+    filters[filterIndex].from = void 0;
+    if (!!tmpFilters[filterName] && Object.keys(tmpFilters[filterName]).includes("from")) {
+      tmpFilters[filterName].from = void 0;
     }
   }
-
-  function handleCancelFilterClick() {
-    open = false
-    mobileOpen = false
-    singleFilterMenuOpened = 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 handleApplyFilterClick() {
-    if(!!selectedFilter && !!selectedTmpFilter) {
-      selectedFilter = {...selectedTmpFilter}
-      selectedFilter.active = true
-      filters[selectedFilterIndex] = selectedFilter
-      open = false
-      mobileOpen = false
-      singleFilterMenuOpened = false;
-      dispatch('applyFilter')
+  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;
     }
   }
-
-  $: 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
-      }
+  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;
     }
-    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("from")) {
+      filters[i].from = 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("to")) {
+      filters[i].to = 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
-      }
+    if (Object.keys(filters[i]).includes("values")) {
+      filters[i].values = void 0;
     }
-    singleFilterMenuOpened = false
-    dispatch('removeFilter', { filter: filters[filterIndex] })
+    singleFilterMenuOpened = false;
   }
-
-  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;
+  tmpFilters = {};
+  customToBeInitialized = false;
+  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;
     }
   }
-
-  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;
+  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;
     }
-    filters = filters
-    tmpFilters = {}
-    customToBeInitialized = false
-    dispatch('removeAllFilters')
-  }
-
-  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 (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();
       }
-      else {
-        tmpFilter.from = newValue.from
-        tmpFilter.to = newValue.to
+      if (newValue.to) {
+        tmpFilter.to = DateTime.fromJSDate(newValue.to).setLocale("it-IT").endOf("day").toJSDate();
       }
     } 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 }
-      }
+      tmpFilter.from = newValue.from;
+      tmpFilter.to = newValue.to;
     }
-    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
+  } 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 };
     }
   }
-
-  let moreItemsActivator: HTMLElement
-
+  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;
 </script>
 
 <MediaQuery let:mAndDown>