@mozaic-ds/web-components 0.11.0 → 0.12.0-beta.0

package/public/components/sidebar/sidebar-user.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-user.nested.js","sources":["../../../src/components/sidebar/sidebar-user.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import {\n    isSidebarOpen,\n    selectFeature,\n    toggleSidebar,\n  } from './sidebar-service';\n  import type { User, Feature, A11yLabels } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n\n  export let user: User;\n  export let data: Feature[];\n  export let a11yLabels: A11yLabels;\n\n  let content: HTMLElement;\n  let isExpanded = false;\n\n  $: updateContentCSS(isExpanded, $isSidebarOpen);\n\n  // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n  function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n    if (content) {\n      content.style.height = '';\n      content.style.transition = 'none';\n      const startHeight = window.getComputedStyle(content).height;\n\n      content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n      content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n      const height = window.getComputedStyle(content).height;\n      content.style.height = startHeight;\n\n      // wait until the next frame so that everything has time to update before starting the transition\n      requestAnimationFrame(() => {\n        content.style.transition = '';\n        requestAnimationFrame(() => {\n          content.style.height = height;\n        });\n      });\n\n      // Clear the saved height values after the transition\n      const handler = () => {\n        content.style.height = '';\n        content.removeEventListener('transitionend', handler);\n      };\n\n      content.addEventListener('transitionend', handler);\n    }\n  }\n\n  function toggle(): void {\n    if (!$isSidebarOpen) {\n      toggleSidebar(true);\n      isExpanded = true;\n    } else {\n      isExpanded = !isExpanded;\n    }\n  }\n\n  function capitalizeTheFirstLetterOfEachWord(words: string): string {\n    let separateWord: string[] = words.toLowerCase().split(' ');\n    for (let i = 0; i < separateWord.length; i++) {\n      separateWord[i] =\n        separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1);\n    }\n    return separateWord.join(' ');\n  }\n\n  function handleClick(feature: Feature) {\n    if (!feature.disabled) {\n      selectFeature(feature.code);\n    }\n  }\n</script>\n\n{#if user}\n  <!-- svelte-ignore a11y-click-events-have-key-events -->\n  <div\n    class=\"mc-sidebar-user {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n    on:click={toggle}\n  >\n    <button\n      aria-expanded={$isSidebarOpen && isExpanded}\n      class=\"mc-sidebar-user__header\"\n      aria-label={$isSidebarOpen && isExpanded\n        ? a11yLabels?.['close-user'] || 'Close the user sub menu'\n        : a11yLabels?.['open-user'] || 'Open the user sub menu'}\n      aria-controls=\"user-content\"\n      id=\"user-trigger\"\n    >\n      <span class=\"mc-sidebar-user__header__picture\">\n        {#if user.imageBase64}\n          <img\n            class=\"base64\"\n            style=\"display:block; width:auto; height:48px; max-width:48px;\"\n            aria-hidden\n            alt=\"User Picture\"\n            src=\"data:image/png;base64, {user.imageBase64}\"\n          />\n        {:else}\n          <svg\n            class=\"mc-sidebar-user__icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z\"\n            /></svg\n          >\n        {/if}\n      </span>\n      {#if $isSidebarOpen}\n        <p class=\"mc-sidebar-user__header__information\">\n          <span class=\"mc-sidebar-user__header__information__identity\">\n            {user?.firstName || ''}\n            {user?.lastName || ''}\n          </span>\n          {#if user?.title}\n            <span class=\"mc-sidebar-user__header__information__title\">\n              {capitalizeTheFirstLetterOfEachWord(user.title)}\n            </span>\n          {/if}\n        </p>\n        {#if data?.length}\n          <span class=\"mc-sidebar-user__header__information__icon\">\n            {#if $isSidebarOpen && !isExpanded}\n              <svg\n                class=\"mc-sidebar-user__icon\"\n                width=\"16px\"\n                height=\"16px\"\n                viewBox=\"0 0 16 16\"\n                ><path\n                  d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n                /></svg\n              >\n            {:else}\n              <svg\n                width=\"16px\"\n                height=\"16px\"\n                class=\"mc-sidebar-user__icon\"\n                viewBox=\"0 0 16 16\"\n                ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n              >\n            {/if}\n          </span>\n        {/if}\n      {/if}\n    </button>\n    {#if data?.length}\n      <ul\n        aria-hidden={!$isSidebarOpen || !isExpanded}\n        class=\"mc-sidebar-user__content is-close\"\n        id=\"user-content\"\n        bind:this={content}\n      >\n        {#each data as feature}\n          <!-- svelte-ignore a11y-click-events-have-key-events -->\n          <li on:click|stopPropagation={() => handleClick(feature)}>\n            <FeatureComponent {feature} {a11yLabels} />\n          </li>\n        {/each}\n      </ul>\n    {/if}\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar-user {\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n    background: $color-sidebar-user-background;\n\n    &__header {\n      display: flex;\n      align-items: center;\n      background: none;\n      border: none;\n      color: $color-sidebar-text-color;\n      font-size: inherit;\n      font-family: inherit;\n      text-align: initial;\n      margin: 0;\n      width: 100%;\n      overflow: hidden;\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        border-radius: 12px;\n        outline: 1px solid #0b96cc;\n        outline-offset: -5px;\n      }\n\n      &:hover {\n        cursor: pointer;\n\n        .mc-sidebar-user__header__information__icon {\n          background: $color-sidebar-feature-hover-background;\n        }\n      }\n\n      &__picture {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: $color-grey;\n        border-radius: 24px;\n        width: 48px;\n        min-width: 48px;\n        height: 48px;\n        overflow: hidden;\n        img {\n          display: block;\n        }\n      }\n\n      &__information {\n        justify-content: space-around;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        margin: 0;\n        margin-left: 8px;\n        height: 40px;\n        &__icon {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          border-radius: 4px;\n        }\n\n        &__identity {\n          font-size: 16px;\n          font-weight: bold;\n        }\n\n        &__title,\n        &__identity {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          max-width: 176px;\n        }\n      }\n    }\n\n    &__icon {\n      fill: $color-sidebar-icon;\n    }\n\n    &__content {\n      list-style-type: none;\n      padding: 0;\n      overflow: hidden;\n      margin: -8px 0px 24px 0px;\n      @include transition(all 300ms ease-in-out);\n\n      &.is-close {\n        height: 0;\n        margin: 0;\n      }\n\n      .is-open {\n        height: auto;\n      }\n    }\n\n    &.is-close {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 8px;\n        margin: 8px 0;\n      }\n    }\n\n    &.is-open {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 24px 12px 32px;\n        margin: 8px 0;\n      }\n    }\n  }\n</style>\n"],"names":["ctx","imageBase64","create_if_block_6","create_if_block_2","if_block2","length","create_if_block_1","attr","button","button_aria_expanded_value","button_aria_label_value","insert","target","div","anchor","append","span","current","dirty","svg","path","src_url_equal","img","src","img_src_value","firstName","lastName","if_block0","title","create_if_block_5","if_block1","create_if_block_3","p","set_data","t0","t0_value","t2","t2_value","capitalizeTheFirstLetterOfEachWord","t","t_value","create_if_block_4","i","ul","ul_aria_hidden_value","each_blocks","li","create_if_block","words","separateWord","toLowerCase","split","charAt","toUpperCase","substring","join","content","user","$$props","data","a11yLabels","isExpanded","handleClick","feature","disabled","selectFeature","code","isOpen","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$isSidebarOpen","toggleSidebar","$$value"],"mappings":"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"}
+{"version":3,"file":"sidebar-user.nested.js","sources":["../../../src/components/sidebar/sidebar-user.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import {\n    isSidebarOpen,\n    selectFeature,\n    toggleSidebar,\n  } from './sidebar-service';\n  import type { User, Feature, A11yLabels } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n\n  export let user: User;\n  export let data: Feature[];\n  export let a11yLabels: A11yLabels;\n\n  let content: HTMLElement;\n  let isExpanded = false;\n\n  $: updateContentCSS(isExpanded, $isSidebarOpen);\n\n  // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n  function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n    if (content) {\n      content.style.height = '';\n      content.style.transition = 'none';\n      const startHeight = window.getComputedStyle(content).height;\n\n      content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n      content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n      const height = window.getComputedStyle(content).height;\n      content.style.height = startHeight;\n\n      // wait until the next frame so that everything has time to update before starting the transition\n      requestAnimationFrame(() => {\n        content.style.transition = '';\n        requestAnimationFrame(() => {\n          content.style.height = height;\n        });\n      });\n\n      // Clear the saved height values after the transition\n      const handler = () => {\n        content.style.height = '';\n        content.removeEventListener('transitionend', handler);\n      };\n\n      content.addEventListener('transitionend', handler);\n    }\n  }\n\n  function toggle(): void {\n    if (!$isSidebarOpen) {\n      toggleSidebar(true);\n      isExpanded = true;\n    } else {\n      isExpanded = !isExpanded;\n    }\n  }\n\n  function capitalizeTheFirstLetterOfEachWord(words: string): string {\n    let separateWord: string[] = words.toLowerCase().split(' ');\n    for (let i = 0; i < separateWord.length; i++) {\n      separateWord[i] =\n        separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1);\n    }\n    return separateWord.join(' ');\n  }\n\n  function handleClick(feature: Feature) {\n    if (!feature.disabled) {\n      selectFeature(feature.code);\n    }\n  }\n</script>\n\n{#if user}\n  <!-- svelte-ignore a11y-click-events-have-key-events -->\n  <div\n    class=\"mc-sidebar-user {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n    on:click={toggle}\n  >\n    <button\n      aria-expanded={$isSidebarOpen && isExpanded}\n      class=\"mc-sidebar-user__header\"\n      aria-label={$isSidebarOpen && isExpanded\n        ? a11yLabels?.['close-user'] || 'Close the user sub menu'\n        : a11yLabels?.['open-user'] || 'Open the user sub menu'}\n      aria-controls=\"user-content\"\n    >\n      <span class=\"mc-sidebar-user__header__picture\">\n        {#if user.imageBase64}\n          <img\n            class=\"base64\"\n            style=\"display:block; width:auto; height:48px; max-width:48px;\"\n            aria-hidden\n            alt=\"User Picture\"\n            src=\"data:image/png;base64, {user.imageBase64}\"\n          />\n        {:else}\n          <svg\n            class=\"mc-sidebar-user__icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z\"\n            /></svg\n          >\n        {/if}\n      </span>\n      {#if $isSidebarOpen}\n        <p class=\"mc-sidebar-user__header__information\">\n          <span class=\"mc-sidebar-user__header__information__identity\">\n            {user?.firstName || ''}\n            {user?.lastName || ''}\n          </span>\n          {#if user?.title}\n            <span class=\"mc-sidebar-user__header__information__title\">\n              {capitalizeTheFirstLetterOfEachWord(user.title)}\n            </span>\n          {/if}\n        </p>\n        {#if data?.length}\n          <span class=\"mc-sidebar-user__header__information__icon\">\n            {#if $isSidebarOpen && !isExpanded}\n              <svg\n                class=\"mc-sidebar-user__icon\"\n                width=\"16px\"\n                height=\"16px\"\n                viewBox=\"0 0 16 16\"\n                ><path\n                  d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n                /></svg\n              >\n            {:else}\n              <svg\n                width=\"16px\"\n                height=\"16px\"\n                class=\"mc-sidebar-user__icon\"\n                viewBox=\"0 0 16 16\"\n                ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n              >\n            {/if}\n          </span>\n        {/if}\n      {/if}\n    </button>\n    {#if data?.length}\n      <ul\n        aria-hidden={!$isSidebarOpen || !isExpanded}\n        class=\"mc-sidebar-user__content is-close\"\n        id=\"user-content\"\n        bind:this={content}\n      >\n        {#each data as feature}\n          <!-- svelte-ignore a11y-click-events-have-key-events -->\n          <li on:click|stopPropagation={() => handleClick(feature)}>\n            <FeatureComponent {feature} {a11yLabels} />\n          </li>\n        {/each}\n      </ul>\n    {/if}\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar-user {\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n    background: $color-sidebar-user-background;\n\n    &__header {\n      display: flex;\n      align-items: center;\n      background: none;\n      border: none;\n      color: $color-sidebar-text-color;\n      font-size: inherit;\n      font-family: inherit;\n      text-align: initial;\n      margin: 0;\n      width: 100%;\n      overflow: hidden;\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        border-radius: 12px;\n        outline: 1px solid #0b96cc;\n        outline-offset: -5px;\n      }\n\n      &:hover {\n        cursor: pointer;\n\n        .mc-sidebar-user__header__information__icon {\n          background: $color-sidebar-feature-hover-background;\n        }\n      }\n\n      &__picture {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: $color-grey;\n        border-radius: 24px;\n        width: 48px;\n        min-width: 48px;\n        height: 48px;\n        overflow: hidden;\n        img {\n          display: block;\n        }\n      }\n\n      &__information {\n        justify-content: space-around;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        margin: 0;\n        margin-left: 8px;\n        height: 40px;\n        &__icon {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          border-radius: 4px;\n        }\n\n        &__identity {\n          font-size: 16px;\n          font-weight: bold;\n        }\n\n        &__title,\n        &__identity {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          max-width: 176px;\n        }\n      }\n    }\n\n    &__icon {\n      fill: $color-sidebar-icon;\n    }\n\n    &__content {\n      list-style-type: none;\n      padding: 0;\n      overflow: hidden;\n      margin: -8px 0px 24px 0px;\n      @include transition(all 300ms ease-in-out);\n\n      &.is-close {\n        height: 0;\n        margin: 0;\n      }\n\n      .is-open {\n        height: auto;\n      }\n    }\n\n    &.is-close {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 8px;\n        margin: 8px 0;\n      }\n    }\n\n    &.is-open {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 24px 12px 32px;\n        margin: 8px 0;\n      }\n    }\n  }\n</style>\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.types.ts"],"names":[],"mappings":"AAAA,qBAAa,OAAO;IAClB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,OAAQ,SAAQ,OAAO;IACtC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,EAAE,CAAC;CAClB;AAMD,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;CACzC;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC;IACvB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,EAAE,OAAO,EAAE,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAAG;KACtB,GAAG,IACA,MAAM,GACN,OAAO,GACP,sBAAsB,GACtB,WAAW,GACX,YAAY,GAAG,MAAM;CAC1B,CAAC"}
+{"version":3,"file":"sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.types.ts"],"names":[],"mappings":"AAAA,qBAAa,OAAO;IAClB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,OAAQ,SAAQ,OAAO;IACtC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,EAAE,CAAC;CAClB;AAMD,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC1C;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC;IACvB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,EAAE,OAAO,EAAE,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAAG;KACtB,GAAG,IACA,MAAM,GACN,OAAO,GACP,sBAAsB,GACtB,WAAW,GACX,YAAY,GAAG,MAAM;CAC1B,CAAC"}

package/public/components/sidebar-user/sidebar-user.nested.svelte

@@ -87,7 +87,6 @@
         ? a11yLabels?.['close-user'] || 'Close the user sub menu'
         : a11yLabels?.['open-user'] || 'Open the user sub menu'}
       aria-controls="user-content"
-      id="user-trigger"
     >
       <span class="mc-sidebar-user__header__picture">
         {#if user.imageBase64}

package/public/components/starsinput/StarsInput.svelte

@@ -1,8 +1,8 @@
-<svelte:options tag={null} />
+<svelte:options tag="m-stars-input" />
 
 <script lang="ts">
   import type { RatingsSize } from './ratings.types';
-  import { EventHandler } from '../../utilities/EventHandler';
+
   const ratingValue = 5;
   export let unselectedText = 'No opinion given';
   export let name = 'rating';
@@ -15,7 +15,6 @@
     'Excellent',
   ];
 
-  let eventHandler = new EventHandler();
   function setClasses(size: RatingsSize): string {
     const mainClass = 'mc-stars-input';
 
@@ -25,10 +24,6 @@
   function setInputId(name: string, index: number): string {
     return `${name}${index + 1}`;
   }
-
-  function selectStar(i: number) {
-    eventHandler.dispatch('star-selected', i + 1);
-  }
 </script>
 
 <div class={setClasses(size)} {...$$restProps}>
@@ -51,12 +46,10 @@
       class="mc-stars-input__radio"
     />
 
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <label
       for={setInputId(name, i)}
       title={ratinglabels[i]}
       class="mc-stars-input__label"
-      on:click={() => selectStar(i)}
     >
       <span class="mc-stars-input__text">
         {ratinglabels[i]}

package/public/components/stepper/Stepper.js

@@ -1,2 +1,372 @@
-import{S as e,i as t,a as r,b as i,f as s,s as p,c,e as o,n as a,g as n,h as m,j as l,m as d,o as _,J as b,p as f,q as h,d as u,t as x,l as g,k}from"../../index-c33b3772.js";import{E as w}from"../../EventHandler-02058705.js";function v(e,t,r){const i=e.slice();return i[10]=t[r],i[12]=r,i}function y(e){let t,r,s=e[12]+1+"";return{c(){t=o("span"),r=x(s)},m(e,s){i(e,t,s),l(t,r)},d(e){e&&_(t)}}}function $(e){let t;return{c(){t=o("div"),t.innerHTML='<navigation-notification-available-16px name="NotificationAvailable16" size="100%"></navigation-notification-available-16px>',n(t,"class","mc-stepper__icon")},m(e,r){i(e,t,r)},d(e){e&&_(t)}}}function z(e){let t,r,s,p,c,a,m,d,b,f,h,w,v,z,C=e[4](e[12],e[2])+"",j=e[10].label+"";function E(e,t){return 4&t&&(s=null),null==s&&(s=!!e[3](e[12],e[2])),s?$:e[10].isCurrent?y:void 0}let L=E(e,-1),A=L&&L(e);function D(){return e[7](e[10])}return{c(){t=o("li"),r=o("div"),A&&A.c(),p=u(),c=o("div"),a=o("span"),m=x(C),d=u(),b=o("span"),f=x(j),h=u(),n(r,"class","mc-stepper__indicator"),n(r,"aria-hidden","true"),n(a,"class","mc-stepper__title"),n(b,"class","mc-stepper__label"),n(c,"class","mc-stepper__detail"),n(t,"class",w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))},m(e,s){i(e,t,s),l(t,r),A&&A.m(r,null),l(t,p),l(t,c),l(c,a),l(a,m),l(c,d),l(c,b),l(b,f),l(t,h),v||(z=g(t,"click",D),v=!0)},p(i,s){L!==(L=E(e=i,s))&&(A&&A.d(1),A=L&&L(e),A&&(A.c(),A.m(r,null))),4&s&&C!==(C=e[4](e[12],e[2])+"")&&k(m,C),4&s&&j!==(j=e[10].label+"")&&k(f,j),4&s&&w!==(w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))&&n(t,"class",w)},d(e){e&&_(t),A&&A.d(),v=!1,z()}}}function C(e){let t,r,s,p=e[2],f=[];for(let t=0;t<p.length;t+=1)f[t]=z(v(e,p,t));let h=[{class:s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":"")},{"aria-label":"accessibilityLabels.stepperDescription"},e[1]],u={};for(let e=0;e<h.length;e+=1)u=c(u,h[e]);return{c(){t=o("nav"),r=o("ol");for(let e=0;e<f.length;e+=1)f[e].c();this.c=a,n(r,"class","mc-stepper__list"),m(t,u)},m(e,s){i(e,t,s),l(t,r);for(let e=0;e<f.length;e+=1)f[e]&&f[e].m(r,null)},p(e,[i]){if(60&i){let t;for(p=e[2],t=0;t<p.length;t+=1){const s=v(e,p,t);f[t]?f[t].p(s,i):(f[t]=z(s),f[t].c(),f[t].m(r,null))}for(;t<f.length;t+=1)f[t].d(1);f.length=p.length}m(t,u=d(h,[5&i&&s!==(s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":""))&&{class:s},{"aria-label":"accessibilityLabels.stepperDescription"},2&i&&e[1]]))},i:a,o:a,d(e){e&&_(t),b(f,e)}}}function j(e,t,r){let i,s;const p=["steps","compact"];let o=f(t,p),{steps:a}=t,{compact:n=!1}=t,m=new w;function l(e){m.dispatch("step-changed",e)}return e.$$set=e=>{t=c(c({},t),h(e)),r(9,o=f(t,p)),"steps"in e&&r(6,a=e.steps),"compact"in e&&r(0,n=e.compact)},e.$$.update=()=>{64&e.$$.dirty&&r(2,i=a?JSON.parse(a):[]),r(1,s=Object.assign({},o)),2&e.$$.dirty&&delete s.class},[n,s,i,function(e,t){return e<t.findIndex((e=>e.isCurrent))},function(e,t){return`${e+1} / ${t.length}`},l,a,e=>l(e)]}class E extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-stepper{width:100%}.mc-stepper__list{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-stepper__item{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.mc-stepper__item::before,.mc-stepper__item::after{background-color:#999999;content:"";height:0.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item::before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item::after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item:first-child::before,.mc-stepper__item:last-child::after{content:none}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#46a610}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:600}.mc-stepper__item--current::before{background-color:#46a610}.mc-stepper__item--current .mc-stepper__indicator{background-color:#46a610;color:#ffffff}.mc-stepper__item--current .mc-stepper__label{color:#000000}.mc-stepper__item--validated::before,.mc-stepper__item--validated:not(.mc-stepper__item--current)::after{background-color:#46a610}.mc-stepper__link{height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#46a610}.mc-stepper__indicator{font-size:0.875rem;line-height:1.1428571429;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:2px solid #999999;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#46a610;max-width:100%}.mc-stepper__detail{font-size:0.875rem;line-height:1.2857142857;color:#666666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#46a610}.mc-stepper--compact .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item::before,.mc-stepper--compact .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--compact .mc-stepper__item::after{width:100%}.mc-stepper--compact .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:0.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item::before,.mc-stepper--shrinked .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item::after{width:100%}.mc-stepper--shrinked .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:0.25rem}}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},j,C,p,{steps:6,compact:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["steps","compact"]}get steps(){return this.$$.ctx[6]}set steps(e){this.$$set({steps:e}),s()}get compact(){return this.$$.ctx[0]}set compact(e){this.$$set({compact:e}),s()}}export{E as default};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, c as assign, e as element, n as noop, g as attr, h as set_attributes, j as append, m as get_spread_update, o as detach, J as destroy_each, p as compute_rest_props, q as exclude_internal_props, d as space, t as text, l as listen, k as set_data } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+
+/* src/components/stepper/Stepper.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[10] = list[i];
+	child_ctx[12] = i;
+	return child_ctx;
+}
+
+// (49:35) 
+function create_if_block_1(ctx) {
+	let span;
+	let t_value = /*index*/ ctx[12] + 1 + "";
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(t_value);
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (42:10) {#if isStepValidated(index, stepsObject)}
+function create_if_block(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			div.innerHTML = `<navigation-notification-available-16px name="NotificationAvailable16" size="100%"></navigation-notification-available-16px>`;
+			attr(div, "class", "mc-stepper__icon");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (32:4) {#each stepsObject as step, index}
+function create_each_block(ctx) {
+	let li;
+	let div0;
+	let show_if;
+	let t0;
+	let div1;
+	let span0;
+	let t1_value = /*getStepNumber*/ ctx[4](/*index*/ ctx[12], /*stepsObject*/ ctx[2]) + "";
+	let t1;
+	let t2;
+	let span1;
+	let t3_value = /*step*/ ctx[10].label + "";
+	let t3;
+	let t4;
+	let li_class_value;
+	let mounted;
+	let dispose;
+
+	function select_block_type(ctx, dirty) {
+		if (dirty & /*stepsObject*/ 4) show_if = null;
+		if (show_if == null) show_if = !!/*isStepValidated*/ ctx[3](/*index*/ ctx[12], /*stepsObject*/ ctx[2]);
+		if (show_if) return create_if_block;
+		if (/*step*/ ctx[10].isCurrent) return create_if_block_1;
+	}
+
+	let current_block_type = select_block_type(ctx, -1);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	function click_handler() {
+		return /*click_handler*/ ctx[7](/*step*/ ctx[10]);
+	}
+
+	return {
+		c() {
+			li = element("li");
+			div0 = element("div");
+			if (if_block) if_block.c();
+			t0 = space();
+			div1 = element("div");
+			span0 = element("span");
+			t1 = text(t1_value);
+			t2 = space();
+			span1 = element("span");
+			t3 = text(t3_value);
+			t4 = space();
+			attr(div0, "class", "mc-stepper__indicator");
+			attr(div0, "aria-hidden", "true");
+			attr(span0, "class", "mc-stepper__title");
+			attr(span1, "class", "mc-stepper__label");
+			attr(div1, "class", "mc-stepper__detail");
+
+			attr(li, "class", li_class_value = "mc-stepper__item " + (/*step*/ ctx[10].isCurrent
+			? 'mc-stepper__item--current'
+			: '') + " " + (/*isStepValidated*/ ctx[3](/*index*/ ctx[12], /*stepsObject*/ ctx[2])
+			? 'mc-stepper__item--validated'
+			: ''));
+		},
+		m(target, anchor) {
+			insert(target, li, anchor);
+			append(li, div0);
+			if (if_block) if_block.m(div0, null);
+			append(li, t0);
+			append(li, div1);
+			append(div1, span0);
+			append(span0, t1);
+			append(div1, t2);
+			append(div1, span1);
+			append(span1, t3);
+			append(li, t4);
+
+			if (!mounted) {
+				dispose = listen(li, "click", click_handler);
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (current_block_type !== (current_block_type = select_block_type(ctx, dirty))) {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(div0, null);
+				}
+			}
+
+			if (dirty & /*stepsObject*/ 4 && t1_value !== (t1_value = /*getStepNumber*/ ctx[4](/*index*/ ctx[12], /*stepsObject*/ ctx[2]) + "")) set_data(t1, t1_value);
+			if (dirty & /*stepsObject*/ 4 && t3_value !== (t3_value = /*step*/ ctx[10].label + "")) set_data(t3, t3_value);
+
+			if (dirty & /*stepsObject*/ 4 && li_class_value !== (li_class_value = "mc-stepper__item " + (/*step*/ ctx[10].isCurrent
+			? 'mc-stepper__item--current'
+			: '') + " " + (/*isStepValidated*/ ctx[3](/*index*/ ctx[12], /*stepsObject*/ ctx[2])
+			? 'mc-stepper__item--validated'
+			: ''))) {
+				attr(li, "class", li_class_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(li);
+
+			if (if_block) {
+				if_block.d();
+			}
+
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let nav;
+	let ol;
+	let nav_class_value;
+	let each_value = /*stepsObject*/ ctx[2];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	let nav_levels = [
+		{
+			class: nav_class_value = "mc-stepper " + (/*compact*/ ctx[0] ? 'mc-stepper--compact' : '') + " " + (/*stepsObject*/ ctx[2].length > 3
+			? 'mc-stepper--shrinked'
+			: '')
+		},
+		{
+			"aria-label": "accessibilityLabels.stepperDescription"
+		},
+		/*attributes*/ ctx[1]
+	];
+
+	let nav_data = {};
+
+	for (let i = 0; i < nav_levels.length; i += 1) {
+		nav_data = assign(nav_data, nav_levels[i]);
+	}
+
+	return {
+		c() {
+			nav = element("nav");
+			ol = element("ol");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			this.c = noop;
+			attr(ol, "class", "mc-stepper__list");
+			set_attributes(nav, nav_data);
+		},
+		m(target, anchor) {
+			insert(target, nav, anchor);
+			append(nav, ol);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(ol, null);
+				}
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*stepsObject, isStepValidated, stepChanged, getStepNumber*/ 60) {
+				each_value = /*stepsObject*/ ctx[2];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(ol, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			set_attributes(nav, nav_data = get_spread_update(nav_levels, [
+				dirty & /*compact, stepsObject*/ 5 && nav_class_value !== (nav_class_value = "mc-stepper " + (/*compact*/ ctx[0] ? 'mc-stepper--compact' : '') + " " + (/*stepsObject*/ ctx[2].length > 3
+				? 'mc-stepper--shrinked'
+				: '')) && { class: nav_class_value },
+				{
+					"aria-label": "accessibilityLabels.stepperDescription"
+				},
+				dirty & /*attributes*/ 2 && /*attributes*/ ctx[1]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(nav);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let stepsObject;
+	let attributes;
+	const omit_props_names = ["steps","compact"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { steps } = $$props;
+	let { compact = false } = $$props;
+	let eventHandler = new EventHandler();
+
+	function isStepValidated(index, stepsObject) {
+		return index < stepsObject.findIndex(step => step.isCurrent);
+	}
+
+	function getStepNumber(index, stepsObject) {
+		return `${index + 1} / ${stepsObject.length}`;
+	}
+
+	function stepChanged(step) {
+		eventHandler.dispatch('step-changed', step);
+	}
+
+	const click_handler = step => stepChanged(step);
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(9, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('steps' in $$new_props) $$invalidate(6, steps = $$new_props.steps);
+		if ('compact' in $$new_props) $$invalidate(0, compact = $$new_props.compact);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*steps*/ 64) {
+			$$invalidate(2, stepsObject = steps ? JSON.parse(steps) : []);
+		}
+
+		$$invalidate(1, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 2) {
+			delete attributes.class;
+		}
+	};
+
+	return [
+		compact,
+		attributes,
+		stepsObject,
+		isStepValidated,
+		getStepNumber,
+		stepChanged,
+		steps,
+		click_handler
+	];
+}
+
+class Stepper extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-stepper{width:100%}.mc-stepper__list{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-stepper__item{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.mc-stepper__item::before,.mc-stepper__item::after{background-color:#999999;content:"";height:0.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item::before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item::after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item:first-child::before,.mc-stepper__item:last-child::after{content:none}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#46a610}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:600}.mc-stepper__item--current::before{background-color:#46a610}.mc-stepper__item--current .mc-stepper__indicator{background-color:#46a610;color:#ffffff}.mc-stepper__item--current .mc-stepper__label{color:#000000}.mc-stepper__item--validated::before,.mc-stepper__item--validated:not(.mc-stepper__item--current)::after{background-color:#46a610}.mc-stepper__link{height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#46a610}.mc-stepper__indicator{font-size:0.875rem;line-height:1.1428571429;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:2px solid #999999;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#46a610;max-width:100%}.mc-stepper__detail{font-size:0.875rem;line-height:1.2857142857;color:#666666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#46a610}.mc-stepper--compact .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item::before,.mc-stepper--compact .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--compact .mc-stepper__item::after{width:100%}.mc-stepper--compact .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:0.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item::before,.mc-stepper--shrinked .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item::after{width:100%}.mc-stepper--shrinked .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:0.25rem}}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{ steps: 6, compact: 0 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["steps", "compact"];
+	}
+
+	get steps() {
+		return this.$$.ctx[6];
+	}
+
+	set steps(steps) {
+		this.$$set({ steps });
+		flush();
+	}
+
+	get compact() {
+		return this.$$.ctx[0];
+	}
+
+	set compact(compact) {
+		this.$$set({ compact });
+		flush();
+	}
+}
+
+export { Stepper as default };
 //# sourceMappingURL=Stepper.js.map

package/public/components/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { StepperItems } from './stepper.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let steps: string;\n  export let compact = false;\n  let eventHandler = new EventHandler();\n  $: stepsObject = steps\n    ? (JSON.parse(steps) as StepperItems[])\n    : ([] as StepperItems[]);\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function isStepValidated(\n    index: number,\n    stepsObject: StepperItems[],\n  ): boolean {\n    return (\n      index < stepsObject.findIndex((step: StepperItems) => step.isCurrent)\n    );\n  }\n\n  function getStepNumber(index: number, stepsObject: StepperItems[]): string {\n    return `${index + 1} / ${stepsObject.length}`;\n  }\n\n  function stepChanged(step: StepperItems): void {\n    eventHandler.dispatch('step-changed', step);\n  }\n</script>\n\n<nav\n  class=\"mc-stepper {compact ? 'mc-stepper--compact' : ''} {stepsObject.length >\n  3\n    ? 'mc-stepper--shrinked'\n    : ''}\"\n  aria-label=\"accessibilityLabels.stepperDescription\"\n  {...attributes}\n>\n  <ol class=\"mc-stepper__list\">\n    {#each stepsObject as step, index}\n      <li\n        class=\"mc-stepper__item {step.isCurrent\n          ? 'mc-stepper__item--current'\n          : ''} {isStepValidated(index, stepsObject)\n          ? 'mc-stepper__item--validated'\n          : ''}\"\n        on:click={() => stepChanged(step)}\n      >\n        <div class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n          {#if isStepValidated(index, stepsObject)}\n            <div class=\"mc-stepper__icon\">\n              <navigation-notification-available-16px\n                name=\"NotificationAvailable16\"\n                size=\"100%\"\n              />\n            </div>\n          {:else if step.isCurrent}\n            <span>{index + 1}</span>\n          {/if}\n        </div>\n        <div class=\"mc-stepper__detail\">\n          <span class=\"mc-stepper__title\"\n            >{getStepNumber(index, stepsObject)}\n          </span>\n          <span class=\"mc-stepper__label\">{step.label}</span>\n        </div>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.stepper';\n</style>\n"],"names":["t_value","ctx","insert","target","span","anchor","div","t3_value","label","isCurrent","create_if_block_1","attr","li","li_class_value","append","div0","div1","span0","span1","set_data","t1","t1_value","dirty","t3","length","i","nav","ol","class","nav_class_value","steps","$$props","compact","eventHandler","EventHandler","stepChanged","step","dispatch","$$invalidate","stepsObject","JSON","parse","attributes","Object","assign","$$restProps","index","findIndex"],"mappings":"uTA4DmBA,EAAAC,MAAQ,EAAC,yCAAhBC,EAAuBC,EAAAC,EAAAC,uPAPvBH,EAKKC,EAAAG,EAAAD,mEAOHJ,EAAa,GAACA,EAAK,IAAEA,EAAW,IAAA,GAEHM,EAAAN,MAAKO,MAAK,sDAftCP,EAAe,GAACA,EAAK,IAAEA,EAAW,SAO7BA,MAAKQ,UAASC,OAAd,yUAfaC,EAAAC,EAAA,QAAAC,EAAA,qBAAAZ,MAAKQ,UAC1B,4BACA,IAAK,KAAAR,EAAgB,GAAAA,MAAOA,EAAW,IACvC,8BACA,aALNC,EA0BIC,EAAAS,EAAAP,GAlBFS,EAWKF,EAAAG,yBACLD,EAKKF,EAAAI,GAJHF,EAEME,EAAAC,iBACNH,EAAkDE,EAAAE,+HAF9CjB,EAAa,GAACA,EAAK,IAAEA,EAAW,IAAA,KAAAkB,EAAAC,EAAAC,GAEH,EAAAC,GAAAf,KAAAA,EAAAN,MAAKO,MAAK,KAAAW,EAAAI,EAAAhB,GAvBpB,EAAAe,GAAAT,KAAAA,EAAA,qBAAAZ,MAAKQ,UAC1B,4BACA,IAAK,KAAAR,EAAgB,GAAAA,MAAOA,EAAW,IACvC,8BACA,iFANDA,EAAW,wBAAhBuB,OAAIC,GAAA,kDARWxB,EAAO,GAAG,sBAAwB,SAAKA,EAAW,GAACuB,OACtE,EACI,uBACA,6DAEAvB,EAAU,8KANhBC,EAuCKC,EAAAuB,EAAArB,GA/BHS,EA8BIY,EAAAC,mFA7BK1B,EAAW,WAAhBuB,OAAIC,GAAA,EAAA,iHAAJD,6CARevB,EAAO,GAAG,sBAAwB,SAAKA,EAAW,GAACuB,OACtE,EACI,uBACA,MAAE,CAAAI,MAAAC,gEAEF5B,EAAU,+GAjCH6B,GAAaC,GACbC,QAAAA,GAAU,GAAKD,EACtBE,MAAmBC,EAoBd,SAAAC,EAAYC,GACnBH,EAAaI,SAAS,eAAgBD,mJApBvCE,EAAA,EAAEC,EAAcT,EACZU,KAAKC,MAAMX,GAAK,QAElBY,EAALC,OAAAC,UAAuBC,yBACXH,EAAWd,uBAGnBkB,EACAP,UAGEO,EAAQP,EAAYQ,WAAWX,GAAuBA,EAAK3B,sBAIxCqC,EAAeP,GAC1B,MAAA,GAAAO,EAAQ,OAAOP,EAAYf,cAwBjBY,GAAAD,EAAYC"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { StepperItems } from './stepper.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let steps: string;\n  export let compact = false;\n  let eventHandler = new EventHandler();\n  $: stepsObject = steps\n    ? (JSON.parse(steps) as StepperItems[])\n    : ([] as StepperItems[]);\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function isStepValidated(\n    index: number,\n    stepsObject: StepperItems[],\n  ): boolean {\n    return (\n      index < stepsObject.findIndex((step: StepperItems) => step.isCurrent)\n    );\n  }\n\n  function getStepNumber(index: number, stepsObject: StepperItems[]): string {\n    return `${index + 1} / ${stepsObject.length}`;\n  }\n\n  function stepChanged(step: StepperItems): void {\n    eventHandler.dispatch('step-changed', step);\n  }\n</script>\n\n<nav\n  class=\"mc-stepper {compact ? 'mc-stepper--compact' : ''} {stepsObject.length >\n  3\n    ? 'mc-stepper--shrinked'\n    : ''}\"\n  aria-label=\"accessibilityLabels.stepperDescription\"\n  {...attributes}\n>\n  <ol class=\"mc-stepper__list\">\n    {#each stepsObject as step, index}\n      <li\n        class=\"mc-stepper__item {step.isCurrent\n          ? 'mc-stepper__item--current'\n          : ''} {isStepValidated(index, stepsObject)\n          ? 'mc-stepper__item--validated'\n          : ''}\"\n        on:click={() => stepChanged(step)}\n      >\n        <div class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n          {#if isStepValidated(index, stepsObject)}\n            <div class=\"mc-stepper__icon\">\n              <navigation-notification-available-16px\n                name=\"NotificationAvailable16\"\n                size=\"100%\"\n              />\n            </div>\n          {:else if step.isCurrent}\n            <span>{index + 1}</span>\n          {/if}\n        </div>\n        <div class=\"mc-stepper__detail\">\n          <span class=\"mc-stepper__title\"\n            >{getStepNumber(index, stepsObject)}\n          </span>\n          <span class=\"mc-stepper__label\">{step.label}</span>\n        </div>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.stepper';\n</style>\n"],"names":[],"mappings":"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"}