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

package/public/components/link/Link.nested.js

@@ -0,0 +1,285 @@
+import { P as SvelteComponent, i as init, s as safe_not_equal, Q as append_styles, c as assign, e as element, d as space, t as text, h as set_attributes, z as toggle_class, b as insert, j as append, B as action_destroyer, l as listen, X as set_data_maybe_contenteditable, m as get_spread_update, n as noop, o as detach, H as run_all, p as compute_rest_props, r as get_current_component, q as exclude_internal_props, g as attr, R as null_to_empty, O as bubble } from '../../index-c33b3772.js';
+import { c as createEventForwarder } from '../../EventForward-8492ff62.js';
+
+/* src/components/link/Link.nested.svelte generated by Svelte v3.58.0 */
+
+function add_css(target) {
+	append_styles(target, "svelte-1fxz2qf", ".mc-link.svelte-1fxz2qf{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:inherit;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:inherit;text-decoration:underline;-webkit-transition:color ease 200ms;-o-transition:color ease 200ms;transition:color ease 200ms;gap:0.25rem;color:#000000;position:relative;font-size:1rem;line-height:1.375}.mc-link.svelte-1fxz2qf:focus{outline:none}.mc-link.svelte-1fxz2qf:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-link.is-visited.svelte-1fxz2qf,.mc-link.svelte-1fxz2qf:visited{color:#333333}.mc-link.is-hover.svelte-1fxz2qf,.mc-link.svelte-1fxz2qf:hover{color:#666666}.mc-link.is-active.svelte-1fxz2qf,.mc-link.svelte-1fxz2qf:active{color:#333333}.mc-link.is-disabled.svelte-1fxz2qf{color:#e6e6e6;cursor:not-allowed}.mc-link--s.svelte-1fxz2qf{font-size:0.875rem;line-height:1.2857142857}.mc-link--m.svelte-1fxz2qf{font-size:1rem;line-height:1.375}.mc-link.svelte-1fxz2qf::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-link__icon.svelte-1fxz2qf{display:block;height:1rem;fill:currentColor;-ms-flex-negative:0;flex-shrink:0;width:1rem}.mc-link--light.svelte-1fxz2qf{color:#ffffff}.mc-link--light.is-visited.svelte-1fxz2qf,.mc-link--light.svelte-1fxz2qf:visited{color:#cccccc}.mc-link--light.is-hover.svelte-1fxz2qf,.mc-link--light.svelte-1fxz2qf:hover{color:#999999}.mc-link--light.is-active.svelte-1fxz2qf,.mc-link--light.svelte-1fxz2qf:active{color:#cccccc}.mc-link--light.is-disabled.svelte-1fxz2qf{color:#e6e6e6;cursor:not-allowed}.mc-link--primary.svelte-1fxz2qf{color:#188803}.mc-link--primary.is-visited.svelte-1fxz2qf,.mc-link--primary.svelte-1fxz2qf:visited{color:#006902}.mc-link--primary.is-hover.svelte-1fxz2qf,.mc-link--primary.svelte-1fxz2qf:hover{color:#035010}.mc-link--primary.is-active.svelte-1fxz2qf,.mc-link--primary.svelte-1fxz2qf:active{color:#006902}.mc-link--primary.is-disabled.svelte-1fxz2qf{color:#e6e6e6;cursor:not-allowed}.mc-link--primary-02.svelte-1fxz2qf{color:#494f60}.mc-link--primary-02.is-visited.svelte-1fxz2qf,.mc-link--primary-02.svelte-1fxz2qf:visited{color:#343b4c}.mc-link--primary-02.is-hover.svelte-1fxz2qf,.mc-link--primary-02.svelte-1fxz2qf:hover{color:#171b26}.mc-link--primary-02.is-active.svelte-1fxz2qf,.mc-link--primary-02.svelte-1fxz2qf:active{color:#343b4c}.mc-link--primary-02.is-disabled.svelte-1fxz2qf{color:#e6e6e6;cursor:not-allowed}.mc-link--danger.svelte-1fxz2qf{color:#c61112}.mc-link--danger.is-visited.svelte-1fxz2qf,.mc-link--danger.svelte-1fxz2qf:visited{color:#8c0003}.mc-link--danger.is-hover.svelte-1fxz2qf,.mc-link--danger.svelte-1fxz2qf:hover{color:#530000}.mc-link--danger.is-active.svelte-1fxz2qf,.mc-link--danger.svelte-1fxz2qf:active{color:#8c0003}.mc-link--danger.is-disabled.svelte-1fxz2qf{color:#e6e6e6;cursor:not-allowed}@media screen and (min-width: 680px){.mc-link--s\\@from-m.svelte-1fxz2qf{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-m.svelte-1fxz2qf{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-link--s\\@from-l.svelte-1fxz2qf{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-l.svelte-1fxz2qf{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-link--s\\@from-xl.svelte-1fxz2qf{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xl.svelte-1fxz2qf{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-link--s\\@from-xxl.svelte-1fxz2qf{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xxl.svelte-1fxz2qf{font-size:1rem;line-height:1.375}}");
+}
+
+// (50:2) {#if iconname && iconposition === 'left'}
+function create_if_block_1(ctx) {
+	let span;
+	let raw_value = `<${generateIconName(/*iconname*/ ctx[6])} />` + "";
+	let span_class_value;
+
+	return {
+		c() {
+			span = element("span");
+			attr(span, "class", span_class_value = "" + (null_to_empty(generateIconClass(/*iconposition*/ ctx[7])) + " svelte-1fxz2qf"));
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			span.innerHTML = raw_value;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*iconname*/ 64 && raw_value !== (raw_value = `<${generateIconName(/*iconname*/ ctx[6])} />` + "")) span.innerHTML = raw_value;
+			if (dirty & /*iconposition*/ 128 && span_class_value !== (span_class_value = "" + (null_to_empty(generateIconClass(/*iconposition*/ ctx[7])) + " svelte-1fxz2qf"))) {
+				attr(span, "class", span_class_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (58:2) {#if iconname && iconposition === 'right'}
+function create_if_block(ctx) {
+	let span;
+	let raw_value = `<${generateIconName(/*iconname*/ ctx[6])} />` + "";
+	let span_class_value;
+
+	return {
+		c() {
+			span = element("span");
+			attr(span, "class", span_class_value = "" + (null_to_empty(generateIconClass(/*iconposition*/ ctx[7])) + " svelte-1fxz2qf"));
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			span.innerHTML = raw_value;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*iconname*/ 64 && raw_value !== (raw_value = `<${generateIconName(/*iconname*/ ctx[6])} />` + "")) span.innerHTML = raw_value;
+			if (dirty & /*iconposition*/ 128 && span_class_value !== (span_class_value = "" + (null_to_empty(generateIconClass(/*iconposition*/ ctx[7])) + " svelte-1fxz2qf"))) {
+				attr(span, "class", span_class_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let a;
+	let t0;
+	let t1;
+	let t2;
+	let a_class_value;
+	let mounted;
+	let dispose;
+	let if_block0 = /*iconname*/ ctx[6] && /*iconposition*/ ctx[7] === 'left' && create_if_block_1(ctx);
+	let if_block1 = /*iconname*/ ctx[6] && /*iconposition*/ ctx[7] === 'right' && create_if_block(ctx);
+
+	let a_levels = [
+		{ href: /*href*/ ctx[1] },
+		{ target: /*target*/ ctx[2] },
+		{
+			class: a_class_value = "" + (setClasses(/*theme*/ ctx[3], /*size*/ ctx[5]) + " " + (/*disabled*/ ctx[4] ? 'is-disabled' : '') + " " + /*userClass*/ ctx[9])
+		},
+		/*attributes*/ ctx[8]
+	];
+
+	let a_data = {};
+
+	for (let i = 0; i < a_levels.length; i += 1) {
+		a_data = assign(a_data, a_levels[i]);
+	}
+
+	return {
+		c() {
+			a = element("a");
+			if (if_block0) if_block0.c();
+			t0 = space();
+			t1 = text(/*label*/ ctx[0]);
+			t2 = space();
+			if (if_block1) if_block1.c();
+			set_attributes(a, a_data);
+			toggle_class(a, "svelte-1fxz2qf", true);
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+			if (if_block0) if_block0.m(a, null);
+			append(a, t0);
+			append(a, t1);
+			append(a, t2);
+			if (if_block1) if_block1.m(a, null);
+
+			if (!mounted) {
+				dispose = [
+					action_destroyer(/*forwardEvents*/ ctx[10].call(null, a)),
+					listen(a, "click", /*click_handler*/ ctx[11])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (/*iconname*/ ctx[6] && /*iconposition*/ ctx[7] === 'left') {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_1(ctx);
+					if_block0.c();
+					if_block0.m(a, t0);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (dirty & /*label*/ 1) set_data_maybe_contenteditable(t1, /*label*/ ctx[0], a_data['contenteditable']);
+
+			if (/*iconname*/ ctx[6] && /*iconposition*/ ctx[7] === 'right') {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block(ctx);
+					if_block1.c();
+					if_block1.m(a, null);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			set_attributes(a, a_data = get_spread_update(a_levels, [
+				dirty & /*href*/ 2 && { href: /*href*/ ctx[1] },
+				dirty & /*target*/ 4 && { target: /*target*/ ctx[2] },
+				dirty & /*theme, size, disabled, userClass*/ 568 && a_class_value !== (a_class_value = "" + (setClasses(/*theme*/ ctx[3], /*size*/ ctx[5]) + " " + (/*disabled*/ ctx[4] ? 'is-disabled' : '') + " " + /*userClass*/ ctx[9])) && { class: a_class_value },
+				dirty & /*attributes*/ 256 && /*attributes*/ ctx[8]
+			]));
+
+			toggle_class(a, "svelte-1fxz2qf", true);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(a);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function generateIconName(iconName) {
+	return `${iconName} size="1rem"`;
+}
+
+function generateIconClass(iconposition) {
+	const classes = ['mc-link__icon'];
+
+	if (iconposition === 'left') {
+		classes.push('mc-link__icon--left');
+	}
+
+	if (iconposition === 'right') {
+		classes.push('mc-link__icon--right');
+	}
+
+	return classes.join(' ');
+}
+
+function setClasses(theme, size) {
+	const classes = ['mc-link'];
+
+	if (theme) {
+		classes.push(`mc-link--${theme}`);
+	}
+
+	if (size) {
+		classes.push(`mc-link--${size}`);
+	}
+
+	return classes.join(' ');
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let userClass;
+	let attributes;
+	const omit_props_names = ["label","href","target","theme","disabled","size","iconname","iconposition"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { label } = $$props;
+	let { href } = $$props;
+	let { target } = $$props;
+	let { theme = undefined } = $$props;
+	let { disabled = false } = $$props;
+	let { size = 'm' } = $$props;
+	let { iconname = undefined } = $$props;
+	let { iconposition = undefined } = $$props;
+	const forwardEvents = createEventForwarder(get_current_component());
+
+	function click_handler(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	$$self.$$set = $$new_props => {
+		$$invalidate(13, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+		$$invalidate(12, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('label' in $$new_props) $$invalidate(0, label = $$new_props.label);
+		if ('href' in $$new_props) $$invalidate(1, href = $$new_props.href);
+		if ('target' in $$new_props) $$invalidate(2, target = $$new_props.target);
+		if ('theme' in $$new_props) $$invalidate(3, theme = $$new_props.theme);
+		if ('disabled' in $$new_props) $$invalidate(4, disabled = $$new_props.disabled);
+		if ('size' in $$new_props) $$invalidate(5, size = $$new_props.size);
+		if ('iconname' in $$new_props) $$invalidate(6, iconname = $$new_props.iconname);
+		if ('iconposition' in $$new_props) $$invalidate(7, iconposition = $$new_props.iconposition);
+	};
+
+	$$self.$$.update = () => {
+		$$invalidate(9, userClass = $$props.class);
+		$$invalidate(8, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 256) {
+			delete attributes.class;
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+
+	return [
+		label,
+		href,
+		target,
+		theme,
+		disabled,
+		size,
+		iconname,
+		iconposition,
+		attributes,
+		userClass,
+		forwardEvents,
+		click_handler
+	];
+}
+
+class Link_nested extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				label: 0,
+				href: 1,
+				target: 2,
+				theme: 3,
+				disabled: 4,
+				size: 5,
+				iconname: 6,
+				iconposition: 7
+			},
+			add_css
+		);
+	}
+}
+
+export { Link_nested as default };
+//# sourceMappingURL=Link.nested.js.map

package/public/components/link/Link.nested.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.nested.js","sources":["../../../src/components/link/Link.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import type { LinkIconPosition, LinkSize, LinkTheme } from './link.types';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let label: string;\n  export let href: string;\n  export let target: string;\n  export let theme: LinkTheme = undefined;\n  export let disabled = false;\n  export let size: LinkSize = 'm';\n  export let iconname: string | undefined = undefined;\n  export let iconposition: LinkIconPosition | undefined = undefined;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function generateIconName(iconName: string): string {\n    return `${iconName} size=\"1rem\"`;\n  }\n\n  function generateIconClass(iconposition: string): string {\n    const classes = ['mc-link__icon'];\n\n    if (iconposition === 'left') {\n      classes.push('mc-link__icon--left');\n    }\n\n    if (iconposition === 'right') {\n      classes.push('mc-link__icon--right');\n    }\n    return classes.join(' ');\n  }\n\n  function setClasses(theme: LinkTheme, size: LinkSize): string {\n    const classes = ['mc-link'];\n\n    if (theme) {\n      classes.push(`mc-link--${theme}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  use:forwardEvents\n  on:click\n  {href}\n  {target}\n  class=\"{setClasses(theme, size)} {disabled ? 'is-disabled' : ''} {userClass}\"\n  {...attributes}\n>\n  {#if iconname && iconposition === 'left'}\n    <span class={generateIconClass(iconposition)}>\n      {@html `<${generateIconName(iconname)} />`}\n    </span>\n  {/if}\n\n  {label}\n\n  {#if iconname && iconposition === 'right'}\n    <span class={generateIconClass(iconposition)}>\n      {@html `<${generateIconName(iconname)} />`}\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.links';\n</style>\n"],"names":[],"mappings":"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"}

package/public/components/link/Link.nested.svelte

@@ -0,0 +1,78 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import type { LinkIconPosition, LinkSize, LinkTheme } from './link.types';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  export let label: string;
+  export let href: string;
+  export let target: string;
+  export let theme: LinkTheme = undefined;
+  export let disabled = false;
+  export let size: LinkSize = 'm';
+  export let iconname: string | undefined = undefined;
+  export let iconposition: LinkIconPosition | undefined = undefined;
+
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function generateIconName(iconName: string): string {
+    return `${iconName} size="1rem"`;
+  }
+
+  function generateIconClass(iconposition: string): string {
+    const classes = ['mc-link__icon'];
+
+    if (iconposition === 'left') {
+      classes.push('mc-link__icon--left');
+    }
+
+    if (iconposition === 'right') {
+      classes.push('mc-link__icon--right');
+    }
+    return classes.join(' ');
+  }
+
+  function setClasses(theme: LinkTheme, size: LinkSize): string {
+    const classes = ['mc-link'];
+
+    if (theme) {
+      classes.push(`mc-link--${theme}`);
+    }
+    if (size) {
+      classes.push(`mc-link--${size}`);
+    }
+    return classes.join(' ');
+  }
+</script>
+
+<a
+  use:forwardEvents
+  on:click
+  {href}
+  {target}
+  class="{setClasses(theme, size)} {disabled ? 'is-disabled' : ''} {userClass}"
+  {...attributes}
+>
+  {#if iconname && iconposition === 'left'}
+    <span class={generateIconClass(iconposition)}>
+      {@html `<${generateIconName(iconname)} />`}
+    </span>
+  {/if}
+
+  {label}
+
+  {#if iconname && iconposition === 'right'}
+    <span class={generateIconClass(iconposition)}>
+      {@html `<${generateIconName(iconname)} />`}
+    </span>
+  {/if}
+</a>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.links';
+</style>