@iroco/ui 0.21.0 → 0.50.0

package/lib/iroco.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../scss/colors.scss","../scss/containers.scss","../scss/forms.scss","../scss/iroco.scss","../scss/fonts.scss"],"names":[],"mappings":"AAYA;EAAkB,OAZX;;;AAaP;EAAsB,OAZX;;;AAaX;EAAuB,OAZX;;;AAaZ;EAAmB,OAZX;;;AAaR;EAAiB,OAZX;;;AAaN;EAAoB,OAZX;;;AAaT;EAAmB,OAZX;;;AAaR;EAAuB,OAZX;;;AAaZ;EAAwB,OAZV;;;AAad;EAAsB,OAZX;;;AAaX;EAAuB,OAZX;;;ACyMZ;EAvIE,OAzDe;EA0Df,WAnEM;EAoEN;EACA;EACA;;AA1DA;EA6LF;IAhII,WAxEO;;;AAiBT;EAuLF;IA5HI,WA3EY;;;AAsBd;EAiLF;IAxHI,WA9Ea;;;AA2Bf;EA2KF;IApHI,WAjFW;;;AAgCb;EAqKF;IAhHI,WApFW;;;AAqCb;EA+JF;IA5GI,WAvFa;;;AA0Cf;EAyJF;IAxGI,WA1Fa;;;AA+Cf;EAmJF;IApGI,WA7Fa;;;AAoDf;EA6IF;IAhGI,WAhGa;;;;AAoMjB;EA9FE,OAtGe;EAuGf,WA9Gc;EA+Gd;EACA;EACA;;AA3FA;EAqLF;IAvFI,WAnHa;;;AA2Bf;EA+KF;IAnFI,WAtHW;;;AAgCb;EAyKF;IA/EI,WAzHW;;;AAqCb;EAmKF;IA3EI,WA5Ha;;;AA0Cf;EA6JF;IAvEI,WA/Ha;;;AA+Cf;EAuJF;IAnEI,WAlIa;;;AAoDf;EAiJF;IA/DI,WArIa;;;;AAwMjB;EA7DE,OA3Ie;EA4If,WAlJe;EAmJf;EACA;EACA;;AA1HA;EAmLF;IAtDI,WAvJW;;;AAgCb;EA6KF;IAlDI,WA1JW;;;AAqCb;EAuKF;IA9CI,WA7Ja;;;AA0Cf;EAiKF;IA1CI,WAhKa;;;AA+Cf;EA2JF;IAtCI,WAnKa;;;AAoDf;EAqJF;IAlCI,WAtKa;;;;AA4MjB;EAhCE,OA5Ke;EA6Kf,WAjLa;EAkLb;EACA;EACA;;AAzIA;EAqKF;IAzBI,WArLa;;;AA+Cf;EA+JF;IArBI,WAxLa;;;AAoDf;EAyJF;IAjBI,WA3La;;;;AChBf;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AACA;EACE,OFbE;EEcF,YFnBK;EEoBL;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE,cF5BF;;AE8BA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA,OFzDE;;;AGAN;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA,OHZM;;;AGeR;EACE;EACA;;AAEA;ECtBA;EACA,WDsBuB;ECrBvB,aAH+C;EAI/C,ODoB6B;ECnB7B;EACA;EACA;EDkBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YHjCO","file":"iroco.css"}

package/lib/iroco.scss

@@ -1,37 +0,0 @@
-@use "colors";
-@use "fonts";
-@use "style";
-
-*,
-*::before,
-*::after {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-a,
-a:visited,
-a:active,
-button {
-  outline: none;
-  text-decoration: none;
-  font-size: 14px;
-  color: colors.$beige;
-}
-
-html {
-  margin: 0;
-  padding: 0;
-
-  > body {
-    @include fonts.Arial(14px, white);
-    margin: 0;
-    padding: 0;
-    cursor: default;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-kerning: normal;
-    background: colors.$darkBlue;
-  }
-}

package/lib/layouts.scss

@@ -1,7 +0,0 @@
-@mixin background-layout {z-index: -1;}
-@mixin page-layout {z-index: 1;}
-@mixin foreground-layout {z-index: 2;}
-@mixin header-layout {z-index: 3;}
-@mixin menu-layout {z-index: 4;}
-@mixin modal-layout {z-index: 5;}
-@mixin popup-layout {z-index: 6;}

package/lib/loader.scss

@@ -1,20 +0,0 @@
-.ui-loader {
-  display: inline-block;
-  position: relative;
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  >div {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-style: solid;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-
-  }
-
-}

package/lib/style.scss

@@ -1,5 +0,0 @@
-@use "colors";
-@use "containers";
-@use "fonts";
-@use "forms";
-@use "layouts";

package/src/Alert.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	export let type: 'success' | 'danger' = 'success';
-	export let content: string;
-	export let callback: (e: Event) => void;
-
-</script>
-
-<div class={`alert alert--${type}`} on:click={callback} >
-	{content}
-</div>
-
-<style lang="scss">
-	@use '../scss/colors';
-	@use '../scss/constants';
-	.alert {
-		min-height: 2em;
-		display: inline-flex;
-		align-items: center;
-		border-radius: constants.$border-radius;
-		padding: 0 1em 0 1em;
-		font-size: 1.2em;
-		justify-content: center;
-		margin-bottom: 1em;
-		cursor: pointer;
-		&--danger {
-			background-color: rgba(colors.$red, 0.5);
-			border: 1px solid colors.$red;
-		}
-		&--success {
-			background-color: rgba(colors.$green, 0.5);
-			border: 1px solid colors.$green;
-		}
-	}
-</style>

package/src/Button.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	export let type = 'button';
-	export let disabled = false;
-	export let kind: 'danger' | 'success' | 'dark' | 'basic' = 'basic';
-	export let size: 'small' | 'regular' = 'regular';
-	export let id:string ;
-	export let node: HTMLElement ;
-</script>
-
-<button
-	{id}
-	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind}`}
-	class:disabled
-	{type}
-	{disabled}
-	on:click
-	bind:this={ node }
->
-	<slot />
-</button>
-
-<style lang="scss">
-	@use '../scss/button';
-</style>

package/src/DataTable.svelte

@@ -1,72 +0,0 @@
-<script type="module" lang="ts">
-	import type { SvelteComponent } from 'svelte';
-	type TableCollumn = {
-		key: string;
-		title: string;
-		renderComponent?: {
-			component: SvelteComponent;
-			props?: any;
-		};
-	};
-
-	type TableRow = {
-		[key: string]: string | number;
-	};
-
-	export let rows: Array<TableRow>;
-
-	export let collumns: Array<TableCollumn>;
-</script>
-
-<table class="data-table">
-	<thead class="data-table__header">
-		<tr>
-			{#each collumns as collumn}
-				<th class="data-table__header__cell">
-					{collumn.title}
-				</th>
-			{/each}
-		</tr>
-	</thead>
-
-	<tbody class="data-table__body">
-		{#each rows as row}
-			<tr class="data-table__body__row">
-				{#each collumns as { key, renderComponent }}
-					<td class="data-table__body__cell">
-						{#if renderComponent}
-							<svelte:component
-								this={renderComponent.component}
-								on:click={() => renderComponent.props.onclick(row)}
-							/>
-						{:else}
-							{row[key]}
-						{/if}
-					</td>
-				{/each}
-			</tr>
-		{/each}
-	</tbody>
-</table>
-
-<style lang="scss">
-	@use '../scss/colors';
-	.data-table {
-		border: 1px solid colors.$mediumGrey;
-		width: 100%;
-		&__header {
-			font-size: 1.5em;
-			height: 4rem;
-
-			&__cell {
-				border-bottom: 1px solid colors.$mediumGrey;
-			}
-		}
-		&__body {
-			&__cell {
-				text-align: center;
-				vertical-align: middle;
-			}
-		}
-	}
-</style>

package/src/Icon.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  // from https://github.com/the-pudding/svelte-starter/blob/master/src/components/helpers/Icon.svelte
-  import feather from "feather-icons"
-  export let name: string
-  export let stroke: string
-  export let strokeWidth: string
-  export let width = "1em"
-  export let height = "1em"
-  export let color = "white"
-  const icon = feather.icons[name]
-  $: if (icon) {
-    if (stroke) icon.attrs["stroke"] = stroke
-    if (strokeWidth) icon.attrs["stroke-width"] = strokeWidth
-  }
-</script>
-
-{#if icon}
-    <svg {...icon.attrs} style="width: {width}; height: {height}; color: {color};">
-        <g>
-            {@html icon.contents}
-        </g>
-    </svg>
-{/if}
-
-<style>
-    svg {
-        overflow: visible;
-    }
-</style>

package/src/IconMastodon.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  export let width = '5em'
-  export let height = '5em'
-  export let fill = 'currentColor'
-</script>
-
-<svg {width} {height} role="img" viewBox="0 0 24 24" class="icon-mastodon" xmlns="http://www.w3.org/2000/svg">
-  <title>Mastodon</title>
-  <path
-          d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"
-          { fill }
-  />
-</svg>

package/src/IrocoLogo.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	export let width = '10rem';
-	export let height = '10rem';
-</script>
-
-<a class='iroco-logo' href="/">
-  <svg viewBox="0 0 832.33 249.52" width={width} height={height}>
-    <title>Iroco</title>
-    <path
-      fill="white"
-      d="M412,81.41c-7.34,0-12.07-5.19-12.07-12.37S404.77,56.66,412,56.66,424.17,61.85,424.17,69,419.13,81.41,412,81.41Zm10.7,118.4H401V103.54h21.7Z"
-      transform="translate(-0.44 -0.49)"
-    />
-    <path
-      fill="white"
-      d="M505.77,123.71h-6.72c-18,0-27.2,8.26-27.2,28.43v47.67h-21.7V103.54h21.7v14.21h.3c5.5-9.32,15.44-15.28,28.43-15.28h5.19Z"
-      transform="translate(-0.44 -0.49)"
-    />
-    <path
-      fill="white"
-      d="M566.44,201.34c-33,0-49.21-21.54-49.21-49.66S533.43,102,566.44,102s49.35,21.39,49.35,49.66C615.79,179.64,599.29,201.34,566.44,201.34Zm0-80.22c-19.26,0-27.51,12.68-27.51,30.56,0,17.72,8.4,30.56,27.66,30.56s27.5-12.68,27.5-30.56S585.69,121.12,566.44,121.12Z"
-      transform="translate(-0.44 -0.49)"
-    />
-    <path
-      fill="white"
-      d="M721.23,186.52c-11.77,10.7-24.45,14.82-39.12,14.82-33.62,0-49.51-21.54-49.51-48.9,0-28.11,17.88-50.42,49.81-50.42,15.9,0,28,4.27,38.51,14.21L706.1,131.05c-6.88-6.72-14.21-9.93-23.53-9.93-18.8.15-28.27,13.9-28.27,31.32,0,16.66,8.1,29.8,28,29.8,9.17,0,16.35-2.9,24.3-10.54Z"
-      transform="translate(-0.44 -0.49)"
-    />
-    <path
-      fill="white"
-      d="M783.42,201.34c-33,0-49.21-21.54-49.21-49.66S750.41,102,783.42,102s49.35,21.39,49.35,49.66C832.77,179.64,816.27,201.34,783.42,201.34Zm0-80.22c-19.26,0-27.51,12.68-27.51,30.56,0,17.72,8.41,30.56,27.66,30.56s27.5-12.68,27.5-30.56S802.67,121.12,783.42,121.12Z"
-      transform="translate(-0.44 -0.49)"
-    />
-    <path
-      fill="white"
-      d="M122.8,144.26a30.6,30.6,0,0,0-8.07,1.23,5.53,5.53,0,0,0-3.46,3.53,28,28,0,0,0-.92,8.46v76.24a28,28,0,0,0,.92,8.46,5.53,5.53,0,0,0,3.46,3.53,30.18,30.18,0,0,0,8.07,1.23V250q-7.06-.45-19.52-.46-13.22,0-19.67.46v-3.07a30.33,30.33,0,0,0,8.07-1.23,5.49,5.49,0,0,0,3.45-3.53,27.59,27.59,0,0,0,.93-8.46V157.48a27.59,27.59,0,0,0-.93-8.46,5.49,5.49,0,0,0-3.45-3.53,30.75,30.75,0,0,0-8.07-1.23v-3.08q6.45.47,19.67.47,12.3,0,19.52-.47Z"
-      transform="translate(-0.44 -0.49)"
-    />
-    <path
-      fill="#00D692"
-      d="M64.64,198.52a102.78,102.78,0,1,1,77.13,0l-7.41-18.29a83,83,0,1,0-62.31,0Z"
-      transform="translate(-0.44 -0.49)"
-    />
-  </svg>
-</a>

package/src/NavBar.svelte

@@ -1,154 +0,0 @@
-<script lang="ts">
-	import IconClose from './IconClose.svelte';
-	import type { NavigationItem } from 'definition';
-	import { createEventDispatcher } from 'svelte';
-
-	export let navigationItems: Array<NavigationItem>;
-	export let type: 'sidebar' | 'topbar';
-
-	let active: string;
-	const dispatch = createEventDispatcher();
-
-	const handleClickLink = (menuItem: NavigationItem) => {
-	  active = menuItem.name;
-	  if (typeof menuItem.hrefOrCallback === 'function') {
-	    menuItem.hrefOrCallback();
-	    return false; // to avoid calling href
-	  }
-	  dispatch('click_link');
-	};
-</script>
-
-<nav data-testid={type} class="nav__{type}">
-	<button on:click class="nav__{type}__close">
-		<IconClose width="3em" height="3em" />
-	</button>
-
-	<ul class="nav__{type}__item-container">
-		{#each navigationItems as item}
-			<li class="nav__{type}__item" class:active={active === item.name}>
-				<a
-					on:click={() => handleClickLink(item)}
-					href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
-					class:iroco-ui-button={item.button}
-					class:iroco-ui-button--small={item.button}
-					class:iroco-ui-button--success={item.button}
-				>
-					{item.name}
-				</a>
-			</li>
-		{/each}
-	</ul>
-</nav>
-
-<style lang="scss">
-	@use '../scss/colors';
-	@use '../scss/constants';
-	@import '../scss/containers';
-	@import '../scss/button';
-
-	.nav {
-		&__sidebar,
-		&__topbar {
-			&__item {
-				text-decoration: none;
-				display: block;
-				font-size: 1em;
-			}	
-			&__close {
-				display: none;
-			}
-		}
-
-		&__sidebar {
-			height: 100%;
-			width: 300px;
-			position: absolute;
-			top: 4.45em;
-			left: 0;
-			overflow-x: hidden;
-			&__item-container {
-				margin: 0;
-				padding: 0;
-				width: 100%;
-				height: 100%;
-			}
-			&__item {
-				padding: 2em;
-				border-top: 1px solid colors.$mediumGrey;
-			}
-			&__item:first-child {
-				border-top: none;
-			}
-			.active {
-				border-top: 1px solid colors.$green;
-				border-bottom: 1px solid colors.$green;
-			}
-		}
-
-		&__topbar {
-			flex-grow: 1;
-			display: flex;
-			justify-content: flex-end;
-			ul,
-			li {
-				display: inline;
-			}
-			ul {
-				display: flex;
-				flex-grow: 1;
-				justify-content: space-around;
-			}
-		}
-	}
-
-	@include screen-tablet {
-		.nav {
-			&__sidebar,
-			&__topbar {
-				position: fixed;
-				background-color: colors.$darkBlue;
-				top: 0;
-				right: 0;
-				width: 100%;
-				padding: 0;
-				padding-top: 2em;
-				margin: 0;
-				border-right: none;
-				&__item-container {
-					padding: 0em;
-					margin-top: 2rem;
-				}
-				ul,
-				li {
-					display: block;
-				}
-				&__close {
-					display: block;
-					position: absolute;
-					right: 0;
-					top: 0;
-					background-color: transparent;
-					border: none;
-					color: colors.$darkBeige;
-				}
-			}
-
-			&__sidebar {
-				top: 0;
-				left: 0;
-				&__item:first-child {
-					border-top: 1px solid colors.$mediumGrey;
-				}
-			}
-
-			&__topbar {
-				height: 100%;
-				&__item {
-					padding: 2em;
-					border-top: 1px solid colors.$mediumGrey;
-				}
-			}
-		}
-	}
-</style>

package/src/Navigation.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-	import type { NavigationItem } from './definition';
-	import IconBurger from './IconBurger.svelte';
-	import IconIrocoLogo from './IconIrocoLogo.svelte';
-	import IrocoLogo from './IrocoLogo.svelte';
-	import NavBar from './NavBar.svelte';
-
-	export let navigationItems: Array<NavigationItem>;
-	export let type: 'sidebar' | 'topbar' = "topbar";
-	export let title: string | null = null;
-
-	let showMenu = false;
-
-</script>
-
-<div class="navigation--mobile">
-	<div class="navigation--mobile__title-container">
-		{#if title == null}
-			<IrocoLogo width="10em" height="10em"/>
-		{:else}
-			<IconIrocoLogo width="3em" height="3em" />
-			<h1>{title}</h1>
-		{/if}
-	</div>
-
-	<button on:click={() => (showMenu = true)} class="navigation--mobile__button">
-		<IconBurger width="3em" height="3em" />
-	</button>
-
-	{#if showMenu}
-		<NavBar
-			on:click_link={() => (showMenu = false)}
-			on:click={() => (showMenu = false)}
-			{ type }
-			{ navigationItems }
-		/>
-	{/if}
-</div>
-
-<div class="navigation">
-	<div class="navigation__title-container">
-		{#if title == null}
-			<IrocoLogo width="10em" height="10em"/>
-		{:else}
-			<IconIrocoLogo width="3em" height="3em" />
-			<h1>{title}</h1>
-		{/if}
-	</div>
-	<NavBar {navigationItems} { type } />
-</div>
-
-<style lang="scss">
-	@use '../scss/colors';
-	@import '../scss/containers';
-	.navigation {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-		&--mobile {
-			display: none;
-		}
-
-		&__title-container {
-			display: flex;
-			align-items: center;
-			padding-left: 1em;
-			h1 {
-				padding-left: 1em;
-			}
-		}
-	}
-
-	@include screen-tablet {
-		.navigation {
-			display: none;
-			color: colors.$beige;
-			&--mobile {
-				display: flex;
-				padding: 0 1em;
-				justify-content: space-between;
-				position: fixed;
-				top: 0;
-				z-index: 1;
-				width: 100%;
-				border-bottom: 1px solid colors.$mediumGrey;
-
-				h1 {
-					font-size: 2em;
-				}
-				&__button {
-					background-color: transparent;
-					border: none;
-					color: colors.$mediumGrey;
-				}
-				&__title-container {
-					display: flex;
-					align-items: center;
-					h1 {
-						padding-left: 0.5em;
-					}
-				}
-			}
-		}
-	}
-</style>

package/src/NumberInput.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-    export let id: string;
-    export let label: string | ''
-    export let placeholder: string | ''
-    export let error: string | null = null;
-    export let value: number | null = null;
-    export let min: number | undefined
-    export let max: number | undefined
-</script>
-  
-<div class="iroco-ui-input">
-  {#if label}
-    <label class="iroco-ui-label" for={id}>{label}</label>
-  {/if}
-  <input on:change bind:value id={id} type="number" {placeholder} {min} {max} {...$$restProps}/>
-  {#if error}
-    <p data-testid="error" class="error">{error}</p>
-  {/if}
-</div>
-
-<style lang="scss">
-  @use "../scss/forms";
-</style>

package/src/RadioButton.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  export const label = '';
-  export let value: string | null;
-  export let group: string | null = null;
-  export let name: string | null;
-  export let checked: boolean;
-
-  function onChange(event: Event) {
-    group = (<HTMLInputElement>event.target).value;
-  }
-
-  $: checked = (group === value)
-
-</script>
-
-<label class="iroco-ui-radio">
-  <input type="radio" bind:group={ group } value={ value } name={ name } on:change="{ onChange }" { checked }/>
-  <span class="radio-button-color"></span>
-  <slot/>
-</label>
-
-<style lang="scss">
-  @use "../scss/colors";
-
-  .iroco-ui-radio {
-    color: colors.$beige;
-    position: relative;
-    margin-top: 0.5em;
-    padding-left: 1.5em;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  .iroco-ui-radio input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-  }
-
-  .radio-button-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 1em;
-    width: 1em;
-    background-color: colors.$beige;
-    border-radius: 50%;
-  }
-
-  .iroco-ui-radio input:checked ~ .radio-button-color {
-    background-color: colors.$green;
-  }
-</style>