@likable-hair/svelte 2.0.8 → 3.0.0

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

@@ -0,0 +1,38 @@
+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 {};

package/dist/components/layouts/StableDividedSideBarLayout.css

@@ -0,0 +1,16 @@
+:root {
+  --stable-divided-side-bar-layout-default-content-padding: 1rem 2rem 1rem 2rem;
+  --stable-divided-side-bar-layout-default-side-bar-width: 18rem;
+  --stable-divided-side-bar-layout-default-side-bar-border-color: 
+    rgb(var(--global-color-grey-500));
+  --stable-divided-side-bar-layout-default-side-bar-padding: 1rem 1.5rem 2rem 1.5rem;
+  --stable-divided-side-bar-layout-default-header-menu-height: 3.5rem;
+  --stable-divided-side-bar-layout-default-header-menu-border-color:
+    rgb(var(--global-color-grey-500));
+  --stable-divided-side-bar-layout-default-header-menu-padding: 0rem 2rem 0rem 2rem;
+  --stable-divided-side-bar-layout-default-inner-header-menu-background-color:
+    rgb(var(--global-color-background-100), .5);
+  --stable-divided-side-bar-layout-default-drawer-background-color:
+    rgb(var(--global-color-background-50));
+  --stable-divided-side-bar-layout-default-drawer-width: 24rem;
+}

package/dist/components/layouts/StableDividedSideBarLayout.svelte

@@ -1,7 +1,10 @@
-<script>import MediaQuery from "../simple/common/MediaQuery.svelte";
+<script>import "./StableDividedSideBarLayout.css";
+import MediaQuery from "../simple/common/MediaQuery.svelte";
 import Icon from "../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
-export let sideBarWidth = "18rem", sideBarBorderColor = "hsl(0deg 0% 39.85% / 50%)", sideBarPadding = "1rem 1.5rem 2rem 1.5rem", headerMenuHeight = "3.5rem", headerMenuBorderColor = "hsl(0deg 0% 39.85% / 50%)", headerMenuPadding = "0rem 2rem 0rem 2rem", padding = "1rem 2rem 1rem 2rem", innerHeaderMenuBackgroundColor = "rgb(255 255 255/0.5)", drawerBackgroundColor = "white", drawerWidth = "24rem", drawerOpened = false;
+let clazz = {};
+export { clazz as class };
+export let drawerOpened = false;
 let dispatch = createEventDispatcher();
 function toggleMenu() {
   drawerOpened = !drawerOpened;
@@ -15,18 +18,10 @@ function handleOverlayClick() {
 
 <MediaQuery let:mAndDown>
   <div
-    style:--stable-divider-side-bar-layout-side-bar-width={sideBarWidth}
-    style:--stable-divider-side-bar-layout-side-bar-border-color={sideBarBorderColor}
-    style:--stable-divider-side-bar-layout-side-bar-padding={sideBarPadding}
-    style:--stable-divider-side-bar-layout-header-menu-height={headerMenuHeight}
-    style:--stable-divider-side-bar-layout-header-menu-border-color={headerMenuBorderColor}
-    style:--stable-divider-side-bar-layout-header-menu-padding={headerMenuPadding}
-    style:--stable-divider-side-bar-layout-inner-header-menu-background-color={innerHeaderMenuBackgroundColor}
-    style:--stable-divider-side-bar-layout-drawer-background-color={drawerBackgroundColor}
-    style:--stable-divider-side-bar-layout-drawer-width={drawerWidth}
+    class={clazz.container || ''}
   >
     <header 
-      class="side-bar"
+      class="side-bar {clazz.header}"
       class:opened={drawerOpened}
     >
       <div 
@@ -56,15 +51,15 @@ function handleOverlayClick() {
         </slot>
       </div>
     </header>
-    <div class="main-section">
+    <div class="main-section {clazz.mainSection || ''}">
       <div 
-        class="overlay"
+        class="overlay {clazz.overlay || ''}"
         on:click={handleOverlayClick}
         on:keypress={handleOverlayClick}
         class:visible={drawerOpened}
       ></div>
       <div
-        style:padding={padding}
+        class="content"
         class:blurred={drawerOpened}
       >
         <slot>Content</slot>
@@ -77,13 +72,22 @@ function handleOverlayClick() {
 <style>
   .side-bar {
     position: fixed;
-    width: var(--stable-divider-side-bar-layout-side-bar-width);
-    border-right: 1px solid var(--stable-divider-side-bar-layout-side-bar-border-color);
+    width: var(
+      --stable-divided-side-bar-layout-side-bar-width, 
+      var(--stable-divided-side-bar-layout-default-side-bar-width)
+    );
+    border-right: 1px solid var(
+      --stable-divided-side-bar-layout-side-bar-border-color,
+      var(--stable-divided-side-bar-layout-default-side-bar-border-color)
+    );
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    padding: var(--stable-divider-side-bar-layout-side-bar-padding);
+    padding: var(
+      --stable-divided-side-bar-layout-side-bar-padding,
+      var(--stable-divided-side-bar-layout-default-side-bar-padding)
+    );
     z-index: 10;
   }
 
@@ -91,18 +95,37 @@ function handleOverlayClick() {
     display: none;
   }
 
+  .content {
+    padding: var(
+      --stable-divided-side-bar-layout-content-padding,
+      var(--stable-divided-side-bar-layout-default-content-padding)
+    );
+  }
+
   @media (max-width: 1024px) {
   	.side-bar {
-      left: calc(0rem - var(--stable-divider-side-bar-layout-drawer-width));
+      left: calc(0rem - var(
+          --stable-divided-side-bar-layout-drawer-width,
+          var(--stable-divided-side-bar-layout-default-drawer-width)
+        )
+      );
       right: auto;
       transition-property: left;
       transition-timing-function: cubic-bezier(.4,0,.2,1);
       transition-duration: .5s;
-      top: var(--stable-divider-side-bar-layout-header-menu-height);
-      background-color: var(--stable-divider-side-bar-layout-drawer-background-color);
+      top: var(--stable-divided-side-bar-layout-header-menu-height,
+        var(--stable-divided-side-bar-layout-default-header-menu-height)
+      );
+      background-color: var(
+        --stable-divided-side-bar-layout-drawer-background-color,
+        var(--stable-divided-side-bar-layout-default-drawer-background-color)
+      );
       bottom: 0;
       z-index: 30;
-      width: var(--stable-divider-side-bar-layout-drawer-width);
+      width: var(
+        --stable-divided-side-bar-layout-drawer-width,
+        var(--stable-divided-side-bar-layout-default-drawer-width)
+      );
       max-width: 100vw;
     }
 
@@ -112,7 +135,10 @@ function handleOverlayClick() {
 
     .overlay {
       position: fixed;
-      top: var(--stable-divider-side-bar-layout-header-menu-height);
+      top: var(
+        --stable-divided-side-bar-layout-header-menu-height,
+        var(--stable-divided-side-bar-layout-default-header-menu-height)
+      );
       left: 0;
       bottom: 0;
       right: 0;
@@ -132,11 +158,23 @@ function handleOverlayClick() {
 
   .header-toolbar {
     position: fixed;
-    height: var(--stable-divider-side-bar-layout-header-menu-height);
-    left: var(--stable-divider-side-bar-layout-side-bar-width);
-    border-bottom: 1px solid var(--stable-divider-side-bar-layout-header-menu-border-color);
+    height: var(
+      --stable-divided-side-bar-layout-header-menu-height,
+      var(--stable-divided-side-bar-layout-default-header-menu-height)
+    );
+    left: var(
+      --stable-divided-side-bar-layout-side-bar-width,
+      var(--stable-divided-side-bar-layout-default-side-bar-width)
+    );
+    border-bottom: 1px solid var(
+      --stable-divided-side-bar-layout-header-menu-border-color,
+      var(--stable-divided-side-bar-layout-default-header-menu-border-color)
+    );
     backdrop-filter: blur(4px);
-    background-color: var(--stable-divider-side-bar-layout-inner-header-menu-background-color);
+    background-color: var(
+      --stable-divided-side-bar-layout-inner-header-menu-background-color,
+      var(--stable-divided-side-bar-layout-default-inner-header-menu-background-color)
+    );
     transition-property: background-color;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     transition-duration: .5s;
@@ -159,8 +197,14 @@ function handleOverlayClick() {
   }
 
   .main-section {
-    padding-left: var(--stable-divider-side-bar-layout-side-bar-width);
-    padding-top: var(--stable-divider-side-bar-layout-header-menu-height);
+    padding-left: var(
+      --stable-divided-side-bar-layout-side-bar-width,
+      var(--stable-divided-side-bar-layout-default-side-bar-width)
+    );
+    padding-top: var(
+      --stable-divided-side-bar-layout-header-menu-height,
+      var(--stable-divided-side-bar-layout-default-header-menu-height,)
+    );
   }
 
   @media (max-width: 1024px) {
@@ -174,8 +218,14 @@ function handleOverlayClick() {
   }
 
   .inner-menu {
-    padding: var(--stable-divider-side-bar-layout-header-menu-padding);
-    background-color: var(--stable-divider-side-bar-layout-inner-header-menu-background-color);
+    padding: var(
+      --stable-divided-side-bar-layout-header-menu-padding,
+      var(--stable-divided-side-bar-layout-default-header-menu-padding)
+    );
+    background-color: var(
+      --stable-divided-side-bar-layout-inner-header-menu-background-color,
+      var(--stable-divided-side-bar-layout-default-inner-header-menu-background-color)
+    );
     height: 100%;
     display: flex;
     align-items: center;

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

@@ -1,16 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import './StableDividedSideBarLayout.css';
 declare const __propDef: {
     props: {
-        sideBarWidth?: string | undefined;
-        sideBarBorderColor?: string | undefined;
-        sideBarPadding?: string | undefined;
-        headerMenuHeight?: string | undefined;
-        headerMenuBorderColor?: string | undefined;
-        headerMenuPadding?: string | undefined;
-        padding?: string | undefined;
-        innerHeaderMenuBackgroundColor?: string | undefined;
-        drawerBackgroundColor?: string | undefined;
-        drawerWidth?: string | undefined;
+        class?: {
+            container?: string | undefined;
+            header?: string | undefined;
+            mainSection?: string | undefined;
+            overlay?: string | undefined;
+        } | undefined;
         drawerOpened?: boolean | undefined;
     };
     events: {

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

@@ -0,0 +1,18 @@
+:root {
+  --button-default-text-align: center;
+  --button-default-cursor: pointer;
+  --button-default-padding: 8px;
+  --button-default-border-radius: .5rem;
+  --button-default-icon-border-radius: 9999px;
+  --button-default-color: rgb(var(--global-color-grey-50));
+  --button-default-text-color: rgb(var(--global-color-contrast-900));
+  --button-default-icon-color: rgb(var(--global-color-contrast-900));
+  --button-default-background-color: rgb(var(--global-color-primary-500));
+  --button-default-hover-background-color: rgb(var(--global-color-primary-600));
+  --button-default-text-background-color: transparent;
+  --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-text-active-background-color: rgb(var(--global-color-primary-500), 0.4);
+  --button-default-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
+  --button-default-text-font-weight: 600;
+}

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

@@ -1,4 +1,7 @@
-<script>export let type = "default", active = false, loading = false, icon = void 0, iconSize = 15, maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = void 0, height = void 0, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = void 0, color = void 0, display = void 0, justifyContent = void 0, alignItems = void 0, backgroundColor = void 0, hoverBackgroundColor = "#88888847", activeBackgroundColor = hoverBackgroundColor, borderRadius = void 0, border = void 0, boxShadow = void 0, loaderHeight = "15px", loaderWidth = void 0, disabled = false;
+<script>import "./Button.css";
+let clazz = "";
+export { clazz as class };
+export let buttonType = "default", type = "button", loading = false, icon = void 0, tabindex = null, disabled = false;
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 function handleClick(event) {
@@ -15,59 +18,36 @@ function handleKeyPress(event) {
     nativeEvent: event
   });
 }
-$:
-  defaultBorderRadius = type == "icon" ? "50%" : "5px";
 $:
   position = $$slots.append ? "relative" : void 0;
 import Icon from "../media/Icon.svelte";
 import CircularLoader from "../loaders/CircularLoader.svelte";
 </script>
 
-<div
-  style:width
-  style:max-width={maxWidth}
-  style:min-width={minWidth}
-  style:height
-  style:max-height={maxHeight}
-  style:min-height={minHeight}
-  style:text-align={textAlign}
+<button
+  type={type}
   style:position
-  style:cursor
-  style:padding
-  style:font-size={fontSize}
-  style:color
-  style:display
-  style:justify-content={justifyContent}
-  style:align-items={alignItems}
-  style:--button-border={border}
-  style:--button-border-radius={borderRadius
-    ? borderRadius
-    : defaultBorderRadius}
-  style:--button-background-color={active
-    ? activeBackgroundColor
-    : backgroundColor}
-  style:--button-hover-background-color={hoverBackgroundColor}
-  style:--button-box-shadow={boxShadow}
-  style:--button-icon-height={iconSize + 5 + "pt"}
-  style:--button-icon-width={iconSize + 5 + "pt"}
-  class="button no-select"
-  class:button-default={type === "default"}
-  class:button-text={type === "text"}
-  class:button-icon={type === "icon"}
+  class="button no-select {clazz || ''}"
+  class:button-default={buttonType === "default"}
+  class:button-text={buttonType === "text"}
+  class:button-icon={buttonType === "icon"}
   on:click={handleClick}
   on:keypress={handleKeyPress}
+  tabindex={tabindex}
 >
   {#if loading}
     <div
-      style:height={'calc(' + loaderHeight + ' + .6rem)'}
       style:display="flex"
+      style:justify-content="center"
       style:align-items="center"
     >
-      <CircularLoader {color} height={loaderHeight} width={loaderWidth} />
+      <CircularLoader 
+        --circular-loader-color="var(--button-color)"
+      />
     </div>
   {:else}
     {#if !!icon}
-      <Icon name={icon} size={iconSize} />
+      <Icon name={icon} />
     {:else}
       <slot />
     {/if}
@@ -77,7 +57,7 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
       </span>
     {/if}
   {/if}
-</div>
+</button>
 
 <style>
   .append-item {
@@ -87,48 +67,168 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
 
   .button {
     overflow: hidden;
+    box-sizing: content-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    width: var(
+      --button-width,
+      var(--button-default-width)
+    );
+    max-width: var(
+      --button-max-width,
+      var(--button-default-max-width)
+    );
+    min-width: var(
+      --button-min-width,
+      var(--button-default-min-width)
+    );
+    height: var(
+      --button-height,
+      var(--button-default-height)
+    );
+    max-height: var(
+      --button-max-height,
+      var(--button-default-max-height)
+    );
+    min-height: var(
+      --button-min-height,
+      var(--button-default-min-height)
+    );
+    text-align: var(
+      --button-text-align,
+      var(--button-default-text-align)
+    );
+    cursor: var(
+      --button-cursor,
+      var(--button-default-cursor)
+    );
+    padding: var(
+      --button-padding,
+      var(--button-default-padding)
+    );
+    font-size: var(
+      --button-font-size,
+      var(--button-default-font-size)
+    );
+    display: var(
+      --button-display,
+      var(--button-default-display)
+    );
+    justify-content: var(
+      --button-justify-content,
+      var(--button-default-justify-content)
+    );
+    align-items: var(
+      --button-align-items,
+      var(--button-default-align-items)
+    );
+    border: var(
+      --button-border,
+      var(--button-default-border)
+    );
   }
 
   .button-default {
     transition: background-color 200ms;
-    background-color: var(--button-background-color);
     outline: 0;
-    border: var(--button-border);
-    border-radius: var(--button-border-radius, 0.25rem);
-    box-shadow: var(--button-box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
+    border-radius: var(
+      --button-border-radius, 
+      var(--button-default-border-radius)
+    );
+    box-shadow: var(
+      --button-box-shadow,
+      var(--button-default-box-shadow)
+    );
+    background-color: var(
+      --button-background-color,
+      var(--button-default-background-color)
+    );
+    color: var(
+      --button-color,
+      var(--button-default-color)
+    );
+    font-weight: var(
+      --button-font-weight,
+      var(--button-default-font-weight)
+    );
   }
 
   .button-default:hover {
     background-color: var(
       --button-hover-background-color,
-      var(--button-background-color)
+      var(--button-default-hover-background-color)
+    );
+  }
+
+  .button-default:active {
+    background-color: var(
+      --button-active-background-color,
+      var(--button-default-active-background-color)
     );
   }
 
   .button-text {
     transition: background-color 200ms;
     text-transform: uppercase;
-    font-weight: 600;
+    letter-spacing: .05rem;
     outline: 0;
-    border: var(--button-border);
-    border-radius: var(--button-border-radius, 0.25rem);
+    border-radius: var(
+      --button-border-radius, 
+      var(--button-default-border-radius)
+    );
+    color: var(
+      --button-color,
+      var(--button-default-text-color)
+    );
+    background-color: var(
+      --button-background-color,
+      var(--button-default-text-background-color)
+    );
+    font-weight: var(
+      --button-font-weight,
+      var(--button-default-text-font-weight)
+    );
   }
 
   .button-text:hover {
-    background-color: var(--button-hover-background-color, transparent);
+    background-color: var(
+      --button-hover-background-color,
+      var(--button-default-text-hover-background-color)
+    );
+  }
+
+  .button-text:active {
+    background-color: var(
+      --button-active-background-color,
+      var(--button-default-text-active-background-color)
+    );
   }
 
   .button-icon {
     transition: background-color 200ms;
     outline: 0;
-    border: var(--button-border);
-    border-radius: var(--button-border-radius, 50%);
-    height: var(--button-icon-height) !important;
-    width: var(--button-icon-width) !important;
+    border-radius: var(
+      --button-border-radius, 
+      var(--button-default--icon-border-radius)
+    );
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: var(
+      --button-background-color,
+      var(--button-default-background-color)
+    );
+    color: var(
+      --button-color,
+      var(--button-default-icon-color)
+    );
+    font-weight: var(
+      --button-font-weight,
+      var(--button-default-font-weight)
+    );
+    border-radius: var(
+      --button-border-radius, 
+      var(--button-default-icon-border-radius)
+    );
   }
 
   .button-icon:hover {

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

@@ -1,33 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import './Button.css';
 declare const __propDef: {
     props: {
-        type?: "default" | "text" | "icon" | undefined;
-        active?: boolean | undefined;
+        class?: string | undefined;
+        buttonType?: "default" | "text" | "icon" | undefined;
+        type?: "submit" | "button" | undefined;
         loading?: boolean | undefined;
         icon?: string | undefined;
-        iconSize?: number | undefined;
-        maxWidth?: string | undefined;
-        maxHeight?: string | undefined;
-        minWidth?: string | undefined;
-        minHeight?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        textAlign?: string | undefined;
-        cursor?: string | undefined;
-        padding?: string | undefined;
-        fontSize?: string | undefined;
-        color?: string | null | undefined;
-        display?: string | undefined;
-        justifyContent?: string | undefined;
-        alignItems?: string | undefined;
-        backgroundColor?: string | undefined;
-        hoverBackgroundColor?: string | undefined;
-        activeBackgroundColor?: string | undefined;
-        borderRadius?: string | undefined;
-        border?: string | undefined;
-        boxShadow?: string | undefined;
-        loaderHeight?: string | undefined;
-        loaderWidth?: string | undefined;
+        tabindex?: number | null | undefined;
         disabled?: boolean | undefined;
     };
     events: {

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

@@ -0,0 +1,13 @@
+:root {
+  --link-button-default-color: rgb(var(--global-color-contrast-900));
+  --link-button-default-width: fit-content;
+  --link-button-default-height: auto;
+  --link-button-default-font-size: .875rem;
+  --link-button-default-font-weight: 500;
+  --link-button-default-line-height: 1.5rem;
+  --link-button-default-padding: 0.25rem 0.75rem 0.25rem 0.75rem;
+  --link-button-default-background-color: rgb(var(--global-color-background-300));
+  --link-button-default-border-radius: 9999px;
+  --link-button-default-gap: .5rem;
+  --link-button-default-hover-background-color: rgb(var(--global-color-background-400));
+}