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

package/public/components/phonenumber/PhoneNumber.svelte

@@ -1,337 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import {
-    parsePhoneNumber,
-    formatIncompletePhoneNumber,
-    AsYouType,
-    type CountryCode,
-  } from 'libphonenumber-js';
-  import * as examples from 'libphonenumber-js/examples.mobile.json';
-  import type { CountryItems } from './phonenumber.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { clickOutside } from '../../utilities/ClickOutside';
-  import { createEventDispatcher, onMount } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
-  export let phonenumber: string;
-  export let placeholder = '0102030405';
-  export let countrysearchplaceholder = 'Search Country';
-  export let buttonId = 'dropdown_country';
-  export let listId = 'phone_number_list';
-  export let countries: string;
-  export let selectedcountry: string;
-  export let isvalid: boolean;
-  export let isinvalid: boolean;
-  export let enablecountrysearch: boolean;
-
-  let isCountriesListOpened = false;
-  let maxlength = 25;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  let searchcountrytext: string = '';
-  let rootElement: Element;
-  let selectedCountry: CountryItems;
-  let searchCountryDomElement: Element;
-
-  $: phoneNumber = phonenumber ? phonenumber : '';
-
-  $: selectedCountry = selectedcountry
-    ? JSON.parse(selectedcountry)
-    : ({
-        isd: '+33',
-        name: 'France',
-        shortName: 'FR',
-      } as CountryItems);
-
-  $: parsedCountries = countries
-    ? (JSON.parse(countries) as CountryItems[])
-    : [];
-
-  $: if (isCountriesListOpened && searchCountryDomElement) {
-    scrollIntoSearchElement();
-  }
-  $: placeholder = selectedCountry
-    ? getSelectedCountryPlaceholder()
-    : 'Search Country';
-
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  onMount(() => {
-    phoneNumber = phonenumber
-      ? parsePhoneNumber(
-          phonenumber,
-          selectedCountry?.shortName,
-        ).formatNational()
-      : phoneNumber;
-  });
-
-  function getSelectedCountryPlaceholder(): string {
-    const example = examples.default[selectedCountry.shortName as CountryCode];
-    return new AsYouType(selectedCountry.shortName).input(example);
-  }
-  function dispatchEvent(
-    eventName: string,
-    data?: string | CountryItems,
-  ): void {
-    eventHandler.dispatch(eventName, data);
-  }
-
-  function toggleCountriesList(): void {
-    isCountriesListOpened = !isCountriesListOpened;
-  }
-
-  function openCountriesList() {
-    dispatchEvent('open-countries-list');
-    isCountriesListOpened = true;
-  }
-
-  function closeCountriesList() {
-    dispatchEvent('close-countries-list');
-    isCountriesListOpened = false;
-  }
-
-  function hasValue(): boolean {
-    return phoneNumber !== '';
-  }
-
-  function changeCountry(country: CountryItems): void {
-    selectedCountry = country;
-    toggleCountriesList();
-    dispatchEvent('change-country', country);
-    if (hasValue()) {
-      formatPhoneNumber();
-    }
-  }
-
-  function formatPhoneNumber(event?: FocusEvent): void {
-    event?.stopPropagation();
-    const phoneNumberValue = event
-      ? (event.target as HTMLInputElement).value
-      : phoneNumber;
-
-    if (!phoneNumberValue) {
-      isvalid = false;
-      isinvalid = false;
-
-      dispatchEvent('blur');
-      return;
-    }
-
-    try {
-      const parsedPhoneNumber = parsePhoneNumber(
-        phoneNumberValue,
-        selectedCountry.shortName,
-      );
-      const formatInternational: string =
-        parsedPhoneNumber.formatInternational();
-      isvalid = parsedPhoneNumber.isValid();
-      isinvalid = !isvalid;
-
-      dispatchEvent('blur', formatInternational);
-
-      phoneNumber = parsedPhoneNumber.formatNational();
-    } catch (error) {
-      const formatIncomplete: string = formatIncompletePhoneNumber(
-        phoneNumberValue,
-        selectedCountry.shortName,
-      );
-      isvalid = false;
-      isinvalid = true;
-
-      dispatchEvent('blur', formatIncomplete);
-
-      phoneNumber = formatIncomplete;
-    }
-
-    if (event && event.target) {
-      (event.target as HTMLInputElement).value = phoneNumber;
-    }
-  }
-
-  function cleanFormat(event: FocusEvent) {
-    const eventTargetValue = (event.target as HTMLInputElement).value;
-    phoneNumber = formatIncompletePhoneNumber(eventTargetValue);
-  }
-
-  function initKeyboardNav(event: KeyboardEvent) {
-    switch (event.key) {
-      case 'ArrowDown':
-      case 'ArrowUp': {
-        if (!isCountriesListOpened) {
-          openCountriesList();
-        }
-
-        /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */
-        const tmpIndex: number = parsedCountries.findIndex(
-          (country) => country.isd === selectedCountry.isd,
-        );
-        let index = event.key === 'ArrowDown' ? tmpIndex + 1 : tmpIndex - 1;
-
-        if (index === -1 || index >= parsedCountries.length) {
-          index = index === -1 ? parsedCountries.length - 1 : 0;
-        }
-
-        selectedCountry = parsedCountries[index];
-        /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */
-        break;
-      }
-      case 'Enter':
-        isCountriesListOpened
-          ? changeCountry(selectedCountry)
-          : openCountriesList();
-        break;
-      case 'Esc':
-        closeCountriesList();
-        break;
-    }
-  }
-  function scrollIntoSearchElement(): void {
-    const searchElement = parsedCountries.find(
-      (country) =>
-        country.isd.toLowerCase().includes(searchcountrytext.toLowerCase()) ||
-        country.name.toLowerCase().includes(searchcountrytext.toLowerCase()),
-    );
-    const domElement = searchElement
-      ? (rootElement.querySelector(`li#${searchElement.shortName}`) as Element)
-      : (rootElement.querySelector(`li.mc-phone-number__item`) as Element);
-    domElement.scrollIntoView({
-      behavior: 'auto',
-      block: 'center',
-      inline: 'nearest',
-    });
-  }
-</script>
-
-<div
-  bind:this={rootElement}
-  class="mc-phone-number
-  {isCountriesListOpened ? ' mc-phone-number--focused' : ''}"
->
-  <div
-    class="mc-phone-number__dropdown"
-    tabindex="-1"
-    on:keydown={initKeyboardNav}
-    use:clickOutside
-    on:outclick={closeCountriesList}
-    {...$$restProps}
-  >
-    <button
-      id={buttonId}
-      type="button"
-      aria-haspopup="listbox"
-      aria-labelledby={buttonId}
-      class="mc-phone-number__button"
-      aria-expanded={isCountriesListOpened}
-      on:click={toggleCountriesList}
-    >
-      <span
-        class="flag flag:{selectedCountry.shortName}"
-        style="--CountryFlagIcon-height:1rem">&nbsp;</span
-      >
-      <span class="mc-phone-number__indicator">{selectedCountry.isd}</span>
-    </button>
-    {#if isCountriesListOpened}
-      <ul
-        id={listId}
-        tabindex="0"
-        role="listbox"
-        aria-labelledby={listId}
-        class="mc-phone-number__list"
-        aria-activedescendant={selectedCountry.isd}
-      >
-        {#if enablecountrysearch}
-          <input
-            id="searchfield"
-            type="text"
-            class="mc-phone-number__input mc-phone-number__flag-search-field mc-text-input mc-text-input--m mc-field__input"
-            name="search-country-input"
-            spellcheck="false"
-            bind:value={searchcountrytext}
-            on:input={scrollIntoSearchElement}
-            placeholder={countrysearchplaceholder}
-            on:focus|preventDefault={scrollIntoSearchElement}
-            bind:this={searchCountryDomElement}
-          />
-        {/if}
-        {#each parsedCountries as country}
-          <li
-            id={country.shortName}
-            role="option"
-            class="mc-phone-number__item
-            {country.isd === selectedCountry.isd
-              ? 'mc-phone-number__item--focused'
-              : ''}"
-            aria-selected={country.isd === selectedCountry.isd}
-            on:click={() => changeCountry(country)}
-            on:keyup={(e) => {
-              /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-              return e.key === 'Enter' && changeCountry(country);
-            }}
-          >
-            <span
-              class="flag flag:{country.shortName}"
-              style="--CountryFlagIcon-height:1rem"
-            >
-              &nbsp;
-            </span>
-            <span class="mc-phone-number__country">{country.name}</span>
-            &nbsp;
-            <span>{country.isd}</span>
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-  <input
-    id="smallField"
-    type="tel"
-    class="mc-phone-number__input mc-text-input mc-text-input--m mc-field__input"
-    name="phone-number-input"
-    spellcheck="false"
-    class:is-valid={isvalid}
-    class:is-invalid={isinvalid}
-    {placeholder}
-    {maxlength}
-    {...attributes}
-    on:blur={formatPhoneNumber}
-    on:focus={cleanFormat}
-    bind:value={phoneNumber}
-  />
-</div>
-
-<style lang="scss">
-  @import 'country-flag-icons/3x2/flags';
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.text-input';
-  @import '@mozaic-ds/styles/components/c.phone-number';
-  // Custom CSS
-  .mc-phone-number {
-    max-width: none;
-
-    &__flag-search-field {
-      position: sticky;
-      top: 0;
-    }
-
-    &__indicator,
-    &__country {
-      padding-left: 1rem;
-    }
-
-    &__overlay {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: transparent;
-      z-index: 10;
-    }
-  }
-</style>

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

@@ -1,15 +0,0 @@
-import type { CountryCode } from 'libphonenumber-js';
-export interface CountryItems {
-    isd: string;
-    name: string;
-    shortName?: CountryCode;
-}
-export interface PhoneNumberResponse {
-    codePays: string;
-    isValid: boolean;
-    phoneNumber: {
-        original: string;
-        formatted?: string;
-    };
-}
-//# sourceMappingURL=phonenumber.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"phonenumber.types.d.ts","sourceRoot":"","sources":["../../../src/components/phonenumber/phonenumber.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}

package/public/components/price/Price.svelte

@@ -1,224 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { PriceType } from './price.types';
-
-  export let light = false;
-  export let type: PriceType = 'default';
-  export let mainprice: string;
-  export let mainpricearialabel: string | undefined = undefined;
-  export let mainpriceunit: string | undefined = undefined;
-  export let secondarypricelabel: string | undefined = undefined;
-  export let secondarypriceariallabel: string | undefined = undefined;
-  export let flagamount: string | undefined = undefined;
-  export let flaglabel: string | undefined = undefined;
-  export let flagarialabel: string | undefined = undefined;
-  export let priceenddatelabel: string | undefined = undefined;
-  export let pricewithoutoffer: string | undefined = undefined;
-  export let pricewithoutofferarialabel: string | undefined = undefined;
-  export let refundsofferproductlabel: string | undefined = undefined;
-  export let refundsoffermediaurl: string | undefined = undefined;
-
-  $: isDiscount = type === 'destocking' || type === 'commercial-operation';
-  $: isDisplayFlag =
-    type === 'budget-price' ||
-    type === 'best-value' ||
-    type === 'high-quality' ||
-    type === 'star-product';
-</script>
-
-<div
-  class="mc-price {$$props.class}"
-  class:light
-  class:mc-price--discount={isDiscount}
-  {...$$restProps}
->
-  {#if isDisplayFlag}
-    <span class="price__flag--{type}">
-      {flaglabel}
-    </span>
-  {:else if type === 'destocking'}
-    <div class="price__flag--clearance" aria-label={flagarialabel}>
-      <span class="price__flag--clearance-label">{flaglabel}</span>
-      <span class="price__flag--clearance-amount">{flagamount}</span>
-    </div>
-  {:else if type === 'commercial-operation'}
-    <div class="price__flag--discount" aria-label={flagarialabel}>
-      <span class="price__flag--discount-amount">{flagamount}</span>
-      <span class="price__flag--discount-label">{priceenddatelabel}</span>
-    </div>
-  {/if}
-
-  {#if isDiscount}
-    <div class="price__from" aria-label={pricewithoutofferarialabel}>
-      <span class="price__from-without-offer">{pricewithoutoffer}</span>
-    </div>
-  {/if}
-
-  <div class="price">
-    <div class="price__main">
-      <span data-cerberus="ELEM_PRIX" aria-label={mainpricearialabel}>
-        {mainprice}
-      </span>
-      {#if mainpriceunit}
-        <span class="price__main__unit">/ {mainpriceunit}</span>
-      {/if}
-    </div>
-    {#if secondarypricelabel}
-      <span class="price__secondary" aria-label={secondarypriceariallabel}>
-        {secondarypricelabel}
-      </span>
-    {/if}
-  </div>
-
-  {#if !light && refundsofferproductlabel}
-    {#if refundsoffermediaurl}
-      <a
-        class="mc-tag-link mc-tag-link__label"
-        href={refundsoffermediaurl}
-        target="_blank"
-        >{refundsofferproductlabel}
-      </a>
-    {:else}
-      <span class="mc-tag-text mc-tag-text--danger mc-tag-text__label">
-        {refundsofferproductlabel}
-      </span>
-    {/if}
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.tag';
-
-  .mc-price {
-    .price__flag {
-      &--budget-price,
-      &--best-value,
-      &--high-quality,
-      &--star-product {
-        @include set-font-face('semi-bold');
-        @include set-font-scale('02', 'm');
-        display: inline-block;
-        padding: $mu050;
-        margin-bottom: $mu025;
-        line-height: 0.5rem;
-        text-transform: uppercase;
-      }
-      &--budget-price {
-        background-color: $color-secondary-yellow-500;
-      }
-      &--best-value {
-        background-color: $color-primary-01-500;
-      }
-      &--high-quality {
-        background-color: $color-secondary-blue-500;
-      }
-      &--star-product {
-        padding: $mu025 $mu050;
-        line-height: 1rem;
-        color: #fff;
-        text-transform: none;
-        background-color: $color-secondary-red-500;
-      }
-      &--clearance {
-        display: flex;
-        &-label {
-          @include set-font-scale('05', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          padding: calc(#{$mu025} - 1px) $mu050;
-          border: get-border(s) solid $color-secondary-red-500;
-          line-height: 1.25rem;
-          text-transform: uppercase;
-          color: $color-secondary-red-500;
-        }
-        &-amount {
-          @include set-font-face('semi-bold');
-          @include set-font-scale('05', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          padding: $mu025 $mu050;
-          background-color: $color-secondary-red-500;
-          color: $color-secondary-yellow-500;
-          line-height: 1.25rem;
-        }
-      }
-      &--discount {
-        &-amount {
-          @include set-font-face('semi-bold');
-          @include set-font-scale('05', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          padding: $mu025 $mu050;
-          background-color: $color-secondary-red-500;
-          line-height: 1.25rem;
-          color: #fff;
-        }
-        &-label {
-          @include set-font-scale('02', 'm');
-          display: inline-block;
-          vertical-align: middle;
-          margin-left: $mu050;
-          color: $color-secondary-red-500;
-        }
-      }
-    }
-    .price__from {
-      line-height: 1.75rem;
-      &-without-offer {
-        @include set-font-scale('04', 'm');
-        display: inline-block;
-        vertical-align: middle;
-        color: $color-grey-999;
-        text-decoration: line-through;
-      }
-    }
-    .price__main {
-      @include set-font-face('semi-bold');
-      @include set-font-scale('09', 'm');
-      &__unit {
-        @include set-font-scale('05', 'm');
-      }
-    }
-    .price__secondary {
-      @include set-font-scale('02', 'm');
-      color: $color-grey-900;
-    }
-
-    &.mc-price--discount {
-      .price__main {
-        color: $color-secondary-red-500;
-      }
-    }
-
-    &.light {
-      .price__flag {
-        &--budget-price,
-        &--best-value,
-        &--high-quality {
-          padding: $mu025;
-          line-height: 0.75rem;
-        }
-        &--clearance {
-          display: flex;
-          &-label {
-            @include set-font-scale('02', 'm');
-            line-height: 0.75rem;
-          }
-          &-amount {
-            @include set-font-scale('02', 'm');
-            line-height: 0.75rem;
-            padding: calc(#{$mu025} - 1px) $mu025;
-          }
-        }
-      }
-      .price__main {
-        @include set-font-scale('07', 'm');
-        &__unit {
-          @include set-font-scale('04', 'm');
-        }
-      }
-    }
-  }
-</style>

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

@@ -1,2 +0,0 @@
-export type PriceType = 'default' | 'budget-price' | 'best-value' | 'high-quality' | 'star-product' | 'destocking' | 'commercial-operation';
-//# sourceMappingURL=price.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"price.types.d.ts","sourceRoot":"","sources":["../../../src/components/price/price.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,cAAc,GACd,YAAY,GACZ,cAAc,GACd,cAAc,GACd,YAAY,GACZ,sBAAsB,CAAC"}

package/public/components/progressbar/ProgressBar.svelte

@@ -1,53 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type { ProgressBarSize } from './progressbar.types';
-
-  export let value: number;
-  export let valuemin = 0;
-  export let valuemax = 100;
-  export let displaypercentage: boolean;
-  export let size: ProgressBarSize = 'm';
-
-  $: getWidth = value >= valuemax ? valuemax : value;
-
-  function getClasses(displaypercentage: boolean): string {
-    const classes = ['mc-progressbar'];
-
-    if (displaypercentage) {
-      classes.push('mc-progressbar--percent');
-    }
-
-    if (size === 's') {
-      classes.push('mc-progressbar--s');
-    } else if (size === 'xs') {
-      classes.push('mc-progressbar--xs');
-    }
-
-    return classes.join(' ');
-  }
-</script>
-
-<div class="{getClasses(displaypercentage)} {$$props.class}" {...$$restProps}>
-  <div
-    class="mc-progressbar__indicator"
-    role="progressbar"
-    aria-valuenow={value}
-    aria-valuemin={valuemin}
-    aria-valuemax={valuemax}
-    style="width: {getWidth}%"
-  >
-    {#if displaypercentage}
-      <div class="mc-progressbar__percentage">{value ?? 0}%</div>
-    {/if}
-  </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/progressbar/progressbar.types.d.ts

@@ -1,2 +0,0 @@
-export type ProgressBarSize = 'm' | 's' | 'xs';
-//# sourceMappingURL=progressbar.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"progressbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/progressbar/progressbar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC"}