@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/bricoman/components/dropdown/Dropdown.svelte

@@ -1,357 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { tick } from 'svelte';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } 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();
-          }}
-        >
-          <navigation-control-tag--cross-24px />
-        </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/dist/bricoman/components/field/Field.js

@@ -1,2 +0,0 @@
-import{S as e,i as t,a as i,b as r,f as s,s as l,c as n,e as d,v as a,d as m,n as o,h as c,j as h,k as p,y as u,l as g,m as f,o as $,u as x}from"../../index-c222d0b7.js";function _(e){let t,i;return{c(){t=d("span"),i=a(e[2]),c(t,"class","mc-field__requirement"),c(t,"aria-hidden","true")},m(e,s){r(e,t,s),p(t,i)},p(e,t){4&t&&u(i,e[2])},d(e){e&&f(t)}}}function b(e){let t,i;return{c(){t=d("span"),i=a(e[4]),c(t,"id",e[3]),c(t,"class","mc-field__help")},m(e,s){r(e,t,s),p(t,i)},p(e,r){16&r&&u(i,e[4]),8&r&&c(t,"id",e[3])},d(e){e&&f(t)}}}function q(e){let t,i;return{c(){t=d("span"),i=a(e[6]),c(t,"id",e[5]),c(t,"class","mc-field__error-message")},m(e,s){r(e,t,s),p(t,i)},p(e,r){64&r&&u(i,e[6]),32&r&&c(t,"id",e[5])},d(e){e&&f(t)}}}function v(e){let t,i,s,l,$,x,v,w,y=e[2]&&_(e),k=e[3]&&e[4]&&b(e),j=e[7]&&q(e),z=[{class:"mc-field"},e[8]],C={};for(let e=0;e<z.length;e+=1)C=n(C,z[e]);return{c(){t=d("div"),i=d("label"),s=a(e[1]),l=m(),y&&y.c(),$=m(),k&&k.c(),x=m(),v=d("slot"),w=m(),j&&j.c(),this.c=o,c(i,"for",e[0]),c(i,"class","mc-field__label"),h(t,C)},m(e,n){r(e,t,n),p(t,i),p(i,s),p(i,l),y&&y.m(i,null),p(t,$),k&&k.m(t,null),p(t,x),p(t,v),p(t,w),j&&j.m(t,null)},p(e,[r]){2&r&&u(s,e[1]),e[2]?y?y.p(e,r):(y=_(e),y.c(),y.m(i,null)):y&&(y.d(1),y=null),1&r&&c(i,"for",e[0]),e[3]&&e[4]?k?k.p(e,r):(k=b(e),k.c(),k.m(t,x)):k&&(k.d(1),k=null),e[7]?j?j.p(e,r):(j=q(e),j.c(),j.m(t,null)):j&&(j.d(1),j=null),h(t,C=g(z,[{class:"mc-field"},256&r&&e[8]]))},i:o,o:o,d(e){e&&f(t),y&&y.d(),k&&k.d(),j&&j.d()}}}function w(e,t,i){let r;const s=["id","label","requirementtext","helpid","helptext","errorid","errormessage","isinvalid"];let l=$(t,s),{id:d}=t,{label:a}=t,{requirementtext:m}=t,{helpid:o}=t,{helptext:c}=t,{errorid:h}=t,{errormessage:p}=t,{isinvalid:u=!1}=t;return e.$$set=e=>{t=n(n({},t),x(e)),i(9,l=$(t,s)),"id"in e&&i(0,d=e.id),"label"in e&&i(1,a=e.label),"requirementtext"in e&&i(2,m=e.requirementtext),"helpid"in e&&i(3,o=e.helpid),"helptext"in e&&i(4,c=e.helptext),"errorid"in e&&i(5,h=e.errorid),"errormessage"in e&&i(6,p=e.errormessage),"isinvalid"in e&&i(7,u=e.isinvalid)},e.$$.update=()=>{i(8,r=Object.assign({},l)),256&e.$$.dirty&&delete r.class},[d,a,m,o,c,h,p,u,r]}class y extends e{constructor(e){super();const n=document.createElement("style");n.textContent='@charset "UTF-8";.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}@media screen and (min-width: 769px){.mc-field__container--inline,.mc-field__element--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){}@media screen and (min-width: 1024px){}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}',this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},w,v,l,{id:0,label:1,requirementtext:2,helpid:3,helptext:4,errorid:5,errormessage:6,isinvalid:7},null),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["id","label","requirementtext","helpid","helptext","errorid","errormessage","isinvalid"]}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),s()}get label(){return this.$$.ctx[1]}set label(e){this.$$set({label:e}),s()}get requirementtext(){return this.$$.ctx[2]}set requirementtext(e){this.$$set({requirementtext:e}),s()}get helpid(){return this.$$.ctx[3]}set helpid(e){this.$$set({helpid:e}),s()}get helptext(){return this.$$.ctx[4]}set helptext(e){this.$$set({helptext:e}),s()}get errorid(){return this.$$.ctx[5]}set errorid(e){this.$$set({errorid:e}),s()}get errormessage(){return this.$$.ctx[6]}set errormessage(e){this.$$set({errormessage:e}),s()}get isinvalid(){return this.$$.ctx[7]}set isinvalid(e){this.$$set({isinvalid:e}),s()}}export{y as default};
-//# sourceMappingURL=Field.js.map

package/dist/bricoman/components/field/Field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.js","sources":["../../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let id: string;\n  export let label: string;\n  export let requirementtext: string;\n  export let helpid: string;\n  export let helptext: string;\n  export let errorid: string;\n  export let errormessage: string;\n  export let isinvalid = false;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n</script>\n\n<div class=\"mc-field\" {...attributes}>\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n  <slot />\n  {#if isinvalid}\n    <span id={errorid} class=\"mc-field__error-message\">\n      {errormessage}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block_2","if_block1","create_if_block_1","create_if_block","div","append","label_1","slot","id","$$props","label","requirementtext","helpid","helptext","errorid","errormessage","isinvalid","attributes","Object","assign","$$restProps","class"],"mappings":"2NAoBSA,EAAe,2EADlBC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAe,qEAMjBA,EAAQ,aADDA,EAAM,0CAAhBC,EAEMC,EAAAC,EAAAC,4BADHJ,EAAQ,kBADDA,EAAM,qEAObA,EAAY,aADLA,EAAO,mDAAjBC,EAEMC,EAAAC,EAAAC,4BADHJ,EAAY,mBADLA,EAAO,wDAbZA,EAAe,IAAAK,EAAAL,GAMjBM,EAAAN,MAAUA,EAAQ,IAAAO,EAAAP,KAMlBA,EAAS,IAAAQ,EAAAR,yBAfUA,EAAU,wFAE/BA,EAAK,sFADIA,EAAE,kDADhBC,EAoBKC,EAAAO,EAAAL,GAnBHM,EAOOD,EAAAE,6DAMPD,EAAOD,EAAAG,4CAZJZ,EAAK,IACDA,EAAe,2EAFVA,EAAE,IAQTA,MAAUA,EAAQ,yDAMlBA,EAAS,iGAfUA,EAAU,oMAZvBa,GAAUC,SACVC,GAAaD,mBACbE,GAAuBF,UACvBG,GAAcH,YACdI,GAAgBJ,WAChBK,GAAeL,gBACfM,GAAoBN,GACpBO,UAAAA,GAAY,GAAKP,2VACzBQ,EAALC,OAAAC,UAAuBC,2BACXH,EAAWI"}

package/dist/bricoman/components/field/Field.svelte

@@ -1,41 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  export let id: string;
-  export let label: string;
-  export let requirementtext: string;
-  export let helpid: string;
-  export let helptext: string;
-  export let errorid: string;
-  export let errormessage: string;
-  export let isinvalid = false;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-</script>
-
-<div class="mc-field" {...attributes}>
-  <label for={id} class="mc-field__label">
-    {label}
-    {#if requirementtext}
-      <span class="mc-field__requirement" aria-hidden="true">
-        {requirementtext}
-      </span>
-    {/if}
-  </label>
-  {#if helpid && helptext}
-    <span id={helpid} class="mc-field__help">
-      {helptext}
-    </span>
-  {/if}
-  <slot />
-  {#if isinvalid}
-    <span id={errorid} class="mc-field__error-message">
-      {errormessage}
-    </span>
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.fields';
-</style>

package/dist/bricoman/components/fileuploader/FileUploader.js

@@ -1,2 +0,0 @@
-import{S as e,i as l,a as t,b as s,f as i,s as a,e as r,d as o,v as n,n as d,h as c,k as p,x as f,y as m,B as u,z as b,A as h,m as $,q as x,r as g,E as v,F as w,G as _,C as k,K as y}from"../../index-c222d0b7.js";import{E}from"../../EventHandler-f7ee47ca.js";import C from"./fileuploader-result.nested.js";function z(e){let l,t;return l=new C({props:{files:e[8],allowedExtensions:e[11],disabled:e[6],maxSize:e[12],removelabel:e[7],errorLabels:e[13]}}),l.$on("file-removed",e[15]),{c(){v(l.$$.fragment)},m(e,s){w(l,e,s),t=!0},p(e,t){const s={};256&t&&(s.files=e[8]),2048&t&&(s.allowedExtensions=e[11]),64&t&&(s.disabled=e[6]),4096&t&&(s.maxSize=e[12]),128&t&&(s.removelabel=e[7]),8192&t&&(s.errorLabels=e[13]),l.$set(s)},i(e){t||(u(l.$$.fragment,e),t=!0)},o(e){b(l.$$.fragment,e),t=!1},d(e){_(l,e)}}}function S(e){let l,t;return l=new C({props:{files:e[10],allowedExtensions:e[11],disabled:e[6],maxSize:e[12],removelabel:e[7],errorLabels:e[13]}}),l.$on("file-removed",e[16]),{c(){v(l.$$.fragment)},m(e,s){w(l,e,s),t=!0},p(e,t){const s={};1024&t&&(s.files=e[10]),2048&t&&(s.allowedExtensions=e[11]),64&t&&(s.disabled=e[6]),4096&t&&(s.maxSize=e[12]),128&t&&(s.removelabel=e[7]),8192&t&&(s.errorLabels=e[13]),l.$set(s)},i(e){t||(u(l.$$.fragment,e),t=!0)},o(e){b(l.$$.fragment,e),t=!1},d(e){_(l,e)}}}function P(e){let l,t,i,a,x,g,v,w,_,y,E,C=e[0]&&e[8]&&e[8].length>0&&z(e),P=e[10].length>0&&S(e);return{c(){l=r("div"),t=r("input"),i=o(),a=r("label"),x=r("span"),g=n(e[3]),v=o(),C&&C.c(),w=o(),P&&P.c(),this.c=d,c(t,"id",e[1]),c(t,"name",e[2]),c(t,"type","file"),c(t,"class","mc-fileuploader__input"),c(t,"accept",e[4]),t.multiple=e[5],t.disabled=e[6],c(x,"class","mc-fileuploader__label--center"),c(a,"for",e[1]),c(a,"class","mc-fileuploader__label"),c(l,"class","mc-fileuploader")},m(r,o){s(r,l,o),p(l,t),p(l,i),p(l,a),p(a,x),p(x,g),p(l,v),C&&C.m(l,null),p(l,w),P&&P.m(l,null),e[23](l),_=!0,y||(E=f(t,"change",e[14]),y=!0)},p(e,[s]){(!_||2&s)&&c(t,"id",e[1]),(!_||4&s)&&c(t,"name",e[2]),(!_||16&s)&&c(t,"accept",e[4]),(!_||32&s)&&(t.multiple=e[5]),(!_||64&s)&&(t.disabled=e[6]),(!_||8&s)&&m(g,e[3]),(!_||2&s)&&c(a,"for",e[1]),e[0]&&e[8]&&e[8].length>0?C?(C.p(e,s),257&s&&u(C,1)):(C=z(e),C.c(),u(C,1),C.m(l,w)):C&&(k(),b(C,1,1,(()=>{C=null})),h()),e[10].length>0?P?(P.p(e,s),1024&s&&u(P,1)):(P=S(e),P.c(),u(P,1),P.m(l,null)):P&&(k(),b(P,1,1,(()=>{P=null})),h())},i(e){_||(u(C),u(P),_=!0)},o(e){b(C),b(P),_=!1},d(t){t&&$(l),C&&C.d(),P&&P.d(),e[23](null),y=!1,E()}}}function A(e,l){const t=Array.from(e),s=t.indexOf(l);if(-1!==s&&t.splice(s,1),l instanceof File){const e=new DataTransfer;return t.forEach((l=>e.items.add(l))),e.files}return t}function M(e,l,t){let s,i,a,r,o,n,{id:d}=l,{name:c}=l,{label:p}=l,{accept:f}=l,{multiple:m=!0}=l,{allowedextensions:u}=l,{maxsize:b}=l,{displayfileslist:h=!1}=l,{disabled:$=!1}=l,{removelabel:v="Remove"}=l,{uploadedfiles:w}=l,{errorlabels:_}=l,{stateless:k}=l,{keepPrevious:C}=l,z=new E(x(),g());return e.$$set=e=>{"id"in e&&t(1,d=e.id),"name"in e&&t(2,c=e.name),"label"in e&&t(3,p=e.label),"accept"in e&&t(4,f=e.accept),"multiple"in e&&t(5,m=e.multiple),"allowedextensions"in e&&t(17,u=e.allowedextensions),"maxsize"in e&&t(18,b=e.maxsize),"displayfileslist"in e&&t(0,h=e.displayfileslist),"disabled"in e&&t(6,$=e.disabled),"removelabel"in e&&t(7,v=e.removelabel),"uploadedfiles"in e&&t(19,w=e.uploadedfiles),"errorlabels"in e&&t(20,_=e.errorlabels),"stateless"in e&&t(21,k=e.stateless),"keepPrevious"in e&&t(22,C=e.keepPrevious)},e.$$.update=()=>{131072&e.$$.dirty&&t(11,s=u?JSON.parse(u):[]),524288&e.$$.dirty&&t(10,i=w?JSON.parse(w):[]),e.$$.dirty,262144&e.$$.dirty&&t(12,a=b||void 0),1048576&e.$$.dirty&&t(13,r=_?JSON.parse(_):[])},[h,d,c,p,f,m,$,v,o,n,i,s,a,r,function(e){const l=e.target;if(C&&(null==o?void 0:o.length)>0){const e=[...o],s=[...l.files],i=new DataTransfer;e.forEach((e=>i.items.add(e))),s.forEach((e=>i.items.add(e))),t(8,o=i.files)}else t(8,o=l.files);t(0,h=!0);const i=[];[...o].forEach(((e,l)=>{const t=e.name,r=e.size,o=function(e){if(s&&s.length>0){const l=e.slice(2+(e.lastIndexOf(".")-1>>>0));if(s&&!s.includes(String(l)))return!1}return!0}(t),n=function(e){return!(a&&e/1024/1024>a)}(r);let d="";o||(d="invalid-extension"),n||(d="invalid-size"),o&&n||i.push({index:l,fileName:t,fileSize:r,errorType:d})})),i.length>0&&z.dispatch(x(),"invalid-files",i),z.dispatch("change",o);const r=n.querySelector(".mc-fileuploader__input");k?r.value="":r.files=o},function(e){t(8,o=A(o,e.detail)),n.querySelector(".mc-fileuploader__input").files=o,z.dispatch("change",o),z.dispatch("file-removed",e.detail)},function(e){const l=A(i,e.detail);t(10,i=l),z.dispatch("uploaded-file-removed",e.detail)},u,b,w,_,k,C,function(e){y[e?"unshift":"push"]((()=>{n=e,t(9,n)}))}]}class L extends e{constructor(e){super();const r=document.createElement("style");r.textContent=".mc-fileuploader{position:relative;display:block}.mc-fileuploader__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-fileuploader__label{font-family:\"LeroyMerlin\", sans-serif;font-weight:600;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;-webkit-transition:all ease 200ms;transition:all ease 200ms;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;font-size:1rem;line-height:1.375;padding:0.6875rem 1.5rem;min-height:3rem;min-width:3rem;color:#c34400;border-color:#c34400;background-color:#ffffff;margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;-webkit-box-sizing:border-box;box-sizing:border-box}.mc-fileuploader__label:hover{background-color:#ffe2bd;color:#004ea8}.mc-fileuploader__label:active{background-color:#ffbf6b;color:#00387a}.mc-fileuploader__label:active{background-color:#ffbf6b;color:#00387a}.mc-fileuploader__label:disabled{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-fileuploader__label::before{content:\"\";width:1.5rem;height:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23c34400' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat;background-size:1.5rem;margin-right:0.5rem;margin-left:-0.5rem}:focus+.mc-fileuploader__label{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}:hover+.mc-fileuploader__label{color:#004ea8;background-color:#ffe2bd}:disabled+.mc-fileuploader__label{color:#666666;background-color:#cccccc;border-color:transparent;cursor:not-allowed}:disabled+.mc-fileuploader__label::before{background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23666666' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat}",this.shadowRoot.appendChild(r),l(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},M,P,a,{id:1,name:2,label:3,accept:4,multiple:5,allowedextensions:17,maxsize:18,displayfileslist:0,disabled:6,removelabel:7,uploadedfiles:19,errorlabels:20,stateless:21,keepPrevious:22},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["id","name","label","accept","multiple","allowedextensions","maxsize","displayfileslist","disabled","removelabel","uploadedfiles","errorlabels","stateless","keepPrevious"]}get id(){return this.$$.ctx[1]}set id(e){this.$$set({id:e}),i()}get name(){return this.$$.ctx[2]}set name(e){this.$$set({name:e}),i()}get label(){return this.$$.ctx[3]}set label(e){this.$$set({label:e}),i()}get accept(){return this.$$.ctx[4]}set accept(e){this.$$set({accept:e}),i()}get multiple(){return this.$$.ctx[5]}set multiple(e){this.$$set({multiple:e}),i()}get allowedextensions(){return this.$$.ctx[17]}set allowedextensions(e){this.$$set({allowedextensions:e}),i()}get maxsize(){return this.$$.ctx[18]}set maxsize(e){this.$$set({maxsize:e}),i()}get displayfileslist(){return this.$$.ctx[0]}set displayfileslist(e){this.$$set({displayfileslist:e}),i()}get disabled(){return this.$$.ctx[6]}set disabled(e){this.$$set({disabled:e}),i()}get removelabel(){return this.$$.ctx[7]}set removelabel(e){this.$$set({removelabel:e}),i()}get uploadedfiles(){return this.$$.ctx[19]}set uploadedfiles(e){this.$$set({uploadedfiles:e}),i()}get errorlabels(){return this.$$.ctx[20]}set errorlabels(e){this.$$set({errorlabels:e}),i()}get stateless(){return this.$$.ctx[21]}set stateless(e){this.$$set({stateless:e}),i()}get keepPrevious(){return this.$$.ctx[22]}set keepPrevious(e){this.$$set({keepPrevious:e}),i()}}export{L as default};
-//# sourceMappingURL=FileUploader.js.map

package/dist/bricoman/components/fileuploader/FileUploader.js.map

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

package/dist/bricoman/components/fileuploader/FileUploader.svelte

@@ -1,206 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  // @ts-nocheck
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } 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);
-    }
-    
-    if(value instanceof File) {
-      const dataTransfer: DataTransfer = new DataTransfer()
-      array.forEach((item) => dataTransfer.items.add(item))
-      return dataTransfer.files
-    }
-    else {
-      return array
-    }
-  }
-
-  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/c.file-uploader';
-</style>