@functionalcms/svelte-components 3.5.16 → 3.5.18

package/dist/components/agnostic/Table/Table.svelte

@@ -1,521 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	// Hack: Preserves way it was done in agnostic-svelte but ugly :(
-	interface ArrayMonkeyPatched extends Array<any> {
-		labelByKey(): any[];
-	}
-	export let headers: ArrayMonkeyPatched = [] as ArrayMonkeyPatched;
-	headers.labelByKey = function () {
-		return this.reduce(function (rv, x) {
-			if (!('key' in x))
-				throw new Error('Header must have key value with `sortByKey` set to `true`');
-			rv[x.key] = x;
-			return rv;
-		}, {});
-	};
-	export let rows = [];
-
-	export let caption = '';
-	export let captionPosition = 'hidden';
-	export let tableSize = '';
-	export let responsiveSize = '';
-	export let isUppercasedHeaders = false;
-	export let isBordered = false;
-	export let isBorderless = false;
-	export let isStriped = false;
-	export let isHoverable = false;
-	export let isStacked = false;
-	export let filterByKey = false;
-	export let offset = 0;
-	export let limit = 0;
-
-	// State
-	let direction = 'none';
-	let sortingKey = '';
-
-	// Trigger event on sort
-	const dispatch = createEventDispatcher();
-	$: dispatch('sort', {
-		direction,
-		sortingKey
-	});
-
-	const pluckColumnToSort = (rowLeft, rowRight) => {
-		const colLeft =
-			rowLeft[sortingKey] === null || rowLeft[sortingKey] === undefined
-				? -Infinity
-				: rowLeft[sortingKey];
-		const colRight =
-			rowRight[sortingKey] === null || rowRight[sortingKey] === undefined
-				? -Infinity
-				: rowRight[sortingKey];
-		return {
-			colLeft,
-			colRight
-		};
-	};
-
-	const internalSort = (rowLeft, rowRight) => {
-		let { colLeft, colRight } = pluckColumnToSort(rowLeft, rowRight);
-
-		const headerWithCustomSortFunction = headers.find((h) => h.key === sortingKey && !!h.sortFn);
-		if (headerWithCustomSortFunction && headerWithCustomSortFunction.sortFn) {
-			return headerWithCustomSortFunction.sortFn(colLeft, colRight);
-		}
-		// No custom sort method for the header cell, so we continue with our own.
-		// Strings converted to lowercase; dollar currency etc. stripped (not yet i18n safe!)
-		colLeft = typeof colLeft === 'string' ? colLeft.toLowerCase().replace(/(^\$|,)/g, '') : colLeft;
-		colRight =
-			typeof colRight === 'string' ? colRight.toLowerCase().replace(/(^\$|,)/g, '') : colRight;
-		// If raw value represents a number explicitly set to Number
-		colLeft = !Number.isNaN(Number(colLeft)) ? Number(colLeft) : colLeft;
-		colRight = !Number.isNaN(Number(colRight)) ? Number(colRight) : colRight;
-		if (colLeft > colRight) {
-			return 1;
-		}
-		if (colLeft < colRight) {
-			return -1;
-		}
-		return 0;
-	};
-
-	// Simply flips the sign of results of the ascending sort
-	const descendingSort = (row1, row2) => internalSort(row1, row2) * -1;
-
-	$: columns = filterByKey ? headers.labelByKey() : { ...headers };
-	// Reactive declaration: ...state needs to be computed from other parts; so
-	// direction is a dependency and when it changes, sortableItems gets recomputed
-	$: sortableItems =
-		direction === 'ascending'
-			? rows.sort(internalSort)
-			: direction === 'descending'
-				? rows.sort(descendingSort)
-				: (sortableItems = [...rows]);
-
-	$: visibleItems = sortableItems.slice(offset ? offset : 0, limit ? offset + limit : undefined);
-
-	const handleSortClicked = (headerKey: string) => {
-		if (sortingKey !== headerKey) {
-			direction = 'none';
-			sortingKey = headerKey;
-		}
-		switch (direction) {
-			case 'ascending':
-				direction = 'descending';
-				break;
-			case 'descending':
-				direction = 'none';
-				break;
-			case 'none':
-				direction = 'ascending';
-				break;
-			default:
-				console.warn('Table sorting only supports directions: ascending | descending | none');
-		}
-	};
-
-	const getSortingClassesFor = (headerKey, direction, sortingKey) => {
-		if (sortingKey === headerKey) {
-			return ['icon-sort', direction && direction !== 'none' ? `icon-sort-${direction}` : '']
-				.filter((klass) => klass.length)
-				.join(' ');
-		}
-		return 'icon-sort';
-	};
-
-	const getSortDirectionFor = (headerKey, direction, sortingKey) => {
-		if (sortingKey !== headerKey) {
-			return 'none';
-		} else {
-			return direction;
-		}
-	};
-
-	const tableResponsiveClasses = () => {
-		return [
-			!responsiveSize ? 'table-responsive' : '',
-			responsiveSize ? `table-responsive-${responsiveSize}` : ''
-		]
-			.filter((klass) => klass.length)
-			.join(' ');
-	};
-
-	const tableClasses = () => {
-		return [
-			'table',
-			tableSize ? `table-${tableSize}` : '',
-			isUppercasedHeaders ? 'table-caps' : '',
-			isBordered ? 'table-bordered' : '',
-			isBorderless ? 'table-borderless' : '',
-			isStriped ? 'table-striped' : '',
-			isHoverable ? 'table-hoverable' : '',
-			isStacked ? 'table-stacked' : ''
-		]
-			.filter((klass) => klass.length)
-			.join(' ');
-	};
-
-	const captionClasses = () => {
-		return [
-			// .screenreader-only is expected to be globally available via common.min.css
-			captionPosition === 'hidden' ? 'screenreader-only' : '',
-			captionPosition !== 'hidden' ? `caption-${captionPosition}` : ''
-		]
-			.filter((klass) => klass.length)
-			.join(' ');
-	};
-
-	const getKeys = (row) => {
-		const filteredKeys = filterByKey
-			? Object.keys(columns).map((key) => [key, key])
-			: Object.keys(row).map((key, index) => [key, index]);
-		return filteredKeys;
-	};
-</script>
-
-<div class={tableResponsiveClasses()}>
-	<table class={tableClasses()}>
-		<caption class={captionClasses()}>{caption}</caption>
-		<thead>
-			<tr>
-				{#each headers as headerCol}
-					<th
-						aria-sort={getSortDirectionFor(headerCol.key, direction, sortingKey)}
-						scope="col"
-						style={headerCol.width ? `width: ${headerCol.width}` : 'width: auto'}
-					>
-						{#if headerCol.sortable}
-							<div class="table-header-container">
-								<span class="table-sort-label">{headerCol.label}</span>
-								<button
-									type="button"
-									class="table-sort"
-									on:click={() => handleSortClicked(headerCol.key)}
-								>
-									<span class="screenreader-only">{headerCol.label}</span>
-									<span class={getSortingClassesFor(headerCol.key, direction, sortingKey)}>
-										{#if getSortDirectionFor(headerCol.key, direction, sortingKey) === 'none'}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class={getSortingClassesFor(headerCol.key, direction, sortingKey)}
-												fill="none"
-												viewBox="0 0 20 20"
-												width="20"
-												height="20"
-											>
-												<path
-													d="m15 13-5 5-5-5M5 7l5-5 5 5"
-													stroke="currentColor"
-													stroke-width="2"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-												/>
-											</svg>
-										{:else if getSortDirectionFor(headerCol.key, direction, sortingKey) === 'descending'}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class={getSortingClassesFor(headerCol.key, direction, sortingKey)}
-												viewBox="0 0 20 20"
-												width="20"
-												height="20"
-											>
-												<path
-													d="m10.778 13.635 4.964-5.86c.586-.693.11-1.775-.78-1.775H5.037a1.01 1.01 0 0 0-.561.17c-.168.111-.3.27-.382.457a1.102 1.102 0 0 0 .164 1.147l4.963 5.86a1.006 1.006 0 0 0 1.559 0v.001Z"
-													fill="currentColor"
-												/>
-											</svg>
-										{:else}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class={getSortingClassesFor(headerCol.key, direction, sortingKey)}
-												viewBox="0 0 20 20"
-												width="20"
-												height="20"
-											>
-												<path
-													d="m9.221 6.365-4.963 5.86c-.586.693-.11 1.775.78 1.775h9.926c.2 0 .394-.059.561-.17.168-.111.3-.27.383-.457a1.102 1.102 0 0 0-.165-1.147l-4.963-5.86a1.04 1.04 0 0 0-.351-.27 1.007 1.007 0 0 0-1.208.27v-.001Z"
-													fill="currentColor"
-												/>
-											</svg>
-										{/if}
-									</span>
-								</button>
-							</div>
-						{:else}{headerCol.label}{/if}
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			{#each visibleItems as row}
-				<tr>
-					{#each getKeys(row) as [key, id]}
-						<td>
-							{#if columns[id].renderComponent}
-								<svelte:component this={columns[id].renderComponent()} cellValue={row[key]} />
-							{:else}
-								{row[key]}
-							{/if}
-						</td>
-					{/each}
-				</tr>
-			{/each}
-		</tbody>
-	</table>
-</div>
-
-<style>
-	.table {
-		--table-bg: transparent;
-		--table-accent-bg: transparent;
-		--table-striped-color: var(--functional-dark);
-		--table-striped-bg: rgb(0 0 0 / 2.5%);
-		--table-active-color: var(--functional-dark);
-		--table-active-bg: rgb(0 0 0 / 1.5%);
-		--table-hoverable-color: var(--functional-dark);
-		--table-hoverable-bg: var(--functional-table-hover-bg, #f1faff);
-
-		width: 100%;
-		margin-bottom: var(--fluid-16);
-		color: var(--functional-dark);
-		vertical-align: top;
-		border-color: var(--functional-table-border-color, var(--functional-gray-light));
-	}
-
-	.table > :not(caption) > * > * {
-		padding: var(--fluid-8) var(--fluid-8);
-		background-color: var(--table-bg);
-		border-bottom-width: 1px;
-
-		/* 4th is spread --table-accent-bg will gets reset for active, hover, striped */
-		box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
-	}
-
-	.table > tbody {
-		vertical-align: inherit;
-	}
-
-	.table > thead {
-		vertical-align: bottom;
-	}
-
-	.table thead th {
-		font-weight: 600;
-	}
-
-	.table-caps thead th {
-		font-size: var(--fluid-12);
-		text-transform: uppercase;
-	}
-
-	.table tbody td,
-	.table tbody th {
-		font-weight: 400;
-	}
-
-	.table > :not(thead):not(caption) {
-		border-top: var(--fluid-2) solid var(--functional-gray-light);
-	}
-
-	.caption-top {
-		caption-side: top;
-	}
-
-	.caption-bottom {
-		caption-side: bottom;
-	}
-
-	.caption-bottom,
-	.caption-top {
-		padding-block-start: var(--fluid-12);
-		padding-block-end: var(--fluid-12);
-
-		/* Takes writing mode into account -- (mdn) same as left if direction is left-to-right
-  and right if direction is right-to-left */
-		text-align: start;
-	}
-
-	.caption-end {
-		text-align: end;
-	}
-
-	.table-small > :not(caption) > * > * {
-		padding: var(--fluid-4) var(--fluid-4);
-	}
-
-	.table-large > :not(caption) > * > * {
-		padding: var(--fluid-12) var(--fluid-12);
-	}
-
-	.table-xlarge > :not(caption) > * > * {
-		padding: var(--fluid-18) var(--fluid-18);
-	}
-
-	.table-bordered > :not(caption) > * {
-		border-width: 1px 0;
-	}
-
-	.table-bordered > :not(caption) > * > * {
-		border-width: 0 1px;
-	}
-
-	.table-borderless > :not(caption) > * > * {
-		border-bottom-width: 0;
-	}
-
-	.table-borderless > :not(:first-child) {
-		border-top-width: 0;
-	}
-
-	.table-striped > tbody > tr:nth-of-type(odd) > * {
-		--table-accent-bg: var(--table-striped-bg);
-
-		color: var(--table-striped-color);
-	}
-
-	.table-active {
-		--table-accent-bg: var(--table-active-bg);
-
-		color: var(--table-active-color);
-	}
-
-	.table-hoverable > tbody > tr:hover > * {
-		--table-accent-bg: var(--table-hoverable-bg);
-
-		color: var(--table-hoverable-color);
-	}
-
-	/* Stacked tables */
-	.table-stacked thead {
-		display: none;
-	}
-
-	.table-stacked tr,
-	.table-stacked tbody th,
-	.table-stacked tbody td {
-		display: block;
-		width: 100%;
-	}
-
-	.table-stacked tbody th,
-	.table-stacked tbody td {
-		border-bottom-width: 0;
-	}
-
-	.table-stacked td[data-label] {
-		padding-bottom: var(--fluid-12);
-	}
-
-	.table-stacked tr {
-		border-bottom: var(--fluid-2) solid var(--functional-gray-light);
-		border-top-width: 0;
-	}
-
-	.table-stacked th[data-label]::before,
-	.table-stacked td[data-label]::before {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		margin: -0.5rem -1rem 0;
-		padding: var(--fluid-12) var(--fluid-16) var(--fluid-6);
-	}
-
-	.table-stacked tr th:first-child,
-	.table-stacked tr td:first-child {
-		border-top-width: 0;
-	}
-
-	.table-stacked tr:nth-child(odd) td,
-	.table-stacked tr:nth-child(odd) th {
-		background-color: inherit;
-	}
-
-	.table-stacked tr:first-child th:first-child,
-	.table-stacked tr:first-child td:first-child {
-		border-top: var(--fluid-2) solid var(--functional-gray-light);
-	}
-
-	.table-stacked th[data-label],
-	.table-stacked td[data-label] {
-		padding-bottom: var(--fluid-12);
-	}
-
-	/* As soon as there's not enough width, it will kick in horizontal scrolling */
-	.table-responsive {
-		overflow-x: auto;
-		-webkit-overflow-scrolling: touch;
-	}
-
-	/* Table is responsive only "up to" the breakpoint. Above it will not scroll */
-	@media (max-width: 576px) {
-		.table-responsive-small {
-			overflow-x: auto;
-			-webkit-overflow-scrolling: touch;
-		}
-	}
-
-	@media (max-width: 768px) {
-		.table-responsive-medium {
-			overflow-x: auto;
-			-webkit-overflow-scrolling: touch;
-		}
-	}
-
-	@media (max-width: 992px) {
-		.table-responsive-large {
-			overflow-x: auto;
-			-webkit-overflow-scrolling: touch;
-		}
-	}
-
-	@media (max-width: 1200px) {
-		.table-responsive-xlarge {
-			overflow-x: auto;
-			-webkit-overflow-scrolling: touch;
-		}
-	}
-
-	.table-header-container {
-		display: flex;
-		align-items: center;
-	}
-
-	.table-sort-label {
-		flex: 1;
-		padding-inline-end: 0.5rem;
-		text-align: left;
-	}
-
-	.table-sort {
-		flex: 0 1 var(--fluid-48);
-		background-color: transparent;
-		border-color: transparent;
-		border-width: 0;
-		cursor: pointer;
-		display: flex;
-		justify-content: center;
-		padding-block-start: var(--fluid-2);
-		padding-block-end: var(--fluid-2);
-	}
-
-	.icon-sort {
-		width: 1.125rem;
-		height: 1.125rem;
-	}
-
-	.table-sort:focus {
-		box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
-
-		/* Needed for High Contrast mode */
-		outline: var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
-			var(--functional-focus-ring-outline-color);
-		transition: box-shadow var(--functional-timing-fast) ease-out;
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.table-sort:focus {
-			transition-duration: 0.001ms !important;
-		}
-	}
-</style>

package/dist/components/agnostic/Table/Table.svelte.d.ts

@@ -1,34 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        headers?: any[] & {
-            labelByKey(): any[];
-        };
-        rows?: any[];
-        caption?: string;
-        captionPosition?: string;
-        tableSize?: string;
-        responsiveSize?: string;
-        isUppercasedHeaders?: boolean;
-        isBordered?: boolean;
-        isBorderless?: boolean;
-        isStriped?: boolean;
-        isHoverable?: boolean;
-        isStacked?: boolean;
-        filterByKey?: boolean;
-        offset?: number;
-        limit?: number;
-    };
-    events: {
-        sort: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
-}
-export {};

package/dist/components/agnostic/Table/TableCustomRenderComponent.svelte

@@ -1,13 +0,0 @@
-<script>
-  /**
-   * This is just an example that is used within the `renderComponent` in ./Table.stories.js
-   * `headers` like: { renderComponent: () => TableCustomRenderComponent },
-   *
-   * Also, it would have been nice to be able to generate this component "inline" but it seems
-   * there's an RFC for a long time but hasn't materialized:
-   * https://github.com/sveltejs/rfcs/blob/inline-components/text/0000-inline-components.md
-   */
-  export let cellValue;
-</script>
-
-<td>{cellValue}<span class="mis6">🏆</span></td>

package/dist/components/agnostic/Table/TableCustomRenderComponent.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  TableCustomRenderComponentProps */
-/** @typedef {typeof __propDef.events}  TableCustomRenderComponentEvents */
-/** @typedef {typeof __propDef.slots}  TableCustomRenderComponentSlots */
-export default class TableCustomRenderComponent extends SvelteComponentTyped<{
-    cellValue: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TableCustomRenderComponentProps = typeof __propDef.props;
-export type TableCustomRenderComponentEvents = typeof __propDef.events;
-export type TableCustomRenderComponentSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        cellValue: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/components/agnostic/Tabs/TabButtonCustom.svelte

@@ -1,77 +0,0 @@
-<style>
-	.buttonWrap {
-		opacity: 1;
-		transition: opacity 0.2s;
-		margin: 0;
-	}
-	.buttonWrap:not(:first-of-type) {
-		/* So we don't get a "double border" between tab buttons */
-		margin-inline-start: -1px;
-	}
-	.buttonWrap:hover {
-		opacity: 0.7;
-	}
-	.buttonWrap:hover:focus {
-		opacity: 1;
-	}
-	.tabButton:focus {
-		box-shadow: 0 0 0 var(--functional-focus-ring-outline-width)
-			var(--functional-focus-ring-color);
-		outline: var(--functional-focus-ring-outline-width)
-			var(--functional-focus-ring-outline-style)
-			var(--functional-focus-ring-outline-color);
-		transition: box-shadow var(--functional-timing-fast) ease-out;
-	}
-	.active .tabButton {
-		outline: 1px solid var(--functional-primary-hover);
-	}
-</style>
-
-<script lang="ts">
-	// You can leverage all the prebuilt AgnosticUI buttons
-	import Button from '../Button/Button.svelte';
-
-	/**
-	 * You must expose this prop for your tab buttons to get proper
-	 * aria-selected and to show an affordance of the selected tab.
-	 * See the .active class -- we're using an outline but you can
-	 * set that affordance up however you'd like.
-	 */
-	export let isActive = false;
-	export let ariaControls = '';
-	export let disabled = false;
-	export let role = 'tab';
-
-	// This is a component reference which we need to control the keyboard navigation
-	// in our tabs implementation. See: https://svelte.dev/tutorial/component-this
-	let btn;
-	export function focus() {
-		return btn.focus();
-	}
-	export function isDisabled() {
-		return btn.disabled;
-	}
-</script>
-
-<div class="buttonWrap {isActive ? 'active' : ''}">
-	<!-- We're using our own button to manage aria et al and then use the Button of
-  type "faux" to get back a <div> styled like a button. We need to do this because
-  we need to bind:this={btn} so the Tabs library can call ref.focus() and
-  ref.isDisabled() from the a11y keyboard navigation code. -->
-	<button
-		style="background: transparent; border: none; padding: 0;"
-		on:click
-		on:keydown
-		bind:this="{btn}"
-		disabled="{disabled}"
-		role="{role}"
-		class="tabButton"
-		tabindex="{isActive ? 0 : -1}"
-		aria-controls="{ariaControls ? ariaControls : null}"
-		aria-selected="{isActive}"
-	>
-		<Button type="faux" isBordered mode="primary">
-			<slot />
-		</Button>
-	</button>
-</div>

package/dist/components/agnostic/Tabs/TabButtonCustom.svelte.d.ts

@@ -1,33 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * You must expose this prop for your tab buttons to get proper
-             * aria-selected and to show an affordance of the selected tab.
-             * See the .active class -- we're using an outline but you can
-             * set that affordance up however you'd like.
-             */ isActive?: boolean;
-        ariaControls?: string;
-        disabled?: boolean;
-        role?: string;
-        focus?: () => any;
-        isDisabled?: () => any;
-    };
-    events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TabButtonCustomProps = typeof __propDef.props;
-export type TabButtonCustomEvents = typeof __propDef.events;
-export type TabButtonCustomSlots = typeof __propDef.slots;
-export default class TabButtonCustom extends SvelteComponentTyped<TabButtonCustomProps, TabButtonCustomEvents, TabButtonCustomSlots> {
-    get focus(): () => any;
-    get isDisabled(): () => any;
-}
-export {};