@lavalogic/scoria 0.0.1

package/dist/Components/LoadingAnimation.svelte

@@ -0,0 +1,129 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface LoadingAnimationProps {
+		showText?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	let { showText = true }: LoadingAnimationProps = $props();
+</script>
+
+<div class="container">
+	<div id="cube">
+		<div class="front"></div>
+		<div class="front">
+			{#if showText}<span>loading…</span>{/if}
+		</div>
+		<div class="back"></div>
+		<div class="right"></div>
+		<div class="left"></div>
+		<div class="top"></div>
+		<div class="bottom"></div>
+	</div>
+</div>
+
+<style>.container {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  perspective: 1000px;
+}
+.container #cube {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform-style: preserve-3d;
+  animation: rotatecube 10s infinite;
+}
+.container #cube div {
+  width: 100px;
+  height: 100px;
+  display: block;
+  position: absolute;
+  border: none;
+  line-height: 20px;
+}
+.container #cube div span {
+  display: flex;
+  height: 100%;
+  padding: 10px;
+  align-items: center;
+  text-align: left;
+  font-size: 1rem;
+  font-weight: bold;
+  font-family: arial;
+  color: #ffffff;
+}
+
+@keyframes rotatecube {
+  0%, 10% {
+    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
+  }
+  10%, 100% {
+    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
+  }
+  35% {
+    transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg);
+  }
+  60% {
+    transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
+  }
+  85% {
+    transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);
+  }
+}
+.front {
+  background: rgba(216, 208, 199, 0.5);
+  outline: 1px solid black;
+}
+
+.back {
+  background: rgba(216, 208, 199, 0.5);
+  outline: 1px solid black;
+}
+
+.right {
+  background: rgba(216, 208, 199, 0.35);
+  outline: 1px solid black;
+}
+
+.left {
+  background: rgba(216, 208, 199, 0.35);
+  outline: 1px solid black;
+}
+
+.top {
+  /*   background: rgba(255,0,255,.5); */
+  outline: 1px solid black;
+}
+
+.bottom {
+  background: rgba(216, 208, 199, 0.75);
+  outline: 1px solid black;
+}
+
+#cube .front {
+  transform: rotateY(0deg) translateZ(50px);
+}
+
+#cube .back {
+  transform: rotateX(180deg) translateZ(50px);
+}
+
+#cube .right {
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+#cube .left {
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+#cube .top {
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+#cube .bottom {
+  transform: rotateX(-90deg) translateZ(50px);
+}</style>

package/dist/Components/LoadingAnimation.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface LoadingAnimationProps {
+    showText?: boolean;
+}
+declare const LoadingAnimation: import("svelte").Component<LoadingAnimationProps, {}, "">;
+type LoadingAnimation = ReturnType<typeof LoadingAnimation>;
+export default LoadingAnimation;

package/dist/Components/LoadingModal.svelte

@@ -0,0 +1,316 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface LoadingModalProps {
+		showModal: boolean;
+		message?: string | undefined;
+	}
+</script>
+
+<script lang="ts">
+	import LoadingAnimation from './LoadingAnimation.svelte';
+
+	let { showModal, message }: LoadingModalProps = $props();
+
+	let dialog: HTMLDialogElement;
+
+	$effect(() => {
+		if (dialog && showModal) {
+			dialog.showModal();
+		}
+	});
+
+	$effect(() => {
+		if (showModal == false && dialog) dialog.close?.();
+	});
+
+	function uncloseable(
+		e: KeyboardEvent & { currentTarget: EventTarget & HTMLDialogElement }
+	): void {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+		}
+	}
+</script>
+
+<dialog bind:this={dialog} onkeydown={uncloseable}>
+	<div class="modal-root">
+		{#if message}
+			<p>{message}</p>
+		{/if}
+		<LoadingAnimation />
+	</div>
+</dialog>
+
+<style>dialog {
+  overflow: clip;
+  background-color: #e9ecf1;
+  max-height: 95%;
+  min-height: var(--dialog-min-height);
+  min-width: var(--dialog-min-width);
+  width: var(--dialog-width, max-content);
+  height: var(--dialog-height, max-content);
+  border-radius: 0.1875rem;
+  border: none;
+  padding: 0;
+}
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(1px);
+}
+dialog.static-height {
+  height: 95%;
+}
+dialog.static-width {
+  width: min(95%, 1728px);
+}
+dialog[open] {
+  animation: zoom 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+}
+@keyframes zoom {
+  from {
+    transform: scale(0.98);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+dialog .modal-header {
+  flex-shrink: 0;
+}
+dialog .modal-main {
+  align-content: center;
+  flex-shrink: 1;
+  overflow: auto;
+}
+dialog .modal-main.noscroll {
+  overflow: visible;
+}
+dialog .footer {
+  flex-shrink: 0;
+}
+
+.modal-root {
+  overflow: visible;
+  flex-grow: 1;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+  overflow: auto;
+}
+
+.modal-header {
+  position: relative;
+}
+
+.modal-heading {
+  user-select: none;
+  background-color: #259fc7;
+  color: #ffffff;
+  margin: 0;
+  padding: 1.5rem;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.modal-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+  font-size: 1.33rem;
+  background-color: #f4f7f9;
+}
+.modal-main.noscroll {
+  overflow: visible;
+}
+
+.modal-footer {
+  bottom: 0;
+  border-top: solid 1px #cbd4da;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row-reverse wrap;
+  justify-content: space-between;
+  padding: 1.5rem;
+  gap: 2rem;
+}
+.modal-footer button {
+  padding: 1rem 2rem;
+  border-width: 2px;
+}
+
+.actions {
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  gap: 2.5rem;
+}
+
+.input-container {
+  padding: 1.5rem;
+  padding-bottom: 1.5rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  gap: 1.5rem;
+}
+.input-container .country-margin {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.button-container {
+  padding: 3rem;
+}
+
+.card-container,
+.button-container {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1.5rem;
+}
+
+span {
+  text-align: center;
+  font-size: 1.33rem;
+  color: #3a4952;
+}
+
+.card-container {
+  padding: 0 1rem;
+  height: 100%;
+  align-content: baseline;
+}
+.card-container.with-top-padding {
+  padding: 1.5rem;
+}
+
+.actions button {
+  border-width: 2px;
+  border-radius: 4px;
+  padding: 1rem 2rem;
+  align-items: center;
+}
+
+.header-extra,
+.cancel-container {
+  padding: 0.75rem;
+  background-color: #e9ecf1;
+}
+
+.header-extra {
+  border-bottom: solid 1px #cbd4da;
+  display: none;
+}
+.header-extra.visible {
+  display: block;
+}
+
+.select-container,
+.cancel-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1.5rem;
+}
+
+.cancel-container {
+  border-top: solid 1px #cbd4da;
+  bottom: 0;
+  z-index: 1;
+}
+
+span {
+  text-align: center;
+  font-size: 1.33rem;
+  color: #3a4952;
+}
+
+.select-container {
+  box-sizing: border-box;
+  padding: 1rem 2.5rem;
+  align-content: baseline;
+  flex-grow: 1;
+}
+
+button {
+  color: #3a4952;
+  fill: #3a4952;
+  padding: var(--padding-size, 0.76rem);
+  border-radius: var(--border-radius, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border: solid 1px #cbd4da;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  align-items: stretch;
+  cursor: pointer;
+}
+button:disabled {
+  background-color: var(--background-colour, #e9ecf1);
+  color: #8096a5;
+  --colour: #8096a5;
+  cursor: default;
+}
+button:not([disabled]):hover {
+  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
+  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+}
+button:not([disabled]):focus, button:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+}
+button:not([disabled]).ticked, button:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+button:not([disabled]).ticked:focus, button:not([disabled]).ticked:focus-visible, button:not([disabled]).primary:focus, button:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+button:not([disabled]).ticked:hover, button:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+button * {
+  user-select: none;
+}
+button {
+  padding: 1.5rem;
+  font-size: 1.5rem;
+  display: block;
+  border-width: 2px;
+  border-radius: 4px;
+}
+
+dialog {
+  background: transparent;
+  height: 100%;
+  width: 100%;
+}
+dialog:focus {
+  outline: none;
+}
+dialog .modal-root {
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0);
+  position: relative;
+}
+dialog .modal-root p {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 99999;
+  translate: -50% -80%;
+  user-select: none;
+  text-shadow: 0px 0px 3px black;
+  background-color: rgba(100, 100, 100, 0.6);
+  border-radius: 4px;
+  padding: 1rem;
+  color: white;
+}</style>

package/dist/Components/LoadingModal.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface LoadingModalProps {
+    showModal: boolean;
+    message?: string | undefined;
+}
+declare const LoadingModal: import("svelte").Component<LoadingModalProps, {}, "">;
+type LoadingModal = ReturnType<typeof LoadingModal>;
+export default LoadingModal;

package/dist/Components/LoadingOverlay.svelte

@@ -0,0 +1,58 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface LoadingOverlayProps {
+		message?: string | undefined;
+		absolute?: boolean | undefined;
+		borderRadius?: string | undefined;
+	}
+</script>
+
+<script lang="ts">
+	import LoadingAnimation from './LoadingAnimation.svelte';
+	let { message, absolute, borderRadius }: LoadingOverlayProps = $props();
+</script>
+
+<div
+	class="loading-overlay"
+	class:absolute
+	style={borderRadius ? `border-radius: ${borderRadius};` : undefined}
+>
+	{#if message}
+		<p>{message}</p>
+	{/if}
+	<LoadingAnimation showText={!message} />
+</div>
+
+<style>.loading-overlay {
+  display: flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99998;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.1);
+  flex-flow: column;
+  gap: 2rem;
+}
+.loading-overlay p {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 99999;
+  translate: -50% -80%;
+  user-select: none;
+  text-shadow: 0px 0px 3px black;
+  background-color: rgba(100, 100, 100, 0.6);
+  border-radius: 4px;
+  padding: 1rem;
+  color: white;
+}
+.loading-overlay.absolute {
+  position: absolute;
+}</style>

package/dist/Components/LoadingOverlay.svelte.d.ts

@@ -0,0 +1,8 @@
+export interface LoadingOverlayProps {
+    message?: string | undefined;
+    absolute?: boolean | undefined;
+    borderRadius?: string | undefined;
+}
+declare const LoadingOverlay: import("svelte").Component<LoadingOverlayProps, {}, "">;
+type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
+export default LoadingOverlay;