@mozaic-ds/web-components 0.5.0 → 0.6.1

package/public/components/price/Price.js.map

@@ -1 +1 @@
-{"version":3,"file":"Price.js","sources":["../../../src/components/price/Price.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { PriceType } from './price.types';\n\n  export let light = false;\n  export let type: PriceType = 'default';\n  export let mainprice: string;\n  export let mainpricearialabel: string | undefined = undefined;\n  export let mainpriceunit: string | undefined = undefined;\n  export let secondarypricelabel: string | undefined = undefined;\n  export let secondarypriceariallabel: string | undefined = undefined;\n  export let flagamount: string | undefined = undefined;\n  export let flaglabel: string | undefined = undefined;\n  export let flagarialabel: string | undefined = undefined;\n  export let priceenddatelabel: string | undefined = undefined;\n  export let pricewithoutoffer: string | undefined = undefined;\n  export let pricewithoutofferarialabel: string | undefined = undefined;\n  export let refundsofferproductlabel: string | undefined = undefined;\n  export let refundsoffermediaurl: string | undefined = undefined;\n\n  $: isDiscount = type === 'destocking' || type === 'commercial-operation';\n  $: isDisplayFlag =\n    type === 'budget-price' ||\n    type === 'best-value' ||\n    type === 'high-quality' ||\n    type === 'star-product';\n</script>\n\n<div\n  class=\"mc-price {$$props.class}\"\n  class:light\n  class:mc-price--discount={isDiscount}\n  {...$$restProps}\n>\n  {#if isDisplayFlag}\n    <span class=\"price__flag--{type}\">\n      {flaglabel}\n    </span>\n  {:else if type === 'destocking'}\n    <div class=\"price__flag--clearance\" aria-label={flagarialabel}>\n      <span class=\"price__flag--clearance-label\">{flaglabel}</span>\n      <span class=\"price__flag--clearance-amount\">{flagamount}</span>\n    </div>\n  {:else if type === 'commercial-operation'}\n    <div class=\"price__flag--discount\" aria-label={flagarialabel}>\n      <span class=\"price__flag--discount-amount\">{flagamount}</span>\n      <span class=\"price__flag--discount-label\">{priceenddatelabel}</span>\n    </div>\n  {/if}\n\n  {#if isDiscount}\n    <div class=\"price__from\" aria-label={pricewithoutofferarialabel}>\n      <span class=\"price__from-without-offer\">{pricewithoutoffer}</span>\n    </div>\n  {/if}\n\n  <div class=\"price\">\n    <div class=\"price__main\">\n      <span data-cerberus=\"ELEM_PRIX\" aria-label={mainpricearialabel}>\n        {mainprice}\n      </span>\n      {#if mainpriceunit}\n        <span class=\"price__main__unit\">/ {mainpriceunit}</span>\n      {/if}\n    </div>\n    {#if secondarypricelabel}\n      <span class=\"price__secondary\" aria-label={secondarypriceariallabel}>\n        {secondarypricelabel}\n      </span>\n    {/if}\n  </div>\n\n  {#if !light && refundsofferproductlabel}\n    {#if refundsoffermediaurl}\n      <a\n        class=\"mc-tag-link mc-tag-link__label\"\n        href={refundsoffermediaurl}\n        target=\"_blank\"\n        >{refundsofferproductlabel}\n      </a>\n    {:else}\n      <span class=\"mc-tag-text mc-tag-text--danger mc-tag-text__label\">\n        {refundsofferproductlabel}\n      </span>\n    {/if}\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.tag';\n\n  .mc-price {\n    .price__flag {\n      &--budget-price,\n      &--best-value,\n      &--high-quality,\n      &--star-product {\n        @include set-font-face('semi-bold');\n        @include set-font-scale('02', 'm');\n        display: inline-block;\n        padding: $mu050;\n        margin-bottom: $mu025;\n        line-height: 0.5rem;\n        text-transform: uppercase;\n      }\n      &--budget-price {\n        background-color: $color-secondary-yellow-500;\n      }\n      &--best-value {\n        background-color: $color-primary-01-500;\n      }\n      &--high-quality {\n        background-color: $color-secondary-blue-500;\n      }\n      &--star-product {\n        padding: $mu025 $mu050;\n        line-height: 1rem;\n        color: #fff;\n        text-transform: none;\n        background-color: $color-secondary-red-500;\n      }\n      &--clearance {\n        display: flex;\n        &-label {\n          @include set-font-scale('05', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          padding: calc(#{$mu025} - 1px) $mu050;\n          border: get-border(s) solid $color-secondary-red-500;\n          line-height: 1.25rem;\n          text-transform: uppercase;\n          color: $color-secondary-red-500;\n        }\n        &-amount {\n          @include set-font-face('semi-bold');\n          @include set-font-scale('05', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          padding: $mu025 $mu050;\n          background-color: $color-secondary-red-500;\n          color: $color-secondary-yellow-500;\n          line-height: 1.25rem;\n        }\n      }\n      &--discount {\n        &-amount {\n          @include set-font-face('semi-bold');\n          @include set-font-scale('05', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          padding: $mu025 $mu050;\n          background-color: $color-secondary-red-500;\n          line-height: 1.25rem;\n          color: #fff;\n        }\n        &-label {\n          @include set-font-scale('02', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          margin-left: $mu050;\n          color: $color-secondary-red-500;\n        }\n      }\n    }\n    .price__from {\n      line-height: 1.75rem;\n      &-without-offer {\n        @include set-font-scale('04', 'm');\n        display: inline-block;\n        vertical-align: middle;\n        color: $color-grey-999;\n        text-decoration: line-through;\n      }\n    }\n    .price__main {\n      @include set-font-face('semi-bold');\n      @include set-font-scale('09', 'm');\n      &__unit {\n        @include set-font-scale('05', 'm');\n      }\n    }\n    .price__secondary {\n      @include set-font-scale('02', 'm');\n      color: $color-grey-900;\n    }\n\n    &.mc-price--discount {\n      .price__main {\n        color: $color-secondary-red-500;\n      }\n    }\n\n    &.light {\n      .price__flag {\n        &--budget-price,\n        &--best-value,\n        &--high-quality {\n          padding: $mu025;\n          line-height: 0.75rem;\n        }\n        &--clearance {\n          display: flex;\n          &-label {\n            @include set-font-scale('02', 'm');\n            line-height: 0.75rem;\n          }\n          &-amount {\n            @include set-font-scale('02', 'm');\n            line-height: 0.75rem;\n            padding: calc(#{$mu025} - 1px) $mu025;\n          }\n        }\n      }\n      .price__main {\n        @include set-font-scale('07', 'm');\n        &__unit {\n          @include set-font-scale('04', 'm');\n        }\n      }\n    }\n  }\n</style>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Price.js","sources":["../../../src/components/price/Price.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { PriceType } from './price.types';\n\n  export let light = false;\n  export let type: PriceType = 'default';\n  export let mainprice: string;\n  export let mainpricearialabel: string | undefined = undefined;\n  export let mainpriceunit: string | undefined = undefined;\n  export let secondarypricelabel: string | undefined = undefined;\n  export let secondarypriceariallabel: string | undefined = undefined;\n  export let flagamount: string | undefined = undefined;\n  export let flaglabel: string | undefined = undefined;\n  export let flagarialabel: string | undefined = undefined;\n  export let priceenddatelabel: string | undefined = undefined;\n  export let pricewithoutoffer: string | undefined = undefined;\n  export let pricewithoutofferarialabel: string | undefined = undefined;\n  export let refundsofferproductlabel: string | undefined = undefined;\n  export let refundsoffermediaurl: string | undefined = undefined;\n\n  $: isDiscount = type === 'destocking' || type === 'commercial-operation';\n  $: isDisplayFlag =\n    type === 'budget-price' ||\n    type === 'best-value' ||\n    type === 'high-quality' ||\n    type === 'star-product';\n</script>\n\n<div\n  class=\"mc-price {$$props.class}\"\n  class:light\n  class:mc-price--discount={isDiscount}\n  {...$$restProps}\n>\n  {#if isDisplayFlag}\n    <span class=\"price__flag--{type}\">\n      {flaglabel}\n    </span>\n  {:else if type === 'destocking'}\n    <div class=\"price__flag--clearance\" aria-label={flagarialabel}>\n      <span class=\"price__flag--clearance-label\">{flaglabel}</span>\n      <span class=\"price__flag--clearance-amount\">{flagamount}</span>\n    </div>\n  {:else if type === 'commercial-operation'}\n    <div class=\"price__flag--discount\" aria-label={flagarialabel}>\n      <span class=\"price__flag--discount-amount\">{flagamount}</span>\n      <span class=\"price__flag--discount-label\">{priceenddatelabel}</span>\n    </div>\n  {/if}\n\n  {#if isDiscount}\n    <div class=\"price__from\" aria-label={pricewithoutofferarialabel}>\n      <span class=\"price__from-without-offer\">{pricewithoutoffer}</span>\n    </div>\n  {/if}\n\n  <div class=\"price\">\n    <div class=\"price__main\">\n      <span data-cerberus=\"ELEM_PRIX\" aria-label={mainpricearialabel}>\n        {mainprice}\n      </span>\n      {#if mainpriceunit}\n        <span class=\"price__main__unit\">/ {mainpriceunit}</span>\n      {/if}\n    </div>\n    {#if secondarypricelabel}\n      <span class=\"price__secondary\" aria-label={secondarypriceariallabel}>\n        {secondarypricelabel}\n      </span>\n    {/if}\n  </div>\n\n  {#if !light && refundsofferproductlabel}\n    {#if refundsoffermediaurl}\n      <a\n        class=\"mc-tag-link mc-tag-link__label\"\n        href={refundsoffermediaurl}\n        target=\"_blank\"\n        >{refundsofferproductlabel}\n      </a>\n    {:else}\n      <span class=\"mc-tag-text mc-tag-text--danger mc-tag-text__label\">\n        {refundsofferproductlabel}\n      </span>\n    {/if}\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.tag';\n\n  .mc-price {\n    .price__flag {\n      &--budget-price,\n      &--best-value,\n      &--high-quality,\n      &--star-product {\n        @include set-font-face('semi-bold');\n        @include set-font-scale('02', 'm');\n        display: inline-block;\n        padding: $mu050;\n        margin-bottom: $mu025;\n        line-height: 0.5rem;\n        text-transform: uppercase;\n      }\n      &--budget-price {\n        background-color: $color-secondary-yellow-500;\n      }\n      &--best-value {\n        background-color: $color-primary-01-500;\n      }\n      &--high-quality {\n        background-color: $color-secondary-blue-500;\n      }\n      &--star-product {\n        padding: $mu025 $mu050;\n        line-height: 1rem;\n        color: #fff;\n        text-transform: none;\n        background-color: $color-secondary-red-500;\n      }\n      &--clearance {\n        display: flex;\n        &-label {\n          @include set-font-scale('05', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          padding: calc(#{$mu025} - 1px) $mu050;\n          border: get-border(s) solid $color-secondary-red-500;\n          line-height: 1.25rem;\n          text-transform: uppercase;\n          color: $color-secondary-red-500;\n        }\n        &-amount {\n          @include set-font-face('semi-bold');\n          @include set-font-scale('05', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          padding: $mu025 $mu050;\n          background-color: $color-secondary-red-500;\n          color: $color-secondary-yellow-500;\n          line-height: 1.25rem;\n        }\n      }\n      &--discount {\n        &-amount {\n          @include set-font-face('semi-bold');\n          @include set-font-scale('05', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          padding: $mu025 $mu050;\n          background-color: $color-secondary-red-500;\n          line-height: 1.25rem;\n          color: #fff;\n        }\n        &-label {\n          @include set-font-scale('02', 'm');\n          display: inline-block;\n          vertical-align: middle;\n          margin-left: $mu050;\n          color: $color-secondary-red-500;\n        }\n      }\n    }\n    .price__from {\n      line-height: 1.75rem;\n      &-without-offer {\n        @include set-font-scale('04', 'm');\n        display: inline-block;\n        vertical-align: middle;\n        color: $color-grey-999;\n        text-decoration: line-through;\n      }\n    }\n    .price__main {\n      @include set-font-face('semi-bold');\n      @include set-font-scale('09', 'm');\n      &__unit {\n        @include set-font-scale('05', 'm');\n      }\n    }\n    .price__secondary {\n      @include set-font-scale('02', 'm');\n      color: $color-grey-900;\n    }\n\n    &.mc-price--discount {\n      .price__main {\n        color: $color-secondary-red-500;\n      }\n    }\n\n    &.light {\n      .price__flag {\n        &--budget-price,\n        &--best-value,\n        &--high-quality {\n          padding: $mu025;\n          line-height: 0.75rem;\n        }\n        &--clearance {\n          display: flex;\n          &-label {\n            @include set-font-scale('02', 'm');\n            line-height: 0.75rem;\n          }\n          &-amount {\n            @include set-font-scale('02', 'm');\n            line-height: 0.75rem;\n            padding: calc(#{$mu025} - 1px) $mu025;\n          }\n        }\n      }\n      .price__main {\n        @include set-font-scale('07', 'm');\n        &__unit {\n          @include set-font-scale('04', 'm');\n        }\n      }\n    }\n  }\n</style>\n"],"names":["ctx","insert","target","div","anchor","append","span0","span1","span","create_if_block_1","a","create_if_block_5","create_if_block_6","create_if_block_7","create_if_block_4","create_if_block_3","create_if_block_2","if_block4","create_if_block","class","div2_class_value","div2","div1","div0","dirty","light","$$props","type","mainprice","mainpricearialabel","mainpriceunit","secondarypricelabel","secondarypriceariallabel","flagamount","flaglabel","flagarialabel","priceenddatelabel","pricewithoutoffer","pricewithoutofferarialabel","refundsofferproductlabel","refundsoffermediaurl","$$invalidate","isDiscount","isDisplayFlag"],"mappings":"uPA8CkDA,EAAU,0BACXA,EAAiB,kJAFfA,EAAa,YAA5DC,EAGKC,EAAAC,EAAAC,GAFHC,EAA6DF,EAAAG,iBAC7DD,EAAmEF,EAAAI,6BADvBP,EAAU,gBACXA,EAAiB,6BAFfA,EAAa,wFAJdA,EAAS,0BACRA,EAAU,oJAFTA,EAAa,YAA7DC,EAGKC,EAAAC,EAAAC,GAFHC,EAA4DF,EAAAG,iBAC5DD,EAA8DF,EAAAI,6BADlBP,EAAS,eACRA,EAAU,4BAFTA,EAAa,uEAH1DA,EAAS,kCADeA,EAAI,YAA/BC,EAEMC,EAAAM,EAAAJ,6BADHJ,EAAS,gCADeA,EAAI,kGAiBYA,EAAiB,0FADvBA,EAA0B,aAA/DC,EAEKC,EAAAC,EAAAC,GADHC,EAAiEF,EAAAK,8BAAxBR,EAAiB,8BADvBA,EAA0B,wEAW3B,UAAGA,EAAa,6CAAhDC,EAAuDC,EAAAM,EAAAJ,mCAApBJ,EAAa,qEAK/CA,EAAmB,qDADqBA,EAAwB,YAAnEC,EAEMC,EAAAM,EAAAJ,4BADHJ,EAAmB,2BADqBA,EAAwB,+DAOhEA,EAAoB,IAAAS,+NASpBT,EAAwB,+EAD3BC,EAEMC,EAAAM,EAAAJ,8BADHJ,EAAwB,mEAJvBA,EAAwB,8DAFpBA,EAAoB,oCAF5BC,EAKGC,EAAAQ,EAAAN,8BADCJ,EAAwB,yBAFpBA,EAAoB,oFA1C3BA,EAAa,IAAAW,EAIC,eAATX,KAAqBY,EAKZ,yBAATZ,KAA+Ba,OAA/B,yBAOLb,EAAU,KAAAc,EAAAd,KAWNA,EAAa,IAAAe,EAAAf,KAIfA,EAAmB,IAAAgB,EAAAhB,GAOpBiB,GAAAjB,MAASA,EAAwB,KAAAkB,EAAAlB,OA3CtBmB,MAAAC,EAAA,YAAApB,MAAQmB,OAGrBnB,EAAW,4IA2BRA,EAAS,4GADgCA,EAAkB,sGA3BxCA,EAAU,aAHtCC,EA0DKC,EAAAmB,EAAAjB,+CA9BHC,EAcKgB,EAAAC,GAbHjB,EAOKiB,EAAAC,GANHlB,EAEMkB,EAAAf,yJAVLR,EAAU,mEASRA,EAAS,0BADgCA,EAAkB,IAGzDA,EAAa,4DAIfA,EAAmB,6DAOpBA,MAASA,EAAwB,wEA3CtB,OAAAwB,GAAAJ,KAAAA,EAAA,YAAApB,MAAQmB,QAAK,CAAAA,MAAAC,aAG1BpB,EAAW,kDADWA,EAAU,6YA3BzByB,MAAAA,GAAQ,GAAKC,GACbC,KAAAA,EAAkB,WAASD,aAC3BE,GAAiBF,GACjBG,mBAAAA,GAAkDH,GAClDI,cAAAA,GAA6CJ,GAC7CK,oBAAAA,GAAmDL,GACnDM,yBAAAA,GAAwDN,GACxDO,WAAAA,GAA0CP,GAC1CQ,UAAAA,GAAyCR,GACzCS,cAAAA,GAA6CT,GAC7CU,kBAAAA,GAAiDV,GACjDW,kBAAAA,GAAiDX,GACjDY,2BAAAA,GAA0DZ,GAC1Da,yBAAAA,GAAwDb,GACxDc,qBAAAA,GAAoDd,uzBAE9De,EAAA,GAAEC,EAAsB,eAATf,GAAkC,yBAATA,sBACtCgB,EACQ,iBAAThB,GACS,eAATA,GACS,iBAATA,GACS,iBAATA"}

package/public/components/progressbar/ProgressBar.js

@@ -1,279 +1,2 @@
-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, t as text, d as space, n as noop, g as attr, y as set_style, h as set_attributes, j as append, m as get_spread_update, o as detach, p as compute_rest_props, q as exclude_internal_props, k as set_data } from '../../index-c33b3772.js';
-
-/* src/components/progressbar/ProgressBar.svelte generated by Svelte v3.58.0 */
-
-function create_if_block(ctx) {
-	let div;
-	let t0;
-	let t1;
-
-	return {
-		c() {
-			div = element("div");
-			t0 = text(/*value*/ ctx[0]);
-			t1 = text("%");
-			attr(div, "class", "mc-progressbar__percentage");
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, t0);
-			append(div, t1);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*value*/ 1) set_data(t0, /*value*/ ctx[0]);
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
-function create_fragment(ctx) {
-	let div1;
-	let div0;
-	let t0;
-	let t1;
-	let div1_class_value;
-	let if_block = /*displaypercentage*/ ctx[3] && create_if_block(ctx);
-
-	let div1_levels = [
-		{
-			class: div1_class_value = "" + (/*getClasses*/ ctx[4](/*displaypercentage*/ ctx[3]) + " " + /*$$props*/ ctx[5].class)
-		},
-		/*$$restProps*/ ctx[6]
-	];
-
-	let div_data_1 = {};
-
-	for (let i = 0; i < div1_levels.length; i += 1) {
-		div_data_1 = assign(div_data_1, div1_levels[i]);
-	}
-
-	return {
-		c() {
-			div1 = element("div");
-			div0 = element("div");
-			t0 = text(" ");
-			t1 = space();
-			if (if_block) if_block.c();
-			this.c = noop;
-			attr(div0, "class", "mc-progressbar__indicator");
-			attr(div0, "role", "progressbar");
-			attr(div0, "aria-valuenow", /*value*/ ctx[0]);
-			attr(div0, "aria-valuemin", /*valuemin*/ ctx[1]);
-			attr(div0, "aria-valuemax", /*valuemax*/ ctx[2]);
-			set_style(div0, "width", /*value*/ ctx[0] + "%");
-			set_attributes(div1, div_data_1);
-		},
-		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, div0);
-			append(div0, t0);
-			append(div1, t1);
-			if (if_block) if_block.m(div1, null);
-		},
-		p(ctx, [dirty]) {
-			if (dirty & /*value*/ 1) {
-				attr(div0, "aria-valuenow", /*value*/ ctx[0]);
-			}
-
-			if (dirty & /*valuemin*/ 2) {
-				attr(div0, "aria-valuemin", /*valuemin*/ ctx[1]);
-			}
-
-			if (dirty & /*valuemax*/ 4) {
-				attr(div0, "aria-valuemax", /*valuemax*/ ctx[2]);
-			}
-
-			if (dirty & /*value*/ 1) {
-				set_style(div0, "width", /*value*/ ctx[0] + "%");
-			}
-
-			if (/*displaypercentage*/ ctx[3]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block(ctx);
-					if_block.c();
-					if_block.m(div1, null);
-				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
-			}
-
-			set_attributes(div1, div_data_1 = get_spread_update(div1_levels, [
-				dirty & /*displaypercentage, $$props*/ 40 && div1_class_value !== (div1_class_value = "" + (/*getClasses*/ ctx[4](/*displaypercentage*/ ctx[3]) + " " + /*$$props*/ ctx[5].class)) && { class: div1_class_value },
-				dirty & /*$$restProps*/ 64 && /*$$restProps*/ ctx[6]
-			]));
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(div1);
-			if (if_block) if_block.d();
-		}
-	};
-}
-
-function instance($$self, $$props, $$invalidate) {
-	const omit_props_names = ["value","valuemin","valuemax","displaypercentage","size","branded"];
-	let $$restProps = compute_rest_props($$props, omit_props_names);
-	let { value } = $$props;
-	let { valuemin = 0 } = $$props;
-	let { valuemax = 100 } = $$props;
-	let { displaypercentage } = $$props;
-	let { size = 'm' } = $$props;
-	let { branded } = $$props;
-
-	function getClasses(displaypercentage) {
-		const classes = ['mc-progressbar'];
-
-		if (displaypercentage) {
-			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(' ');
-	}
-
-	$$self.$$set = $$new_props => {
-		$$invalidate(5, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
-		$$invalidate(6, $$restProps = compute_rest_props($$props, omit_props_names));
-		if ('value' in $$new_props) $$invalidate(0, value = $$new_props.value);
-		if ('valuemin' in $$new_props) $$invalidate(1, valuemin = $$new_props.valuemin);
-		if ('valuemax' in $$new_props) $$invalidate(2, valuemax = $$new_props.valuemax);
-		if ('displaypercentage' in $$new_props) $$invalidate(3, displaypercentage = $$new_props.displaypercentage);
-		if ('size' in $$new_props) $$invalidate(7, size = $$new_props.size);
-		if ('branded' in $$new_props) $$invalidate(8, branded = $$new_props.branded);
-	};
-
-	$$props = exclude_internal_props($$props);
-
-	return [
-		value,
-		valuemin,
-		valuemax,
-		displaypercentage,
-		getClasses,
-		$$props,
-		$$restProps,
-		size,
-		branded
-	];
-}
-
-class ProgressBar extends SvelteElement {
-	constructor(options) {
-		super();
-		const style = document.createElement('style');
-		style.textContent = `.mc-progressbar{font-family:"LeroyMerlin", sans-serif;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#cccccc;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__indicator{border-radius:4px;overflow:hidden}.mc-progressbar__indicator{background-color:#007bb4;height:100%;left:0;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.875rem;line-height:1.2857142857;font-weight:600;color:#191919;position:relative;z-index:1}.mc-progressbar--half .mc-progressbar__percentage{color:#ffffff}.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--branded .mc-progressbar__indicator{background-color:#46a610}`;
-		this.shadowRoot.appendChild(style);
-
-		init(
-			this,
-			{
-				target: this.shadowRoot,
-				props: attribute_to_object(this.attributes),
-				customElement: true
-			},
-			instance,
-			create_fragment,
-			safe_not_equal,
-			{
-				value: 0,
-				valuemin: 1,
-				valuemax: 2,
-				displaypercentage: 3,
-				size: 7,
-				branded: 8
-			},
-			null
-		);
-
-		if (options) {
-			if (options.target) {
-				insert(options.target, this, options.anchor);
-			}
-
-			if (options.props) {
-				this.$set(options.props);
-				flush();
-			}
-		}
-	}
-
-	static get observedAttributes() {
-		return ["value", "valuemin", "valuemax", "displaypercentage", "size", "branded"];
-	}
-
-	get value() {
-		return this.$$.ctx[0];
-	}
-
-	set value(value) {
-		this.$$set({ value });
-		flush();
-	}
-
-	get valuemin() {
-		return this.$$.ctx[1];
-	}
-
-	set valuemin(valuemin) {
-		this.$$set({ valuemin });
-		flush();
-	}
-
-	get valuemax() {
-		return this.$$.ctx[2];
-	}
-
-	set valuemax(valuemax) {
-		this.$$set({ valuemax });
-		flush();
-	}
-
-	get displaypercentage() {
-		return this.$$.ctx[3];
-	}
-
-	set displaypercentage(displaypercentage) {
-		this.$$set({ displaypercentage });
-		flush();
-	}
-
-	get size() {
-		return this.$$.ctx[7];
-	}
-
-	set size(size) {
-		this.$$set({ size });
-		flush();
-	}
-
-	get branded() {
-		return this.$$.ctx[8];
-	}
-
-	set branded(branded) {
-		this.$$set({ branded });
-		flush();
-	}
-}
-
-export { ProgressBar 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,t as c,d as p,n as l,g as d,y as m,h as g,j as b,m as u,o as h,p as v,q as x,k as f}from"../../index-c33b3772.js";function $(e){let r,s,t;return{c(){r=o("div"),s=c(e[0]),t=c("%"),d(r,"class","mc-progressbar__percentage")},m(e,i){a(e,r,i),b(r,s),b(r,t)},p(e,r){1&r&&f(s,e[0])},d(e){e&&h(r)}}}function _(e){let r,s,t,i,v,x=e[3]&&$(e),f=[{class:v=e[4](e[3])+" "+e[5].class},e[6]],_={};for(let e=0;e<f.length;e+=1)_=n(_,f[e]);return{c(){r=o("div"),s=o("div"),t=c(" "),i=p(),x&&x.c(),this.c=l,d(s,"class","mc-progressbar__indicator"),d(s,"role","progressbar"),d(s,"aria-valuenow",e[0]),d(s,"aria-valuemin",e[1]),d(s,"aria-valuemax",e[2]),m(s,"width",e[0]+"%"),g(r,_)},m(e,n){a(e,r,n),b(r,s),b(s,t),b(r,i),x&&x.m(r,null)},p(e,[a]){1&a&&d(s,"aria-valuenow",e[0]),2&a&&d(s,"aria-valuemin",e[1]),4&a&&d(s,"aria-valuemax",e[2]),1&a&&m(s,"width",e[0]+"%"),e[3]?x?x.p(e,a):(x=$(e),x.c(),x.m(r,null)):x&&(x.d(1),x=null),g(r,_=u(f,[40&a&&v!==(v=e[4](e[3])+" "+e[5].class)&&{class:v},64&a&&e[6]]))},i:l,o:l,d(e){e&&h(r),x&&x.d()}}}function w(e,r,s){const a=["value","valuemin","valuemax","displaypercentage","size","branded"];let t=v(r,a),{value:i}=r,{valuemin:o=0}=r,{valuemax:c=100}=r,{displaypercentage:p}=r,{size:l="m"}=r,{branded:d}=r;return e.$$set=e=>{s(5,r=n(n({},r),x(e))),s(6,t=v(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,p=e.displaypercentage),"size"in e&&s(7,l=e.size),"branded"in e&&s(8,d=e.branded)},r=x(r),[i,o,c,p,function(e){const r=["mc-progressbar"];return e&&r.push("mc-progressbar--percent"),i>=51&&r.push("mc-progressbar--half"),"s"===l?r.push("mc-progressbar--s"):"xs"===l&&r.push("mc-progressbar--xs"),d&&r.push("mc-progressbar--branded"),r.join(" ")},r,t,l,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:#cccccc;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__indicator{border-radius:4px;overflow:hidden}.mc-progressbar__indicator{background-color:#007bb4;height:100%;left:0;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.875rem;line-height:1.2857142857;font-weight:600;color:#191919;position:relative;z-index:1}.mc-progressbar--half .mc-progressbar__percentage{color:#ffffff}.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--branded .mc-progressbar__indicator{background-color:#46a610}',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};
 //# 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    &nbsp;\n  </div>\n  {#if displaypercentage}\n    <div class=\"mc-progressbar__percentage\">{value}%</div>\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.progressbar';\n</style>\n"],"names":[],"mappings":"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"}
+{"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    &nbsp;\n  </div>\n  {#if displaypercentage}\n    <div class=\"mc-progressbar__percentage\">{value}%</div>\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.progressbar';\n</style>\n"],"names":["ctx","insert","target","div","anchor","create_if_block","class","div1_class_value","div1","append","div0","dirty","value","$$props","valuemin","valuemax","displaypercentage","size","branded","classes","push","join"],"mappings":"mOAiD6CA,EAAK,QAAC,uDAA/CC,EAAqDC,EAAAC,EAAAC,kCAAZJ,EAAK,kDAD3CA,EAAiB,IAAAK,EAAAL,OAXXM,MAAAC,EAAAP,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQM,OAAYN,EAAW,sFAQ1E,oHAJiBA,EAAK,wBACLA,EAAQ,wBACRA,EAAQ,gBACRA,EAAK,GAAA,oBAPxBC,EAcKC,EAAAM,EAAAJ,GAbHK,EASKD,EAAAE,mEANYV,EAAK,6BACLA,EAAQ,6BACRA,EAAQ,qBACRA,EAAK,GAAA,KAIjBA,EAAiB,uEAXX,GAAAW,GAAAJ,KAAAA,EAAAP,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQM,QAAK,CAAAA,MAAAC,SAAOP,EAAW,0JAhC/DY,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"}