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

package/public/components/kpi/Kpi.js

@@ -1,2 +1,405 @@
-import{S as e,i,a as t,b as c,f as l,s as o,e as r,d as n,t as a,n as p,g as m,j as s,k as d,o as k}from"../../index-c33b3772.js";function u(e){let i,t;return{c(){i=r("span"),t=a(e[3]),m(i,"class","mc-kpi__label")},m(e,l){c(e,i,l),s(i,t)},p(e,i){8&i&&d(t,e[3])},d(e){e&&k(i)}}}function b(e){let i,t;return{c(){i=r("span"),t=a(e[3]),m(i,"class","mc-kpi__label")},m(e,l){c(e,i,l),s(i,t)},p(e,i){8&i&&d(t,e[3])},d(e){e&&k(i)}}}function x(e){let i,t,l=e[5]&&g(e),o=e[1]&&f(e);return{c(){i=r("div"),l&&l.c(),t=n(),o&&o.c(),m(i,"class","mc-kpi__aside")},m(e,r){c(e,i,r),l&&l.m(i,null),s(i,t),o&&o.m(i,null)},p(e,c){e[5]?l?l.p(e,c):(l=g(e),l.c(),l.m(i,t)):l&&(l.d(1),l=null),e[1]?o?o.p(e,c):(o=f(e),o.c(),o.m(i,null)):o&&(o.d(1),o=null)},d(e){e&&k(i),l&&l.d(),o&&o.d()}}}function g(e){let i,t;return{c(){i=r("span"),t=a(e[5]),m(i,"class","mc-kpi__detail")},m(e,l){c(e,i,l),s(i,t)},p(e,i){32&i&&d(t,e[5])},d(e){e&&k(i)}}}function f(e){let i,t=`<${h(e[1],e[2])} />`;return{c(){i=r("span"),m(i,"class","mc-kpi__icon")},m(e,l){c(e,i,l),i.innerHTML=t},p(e,c){6&c&&t!==(t=`<${h(e[1],e[2])} />`)&&(i.innerHTML=t)},d(e){e&&k(i)}}}function _(e){let i,t,l,o,g,f,_,h,$,v=e[7]&&u(e),y=!e[7]&&b(e),w=(e[1]||e[5])&&x(e);return{c(){i=r("div"),v&&v.c(),t=n(),l=r("div"),o=r("div"),y&&y.c(),g=n(),f=r("span"),_=a(e[0]),h=n(),w&&w.c(),this.c=p,m(f,"class","mc-kpi__value"),m(o,"class","mc-kpi__main"),m(l,"class","mc-kpi__content"),m(i,"class",$="mc-kpi mc-kpi--"+e[6]()+" mc-kpi--"+e[4])},m(e,r){c(e,i,r),v&&v.m(i,null),s(i,t),s(i,l),s(l,o),y&&y.m(o,null),s(o,g),s(o,f),s(f,_),s(l,h),w&&w.m(l,null)},p(e,[c]){e[7]?v?v.p(e,c):(v=u(e),v.c(),v.m(i,t)):v&&(v.d(1),v=null),e[7]?y&&(y.d(1),y=null):y?y.p(e,c):(y=b(e),y.c(),y.m(o,g)),1&c&&d(_,e[0]),e[1]||e[5]?w?w.p(e,c):(w=x(e),w.c(),w.m(l,null)):w&&(w.d(1),w=null),80&c&&$!==($="mc-kpi mc-kpi--"+e[6]()+" mc-kpi--"+e[4])&&m(i,"class",$)},i:p,o:p,d(e){e&&k(i),v&&v.d(),y&&y.d(),w&&w.d()}}}function h(e,i){return i?`${e}  fill="${i}"`:`${e}`}function $(e,i,t){let c,l,{value:o=""}=i,{iconname:r=""}=i,{iconcolor:n=""}=i,{label:a=""}=i,{type:p=""}=i,{detail:m=""}=i;return e.$$set=e=>{"value"in e&&t(0,o=e.value),"iconname"in e&&t(1,r=e.iconname),"iconcolor"in e&&t(2,n=e.iconcolor),"label"in e&&t(3,a=e.label),"type"in e&&t(4,p=e.type),"detail"in e&&t(5,m=e.detail)},e.$$.update=()=>{40&e.$$.dirty&&t(6,l=function(){let e="small";return a&&a.length>0&&!m?e="medium":m&&m.length>0&&(e="large"),e}),72&e.$$.dirty&&t(7,c=a&&a.length>0&&"large"!==l())},[o,r,n,a,p,m,l,c]}class v extends e{constructor(e){super();const r=document.createElement("style");r.textContent=".mc-kpi{color:var(--color-kpi-text, #005c91);display:inline-block}.mc-kpi__label{font-size:1.2rem;display:block}.mc-kpi__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-kpi__main{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__value{font-size:1.2rem;font-weight:600}.mc-kpi__aside{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-grey-000, #ffffff);color:var(--color-font-dark, #000000);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__detail{font-size:1.2rem}.mc-kpi__icon{display:block;height:16px;width:16px}.mc-kpi--small .mc-kpi__label{font-size:1rem;margin-bottom:6px;color:var(--color-grey-999, #999999)}.mc-kpi--small .mc-kpi__content{gap:0.5rem}.mc-kpi--small .mc-kpi__value{font-size:0.875rem;line-height:1.2}.mc-kpi--small .mc-kpi__main{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;padding:3px 7px}.mc-kpi--small .mc-kpi__aside{background-color:transparent}.mc-kpi--medium .mc-kpi__label{color:var(--color-grey-999, #999999);margin-bottom:6px}.mc-kpi--medium .mc-kpi__content{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;height:40px;min-width:160px}.mc-kpi--medium .mc-kpi__main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:2px 2px 2px 7px}.mc-kpi--medium .mc-kpi__value{font-size:1.5rem}.mc-kpi--medium .mc-kpi__aside{padding-left:12px;padding-right:15px}.mc-kpi--large{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden}.mc-kpi--large .mc-kpi__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:160px;min-height:100px}.mc-kpi--large .mc-kpi__main{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:10px 15px;min-height:5rem}.mc-kpi--large .mc-kpi__label{line-height:1.5;font-size:1rem}.mc-kpi--large .mc-kpi__value{font-size:2rem}.mc-kpi--large .mc-kpi__detail{font-size:1rem;line-height:1}.mc-kpi--large .mc-kpi__aside{min-height:3rem;padding-right:15px;padding-left:15px;gap:12px}.mc-kpi--information{--color-kpi-background:#daeff7;--color-kpi-border:#007bb4;--color-kpi-text:#005c91}.mc-kpi--warning{--color-kpi-background:#fdf1e8;--color-kpi-border:#c65200;--color-kpi-text:#8c3500}.mc-kpi--danger{--color-kpi-background:#fdeaea;--color-kpi-border:#c61112;--color-kpi-text:#8c0003}.mc-kpi--success{--color-kpi-background:#ebf5de;--color-kpi-border:#188803;--color-kpi-text:#006902}.mc-kpi--neutral{--color-kpi-background:#e6e6e6;--color-kpi-border:#666666;--color-kpi-text:#4d4d4d}",this.shadowRoot.appendChild(r),i(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},$,_,o,{value:0,iconname:1,iconcolor:2,label:3,type:4,detail:5},null),e&&(e.target&&c(e.target,this,e.anchor),e.props&&(this.$set(e.props),l()))}static get observedAttributes(){return["value","iconname","iconcolor","label","type","detail"]}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),l()}get iconname(){return this.$$.ctx[1]}set iconname(e){this.$$set({iconname:e}),l()}get iconcolor(){return this.$$.ctx[2]}set iconcolor(e){this.$$set({iconcolor:e}),l()}get label(){return this.$$.ctx[3]}set label(e){this.$$set({label:e}),l()}get type(){return this.$$.ctx[4]}set type(e){this.$$set({type:e}),l()}get detail(){return this.$$.ctx[5]}set detail(e){this.$$set({detail:e}),l()}}export{v 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, e as element, d as space, t as text, n as noop, g as attr, j as append, k as set_data, o as detach } from '../../index-c33b3772.js';
+
+/* src/components/kpi/Kpi.svelte generated by Svelte v3.58.0 */
+
+function create_if_block_4(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*label*/ ctx[3]);
+			attr(span, "class", "mc-kpi__label");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*label*/ 8) set_data(t, /*label*/ ctx[3]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (31:6) {#if !labelOutsideContent}
+function create_if_block_3(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*label*/ ctx[3]);
+			attr(span, "class", "mc-kpi__label");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*label*/ 8) set_data(t, /*label*/ ctx[3]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (36:4) {#if iconname || detail}
+function create_if_block(ctx) {
+	let div;
+	let t;
+	let if_block0 = /*detail*/ ctx[5] && create_if_block_2(ctx);
+	let if_block1 = /*iconname*/ ctx[1] && create_if_block_1(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block0) if_block0.c();
+			t = space();
+			if (if_block1) if_block1.c();
+			attr(div, "class", "mc-kpi__aside");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block0) if_block0.m(div, null);
+			append(div, t);
+			if (if_block1) if_block1.m(div, null);
+		},
+		p(ctx, dirty) {
+			if (/*detail*/ ctx[5]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_2(ctx);
+					if_block0.c();
+					if_block0.m(div, t);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (/*iconname*/ ctx[1]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block_1(ctx);
+					if_block1.c();
+					if_block1.m(div, null);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+		}
+	};
+}
+
+// (38:8) {#if detail}
+function create_if_block_2(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*detail*/ ctx[5]);
+			attr(span, "class", "mc-kpi__detail");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*detail*/ 32) set_data(t, /*detail*/ ctx[5]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (41:8) {#if iconname}
+function create_if_block_1(ctx) {
+	let span;
+	let raw_value = `<${generateIconName(/*iconname*/ ctx[1], /*iconcolor*/ ctx[2])} />` + "";
+
+	return {
+		c() {
+			span = element("span");
+			attr(span, "class", "mc-kpi__icon");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			span.innerHTML = raw_value;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*iconname, iconcolor*/ 6 && raw_value !== (raw_value = `<${generateIconName(/*iconname*/ ctx[1], /*iconcolor*/ ctx[2])} />` + "")) span.innerHTML = raw_value;		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div2;
+	let t0;
+	let div1;
+	let div0;
+	let t1;
+	let span;
+	let t2;
+	let t3;
+	let div2_class_value;
+	let if_block0 = /*labelOutsideContent*/ ctx[7] && create_if_block_4(ctx);
+	let if_block1 = !/*labelOutsideContent*/ ctx[7] && create_if_block_3(ctx);
+	let if_block2 = (/*iconname*/ ctx[1] || /*detail*/ ctx[5]) && create_if_block(ctx);
+
+	return {
+		c() {
+			div2 = element("div");
+			if (if_block0) if_block0.c();
+			t0 = space();
+			div1 = element("div");
+			div0 = element("div");
+			if (if_block1) if_block1.c();
+			t1 = space();
+			span = element("span");
+			t2 = text(/*value*/ ctx[0]);
+			t3 = space();
+			if (if_block2) if_block2.c();
+			this.c = noop;
+			attr(span, "class", "mc-kpi__value");
+			attr(div0, "class", "mc-kpi__main");
+			attr(div1, "class", "mc-kpi__content");
+			attr(div2, "class", div2_class_value = "mc-kpi mc-kpi--" + /*size*/ ctx[6]() + " mc-kpi--" + /*type*/ ctx[4]);
+		},
+		m(target, anchor) {
+			insert(target, div2, anchor);
+			if (if_block0) if_block0.m(div2, null);
+			append(div2, t0);
+			append(div2, div1);
+			append(div1, div0);
+			if (if_block1) if_block1.m(div0, null);
+			append(div0, t1);
+			append(div0, span);
+			append(span, t2);
+			append(div1, t3);
+			if (if_block2) if_block2.m(div1, null);
+		},
+		p(ctx, [dirty]) {
+			if (/*labelOutsideContent*/ ctx[7]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_4(ctx);
+					if_block0.c();
+					if_block0.m(div2, t0);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (!/*labelOutsideContent*/ ctx[7]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block_3(ctx);
+					if_block1.c();
+					if_block1.m(div0, t1);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*value*/ 1) set_data(t2, /*value*/ ctx[0]);
+
+			if (/*iconname*/ ctx[1] || /*detail*/ ctx[5]) {
+				if (if_block2) {
+					if_block2.p(ctx, dirty);
+				} else {
+					if_block2 = create_if_block(ctx);
+					if_block2.c();
+					if_block2.m(div1, null);
+				}
+			} else if (if_block2) {
+				if_block2.d(1);
+				if_block2 = null;
+			}
+
+			if (dirty & /*size, type*/ 80 && div2_class_value !== (div2_class_value = "mc-kpi mc-kpi--" + /*size*/ ctx[6]() + " mc-kpi--" + /*type*/ ctx[4])) {
+				attr(div2, "class", div2_class_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div2);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			if (if_block2) if_block2.d();
+		}
+	};
+}
+
+function generateIconName(iconname, iconcolor) {
+	return iconcolor
+	? `${iconname}  fill="${iconcolor}"`
+	: `${iconname}`;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let labelOutsideContent;
+	let size;
+	let { value = '' } = $$props;
+	let { iconname = '' } = $$props;
+	let { iconcolor = '' } = $$props;
+	let { label = '' } = $$props;
+	let { type = '' } = $$props;
+	let { detail = '' } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('value' in $$props) $$invalidate(0, value = $$props.value);
+		if ('iconname' in $$props) $$invalidate(1, iconname = $$props.iconname);
+		if ('iconcolor' in $$props) $$invalidate(2, iconcolor = $$props.iconcolor);
+		if ('label' in $$props) $$invalidate(3, label = $$props.label);
+		if ('type' in $$props) $$invalidate(4, type = $$props.type);
+		if ('detail' in $$props) $$invalidate(5, detail = $$props.detail);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*label, detail*/ 40) {
+			$$invalidate(6, size = function getSize() {
+				let size = 'small';
+
+				if (label && label.length > 0 && !detail) {
+					size = 'medium';
+				} else if (detail && detail.length > 0) {
+					size = 'large';
+				}
+
+				return size;
+			});
+		}
+
+		if ($$self.$$.dirty & /*label, size*/ 72) {
+			$$invalidate(7, labelOutsideContent = label && label.length > 0 && size() !== 'large');
+		}
+	};
+
+	return [value, iconname, iconcolor, label, type, detail, size, labelOutsideContent];
+}
+
+class Kpi extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-kpi{color:var(--color-kpi-text, #005c91);display:inline-block}.mc-kpi__label{font-size:1.2rem;display:block}.mc-kpi__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-kpi__main{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__value{font-size:1.2rem;font-weight:600}.mc-kpi__aside{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-grey-000, #ffffff);color:var(--color-font-dark, #000000);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__detail{font-size:1.2rem}.mc-kpi__icon{display:block;height:16px;width:16px}.mc-kpi--small .mc-kpi__label{font-size:1rem;margin-bottom:6px;color:var(--color-grey-999, #999999)}.mc-kpi--small .mc-kpi__content{gap:0.5rem}.mc-kpi--small .mc-kpi__value{font-size:0.875rem;line-height:1.2}.mc-kpi--small .mc-kpi__main{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;padding:3px 7px}.mc-kpi--small .mc-kpi__aside{background-color:transparent}.mc-kpi--medium .mc-kpi__label{color:var(--color-grey-999, #999999);margin-bottom:6px}.mc-kpi--medium .mc-kpi__content{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;height:40px;min-width:160px}.mc-kpi--medium .mc-kpi__main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:2px 2px 2px 7px}.mc-kpi--medium .mc-kpi__value{font-size:1.5rem}.mc-kpi--medium .mc-kpi__aside{padding-left:12px;padding-right:15px}.mc-kpi--large{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden}.mc-kpi--large .mc-kpi__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:160px;min-height:100px}.mc-kpi--large .mc-kpi__main{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:10px 15px;min-height:5rem}.mc-kpi--large .mc-kpi__label{line-height:1.5;font-size:1rem}.mc-kpi--large .mc-kpi__value{font-size:2rem}.mc-kpi--large .mc-kpi__detail{font-size:1rem;line-height:1}.mc-kpi--large .mc-kpi__aside{min-height:3rem;padding-right:15px;padding-left:15px;gap:12px}.mc-kpi--information{--color-kpi-background:#daeff7;--color-kpi-border:#007bb4;--color-kpi-text:#005c91}.mc-kpi--warning{--color-kpi-background:#fdf1e8;--color-kpi-border:#c65200;--color-kpi-text:#8c3500}.mc-kpi--danger{--color-kpi-background:#fdeaea;--color-kpi-border:#c61112;--color-kpi-text:#8c0003}.mc-kpi--success{--color-kpi-background:#ebf5de;--color-kpi-border:#188803;--color-kpi-text:#006902}.mc-kpi--neutral{--color-kpi-background:#e6e6e6;--color-kpi-border:#666666;--color-kpi-text:#4d4d4d}`;
+		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,
+				iconname: 1,
+				iconcolor: 2,
+				label: 3,
+				type: 4,
+				detail: 5
+			},
+			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", "iconname", "iconcolor", "label", "type", "detail"];
+	}
+
+	get value() {
+		return this.$$.ctx[0];
+	}
+
+	set value(value) {
+		this.$$set({ value });
+		flush();
+	}
+
+	get iconname() {
+		return this.$$.ctx[1];
+	}
+
+	set iconname(iconname) {
+		this.$$set({ iconname });
+		flush();
+	}
+
+	get iconcolor() {
+		return this.$$.ctx[2];
+	}
+
+	set iconcolor(iconcolor) {
+		this.$$set({ iconcolor });
+		flush();
+	}
+
+	get label() {
+		return this.$$.ctx[3];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+
+	get type() {
+		return this.$$.ctx[4];
+	}
+
+	set type(type) {
+		this.$$set({ type });
+		flush();
+	}
+
+	get detail() {
+		return this.$$.ctx[5];
+	}
+
+	set detail(detail) {
+		this.$$set({ detail });
+		flush();
+	}
+}
+
+export { Kpi as default };
 //# sourceMappingURL=Kpi.js.map

package/public/components/kpi/Kpi.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kpi.js","sources":["../../../src/components/kpi/Kpi.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let value: string = '';\n  export let iconname: string = '';\n  export let iconcolor: string = '';\n  export let label: string = '';\n  export let type: string = '';\n  export let detail: string = '';\n  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';\n  $: size = function getSize() {\n    let size = 'small';\n    if (label && label.length > 0 && !detail) {\n      size = 'medium';\n    } else if (detail && detail.length > 0) {\n      size = 'large';\n    }\n\n    return size;\n  };\n\n  function generateIconName(iconname: string, iconcolor?: string): string {\n    return iconcolor ? `${iconname}  fill=\"${iconcolor}\"` : `${iconname}`;\n  }\n</script>\n\n<div class=\"mc-kpi mc-kpi--{size()} mc-kpi--{type}\">\n  {#if labelOutsideContent}\n    <span class=\"mc-kpi__label\">{label}</span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if !labelOutsideContent}\n        <span class=\"mc-kpi__label\">{label}</span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if iconname || detail}\n      <div class=\"mc-kpi__aside\">\n        {#if detail}\n          <span class=\"mc-kpi__detail\">{detail}</span>\n        {/if}\n        {#if iconname}\n          <span class=\"mc-kpi__icon\"\n            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span\n          >\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  .mc-kpi {\n    color: var(--color-kpi-text, #005c91);\n    display: inline-block;\n\n    &__label {\n      font-size: 1.2rem;\n      display: block;\n    }\n\n    &__content {\n      display: flex;\n    }\n\n    &__main {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    &__value {\n      font-size: 1.2rem;\n      font-weight: 600;\n    }\n\n    &__aside {\n      align-items: center;\n      background-color: var(--color-grey-000, #ffffff);\n      color: var(--color-font-dark, #000000);\n      display: flex;\n      justify-content: center;\n    }\n\n    &__detail {\n      font-size: 1.2rem;\n    }\n\n    &__icon {\n      display: block;\n      height: 16px;\n      width: 16px;\n    }\n\n    &--small {\n      .mc-kpi {\n        &__label {\n          font-size: 1rem;\n          margin-bottom: 6px;\n          color: var(--color-grey-999, #999999);\n        }\n\n        &__content {\n          gap: 0.5rem;\n        }\n\n        &__value {\n          font-size: 0.875rem;\n          line-height: 1.2;\n        }\n\n        &__main {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          padding: 3px 7px;\n        }\n\n        &__aside {\n          background-color: transparent;\n        }\n      }\n    }\n\n    &--medium {\n      .mc-kpi {\n        &__label {\n          color: var(--color-grey-999, #999999);\n          margin-bottom: 6px;\n        }\n\n        &__content {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          height: 40px;\n          min-width: 160px;\n        }\n\n        &__main {\n          flex-grow: 1;\n          padding: 2px 2px 2px 7px;\n        }\n\n        &__value {\n          font-size: 1.5rem;\n        }\n\n        &__aside {\n          padding-left: 12px;\n          padding-right: 15px;\n        }\n      }\n    }\n\n    &--large {\n      background-color: var(--color-kpi-background, #daeff7);\n      border: 1px solid var(--color-kpi-border, #007bb4);\n      border-radius: 4px;\n      overflow: hidden;\n\n      .mc-kpi {\n        &__content {\n          flex-direction: column;\n          min-width: 160px;\n          min-height: 100px;\n        }\n\n        &__main {\n          flex-direction: column;\n          padding: 10px 15px;\n          min-height: 5rem;\n        }\n\n        &__label {\n          line-height: 1.5;\n          font-size: 1rem;\n        }\n\n        &__value {\n          font-size: 2rem;\n        }\n\n        &__detail {\n          font-size: 1rem;\n          line-height: 1;\n        }\n\n        &__aside {\n          min-height: 3rem;\n          padding-right: 15px;\n          padding-left: 15px;\n          gap: 12px;\n        }\n      }\n    }\n\n    &--information {\n      --color-kpi-background: #daeff7;\n      --color-kpi-border: #007bb4;\n      --color-kpi-text: #005c91;\n    }\n\n    &--warning {\n      --color-kpi-background: #fdf1e8;\n      --color-kpi-border: #c65200;\n      --color-kpi-text: #8c3500;\n    }\n\n    &--danger {\n      --color-kpi-background: #fdeaea;\n      --color-kpi-border: #c61112;\n      --color-kpi-text: #8c0003;\n    }\n\n    &--success {\n      --color-kpi-background: #ebf5de;\n      --color-kpi-border: #188803;\n      --color-kpi-text: #006902;\n    }\n\n    &--neutral {\n      --color-kpi-background: #e6e6e6;\n      --color-kpi-border: #666666;\n      --color-kpi-text: #4d4d4d;\n    }\n  }\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block_2","create_if_block_1","div","generateIconName","innerHTML","raw_value","create_if_block_4","create_if_block_3","if_block2","create_if_block","attr","div2","div2_class_value","append","div1","div0","dirty","iconname","iconcolor","value","$$props","label","type","detail","$$invalidate","size","length","labelOutsideContent"],"mappings":"mLA4BiCA,EAAK,yCAAlCC,EAAyCC,EAAAC,EAAAC,2BAAZJ,EAAK,qEAKDA,EAAK,yCAAlCC,EAAyCC,EAAAC,EAAAC,2BAAZJ,EAAK,4CAM7BA,EAAM,IAAAK,EAAAL,KAGNA,EAAQ,IAAAM,EAAAN,sFAJfC,EASKC,EAAAK,EAAAH,gDAREJ,EAAM,yDAGNA,EAAQ,+IAFmBA,EAAM,0CAApCC,EAA2CC,EAAAC,EAAAC,4BAAbJ,EAAM,8CAItBQ,EAAiBR,EAAQ,GAAEA,EAAS,oEADlDC,EAEAC,EAAAC,EAAAC,yCADcI,EAAiBR,EAAQ,GAAEA,EAAS,YAAAG,EAAAM,UAAAC,yDAjBrDV,EAAmB,IAAAW,EAAAX,MAKdA,EAAmB,IAAAY,EAAAZ,GAKtBa,GAAAb,MAAYA,EAAM,KAAAc,EAAAd,6FAFQA,EAAK,oHATZe,EAAAC,EAAA,QAAAC,EAAA,kBAAAjB,mBAAiBA,EAAI,YAAjDC,EAwBKC,EAAAc,EAAAZ,yBApBHc,EAmBKF,EAAAG,GAlBHD,EAKKC,EAAAC,yBADHF,EAAyCE,EAAAjB,0CARxCH,EAAmB,yDAKdA,EAAmB,kEAGIA,EAAK,IAE/BA,MAAYA,EAAM,4DAXC,GAAAqB,GAAAJ,KAAAA,EAAA,kBAAAjB,mBAAiBA,EAAI,gFALtCQ,EAAiBc,EAAkBC,UACnCA,EAAe,GAAAD,YAAmBC,QAAkBD,+BAnBlDE,MAAAA,EAAgB,IAAEC,GAClBH,SAAAA,EAAmB,IAAEG,GACrBF,UAAAA,EAAoB,IAAEE,GACtBC,MAAAA,EAAgB,IAAED,GAClBE,KAAAA,EAAe,IAAEF,GACjBG,OAAAA,EAAiB,IAAEH,4OAE7BI,EAAA,EAAEC,EAAI,WACD,IAAAA,EAAO,eACPJ,GAASA,EAAMK,OAAS,IAAMH,EAChCE,EAAO,SACEF,GAAUA,EAAOG,OAAS,IACnCD,EAAO,SAGFA,mBATND,EAAA,EAAAG,EAAsBN,GAASA,EAAMK,OAAS,GAAgB,UAAXD"}
+{"version":3,"file":"Kpi.js","sources":["../../../src/components/kpi/Kpi.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let value: string = '';\n  export let iconname: string = '';\n  export let iconcolor: string = '';\n  export let label: string = '';\n  export let type: string = '';\n  export let detail: string = '';\n  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';\n  $: size = function getSize() {\n    let size = 'small';\n    if (label && label.length > 0 && !detail) {\n      size = 'medium';\n    } else if (detail && detail.length > 0) {\n      size = 'large';\n    }\n\n    return size;\n  };\n\n  function generateIconName(iconname: string, iconcolor?: string): string {\n    return iconcolor ? `${iconname}  fill=\"${iconcolor}\"` : `${iconname}`;\n  }\n</script>\n\n<div class=\"mc-kpi mc-kpi--{size()} mc-kpi--{type}\">\n  {#if labelOutsideContent}\n    <span class=\"mc-kpi__label\">{label}</span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if !labelOutsideContent}\n        <span class=\"mc-kpi__label\">{label}</span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if iconname || detail}\n      <div class=\"mc-kpi__aside\">\n        {#if detail}\n          <span class=\"mc-kpi__detail\">{detail}</span>\n        {/if}\n        {#if iconname}\n          <span class=\"mc-kpi__icon\"\n            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span\n          >\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  .mc-kpi {\n    color: var(--color-kpi-text, #005c91);\n    display: inline-block;\n\n    &__label {\n      font-size: 1.2rem;\n      display: block;\n    }\n\n    &__content {\n      display: flex;\n    }\n\n    &__main {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    &__value {\n      font-size: 1.2rem;\n      font-weight: 600;\n    }\n\n    &__aside {\n      align-items: center;\n      background-color: var(--color-grey-000, #ffffff);\n      color: var(--color-font-dark, #000000);\n      display: flex;\n      justify-content: center;\n    }\n\n    &__detail {\n      font-size: 1.2rem;\n    }\n\n    &__icon {\n      display: block;\n      height: 16px;\n      width: 16px;\n    }\n\n    &--small {\n      .mc-kpi {\n        &__label {\n          font-size: 1rem;\n          margin-bottom: 6px;\n          color: var(--color-grey-999, #999999);\n        }\n\n        &__content {\n          gap: 0.5rem;\n        }\n\n        &__value {\n          font-size: 0.875rem;\n          line-height: 1.2;\n        }\n\n        &__main {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          padding: 3px 7px;\n        }\n\n        &__aside {\n          background-color: transparent;\n        }\n      }\n    }\n\n    &--medium {\n      .mc-kpi {\n        &__label {\n          color: var(--color-grey-999, #999999);\n          margin-bottom: 6px;\n        }\n\n        &__content {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          height: 40px;\n          min-width: 160px;\n        }\n\n        &__main {\n          flex-grow: 1;\n          padding: 2px 2px 2px 7px;\n        }\n\n        &__value {\n          font-size: 1.5rem;\n        }\n\n        &__aside {\n          padding-left: 12px;\n          padding-right: 15px;\n        }\n      }\n    }\n\n    &--large {\n      background-color: var(--color-kpi-background, #daeff7);\n      border: 1px solid var(--color-kpi-border, #007bb4);\n      border-radius: 4px;\n      overflow: hidden;\n\n      .mc-kpi {\n        &__content {\n          flex-direction: column;\n          min-width: 160px;\n          min-height: 100px;\n        }\n\n        &__main {\n          flex-direction: column;\n          padding: 10px 15px;\n          min-height: 5rem;\n        }\n\n        &__label {\n          line-height: 1.5;\n          font-size: 1rem;\n        }\n\n        &__value {\n          font-size: 2rem;\n        }\n\n        &__detail {\n          font-size: 1rem;\n          line-height: 1;\n        }\n\n        &__aside {\n          min-height: 3rem;\n          padding-right: 15px;\n          padding-left: 15px;\n          gap: 12px;\n        }\n      }\n    }\n\n    &--information {\n      --color-kpi-background: #daeff7;\n      --color-kpi-border: #007bb4;\n      --color-kpi-text: #005c91;\n    }\n\n    &--warning {\n      --color-kpi-background: #fdf1e8;\n      --color-kpi-border: #c65200;\n      --color-kpi-text: #8c3500;\n    }\n\n    &--danger {\n      --color-kpi-background: #fdeaea;\n      --color-kpi-border: #c61112;\n      --color-kpi-text: #8c0003;\n    }\n\n    &--success {\n      --color-kpi-background: #ebf5de;\n      --color-kpi-border: #188803;\n      --color-kpi-text: #006902;\n    }\n\n    &--neutral {\n      --color-kpi-background: #e6e6e6;\n      --color-kpi-border: #666666;\n      --color-kpi-text: #4d4d4d;\n    }\n  }\n</style>\n"],"names":[],"mappings":"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"}