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

package/public/components/dropdown/Dropdown.svelte

@@ -1,355 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import { createEventDispatcher, tick } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { clickOutside } from '../../utilities/ClickOutside';
-  import type { ListboxItems } from '../listbox/listbox.types';
-  import type { SelectSize } from '../select/select.types';
-
-  import Tag from '../tag/Tag.nested.svelte';
-  import Loader from '../loader/Loader.nested.svelte';
-  import Listbox from '../listbox/Listbox.nested.svelte';
-
-  export let maxwidth = '100%';
-  export let tagid: string;
-  export let taglabel = '';
-  export let placeholder = '-- Placeholder --';
-  export let disabled = false;
-  export let size: SelectSize = 'm';
-  export let isvalid: boolean;
-  export let isinvalid: boolean;
-  export let loading = false;
-  export let name: string;
-  export let items: string;
-  export let value: any;
-  export let open = false;
-  export let multiple = false;
-  export let emptysearchlabel = 'No results found';
-  export let datatextexpr = 'label';
-  export let datavalueexpr = 'value';
-  export let nosort = false;
-  export let clearfield = false;
-  export let layertitle = 'Title layer';
-  export let showmoretagslabel = 'Show more';
-  export let maxnumbertoshowtags = 12;
-  export let alltags = false;
-  export let selectall = false;
-  export let labelselectall = 'Select all';
-
-  let component: HTMLDivElement;
-  const uuid = Math.random();
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  let tag: any;
-  let tagWidth = '0px';
-  let tagValue: any;
-  let buttonvalue: string;
-  let sortedListItems: any;
-  let isfiltered = false;
-  let selectedItems: ListboxItems[] = [];
-  let openLayer: any = null;
-
-  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];
-  $: localItems = parsedItems;
-  $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;
-  $: setTagLabel = () => {
-    return listboxValue.length.toString() + ' ' + taglabel;
-  };
-  $: watchListboxValue(listboxValue);
-  $: setTagWidth(tagValue);
-  $: openState = open;
-  $: {
-    const eventName = openState ? 'open' : 'close';
-    eventHandler.dispatch(eventName, openState);
-  }
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  function clearListbox() {
-    listboxValue = multiple ? [] : '';
-    closeListBox();
-    eventHandler.dispatch('clear', true);
-  }
-
-  function removeTagSelected(itemSelectedId: any) {
-    listboxValue = listboxValue.filter(
-      (value: any) => value !== itemSelectedId,
-    );
-    eventHandler.dispatch('onchange', listboxValue);
-  }
-
-  function openLayerFn() {
-    openLayer = true;
-  }
-
-  function closeLayerFn() {
-    openLayer = null;
-  }
-
-  function closeListBox() {
-    openState = false;
-
-    if (multiple && !nosort) {
-      sortItems();
-    } else {
-      localItems = parsedItems;
-    }
-  }
-
-  function onChange() {
-    eventHandler.dispatch('onchange', listboxValue);
-
-    if (!multiple) {
-      closeListBox();
-    }
-  }
-
-  function getSelectedItems(val?: any) {
-    const value = val ? val : listboxValue;
-
-    const selectedItems = parsedItems.filter((item: ListboxItems) => {
-      return multiple
-        ? value.includes(item[datavalueexpr])
-        : value === item[datavalueexpr];
-    });
-
-    return selectedItems;
-  }
-
-  function sortItems() {
-    sortedListItems = parsedItems;
-    const selectedItems = getSelectedItems();
-
-    sortedListItems.sort((a: any, b: any) => {
-      const hasItemA = selectedItems.includes(a);
-      const hasItemB = selectedItems.includes(b);
-
-      if (hasItemA === hasItemB) {
-        return a[datavalueexpr] - b[datavalueexpr];
-      } else if (hasItemA < hasItemB) {
-        return 1;
-      } else {
-        return -1;
-      }
-    });
-
-    localItems = sortedListItems;
-  }
-
-  function onScrollEnd() {
-    eventHandler.dispatch('scrollend', true);
-  }
-
-  function onSelectAll(e: CustomEvent) {
-    eventHandler.dispatch('select-all', e.detail);
-  }
-
-  // Watch Functions
-  async function watchListboxValue(value: any) {
-    await tick();
-    selectedItems = getSelectedItems(value);
-    const seletedLabels = selectedItems.map((item) => item[datatextexpr]);
-
-    buttonvalue = seletedLabels.join(', ');
-
-    if (multiple) {
-      tagValue = value;
-    }
-  }
-
-  async function setTagWidth(tagValue: any) {
-    await tick();
-
-    tagWidth =
-      tag && tagValue && tagValue.length
-        ? `${
-            component?.querySelector('.mc-tag-removable')?.clientWidth ?? 0 + 8
-          }px`
-        : '0px';
-  }
-</script>
-
-<div
-  class="mc-dropdown"
-  class:mc-dropdown--multi={multiple}
-  style="--dropdown-tag-width: {tagWidth}; --dropdown-width: {maxwidth};"
-  use:clickOutside
-  on:outclick={closeListBox}
-  {...attributes}
-  bind:this={component}
->
-  <div class="mc-dropdown__main">
-    <!--  TAG REMOVABLE -->
-    {#if multiple && listboxValue.length > 0 && !alltags}
-      <Tag
-        id={tagid ? tagid : `autocompleteTag-${uuid}`}
-        class="mc-dropdown__tag"
-        label={setTagLabel()}
-        size="s"
-        type="removable"
-        dark={false}
-        disabled={false}
-        href=""
-        name=""
-        selected={false}
-        value=""
-        bind:this={tag}
-        on:tag-removed={clearListbox}
-      />
-    {/if}
-
-    <!-- TRIGGER BUTTON -->
-    <button
-      type="button"
-      class="mc-select mc-dropdown__trigger"
-      class:is-open={openState}
-      class:is-valid={isvalid}
-      class:is-invalid={isinvalid}
-      class:mc-select--s={size === 's'}
-      {disabled}
-      on:click={() => (openState = !openState)}
-    >
-      {buttonvalue ? buttonvalue : placeholder}
-    </button>
-
-    <div class="mc-dropdown__tools">
-      <!-- LOADER -->
-      {#if loading}
-        <Loader size="s" theme="primary" text="" class="mc-dropdown__loader" />
-      {/if}
-
-      <!-- CLEAR BUTTON -->
-      {#if !multiple && buttonvalue && clearfield}
-        <button
-          class="mc-dropdown__clear"
-          type="button"
-          on:click|stopPropagation={() => {
-            clearListbox();
-          }}
-        >
-          <ui-cross-circle-filled-24 />
-        </button>
-      {/if}
-    </div>
-  </div>
-
-  <!-- LISTBOX -->
-  {#if openState}
-    <Listbox
-      items={JSON.stringify(localItems)}
-      {name}
-      {multiple}
-      {isfiltered}
-      {emptysearchlabel}
-      {maxwidth}
-      {datatextexpr}
-      {datavalueexpr}
-      {selectall}
-      {labelselectall}
-      overlay={true}
-      width="100%"
-      bind:value={listboxValue}
-      on:change={onChange}
-      on:scrollend={onScrollEnd}
-      on:select-all={onSelectAll}
-    />
-  {/if}
-
-  {#if multiple && alltags}
-    <div class="tags-selected">
-      {#each selectedItems as selectedItem, index}
-        {#if index < maxnumbertoshowtags}
-          <div class="tag-selected">
-            <m-tag
-              id={selectedItem.id}
-              label={selectedItem.label}
-              size="s"
-              type="removable"
-              on:tag-removed={() => removeTagSelected(selectedItem.id)}
-            />
-          </div>
-        {/if}
-      {/each}
-      {#if listboxValue.length > maxnumbertoshowtags}
-        <div class="tag-selected">
-          <m-tag
-            id="id-tag"
-            label="({listboxValue.length}) {showmoretagslabel} "
-            size="s"
-            type="link"
-            on:tag-selected={() => openLayerFn()}
-          />
-        </div>
-      {/if}
-    </div>
-  {/if}
-
-  <span class="mc-dropdown__tag" style="display:none;" />
-  <span class="mc-dropdown__loader" style="display:none;" />
-  <span class="mc-text-input mc-dropdown__trigger" style="display:none;" />
-  {#if multiple && alltags}
-    <div>
-      <m-layer
-        title={layertitle}
-        layertitletag="h3"
-        isopen={openLayer}
-        on:layer-closed={() => closeLayerFn()}
-      >
-        <small slot="content">
-          <div class="tags-selected">
-            {#each selectedItems as selectedItem}
-              <div class="tag-selected">
-                <m-tag
-                  id={selectedItem.id}
-                  label={selectedItem.label}
-                  size="s"
-                  type="removable"
-                  on:tag-removed={() => removeTagSelected(selectedItem.id)}
-                />
-              </div>
-            {/each}
-          </div>
-        </small>
-      </m-layer>
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.select';
-  @import '@mozaic-ds/styles/components/c.dropdown';
-
-  // Dropdown
-  // NOTE: These styles with the "!important" allow to overload the edge effects
-  // due to the scoping applied by Svelte on the CSS selectors
-  .mc-dropdown {
-    min-width: auto;
-
-    &__tag {
-      position: absolute !important; // due to the Svelte CSS scope
-    }
-
-    &--multi {
-      .mc-dropdown__trigger {
-        padding-left: calc($mu075 + var(--dropdown-tag-width)) !important;
-      }
-    }
-  }
-
-  // Selected Tags
-  .tags-selected {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .tag-selected {
-    margin-top: 1em;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-</style>

package/public/components/fileuploader/FileUploader.svelte

@@ -1,201 +0,0 @@
-<svelte:options customElement='' />
-
-<script lang="ts">
-  // @ts-nocheck
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import ResultFile from './fileuploader-result.nested.svelte';
-
-  export let id: string;
-  export let name: string;
-  export let label: string;
-  export let accept: string;
-  export let multiple = true;
-  export let allowedextensions: string;
-  export let maxsize: number;
-  export let displayfileslist = false;
-  export let disabled = false;
-  export let removelabel = 'Remove';
-  export let uploadedfiles: string;
-  export let errorlabels: string;
-  export let stateless: false;
-  export let keepPrevious: boolean;
-
-  let files: FileList;
-  let root: HTMLElement;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  $: allowedExtensions = allowedextensions ? JSON.parse(allowedextensions) : [];
-  $: uploadedFiles = uploadedfiles ? JSON.parse(uploadedfiles) : [];
-  $: files;
-  $: maxSize = maxsize ? maxsize : undefined;
-  $: errorLabels = errorlabels ? JSON.parse(errorlabels) : [];
-
-  function checkFileSize(fileSize: number): boolean {
-    const fileSizeMB = fileSize / 1024 / 1024; // in MB
-    if (maxSize && fileSizeMB > maxSize) {
-      return false; // invalid
-    }
-
-    return true; // valid
-  }
-  function checkFileExtension(fileName: string): boolean {
-    if (allowedExtensions && allowedExtensions.length > 0) {
-      const extension: string = fileName.slice(
-        ((fileName.lastIndexOf('.') - 1) >>> 0) + 2,
-      );
-      if (allowedExtensions && !allowedExtensions.includes(String(extension))) {
-        return false; // invalid
-      }
-    }
-
-    return true; // valid
-  }
-  function handleChange(e: Event): void {
-    const target = e.target as HTMLInputElement;
-
-    if(keepPrevious && files?.length > 0){
-      const previousSelection: File[] = [...files]
-      const newSelection: File[] = [...target.files as FileList]
-      const dataTransfer: DataTransfer = new DataTransfer()
-      previousSelection.forEach((item) => dataTransfer.items.add(item))
-      newSelection.forEach((item) => dataTransfer.items.add(item))
-
-      files = dataTransfer.files
-
-    } else {
-      files = target.files as FileList;
-    }
-
-    displayfileslist = true;
-    const invalidFiles: Array<any> = [];
-    const fileList = [...files];
-
-    fileList.forEach((file, index) => {
-      const fileName = file.name;
-      const fileSize = file.size;
-      const validExtension = checkFileExtension(fileName);
-      const validSize = checkFileSize(fileSize);
-      let errorType = '';
-
-      if (!validExtension) {
-        errorType = 'invalid-extension';
-      }
-
-      if (!validSize) {
-        errorType = 'invalid-size';
-      }
-
-      if (!validExtension || !validSize) {
-        invalidFiles.push({
-          index: index,
-          fileName: fileName,
-          fileSize: fileSize,
-          errorType: errorType,
-        });
-      }
-    });
-
-    if (invalidFiles.length > 0) {
-      eventHandler.dispatch(
-        get_current_component(),
-        'invalid-files',
-        invalidFiles,
-      );
-    }
-    eventHandler.dispatch('change', files);
-
-    const fileuploader = root.querySelector(
-       '.mc-fileuploader__input',
-    ) as HTMLInputElement;
-    if (stateless) {
-      fileuploader.value = '';
-    } else {
-      fileuploader.files = files
-    }
-  }
-
-  function removeFromArray(fileList: FileList, value: File): FileList {
-    const array = Array.from(fileList);
-    const idx = array.indexOf(value);
-    if (idx !== -1) {
-      array.splice(idx, 1);
-    }
-
-    const dataTransfer: DataTransfer = new DataTransfer()
-    array.forEach((item) => dataTransfer.items.add(item))
-
-    return dataTransfer.files
-  }
-
-  function deleteFile(e: CustomEvent): void {
-    files = removeFromArray(files, e.detail);
-    const fileuploader = root.querySelector(
-      '.mc-fileuploader__input',
-    ) as HTMLInputElement;
-    fileuploader.files = files;
-
-    eventHandler.dispatch('change', files);
-    eventHandler.dispatch('file-removed', e.detail);
-  }
-
-  function deleteUploadedFile(e: CustomEvent): void {
-    const files = removeFromArray(uploadedFiles, e.detail);
-    uploadedFiles = files;
-    eventHandler.dispatch('uploaded-file-removed', e.detail);
-  }
-
-  function hasInvalidFiles(e: CustomEvent): void {
-    eventHandler.dispatch('invalid-files', e.detail);
-  }
-</script>
-
-<div class="mc-fileuploader" bind:this={root}>
-  <input
-    {id}
-    {name}
-    type="file"
-    class="mc-fileuploader__input"
-    {accept}
-    {multiple}
-    {disabled}
-    on:change={handleChange}
-  />
-  <label for={id} class="mc-fileuploader__label">
-    <span class="mc-fileuploader__label--center">
-      {label}
-    </span>
-  </label>
-  {#if displayfileslist && files && files.length > 0}
-    <ResultFile
-      {files}
-      {allowedExtensions}
-      {disabled}
-      {maxSize}
-      {removelabel}
-      {errorLabels}
-      on:file-removed={deleteFile}
-    />
-  {/if}
-  {#if uploadedFiles.length > 0}
-    <ResultFile
-      files={uploadedFiles}
-      {allowedExtensions}
-      {disabled}
-      {maxSize}
-      {removelabel}
-      {errorLabels}
-      on:file-removed={deleteUploadedFile}
-    />
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/file-uploader';
-</style>

package/public/components/fileuploader/fileuploader-result.nested.svelte

@@ -1,118 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  // @ts-nocheck
-  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 allowedExtensions: [];
-  export let maxSize: number;
-  export let disabled = false;
-  export let files: FileList;
-  export let removelabel = 'Remove';
-  export let errorLabels;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  $: files = files ? handleChange(files) : [];
-  $: maxSize = maxSize ? maxSize : undefined;
-
-  function setClasses(file: File): string {
-    let classes = ['mc-fileuploader__file'];
-
-    if (checkFileStatus(file) && !file.errorType)
-      classes.push('mc-fileuploader__file--is-valid');
-    else classes.push('mc-fileuploader__file--is-invalid');
-    return classes.join(' ');
-  }
-
-  function checkFileExtension(fileName: string): boolean {
-    if (allowedExtensions && allowedExtensions.length > 0) {
-      const extension: string = fileName.slice(
-        ((fileName.lastIndexOf('.') - 1) >>> 0) + 2,
-      );
-      if (allowedExtensions && !allowedExtensions.includes(String(extension))) {
-        return false; // invalid
-      }
-    }
-
-    return true; // valid
-  }
-
-  function checkFileSize(fileSize: number): boolean {
-    const fileSizeMB = fileSize / 1024 / 1024; // in MB
-    if (maxSize && fileSizeMB > maxSize) {
-      return false; // invalid
-    }
-
-    return true; // valid
-  }
-  function handleChange(myFiles: FileList): void {
-    let files = [...myFiles];
-    files.forEach((file, index) => {
-      const validExtension = checkFileExtension(file.name);
-      const validSize = checkFileSize(file.size);
-      let errorType = '';
-      if (!validExtension) {
-        errorType = 'invalid-extension';
-      }
-      if (!validSize) {
-        errorType = 'invalid-size';
-      }
-      if (file.errorType) {
-        errorType = file.errorType;
-      }
-      if (!validExtension || !validSize || file.errorType) {
-        file.errorType = errorType;
-      }
-    });
-    return files;
-  }
-
-  function checkFileStatus(file: File): boolean {
-    const validExtension = allowedExtensions
-      ? checkFileExtension(file.name)
-      : true;
-    const validSize = checkFileSize(file.size);
-
-    if (!validExtension || !validSize) {
-      return false; // invalid
-    }
-
-    return true; // valid
-  }
-
-  function deleteFile(file) {
-    eventHandler.dispatch('file-removed', file);
-  }
-</script>
-
-<ul id="file_uploaded" class="mc-fileuploader__files">
-  {#each files as file, index}
-    <li id={`file-${index}`} class="{setClasses(file)} {$$props.class}">
-      <span class="mc-fileuploader__file-name">{file.name}</span>
-      <span class="mc-fileuploader__file-icon">&nbsp;</span>
-      <button
-        type="button"
-        class="mc-fileuploader__delete"
-        aria-label={removelabel}
-        {disabled}
-        on:click={() => deleteFile(file)}
-      />
-      {#if file.errorType}
-        <div class="mc-fileuploader__file-message">
-          {errorLabels[file.errorType]}
-        </div>
-      {/if}
-    </li>
-  {/each}
-</ul>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.file-uploader';
-</style>