@mozaic-ds/web-components 1.0.0-alpha.0 → 1.0.0-alpha.2

package/public/components/header/Header.svelte

@@ -1,194 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import { EventHandler } from '../../utilities/EventHandler';
-  import Breadcrumb from '../breadcrumb/Breadcrumb.svelte';
-  import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';
-  import Tabs from '../tabs/Tabs.svelte';
-  import type { TabsItems } from '../tabs/tabs.types';
-  import Badge from '../badge/Badge.svelte';
-  import type { BadgeType } from '../badge/badge.types';
-  import type { A11yLabels, HeaderSize } from './Header.types';
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
-  export let title: string;
-  export let subtitle: string;
-  export let size: HeaderSize = 'm';
-  export let status: string;
-  export let statustype: BadgeType;
-  export let back: boolean | string;
-  export let breadcrumb: string | BreadcrumbItems[];
-  export let tabs: string | TabsItems[];
-  export let noshadow: boolean | string;
-  export let a11ylabels: string | A11yLabels;
-  export let scrollcontainer: HTMLElement;
-  export let nopaddingbreadcrumb: boolean;
-  export let hasicons: boolean;
-  export let hasselector: boolean;
-  export let hideoptions = false;
-
-  const headerAnimationThreshold = 5;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  let originalScrollPos = 0;
-  let hasAnimation: boolean;
-  let root: HTMLElement;
-
-  $: parsedBreadcrumb =
-    typeof breadcrumb === 'string'
-      ? (JSON.parse(breadcrumb) as BreadcrumbItems[])
-      : breadcrumb;
-
-  $: parsedTabs =
-    typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;
-
-  $: parsedA11yLabels =
-    typeof a11ylabels === 'string'
-      ? (JSON.parse(a11ylabels) as A11yLabels)
-      : a11ylabels;
-
-  $: hasBack = back && back !== 'false';
-  $: hasNoShadow = noshadow && noshadow !== 'false';
-  $: {
-    hasAnimation = Boolean(scrollcontainer);
-    updateAnimation(scrollcontainer);
-  }
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  function goBack() {
-    eventHandler.dispatch('on-back-click', {});
-  }
-
-  function updateAnimation(element: HTMLElement) {
-    if (element) {
-      element.removeEventListener('scroll', handleScroll);
-      element.addEventListener('scroll', handleScroll);
-    }
-  }
-
-  function handleScroll() {
-    const currentScrollPos = scrollcontainer.scrollTop;
-    const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));
-
-    if (originalScrollPos > currentScrollPos) {
-      // scroll up
-      if (currentScrollPos < root.offsetHeight) {
-        // scroll while in header zone
-        root.style.marginTop = `${Math.max(
-          -currentScrollPos,
-          originHeaderMargin,
-        )}px`;
-      } else {
-        // scroll while below header zone
-        root.style.marginTop = '0';
-      }
-    } else {
-      // scroll down
-      if (currentScrollPos < root.offsetHeight) {
-        // scroll while in header zone
-
-        root.style.transition = 'none';
-        root.style.marginTop = `${-currentScrollPos}px`;
-      } else {
-        // scroll while below header zone
-        root.style.transition = 'margin-top ease-out 0.4s';
-        root.style.marginTop = `${
-          -root.offsetHeight - headerAnimationThreshold
-        }px`;
-      }
-    }
-
-    originalScrollPos = currentScrollPos;
-  }
-</script>
-
-<div
-  class="mc-header {size ? `mc-header--${size}` : ''}"
-  class:mc-header--no-shadow={hasNoShadow}
-  class:mc-header--animate={hasAnimation}
-  bind:this={root}
-  {...attributes}
->
-  <div class="mc-header__left">
-    {#if breadcrumb}
-      <div class="mc-header__breadcrumb">
-        <Breadcrumb
-          items={JSON.stringify(parsedBreadcrumb)}
-          nopadding={nopaddingbreadcrumb}
-          on:link-clicked={(event) =>
-            eventHandler.dispatch('link-clicked', event.detail)}
-        />
-      </div>
-    {/if}
-
-    {#if hasBack}
-      <button class="mc-header__back" on:click={goBack}>
-        <span class="mc-header__back__label">
-          {parsedA11yLabels?.['back'] || 'Back'}
-        </span>
-      </button>
-    {/if}
-
-    <div class="mc-header__heading">
-      <h1 class="mc-header__heading__title">
-        {title}
-      </h1>
-      {#if subtitle}
-        <div class="mc-header__heading__subtitle">
-          {subtitle}
-        </div>
-      {/if}
-      {#if status}
-        <div class="mc-header__heading__status">
-          <Badge label={status} type={statustype} />
-        </div>
-      {/if}
-    </div>
-  </div>
-  {#if !hideoptions}
-    <div class="mc-header__right">
-      {#if $$slots?.icons || hasicons}
-        <div class="mc-header__icons">
-          <slot name="icons" />
-        </div>
-      {/if}
-      {#if $$slots?.selector || hasselector}
-        <div
-          class:mc-header__selector--show-separator={($$slots?.icons ||
-            hasicons) &&
-            ($$slots?.selector || hasselector)}
-          class="mc-header__selector"
-        >
-          <slot name="selector" />
-        </div>
-      {/if}
-    </div>
-  {/if}
-  {#if parsedTabs && parsedTabs.length > 0}
-    <div class="mc-header__tabs">
-      <Tabs
-        tabs={JSON.stringify(parsedTabs)}
-        stateless={false}
-        selectedtab={undefined}
-        nodivider={true}
-        on:tab-clicked={(event) =>
-          eventHandler.dispatch('tab-clicked', event.detail)}
-      />
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.header';
-
-  :host {
-    display: block;
-    line-height: 0;
-  }
-</style>

package/public/components/header/Header.types.d.ts

@@ -1,5 +0,0 @@
-export type HeaderSize = 's' | 'm' | 'l' | 'xl';
-export type A11yLabels = {
-    [key in 'back']: string;
-};
-//# sourceMappingURL=Header.types.d.ts.map

package/public/components/header/Header.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../src/components/header/Header.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEhD,MAAM,MAAM,UAAU,GAAG;KACtB,GAAG,IAAI,MAAM,GAAG,MAAM;CACxB,CAAC"}

package/public/components/hero/Hero.svelte

@@ -1,58 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { HeroProps } from './hero.type';
-
-  export let image: HeroProps['image'];
-  export let altImage: HeroProps['altImage'];
-  export let title: HeroProps['title'];
-  export let centered: HeroProps['centered'] = false;
-  export let hascontent = false;
-
-  const hasSlot = !!($$slots && Object.keys($$slots).length);
-</script>
-
-<div class={`mc-hero ${centered ? 'mc-hero--center' : ''}`} {...$$restProps}>
-  <div class="ml-container ml-container--fluid">
-    <div class="ml-flexy ml-flexy--gutter">
-      <div class="mc-hero__main ml-flexy__col">
-        <picture class="mc-hero__cover">
-          <img class="mc-hero__visual" src={image} alt={altImage || ''} />
-        </picture>
-
-        <div class="mc-hero__header">
-          <h1
-            class={`mc-hero__title 
-            mt-heading
-            mt-heading--lightest
-            mt-heading--s 
-            mt-heading--underline
-            ${centered ? 'mt-heading--center' : ''}
-            ${hasSlot || hascontent ? 'mc-hero--with-content' : ''}
-            `}
-          >
-            {title}
-          </h1>
-          {#if hasSlot || hascontent}
-            <div class="mc-hero__content mt-body-m">
-              <slot />
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/typography/_t.all-base-typography';
-  @import '@mozaic-ds/styles/layouts/_l.container';
-  @import '@mozaic-ds/styles/layouts/_l.flexy';
-  @import '@mozaic-ds/styles/components/_c.hero';
-
-  p :global {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-</style>

package/public/components/hero/hero.type.d.ts

@@ -1,7 +0,0 @@
-export interface HeroProps {
-    title: string;
-    image: string;
-    altImage?: string;
-    centered: boolean;
-}
-//# sourceMappingURL=hero.type.d.ts.map

package/public/components/hero/hero.type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hero.type.d.ts","sourceRoot":"","sources":["../../../src/components/hero/hero.type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB"}

package/public/components/kpi/Kpi.svelte

@@ -1,237 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  export let value: string = '';
-  export let iconname: string = '';
-  export let iconcolor: string = '';
-  export let label: string = '';
-  export let type: string = '';
-  export let detail: string = '';
-  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';
-  $: size = function getSize() {
-    let size = 'small';
-    if (label && label.length > 0 && !detail) {
-      size = 'medium';
-    } else if (detail && detail.length > 0) {
-      size = 'large';
-    }
-
-    return size;
-  };
-
-  function generateIconName(iconname: string, iconcolor?: string): string {
-    return iconcolor ? `${iconname}  fill="${iconcolor}"` : `${iconname}`;
-  }
-</script>
-
-<div class="mc-kpi mc-kpi--{size()} mc-kpi--{type}">
-  {#if labelOutsideContent}
-    <span class="mc-kpi__label">{label}</span>
-  {/if}
-  <div class="mc-kpi__content">
-    <div class="mc-kpi__main">
-      {#if !labelOutsideContent}
-        <span class="mc-kpi__label">{label}</span>
-      {/if}
-      <span class="mc-kpi__value">{value}</span>
-    </div>
-    {#if iconname || detail || $$slots.icon}
-      <div class="mc-kpi__aside">
-        {#if detail}
-          <span class="mc-kpi__detail">{detail}</span>
-        {/if}
-        {#if iconname}
-          <span class="mc-kpi__icon"
-            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span
-          >
-        {/if}
-        {#if $$slots.icon}
-          <span class="mc-kpi__icon">
-            <slot name="icon" />
-          </span>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  .mc-kpi {
-    color: var(--color-kpi-text, #005c91);
-    display: inline-block;
-
-    &__label {
-      font-size: 1.2rem;
-      display: block;
-    }
-
-    &__content {
-      display: flex;
-    }
-
-    &__main {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-
-    &__value {
-      font-size: 1.2rem;
-      font-weight: 600;
-    }
-
-    &__aside {
-      align-items: center;
-      background-color: var(--color-grey-000, #ffffff);
-      color: var(--color-font-dark, #000000);
-      display: flex;
-      justify-content: center;
-    }
-
-    &__detail {
-      font-size: 1.2rem;
-    }
-
-    &__icon {
-      display: block;
-      height: 16px;
-      width: 16px;
-    }
-
-    &--small {
-      .mc-kpi {
-        &__label {
-          font-size: 1rem;
-          margin-bottom: 6px;
-          color: var(--color-grey-999, #999999);
-        }
-
-        &__content {
-          gap: 0.5rem;
-        }
-
-        &__value {
-          font-size: 0.875rem;
-          line-height: 1.2;
-        }
-
-        &__main {
-          background-color: var(--color-kpi-background, #daeff7);
-          border: 1px solid var(--color-kpi-border, #007bb4);
-          border-radius: 4px;
-          overflow: hidden;
-          padding: 3px 7px;
-        }
-
-        &__aside {
-          background-color: transparent;
-        }
-      }
-    }
-
-    &--medium {
-      .mc-kpi {
-        &__label {
-          color: var(--color-grey-999, #999999);
-          margin-bottom: 6px;
-        }
-
-        &__content {
-          background-color: var(--color-kpi-background, #daeff7);
-          border: 1px solid var(--color-kpi-border, #007bb4);
-          border-radius: 4px;
-          overflow: hidden;
-          height: 40px;
-          min-width: 160px;
-        }
-
-        &__main {
-          flex-grow: 1;
-          padding: 2px 2px 2px 7px;
-        }
-
-        &__value {
-          font-size: 1.5rem;
-        }
-
-        &__aside {
-          padding-left: 12px;
-          padding-right: 15px;
-        }
-      }
-    }
-
-    &--large {
-      background-color: var(--color-kpi-background, #daeff7);
-      border: 1px solid var(--color-kpi-border, #007bb4);
-      border-radius: 4px;
-      overflow: hidden;
-
-      .mc-kpi {
-        &__content {
-          flex-direction: column;
-          min-width: 160px;
-          min-height: 100px;
-        }
-
-        &__main {
-          flex-direction: column;
-          padding: 10px 15px;
-          min-height: 5rem;
-        }
-
-        &__label {
-          line-height: 1.5;
-          font-size: 1rem;
-        }
-
-        &__value {
-          font-size: 2rem;
-        }
-
-        &__detail {
-          font-size: 1rem;
-          line-height: 1;
-        }
-
-        &__aside {
-          min-height: 3rem;
-          padding-right: 15px;
-          padding-left: 15px;
-          gap: 12px;
-        }
-      }
-    }
-
-    &--information {
-      --color-kpi-background: #daeff7;
-      --color-kpi-border: #007bb4;
-      --color-kpi-text: #005c91;
-    }
-
-    &--warning {
-      --color-kpi-background: #fdf1e8;
-      --color-kpi-border: #c65200;
-      --color-kpi-text: #8c3500;
-    }
-
-    &--danger {
-      --color-kpi-background: #fdeaea;
-      --color-kpi-border: #c61112;
-      --color-kpi-text: #8c0003;
-    }
-
-    &--success {
-      --color-kpi-background: #ebf5de;
-      --color-kpi-border: #188803;
-      --color-kpi-text: #006902;
-    }
-
-    &--neutral {
-      --color-kpi-background: #e6e6e6;
-      --color-kpi-border: #666666;
-      --color-kpi-text: #4d4d4d;
-    }
-  }
-</style>

package/public/components/layer/Layer.svelte

@@ -1,121 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import type { LayerPosition } from './layer.types';
-  export let title: string;
-  export let isopen: boolean;
-  export let position: LayerPosition = 'right';
-  export let extended: boolean;
-  export let scrollbaredge: boolean;
-  export let closebuttontext = 'Close';
-  export let iconname: string | undefined = undefined;
-  export let hidefooter: boolean;
-  export let arialabelledby = 'LayerTitle';
-
-  $: hideFooter = hidefooter ?? false;
-  $: scrollbarEdge = scrollbaredge ?? false;
-  $: isopen
-    ? eventHandler.dispatch('layer-opened', {})
-    : eventHandler.dispatch('layer-closed', {});
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  let root: HTMLElement;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  onMount(() => {
-    const body = root.querySelector('.mc-layer__body');
-    const content = root.querySelector('.mc-layer__content');
-    const overflowingClass = !scrollbaredge
-      ? 'mc-layer__body--overflowing'
-      : 'mc-layer__body--overflowing-scroll-edge';
-    if (body && content) {
-      const bodyHeight = body.clientHeight;
-      const contentHeight = content.scrollHeight;
-
-      if (contentHeight > bodyHeight) {
-        body.classList.add(overflowingClass);
-      } else {
-        body.classList.remove(overflowingClass);
-      }
-    }
-  });
-
-  function onClose(): void {
-    isopen = false;
-  }
-
-  function generateIconName(iconname: string): string {
-    return `${iconname} size="1.5rem"`;
-  }
-</script>
-
-<div bind:this={root}>
-  <div
-    class="mc-layer"
-    class:mc-layer--ltr={position === 'left'}
-    tabindex="-1"
-    role="dialog"
-    aria-labelledby={arialabelledby}
-    aria-modal="true"
-    aria-hidden={!isopen}
-    {...attributes}
-  >
-    <div
-      class="mc-layer__dialog {isopen ? ' is-open' : ''} {extended
-        ? ' mc-layer__dialog--extend'
-        : ''}"
-      role="document"
-    >
-      <div class="mc-layer__header">
-        {#if iconname}
-          <span class="mc-layer__icon">
-            {@html `<${generateIconName(iconname)} class="mc-layer__icon" />`}
-          </span>
-        {/if}
-        {#if $$slots.icon}
-          <span class="mc-layer__icon">
-            <slot name="icon" />
-          </span>
-        {/if}
-        <h2 class="mc-layer__title" id="modallayerTitleTitle">{title}</h2>
-        <button
-          class="mc-layer__close"
-          type="button"
-          on:click={() => onClose()}
-        >
-          <span class="mc-layer__close-text">{closebuttontext}</span>
-        </button>
-      </div>
-      <main
-        class="mc-layer__body"
-        class:mc-layer__body--overflowing-scroll-edge={scrollbarEdge}
-      >
-        <article class="mc-layer__content">
-          <slot name="content" />
-        </article>
-      </main>
-      {#if !hideFooter}
-        <footer class="mc-layer__footer">
-          <slot name="footer" />
-        </footer>
-      {/if}
-    </div>
-  </div>
-  <div
-    class="mc-layer-overlay {isopen ? ' is-visible' : ''}"
-    tabindex="-1"
-    role="dialog"
-    on:click={() => onClose()}
-  />
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.layer';
-</style>

package/public/components/layer/layer.types.d.ts

@@ -1,2 +0,0 @@
-export type LayerPosition = 'left' | 'right';
-//# sourceMappingURL=layer.types.d.ts.map

package/public/components/layer/layer.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layer.types.d.ts","sourceRoot":"","sources":["../../../src/components/layer/layer.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC"}