@likable-hair/svelte 3.0.0 → 3.0.2

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

@@ -1,4 +1,5 @@
-<script>import "./GlobalSearchTextField.css";
+<script>import "../../../css/main.css";
+import "./GlobalSearchTextField.css";
 import Dialog from "../../simple/dialogs/Dialog.svelte";
 import { createEventDispatcher, onMount } from "svelte";
 import SearchBar from "./SearchBar.svelte";

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './GlobalSearchTextField.css';
 import { type Result } from './SearchResults.svelte';
 declare const __propDef: {

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

@@ -1,4 +1,5 @@
-<script>import "./SearchBar.css";
+<script>import "../../../css/main.css";
+import "./SearchBar.css";
 let clazz = {};
 export { clazz as class };
 export let input = void 0, value = void 0;

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './SearchBar.css';
 declare const __propDef: {
     props: {

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

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import "./SearchResults.css";
+<script>import "../../../css/main.css";
+import "./SearchResults.css";
 import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
 let clazz = {};
 export { clazz as class };

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

@@ -6,6 +6,7 @@ export type Result = {
     url?: string;
     data?: Record<string, any>;
 };
+import '../../../css/main.css';
 import './SearchResults.css';
 declare const __propDef: {
     props: {

package/dist/components/layouts/CollapsibleSideBarLayout.svelte

@@ -1,347 +1,156 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>import "../../css/main.css";
+import "./CollapsibleSideBarLayout.css";
+import { createEventDispatcher } from "svelte";
 import CollapsibleDivider from "../simple/common/CollapsibleDivider.svelte";
-import Icon from "../simple/media/Icon.svelte";
 import MediaQuery from "../simple/common/MediaQuery.svelte";
-export let _pagePadding = "20px 0 0 30px", _menuElementMarginBottom = "30px", _menuElementFontSize = "1.1rem", _menuElementFontWeight = "400", _menuColor = "#454444", _selectedMenuColor = "#0b66cc", _expandedSideBarWidth = "16rem", _collapsedSideBarWidth = "4.6rem", _headerHeight = "80px", _collapseTransitionTime = "0.4s", _sideBarBackgroundColor = "white", _overlayColor = "hsla(240,5%,65%,.2)", _headerBackgroundColor = "#FFFF", _dividersColor = "#d2d2d2";
-export let drawerOpened = false, drawerCollapsed = false, menuItems = [], menuIconsSize = 16, selectedMenuElementId = void 0, fullLogo = void 0, partialLogo = void 0, openedHeader = false;
+import SelectableMenuList from "../simple/lists/SelectableMenuList.svelte";
+import HeaderMenu from "../simple/navigation/HeaderMenu.svelte";
+export let drawerOpened = false, drawerCollapsed = false, menuItems = [], selectedMenuElementName = void 0, fullLogo = void 0, partialLogo = void 0;
 let dispatch = createEventDispatcher();
-function toggleMenu() {
-  drawerOpened = !drawerOpened;
-  dispatch("drawer-change", { opened: drawerOpened });
+function handleMenuSelect(event) {
+  dispatch("menu-select", {
+    menu: event.detail.item
+  });
 }
-function toggleExpansion() {
-  drawerCollapsed = !drawerCollapsed;
+function handleCollpsabledDividerChange() {
+  dispatch("collapse", {
+    collapsed: drawerCollapsed
+  });
 }
-function handleMenuClick(menu) {
-  if ("id" in menu) {
-    selectedMenuElementId = menu.id;
-    dispatch("menu-click", { menu });
-  }
-}
-function handleOverlayClick() {
-}
-$:
-  if (drawerOpened)
-    drawerCollapsed = false;
 </script>
 
 <MediaQuery let:mAndDown>
-  <div
-    style:--collapsible-side-bar-layout-expanded-width={_expandedSideBarWidth}
-    style:--collapsible-side-bar-layout-header-height={openedHeader || mAndDown ? _headerHeight : "0px"}
-    style:--collapsible-side-bar-layout-collapsed-width={_collapsedSideBarWidth}
-    style:--collapsible-side-bar-layout-collapse-transition-time={_collapseTransitionTime}
-    style:--collapsible-side-bar-layout-menu-element-margin-bottom={_menuElementMarginBottom}
-    style:--collapsible-side-bar-layout-menu-element-font-size={_menuElementFontSize}
-    style:--collapsible-side-bar-layout-menu-element-font-weight={_menuElementFontWeight}
-    style:--collapsible-side-bar-layout-menu-color={_menuColor}
-    style:--collapsible-side-bar-layout-selected-menu-color={_selectedMenuColor}
-    style:--collapsible-side-bar-layout-sidebar-background-color={_sideBarBackgroundColor}
-    style:--collapsible-side-bar-layout-overlay-color={_overlayColor}
-    style:--collapsible-side-bar-layout-header-background-color={_headerBackgroundColor}
-    style:--collapsible-side-bar-layout-divider-color={_dividersColor}
-  >
-    <header
-      class="side-bar"
+  <div class="container">
+    <div 
+      class="sidebar"
       class:collapsed={drawerCollapsed}
-      class:opened={drawerOpened}
     >
-      <div
-        class="header-toolbar"
+      <div 
+        class="logo-container"
         class:collapsed={drawerCollapsed}
-        class:opened={drawerOpened}
       >
-        <slot name="menu">
-          <div class="inner-menu">
-            {#if mAndDown}
-              <div style:margin-right="2rem">
-                <Icon
-                  name="mdi-menu"
-                  click
-                  on:click={toggleMenu}
-                ></Icon>
-              </div>
-            {/if}
-            {#if openedHeader || mAndDown}
-              <slot name="inner-menu" hamburgerVisible={mAndDown}>
-                Menu
-              </slot>
-            {/if}
-          </div>
+        <slot name="logo" collapsed={drawerCollapsed} mAndDown>
+          <img src={drawerCollapsed ? partialLogo : fullLogo} alt="logo">
         </slot>
       </div>
-      <div
-        class="side-bar-content"
-        class:collapsed={drawerCollapsed}
+      <SelectableMenuList
+        items={menuItems}
+        collapsed={drawerCollapsed}
+        selected={selectedMenuElementName}
+        on:select={handleMenuSelect}
+      ></SelectableMenuList>
+      <CollapsibleDivider
+        bind:collapsed={drawerCollapsed}
+        on:change={handleCollpsabledDividerChange}
+      ></CollapsibleDivider>
+    </div>
+    <div class="header-menu">
+      <HeaderMenu
+        bind:openDrawer={drawerOpened}
+        on:drawer-change
       >
-        <slot name="sidebar-header" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}>
-          {#if !!fullLogo && !!partialLogo && !mAndDown}
-            <div class="logo-container" class:collapsed={drawerCollapsed}>
-              <img src={drawerCollapsed ? partialLogo : fullLogo} alt="logo">
-            </div>
-          {/if}
-        </slot>
-        <slot name="sidebar-main" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}>
-          <div
-            class="menu-container"
-            class:collapsed={drawerCollapsed}
-          >
-            <div
-              class="menu"
-              class:collapsed={drawerCollapsed}
-            >
-              {#each menuItems as menu}
-                {#if 'id' in menu}
-                  <div
-                    class="menu-row"
-                    class:selected={menu.id === selectedMenuElementId}
-                    on:click={() => handleMenuClick(menu)}
-                    on:keypress
-                  >
-                    <div class="menu-icon"><Icon name={menu.icon} size={menuIconsSize}></Icon></div>
-                    <div class="menu-name">{menu.name}</div>
-                  </div>
-                {:else}
-                  <div
-                    style:margin-top={menu.marginTop}
-                    style:margin-bottom={menu.marginBottom}
-                    style:margin-right="14px"
-                    class:divider={menu.divider}
-                    class="menu-row"
-                  >
-                  </div>
-                {/if}
-              {/each}
-            </div>
+        <svelte:fragment slot="title">
+          <div class="header-logo-container">
+            <img src={fullLogo} alt="logo">
           </div>
-        </slot>
-        <CollapsibleDivider
-          bind:collapsed={drawerCollapsed}
-          disabled={mAndDown}
-          _circleColor={_dividersColor}
-          _dividerColor={_dividersColor}
-          _iconColor={_dividersColor}
-        ></CollapsibleDivider>
-        <slot name="sidebar-footer" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}></slot>
-      </div>
-    </header>
-    <div
-      class="main-section"
-      class:collapsed={drawerCollapsed}
-    >
-      <div
-        style:padding={_pagePadding}
-      >
-        <slot>Content</slot>
-      </div>
+        </svelte:fragment>
+        <div 
+          slot="drawer" 
+          style:padding="0px 10px 10px 0px"
+        >
+          <SelectableMenuList
+            items={menuItems}
+            collapsed={false}
+            selected={selectedMenuElementName}
+          ></SelectableMenuList>
+        </div>
+      </HeaderMenu>
     </div>
+    <main 
+      class="page-content"
+      class:collapsed={!drawerCollapsed}
+      class:expanded={drawerCollapsed}
+    >
+      <slot></slot>
+    </main>
   </div>
 </MediaQuery>
 
-
 <style>
-
-  .divider {
-    height: 1px;
-    background-color: var(--collapsible-side-bar-layout-divider-color);
-  }
-  
-  .logo-container {
-    padding-left: 16px;
-    padding-top: 10px;
-    transition-property: width padding-left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-  }
-
-  .logo-container.collapsed {
-    padding-left: 8px;
-  }
-
-  .logo-container img {
-    height: calc(var(--collapsible-side-bar-layout-collapsed-width) - 20px);
-  }
-
-  .side-bar {
-    padding-left: 5px;
-    padding-top: 5px;
+  .sidebar {
     position: fixed;
-    width: var(--collapsible-side-bar-layout-expanded-width);
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transition-property: width padding-left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-    overflow: hidden;
-    white-space: nowrap;
-    background-color: var(--collapsible-side-bar-layout-sidebar-background-color);
+    bottom: 0px;
+    top: 0px;
+    width: var(
+      --collapsible-side-bar-layout-sidebar-width,
+      var(--collapsible-side-bar-layout-default-sidebar-width)
+    );
+    transition: width .3s cubic-bezier(0.075, 0.82, 0.165, 1);
   }
 
-  @media (max-width: 1023.98px) {
-  	.side-bar-content {
-      visibility: hidden
-    }
-  }
-
-  .side-bar.collapsed {
-    width: var(--collapsible-side-bar-layout-collapsed-width);
+  .sidebar.collapsed {
+    width: var(
+      --collapsible-side-bar-layout-sidebar-collapsed-width,
+      var(--collapsible-side-bar-layout-default-sidebar-collapsed-width)
+    );
   }
 
-  .header-toolbar {
-    padding-right: 20px;
-    position: fixed;
-    height: var(--collapsible-side-bar-layout-header-height);
-    left: calc(5px + var(--collapsible-side-bar-layout-expanded-width));
-    transition-property: left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-    right: 0;
-    top: 0;
-  }
-
-  .header-toolbar.collapsed {
-    left: calc(5px + var(--collapsible-side-bar-layout-collapsed-width));
-  }
+  @media (max-width: 991.98px){
+  	.sidebar {
+      visibility: hidden;
+    }
 
-  .main-section {
-    padding-left: var(--collapsible-side-bar-layout-expanded-width);
-    padding-top: var(--collapsible-side-bar-layout-header-height);
-    transition-property: padding-left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+    .page-content {
+      padding-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
   }
 
-  .main-section.collapsed {
-    padding-left: var(--collapsible-side-bar-layout-collapsed-width);
-  }
+  @media (min-width: 992px){
+  	.header-menu {
+      visibility: hidden;
+    }
 
-  .menu {
-    width: auto;
-    margin-top: 40px;
-    margin-bottom: 20px;
-  }
+    .page-content {
+      margin-top: -3rem;
+      transition: padding-left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
 
-  .menu-container {
-    padding-left: 30px;
-    padding-right: 30px;
-    transition-property: padding-left padding-right;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-  }
+    .page-content.expanded {
+      padding-left: 6rem
+    }
 
-  .menu-container.collapsed {
-    padding-left: 22px;
-    padding-right: 14px;
+    .page-content.collapsed {
+      padding-left: 18rem
+    }
   }
 
-  .menu .menu-name {
-    transition-property: opacity width;
+  .logo-container {
+    padding-left: 16px;
+    padding-top: 10px;
+    transition-property: width padding-left;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-    padding-left: 20px;
-    width: 100%;
-    font-size: var(--collapsible-side-bar-layout-menu-element-font-size);
-    font-weight: var(--collapsible-side-bar-layout-menu-element-font-weight);
   }
 
-  .menu-icon {
-    display: flex;
-    justify-content: center;
-    margin-left: 0;
-  }
-
-  .menu.collapsed .menu-name {
-    width: 0px;
+  .logo-container.collapsed {
     padding-left: 0px;
-    opacity: 0;
-  }
-
-  .menu-row {
-    display: flex;
-    margin-bottom: var(--collapsible-side-bar-layout-menu-element-margin-bottom);
-    cursor: pointer;
-    color: var(--collapsible-side-bar-layout-menu-color)
   }
 
-  .menu-row.selected {
-    color: var(--collapsible-side-bar-layout-selected-menu-color);
+  .logo-container img {
+    height: var(
+      --collapsible-side-bar-layout-logo-height,
+      var(--collapsible-side-bar-layout-default-logo-height)
+    );
   }
 
-  .inner-menu {
-    padding-left: 20px;
-    background-color: var(--collapsible-side-bar-layout-header-background-color);
-    height: 100%;
+  .header-logo-container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
   }
 
-  @media (max-width: 1024px) {
-    .side-bar {
-      left: calc(0rem - var(--collapsible-side-bar-layout-expanded-width));
-      right: auto;
-      transition-property: left;
-      transition-timing-function: cubic-bezier(.4,0,.2,1);
-      transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-      top: var(--collapsible-side-bar-layout-header-height);
-      background-color: var(--collapsible-side-bar-layout-sidebar-background-color);
-      bottom: 0;
-      z-index: 30;
-      width: var(--collapsible-side-bar-layout-expanded-width);
-      max-width: 100vw;
-    }
-
-    .side-bar.opened {
-      left: 0;
-    }
-
-    .overlay {
-      position: fixed;
-      top: var(--collapsible-side-bar-layout-header-height);
-      left: 0;
-      bottom: 0;
-      right: 0;
-      z-index: -100;
-      transition-property: backdrop-filter;
-      transition-timing-function: cubic-bezier(.4,0,.2,1);
-      transition-duration: .15s;
-      display: block;
-    }
-
-    .overlay.visible {
-      background-color: var(--collapsible-side-bar-layout-overlay-color);
-      backdrop-filter: blur(4px);
-      z-index: 20;
-    }
-
-    .header-toolbar {
-      left: 0;
-    }
-
-    .header-toolbar.collapsed {
-      left: 0;
-    }
-
-    .header-toolbar.opened {
-      background-color: inherit;
-    }
-
-    .header-toolbar:hover {
-      background-color: inherit;
-    }
-
-    .main-section {
-      padding-left: 0;
-    }
-
-    .main-section.collapsed {
-      padding-left: 0;
-    }
-
-    .blurred {
-      backdrop-filter: blur(4px);
-    }
+  .header-logo-container img {
+    height: 3rem;
   }
 </style>

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

@@ -1,70 +1,31 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../css/main.css';
+import './CollapsibleSideBarLayout.css';
+import type { MenuItem } from "../simple/lists/SelectableMenuList.svelte";
 declare const __propDef: {
     props: {
-        _pagePadding?: string | undefined;
-        _menuElementMarginBottom?: string | undefined;
-        _menuElementFontSize?: string | undefined;
-        _menuElementFontWeight?: string | undefined;
-        _menuColor?: string | undefined;
-        _selectedMenuColor?: string | undefined;
-        _expandedSideBarWidth?: string | undefined;
-        _collapsedSideBarWidth?: string | undefined;
-        _headerHeight?: string | undefined;
-        _collapseTransitionTime?: string | undefined;
-        _sideBarBackgroundColor?: string | undefined;
-        _overlayColor?: string | undefined;
-        _headerBackgroundColor?: string | undefined;
-        _dividersColor?: string | undefined;
         drawerOpened?: boolean | undefined;
         drawerCollapsed?: boolean | undefined;
-        menuItems?: ({
-            id: string;
-            name: string;
-            icon: string;
-        } | {
-            divider: boolean;
-            marginTop: string;
-            marginBottom: string;
-        })[] | undefined;
-        menuIconsSize?: number | undefined;
-        selectedMenuElementId?: string | undefined;
+        menuItems?: MenuItem[] | undefined;
+        selectedMenuElementName?: string | undefined;
         fullLogo?: string | undefined;
         partialLogo?: string | undefined;
-        openedHeader?: boolean | undefined;
     };
     events: {
-        keypress: KeyboardEvent;
-        collapse: CustomEvent<{
-            collapsed: boolean;
-        }>;
         'drawer-change': CustomEvent<{
             opened: boolean;
         }>;
-        'menu-click': CustomEvent<{
-            menu: {
-                id: string;
-                name: string;
-                icon: string;
-            };
+        collapse: CustomEvent<{
+            collapsed: boolean;
+        }>;
+        'menu-select': CustomEvent<{
+            menu: MenuItem;
         }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        menu: {};
-        'inner-menu': {
-            hamburgerVisible: boolean;
-        };
-        'sidebar-header': {
-            hamburgerVisible: boolean;
-            collapsed: boolean;
-        };
-        'sidebar-main': {
-            hamburgerVisible: boolean;
-            collapsed: boolean;
-        };
-        'sidebar-footer': {
-            hamburgerVisible: boolean;
+        logo: {
             collapsed: boolean;
         };
         default: {};

package/dist/components/layouts/StableDividedSideBarLayout.svelte

@@ -1,4 +1,5 @@
-<script>import "./StableDividedSideBarLayout.css";
+<script>import "../../css/main.css";
+import "./StableDividedSideBarLayout.css";
 import MediaQuery from "../simple/common/MediaQuery.svelte";
 import Icon from "../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../css/main.css';
 import './StableDividedSideBarLayout.css';
 declare const __propDef: {
     props: {

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

@@ -1,4 +1,5 @@
-<script>import "./Button.css";
+<script>import "../../../css/main.css";
+import "./Button.css";
 let clazz = "";
 export { clazz as class };
 export let buttonType = "default", type = "button", loading = false, icon = void 0, tabindex = null, disabled = false;

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './Button.css';
 declare const __propDef: {
     props: {

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

@@ -1,9 +1,10 @@
-<script>import "./LinkButton.css";
+<script>import "../../../css/main.css";
+import "./LinkButton.css";
 import { createEventDispatcher } from "svelte";
 import Icon from "../media/Icon.svelte";
 let clazz = "";
 export { clazz as class };
-export let disabled = false, href, prependIcon = void 0, appendIcon = void 0, iconSize = void 0, target = void 0;
+export let disabled = false, href, prependIcon = void 0, appendIcon = void 0, target = void 0;
 const dispatch = createEventDispatcher();
 function handleClick(event) {
   if (disabled)
@@ -29,15 +30,15 @@ function handleKeyPress(event) {
   rel={target == '_blank' ? 'noreferrer' : undefined}
   class="link {clazz}"
 >
-  <slot name="prepend" {prependIcon} {iconSize}>
+  <slot name="prepend" {prependIcon}>
     {#if !!prependIcon}
-      <Icon name={prependIcon} size={iconSize}></Icon>
+      <Icon name={prependIcon}></Icon>
     {/if}
   </slot>
   <slot></slot>
-  <slot name="append" {appendIcon} {iconSize}>
+  <slot name="append" {appendIcon}>
     {#if !!appendIcon}
-      <Icon name={appendIcon} size={iconSize}></Icon>
+      <Icon name={appendIcon}></Icon>
     {/if}
   </slot>
 </a>

package/dist/components/simple/buttons/LinkButton.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './LinkButton.css';
 declare const __propDef: {
     props: {
@@ -7,7 +8,6 @@ declare const __propDef: {
         href: string;
         prependIcon?: string | undefined;
         appendIcon?: string | undefined;
-        iconSize?: number | undefined;
         target?: string | undefined;
     };
     events: {
@@ -23,12 +23,10 @@ declare const __propDef: {
     slots: {
         prepend: {
             prependIcon: string | undefined;
-            iconSize: number | undefined;
         };
         default: {};
         append: {
             appendIcon: string | undefined;
-            iconSize: number | undefined;
         };
     };
 };

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

@@ -1,4 +1,5 @@
-<script>import "./CollapsibleDivider.css";
+<script>import "../../../css/main.css";
+import "./CollapsibleDivider.css";
 import { createEventDispatcher } from "svelte";
 import Icon from "../media/Icon.svelte";
 let dispatch = createEventDispatcher();

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './CollapsibleDivider.css';
 declare const __propDef: {
     props: {

package/dist/components/simple/dates/Calendar.svelte

@@ -1,4 +1,5 @@
-<script>import "./Calendar.css";
+<script>import "../../../css/main.css";
+import "./Calendar.css";
 import { fly } from "svelte/transition";
 import { getDateRowsStats, getDaysNames } from "./utils";
 let clazz = {};

package/dist/components/simple/dates/Calendar.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './Calendar.css';
 import type { DateStat, Locale } from "./utils";
 declare const __propDef: {

package/dist/components/simple/dates/DatePicker.svelte

@@ -1,4 +1,5 @@
-<script>import "./DatePicker.css";
+<script>import "../../../css/main.css";
+import "./DatePicker.css";
 import { getMonthName, dateToString } from "./utils";
 import YearSelector from "./YearSelector.svelte";
 import MonthSelector from "./MonthSelector.svelte";

package/dist/components/simple/dates/DatePicker.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './DatePicker.css';
 import type { Locale } from "./utils";
 declare const __propDef: {

package/dist/components/simple/dates/MonthSelector.svelte

@@ -1,4 +1,5 @@
-<script>import "./MonthSelector.css";
+<script>import "../../../css/main.css";
+import "./MonthSelector.css";
 import { getMonthName } from "./utils";
 let clazz = {};
 export { clazz as class };

package/dist/components/simple/dates/MonthSelector.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './MonthSelector.css';
 import type { Locale } from "./utils";
 declare const __propDef: {

package/dist/components/simple/dates/YearSelector.svelte

@@ -1,4 +1,5 @@
-<script>import "./YearSelector.css";
+<script>import "../../../css/main.css";
+import "./YearSelector.css";
 import { scrollAtCenter } from "../common/scroller";
 import { createEventDispatcher, onMount } from "svelte";
 let clazz = void 0;

package/dist/components/simple/dates/YearSelector.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './YearSelector.css';
 declare const __propDef: {
     props: {

package/dist/components/simple/forms/Autocomplete.svelte

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import "./Autocomplete.css";
+<script>import "../../../css/main.css";
+import "./Autocomplete.css";
 let clazz = {};
 export { clazz as class };
 export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px";

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -4,6 +4,7 @@ export type Item = {
     label?: string;
     data?: any;
 };
+import '../../../css/main.css';
 import './Autocomplete.css';
 declare const __propDef: {
     props: {

package/dist/components/simple/forms/SimpleTextField.svelte

@@ -1,4 +1,5 @@
-<script>import "./SimpleTextField.css";
+<script>import "../../../css/main.css";
+import "./SimpleTextField.css";
 import Icon from "../media/Icon.svelte";
 let clazz = {};
 export { clazz as class };

package/dist/components/simple/forms/SimpleTextField.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './SimpleTextField.css';
 declare const __propDef: {
     props: {

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

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import "./SelectableMenuList.css";
+<script>import "../../../css/main.css";
+import "./SelectableMenuList.css";
 import Icon from "../media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 let dispatch = createEventDispatcher();

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

@@ -14,6 +14,7 @@ type Item = {
     divider?: undefined | false;
 };
 export type MenuItem = Divider | Item;
+import '../../../css/main.css';
 import './SelectableMenuList.css';
 declare const __propDef: {
     props: {

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

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import "./SidebarMenuList.css";
+<script>import "../../../css/main.css";
+import "./SidebarMenuList.css";
 import { page } from "$app/stores";
 export let menus, level = 0, selected = void 0, bookmarkColor = "black", color = "inherit", hoverColor = "inherit", selectedTextColor = "inherit", selectedFontWeight = "600", autoDetectUrl = false;
 let selectedIndex = void 0;

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

@@ -6,6 +6,7 @@ export type Menu = {
     disabled?: boolean;
     children?: Menu[];
 };
+import '../../../css/main.css';
 import './SidebarMenuList.css';
 declare const __propDef: {
     props: {

package/dist/components/simple/loaders/CircularLoader.svelte

@@ -1,4 +1,5 @@
-<script>import "./CircularLoader.css";
+<script>import "../../../css/main.css";
+import "./CircularLoader.css";
 let clazz = "";
 export { clazz as class };
 export let loading = true;

package/dist/components/simple/loaders/CircularLoader.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './CircularLoader.css';
 declare const __propDef: {
     props: {

package/dist/components/simple/navigation/Chip.svelte

@@ -1,4 +1,5 @@
-<script>import "./Chip.css";
+<script>import "../../../css/main.css";
+import "./Chip.css";
 import Icon from "../media/Icon.svelte";
 import Button from "../buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";

package/dist/components/simple/navigation/Chip.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './Chip.css';
 declare const __propDef: {
     props: {

package/dist/components/simple/navigation/Drawer.svelte

@@ -1,4 +1,5 @@
-<script>import "./Drawer.css";
+<script>import "../../../css/main.css";
+import "./Drawer.css";
 import Navigator from "./Navigator.svelte";
 export let open = false, position = "left", overlay = true, items = [];
 function handleClickOverlay() {

package/dist/components/simple/navigation/Drawer.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './Drawer.css';
 import type { Item } from "./Navigator.svelte";
 declare const __propDef: {

package/dist/components/simple/navigation/HeaderMenu.svelte

@@ -1,4 +1,5 @@
-<script>import "./HeaderMenu.css";
+<script>import "../../../css/main.css";
+import "./HeaderMenu.css";
 import Button from "../buttons/Button.svelte";
 import Drawer from "./Drawer.svelte";
 import { createEventDispatcher } from "svelte";

package/dist/components/simple/navigation/HeaderMenu.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './HeaderMenu.css';
 declare const __propDef: {
     props: {

package/dist/components/simple/notifiers/AlertBanner.svelte

@@ -1,4 +1,5 @@
-<script>import "./AlertBanner.css";
+<script>import "../../../css/main.css";
+import "./AlertBanner.css";
 import { createEventDispatcher } from "svelte";
 let clazz = {};
 export { clazz as class };

package/dist/components/simple/notifiers/AlertBanner.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
 import './AlertBanner.css';
 declare const __propDef: {
     props: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",

package/dist/components/layouts/NewCollapsibleSideBarLayout.svelte

@@ -1,155 +0,0 @@
-<script>import "./CollapsibleSideBarLayout.css";
-import { createEventDispatcher } from "svelte";
-import CollapsibleDivider from "../simple/common/CollapsibleDivider.svelte";
-import MediaQuery from "../simple/common/MediaQuery.svelte";
-import SelectableMenuList from "../simple/lists/SelectableMenuList.svelte";
-import HeaderMenu from "../simple/navigation/HeaderMenu.svelte";
-export let drawerOpened = false, drawerCollapsed = false, menuItems = [], selectedMenuElementName = void 0, fullLogo = void 0, partialLogo = void 0;
-let dispatch = createEventDispatcher();
-function handleMenuSelect(event) {
-  dispatch("menu-select", {
-    menu: event.detail.item
-  });
-}
-function handleCollpsabledDividerChange() {
-  dispatch("collapse", {
-    collapsed: drawerCollapsed
-  });
-}
-</script>
-
-<MediaQuery let:mAndDown>
-  <div class="container">
-    <div 
-      class="sidebar"
-      class:collapsed={drawerCollapsed}
-    >
-      <div 
-        class="logo-container"
-        class:collapsed={drawerCollapsed}
-      >
-        <slot name="logo" collapsed={drawerCollapsed} mAndDown>
-          <img src={drawerCollapsed ? partialLogo : fullLogo} alt="logo">
-        </slot>
-      </div>
-      <SelectableMenuList
-        items={menuItems}
-        collapsed={drawerCollapsed}
-        selected={selectedMenuElementName}
-        on:select={handleMenuSelect}
-      ></SelectableMenuList>
-      <CollapsibleDivider
-        bind:collapsed={drawerCollapsed}
-        on:change={handleCollpsabledDividerChange}
-      ></CollapsibleDivider>
-    </div>
-    <div class="header-menu">
-      <HeaderMenu
-        bind:openDrawer={drawerOpened}
-        on:drawer-change
-      >
-        <svelte:fragment slot="title">
-          <div class="header-logo-container">
-            <img src={fullLogo} alt="logo">
-          </div>
-        </svelte:fragment>
-        <div 
-          slot="drawer" 
-          style:padding="0px 10px 10px 0px"
-        >
-          <SelectableMenuList
-            items={menuItems}
-            collapsed={false}
-            selected={selectedMenuElementName}
-          ></SelectableMenuList>
-        </div>
-      </HeaderMenu>
-    </div>
-    <main 
-      class="page-content"
-      class:collapsed={!drawerCollapsed}
-      class:expanded={drawerCollapsed}
-    >
-      <slot></slot>
-    </main>
-  </div>
-</MediaQuery>
-
-<style>
-  .sidebar {
-    position: fixed;
-    bottom: 0px;
-    top: 0px;
-    width: var(
-      --collapsible-side-bar-layout-sidebar-width,
-      var(--collapsible-side-bar-layout-default-sidebar-width)
-    );
-    transition: width .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-  }
-
-  .sidebar.collapsed {
-    width: var(
-      --collapsible-side-bar-layout-sidebar-collapsed-width,
-      var(--collapsible-side-bar-layout-default-sidebar-collapsed-width)
-    );
-  }
-
-  @media (max-width: 991.98px){
-  	.sidebar {
-      visibility: hidden;
-    }
-
-    .page-content {
-      padding-top: 1rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-  }
-
-  @media (min-width: 992px){
-  	.header-menu {
-      visibility: hidden;
-    }
-
-    .page-content {
-      margin-top: -3rem;
-      transition: padding-left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-    }
-
-    .page-content.expanded {
-      padding-left: 6rem
-    }
-
-    .page-content.collapsed {
-      padding-left: 18rem
-    }
-  }
-
-  .logo-container {
-    padding-left: 16px;
-    padding-top: 10px;
-    transition-property: width padding-left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-  }
-
-  .logo-container.collapsed {
-    padding-left: 0px;
-  }
-
-  .logo-container img {
-    height: var(
-      --collapsible-side-bar-layout-logo-height,
-      var(--collapsible-side-bar-layout-default-logo-height)
-    );
-  }
-
-  .header-logo-container {
-    display: flex;
-    align-items: center;
-  }
-
-  .header-logo-container img {
-    height: 3rem;
-  }
-</style>

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

@@ -1,38 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import './CollapsibleSideBarLayout.css';
-import type { MenuItem } from "../simple/lists/SelectableMenuList.svelte";
-declare const __propDef: {
-    props: {
-        drawerOpened?: boolean | undefined;
-        drawerCollapsed?: boolean | undefined;
-        menuItems?: MenuItem[] | undefined;
-        selectedMenuElementName?: string | undefined;
-        fullLogo?: string | undefined;
-        partialLogo?: string | undefined;
-    };
-    events: {
-        'drawer-change': CustomEvent<{
-            opened: boolean;
-        }>;
-        collapse: CustomEvent<{
-            collapsed: boolean;
-        }>;
-        'menu-select': CustomEvent<{
-            menu: MenuItem;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        logo: {
-            collapsed: boolean;
-        };
-        default: {};
-    };
-};
-export type NewCollapsibleSideBarLayoutProps = typeof __propDef.props;
-export type NewCollapsibleSideBarLayoutEvents = typeof __propDef.events;
-export type NewCollapsibleSideBarLayoutSlots = typeof __propDef.slots;
-export default class NewCollapsibleSideBarLayout extends SvelteComponentTyped<NewCollapsibleSideBarLayoutProps, NewCollapsibleSideBarLayoutEvents, NewCollapsibleSideBarLayoutSlots> {
-}
-export {};