@iroco/ui 0.7.0 → 0.9.0

package/lib/index.mjs

@@ -169,6 +169,37 @@ function custom_event(type, detail) {
     e.initCustomEvent(type, false, false, detail);
     return e;
 }
+class HtmlTag {
+    constructor(anchor = null) {
+        this.a = anchor;
+        this.e = this.n = null;
+    }
+    m(html, target, anchor = null) {
+        if (!this.e) {
+            this.e = element(target.nodeName);
+            this.t = target;
+            this.h(html);
+        }
+        this.i(anchor);
+    }
+    h(html) {
+        this.e.innerHTML = html;
+        this.n = Array.from(this.e.childNodes);
+    }
+    i(anchor) {
+        for (let i = 0; i < this.n.length; i += 1) {
+            insert(this.t, this.n[i], anchor);
+        }
+    }
+    p(html) {
+        this.d();
+        this.h(html);
+        this.i(this.a);
+    }
+    d() {
+        this.n.forEach(detach);
+    }
+}
 
 let current_component;
 function set_current_component(component) {
@@ -592,7 +623,7 @@ class Button extends SvelteComponent {
 
 /* src/TextInput.svelte generated by Svelte v3.38.2 */
 
-function create_if_block_1$1(ctx) {
+function create_if_block_2(ctx) {
 	let label_1;
 	let t;
 
@@ -620,28 +651,91 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (40:1) {#if error != null}
+// (41:1) {#if error != null}
 function create_if_block$4(ctx) {
 	let p;
-	let t_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "";
-	let t;
+
+	function select_block_type(ctx, dirty) {
+		if (/*htmlError*/ ctx[5]) return create_if_block_1$1;
+		return create_else_block$1;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type(ctx);
 
 	return {
 		c() {
 			p = element("p");
-			t = text(t_value);
+			if_block.c();
 			attr(p, "data-testid", "error");
 			attr(p, "class", "error svelte-11iawkb");
 		},
 		m(target, anchor) {
 			insert(target, p, anchor);
-			append(p, t);
+			if_block.m(p, null);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*error*/ 16 && t_value !== (t_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "")) set_data(t, t_value);
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(p, null);
+				}
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(p);
+			if_block.d();
+		}
+	};
+}
+
+// (45:3) {:else}
+function create_else_block$1(ctx) {
+	let t_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "";
+	let t;
+
+	return {
+		c() {
+			t = text(t_value);
+		},
+		m(target, anchor) {
+			insert(target, t, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*error*/ 16 && t_value !== (t_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(t);
+		}
+	};
+}
+
+// (43:3) {#if htmlError}
+function create_if_block_1$1(ctx) {
+	let html_tag;
+	let raw_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "";
+	let html_anchor;
+
+	return {
+		c() {
+			html_anchor = empty();
+			html_tag = new HtmlTag(html_anchor);
+		},
+		m(target, anchor) {
+			html_tag.m(raw_value, target, anchor);
+			insert(target, html_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*error*/ 16 && raw_value !== (raw_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "")) html_tag.p(raw_value);
+		},
+		d(detaching) {
+			if (detaching) detach(html_anchor);
+			if (detaching) html_tag.d();
 		}
 	};
 }
@@ -653,7 +747,7 @@ function create_fragment$f(ctx) {
 	let t1;
 	let mounted;
 	let dispose;
-	let if_block0 = /*label*/ ctx[2] && create_if_block_1$1(ctx);
+	let if_block0 = /*label*/ ctx[2] && create_if_block_2(ctx);
 	let if_block1 = /*error*/ ctx[4] != null && create_if_block$4(ctx);
 
 	return {
@@ -667,11 +761,11 @@ function create_fragment$f(ctx) {
 			attr(input, "id", /*id*/ ctx[1]);
 			attr(input, "type", "text");
 			attr(input, "placeholder", /*placeholder*/ ctx[3]);
-			input.readOnly = /*readonly*/ ctx[7];
+			input.readOnly = /*readonly*/ ctx[8];
 			attr(input, "class", "svelte-11iawkb");
-			toggle_class(input, "border", /*border*/ ctx[8]);
+			toggle_class(input, "border", /*border*/ ctx[9]);
 			toggle_class(input, "error", /*error*/ ctx[4] !== null);
-			toggle_class(input, "readonlyInput", /*readonly*/ ctx[7] == true);
+			toggle_class(input, "readonlyInput", /*readonly*/ ctx[8] == true);
 			attr(div, "class", "iroco-ui-input svelte-11iawkb");
 		},
 		m(target, anchor) {
@@ -685,15 +779,15 @@ function create_fragment$f(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "input", /*input_handler*/ ctx[12]),
-					listen(input, "input", /*input_input_handler*/ ctx[13]),
+					listen(input, "input", /*input_handler*/ ctx[13]),
+					listen(input, "input", /*input_input_handler*/ ctx[14]),
 					listen(input, "focus", function () {
-						if (is_function(/*onFocus*/ ctx[5])) /*onFocus*/ ctx[5].apply(this, arguments);
+						if (is_function(/*onFocus*/ ctx[6])) /*onFocus*/ ctx[6].apply(this, arguments);
 					}),
 					listen(input, "blur", function () {
-						if (is_function(/*onBlur*/ ctx[6])) /*onBlur*/ ctx[6].apply(this, arguments);
+						if (is_function(/*onBlur*/ ctx[7])) /*onBlur*/ ctx[7].apply(this, arguments);
 					}),
-					action_destroyer(/*typeAction*/ ctx[9].call(null, input))
+					action_destroyer(/*typeAction*/ ctx[10].call(null, input))
 				];
 
 				mounted = true;
@@ -706,7 +800,7 @@ function create_fragment$f(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$1(ctx);
+					if_block0 = create_if_block_2(ctx);
 					if_block0.c();
 					if_block0.m(div, t0);
 				}
@@ -723,24 +817,24 @@ function create_fragment$f(ctx) {
 				attr(input, "placeholder", /*placeholder*/ ctx[3]);
 			}
 
-			if (dirty & /*readonly*/ 128) {
-				input.readOnly = /*readonly*/ ctx[7];
+			if (dirty & /*readonly*/ 256) {
+				input.readOnly = /*readonly*/ ctx[8];
 			}
 
 			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
 				set_input_value(input, /*value*/ ctx[0]);
 			}
 
-			if (dirty & /*border*/ 256) {
-				toggle_class(input, "border", /*border*/ ctx[8]);
+			if (dirty & /*border*/ 512) {
+				toggle_class(input, "border", /*border*/ ctx[9]);
 			}
 
 			if (dirty & /*error*/ 16) {
 				toggle_class(input, "error", /*error*/ ctx[4] !== null);
 			}
 
-			if (dirty & /*readonly*/ 128) {
-				toggle_class(input, "readonlyInput", /*readonly*/ ctx[7] == true);
+			if (dirty & /*readonly*/ 256) {
+				toggle_class(input, "readonlyInput", /*readonly*/ ctx[8] == true);
 			}
 
 			if (/*error*/ ctx[4] != null) {
@@ -782,6 +876,7 @@ function instance$e($$self, $$props, $$invalidate) {
 	let { label = null } = $$props;
 	let { placeholder } = $$props;
 	let { error = null } = $$props;
+	let { htmlError = false } = $$props;
 	let { value = null } = $$props;
 	let { onFocus } = $$props;
 	let { onBlur } = $$props;
@@ -802,17 +897,18 @@ function instance$e($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ("TextType" in $$props) $$invalidate(10, TextType = $$props.TextType);
+		if ("TextType" in $$props) $$invalidate(11, TextType = $$props.TextType);
 		if ("id" in $$props) $$invalidate(1, id = $$props.id);
-		if ("type" in $$props) $$invalidate(11, type = $$props.type);
+		if ("type" in $$props) $$invalidate(12, type = $$props.type);
 		if ("label" in $$props) $$invalidate(2, label = $$props.label);
 		if ("placeholder" in $$props) $$invalidate(3, placeholder = $$props.placeholder);
 		if ("error" in $$props) $$invalidate(4, error = $$props.error);
+		if ("htmlError" in $$props) $$invalidate(5, htmlError = $$props.htmlError);
 		if ("value" in $$props) $$invalidate(0, value = $$props.value);
-		if ("onFocus" in $$props) $$invalidate(5, onFocus = $$props.onFocus);
-		if ("onBlur" in $$props) $$invalidate(6, onBlur = $$props.onBlur);
-		if ("readonly" in $$props) $$invalidate(7, readonly = $$props.readonly);
-		if ("border" in $$props) $$invalidate(8, border = $$props.border);
+		if ("onFocus" in $$props) $$invalidate(6, onFocus = $$props.onFocus);
+		if ("onBlur" in $$props) $$invalidate(7, onBlur = $$props.onBlur);
+		if ("readonly" in $$props) $$invalidate(8, readonly = $$props.readonly);
+		if ("border" in $$props) $$invalidate(9, border = $$props.border);
 	};
 
 	return [
@@ -821,6 +917,7 @@ function instance$e($$self, $$props, $$invalidate) {
 		label,
 		placeholder,
 		error,
+		htmlError,
 		onFocus,
 		onBlur,
 		readonly,
@@ -838,17 +935,18 @@ class TextInput extends SvelteComponent {
 		super();
 
 		init(this, options, instance$e, create_fragment$f, safe_not_equal, {
-			TextType: 10,
+			TextType: 11,
 			id: 1,
-			type: 11,
+			type: 12,
 			label: 2,
 			placeholder: 3,
 			error: 4,
+			htmlError: 5,
 			value: 0,
-			onFocus: 5,
-			onBlur: 6,
-			readonly: 7,
-			border: 8
+			onFocus: 6,
+			onBlur: 7,
+			readonly: 8,
+			border: 9
 		});
 	}
 }
@@ -3996,16 +4094,15 @@ class IconClose extends SvelteComponent {
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[6] = list[i].destination;
-	child_ctx[7] = list[i].name;
+	child_ctx[6] = list[i];
 	return child_ctx;
 }
 
-// (19:2) {#each navigationItems as { destination, name }}
+// (23:2) {#each navigationItems as item}
 function create_each_block$1(ctx) {
 	let li;
 	let a;
-	let t0_value = /*name*/ ctx[7] + "";
+	let t0_value = /*item*/ ctx[6].name + "";
 	let t0;
 	let a_href_value;
 	let t1;
@@ -4013,7 +4110,7 @@ function create_each_block$1(ctx) {
 	let dispose;
 
 	function click_handler_1() {
-		return /*click_handler_1*/ ctx[4](/*destination*/ ctx[6]);
+		return /*click_handler_1*/ ctx[4](/*item*/ ctx[6]);
 	}
 
 	return {
@@ -4022,10 +4119,14 @@ function create_each_block$1(ctx) {
 			a = element("a");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(a, "href", a_href_value = /*destination*/ ctx[6]);
-			attr(a, "class", "svelte-1rx212l");
-			attr(li, "class", "account__sidebar__item svelte-1rx212l");
-			toggle_class(li, "active", /*active*/ ctx[1] === /*destination*/ ctx[6]);
+
+			attr(a, "href", a_href_value = typeof /*item*/ ctx[6].hrefOrCallback === "string"
+			? /*item*/ ctx[6].hrefOrCallback
+			: "#");
+
+			attr(a, "class", "svelte-jkys2k");
+			attr(li, "class", "account__sidebar__item svelte-jkys2k");
+			toggle_class(li, "active", /*active*/ ctx[1] === /*item*/ ctx[6].name);
 		},
 		m(target, anchor) {
 			insert(target, li, anchor);
@@ -4040,14 +4141,16 @@ function create_each_block$1(ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty & /*navigationItems*/ 1 && t0_value !== (t0_value = /*name*/ ctx[7] + "")) set_data(t0, t0_value);
+			if (dirty & /*navigationItems*/ 1 && t0_value !== (t0_value = /*item*/ ctx[6].name + "")) set_data(t0, t0_value);
 
-			if (dirty & /*navigationItems*/ 1 && a_href_value !== (a_href_value = /*destination*/ ctx[6])) {
+			if (dirty & /*navigationItems*/ 1 && a_href_value !== (a_href_value = typeof /*item*/ ctx[6].hrefOrCallback === "string"
+			? /*item*/ ctx[6].hrefOrCallback
+			: "#")) {
 				attr(a, "href", a_href_value);
 			}
 
 			if (dirty & /*active, navigationItems*/ 3) {
-				toggle_class(li, "active", /*active*/ ctx[1] === /*destination*/ ctx[6]);
+				toggle_class(li, "active", /*active*/ ctx[1] === /*item*/ ctx[6].name);
 			}
 		},
 		d(detaching) {
@@ -4087,10 +4190,10 @@ function create_fragment$7(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(button, "class", "account__sidebar__close svelte-1rx212l");
-			attr(ul, "class", "account__sidebar__item_container svelte-1rx212l");
+			attr(button, "class", "account__sidebar__close svelte-jkys2k");
+			attr(ul, "class", "account__sidebar__item_container svelte-jkys2k");
 			attr(nav, "data-testid", "sidebar");
-			attr(nav, "class", "account__sidebar svelte-1rx212l");
+			attr(nav, "class", "account__sidebar svelte-jkys2k");
 		},
 		m(target, anchor) {
 			insert(target, nav, anchor);
@@ -4159,8 +4262,14 @@ function instance$7($$self, $$props, $$invalidate) {
 	let active;
 	const dispatch = createEventDispatcher();
 
-	const handleClickLink = destination => {
-		$$invalidate(1, active = destination);
+	const handleClickLink = menuItem => {
+		$$invalidate(1, active = menuItem.name);
+
+		if (typeof menuItem.hrefOrCallback === "function") {
+			menuItem.hrefOrCallback();
+			return false; // to avoid calling href
+		}
+
 		dispatch("click_link");
 	};
 
@@ -4168,7 +4277,7 @@ function instance$7($$self, $$props, $$invalidate) {
 		bubble($$self, event);
 	}
 
-	const click_handler_1 = destination => handleClickLink(destination);
+	const click_handler_1 = item => handleClickLink(item);
 
 	$$self.$$set = $$props => {
 		if ("navigationItems" in $$props) $$invalidate(0, navigationItems = $$props.navigationItems);
@@ -4344,13 +4453,13 @@ function create_fragment$5(ctx) {
 			t6 = text(/*title*/ ctx[1]);
 			t7 = space();
 			create_component(sidebar.$$.fragment);
-			attr(h10, "class", "svelte-1jgfrsf");
-			attr(div0, "class", "account__navigation--mobile__title-container svelte-1jgfrsf");
-			attr(button, "class", "account__navigation--mobile__button svelte-1jgfrsf");
-			attr(div1, "class", "account__navigation--mobile svelte-1jgfrsf");
-			attr(h11, "class", "svelte-1jgfrsf");
-			attr(div2, "class", "account__navigation__title-container svelte-1jgfrsf");
-			attr(div3, "class", "account__navigation svelte-1jgfrsf");
+			attr(h10, "class", "svelte-1uu9ytm");
+			attr(div0, "class", "account__navigation--mobile__title-container svelte-1uu9ytm");
+			attr(button, "class", "account__navigation--mobile__button svelte-1uu9ytm");
+			attr(div1, "class", "account__navigation--mobile svelte-1uu9ytm");
+			attr(h11, "class", "svelte-1uu9ytm");
+			attr(div2, "class", "account__navigation__title-container svelte-1uu9ytm");
+			attr(div3, "class", "account__navigation svelte-1uu9ytm");
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);

package/lib/index.mjs.css

@@ -16,40 +16,6 @@ svg.svelte-1cuxg7m {
   to {
     transform: rotate(359deg); } }
 
-.data-table.svelte-1ju5y8t {
-  border: 1px solid #464452;
-  width: 100%; }
-
-.data-table__header.svelte-1ju5y8t {
-  font-size: 1.5em;
-  height: 4rem; }
-
-.data-table__header__cell.svelte-1ju5y8t {
-  border-bottom: 1px solid #464452; }
-
-.data-table__body__cell.svelte-1ju5y8t {
-  text-align: center;
-  vertical-align: middle; }
-
-.alert.svelte-1oun6o6 {
-  min-height: 2em;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 0.5em;
-  padding: 0 1em 0 1em;
-  font-size: 1.2em;
-  justify-content: center;
-  margin-bottom: 1em;
-  cursor: pointer; }
-
-.alert--danger.svelte-1oun6o6 {
-  background-color: rgba(255, 80, 77, 0.5);
-  border: 1px solid #ff504d; }
-
-.alert--success.svelte-1oun6o6 {
-  background-color: rgba(0, 214, 146, 0.5);
-  border: 1px solid #00D692; }
-
 .iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
   color: #f2ebe3;
   position: relative;
@@ -288,63 +254,63 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
 .iroco-ui-button.rounded.svelte-hp8sdi {
   border-radius: 10px; }
 
-.account__navigation.svelte-1jgfrsf.svelte-1jgfrsf {
+.account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
   display: block;
   width: 100%;
   border-bottom: 1px solid #464452; }
 
-.account__navigation--mobile.svelte-1jgfrsf.svelte-1jgfrsf {
+.account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
   display: none; }
 
-.account__navigation__title-container.svelte-1jgfrsf.svelte-1jgfrsf {
+.account__navigation__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
   display: flex;
   align-items: center;
   padding-left: 1em; }
 
-.account__navigation__title-container.svelte-1jgfrsf h1.svelte-1jgfrsf {
+.account__navigation__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
   padding-left: 1em; }
 
 @media all and (max-width: 768px) {
-  .account__navigation.svelte-1jgfrsf.svelte-1jgfrsf {
+  .account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
     display: none;
     color: #f2ebe3; }
-  .account__navigation--mobile.svelte-1jgfrsf.svelte-1jgfrsf {
+  .account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
     display: flex;
     padding: 0 1em;
     justify-content: space-between;
     position: fixed;
     top: 0;
+    z-index: 1;
     width: 100%;
     border-bottom: 1px solid #464452; }
-  .account__navigation--mobile.svelte-1jgfrsf h1.svelte-1jgfrsf {
+  .account__navigation--mobile.svelte-1uu9ytm h1.svelte-1uu9ytm {
     font: bold;
     font-size: 2em; }
-  .account__navigation--mobile__button.svelte-1jgfrsf.svelte-1jgfrsf {
+  .account__navigation--mobile__button.svelte-1uu9ytm.svelte-1uu9ytm {
     background-color: transparent;
     border: none;
     color: #464452; }
-  .account__navigation--mobile__title-container.svelte-1jgfrsf.svelte-1jgfrsf {
+  .account__navigation--mobile__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
     display: flex;
     align-items: center; }
-  .account__navigation--mobile__title-container.svelte-1jgfrsf h1.svelte-1jgfrsf {
+  .account__navigation--mobile__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
     padding-left: 0.5em; } }
 
-.account__sidebar.svelte-1rx212l.svelte-1rx212l {
+.account__sidebar.svelte-jkys2k.svelte-jkys2k {
   height: 100%;
   width: 300px;
   position: absolute;
   top: 70px;
-  z-index: 1;
   overflow-x: hidden;
   border-right: 1px solid #464452; }
 
-.account__sidebar__item_container.svelte-1rx212l.svelte-1rx212l {
+.account__sidebar__item_container.svelte-jkys2k.svelte-jkys2k {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%; }
 
-.account__sidebar__item.svelte-1rx212l.svelte-1rx212l {
+.account__sidebar__item.svelte-jkys2k.svelte-jkys2k {
   padding: 2em 2em;
   text-decoration: none;
   font-size: 0.75em;
@@ -353,19 +319,19 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
   border-bottom: 1px solid #464452 a;
   border-bottom-padding-left: 1em; }
 
-.account__sidebar__item.svelte-1rx212l a.svelte-1rx212l {
+.account__sidebar__item.svelte-jkys2k a.svelte-jkys2k {
   color: #f2ebe3;
   font-size: 2em; }
 
-.account__sidebar__close.svelte-1rx212l.svelte-1rx212l {
+.account__sidebar__close.svelte-jkys2k.svelte-jkys2k {
   display: none; }
 
-.account__sidebar.svelte-1rx212l .active.svelte-1rx212l {
+.account__sidebar.svelte-jkys2k .active.svelte-jkys2k {
   border-top: 1px solid #00D692;
   border-bottom: 1px solid #00D692; }
 
 @media all and (max-width: 768px) {
-  .account__sidebar.svelte-1rx212l.svelte-1rx212l {
+  .account__sidebar.svelte-jkys2k.svelte-jkys2k {
     position: fixed;
     background-color: #211D28;
     top: 0;
@@ -375,10 +341,10 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
     padding-top: 2em;
     margin: 0;
     border-right: none; }
-  .account__sidebar__item_container.svelte-1rx212l.svelte-1rx212l {
+  .account__sidebar__item_container.svelte-jkys2k.svelte-jkys2k {
     padding: 0em;
     margin-top: 2rem; }
-  .account__sidebar__close.svelte-1rx212l.svelte-1rx212l {
+  .account__sidebar__close.svelte-jkys2k.svelte-jkys2k {
     display: block;
     position: absolute;
     right: 0;
@@ -392,3 +358,36 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
 @use "fonts";
 @use "forms";
 @use "layouts";
+.data-table.svelte-1ju5y8t {
+  border: 1px solid #464452;
+  width: 100%; }
+
+.data-table__header.svelte-1ju5y8t {
+  font-size: 1.5em;
+  height: 4rem; }
+
+.data-table__header__cell.svelte-1ju5y8t {
+  border-bottom: 1px solid #464452; }
+
+.data-table__body__cell.svelte-1ju5y8t {
+  text-align: center;
+  vertical-align: middle; }
+
+.alert.svelte-1oun6o6 {
+  min-height: 2em;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.5em;
+  padding: 0 1em 0 1em;
+  font-size: 1.2em;
+  justify-content: center;
+  margin-bottom: 1em;
+  cursor: pointer; }
+
+.alert--danger.svelte-1oun6o6 {
+  background-color: rgba(255, 80, 77, 0.5);
+  border: 1px solid #ff504d; }
+
+.alert--success.svelte-1oun6o6 {
+  background-color: rgba(0, 214, 146, 0.5);
+  border: 1px solid #00D692; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroco/ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Iroco design system based on Svelte",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

package/src/Navigation.svelte

@@ -68,6 +68,7 @@
 				justify-content: space-between;
 				position: fixed;
 				top: 0;
+				z-index: 1;
 				width: 100%;
 				border-bottom: 1px solid colors.$mediumGrey;
 

package/src/SideBar.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
 	import IconClose from './IconClose.svelte';
 	import type { NavigationItem } from 'definition';
+	import { createEventDispatcher } from 'svelte';
 
 	export let navigationItems: Array<NavigationItem>;
-	import { createEventDispatcher } from 'svelte';
 
 	let active: string;
-
 	const dispatch = createEventDispatcher();
 
-	const handleClickLink = (destination: string) => {
-	  active = destination;
+	const handleClickLink = (menuItem: NavigationItem) => {
+	  active = menuItem.name;
+	  if (typeof menuItem.hrefOrCallback === "function") {
+	  	menuItem.hrefOrCallback()
+	  	return false // to avoid calling href
+	  }
 	  dispatch('click_link');
 	};
 </script>
@@ -21,9 +24,9 @@
 	</button>
 
 	<ul class="account__sidebar__item_container">
-		{#each navigationItems as { destination, name }}
-			<li class="account__sidebar__item" class:active={active === destination}>
-				<a on:click={() => handleClickLink(destination)} href={destination}> {name}</a>
+		{#each navigationItems as item}
+			<li class="account__sidebar__item" class:active={active === item.name}>
+				<a on:click={() => handleClickLink(item)} href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback: '#'}> {item.name}</a>
 			</li>
 		{/each}
 	</ul>
@@ -38,7 +41,6 @@
 		width: 300px;
 		position: absolute;
 		top: 70px;
-		z-index: 1;
 		overflow-x: hidden;
 		border-right: 1px solid colors.$mediumGrey;
 		&__item_container {