sveltacular 0.0.48 → 0.0.49

package/dist/generic/address/address.svelte

@@ -0,0 +1,40 @@
+<script>import { nobr } from "../../helpers/nobr.js";
+import { splitNewLines } from "../../helpers/split-new-lines.js";
+export let streetAddress = "";
+export let city = "";
+export let region = "";
+export let postalCode = "";
+export let country = "";
+$:
+  streetAddressArray = splitNewLines(streetAddress);
+$:
+  flatAddress = nobr(
+    `${streetAddress}, ${city}, ${region} ${postalCode}, ${country}`.replace(/,\s+/g, ", ")
+  );
+</script>
+
+<address>
+	<a href="https://maps.google.com/?q={flatAddress}" target="_blank" rel="noopener">
+		{#each streetAddressArray as line}
+			<div>{line}</div>
+		{/each}
+		<div>
+			{city}, {region}
+			{country}
+			{postalCode}
+		</div>
+	</a>
+</address>
+
+<style>address {
+  display: block;
+  margin-bottom: 1rem;
+  font-style: normal;
+}
+address a {
+  color: inherit;
+  text-decoration: none;
+}
+address a:hover {
+  text-decoration: underline;
+}</style>

package/dist/generic/address/address.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        streetAddress?: string | undefined;
+        city?: string | undefined;
+        region?: string | undefined;
+        postalCode?: string | undefined;
+        country?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddressProps = typeof __propDef.props;
+export type AddressEvents = typeof __propDef.events;
+export type AddressSlots = typeof __propDef.slots;
+export default class Address extends SvelteComponent<AddressProps, AddressEvents, AddressSlots> {
+}
+export {};

package/dist/generic/email/email.svelte

@@ -0,0 +1,30 @@
+<script>import EnvelopeIcon from "../../icons/envelope-icon.svelte";
+export let emailAddress = "";
+</script>
+
+<a href="mailto:{emailAddress}" title="Email Address">
+	<span class="icon">
+		<EnvelopeIcon />
+	</span>
+	<span class="address">
+		{emailAddress}
+	</span>
+</a>
+
+<style>a {
+  color: inherit;
+  text-decoration: none;
+}
+a span {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.5rem;
+}
+a .icon {
+  width: 1rem;
+  height: 1rem;
+  position: relative;
+}
+a:hover .address {
+  text-decoration: underline;
+}</style>

package/dist/generic/email/email.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        emailAddress?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmailProps = typeof __propDef.props;
+export type EmailEvents = typeof __propDef.events;
+export type EmailSlots = typeof __propDef.slots;
+export default class Email extends SvelteComponent<EmailProps, EmailEvents, EmailSlots> {
+}
+export {};

package/dist/generic/phone/phone.svelte

@@ -0,0 +1,56 @@
+<script>import { capitalize } from "../../helpers/capitalize.js";
+import MobilePhoneIcon from "../../icons/mobile-phone-icon.svelte";
+import PhoneIcon from "../../icons/phone-icon.svelte";
+export let phoneNumber;
+export let type = "mobile";
+const getDigits = (phoneNumber2) => {
+  return phoneNumber2.replace(/[^0-9]/g, "");
+};
+const formatPhoneNumber = (phoneNumber2) => {
+  const cleaned = getDigits(phoneNumber2);
+  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    return "(" + match[1] + ") " + match[2] + "-" + match[3];
+  }
+  return phoneNumber2;
+};
+$:
+  formattedPhoneNumber = formatPhoneNumber(phoneNumber);
+$:
+  phoneNumberDigits = getDigits(phoneNumber);
+$:
+  protocol = type === "sms" ? "sms:" : "tel:";
+$:
+  isCellPhone = type == "mobile" || type == "sms";
+</script>
+
+<a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
+	<span class="icon">
+		{#if isCellPhone}
+			<MobilePhoneIcon />
+		{:else}
+			<PhoneIcon />
+		{/if}
+	</span>
+	<span class="number">
+		{formattedPhoneNumber}
+	</span>
+</a>
+
+<style>a {
+  color: inherit;
+  text-decoration: none;
+}
+a span {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.5rem;
+}
+a .icon {
+  width: 1rem;
+  height: 1rem;
+  position: relative;
+}
+a:hover .number {
+  text-decoration: underline;
+}</style>

package/dist/generic/phone/phone.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        phoneNumber: string;
+        type?: "sms" | "mobile" | "home" | "work" | "fax" | "other" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PhoneProps = typeof __propDef.props;
+export type PhoneEvents = typeof __propDef.events;
+export type PhoneSlots = typeof __propDef.slots;
+export default class Phone extends SvelteComponent<PhoneProps, PhoneEvents, PhoneSlots> {
+}
+export {};

package/dist/helpers/capitalize.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Capitalize the first letter of each word in a string, unless the word only has one letter
+ */
+export declare const capitalize: (str: string) => string;

package/dist/helpers/capitalize.js

@@ -0,0 +1,13 @@
+/**
+ * Capitalize the first letter of each word in a string, unless the word only has one letter
+ */
+export const capitalize = (str) => {
+    return str
+        .split(' ')
+        .map((word) => {
+        if (word.length === 1)
+            return word;
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+        .join(' ');
+};

package/dist/helpers/navigate-to.js

@@ -2,8 +2,20 @@ import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 import { redirect } from '@sveltejs/kit';
 export const navigateTo = (url) => {
-    if (browser)
-        setTimeout(() => goto(url), 0);
-    else
+    if (browser) {
+        setTimeout(() => {
+            try {
+                goto(url);
+            }
+            catch {
+                if (window.top)
+                    window.top.location.href = url;
+                else
+                    window.location.href = url;
+            }
+        }, 0);
+    }
+    else {
         redirect(303, url);
+    }
 };

package/dist/helpers/nobr.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Remove line breaks
+ */
+export declare const nobr: (str: string) => string;

package/dist/helpers/nobr.js

@@ -0,0 +1,4 @@
+/**
+ * Remove line breaks
+ */
+export const nobr = (str) => str.replace(/\n/g, ' ');

package/dist/helpers/split-new-lines.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Split a string by new line
+ */
+export declare const splitNewLines: (str: string) => string[];

package/dist/helpers/split-new-lines.js

@@ -0,0 +1,4 @@
+/**
+ * Split a string by new line
+ */
+export const splitNewLines = (str) => str.split('\n');

package/dist/helpers/ucfirst.d.ts

@@ -0,0 +1 @@
+export declare const ucfirst: (str: string) => string;

package/dist/helpers/ucfirst.js

@@ -0,0 +1,3 @@
+export const ucfirst = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};

package/dist/icons/envelope-icon.svelte

@@ -0,0 +1,8 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+	<path
+		d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"
+	/>
+	<path
+		d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"
+	/>
+</svg>

package/dist/icons/envelope-icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  EnvelopeIconProps */
+/** @typedef {typeof __propDef.events}  EnvelopeIconEvents */
+/** @typedef {typeof __propDef.slots}  EnvelopeIconSlots */
+export default class EnvelopeIcon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type EnvelopeIconProps = typeof __propDef.props;
+export type EnvelopeIconEvents = typeof __propDef.events;
+export type EnvelopeIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/mobile-phone-icon.svelte

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+	<path
+		d="M12 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM7.5 17.5h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2ZM12 13H2V4h10v9Z"
+	/>
+</svg>

package/dist/icons/mobile-phone-icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  MobilePhoneIconProps */
+/** @typedef {typeof __propDef.events}  MobilePhoneIconEvents */
+/** @typedef {typeof __propDef.slots}  MobilePhoneIconSlots */
+export default class MobilePhoneIcon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MobilePhoneIconProps = typeof __propDef.props;
+export type MobilePhoneIconEvents = typeof __propDef.events;
+export type MobilePhoneIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/phone-icon.svelte

@@ -0,0 +1,9 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m16.344 12.168-1.4-1.4a1.98 1.98 0 0 0-2.8 0l-.7.7a1.98 1.98 0 0 1-2.8 0l-2.1-2.1a1.98 1.98 0 0 1 0-2.8l.7-.7a1.981 1.981 0 0 0 0-2.8l-1.4-1.4a1.828 1.828 0 0 0-2.8 0C-.638 5.323 1.1 9.542 4.78 13.22c3.68 3.678 7.9 5.418 11.564 1.752a1.828 1.828 0 0 0 0-2.804Z"
+	/>
+</svg>

package/dist/icons/phone-icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  PhoneIconProps */
+/** @typedef {typeof __propDef.events}  PhoneIconEvents */
+/** @typedef {typeof __propDef.slots}  PhoneIconSlots */
+export default class PhoneIcon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PhoneIconProps = typeof __propDef.props;
+export type PhoneIconEvents = typeof __propDef.events;
+export type PhoneIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/index.d.ts

@@ -39,6 +39,9 @@ export { default as Header } from './generic/header/header.svelte';
 export { default as Dot } from './generic/dot/dot.svelte';
 export { default as Notice } from './generic/notice/notice.svelte';
 export { default as Empty } from './generic/empty/empty.svelte';
+export { default as Email } from './generic/email/email.svelte';
+export { default as Phone } from './generic/phone/phone.svelte';
+export { default as Address } from './generic/address/address.svelte';
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';
@@ -91,4 +94,7 @@ export * from './helpers/navigate-to.js';
 export * from './helpers/round-to-decimals.js';
 export * from './helpers/unique-id.js';
 export * from './helpers/subscribable.js';
+export * from './helpers/ucfirst.js';
+export * from './helpers/capitalize.js';
+export * from './helpers/split-new-lines.js';
 export * as Data from './data/index.js';

package/dist/index.js

@@ -41,6 +41,9 @@ export { default as Header } from './generic/header/header.svelte';
 export { default as Dot } from './generic/dot/dot.svelte';
 export { default as Notice } from './generic/notice/notice.svelte';
 export { default as Empty } from './generic/empty/empty.svelte';
+export { default as Email } from './generic/email/email.svelte';
+export { default as Phone } from './generic/phone/phone.svelte';
+export { default as Address } from './generic/address/address.svelte';
 // Layout
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
@@ -102,5 +105,8 @@ export * from './helpers/navigate-to.js';
 export * from './helpers/round-to-decimals.js';
 export * from './helpers/unique-id.js';
 export * from './helpers/subscribable.js';
+export * from './helpers/ucfirst.js';
+export * from './helpers/capitalize.js';
+export * from './helpers/split-new-lines.js';
 // Data
 export * as Data from './data/index.js';

package/dist/navigation/tabs/tab.svelte

@@ -1,7 +1,9 @@
 <script>import { createEventDispatcher, getContext, onDestroy } from "svelte";
 import { tabContext } from "./tab-context.js";
-import { uniqueId } from "../../index.js";
+import { navigateTo, uniqueId } from "../../index.js";
+import Loading from "../../placeholders/loading.svelte";
 export let title;
+export let href = void 0;
 export let active = false;
 const dispatch = createEventDispatcher();
 const ctx = getContext(tabContext);
@@ -10,13 +12,21 @@ const id = uniqueId();
 ctx.register(id, title, active);
 const unsubscribe = ctx.active.subscribe((selectedId) => {
   active = selectedId === id;
+  if (active && href) {
+    console.log("Navigating to", href);
+    navigateTo(href);
+  }
 });
 onDestroy(() => unsubscribe());
 </script>
 
 <article class:active>
 	{#if active}
-		<slot />
+		{#if $$slots.default}
+			<slot />
+		{:else}
+			<Loading />
+		{/if}
 	{/if}
 </article>
 

package/dist/navigation/tabs/tab.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         title: string;
+        href?: string | undefined;
         active?: boolean | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.48",
+	"version": "0.0.49",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",