@likable-hair/svelte 3.0.19 → 3.0.21

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

@@ -0,0 +1,342 @@
+<script>import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import DatePickerTextField from "../../simple/dates/DatePickerTextField.svelte";
+import Button from "../../simple/buttons/Button.svelte";
+import { createEventDispatcher } from "svelte";
+import Validator from "../../../utils/filters/validator";
+import SelectableVerticalList, {} from "../../simple/lists/SelectableVerticalList.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+import { fly } from "svelte/transition";
+import Autocomplete from "../../simple/forms/Autocomplete.svelte";
+import Checkbox from "../../simple/forms/Checkbox.svelte";
+export let filter = void 0, lang = "en", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", backIcon = "mdi-arrow-left", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper;
+let dispatch = createEventDispatcher();
+function handleApplyFilterClick() {
+  if (!!filter && !!tmpFilter) {
+    filter = structuredClone(tmpFilter);
+    filter.active = true;
+    dispatch("apply");
+  }
+}
+let step;
+let tmpFilter;
+function initTmpFilter() {
+  tmpFilter = structuredClone(filter);
+  if (!!tmpFilter && tmpFilter.advanced) {
+    if (["string", "number", "date", "select"].includes(tmpFilter.type) && Object.keys(tmpFilter).includes("mode")) {
+      if (tmpFilter.mode == "between" && tmpFilter.from !== void 0 && tmpFilter.to !== void 0 || tmpFilter.value !== void 0 || tmpFilter.type == "select" && tmpFilter.values !== void 0 && tmpFilter.values.length > 0) {
+        step = "editor";
+        advancedModeSelectedOption = tmpFilter.mode;
+      } else {
+        step = "advanced";
+      }
+    } else {
+      step = "advanced";
+    }
+  } else {
+    step = "editor";
+  }
+}
+$:
+  if (!!filter) {
+    initTmpFilter();
+  }
+let advancedModeOptions, advancedModeSelectedOption;
+$:
+  if (!!tmpFilter) {
+    let modes;
+    if (tmpFilter.type == "string") {
+      modes = StringModes;
+    } else if (tmpFilter.type == "date") {
+      modes = GenericModes;
+    } else if (tmpFilter.type == "number") {
+      modes = GenericModes;
+    } else if (tmpFilter.type == "select") {
+      modes = SelectModes;
+    }
+    if (!!modes) {
+      advancedModeOptions = modes.map((mode) => {
+        return {
+          title: labelsMapper[mode].short || mode,
+          name: mode
+        };
+      });
+    }
+  }
+$:
+  if (!tmpFilter?.advanced) {
+    advancedModeSelectedOption = void 0;
+  }
+let calendarOpened = false, calendarOpened2 = false;
+function handleAdvancedModeSelection() {
+  if (!!advancedModeSelectedOption && !!tmpFilter) {
+    if (tmpFilter.type == "date")
+      tmpFilter.mode = advancedModeSelectedOption;
+    else if (tmpFilter.type == "string")
+      tmpFilter.mode = advancedModeSelectedOption;
+    else if (tmpFilter.type == "number")
+      tmpFilter.mode = advancedModeSelectedOption;
+    else if (tmpFilter.type == "select")
+      tmpFilter.mode = advancedModeSelectedOption;
+    step = "editor";
+    canRenderOptions = false;
+  }
+}
+let canRenderOptions = true;
+$:
+  applyFilterDisabled = !Validator.isValid(tmpFilter);
+function handleModeBackClick() {
+  dispatch("backClick");
+}
+function handleEditorBackCLick() {
+  if (!!tmpFilter && !tmpFilter.advanced) {
+    dispatch("backClick");
+  } else {
+    step = "advanced";
+    advancedModeSelectedOption = void 0;
+    setTimeout(() => {
+      canRenderOptions = true;
+    }, 100);
+  }
+}
+$:
+  if (!!tmpFilter && tmpFilter.type == "date" && tmpFilter.mode == "between") {
+    if (!tmpFilter.from)
+      tmpFilter.from = /* @__PURE__ */ new Date();
+    if (!tmpFilter.to)
+      tmpFilter.to = /* @__PURE__ */ new Date();
+  }
+function handleCancelClick() {
+  dispatch("cancelClick");
+}
+$:
+  if (!!tmpFilter && tmpFilter.type == "bool") {
+    if (tmpFilter.value === void 0) {
+      tmpFilter.value = false;
+    }
+  }
+</script>
+
+<div class="container">
+  {#if !!filter && !!tmpFilter}
+    <div class="header" on:click={step=="advanced" ? handleModeBackClick : handleEditorBackCLick} on:keypress>
+      <div class="back-link">
+        <Icon
+        name={backIcon}
+        ></Icon>
+      </div>
+      <div class="title">
+        <slot name="title"></slot>
+      </div>
+    </div>
+    <div class="filter-editor">
+      {#if tmpFilter.advanced && step == 'advanced' && canRenderOptions}
+        <div class="advanced-mode" in:fly={{delay: 100, x: 200, duration: 100}} out:fly={{x: -200, duration: 100}}>
+          <div class="advanced-mode-selector" on:click|stopPropagation on:keypress>
+            <SelectableVerticalList
+              bind:selected={advancedModeSelectedOption}
+              bind:elements={advancedModeOptions}
+              --selectable-vertical-list-default-width="100%"
+              --selectable-vertical-list-default-element-height="56px"
+              --selectable-vertical-list-default-title-font-size="null"
+              on:select={handleAdvancedModeSelection}
+              centered
+              bicolor
+            ></SelectableVerticalList>
+          </div>
+        </div>
+      {:else if step == 'editor' && (!tmpFilter.advanced || !!advancedModeSelectedOption)}
+        <div class="editor" in:fly={{delay: 100, x: 200, duration: 100}} out:fly={{x: -200, duration: 100}}>
+          <div class="fields-container">
+            <div class="fields"
+              on:click|stopPropagation
+              on:keypress
+            >
+              {#if tmpFilter.type === "string" }
+                <SimpleTextField
+                  bind:value={tmpFilter.value}
+                  type="text"
+                  placeholder={tmpFilter?.label}
+                  --simple-textfield-width="100%"
+                ></SimpleTextField>
+              {:else if tmpFilter.type === "date" && tmpFilter.mode !== 'between'}
+                <div style:width="100%">
+                  <div>
+                    <DatePickerTextField
+                      bind:selectedDate={tmpFilter.value}
+                      openingId="advanced-filter"
+                      bind:menuOpened={calendarOpened}
+                      placeholder={tmpFilter.label}
+                      on:day-click={() => {calendarOpened = false}}
+                      --simple-textfield-width="100%"
+                    ></DatePickerTextField>
+                  </div>
+                </div>
+              {:else if tmpFilter.type === "number" && tmpFilter.mode !== 'between'}
+                <SimpleTextField
+                  bind:value={tmpFilter.value}
+                  type="number"
+                  placeholder={tmpFilter.label}
+                  --simple-textfield-width="100%"
+                ></SimpleTextField>
+              {:else if tmpFilter.type === "date" && tmpFilter.mode === 'between'}
+                <div style:width="100%">
+                  <div class="date" style:margin-bottom="10px">
+                    <DatePickerTextField
+                      bind:selectedDate={tmpFilter.from}
+                      openingId="advanced-filter"
+                      placeholder={betweenToLabel}
+                      bind:menuOpened={calendarOpened}
+                      on:day-click={() => {calendarOpened = false}}
+                      --simple-textfield-width="100%"
+                    ></DatePickerTextField>
+                  </div>
+                  <div class="date">
+                    <DatePickerTextField
+                      bind:selectedDate={tmpFilter.to}
+                      openingId="advanced-filter"
+                      placeholder="Alla data"
+                      bind:menuOpened={calendarOpened2}
+                      on:day-click={() => {calendarOpened2 = false}}
+                      --simple-textfield-width="100%"
+                    ></DatePickerTextField>
+                  </div>
+                </div>
+              {:else if tmpFilter.type === "number" && tmpFilter.mode === "between"}
+                <div style:width="100%">
+                  <div style:margin-bottom="10px">
+                    <SimpleTextField
+                      bind:value={tmpFilter.from}
+                      type="number"
+                      placeholder={betweenFromLabel}
+                      --simple-textfield-width="100%"
+                    ></SimpleTextField>
+                  </div>
+                  <div>
+                    <SimpleTextField
+                      bind:value={tmpFilter.to}
+                      type="number"
+                      placeholder={betweenToLabel}
+                      --simple-textfield-width="100%"
+                    ></SimpleTextField>
+                  </div>
+                </div>
+              {:else if tmpFilter.type == 'select'}
+                <div style:width="100%">
+                  <Autocomplete
+                    on:close
+                    --drawer-margin="5px 5px -10px 5px"
+                    mobileDrawer
+                    bind:values={tmpFilter.values}
+                    items={tmpFilter.items}
+                    multiple
+                    maxVisibleChips={4}
+                    --simple-textfield-width="0px"
+                    --simple-text-field-margin-left="0px"
+                    --autocomplete-options-max-width="100%"
+                  ></Autocomplete>
+                </div>
+              {:else if tmpFilter.type == 'bool'}
+                <div class="bool-filter">
+                  <Checkbox
+                    bind:value={tmpFilter.value}
+                  ></Checkbox>
+                  <span style:margin-left="10px">
+                    {tmpFilter.desctiprion}
+                  </span>
+                </div>
+              {/if}
+            </div>
+          </div>
+          <div class="bottom-btn">
+            <div class="btn">
+              <Button
+                --button-width="100%"
+                --button-box-shadow="none"
+                --button-height="30px"
+                --button-padding="10px 0px 10px 0px"
+                --button-border-radius="10px 10px 0px 0px"
+                disabled={applyFilterDisabled}
+                on:click={handleApplyFilterClick}
+              >{applyFilterLabel}</Button>
+            </div>
+            <div class="btn">
+              <Button
+                --button-width="100%"
+                --button-box-shadow="none"
+                --button-padding="10px 0px 10px 0px"
+                --button-background-color="rgb(var(--global-color-grey-50))"
+                --button-color="rgb(var(--global-color-primary-500))"
+                --button-border-radius="0px 0px 0px 0px"
+                on:click={handleCancelClick}
+              >{cancelFilterLabel}</Button>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+  <style>
+  .filter-editor {
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+    height: 100%;
+  }
+
+  .advanced-mode {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .advanced-mode-selector {
+    width: 100%;
+  }
+
+  .header {
+    padding: 20px 0px 10px 20px;
+    display: flex;
+    gap: 10px
+  }
+
+  .title {
+    font-size: 1.4rem;
+    font-weight: 600;
+  }
+
+  .fields {
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+
+
+  .date {
+    width: 100%;
+  }
+
+  .container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bottom-btn {
+    margin-top: auto;
+  }
+
+  .editor {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .header {
+    margin-bottom: 20px;
+  }
+
+</style>

package/dist/components/composed/search/MobileFilterEditor.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Filter } from "../../../utils/filters/filters";
+import type { LabelMapper } from "./Filters.svelte";
+declare const __propDef: {
+    props: {
+        filter?: Filter | undefined;
+        lang?: "it" | "en" | undefined;
+        cancelFilterLabel?: string | undefined;
+        applyFilterLabel?: string | undefined;
+        backIcon?: string | undefined;
+        betweenFromLabel?: string | undefined;
+        betweenToLabel?: string | undefined;
+        labelsMapper: LabelMapper;
+    };
+    events: {
+        keypress: KeyboardEvent;
+        click: MouseEvent;
+        close: CustomEvent<{}>;
+        apply: CustomEvent<undefined>;
+        backClick: CustomEvent<undefined>;
+        cancelClick: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+    };
+};
+export type MobileFilterEditorProps = typeof __propDef.props;
+export type MobileFilterEditorEvents = typeof __propDef.events;
+export type MobileFilterEditorSlots = typeof __propDef.slots;
+export default class MobileFilterEditor extends SvelteComponentTyped<MobileFilterEditorProps, MobileFilterEditorEvents, MobileFilterEditorSlots> {
+}
+export {};

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

@@ -2,7 +2,7 @@
 import "./SearchBar.css";
 let clazz = {};
 export { clazz as class };
-export let input = void 0, value = void 0;
+export let input = void 0, value = void 0, placeholder = void 0;
 </script>
 
 <div
@@ -23,16 +23,16 @@ export let input = void 0, value = void 0;
   </slot>
   <slot name="input">
     <input
-      aria-autocomplete="both" 
-      aria-labelledby="search-content" 
-      id="search-content" 
-      autocomplete="off" 
-      autocorrect="off" 
-      autocapitalize="off" 
-      enterkeyhint="search" 
-      spellcheck="false" 
-      placeholder="Find something..." 
-      maxlength="512" 
+      aria-autocomplete="both"
+      aria-labelledby="search-content"
+      id="search-content"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      enterkeyhint="search"
+      spellcheck="false"
+      placeholder={placeholder}
+      maxlength="512"
       tabindex="0"
       bind:this={input}
       bind:value={value}
@@ -91,6 +91,7 @@ export let input = void 0, value = void 0;
       --search-bar-line-height,
       var(--search-bar-default-line-height)
     );
+    width: 100%;
     box-sizing: border-box;
     border: 0 solid #e5e7eb;
     outline: 2px solid transparent;

package/dist/components/composed/search/SearchBar.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         } | undefined;
         input?: HTMLElement | undefined;
         value?: string | undefined;
+        placeholder?: string | undefined;
     };
     events: {
         input: Event;

package/dist/components/simple/buttons/Button.css

@@ -14,6 +14,7 @@
   --button-default-text-hover-background-color: rgb(var(--global-color-primary-500), 0.2);
   --button-default-active-background-color: rgb(var(--global-color-primary-500));
   --button-default-focus-background-color: rgb(var(--global-color-primary-500));
+  --button-default-focus-color: rgb(var(--global-color-grey-50));
   --button-default-disabled-background-color: rgb(var(--global-color-primary-500), .6);
   --button-default-disabled-color: rgb(var(--global-color-grey-50), .6);
   --button-default-text-active-background-color: rgb(var(--global-color-primary-500), 0.4);

package/dist/components/simple/buttons/Button.svelte

@@ -185,6 +185,10 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
       --button-hover-color,
       var(--button-default-hover-color)
     );
+    box-shadow: var(
+      --button-hover-box-shadow,
+      var(--button-default-hover-box-shadow)
+    );
   }
 
   .button-default:active:not(.disabled) {
@@ -199,6 +203,10 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
       --button-focus-background-color,
       var(--button-default-focus-background-color)
     );
+    color: var(
+      --button-focus-color,
+      var(--button-default-focus-color)
+    );
   }
 
   .button-text {

package/dist/components/simple/common/Menu.svelte

@@ -85,8 +85,8 @@ $:
         }
       }
     }
-    let otherMenus = document.querySelectorAll("[data-menu=true]");
-    let otherDialogs = document.querySelectorAll("[data-dialog=true]");
+    let otherMenus = document.querySelectorAll("[data-menu]");
+    let otherDialogs = document.querySelectorAll("[data-dialog]");
     let maxZIndex = void 0;
     if (otherDialogs.length > 0) {
       otherDialogs.forEach((dialog) => {
@@ -95,10 +95,9 @@ $:
       });
     }
     if (otherMenus.length > 0) {
-      let maxZIndex2;
       otherMenus.forEach((menu) => {
-        if (!maxZIndex2 || maxZIndex2 < Number(menu.style.zIndex))
-          maxZIndex2 = Number(menu.style.zIndex);
+        if (!maxZIndex || maxZIndex < Number(menu.style.zIndex))
+          maxZIndex = Number(menu.style.zIndex);
       });
     }
     if (!!activator && !!menuElement)
@@ -159,15 +158,33 @@ function handleWindowScrollOrResize() {
   if (open && !!menuElement && !!activator)
     calculateMenuPosition({ menuElement, activator });
 }
+function handleMenuClick(e, zIndex2) {
+  let otherMenus = document.querySelectorAll(`[data-menu]`);
+  otherMenus.forEach((m) => {
+    let uid = m.getAttribute("data-uid");
+    if (uid !== currentUid && Number(m.style.zIndex) > zIndex2) {
+      let controller = document.querySelector(`[data-operation="close"][data-uid="${uid}"]`);
+      if (!!controller) {
+        const clickEvent = new MouseEvent("click", {
+          bubbles: false,
+          cancelable: true,
+          view: window
+        });
+        controller.dispatchEvent(clickEvent);
+      }
+    }
+  });
+}
 </script>
 
 <svelte:window on:scroll={handleWindowScrollOrResize} on:resize={handleWindowScrollOrResize} ></svelte:window>
 
-<div 
-  class="controller" 
-  data-operation="close" 
-  data-opening-id={openingId} 
-  on:click={handleCloseControllerClick} 
+<div
+  class="controller"
+  data-operation="close"
+  data-opening-id={openingId}
+  data-uid={currentUid}
+  on:click={handleCloseControllerClick}
   on:keypress={handleCloseControllerClick}
   bind:this={closeController}
 ></div>
@@ -189,6 +206,8 @@ function handleWindowScrollOrResize() {
     style:overflow={_overflow}
     in:inAnimation={inAnimationConfig}
     out:outAnimation={outAnimationConfig}
+    on:click={(e) => handleMenuClick(e, zIndex)}
+    on:keydown
   >
     <slot />
   </div>

package/dist/components/simple/common/Menu.svelte.d.ts

@@ -27,6 +27,8 @@ declare const __propDef: {
         openingId?: string | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {