@mozaic-ds/web-components 0.16.0 → 0.17.0

package/public/components/fileuploader/FileUploader.js.map

@@ -1 +1 @@
-{"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.svelte';\n\n  export let id: 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\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    files = target.files as FileList;\n    displayfileslist = true;\n    const invalidFiles: Array<any> = [];\n    const fileList = [...files];\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    if (stateless) {\n      const fileuploader = root.querySelector(\n        '.mc-fileuploader__input',\n      ) as HTMLInputElement;\n      fileuploader.value = '';\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    return array as FileList;\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.value = '';\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    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","files","root","id","$$props","label","accept","multiple","allowedextensions","maxsize","displayfileslist","disabled","removelabel","uploadedfiles","errorlabels","stateless","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","allowedExtensions","JSON","parse","uploadedFiles","maxSize","undefined","errorLabels","e","invalidFiles","forEach","file","index","fileName","name","fileSize","size","validExtension","extension","slice","lastIndexOf","includes","String","checkFileExtension","validSize","checkFileSize","errorType","push","dispatch","querySelector","detail","$$value"],"mappings":"sdA4JuBA,EAAU,sXAKpBA,EAAa,kHAMHA,EAAkB,oFAN5BA,EAAa,qRAbnBC,EAAAD,MAAoBA,EAAK,IAAIA,EAAM,GAAAE,OAAS,GAACC,EAAAH,KAW7CA,EAAa,GAACE,OAAS,GAACE,EAAAJ,yEAdxBA,EAAK,8NAFEA,EAAE,iFAVhBK,EAqCKC,EAAAC,EAAAC,GApCHC,EAQCF,EAAAG,UACDD,EAIOF,EAAAI,GAHLF,EAEME,EAAAC,uFALKZ,EAAY,wJAIpBA,EAAK,yBAFEA,EAAE,IAKTA,MAAoBA,EAAK,IAAIA,EAAM,GAAAE,OAAS,iGAW5CF,EAAa,GAACE,OAAS,mNAvDnBW,EAAgBC,EAAoBC,GACrC,MAAAC,EAAQC,MAAMC,KAAKJ,GACnBK,EAAMH,EAAMI,QAAQL,UACb,IAATI,GACFH,EAAMK,OAAOF,EAAK,GAEbH,gCAtFLM,EACAC,MAdOC,GAAUC,SACVC,GAAaD,UACbE,GAAcF,GACdG,SAAAA,GAAW,GAAIH,qBACfI,GAAyBJ,WACzBK,GAAeL,GACfM,iBAAAA,GAAmB,GAAKN,GACxBO,SAAAA,GAAW,GAAKP,GAChBQ,YAAAA,EAAc,UAAQR,iBACtBS,GAAqBT,eACrBU,GAAmBV,aACnBW,GAAgBX,EAIvBY,EAAmB,IAAAC,EACrBC,IACAC,2fAGDC,EAAA,GAAEC,EAAoBb,EAAoBc,KAAKC,MAAMf,GAAiB,uBACtEY,EAAA,EAAEI,EAAgBX,EAAgBS,KAAKC,MAAMV,GAAa,uCAExDY,EAAUhB,QAAoBiB,sBAChCN,EAAA,GAAEO,EAAcb,EAAcQ,KAAKC,MAAMT,GAAW,gCAsB5C,SAAac,SACd3C,EAAS2C,EAAE3C,WACjBgB,EAAQhB,EAAOgB,OACfmB,EAAA,EAAAV,GAAmB,SACbmB,EAAY,UACG5B,GACZ6B,SAAS,CAAAC,EAAMC,WAChBC,EAAWF,EAAKG,KAChBC,EAAWJ,EAAKK,KAChBC,EArBD,SAAmBJ,GACtB,GAAAZ,GAAqBA,EAAkBxC,OAAS,EAAC,CAC7C,MAAAyD,EAAoBL,EAASM,MACS,GAAxCN,EAASO,YAAY,KAAO,IAAO,IAEnC,GAAAnB,IAAsBA,EAAkBoB,SAASC,OAAOJ,WACnD,SAIJ,EAWkBK,CAAmBV,GACpCW,EA9BD,SAAcT,WAEjBV,GADeU,EAAW,KAAO,KACTV,GA4BRoB,CAAcV,GAC5B,IAAAW,EAAY,GAEXT,IACHS,EAAY,qBAGTF,IACHE,EAAY,gBAGTT,GAAmBO,GACtBf,EAAakB,KACJ,CAAAf,QACGC,WACAE,WACCW,iBAKbjB,EAAahD,OAAS,GACxBmC,EAAagC,SACX9B,IACA,gBACAW,GAGJb,EAAagC,SAAS,SAAU/C,GAC5Bc,EAAS,CACUb,EAAK+C,cACxB,2BAEWvD,MAAQ,KAahB,SAAWkC,GAClBR,EAAA,EAAAnB,EAAQT,EAAgBS,EAAO2B,EAAEsB,SACZhD,EAAK+C,cACxB,2BAEWvD,MAAQ,GACrBsB,EAAagC,SAAS,eAAgBpB,EAAEsB,SAGjC,SAAmBtB,GACpB,MAAA3B,EAAQT,EAAgBgC,EAAeI,EAAEsB,QAC/C9B,EAAA,EAAAI,EAAgBvB,GAChBe,EAAagC,SAAS,wBAAyBpB,EAAEsB,2DAQbhD,EAAIiD"}
+{"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 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\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    files = target.files as FileList;\n    displayfileslist = true;\n    const invalidFiles: Array<any> = [];\n    const fileList = [...files];\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    if (stateless) {\n      const fileuploader = root.querySelector(\n        '.mc-fileuploader__input',\n      ) as HTMLInputElement;\n      fileuploader.value = '';\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    return array as FileList;\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.value = '';\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    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","files","root","id","$$props","label","accept","multiple","allowedextensions","maxsize","displayfileslist","disabled","removelabel","uploadedfiles","errorlabels","stateless","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","allowedExtensions","JSON","parse","uploadedFiles","maxSize","undefined","errorLabels","e","invalidFiles","forEach","file","index","fileName","name","fileSize","size","validExtension","extension","slice","lastIndexOf","includes","String","checkFileExtension","validSize","checkFileSize","errorType","push","dispatch","querySelector","detail","$$value"],"mappings":"6dA4JuBA,EAAU,sXAKpBA,EAAa,kHAMHA,EAAkB,oFAN5BA,EAAa,qRAbnBC,EAAAD,MAAoBA,EAAK,IAAIA,EAAM,GAAAE,OAAS,GAACC,EAAAH,KAW7CA,EAAa,GAACE,OAAS,GAACE,EAAAJ,yEAdxBA,EAAK,8NAFEA,EAAE,iFAVhBK,EAqCKC,EAAAC,EAAAC,GApCHC,EAQCF,EAAAG,UACDD,EAIOF,EAAAI,GAHLF,EAEME,EAAAC,uFALKZ,EAAY,wJAIpBA,EAAK,yBAFEA,EAAE,IAKTA,MAAoBA,EAAK,IAAIA,EAAM,GAAAE,OAAS,iGAW5CF,EAAa,GAACE,OAAS,mNAvDnBW,EAAgBC,EAAoBC,GACrC,MAAAC,EAAQC,MAAMC,KAAKJ,GACnBK,EAAMH,EAAMI,QAAQL,UACb,IAATI,GACFH,EAAMK,OAAOF,EAAK,GAEbH,gCAtFLM,EACAC,MAdOC,GAAUC,SACVC,GAAaD,UACbE,GAAcF,GACdG,SAAAA,GAAW,GAAIH,qBACfI,GAAyBJ,WACzBK,GAAeL,GACfM,iBAAAA,GAAmB,GAAKN,GACxBO,SAAAA,GAAW,GAAKP,GAChBQ,YAAAA,EAAc,UAAQR,iBACtBS,GAAqBT,eACrBU,GAAmBV,aACnBW,GAAgBX,EAIvBY,EAAmB,IAAAC,EACrBC,IACAC,2fAGDC,EAAA,GAAEC,EAAoBb,EAAoBc,KAAKC,MAAMf,GAAiB,uBACtEY,EAAA,EAAEI,EAAgBX,EAAgBS,KAAKC,MAAMV,GAAa,uCAExDY,EAAUhB,QAAoBiB,sBAChCN,EAAA,GAAEO,EAAcb,EAAcQ,KAAKC,MAAMT,GAAW,gCAsB5C,SAAac,SACd3C,EAAS2C,EAAE3C,WACjBgB,EAAQhB,EAAOgB,OACfmB,EAAA,EAAAV,GAAmB,SACbmB,EAAY,UACG5B,GACZ6B,SAAS,CAAAC,EAAMC,WAChBC,EAAWF,EAAKG,KAChBC,EAAWJ,EAAKK,KAChBC,EArBD,SAAmBJ,GACtB,GAAAZ,GAAqBA,EAAkBxC,OAAS,EAAC,CAC7C,MAAAyD,EAAoBL,EAASM,MACS,GAAxCN,EAASO,YAAY,KAAO,IAAO,IAEnC,GAAAnB,IAAsBA,EAAkBoB,SAASC,OAAOJ,WACnD,SAIJ,EAWkBK,CAAmBV,GACpCW,EA9BD,SAAcT,WAEjBV,GADeU,EAAW,KAAO,KACTV,GA4BRoB,CAAcV,GAC5B,IAAAW,EAAY,GAEXT,IACHS,EAAY,qBAGTF,IACHE,EAAY,gBAGTT,GAAmBO,GACtBf,EAAakB,KACJ,CAAAf,QACGC,WACAE,WACCW,iBAKbjB,EAAahD,OAAS,GACxBmC,EAAagC,SACX9B,IACA,gBACAW,GAGJb,EAAagC,SAAS,SAAU/C,GAC5Bc,EAAS,CACUb,EAAK+C,cACxB,2BAEWvD,MAAQ,KAahB,SAAWkC,GAClBR,EAAA,EAAAnB,EAAQT,EAAgBS,EAAO2B,EAAEsB,SACZhD,EAAK+C,cACxB,2BAEWvD,MAAQ,GACrBsB,EAAagC,SAAS,eAAgBpB,EAAEsB,SAGjC,SAAmBtB,GACpB,MAAA3B,EAAQT,EAAgBgC,EAAeI,EAAEsB,QAC/C9B,EAAA,EAAAI,EAAgBvB,GAChBe,EAAagC,SAAS,wBAAyBpB,EAAEsB,2DAQbhD,EAAIiD"}

package/public/components/fileuploader/FileUploader.svelte

@@ -7,7 +7,7 @@
     createEventDispatcher,
   } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
-  import ResultFile from './fileuploader-result.svelte';
+  import ResultFile from './fileuploader-result.nested.svelte';
 
   export let id: string;
   export let label: string;

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

@@ -0,0 +1,2 @@
+import{E as e,i as l,s as i,F as t,e as a,g as r,b as o,n as s,o as n,O as d,q as c,r as u,c as f,u as m,t as p,d as b,j as v,l as g,k as h}from"../../index-9ffad6d0.js";import{E as w}from"../../EventHandler-f7ee47ca.js";function x(e){t(e,"svelte-10140ui",".mc-fileuploader.svelte-10140ui.svelte-10140ui{position:relative;display:block}.mc-fileuploader__input.svelte-10140ui.svelte-10140ui{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.svelte-10140ui.svelte-10140ui{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;-o-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:#188803;border-color:#188803;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.is-hover.svelte-10140ui.svelte-10140ui,.mc-fileuploader__label.svelte-10140ui.svelte-10140ui:hover{background-color:#ebf5de;color:#006902}.mc-fileuploader__label.is-active.svelte-10140ui.svelte-10140ui,.mc-fileuploader__label.svelte-10140ui.svelte-10140ui:active{background-color:#c5e39e;color:#035010}.mc-fileuploader__label.is-active.svelte-10140ui.svelte-10140ui,.mc-fileuploader__label.svelte-10140ui.svelte-10140ui:active{background-color:#c5e39e;color:#035010}.mc-fileuploader__label.svelte-10140ui.svelte-10140ui:disabled,.mc-fileuploader__label.is-disabled.svelte-10140ui.svelte-10140ui{background-color:#cccccc;border-color:transparent;color:#666666;cursor:not-allowed}.mc-fileuploader__label.svelte-10140ui.svelte-10140ui::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='%23188803' 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}.is-focus.svelte-10140ui+.mc-fileuploader__label.svelte-10140ui,.svelte-10140ui:focus+.mc-fileuploader__label.svelte-10140ui{-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}.is-hover.svelte-10140ui+.mc-fileuploader__label.svelte-10140ui,.svelte-10140ui:hover+.mc-fileuploader__label.svelte-10140ui{color:#006902;background-color:#ebf5de}.is-disabled.svelte-10140ui+.mc-fileuploader__label.svelte-10140ui,.svelte-10140ui:disabled+.mc-fileuploader__label.svelte-10140ui{color:#666666;background-color:#cccccc;border-color:transparent;cursor:not-allowed}.is-disabled.svelte-10140ui+.mc-fileuploader__label.svelte-10140ui::before,.svelte-10140ui:disabled+.mc-fileuploader__label.svelte-10140ui::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}.mc-fileuploader__files.svelte-10140ui.svelte-10140ui{list-style:none;padding:0;margin:1rem 0 0 0}.mc-fileuploader__file.svelte-10140ui.svelte-10140ui{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#e6e6e6;-webkit-box-sizing:content-box;box-sizing:content-box;color:#000000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.mc-fileuploader__file.svelte-10140ui.svelte-10140ui:not(:last-child){margin-bottom:0.25rem}.mc-fileuploader__file-name.svelte-10140ui.svelte-10140ui{font-size:1rem;line-height:1.375;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding-left:0.75rem;padding-right:0.75rem;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 7.5rem)}.mc-fileuploader__file-icon.svelte-10140ui.svelte-10140ui{background-color:transparent;background-position:center right;background-repeat:no-repeat;background-size:1.5rem;display:block;height:1.5rem;margin-left:1rem;margin-right:1rem;width:1.5rem}.mc-fileuploader__file--is-valid.svelte-10140ui .mc-fileuploader__file-icon.svelte-10140ui{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 1-8 8 8 8 0 0 1 8-8m0-2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z'/%3E%3Cpath d='M10.59 16.12a1 1 0 0 1-.68-.26l-3.84-3.55a1 1 0 0 1 1.36-1.47l3.13 2.89L16 8.17a1 1 0 0 1 1.43 1.41l-6.13 6.25a1 1 0 0 1-.71.29z'/%3E%3C/svg%3E\")}.mc-fileuploader__file--is-invalid.svelte-10140ui .mc-fileuploader__file-icon.svelte-10140ui{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23c61112' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z'/%3E%3Cpath d='M12 7a1 1 0 0 0-1 1v4.38a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-fileuploader__file--is-invalid.svelte-10140ui .mc-fileuploader__file-message.svelte-10140ui{font-size:0.875rem;line-height:1.2857142857;background:#ffffff;color:#c61112;-ms-flex-preferred-size:100%;flex-basis:100%;padding-top:0.25rem}.mc-fileuploader__delete.svelte-10140ui.svelte-10140ui{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#cccccc;border:none;cursor:pointer;padding:0.5rem}.mc-fileuploader__delete.svelte-10140ui.svelte-10140ui::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-fileuploader__delete.svelte-10140ui.svelte-10140ui::after{content:\"\";width:1.5rem;height:1.5rem;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23000000' viewBox='0 0 24 24'%3E%3Cpath d='M18.08 8a1 1 0 0 0-1.08.92L16.08 20H7.92L7 8.92a1 1 0 1 0-2 .16l1 12A1 1 0 0 0 7 22h10a1 1 0 0 0 1-.92l1-12A1 1 0 0 0 18.08 8z'/%3E%3Cpath d='M19 5h-3.77l-.65-2.27a1 1 0 0 0-1-.73h-3.2a1 1 0 0 0-1 .73L8.77 5H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2zm-8.62-2h3.24l.57 2H9.81zM12.5 18v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 0 1 0zM14.25 18.5a.5.5 0 0 0 .5-.47l.5-8a.5.5 0 0 0-.47-.53.49.49 0 0 0-.53.47l-.5 8a.5.5 0 0 0 .47.53zM9.75 18.5a.5.5 0 0 0 .47-.53l-.5-8a.49.49 0 0 0-.53-.47.5.5 0 0 0-.47.53l.5 8a.5.5 0 0 0 .53.47z'/%3E%3C/svg%3E\") no-repeat;background-size:1.5rem;display:block}.mc-fileuploader__delete.svelte-10140ui.svelte-10140ui:focus{outline:none}.mc-fileuploader__delete.svelte-10140ui.svelte-10140ui:focus::before{-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;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}")}function _(e,l,i){const t=e.slice();return t[15]=l[i],t[17]=i,t}function k(e){let l,i,t=e[3][e[15].errorType]+"";return{c(){l=a("div"),i=p(t),r(l,"class","mc-fileuploader__file-message svelte-10140ui")},m(e,t){o(e,l,t),v(l,i)},p(e,l){9&l&&t!==(t=e[3][e[15].errorType]+"")&&h(i,t)},d(e){e&&n(l)}}}function y(e){let l,i,t,s,d,c,u,f,m,w,x,_,y=e[15].name+"";function E(){return e[9](e[15])}let C=e[15].errorType&&k(e);return{c(){l=a("li"),i=a("span"),t=p(y),s=b(),d=a("span"),d.textContent=" ",c=b(),u=a("button"),f=b(),C&&C.c(),m=b(),r(i,"class","mc-fileuploader__file-name svelte-10140ui"),r(d,"class","mc-fileuploader__file-icon svelte-10140ui"),r(u,"type","button"),r(u,"class","mc-fileuploader__delete svelte-10140ui"),r(u,"aria-label",e[2]),u.disabled=e[1],r(l,"id",`file-${e[17]}`),r(l,"class",w=e[4](e[15])+" "+e[6].class+" svelte-10140ui")},m(e,a){o(e,l,a),v(l,i),v(i,t),v(l,s),v(l,d),v(l,c),v(l,u),v(l,f),C&&C.m(l,null),v(l,m),x||(_=g(u,"click",E),x=!0)},p(i,a){e=i,1&a&&y!==(y=e[15].name+"")&&h(t,y),4&a&&r(u,"aria-label",e[2]),2&a&&(u.disabled=e[1]),e[15].errorType?C?C.p(e,a):(C=k(e),C.c(),C.m(l,m)):C&&(C.d(1),C=null),65&a&&w!==(w=e[4](e[15])+" "+e[6].class+" svelte-10140ui")&&r(l,"class",w)},d(e){e&&n(l),C&&C.d(),x=!1,_()}}}function E(e){let l,i=e[0],t=[];for(let l=0;l<i.length;l+=1)t[l]=y(_(e,i,l));return{c(){l=a("ul");for(let e=0;e<t.length;e+=1)t[e].c();r(l,"id","file_uploaded"),r(l,"class","mc-fileuploader__files svelte-10140ui")},m(e,i){o(e,l,i);for(let e=0;e<t.length;e+=1)t[e]&&t[e].m(l,null)},p(e,[a]){if(127&a){let r;for(i=e[0],r=0;r<i.length;r+=1){const o=_(e,i,r);t[r]?t[r].p(o,a):(t[r]=y(o),t[r].c(),t[r].m(l,null))}for(;r<t.length;r+=1)t[r].d(1);t.length=i.length}},i:s,o:s,d(e){e&&n(l),d(t,e)}}}function C(e,l,i){let{allowedExtensions:t}=l,{maxSize:a}=l,{disabled:r=!1}=l,{files:o}=l,{removelabel:s="Remove"}=l,{errorLabels:n}=l,d=new w(c(),u());function p(e){if(t&&t.length>0){const l=e.slice(2+(e.lastIndexOf(".")-1>>>0));if(t&&!t.includes(String(l)))return!1}return!0}function b(e){return!(a&&e/1024/1024>a)}function v(e){d.dispatch("file-removed",e)}return e.$$set=e=>{i(6,l=f(f({},l),m(e))),"allowedExtensions"in e&&i(8,t=e.allowedExtensions),"maxSize"in e&&i(7,a=e.maxSize),"disabled"in e&&i(1,r=e.disabled),"files"in e&&i(0,o=e.files),"removelabel"in e&&i(2,s=e.removelabel),"errorLabels"in e&&i(3,n=e.errorLabels)},e.$$.update=()=>{1&e.$$.dirty&&i(0,o=o?function(e){let l=[...e];return l.forEach(((e,l)=>{const i=p(e.name),t=b(e.size);let a="";i||(a="invalid-extension"),t||(a="invalid-size"),e.errorType&&(a=e.errorType),i&&t&&!e.errorType||(e.errorType=a)})),l}(o):[]),128&e.$$.dirty&&i(7,a=a||void 0)},l=m(l),[o,r,s,n,function(e){let l=["mc-fileuploader__file"];return!function(e){const l=!t||p(e.name),i=b(e.size);if(!l||!i)return!1;return!0}(e)||e.errorType?l.push("mc-fileuploader__file--is-invalid"):l.push("mc-fileuploader__file--is-valid"),l.join(" ")},v,l,a,t,e=>v(e)]}class z extends e{constructor(e){super(),l(this,e,C,E,i,{allowedExtensions:8,maxSize:7,disabled:1,files:0,removelabel:2,errorLabels:3},x)}}export{z as default};
+//# sourceMappingURL=fileuploader-result.nested.js.map

package/public/components/fileuploader/fileuploader-result.nested.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileuploader-result.nested.js","sources":["../../../src/components/fileuploader/fileuploader-result.nested.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\n  export let allowedExtensions: [];\n  export let maxSize: number;\n  export let disabled = false;\n  export let files: FileList;\n  export let removelabel = 'Remove';\n  export let errorLabels;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  $: files = files ? handleChange(files) : [];\n  $: maxSize = maxSize ? maxSize : undefined;\n\n  function setClasses(file: File): string {\n    let classes = ['mc-fileuploader__file'];\n\n    if (checkFileStatus(file) && !file.errorType)\n      classes.push('mc-fileuploader__file--is-valid');\n    else classes.push('mc-fileuploader__file--is-invalid');\n    return classes.join(' ');\n  }\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\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 handleChange(myFiles: FileList): void {\n    let files = [...myFiles];\n    files.forEach((file, index) => {\n      const validExtension = checkFileExtension(file.name);\n      const validSize = checkFileSize(file.size);\n      let errorType = '';\n      if (!validExtension) {\n        errorType = 'invalid-extension';\n      }\n      if (!validSize) {\n        errorType = 'invalid-size';\n      }\n      if (file.errorType) {\n        errorType = file.errorType;\n      }\n      if (!validExtension || !validSize || file.errorType) {\n        file.errorType = errorType;\n      }\n    });\n    return files;\n  }\n\n  function checkFileStatus(file: File): boolean {\n    const validExtension = allowedExtensions\n      ? checkFileExtension(file.name)\n      : true;\n    const validSize = checkFileSize(file.size);\n\n    if (!validExtension || !validSize) {\n      return false; // invalid\n    }\n\n    return true; // valid\n  }\n\n  function deleteFile(file) {\n    eventHandler.dispatch('file-removed', file);\n  }\n</script>\n\n<ul id=\"file_uploaded\" class=\"mc-fileuploader__files\">\n  {#each files as file, index}\n    <li id={`file-${index}`} class=\"{setClasses(file)} {$$props.class}\">\n      <span class=\"mc-fileuploader__file-name\">{file.name}</span>\n      <span class=\"mc-fileuploader__file-icon\">&nbsp;</span>\n      <button\n        type=\"button\"\n        class=\"mc-fileuploader__delete\"\n        aria-label={removelabel}\n        {disabled}\n        on:click={() => deleteFile(file)}\n      />\n      {#if file.errorType}\n        <div class=\"mc-fileuploader__file-message\">\n          {errorLabels[file.errorType]}\n        </div>\n      {/if}\n    </li>\n  {/each}\n</ul>\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","errorType","insert","target","div","anchor","set_data","t","t_value","t0_value","name","if_block","create_if_block","attr","li","li_class_value","class","append","span0","span1","button","dirty","t0","length","i","ul","allowedExtensions","$$props","maxSize","disabled","files","removelabel","errorLabels","eventHandler","EventHandler","get_current_component","createEventDispatcher","checkFileExtension","fileName","extension","slice","lastIndexOf","includes","String","checkFileSize","fileSize","deleteFile","file","dispatch","myFiles","forEach","index","validExtension","validSize","size","handleChange","undefined","classes","checkFileStatus","push","join"],"mappings":"s/QA4GWA,EAAW,GAACA,EAAI,IAACC,WAAS,oGAD7BC,EAEKC,EAAAC,EAAAC,8BADFL,EAAW,GAACA,EAAI,IAACC,WAAS,KAAAK,EAAAC,EAAAC,6DAXWC,EAAAT,MAAKU,KAAI,mCAS9C,IAAAC,EAAAX,MAAKC,WAASW,EAAAZ,sUAJLA,EAAW,qCANXA,EAAK,OAAYa,EAAAC,EAAA,QAAAC,EAAAf,EAAW,GAAAA,EAAQ,KAAA,IAAAA,KAAQgB,MAAK,2BAAjEd,EAeIC,EAAAW,EAAAT,GAdFY,EAA0DH,EAAAI,iBAC1DD,EAAqDH,EAAAK,UACrDF,EAMCH,EAAAM,uEARyC,EAAAC,GAAAZ,KAAAA,EAAAT,MAAKU,KAAI,KAAAJ,EAAAgB,EAAAb,yBAKrCT,EAAW,2BAIpBA,MAAKC,gEAVqB,GAAAoB,GAAAN,KAAAA,EAAAf,EAAW,GAAAA,EAAQ,KAAA,IAAAA,KAAQgB,MAAK,2FAD5DhB,EAAK,wBAAVuB,OAAIC,GAAA,oKADRtB,EAmBIC,EAAAsB,EAAApB,oFAlBKL,EAAK,WAAVuB,OAAIC,GAAA,EAAA,iHAAJD,+EArFSG,GAAqBC,WACrBC,GAAeD,GACfE,SAAAA,GAAW,GAAKF,SAChBG,GAAeH,GACfI,YAAAA,EAAc,UAAQJ,eACtBK,GAAWL,EAElBM,EAAmB,IAAAC,EACrBC,IACAC,KAcO,SAAAC,EAAmBC,GACtB,GAAAZ,GAAqBA,EAAkBH,OAAS,EAAC,CAC7C,MAAAgB,EAAoBD,EAASE,MACS,GAAxCF,EAASG,YAAY,KAAO,IAAO,IAEnC,GAAAf,IAAsBA,EAAkBgB,SAASC,OAAOJ,WACnD,SAIJ,EAGA,SAAAK,EAAcC,WAEjBjB,GADeiB,EAAW,KAAO,KACTjB,GAyCrB,SAAAkB,EAAWC,GAClBd,EAAae,SAAS,eAAgBD,mTArErCjB,EAAQA,EAiCF,SAAamB,GAChB,IAAAnB,MAAYmB,UAChBnB,EAAMoB,SAAS,CAAAH,EAAMI,KACb,MAAAC,EAAiBf,EAAmBU,EAAKrC,MACzC2C,EAAYT,EAAcG,EAAKO,MACjC,IAAArD,EAAY,GACXmD,IACHnD,EAAY,qBAEToD,IACHpD,EAAY,gBAEV8C,EAAK9C,YACPA,EAAY8C,EAAK9C,WAEdmD,GAAmBC,IAAaN,EAAK9C,YACxC8C,EAAK9C,UAAYA,MAGd6B,EApDUyB,CAAazB,GAAK,wBAClCF,EAAUA,QAAoB4B,oBAExB,SAAWT,GACd,IAAAU,GAAW,gCAmDR,SAAgBV,SACjBK,GAAiB1B,GACnBW,EAAmBU,EAAKrC,MAEtB2C,EAAYT,EAAcG,EAAKO,MAEhC,IAAAF,IAAmBC,SACf,SAGF,EA3DHK,CAAgBX,IAAUA,EAAK9C,UAE9BwD,EAAQE,KAAK,qCADhBF,EAAQE,KAAK,mCAERF,EAAQG,KAAK,cA0EAb,GAAAD,EAAWC"}

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

@@ -0,0 +1,119 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  // @ts-nocheck
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } 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>

package/public/components/header/Header.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a,_ as r,b as i,f as s,s as n,c as d,e as l,d as o,t as c,n as m,g as h,h as b,v as g,j as p,y as u,w as _,x as f,k as x,m as $,o as w,p as y,a0 as k,q as v,r as z,u as j,B as H,C as T,D as N,l as O,z as S,H as B}from"../../index-9ffad6d0.js";import{E as J}from"../../EventHandler-f7ee47ca.js";import E from"../breadcrumb/Breadcrumb.nested.js";import L from"../tabs/Tabs.nested.js";import M from"../badge/Badge.nested.js";function C(e){let t,a,r;return a=new E({props:{items:JSON.stringify(e[17]),nopadding:e[6]}}),a.$on("link-clicked",e[26]),{c(){t=l("div"),H(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};131072&t[0]&&(r.items=JSON.stringify(e[17])),64&t[0]&&(r.nopadding=e[6]),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),N(a)}}}function R(e){let t,a,r,s,n,d=(e[15]?.back||"Back")+"";return{c(){t=l("button"),a=l("span"),r=c(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,l){i(d,t,l),p(t,a),p(a,r),s||(n=O(t,"click",e[19]),s=!0)},p(e,t){32768&t[0]&&d!==(d=(e[15]?.back||"Back")+"")&&x(r,d)},d(e){e&&w(t),s=!1,n()}}}function q(e){let t,a;return{c(){t=l("div"),a=c(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,r){i(e,t,r),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function A(e){let t,a,r;return a=new M({props:{label:e[3],type:e[4]}}),{c(){t=l("div"),H(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};8&t[0]&&(r.label=e[3]),16&t[0]&&(r.type=e[4]),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),N(a)}}}function D(e){let t,a,r=(e[20]?.icons||e[7])&&F(),s=(e[20]?.selector||e[8])&&G(e);return{c(){t=l("div"),r&&r.c(),a=o(),s&&s.c(),h(t,"class","mc-header__right")},m(e,n){i(e,t,n),r&&r.m(t,null),p(t,a),s&&s.m(t,null)},p(e,i){e[20]?.icons||e[7]?r||(r=F(),r.c(),r.m(t,a)):r&&(r.d(1),r=null),e[20]?.selector||e[8]?s?s.p(e,i):(s=G(e),s.c(),s.m(t,null)):s&&(s.d(1),s=null)},d(e){e&&w(t),r&&r.d(),s&&s.d()}}}function F(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){i(e,t,a)},d(e){e&&w(t)}}}function G(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},m(e,a){i(e,t,a)},p(e,a){1048960&a[0]&&g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},d(e){e&&w(t)}}}function I(e){let t,a,r;return a=new L({props:{tabs:JSON.stringify(e[16]),nodivider:!0}}),a.$on("tab-clicked",e[27]),{c(){t=l("div"),H(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};65536&t[0]&&(r.tabs=JSON.stringify(e[16])),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),N(a)}}}function K(e){let t,a,r,s,n,y,k,v,z,j,H,T,N,O=e[5]&&C(e),B=e[14]&&R(e),J=e[1]&&q(e),E=e[3]&&A(e),L=!e[9]&&D(e),M=e[16]&&e[16].length>0&&I(e),F=[{class:T="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[10]],G={};for(let e=0;e<F.length;e+=1)G=d(G,F[e]);return{c(){t=l("div"),a=l("div"),O&&O.c(),r=o(),B&&B.c(),s=o(),n=l("div"),y=l("h1"),k=c(e[0]),v=o(),J&&J.c(),z=o(),E&&E.c(),j=o(),L&&L.c(),H=o(),M&&M.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),b(t,G),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},m(d,l){i(d,t,l),p(t,a),O&&O.m(a,null),p(a,r),B&&B.m(a,null),p(a,s),p(a,n),p(n,y),p(y,k),p(n,v),J&&J.m(n,null),p(n,z),E&&E.m(n,null),p(t,j),L&&L.m(t,null),p(t,H),M&&M.m(t,null),e[28](t),N=!0},p(e,i){e[5]?O?(O.p(e,i),32&i[0]&&u(O,1)):(O=C(e),O.c(),u(O,1),O.m(a,r)):O&&(S(),_(O,1,1,(()=>{O=null})),f()),e[14]?B?B.p(e,i):(B=R(e),B.c(),B.m(a,s)):B&&(B.d(1),B=null),(!N||1&i[0])&&x(k,e[0]),e[1]?J?J.p(e,i):(J=q(e),J.c(),J.m(n,z)):J&&(J.d(1),J=null),e[3]?E?(E.p(e,i),8&i[0]&&u(E,1)):(E=A(e),E.c(),u(E,1),E.m(n,null)):E&&(S(),_(E,1,1,(()=>{E=null})),f()),e[9]?L&&(L.d(1),L=null):L?L.p(e,i):(L=D(e),L.c(),L.m(t,H)),e[16]&&e[16].length>0?M?(M.p(e,i),65536&i[0]&&u(M,1)):(M=I(e),M.c(),u(M,1),M.m(t,null)):M&&(S(),_(M,1,1,(()=>{M=null})),f()),b(t,G=$(F,[(!N||4&i[0]&&T!==(T="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:T},1024&i[0]&&e[10]])),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},i(e){N||(u(O),u(E),u(M),N=!0)},o(e){_(O),_(E),_(M),N=!1},d(a){a&&w(t),O&&O.d(),B&&B.d(),J&&J.d(),E&&E.d(),L&&L.d(),M&&M.d(),e[28](null)}}}function P(e,t,a){let r,i,s,n,l,o;const c=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"];let m=y(t,c),{$$slots:h={},$$scope:b}=t;const g=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:H}=t,{breadcrumb:T}=t,{tabs:N}=t,{noshadow:O}=t,{a11ylabels:S}=t,{scrollcontainer:E}=t,{nopaddingbreadcrumb:L}=t,{hasicons:M}=t,{hasselector:C}=t,{hideoptions:R=!1}=t,q=new J(v(),z()),A=0;function D(){const e=E.scrollTop,t=Number(u.style.marginTop.replace("px",""));A>e?e<u.offsetHeight?a(12,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(12,u.style.marginTop="0",u):e<u.offsetHeight?(a(12,u.style.transition="none",u),a(12,u.style.marginTop=-e+"px",u)):(a(12,u.style.transition="margin-top ease-out 0.4s",u),a(12,u.style.marginTop=-u.offsetHeight-5+"px",u)),A=e}return e.$$set=e=>{t=d(d({},t),j(e)),a(32,m=y(t,c)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(21,H=e.back),"breadcrumb"in e&&a(5,T=e.breadcrumb),"tabs"in e&&a(22,N=e.tabs),"noshadow"in e&&a(23,O=e.noshadow),"a11ylabels"in e&&a(24,S=e.a11ylabels),"scrollcontainer"in e&&a(25,E=e.scrollcontainer),"nopaddingbreadcrumb"in e&&a(6,L=e.nopaddingbreadcrumb),"hasicons"in e&&a(7,M=e.hasicons),"hasselector"in e&&a(8,C=e.hasselector),"hideoptions"in e&&a(9,R=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(17,r="string"==typeof T?JSON.parse(T):T),4194304&e.$$.dirty[0]&&a(16,i="string"==typeof N?JSON.parse(N):N),16777216&e.$$.dirty[0]&&a(15,s="string"==typeof S?JSON.parse(S):S),2097152&e.$$.dirty[0]&&a(14,n=H&&"false"!==H),8388608&e.$$.dirty[0]&&a(13,l=O&&"false"!==O),33554432&e.$$.dirty[0]&&(a(11,p=Boolean(E)),function(e){e&&(e.removeEventListener("scroll",D),e.addEventListener("scroll",D))}(E)),a(10,o=Object.assign({},m)),1024&e.$$.dirty[0]&&delete o.class},[_,f,x,$,w,T,L,M,C,R,o,p,u,l,n,s,i,r,q,function(){q.dispatch("on-back-click",{})},g,H,N,O,S,E,e=>q.dispatch("link-clicked",e.detail),e=>q.dispatch("tab-clicked",e.detail),function(e){B[e?"unshift":"push"]((()=>{u=e,a(12,u)}))}]}class Q extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url(\'<svg xmlns="http://www.w3.org/2000/svg" height="2rem" width="2rem" viewBox="0 0 32 32" fill="#333333"><path d="M28 15H6.41l6.3-6.29a1 1 0 10-1.42-1.42l-8 8a1.15 1.15 0 00-.21.33 1 1 0 000 .76.93.93 0 00.21.33l8 8a1 1 0 001.42 0 1 1 0 000-1.42L6.41 17H28a1 1 0 000-2z"/></svg>\');background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:600;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.4375rem;line-height:1.3913043478}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:r(this)},customElement:!0},P,K,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:21,breadcrumb:5,tabs:22,noshadow:23,a11ylabels:24,scrollcontainer:25,nopaddingbreadcrumb:6,hasicons:7,hasselector:8,hideoptions:9},null,[-1,-1]),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),s()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),s()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),s()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),s()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),s()}get back(){return this.$$.ctx[21]}set back(e){this.$$set({back:e}),s()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),s()}get tabs(){return this.$$.ctx[22]}set tabs(e){this.$$set({tabs:e}),s()}get noshadow(){return this.$$.ctx[23]}set noshadow(e){this.$$set({noshadow:e}),s()}get a11ylabels(){return this.$$.ctx[24]}set a11ylabels(e){this.$$set({a11ylabels:e}),s()}get scrollcontainer(){return this.$$.ctx[25]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),s()}get nopaddingbreadcrumb(){return this.$$.ctx[6]}set nopaddingbreadcrumb(e){this.$$set({nopaddingbreadcrumb:e}),s()}get hasicons(){return this.$$.ctx[7]}set hasicons(e){this.$$set({hasicons:e}),s()}get hasselector(){return this.$$.ctx[8]}set hasselector(e){this.$$set({hasselector:e}),s()}get hideoptions(){return this.$$.ctx[9]}set hideoptions(e){this.$$set({hideoptions:e}),s()}}export{Q as default};
+import{S as e,i as t,a,_ as r,b as i,f as s,s as n,c as d,e as l,d as o,t as c,n as m,g as h,h as b,v as g,j as p,y as u,w as _,x as f,k as x,m as $,o as w,p as y,a0 as k,q as v,r as z,u as j,B as H,C as T,D as N,l as O,z as S,H as B}from"../../index-9ffad6d0.js";import{E as J}from"../../EventHandler-f7ee47ca.js";import E from"../breadcrumb/Breadcrumb.nested.js";import L from"../tabs/Tabs.nested.js";import M from"../badge/Badge.nested.js";function C(e){let t,a,r;return a=new E({props:{items:JSON.stringify(e[17]),nopadding:e[6]}}),a.$on("link-clicked",e[26]),{c(){t=l("div"),H(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};131072&t[0]&&(r.items=JSON.stringify(e[17])),64&t[0]&&(r.nopadding=e[6]),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),N(a)}}}function R(e){let t,a,r,s,n,d=(e[15]?.back||"Back")+"";return{c(){t=l("button"),a=l("span"),r=c(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,l){i(d,t,l),p(t,a),p(a,r),s||(n=O(t,"click",e[19]),s=!0)},p(e,t){32768&t[0]&&d!==(d=(e[15]?.back||"Back")+"")&&x(r,d)},d(e){e&&w(t),s=!1,n()}}}function q(e){let t,a;return{c(){t=l("div"),a=c(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,r){i(e,t,r),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function A(e){let t,a,r;return a=new M({props:{label:e[3],type:e[4]}}),{c(){t=l("div"),H(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};8&t[0]&&(r.label=e[3]),16&t[0]&&(r.type=e[4]),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),N(a)}}}function D(e){let t,a,r=(e[20]?.icons||e[7])&&F(),s=(e[20]?.selector||e[8])&&G(e);return{c(){t=l("div"),r&&r.c(),a=o(),s&&s.c(),h(t,"class","mc-header__right")},m(e,n){i(e,t,n),r&&r.m(t,null),p(t,a),s&&s.m(t,null)},p(e,i){e[20]?.icons||e[7]?r||(r=F(),r.c(),r.m(t,a)):r&&(r.d(1),r=null),e[20]?.selector||e[8]?s?s.p(e,i):(s=G(e),s.c(),s.m(t,null)):s&&(s.d(1),s=null)},d(e){e&&w(t),r&&r.d(),s&&s.d()}}}function F(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){i(e,t,a)},d(e){e&&w(t)}}}function G(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},m(e,a){i(e,t,a)},p(e,a){1048960&a[0]&&g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},d(e){e&&w(t)}}}function I(e){let t,a,r;return a=new L({props:{tabs:JSON.stringify(e[16]),stateless:!1,selectedtab:void 0,nodivider:!0}}),a.$on("tab-clicked",e[27]),{c(){t=l("div"),H(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};65536&t[0]&&(r.tabs=JSON.stringify(e[16])),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),N(a)}}}function K(e){let t,a,r,s,n,y,k,v,z,j,H,T,N,O=e[5]&&C(e),B=e[14]&&R(e),J=e[1]&&q(e),E=e[3]&&A(e),L=!e[9]&&D(e),M=e[16]&&e[16].length>0&&I(e),F=[{class:T="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[10]],G={};for(let e=0;e<F.length;e+=1)G=d(G,F[e]);return{c(){t=l("div"),a=l("div"),O&&O.c(),r=o(),B&&B.c(),s=o(),n=l("div"),y=l("h1"),k=c(e[0]),v=o(),J&&J.c(),z=o(),E&&E.c(),j=o(),L&&L.c(),H=o(),M&&M.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),b(t,G),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},m(d,l){i(d,t,l),p(t,a),O&&O.m(a,null),p(a,r),B&&B.m(a,null),p(a,s),p(a,n),p(n,y),p(y,k),p(n,v),J&&J.m(n,null),p(n,z),E&&E.m(n,null),p(t,j),L&&L.m(t,null),p(t,H),M&&M.m(t,null),e[28](t),N=!0},p(e,i){e[5]?O?(O.p(e,i),32&i[0]&&u(O,1)):(O=C(e),O.c(),u(O,1),O.m(a,r)):O&&(S(),_(O,1,1,(()=>{O=null})),f()),e[14]?B?B.p(e,i):(B=R(e),B.c(),B.m(a,s)):B&&(B.d(1),B=null),(!N||1&i[0])&&x(k,e[0]),e[1]?J?J.p(e,i):(J=q(e),J.c(),J.m(n,z)):J&&(J.d(1),J=null),e[3]?E?(E.p(e,i),8&i[0]&&u(E,1)):(E=A(e),E.c(),u(E,1),E.m(n,null)):E&&(S(),_(E,1,1,(()=>{E=null})),f()),e[9]?L&&(L.d(1),L=null):L?L.p(e,i):(L=D(e),L.c(),L.m(t,H)),e[16]&&e[16].length>0?M?(M.p(e,i),65536&i[0]&&u(M,1)):(M=I(e),M.c(),u(M,1),M.m(t,null)):M&&(S(),_(M,1,1,(()=>{M=null})),f()),b(t,G=$(F,[(!N||4&i[0]&&T!==(T="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:T},1024&i[0]&&e[10]])),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},i(e){N||(u(O),u(E),u(M),N=!0)},o(e){_(O),_(E),_(M),N=!1},d(a){a&&w(t),O&&O.d(),B&&B.d(),J&&J.d(),E&&E.d(),L&&L.d(),M&&M.d(),e[28](null)}}}function P(e,t,a){let r,i,s,n,l,o;const c=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"];let m=y(t,c),{$$slots:h={},$$scope:b}=t;const g=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:H}=t,{breadcrumb:T}=t,{tabs:N}=t,{noshadow:O}=t,{a11ylabels:S}=t,{scrollcontainer:E}=t,{nopaddingbreadcrumb:L}=t,{hasicons:M}=t,{hasselector:C}=t,{hideoptions:R=!1}=t,q=new J(v(),z()),A=0;function D(){const e=E.scrollTop,t=Number(u.style.marginTop.replace("px",""));A>e?e<u.offsetHeight?a(12,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(12,u.style.marginTop="0",u):e<u.offsetHeight?(a(12,u.style.transition="none",u),a(12,u.style.marginTop=-e+"px",u)):(a(12,u.style.transition="margin-top ease-out 0.4s",u),a(12,u.style.marginTop=-u.offsetHeight-5+"px",u)),A=e}return e.$$set=e=>{t=d(d({},t),j(e)),a(32,m=y(t,c)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(21,H=e.back),"breadcrumb"in e&&a(5,T=e.breadcrumb),"tabs"in e&&a(22,N=e.tabs),"noshadow"in e&&a(23,O=e.noshadow),"a11ylabels"in e&&a(24,S=e.a11ylabels),"scrollcontainer"in e&&a(25,E=e.scrollcontainer),"nopaddingbreadcrumb"in e&&a(6,L=e.nopaddingbreadcrumb),"hasicons"in e&&a(7,M=e.hasicons),"hasselector"in e&&a(8,C=e.hasselector),"hideoptions"in e&&a(9,R=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(17,r="string"==typeof T?JSON.parse(T):T),4194304&e.$$.dirty[0]&&a(16,i="string"==typeof N?JSON.parse(N):N),16777216&e.$$.dirty[0]&&a(15,s="string"==typeof S?JSON.parse(S):S),2097152&e.$$.dirty[0]&&a(14,n=H&&"false"!==H),8388608&e.$$.dirty[0]&&a(13,l=O&&"false"!==O),33554432&e.$$.dirty[0]&&(a(11,p=Boolean(E)),function(e){e&&(e.removeEventListener("scroll",D),e.addEventListener("scroll",D))}(E)),a(10,o=Object.assign({},m)),1024&e.$$.dirty[0]&&delete o.class},[_,f,x,$,w,T,L,M,C,R,o,p,u,l,n,s,i,r,q,function(){q.dispatch("on-back-click",{})},g,H,N,O,S,E,e=>q.dispatch("link-clicked",e.detail),e=>q.dispatch("tab-clicked",e.detail),function(e){B[e?"unshift":"push"]((()=>{u=e,a(12,u)}))}]}class Q extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url(\'<svg xmlns="http://www.w3.org/2000/svg" height="2rem" width="2rem" viewBox="0 0 32 32" fill="#333333"><path d="M28 15H6.41l6.3-6.29a1 1 0 10-1.42-1.42l-8 8a1.15 1.15 0 00-.21.33 1 1 0 000 .76.93.93 0 00.21.33l8 8a1 1 0 001.42 0 1 1 0 000-1.42L6.41 17H28a1 1 0 000-2z"/></svg>\');background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:600;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.4375rem;line-height:1.3913043478}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:r(this)},customElement:!0},P,K,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:21,breadcrumb:5,tabs:22,noshadow:23,a11ylabels:24,scrollcontainer:25,nopaddingbreadcrumb:6,hasicons:7,hasselector:8,hideoptions:9},null,[-1,-1]),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),s()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),s()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),s()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),s()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),s()}get back(){return this.$$.ctx[21]}set back(e){this.$$set({back:e}),s()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),s()}get tabs(){return this.$$.ctx[22]}set tabs(e){this.$$set({tabs:e}),s()}get noshadow(){return this.$$.ctx[23]}set noshadow(e){this.$$set({noshadow:e}),s()}get a11ylabels(){return this.$$.ctx[24]}set a11ylabels(e){this.$$set({a11ylabels:e}),s()}get scrollcontainer(){return this.$$.ctx[25]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),s()}get nopaddingbreadcrumb(){return this.$$.ctx[6]}set nopaddingbreadcrumb(e){this.$$set({nopaddingbreadcrumb:e}),s()}get hasicons(){return this.$$.ctx[7]}set hasicons(e){this.$$set({hasicons:e}),s()}get hasselector(){return this.$$.ctx[8]}set hasselector(e){this.$$set({hasselector:e}),s()}get hideoptions(){return this.$$.ctx[9]}set hideoptions(e){this.$$set({hideoptions:e}),s()}}export{Q as default};
 //# sourceMappingURL=Header.js.map

package/public/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { EventHandler } from '../../utilities/EventHandler';\n  import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n  import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n  import Tabs from '../tabs/Tabs.nested.svelte';\n  import type { TabsItems } from '../tabs/tabs.types';\n  import Badge from '../badge/Badge.nested.svelte';\n  import type { BadgeType } from '../badge/badge.types';\n  import type { A11yLabels, HeaderSize } from './Header.types';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let title: string;\n  export let subtitle: string;\n  export let size: HeaderSize = 'm';\n  export let status: string;\n  export let statustype: BadgeType;\n  export let back: boolean | string;\n  export let breadcrumb: string | BreadcrumbItems[];\n  export let tabs: string | TabsItems[];\n  export let noshadow: boolean | string;\n  export let a11ylabels: string | A11yLabels;\n  export let scrollcontainer: HTMLElement;\n  export let nopaddingbreadcrumb: boolean;\n  export let hasicons: boolean;\n  export let hasselector: boolean;\n  export let hideoptions = false;\n\n  const headerAnimationThreshold = 5;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  let originalScrollPos = 0;\n  let hasAnimation: boolean;\n  let root: HTMLElement;\n\n  $: parsedBreadcrumb =\n    typeof breadcrumb === 'string'\n      ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n      : breadcrumb;\n\n  $: parsedTabs =\n    typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n  $: parsedA11yLabels =\n    typeof a11ylabels === 'string'\n      ? (JSON.parse(a11ylabels) as A11yLabels)\n      : a11ylabels;\n\n  $: hasBack = back && back !== 'false';\n  $: hasNoShadow = noshadow && noshadow !== 'false';\n  $: {\n    hasAnimation = Boolean(scrollcontainer);\n    updateAnimation(scrollcontainer);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function goBack() {\n    eventHandler.dispatch('on-back-click', {});\n  }\n\n  function updateAnimation(element: HTMLElement) {\n    if (element) {\n      element.removeEventListener('scroll', handleScroll);\n      element.addEventListener('scroll', handleScroll);\n    }\n  }\n\n  function handleScroll() {\n    const currentScrollPos = scrollcontainer.scrollTop;\n    const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n    if (originalScrollPos > currentScrollPos) {\n      // scroll up\n      if (currentScrollPos < root.offsetHeight) {\n        // scroll while in header zone\n        root.style.marginTop = `${Math.max(\n          -currentScrollPos,\n          originHeaderMargin,\n        )}px`;\n      } else {\n        // scroll while below header zone\n        root.style.marginTop = '0';\n      }\n    } else {\n      // scroll down\n      if (currentScrollPos < root.offsetHeight) {\n        // scroll while in header zone\n\n        root.style.transition = 'none';\n        root.style.marginTop = `${-currentScrollPos}px`;\n      } else {\n        // scroll while below header zone\n        root.style.transition = 'margin-top ease-out 0.4s';\n        root.style.marginTop = `${\n          -root.offsetHeight - headerAnimationThreshold\n        }px`;\n      }\n    }\n\n    originalScrollPos = currentScrollPos;\n  }\n</script>\n\n<div\n  class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n  class:mc-header--no-shadow={hasNoShadow}\n  class:mc-header--animate={hasAnimation}\n  bind:this={root}\n  {...attributes}\n>\n  <div class=\"mc-header__left\">\n    {#if breadcrumb}\n      <div class=\"mc-header__breadcrumb\">\n        <Breadcrumb\n          items={JSON.stringify(parsedBreadcrumb)}\n          nopadding={nopaddingbreadcrumb}\n          on:link-clicked={(event) =>\n            eventHandler.dispatch('link-clicked', event.detail)}\n        />\n      </div>\n    {/if}\n\n    {#if hasBack}\n      <button class=\"mc-header__back\" on:click={goBack}>\n        <span class=\"mc-header__back__label\">\n          {parsedA11yLabels?.['back'] || 'Back'}\n        </span>\n      </button>\n    {/if}\n\n    <div class=\"mc-header__heading\">\n      <h1 class=\"mc-header__heading__title\">\n        {title}\n      </h1>\n      {#if subtitle}\n        <div class=\"mc-header__heading__subtitle\">\n          {subtitle}\n        </div>\n      {/if}\n      {#if status}\n        <div class=\"mc-header__heading__status\">\n          <Badge label={status} type={statustype} />\n        </div>\n      {/if}\n    </div>\n  </div>\n  {#if !hideoptions}\n    <div class=\"mc-header__right\">\n      {#if $$slots?.icons || hasicons}\n        <div class=\"mc-header__icons\">\n          <slot name=\"icons\" />\n        </div>\n      {/if}\n      {#if $$slots?.selector || hasselector}\n        <div\n          class:mc-header__selector--show-separator={($$slots?.icons ||\n            hasicons) &&\n            ($$slots?.selector || hasselector)}\n          class=\"mc-header__selector\"\n        >\n          <slot name=\"selector\" />\n        </div>\n      {/if}\n    </div>\n  {/if}\n  {#if parsedTabs && parsedTabs.length > 0}\n    <div class=\"mc-header__tabs\">\n      <Tabs\n        tabs={JSON.stringify(parsedTabs)}\n        nodivider={true}\n        on:tab-clicked={(event) =>\n          eventHandler.dispatch('tab-clicked', event.detail)}\n      />\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './_c.header';\n\n  :host {\n    display: block;\n    line-height: 0;\n  }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","if_block5","length","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","get_current_component","createEventDispatcher","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { EventHandler } from '../../utilities/EventHandler';\n  import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n  import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n  import Tabs from '../tabs/Tabs.nested.svelte';\n  import type { TabsItems } from '../tabs/tabs.types';\n  import Badge from '../badge/Badge.nested.svelte';\n  import type { BadgeType } from '../badge/badge.types';\n  import type { A11yLabels, HeaderSize } from './Header.types';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let title: string;\n  export let subtitle: string;\n  export let size: HeaderSize = 'm';\n  export let status: string;\n  export let statustype: BadgeType;\n  export let back: boolean | string;\n  export let breadcrumb: string | BreadcrumbItems[];\n  export let tabs: string | TabsItems[];\n  export let noshadow: boolean | string;\n  export let a11ylabels: string | A11yLabels;\n  export let scrollcontainer: HTMLElement;\n  export let nopaddingbreadcrumb: boolean;\n  export let hasicons: boolean;\n  export let hasselector: boolean;\n  export let hideoptions = false;\n\n  const headerAnimationThreshold = 5;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  let originalScrollPos = 0;\n  let hasAnimation: boolean;\n  let root: HTMLElement;\n\n  $: parsedBreadcrumb =\n    typeof breadcrumb === 'string'\n      ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n      : breadcrumb;\n\n  $: parsedTabs =\n    typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n  $: parsedA11yLabels =\n    typeof a11ylabels === 'string'\n      ? (JSON.parse(a11ylabels) as A11yLabels)\n      : a11ylabels;\n\n  $: hasBack = back && back !== 'false';\n  $: hasNoShadow = noshadow && noshadow !== 'false';\n  $: {\n    hasAnimation = Boolean(scrollcontainer);\n    updateAnimation(scrollcontainer);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function goBack() {\n    eventHandler.dispatch('on-back-click', {});\n  }\n\n  function updateAnimation(element: HTMLElement) {\n    if (element) {\n      element.removeEventListener('scroll', handleScroll);\n      element.addEventListener('scroll', handleScroll);\n    }\n  }\n\n  function handleScroll() {\n    const currentScrollPos = scrollcontainer.scrollTop;\n    const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n    if (originalScrollPos > currentScrollPos) {\n      // scroll up\n      if (currentScrollPos < root.offsetHeight) {\n        // scroll while in header zone\n        root.style.marginTop = `${Math.max(\n          -currentScrollPos,\n          originHeaderMargin,\n        )}px`;\n      } else {\n        // scroll while below header zone\n        root.style.marginTop = '0';\n      }\n    } else {\n      // scroll down\n      if (currentScrollPos < root.offsetHeight) {\n        // scroll while in header zone\n\n        root.style.transition = 'none';\n        root.style.marginTop = `${-currentScrollPos}px`;\n      } else {\n        // scroll while below header zone\n        root.style.transition = 'margin-top ease-out 0.4s';\n        root.style.marginTop = `${\n          -root.offsetHeight - headerAnimationThreshold\n        }px`;\n      }\n    }\n\n    originalScrollPos = currentScrollPos;\n  }\n</script>\n\n<div\n  class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n  class:mc-header--no-shadow={hasNoShadow}\n  class:mc-header--animate={hasAnimation}\n  bind:this={root}\n  {...attributes}\n>\n  <div class=\"mc-header__left\">\n    {#if breadcrumb}\n      <div class=\"mc-header__breadcrumb\">\n        <Breadcrumb\n          items={JSON.stringify(parsedBreadcrumb)}\n          nopadding={nopaddingbreadcrumb}\n          on:link-clicked={(event) =>\n            eventHandler.dispatch('link-clicked', event.detail)}\n        />\n      </div>\n    {/if}\n\n    {#if hasBack}\n      <button class=\"mc-header__back\" on:click={goBack}>\n        <span class=\"mc-header__back__label\">\n          {parsedA11yLabels?.['back'] || 'Back'}\n        </span>\n      </button>\n    {/if}\n\n    <div class=\"mc-header__heading\">\n      <h1 class=\"mc-header__heading__title\">\n        {title}\n      </h1>\n      {#if subtitle}\n        <div class=\"mc-header__heading__subtitle\">\n          {subtitle}\n        </div>\n      {/if}\n      {#if status}\n        <div class=\"mc-header__heading__status\">\n          <Badge label={status} type={statustype} />\n        </div>\n      {/if}\n    </div>\n  </div>\n  {#if !hideoptions}\n    <div class=\"mc-header__right\">\n      {#if $$slots?.icons || hasicons}\n        <div class=\"mc-header__icons\">\n          <slot name=\"icons\" />\n        </div>\n      {/if}\n      {#if $$slots?.selector || hasselector}\n        <div\n          class:mc-header__selector--show-separator={($$slots?.icons ||\n            hasicons) &&\n            ($$slots?.selector || hasselector)}\n          class=\"mc-header__selector\"\n        >\n          <slot name=\"selector\" />\n        </div>\n      {/if}\n    </div>\n  {/if}\n  {#if parsedTabs && parsedTabs.length > 0}\n    <div class=\"mc-header__tabs\">\n      <Tabs\n        tabs={JSON.stringify(parsedTabs)}\n        stateless={false}\n        selectedtab={undefined}\n        nodivider={true}\n        on:tab-clicked={(event) =>\n          eventHandler.dispatch('tab-clicked', event.detail)}\n      />\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './_c.header';\n\n  :host {\n    display: block;\n    line-height: 0;\n  }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","undefined","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","if_block5","length","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","get_current_component","createEventDispatcher","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"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"}

package/public/components/header/Header.svelte

@@ -174,6 +174,8 @@
     <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)}

package/public/components/progressbar/ProgressBar.js

@@ -1,2 +1,2 @@
-import{S as e,i as r,a as s,b as a,f as t,s as i,c as n,e as o,n as c,g as l,J as p,h as d,j as m,m as b,o as g,p as u,u as h,t as x,k as v}from"../../index-9ffad6d0.js";function f(e){let r,s,t,i=(e[0]??0)+"";return{c(){r=o("div"),s=x(i),t=x("%"),l(r,"class","mc-progressbar__percentage")},m(e,i){a(e,r,i),m(r,s),m(r,t)},p(e,r){1&r&&i!==(i=(e[0]??0)+"")&&v(s,i)},d(e){e&&g(r)}}}function $(e){let r,s,t,i=e[3]&&f(e),u=[{class:t=e[4](e[3])+" "+e[5].class},e[6]],h={};for(let e=0;e<u.length;e+=1)h=n(h,u[e]);return{c(){r=o("div"),s=o("div"),i&&i.c(),this.c=c,l(s,"class","mc-progressbar__indicator"),l(s,"role","progressbar"),l(s,"aria-valuenow",e[0]),l(s,"aria-valuemin",e[1]),l(s,"aria-valuemax",e[2]),p(s,"width",e[0]+"%"),d(r,h)},m(e,t){a(e,r,t),m(r,s),i&&i.m(s,null)},p(e,[a]){e[3]?i?i.p(e,a):(i=f(e),i.c(),i.m(s,null)):i&&(i.d(1),i=null),1&a&&l(s,"aria-valuenow",e[0]),2&a&&l(s,"aria-valuemin",e[1]),4&a&&l(s,"aria-valuemax",e[2]),1&a&&p(s,"width",e[0]+"%"),d(r,h=b(u,[40&a&&t!==(t=e[4](e[3])+" "+e[5].class)&&{class:t},64&a&&e[6]]))},i:c,o:c,d(e){e&&g(r),i&&i.d()}}}function w(e,r,s){const a=["value","valuemin","valuemax","displaypercentage","size","branded"];let t=u(r,a),{value:i}=r,{valuemin:o=0}=r,{valuemax:c=100}=r,{displaypercentage:l}=r,{size:p="m"}=r,{branded:d}=r;return e.$$set=e=>{s(5,r=n(n({},r),h(e))),s(6,t=u(r,a)),"value"in e&&s(0,i=e.value),"valuemin"in e&&s(1,o=e.valuemin),"valuemax"in e&&s(2,c=e.valuemax),"displaypercentage"in e&&s(3,l=e.displaypercentage),"size"in e&&s(7,p=e.size),"branded"in e&&s(8,d=e.branded)},r=h(r),[i,o,c,l,function(e){const r=["mc-progressbar"];return e&&r.push("mc-progressbar--percent"),i>=51&&r.push("mc-progressbar--half"),"s"===p?r.push("mc-progressbar--s"):"xs"===p&&r.push("mc-progressbar--xs"),d&&r.push("mc-progressbar--branded"),r.join(" ")},r,t,p,d]}class y extends e{constructor(e){super();const n=document.createElement("style");n.textContent='.mc-progressbar{font-family:"LeroyMerlin", sans-serif;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#cfd2d8;display:-webkit-box;display:-ms-flexbox;display:flex;height:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative}.mc-progressbar,.mc-progressbar *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-progressbar,.mc-progressbar__indicator{border-radius:4px;overflow:hidden}.mc-progressbar__indicator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#494f60;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;left:0;min-width:2.3125rem;padding:0.125rem;position:absolute;-webkit-transition:width 0.4s ease;-o-transition:width 0.4s ease;transition:width 0.4s ease;top:0}.mc-progressbar--static .mc-progressbar__indicator{-webkit-transition:none;-o-transition:none;transition:none}.mc-progressbar__percentage{font-size:0.75rem;line-height:1.3333333333;font-weight:600;background-color:#ffffff;border-radius:1rem;color:#494f60;padding:0.125rem 0.5rem}.mc-progressbar:not(.mc-progressbar--percent) .mc-progressbar__percentage{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-progressbar--xs{height:0.125rem}.mc-progressbar--xs,.mc-progressbar--xs .mc-progressbar__indicator{border-radius:1px}.mc-progressbar--s{height:0.25rem}.mc-progressbar--s,.mc-progressbar--s .mc-progressbar__indicator{border-radius:2px}.mc-progressbar--percent{height:1.5rem}.mc-progressbar--percent,.mc-progressbar--percent .mc-progressbar__indicator{border-radius:12px}',this.shadowRoot.appendChild(n),r(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},w,$,i,{value:0,valuemin:1,valuemax:2,displaypercentage:3,size:7,branded:8},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),t()))}static get observedAttributes(){return["value","valuemin","valuemax","displaypercentage","size","branded"]}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),t()}get valuemin(){return this.$$.ctx[1]}set valuemin(e){this.$$set({valuemin:e}),t()}get valuemax(){return this.$$.ctx[2]}set valuemax(e){this.$$set({valuemax:e}),t()}get displaypercentage(){return this.$$.ctx[3]}set displaypercentage(e){this.$$set({displaypercentage:e}),t()}get size(){return this.$$.ctx[7]}set size(e){this.$$set({size:e}),t()}get branded(){return this.$$.ctx[8]}set branded(e){this.$$set({branded:e}),t()}}export{y as default};
+import{S as e,i as r,a as s,b as a,f as t,s as i,c as n,e as o,n as c,g as l,J as p,h as m,j as d,m as g,o as u,p as b,u as x,t as h,k as v}from"../../index-9ffad6d0.js";function f(e){let r,s,t,i=(e[0]??0)+"";return{c(){r=o("div"),s=h(i),t=h("%"),l(r,"class","mc-progressbar__percentage")},m(e,i){a(e,r,i),d(r,s),d(r,t)},p(e,r){1&r&&i!==(i=(e[0]??0)+"")&&v(s,i)},d(e){e&&u(r)}}}function $(e){let r,s,t,i=e[3]&&f(e),b=[{class:t=e[5](e[3])+" "+e[6].class},e[7]],x={};for(let e=0;e<b.length;e+=1)x=n(x,b[e]);return{c(){r=o("div"),s=o("div"),i&&i.c(),this.c=c,l(s,"class","mc-progressbar__indicator"),l(s,"role","progressbar"),l(s,"aria-valuenow",e[0]),l(s,"aria-valuemin",e[1]),l(s,"aria-valuemax",e[2]),p(s,"width",e[4]+"%"),m(r,x)},m(e,t){a(e,r,t),d(r,s),i&&i.m(s,null)},p(e,[a]){e[3]?i?i.p(e,a):(i=f(e),i.c(),i.m(s,null)):i&&(i.d(1),i=null),1&a&&l(s,"aria-valuenow",e[0]),2&a&&l(s,"aria-valuemin",e[1]),4&a&&l(s,"aria-valuemax",e[2]),16&a&&p(s,"width",e[4]+"%"),m(r,x=g(b,[72&a&&t!==(t=e[5](e[3])+" "+e[6].class)&&{class:t},128&a&&e[7]]))},i:c,o:c,d(e){e&&u(r),i&&i.d()}}}function w(e,r,s){let a;const t=["value","valuemin","valuemax","displaypercentage","size"];let i=b(r,t),{value:o}=r,{valuemin:c=0}=r,{valuemax:l=100}=r,{displaypercentage:p}=r,{size:m="m"}=r;return e.$$set=e=>{s(6,r=n(n({},r),x(e))),s(7,i=b(r,t)),"value"in e&&s(0,o=e.value),"valuemin"in e&&s(1,c=e.valuemin),"valuemax"in e&&s(2,l=e.valuemax),"displaypercentage"in e&&s(3,p=e.displaypercentage),"size"in e&&s(8,m=e.size)},e.$$.update=()=>{5&e.$$.dirty&&s(4,a=o>=l?l:o)},r=x(r),[o,c,l,p,a,function(e){const r=["mc-progressbar"];return e&&r.push("mc-progressbar--percent"),"s"===m?r.push("mc-progressbar--s"):"xs"===m&&r.push("mc-progressbar--xs"),r.join(" ")},r,i,m]}class y extends e{constructor(e){super();const n=document.createElement("style");n.textContent='.mc-progressbar{font-family:"LeroyMerlin", sans-serif;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#cfd2d8;display:-webkit-box;display:-ms-flexbox;display:flex;height:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative}.mc-progressbar,.mc-progressbar *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-progressbar,.mc-progressbar__indicator{border-radius:4px;overflow:hidden}.mc-progressbar__indicator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#494f60;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;left:0;min-width:2.3125rem;padding:0.125rem;position:absolute;-webkit-transition:width 0.4s ease;-o-transition:width 0.4s ease;transition:width 0.4s ease;top:0}.mc-progressbar--static .mc-progressbar__indicator{-webkit-transition:none;-o-transition:none;transition:none}.mc-progressbar__percentage{font-size:0.75rem;line-height:1.3333333333;font-weight:600;background-color:#ffffff;border-radius:1rem;color:#494f60;padding:0.125rem 0.5rem}.mc-progressbar:not(.mc-progressbar--percent) .mc-progressbar__percentage{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-progressbar--xs{height:0.125rem}.mc-progressbar--xs,.mc-progressbar--xs .mc-progressbar__indicator{border-radius:1px}.mc-progressbar--s{height:0.25rem}.mc-progressbar--s,.mc-progressbar--s .mc-progressbar__indicator{border-radius:2px}.mc-progressbar--percent{height:1.5rem}.mc-progressbar--percent,.mc-progressbar--percent .mc-progressbar__indicator{border-radius:12px}.mc-progressbar__percentage{min-width:2.0625rem}',this.shadowRoot.appendChild(n),r(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},w,$,i,{value:0,valuemin:1,valuemax:2,displaypercentage:3,size:8},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),t()))}static get observedAttributes(){return["value","valuemin","valuemax","displaypercentage","size"]}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),t()}get valuemin(){return this.$$.ctx[1]}set valuemin(e){this.$$set({valuemin:e}),t()}get valuemax(){return this.$$.ctx[2]}set valuemax(e){this.$$set({valuemax:e}),t()}get displaypercentage(){return this.$$.ctx[3]}set displaypercentage(e){this.$$set({displaypercentage:e}),t()}get size(){return this.$$.ctx[8]}set size(e){this.$$set({size:e}),t()}}export{y as default};
 //# sourceMappingURL=ProgressBar.js.map

package/public/components/progressbar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progressbar/ProgressBar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { ProgressBarSize } from './progressbar.types';\n\n  export let value: number;\n  export let valuemin = 0;\n  export let valuemax = 100;\n  export let displaypercentage: boolean;\n  export let size: ProgressBarSize = 'm';\n  export let branded: boolean;\n\n  function getClasses(displaypercentage: boolean): string {\n    const classes = ['mc-progressbar'];\n\n    if (displaypercentage) {\n      classes.push('mc-progressbar--percent');\n    }\n\n    if (value >= 51) {\n      classes.push('mc-progressbar--half');\n    }\n\n    if (size === 's') {\n      classes.push('mc-progressbar--s');\n    } else if (size === 'xs') {\n      classes.push('mc-progressbar--xs');\n    }\n\n    if (branded) {\n      classes.push('mc-progressbar--branded');\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{getClasses(displaypercentage)} {$$props.class}\" {...$$restProps}>\n  <div\n    class=\"mc-progressbar__indicator\"\n    role=\"progressbar\"\n    aria-valuenow={value}\n    aria-valuemin={valuemin}\n    aria-valuemax={valuemax}\n    style=\"width: {value}%\"\n  >\n    {#if displaypercentage}\n      <div class=\"mc-progressbar__percentage\">{value ?? 0}%</div>\n    {/if}\n    <!--&nbsp;-->\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.progressbar';\n</style>\n"],"names":["t0_value","ctx","insert","target","div","anchor","dirty","set_data","t0","create_if_block","class","div1_class_value","div1","append","div0","value","$$props","valuemin","valuemax","displaypercentage","size","branded","classes","push","join"],"mappings":"kMA+C+CA,GAAAC,MAAS,GAAC,oCAAC,uDAApDC,EAA0DC,EAAAC,EAAAC,yBAAjB,EAAAC,GAAAN,KAAAA,GAAAC,MAAS,GAAC,KAAAM,EAAAC,EAAAR,6CADhDC,EAAiB,IAAAQ,EAAAR,OATbS,MAAAC,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,OAAYT,EAAW,2LAIzDA,EAAK,wBACLA,EAAQ,wBACRA,EAAQ,gBACRA,EAAK,GAAA,oBAPxBC,EAcKC,EAAAS,EAAAP,GAbHQ,EAYKD,EAAAE,4BAJEb,EAAiB,qFALPA,EAAK,6BACLA,EAAQ,6BACRA,EAAQ,qBACRA,EAAK,GAAA,gBAPX,GAAAK,GAAAK,KAAAA,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,QAAK,CAAAA,MAAAC,SAAOV,EAAW,0JAhC/Dc,GAAaC,GACbC,SAAAA,EAAW,GAACD,GACZE,SAAAA,EAAW,KAAGF,qBACdG,GAA0BH,GAC1BI,KAAAA,EAAwB,KAAGJ,WAC3BK,GAAgBL,yRAElB,SAAWG,GACZ,MAAAG,GAAW,yBAEbH,GACFG,EAAQC,KAAK,2BAGXR,GAAS,IACXO,EAAQC,KAAK,wBAGF,MAATH,EACFE,EAAQC,KAAK,qBACK,OAATH,GACTE,EAAQC,KAAK,sBAGXF,GACFC,EAAQC,KAAK,2BAGRD,EAAQE,KAAK"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progressbar/ProgressBar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { ProgressBarSize } from './progressbar.types';\n\n  export let value: number;\n  export let valuemin = 0;\n  export let valuemax = 100;\n  export let displaypercentage: boolean;\n  export let size: ProgressBarSize = 'm';\n\n  $: getWidth = value >= valuemax ? valuemax : value;\n\n  function getClasses(displaypercentage: boolean): string {\n    const classes = ['mc-progressbar'];\n\n    if (displaypercentage) {\n      classes.push('mc-progressbar--percent');\n    }\n\n    if (size === 's') {\n      classes.push('mc-progressbar--s');\n    } else if (size === 'xs') {\n      classes.push('mc-progressbar--xs');\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{getClasses(displaypercentage)} {$$props.class}\" {...$$restProps}>\n  <div\n    class=\"mc-progressbar__indicator\"\n    role=\"progressbar\"\n    aria-valuenow={value}\n    aria-valuemin={valuemin}\n    aria-valuemax={valuemax}\n    style=\"width: {getWidth}%\"\n  >\n    {#if displaypercentage}\n      <div class=\"mc-progressbar__percentage\">{value ?? 0}%</div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.progressbar';\n\n  .mc-progressbar__percentage {\n    min-width: px-to-rem(33);\n  }\n</style>\n"],"names":["t0_value","ctx","insert","target","div","anchor","dirty","set_data","t0","create_if_block","class","div1_class_value","div1","append","div0","value","$$props","valuemin","valuemax","displaypercentage","size","$$invalidate","getWidth","classes","push","join"],"mappings":"kMAwC+CA,GAAAC,MAAS,GAAC,oCAAC,uDAApDC,EAA0DC,EAAAC,EAAAC,yBAAjB,EAAAC,GAAAN,KAAAA,GAAAC,MAAS,GAAC,KAAAM,EAAAC,EAAAR,6CADhDC,EAAiB,IAAAQ,EAAAR,OATbS,MAAAC,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,OAAYT,EAAW,2LAIzDA,EAAK,wBACLA,EAAQ,wBACRA,EAAQ,gBACRA,EAAQ,GAAA,oBAP3BC,EAaKC,EAAAS,EAAAP,GAZHQ,EAWKD,EAAAE,4BAHEb,EAAiB,qFALPA,EAAK,6BACLA,EAAQ,6BACRA,EAAQ,sBACRA,EAAQ,GAAA,gBAPd,GAAAK,GAAAK,KAAAA,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,QAAK,CAAAA,MAAAC,UAAOV,EAAW,sJAzB/Dc,GAAaC,GACbC,SAAAA,EAAW,GAACD,GACZE,SAAAA,EAAW,KAAGF,qBACdG,GAA0BH,GAC1BI,KAAAA,EAAwB,KAAGJ,wQAErCK,EAAA,EAAEC,EAAWP,GAASG,EAAWA,EAAWH,sBAEpC,SAAWI,GACZ,MAAAI,GAAW,yBAEbJ,GACFI,EAAQC,KAAK,2BAGF,MAATJ,EACFG,EAAQC,KAAK,qBACK,OAATJ,GACTG,EAAQC,KAAK,sBAGRD,EAAQE,KAAK"}

package/public/components/progressbar/ProgressBar.svelte

@@ -8,7 +8,8 @@
   export let valuemax = 100;
   export let displaypercentage: boolean;
   export let size: ProgressBarSize = 'm';
-  export let branded: boolean;
+
+  $: getWidth = value >= valuemax ? valuemax : value;
 
   function getClasses(displaypercentage: boolean): string {
     const classes = ['mc-progressbar'];
@@ -17,20 +18,12 @@
       classes.push('mc-progressbar--percent');
     }
 
-    if (value >= 51) {
-      classes.push('mc-progressbar--half');
-    }
-
     if (size === 's') {
       classes.push('mc-progressbar--s');
     } else if (size === 'xs') {
       classes.push('mc-progressbar--xs');
     }
 
-    if (branded) {
-      classes.push('mc-progressbar--branded');
-    }
-
     return classes.join(' ');
   }
 </script>
@@ -42,16 +35,19 @@
     aria-valuenow={value}
     aria-valuemin={valuemin}
     aria-valuemax={valuemax}
-    style="width: {value}%"
+    style="width: {getWidth}%"
   >
     {#if displaypercentage}
       <div class="mc-progressbar__percentage">{value ?? 0}%</div>
     {/if}
-    <!--&nbsp;-->
   </div>
 </div>
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/_all-settings';
   @import '@mozaic-ds/styles/components/c.progressbar';
+
+  .mc-progressbar__percentage {
+    min-width: px-to-rem(33);
+  }
 </style>

package/public/components/tabs/Tabs.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as s,b as a,f as i,s as n,c as l,e as c,n as o,g as r,h as d,j as b,m,o as _,O as f,p,q as u,r as h,u as x,d as g,H as v,t as k,v as w,l as $,k as y,P as A}from"../../index-9ffad6d0.js";import{E as j}from"../../EventHandler-f7ee47ca.js";function O(e,t,s){const a=e.slice();return a[16]=t[s],a[18]=s,a}function E(e){let t,s,i,n,l,o,d,m,f=e[16].text+"";function p(...t){return e[12](e[18],e[16],...t)}return{c(){t=c("button"),s=c("span"),i=k(f),r(s,"class","mc-tabs__text"),r(t,"role","tab"),r(t,"type","button"),r(t,"class","mc-tabs__element"),r(t,"id",n=e[16].id),t.disabled=l=e[16].disabled,r(t,"aria-selected",o=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),d||(m=$(t,"click",p),d=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&y(i,f),256&a&&n!==(n=e[16].id)&&r(t,"id",n),256&a&&l!==(l=e[16].disabled)&&(t.disabled=l),256&a&&o!==(o=e[16].isActive?"true":"false")&&r(t,"aria-selected",o),256&a&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),d=!1,m()}}}function C(e){let t;function s(e,t){return e[16].disabled?L:S}let i=s(e),n=i(e);return{c(){n.c(),t=A()},m(e,s){n.m(e,s),a(e,t,s)},p(e,a){i===(i=s(e))&&n?n.p(e,a):(n.d(1),n=i(e),n&&(n.c(),n.m(t.parentNode,t)))},d(e){n.d(e),e&&_(t)}}}function L(e){let t,s,i,n,l,o=e[16].text+"";return{c(){t=c("span"),s=c("span"),i=k(o),r(s,"class","mc-tabs__text"),r(t,"role","tab"),r(t,"class","mc-tabs__element"),r(t,"id",n=e[16].id),r(t,"aria-selected",l=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i)},p(e,s){256&s&&o!==(o=e[16].text+"")&&y(i,o),256&s&&n!==(n=e[16].id)&&r(t,"id",n),256&s&&l!==(l=e[16].isActive?"true":"false")&&r(t,"aria-selected",l),256&s&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&s&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t)}}}function S(e){let t,s,i,n,l,o,d,m,f=e[16].text+"";function p(...t){return e[11](e[18],e[16],...t)}return{c(){t=c("a"),s=c("span"),i=k(f),r(s,"class","mc-tabs__text"),r(t,"href",n=e[16].href),r(t,"role","tab"),r(t,"class","mc-tabs__element"),r(t,"id",l=e[16].id),r(t,"aria-selected",o=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),d||(m=$(t,"click",p),d=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&y(i,f),256&a&&n!==(n=e[16].href)&&r(t,"href",n),256&a&&l!==(l=e[16].id)&&r(t,"id",l),256&a&&o!==(o=e[16].isActive?"true":"false")&&r(t,"aria-selected",o),256&a&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),d=!1,m()}}}function q(e){let t,s;function i(e,t){return e[16].href?C:E}let n=i(e),l=n(e);return{c(){t=c("li"),l.c(),s=g(),r(t,"class","mc-tabs__item"),r(t,"role","presentation")},m(e,i){a(e,t,i),l.m(t,null),b(t,s)},p(e,a){n===(n=i(e))&&l?l.p(e,a):(l.d(1),l=n(e),l&&(l.c(),l.m(t,s)))},d(e){e&&_(t),l.d()}}}function H(e){let t,s,i,n=e[8],p=[];for(let t=0;t<n.length;t+=1)p[t]=q(O(e,n,t));let u=[{class:i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")},e[6]],h={};for(let e=0;e<u.length;e+=1)h=l(h,u[e]);return{c(){t=c("div"),s=c("ul");for(let e=0;e<p.length;e+=1)p[e].c();this.c=o,r(s,"class","mc-tabs__nav"),r(s,"role","tablist"),r(s,"aria-label",e[1]),d(t,h)},m(i,n){a(i,t,n),b(t,s);for(let e=0;e<p.length;e+=1)p[e]&&p[e].m(s,null);e[13](s)},p(e,[a]){if(816&a){let t;for(n=e[8],t=0;t<n.length;t+=1){const i=O(e,n,t);p[t]?p[t].p(i,a):(p[t]=q(i),p[t].c(),p[t].m(s,null))}for(;t<p.length;t+=1)p[t].d(1);p.length=n.length}2&a&&r(s,"aria-label",e[1]),d(t,h=m(u,[13&a&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":""))&&{class:i},64&a&&e[6]]))},i:o,o:o,d(s){s&&_(t),f(p,s),e[13](null)}}}function N(e,t,s){let a,i;const n=["align","description","nodivider","tabs","type","stateless","selectedtab"];let c,o=p(t,n),{align:r="auto"}=t,{description:d="Tabs"}=t,{nodivider:b=!1}=t,{tabs:m}=t,{type:_="tabs"}=t,{stateless:f=!1}=t,{selectedtab:g}=t,k=new j(u(),h());function w(e,t){const s=e.target;f||(c.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true")),k.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{t=l(l({},t),x(e)),s(15,o=p(t,n)),"align"in e&&s(0,r=e.align),"description"in e&&s(1,d=e.description),"nodivider"in e&&s(2,b=e.nodivider),"tabs"in e&&s(10,m=e.tabs),"type"in e&&s(3,_=e.type),"stateless"in e&&s(4,f=e.stateless),"selectedtab"in e&&s(5,g=e.selectedtab)},e.$$.update=()=>{1024&e.$$.dirty&&s(8,a=m?JSON.parse(m):[]),s(6,i=Object.assign({},o)),64&e.$$.dirty&&delete i.class},[r,d,b,_,f,g,i,c,a,w,m,(e,t,s)=>w(s,Object.assign({index:e},t)),(e,t,s)=>w(s,Object.assign({index:e},t)),function(e){v[e?"unshift":"push"]((()=>{c=e,s(7,c)}))}]}class R extends e{constructor(e){super();const l=document.createElement("style");l.textContent='.mc-tabs{font-family:"LeroyMerlin", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow::after,.mc-tabs--no-divider::after{display:none}.mc-tabs__nav{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav,.mc-tabs__select{position:relative}.mc-tabs__link,.mc-tabs__element{font-size:0.875rem;line-height:1.2857142857;font-weight:600;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link::before,.mc-tabs__element::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link::after,.mc-tabs__element::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link:hover .mc-tabs__text,.mc-tabs__element:hover .mc-tabs__text{background-color:#eeeff1}.mc-tabs__link:active,.mc-tabs__element:active{color:#4d4d4d}.mc-tabs__link:active .mc-tabs__text,.mc-tabs__element:active .mc-tabs__text{background-color:#cfd2d8}.mc-tabs__link:focus::before,.mc-tabs__element:focus::before{-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}.mc-tabs__link--selected,.mc-tabs__element--selected{color:#000000}.mc-tabs__link--selected::after,.mc-tabs__element--selected::after{background-color:#000000}.mc-tabs__link--selected:hover,.mc-tabs__element--selected:hover{color:#000000}.mc-tabs__link--selected:active,.mc-tabs__element--selected:active{color:#000000}.mc-tabs__link--disabled,.mc-tabs__element--disabled{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled,.mc-tabs__link--disabled:hover,.mc-tabs__link--disabled:focus,.mc-tabs__link--disabled:active,.mc-tabs__element--disabled,.mc-tabs__element--disabled:hover,.mc-tabs__element--disabled:focus,.mc-tabs__element--disabled:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs{width:auto}.mc-tabs--full,.mc-tabs--full-centered{width:100%}}@media screen and (max-width: 679px){.mc-tabs:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav{overflow:auto hidden;white-space:nowrap}}',this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},N,H,n,{align:0,description:1,nodivider:2,tabs:10,type:3,stateless:4,selectedtab:5},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["align","description","nodivider","tabs","type","stateless","selectedtab"]}get align(){return this.$$.ctx[0]}set align(e){this.$$set({align:e}),i()}get description(){return this.$$.ctx[1]}set description(e){this.$$set({description:e}),i()}get nodivider(){return this.$$.ctx[2]}set nodivider(e){this.$$set({nodivider:e}),i()}get tabs(){return this.$$.ctx[10]}set tabs(e){this.$$set({tabs:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get stateless(){return this.$$.ctx[4]}set stateless(e){this.$$set({stateless:e}),i()}get selectedtab(){return this.$$.ctx[5]}set selectedtab(e){this.$$set({selectedtab:e}),i()}}export{R as default};
+import{S as e,i as t,a as s,b as a,f as i,s as n,c,e as l,n as o,g as r,h as d,j as b,m,o as _,O as f,p as u,q as p,r as h,u as x,d as g,H as v,t as k,v as w,l as $,k as y,P as A}from"../../index-9ffad6d0.js";import{E as N}from"../../EventHandler-f7ee47ca.js";function j(e,t,s){const a=e.slice();return a[16]=t[s],a[18]=s,a}function C(e){let t,s,i,n,c,o,d,m,f,u=e[16].text+"",p=e[16].iconName&&H(e);function h(...t){return e[12](e[18],e[16],...t)}return{c(){t=l("button"),s=l("span"),p&&p.c(),i=g(),n=k(u),r(s,"class","mc-tabs__text"),r(t,"role","tab"),r(t,"type","button"),r(t,"class","mc-tabs__element"),r(t,"id",c=e[16].id),t.disabled=o=e[16].disabled,r(t,"aria-selected",d=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,c){a(e,t,c),b(t,s),p&&p.m(s,null),b(s,i),b(s,n),m||(f=$(t,"click",h),m=!0)},p(a,l){(e=a)[16].iconName?p?p.p(e,l):(p=H(e),p.c(),p.m(s,i)):p&&(p.d(1),p=null),256&l&&u!==(u=e[16].text+"")&&y(n,u),256&l&&c!==(c=e[16].id)&&r(t,"id",c),256&l&&o!==(o=e[16].disabled)&&(t.disabled=o),256&l&&d!==(d=e[16].isActive?"true":"false")&&r(t,"aria-selected",d),256&l&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&l&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),p&&p.d(),m=!1,f()}}}function L(e){let t;function s(e,t){return e[16].disabled?M:T}let i=s(e),n=i(e);return{c(){n.c(),t=A()},m(e,s){n.m(e,s),a(e,t,s)},p(e,a){i===(i=s(e))&&n?n.p(e,a):(n.d(1),n=i(e),n&&(n.c(),n.m(t.parentNode,t)))},d(e){n.d(e),e&&_(t)}}}function H(e){let t,s=`<${z(e[16].iconName,e[16].iconColor)} />`;return{c(){t=l("span"),r(t,"class","mc-tabs__icon")},m(e,i){a(e,t,i),t.innerHTML=s},p(e,a){256&a&&s!==(s=`<${z(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&_(t)}}}function M(e){let t,s,i,n,c,o,d=e[16].text+"",m=e[16].iconName&&O(e);return{c(){t=l("span"),s=l("span"),m&&m.c(),i=g(),n=k(d),r(s,"class","mc-tabs__text"),r(t,"role","tab"),r(t,"class","mc-tabs__element"),r(t,"id",c=e[16].id),r(t,"aria-selected",o=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,c){a(e,t,c),b(t,s),m&&m.m(s,null),b(s,i),b(s,n)},p(e,a){e[16].iconName?m?m.p(e,a):(m=O(e),m.c(),m.m(s,i)):m&&(m.d(1),m=null),256&a&&d!==(d=e[16].text+"")&&y(n,d),256&a&&c!==(c=e[16].id)&&r(t,"id",c),256&a&&o!==(o=e[16].isActive?"true":"false")&&r(t,"aria-selected",o),256&a&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),m&&m.d()}}}function T(e){let t,s,i,n,c,o,d,m,f,u=e[16].text+"",p=e[16].iconName&&E(e);function h(...t){return e[11](e[18],e[16],...t)}return{c(){t=l("a"),s=l("span"),p&&p.c(),i=g(),n=k(u),r(s,"class","mc-tabs__text"),r(t,"href",c=e[16].href),r(t,"role","tab"),r(t,"class","mc-tabs__element"),r(t,"id",o=e[16].id),r(t,"aria-selected",d=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,c){a(e,t,c),b(t,s),p&&p.m(s,null),b(s,i),b(s,n),m||(f=$(t,"click",h),m=!0)},p(a,l){(e=a)[16].iconName?p?p.p(e,l):(p=E(e),p.c(),p.m(s,i)):p&&(p.d(1),p=null),256&l&&u!==(u=e[16].text+"")&&y(n,u),256&l&&c!==(c=e[16].href)&&r(t,"href",c),256&l&&o!==(o=e[16].id)&&r(t,"id",o),256&l&&d!==(d=e[16].isActive?"true":"false")&&r(t,"aria-selected",d),256&l&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&l&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),p&&p.d(),m=!1,f()}}}function O(e){let t,s=`<${z(e[16].iconName,e[16].iconColor)} />`;return{c(){t=l("span"),r(t,"class","mc-tabs__icon")},m(e,i){a(e,t,i),t.innerHTML=s},p(e,a){256&a&&s!==(s=`<${z(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&_(t)}}}function E(e){let t,s=`<${z(e[16].iconName,e[16].iconColor)} />`;return{c(){t=l("span"),r(t,"class","mc-tabs__icon")},m(e,i){a(e,t,i),t.innerHTML=s},p(e,a){256&a&&s!==(s=`<${z(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&_(t)}}}function S(e){let t,s;function i(e,t){return e[16].href?L:C}let n=i(e),c=n(e);return{c(){t=l("li"),c.c(),s=g(),r(t,"class","mc-tabs__item"),r(t,"role","presentation")},m(e,i){a(e,t,i),c.m(t,null),b(t,s)},p(e,a){n===(n=i(e))&&c?c.p(e,a):(c.d(1),c=n(e),c&&(c.c(),c.m(t,s)))},d(e){e&&_(t),c.d()}}}function q(e){let t,s,i,n=e[8],u=[];for(let t=0;t<n.length;t+=1)u[t]=S(j(e,n,t));let p=[{class:i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")},e[6]],h={};for(let e=0;e<p.length;e+=1)h=c(h,p[e]);return{c(){t=l("div"),s=l("ul");for(let e=0;e<u.length;e+=1)u[e].c();this.c=o,r(s,"class","mc-tabs__nav"),r(s,"role","tablist"),r(s,"aria-label",e[1]),d(t,h)},m(i,n){a(i,t,n),b(t,s);for(let e=0;e<u.length;e+=1)u[e]&&u[e].m(s,null);e[13](s)},p(e,[a]){if(816&a){let t;for(n=e[8],t=0;t<n.length;t+=1){const i=j(e,n,t);u[t]?u[t].p(i,a):(u[t]=S(i),u[t].c(),u[t].m(s,null))}for(;t<u.length;t+=1)u[t].d(1);u.length=n.length}2&a&&r(s,"aria-label",e[1]),d(t,h=m(p,[13&a&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":""))&&{class:i},64&a&&e[6]]))},i:o,o:o,d(s){s&&_(t),f(u,s),e[13](null)}}}function z(e,t){return`${e} size="1.5rem" fill="${t}"`}function R(e,t,s){let a,i;const n=["align","description","nodivider","tabs","type","stateless","selectedtab"];let l,o=u(t,n),{align:r="auto"}=t,{description:d="Tabs"}=t,{nodivider:b=!1}=t,{tabs:m}=t,{type:_="tabs"}=t,{stateless:f=!1}=t,{selectedtab:g}=t,k=new N(p(),h());function w(e,t){const s=e.target;f||(l.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true")),k.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{t=c(c({},t),x(e)),s(15,o=u(t,n)),"align"in e&&s(0,r=e.align),"description"in e&&s(1,d=e.description),"nodivider"in e&&s(2,b=e.nodivider),"tabs"in e&&s(10,m=e.tabs),"type"in e&&s(3,_=e.type),"stateless"in e&&s(4,f=e.stateless),"selectedtab"in e&&s(5,g=e.selectedtab)},e.$$.update=()=>{1024&e.$$.dirty&&s(8,a=m?JSON.parse(m):[]),s(6,i=Object.assign({},o)),64&e.$$.dirty&&delete i.class},[r,d,b,_,f,g,i,l,a,w,m,(e,t,s)=>w(s,Object.assign({index:e},t)),(e,t,s)=>w(s,Object.assign({index:e},t)),function(e){v[e?"unshift":"push"]((()=>{l=e,s(7,l)}))}]}class J extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-tabs{font-family:"LeroyMerlin", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow::after,.mc-tabs--no-divider::after{display:none}.mc-tabs__nav{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav,.mc-tabs__select{position:relative}.mc-tabs__link,.mc-tabs__element{font-size:0.875rem;line-height:1.2857142857;font-weight:600;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link::before,.mc-tabs__element::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link::after,.mc-tabs__element::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link:hover .mc-tabs__text,.mc-tabs__element:hover .mc-tabs__text{background-color:#eeeff1}.mc-tabs__link:active,.mc-tabs__element:active{color:#4d4d4d}.mc-tabs__link:active .mc-tabs__text,.mc-tabs__element:active .mc-tabs__text{background-color:#cfd2d8}.mc-tabs__link:focus::before,.mc-tabs__element:focus::before{-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}.mc-tabs__link--selected,.mc-tabs__element--selected{color:#000000}.mc-tabs__link--selected::after,.mc-tabs__element--selected::after{background-color:#000000}.mc-tabs__link--selected:hover,.mc-tabs__element--selected:hover{color:#000000}.mc-tabs__link--selected:active,.mc-tabs__element--selected:active{color:#000000}.mc-tabs__link--disabled,.mc-tabs__element--disabled{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled,.mc-tabs__link--disabled:hover,.mc-tabs__link--disabled:focus,.mc-tabs__link--disabled:active,.mc-tabs__element--disabled,.mc-tabs__element--disabled:hover,.mc-tabs__element--disabled:focus,.mc-tabs__element--disabled:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs{width:auto}.mc-tabs--full,.mc-tabs--full-centered{width:100%}}@media screen and (max-width: 679px){.mc-tabs:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav{overflow:auto hidden;white-space:nowrap}}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},R,q,n,{align:0,description:1,nodivider:2,tabs:10,type:3,stateless:4,selectedtab:5},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["align","description","nodivider","tabs","type","stateless","selectedtab"]}get align(){return this.$$.ctx[0]}set align(e){this.$$set({align:e}),i()}get description(){return this.$$.ctx[1]}set description(e){this.$$set({description:e}),i()}get nodivider(){return this.$$.ctx[2]}set nodivider(e){this.$$set({nodivider:e}),i()}get tabs(){return this.$$.ctx[10]}set tabs(e){this.$$set({tabs:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get stateless(){return this.$$.ctx[4]}set stateless(e){this.$$set({stateless:e}),i()}get selectedtab(){return this.$$.ctx[5]}set selectedtab(e){this.$$set({selectedtab:e}),i()}}export{J as default};
 //# sourceMappingURL=Tabs.js.map

package/public/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let align: TabsAlign = 'auto';\n  export let description = 'Tabs';\n  export let nodivider = false;\n  export let tabs: string;\n  export let type: TabsType = 'tabs';\n  export let stateless = false;\n  export let selectedtab: string | undefined;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  let tablist: HTMLElement;\n  $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function manageTabs(e: Event, tabItem: TabsItems): void {\n    const currentEl = e.target as HTMLElement;\n    if (stateless) {\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    } else {\n      tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n        el.classList.remove('mc-tabs__element--selected');\n        el.setAttribute('aria-selected', 'false');\n      });\n\n      currentEl.classList.add('mc-tabs__element--selected');\n      currentEl.setAttribute('aria-selected', 'true');\n\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    }\n  }\n</script>\n\n<div\n  class=\"mc-tabs\n  {align && align === 'full' ? ' mc-tabs--full' : ''}\n  {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n  {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n  {...attributes}\n>\n  <ul\n    class=\"mc-tabs__nav\"\n    bind:this={tablist}\n    role=\"tablist\"\n    aria-label={description}\n  >\n    {#each parsedTabs as tab, index}\n      <li class=\"mc-tabs__item\" role=\"presentation\">\n        {#if tab.href}\n          {#if !tab.disabled}\n            <a\n              href={tab.href}\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n              on:click={(event) =>\n                manageTabs(event, Object.assign({ index: index }, tab))}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </a>\n          {:else}\n            <span\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </span>\n          {/if}\n        {:else}\n          <button\n            role=\"tab\"\n            type=\"button\"\n            class=\"mc-tabs__element\"\n            class:mc-tabs__element--disabled={tab.disabled}\n            class:mc-tabs__element--selected={stateless\n              ? tab.id == selectedtab\n              : tab.isActive}\n            id={tab.id}\n            disabled={tab.disabled}\n            aria-selected={tab.isActive ? 'true' : 'false'}\n            on:click={(event) =>\n              manageTabs(event, Object.assign({ index: index }, tab))}\n          >\n            <span class=\"mc-tabs__text\">\n              {tab.text}\n            </span>\n          </button>\n        {/if}\n      </li>\n    {/each}\n  </ul>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t_value","ctx","text","attr","button","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","toggle_class","insert","target","anchor","append","span","dirty","set_data","t","create_if_block_1","span1","span1_id_value","span1_aria_selected_value","span0","a","a_href_value","href","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","class","div_class_value","tablist","align","$$props","description","nodivider","tabs","type","stateless","selectedtab","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","attributes","$$restProps","event","index","tab","$$value"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let align: TabsAlign = 'auto';\n  export let description = 'Tabs';\n  export let nodivider = false;\n  export let tabs: string;\n  export let type: TabsType = 'tabs';\n  export let stateless = false;\n  export let selectedtab: string | undefined;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  let tablist: HTMLElement;\n  $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function manageTabs(e: Event, tabItem: TabsItems): void {\n    const currentEl = e.target as HTMLElement;\n    if (stateless) {\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    } else {\n      tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n        el.classList.remove('mc-tabs__element--selected');\n        el.setAttribute('aria-selected', 'false');\n      });\n\n      currentEl.classList.add('mc-tabs__element--selected');\n      currentEl.setAttribute('aria-selected', 'true');\n\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    }\n  }\n\n  function generateIconName(iconName: string, iconColor: string): string {\n    return `${iconName} size=\"1.5rem\" fill=\"${iconColor}\"`;\n  }\n</script>\n\n<div\n  class=\"mc-tabs\n  {align && align === 'full' ? ' mc-tabs--full' : ''}\n  {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n  {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n  {...attributes}\n>\n  <ul\n    class=\"mc-tabs__nav\"\n    bind:this={tablist}\n    role=\"tablist\"\n    aria-label={description}\n  >\n    {#each parsedTabs as tab, index}\n      <li class=\"mc-tabs__item\" role=\"presentation\">\n        {#if tab.href}\n          {#if !tab.disabled}\n            <a\n              href={tab.href}\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n              on:click={(event) =>\n                manageTabs(event, Object.assign({ index: index }, tab))}\n            >\n              <span class=\"mc-tabs__text\">\n                {#if tab.iconName}\n                  <span class=\"mc-tabs__icon\"\n                    >{@html `<${generateIconName(\n                      tab.iconName,\n                      tab.iconColor,\n                    )} />`}</span\n                  >\n                {/if}\n                {tab.text}\n              </span>\n            </a>\n          {:else}\n            <span\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n            >\n              <span class=\"mc-tabs__text\">\n                {#if tab.iconName}\n                  <span class=\"mc-tabs__icon\"\n                    >{@html `<${generateIconName(\n                      tab.iconName,\n                      tab.iconColor,\n                    )} />`}</span\n                  >\n                {/if}\n                {tab.text}\n              </span>\n            </span>\n          {/if}\n        {:else}\n          <button\n            role=\"tab\"\n            type=\"button\"\n            class=\"mc-tabs__element\"\n            class:mc-tabs__element--disabled={tab.disabled}\n            class:mc-tabs__element--selected={stateless\n              ? tab.id == selectedtab\n              : tab.isActive}\n            id={tab.id}\n            disabled={tab.disabled}\n            aria-selected={tab.isActive ? 'true' : 'false'}\n            on:click={(event) =>\n              manageTabs(event, Object.assign({ index: index }, tab))}\n          >\n            <span class=\"mc-tabs__text\">\n              {#if tab.iconName}\n                <span class=\"mc-tabs__icon\"\n                  >{@html `<${generateIconName(\n                    tab.iconName,\n                    tab.iconColor,\n                  )} />`}</span\n                >\n              {/if}\n              {tab.text}\n            </span>\n          </button>\n        {/if}\n      </li>\n    {/each}\n  </ul>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t1_value","ctx","text","if_block","iconName","create_if_block_4","attr","button","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","toggle_class","insert","target","anchor","append","span","dirty","set_data","t1","create_if_block_1","raw_value","generateIconName","iconColor","innerHTML","create_if_block_3","span1","span1_id_value","span1_aria_selected_value","span0","create_if_block_2","a","a_href_value","href","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","class","div_class_value","tablist","align","$$props","description","nodivider","tabs","type","stateless","selectedtab","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","attributes","$$restProps","event","index","tab","$$value"],"mappings":"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"}