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

package/public/components/starsinput/StarsInput.svelte

@@ -1,77 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { RatingsSize } from './ratings.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  const ratingValue = 5;
-  export let unselectedText = 'No opinion given';
-  export let name = 'rating';
-  export let size: RatingsSize = 'm';
-  export let ratinglabels: Array<string> = [
-    'Very bad',
-    'Bad',
-    'Medium',
-    'Good',
-    'Excellent',
-  ];
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  function setClasses(size: RatingsSize): string {
-    const mainClass = 'mc-stars-input';
-
-    return size ? `${mainClass} ${mainClass}--${size}` : mainClass;
-  }
-
-  function setInputId(name: string, index: number): string {
-    return `${name}${index + 1}`;
-  }
-
-  function selectStar(i: number) {
-    eventHandler.dispatch('star-selected', i + 1);
-  }
-</script>
-
-<div class={setClasses(size)} {...$$restProps}>
-  <input
-    id="no-rate"
-    type="radio"
-    {name}
-    value="0"
-    class="mc-stars-input__radio"
-    checked
-    aria-label={unselectedText}
-  />
-
-  {#each Array(ratingValue) as _, i}
-    <input
-      id={setInputId(name, i)}
-      type="radio"
-      {name}
-      value={i + 1}
-      class="mc-stars-input__radio"
-    />
-
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <label
-      for={setInputId(name, i)}
-      title={ratinglabels[i]}
-      class="mc-stars-input__label"
-      on:click={() => selectStar(i)}
-    >
-      <span class="mc-stars-input__text">
-        {ratinglabels[i]}
-      </span>
-    </label>
-  {/each}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/_c.stars-input';
-</style>

package/public/components/starsresult/StarsResult.svelte

@@ -1,85 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { RatingsSize } from './ratings.types';
-
-  export let value = 0;
-  export let size: RatingsSize = 'm';
-  export let a11ylabel = '';
-  export let suffixlabel: string | undefined = undefined;
-
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  function getRatingsClasses(
-    value: number,
-    size: RatingsSize,
-    suffixLabel?: string,
-  ): string {
-    const classes = [
-      'mc-stars-result',
-      `mc-stars-result--score-${computeRatingsPercentage(value)}`,
-      `mc-stars-result--${size}`,
-    ];
-
-    const shouldAddFlexDisplay = !!suffixLabel;
-    if (shouldAddFlexDisplay) {
-      classes.push('ml-flexy', 'ml-flexy--items-center');
-    }
-
-    return classes.join(' ');
-  }
-
-  function computeRatingsPercentage(value: number): number {
-    const roundedValue = Math.round(value * 2) / 2;
-
-    let correctedValue = roundedValue;
-    if (correctedValue < 0) {
-      correctedValue = 0;
-    }
-
-    if (correctedValue > 5) {
-      correctedValue = 5;
-    }
-
-    return correctedValue * 20;
-  }
-</script>
-
-<div
-  class="{getRatingsClasses(value, size, suffixlabel)} {userClass}"
-  {...attributes}
->
-  <span class="mc-stars-result__visual" />
-
-  {#if suffixlabel}
-    <span class="mc-stars-result__suffix-label mu-ml-050">{suffixlabel}</span>
-  {/if}
-
-  <span class="mc-stars-result__text">{a11ylabel}</span>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/_c.stars-result';
-  @import '@mozaic-ds/styles/utilities/_u.margin';
-  @import '@mozaic-ds/styles/layouts/_l.flexy';
-
-  .mc-stars-result {
-    @include set-font-face();
-
-    &--s .mc-stars-result__suffix-label {
-      @include set-font-scale('02');
-      color: $color-grey-700;
-    }
-
-    &--l .mc-stars-result__suffix-label {
-      @include set-font-scale('06');
-    }
-
-    &--xl .mc-stars-result__suffix-label {
-      @include set-font-scale('08');
-    }
-  }
-</style>

package/public/components/stepper/Stepper.svelte

@@ -1,97 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { StepperItems } from './stepper.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
-  export let steps: string;
-  export let compact = false;
-  export let steptitleprefix: string;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  $: stepsObject = steps
-    ? (JSON.parse(steps) as StepperItems[])
-    : ([] as StepperItems[]);
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  function isStepValidated(
-    index: number,
-    stepsObject: StepperItems[],
-  ): boolean {
-    return (
-      index < stepsObject.findIndex((step: StepperItems) => step.isCurrent)
-    );
-  }
-
-  function getStepTitle(
-    prefix: string,
-    index: number,
-    stepsObject: StepperItems[],
-  ): string {
-    const titlePrefix = prefix ? `${prefix} ` : '';
-    return `${titlePrefix}${index + 1} / ${stepsObject.length}`;
-  }
-
-  function stepChanged(step: StepperItems): void {
-    eventHandler.dispatch('step-changed', step);
-  }
-</script>
-
-<nav
-  class="mc-stepper {compact ? 'mc-stepper--compact' : ''} {stepsObject.length >
-  3
-    ? 'mc-stepper--shrinked'
-    : ''}"
-  aria-label="accessibilityLabels.stepperDescription"
-  {...attributes}
->
-  <ol class="mc-stepper__list">
-    {#each stepsObject as step, index}
-      <li
-        class="mc-stepper__item {step.isCurrent
-          ? 'mc-stepper__item--current'
-          : ''} {isStepValidated(index, stepsObject)
-          ? 'mc-stepper__item--validated'
-          : ''}"
-        style="--steps: {stepsObject.length}; --current: {index + 1};"
-        on:click={() => stepChanged(step)}
-      >
-        <div class="mc-stepper__indicator" aria-hidden="true">
-          {#if isStepValidated(index, stepsObject)}
-            <div class="mc-stepper__icon">
-              <ui-check-20 name="Check20" size="100%" />
-            </div>
-          {:else if step.isCurrent}
-            <span>{index + 1}</span>
-          {/if}
-        </div>
-        <div class="mc-stepper__detail">
-          <span class="mc-stepper__title">
-            {getStepTitle(steptitleprefix, index, stepsObject)}
-          </span>
-          <span class="mc-stepper__label">{step.label}</span>
-        </div>
-      </li>
-    {/each}
-  </ol>
-</nav>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/_c.stepper';
-
-  .mc-stepper--compact {
-    .mc-stepper__item {
-      &::before {
-        content: '';
-      }
-    }
-  }
-</style>

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

@@ -1,6 +0,0 @@
-export interface StepperItems {
-    label?: string;
-    path: string;
-    isCurrent?: boolean;
-}
-//# sourceMappingURL=stepper.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stepper.types.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/public/components/stepperbar/StepperBar.svelte

@@ -1,101 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-
-  export let fixed: boolean;
-  export let cancellabel: string;
-  export let prevlabel: string;
-  export let nextlabel: string;
-  export let validatelabel: string;
-  export let currentstep: number;
-  export let stepsnb: number;
-  export let disablednext: boolean;
-  export let disabledprev: boolean;
-  export let disabledcancel: boolean;
-
-  $: isFixed = fixed ? true : undefined;
-  $: currentStep = currentstep ? currentstep : 0;
-  $: stepsNb = stepsnb ? stepsnb : 0;
-  $: isNextDisabled = disablednext ? true : undefined;
-  $: isPrevDisabled = disabledprev ? true : undefined;
-  $: isCancelDisabled = disabledcancel ? true : undefined;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  function handleCancel(e: Event): void {
-    eventHandler.dispatch('cancel', e);
-  }
-
-  function handlePrev(): void {
-    if (currentStep - 1 >= 0) {
-      currentStep--;
-      eventHandler.dispatch('previous-step', currentStep);
-    }
-  }
-
-  function handleNext(): void {
-    currentStep++;
-    eventHandler.dispatch('next-step', currentStep);
-  }
-</script>
-
-<div
-  class="ml-container ml-container--fluid mc-bottom-bar mc-stepper-bar"
-  class:mc-bottom-bar--fixed={isFixed}
->
-  <button
-    class="mc-button mc-button--s mc-button--bordered-danger"
-    disabled={isCancelDisabled}
-    aria-label={cancellabel}
-    type="button"
-    id="cancelbutton"
-    on:click={handleCancel}
-  >
-    {cancellabel}
-  </button>
-
-  <div class="mc-stepper-bar__actions">
-    {#if currentStep > 0}
-      <button
-        class="mc-button mc-button--s mc-button--bordered-neutral"
-        disabled={isPrevDisabled}
-        aria-label={prevlabel}
-        type="button"
-        id="prevlabel"
-        on:click={handlePrev}
-      >
-        {prevlabel}
-      </button>
-    {/if}
-
-    <button
-      class="mc-button mc-button--s mc-stepper-bar__next"
-      aria-label={nextlabel}
-      type="button"
-      id="nextlabel"
-      disabled={isNextDisabled}
-      on:click={handleNext}
-    >
-      {#if currentStep < stepsNb}
-        {nextlabel}
-      {:else if currentStep >= stepsNb}
-        {validatelabel}
-      {/if}
-    </button>
-  </div>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/layouts/_l.container';
-  @import '@mozaic-ds/styles/components/_c.bottom-bar';
-  @import '@mozaic-ds/styles/components/_c.stepper-bar';
-  @import '@mozaic-ds/styles/components/_c.button';
-</style>

package/public/components/tabs/Tabs.svelte

@@ -1,170 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { TabsAlign, TabsItems, TabsType } from './tabs.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
-  export let align: TabsAlign = 'auto';
-  export let description = 'Tabs';
-  export let nodivider = false;
-  export let tabs: string;
-  export let type: TabsType = 'tabs';
-  export let stateless = false;
-  export let selectedtab: string | undefined;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  let tablist: HTMLElement;
-  $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  function manageTabs(e: Event, tabItem: TabsItems): void {
-    const currentEl = e.target as HTMLElement;
-    if (stateless) {
-      eventHandler.dispatch(
-        'tab-clicked',
-        Object.assign(tabItem, { target: currentEl }),
-      );
-    } else {
-      tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {
-        el.classList.remove('mc-tabs__element--selected');
-        el.setAttribute('aria-selected', 'false');
-      });
-
-      currentEl.classList.add('mc-tabs__element--selected');
-      currentEl.setAttribute('aria-selected', 'true');
-
-      eventHandler.dispatch(
-        'tab-clicked',
-        Object.assign(tabItem, { target: currentEl }),
-      );
-    }
-  }
-
-  function generateIconName(iconName: string, iconColor: string): string {
-    return `${iconName} size="1.5rem" fill="${iconColor}"`;
-  }
-</script>
-
-<div
-  class="mc-tabs
-  {align && align === 'full' ? ' mc-tabs--full' : ''}
-  {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}
-  {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}"
-  {...attributes}
->
-  <ul
-    class="mc-tabs__nav"
-    bind:this={tablist}
-    role="tablist"
-    aria-label={description}
-  >
-    {#each parsedTabs as tab, index}
-      <li class="mc-tabs__item" role="presentation">
-        {#if tab.href}
-          {#if !tab.disabled}
-            <a
-              href={tab.href}
-              role="tab"
-              class="mc-tabs__element"
-              class:mc-tabs__element--disabled={tab.disabled}
-              class:mc-tabs__element--selected={stateless
-                ? tab.id == selectedtab
-                : tab.isActive}
-              id={tab.id}
-              aria-selected={tab.isActive ? 'true' : 'false'}
-              on:click={(event) =>
-                manageTabs(event, Object.assign({ index: index }, tab))}
-            >
-              <span class="mc-tabs__text">
-                {#if tab.iconName}
-                  <span class="mc-tabs__icon"
-                    >{@html `<${generateIconName(
-                      tab.iconName,
-                      tab.iconColor,
-                    )} />`}</span
-                  >
-                {/if}
-                {#if $$slots.icon}
-                  <span class="mc-tabs__icon"
-                    ><slot prop={tab} name="icon" /></span
-                  >
-                {/if}
-                {tab.text}
-              </span>
-            </a>
-          {:else}
-            <span
-              role="tab"
-              class="mc-tabs__element"
-              class:mc-tabs__element--disabled={tab.disabled}
-              class:mc-tabs__element--selected={stateless
-                ? tab.id == selectedtab
-                : tab.isActive}
-              id={tab.id}
-              aria-selected={tab.isActive ? 'true' : 'false'}
-            >
-              <span class="mc-tabs__text">
-                {#if tab.iconName}
-                  <span class="mc-tabs__icon"
-                    >{@html `<${generateIconName(
-                      tab.iconName,
-                      tab.iconColor,
-                    )} />`}</span
-                  >
-                {/if}
-                {#if $$slots.icon}
-                  <span class="mc-tabs__icon"
-                    ><slot prop={tab} name="icon" /></span
-                  >
-                {/if}
-                {tab.text}
-              </span>
-            </span>
-          {/if}
-        {:else}
-          <button
-            role="tab"
-            type="button"
-            class="mc-tabs__element"
-            class:mc-tabs__element--disabled={tab.disabled}
-            class:mc-tabs__element--selected={stateless
-              ? tab.id == selectedtab
-              : tab.isActive}
-            id={tab.id}
-            disabled={tab.disabled}
-            aria-selected={tab.isActive ? 'true' : 'false'}
-            on:click={(event) =>
-              manageTabs(event, Object.assign({ index: index }, tab))}
-          >
-            <span class="mc-tabs__text">
-              {#if tab.iconName}
-                <span class="mc-tabs__icon"
-                  >{@html `<${generateIconName(
-                    tab.iconName,
-                    tab.iconColor,
-                  )} />`}</span
-                >
-              {/if}
-              {#if $$slots.icon}
-                <span class="mc-tabs__icon"
-                  ><slot prop={tab} name="icon" /></span
-                >
-              {/if}
-              {tab.text}
-            </span>
-          </button>
-        {/if}
-      </li>
-    {/each}
-  </ul>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.tabs';
-</style>

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

@@ -1,14 +0,0 @@
-export interface TabsItems {
-    attributes?: string | undefined;
-    disabled?: boolean | undefined;
-    href?: string | undefined;
-    id?: string | undefined;
-    index?: number | undefined;
-    isActive?: boolean | undefined;
-    text: string;
-    iconName: string;
-    iconColor: string;
-}
-export type TabsAlign = 'auto' | 'full' | 'centered';
-export type TabsType = 'tabs' | 'dropdown';
-//# sourceMappingURL=tabs.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AACD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC"}

package/public/components/tag/Tag.svelte

@@ -1,118 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import type { TagSize, TagType } from './tag.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventForwarder } from '../../utilities/EventForward';
-
-  export let label: string;
-  export let size: TagSize = 'm';
-  export let dark: boolean;
-  export let type: TagType = 'text';
-  export let disabled: boolean;
-  export let id: string;
-  export let href: string;
-  export let name: string;
-  export let value: string | undefined;
-  export let selected = false;
-  const forwardEvents = createEventForwarder(get_current_component());
-
-  $: isSelected = selected ? true : false;
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  function getClasses(type: TagType, dark: boolean, size: TagSize) {
-    const classes = [`mc-tag-${type}`];
-
-    if (size) {
-      classes.push(`mc-tag-${type}--${size}`);
-    }
-
-    if (dark) {
-      classes.push(`mc-tag-${type}--dark`);
-    }
-
-    return classes.join(' ');
-  }
-
-  function getSubClasses(type: TagType, element: string) {
-    return `mc-tag-${type}__${element}`;
-  }
-
-  function onSelect(): void {
-    isSelected = !isSelected;
-    eventHandler.dispatch('tag-selected', isSelected);
-  }
-
-  function onRemoved(): void {
-    eventHandler.dispatch('tag-removed', {
-      id,
-      label,
-      value,
-    });
-  }
-</script>
-
-{#if type === 'text'}
-  <span class="{getClasses(type, dark, size)}  {userClass}" {...attributes}>
-    <span class={getSubClasses(type, 'label')}>
-      {label}
-    </span>
-  </span>
-{/if}
-{#if type === 'link'}
-  <a {href} class="{getClasses(type, dark, size)}  {userClass}" {...attributes}>
-    <span class={getSubClasses(type, 'label')}>
-      {label}
-    </span>
-  </a>
-{/if}
-{#if type === 'selectable'}
-  <span
-    class="{getClasses(type, dark, size)}  {userClass}"
-    on:click|preventDefault={onSelect}
-    {...attributes}
-  >
-    <input
-      use:forwardEvents
-      class={getSubClasses(type, 'input')}
-      type="checkbox"
-      {name}
-      bind:checked={isSelected}
-      {id}
-      {disabled}
-    />
-    <label class={getSubClasses(type, 'pill')} for={id}>
-      <span class={getSubClasses(type, 'label')}>
-        {label}
-      </span>
-    </label>
-  </span>
-{/if}
-{#if type === 'removable'}
-  <span class="{getClasses(type, dark, size)}  {userClass}" {...attributes}>
-    <span class={getSubClasses(type, 'label')}>
-      {label}
-    </span>
-    <button
-      class={getSubClasses(type, 'remove')}
-      on:click|preventDefault={onRemoved}
-    >
-      <span class={getSubClasses(type, 'remove-text')}> {label} </span>
-    </button>
-  </span>
-{/if}
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.tag';
-</style>

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

@@ -1,9 +0,0 @@
-export type TagSize = 's' | 'm';
-export type TagType = 'text' | 'link' | 'selectable' | 'removable';
-export interface TagElem {
-    id: string;
-    label: string;
-    size: string;
-    type: string;
-}
-//# sourceMappingURL=tag.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;AAChC,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,CAAC;AAEnE,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd"}