tecitheme 0.11.9 → 0.11.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion.svelte +101 -46
- package/dist/components/Accordion.svelte.d.ts +0 -4
- package/dist/components/Carousel.svelte +115 -0
- package/dist/components/Carousel.svelte.d.ts +23 -0
- package/dist/components/{AnswersList.svelte → DescriptionList.svelte} +8 -4
- package/dist/components/DescriptionList.svelte.d.ts +23 -0
- package/dist/components/FeatureTable.svelte +15 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -1
- package/dist/layouts/blocks.svelte +4 -2
- package/package.json +2 -1
- package/dist/components/AnswersList.svelte.d.ts +0 -23
|
@@ -1,73 +1,128 @@
|
|
|
1
|
+
<!-- Adding this component to a post in /news will cause a build failing error. See the onMount below for details-->
|
|
1
2
|
<script>
|
|
2
3
|
import { slide } from "svelte/transition";
|
|
3
|
-
import {
|
|
4
|
+
import { cubicInOut } from "svelte/easing";
|
|
5
|
+
import { makeIdString } from "../utils";
|
|
6
|
+
import { onMount } from "svelte";
|
|
7
|
+
import { page } from "$app/stores";
|
|
4
8
|
|
|
5
9
|
export let data = {};
|
|
6
|
-
export let prompts=[];
|
|
7
|
-
export let title="";
|
|
8
|
-
|
|
9
|
-
let promptsArray;
|
|
10
|
-
let accordionTitle;
|
|
11
|
-
let openPrompts=[];
|
|
12
|
-
|
|
13
|
-
if (data.prompts) {
|
|
14
|
-
promptsArray = data.prompts;
|
|
15
|
-
} else if (prompts) {
|
|
16
|
-
promptsArray = prompts;
|
|
17
|
-
} else {
|
|
18
|
-
promptsArray = [];
|
|
19
|
-
}
|
|
20
10
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} else if (data.title) {
|
|
24
|
-
accordionTitle = data.title;
|
|
25
|
-
} else {
|
|
26
|
-
accordionTitle = "";
|
|
27
|
-
}
|
|
11
|
+
let {prompts, title} = data;
|
|
12
|
+
let id = makeIdString(title);
|
|
28
13
|
|
|
14
|
+
// This list controls which list prompts are expanded
|
|
15
|
+
let openPrompts = [];
|
|
16
|
+
|
|
17
|
+
// Adds an id to the list of expanded prompts
|
|
29
18
|
function addPrompt(id) {
|
|
30
19
|
openPrompts = [...openPrompts, id];
|
|
20
|
+
|
|
31
21
|
}
|
|
32
22
|
|
|
23
|
+
// Removes and id from the list of expanded prompts
|
|
33
24
|
function removePrompt(id) {
|
|
34
25
|
openPrompts = openPrompts.filter((x) => x !== id);
|
|
35
26
|
}
|
|
36
27
|
|
|
28
|
+
// When the component mounts, check if the URL hash is the ID of a prompt in this Accordion. If so, expand it so the user can read it.
|
|
29
|
+
// NOTE: This behavior (specifically accessing the $page store) causes issues when rendering this component in the /news route. The server side pre-rendering behavior of that route (specifically for generating a JSON file for use in the NewGrid component) conflicts with Svelte safety rules for accessing certain stores. Adding this component to a post in /news will cause a build failing error.
|
|
30
|
+
onMount(() => {
|
|
31
|
+
// Get the hash
|
|
32
|
+
let hash = $page.url.hash;
|
|
33
|
+
|
|
34
|
+
if (hash) {
|
|
35
|
+
// Extract the ID
|
|
36
|
+
let hashedPrompt = hash.slice(1,);
|
|
37
|
+
|
|
38
|
+
// Check if there is a prompt with a matching ID
|
|
39
|
+
let initialPrompt = prompts.filter(prompt => {
|
|
40
|
+
return makeIdString(prompt.title) == hashedPrompt;
|
|
41
|
+
})[0];
|
|
42
|
+
|
|
43
|
+
// Get the index of the prompt
|
|
44
|
+
let initialPromptIndex = prompts.indexOf(initialPrompt);
|
|
45
|
+
|
|
46
|
+
// If we found a prompt, expand it
|
|
47
|
+
if (initialPromptIndex != null) {
|
|
48
|
+
openPrompts = [...openPrompts, `prompt-${initialPromptIndex}`]
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
|
|
37
53
|
</script>
|
|
38
54
|
|
|
39
|
-
<section class="mx-auto mb-8 w-full
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
55
|
+
<section class="mx-auto mb-8 w-full divide-y divide-gray-900/10 px-6 lg:px-8">
|
|
56
|
+
<!-- Header -->
|
|
57
|
+
<div class="flex flex-row w-full items-center space-x-4">
|
|
58
|
+
<!-- Title -->
|
|
59
|
+
{#if title}
|
|
60
|
+
<h2 id={id} class="scroll-mt-16 text-2xl font-bold leading-10 tracking-tight text-gray-900 w-full"><a href={`#${id}`}>{@html title}</a></h2>
|
|
61
|
+
{:else}
|
|
62
|
+
<div class="flex-grow" />
|
|
63
|
+
{/if}
|
|
64
|
+
|
|
65
|
+
<!-- Expand All -->
|
|
66
|
+
<button class="px-2" on:click={() => {
|
|
67
|
+
openPrompts = prompts.map((prompt, index) => `prompt-${index}`);
|
|
68
|
+
}}>
|
|
69
|
+
<span class="sr-only">Expand All</span>
|
|
70
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
71
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
72
|
+
</svg>
|
|
73
|
+
</button>
|
|
74
|
+
|
|
75
|
+
<!-- Collapse All -->
|
|
76
|
+
<button class="px-2" on:click={() => {
|
|
77
|
+
openPrompts = [];
|
|
78
|
+
}}>
|
|
79
|
+
<span class="sr-only">Collapse All</span>
|
|
80
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
81
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
|
|
82
|
+
</svg>
|
|
83
|
+
</button>
|
|
84
|
+
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<!-- Prompts -->
|
|
88
|
+
<dl class="space-y-6 divide-y divide-gray-900/10 mt-10">
|
|
89
|
+
{#each prompts as prompt, i}
|
|
45
90
|
<div id="prompt-{i}" class="pt-6">
|
|
46
|
-
|
|
91
|
+
<!-- Prompt -->
|
|
92
|
+
<dt class="scroll-mt-16" id={makeIdString(prompt.title)}>
|
|
47
93
|
<button type="button"
|
|
48
94
|
on:click={() => openPrompts.includes(`prompt-${i}`) ? removePrompt(`prompt-${i}`) : addPrompt(`prompt-${i}`)}
|
|
49
95
|
class="flex w-full items-start justify-between text-left text-gray-900"
|
|
50
96
|
aria-controls="prompt-content-{i}"
|
|
51
97
|
aria-expanded={openPrompts.includes(`prompt-${i}`)}>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
98
|
+
|
|
99
|
+
<a href={`#${makeIdString(prompt.title)}`} class="flex w-full items-start justify-between text-left text-gray-900">
|
|
100
|
+
<span class="text-base font-semibold leading-7">{prompt.title}</span>
|
|
101
|
+
<span class="ml-6 flex h-7 items-center">
|
|
102
|
+
{#if (openPrompts.includes(`prompt-${i}`))}
|
|
103
|
+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
104
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
|
|
105
|
+
</svg>
|
|
106
|
+
{:else}
|
|
107
|
+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
108
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
|
|
109
|
+
</svg>
|
|
110
|
+
{/if}
|
|
111
|
+
</span>
|
|
112
|
+
</a>
|
|
113
|
+
|
|
64
114
|
</button>
|
|
65
115
|
</dt>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
116
|
+
|
|
117
|
+
<!-- Content -->
|
|
118
|
+
{#if openPrompts.includes(`prompt-${i}`)}
|
|
119
|
+
<dd id="prompt-content-{i}" class="mt-2 pr-12" transition:slide={{ delay: 100, duration: 300, easing: cubicInOut, axis: 'y' }}>
|
|
120
|
+
<p class="text-base leading-7"
|
|
121
|
+
>
|
|
122
|
+
{@html prompt.content}
|
|
123
|
+
</p>
|
|
124
|
+
</dd>
|
|
125
|
+
{/if}
|
|
71
126
|
</div>
|
|
72
127
|
{/each}
|
|
73
128
|
</dl>
|
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
/** @typedef {typeof __propDef.slots} AccordionSlots */
|
|
4
4
|
export default class Accordion extends SvelteComponent<{
|
|
5
5
|
data?: {};
|
|
6
|
-
title?: string;
|
|
7
|
-
prompts?: any[];
|
|
8
6
|
}, {
|
|
9
7
|
[evt: string]: CustomEvent<any>;
|
|
10
8
|
}, {}> {
|
|
@@ -16,8 +14,6 @@ import { SvelteComponent } from "svelte";
|
|
|
16
14
|
declare const __propDef: {
|
|
17
15
|
props: {
|
|
18
16
|
data?: {};
|
|
19
|
-
title?: string;
|
|
20
|
-
prompts?: any[];
|
|
21
17
|
};
|
|
22
18
|
events: {
|
|
23
19
|
[evt: string]: CustomEvent<any>;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getColorStyles, makeIdString } from "../utils";
|
|
3
|
+
|
|
4
|
+
export let data;
|
|
5
|
+
let { name, items } = data;
|
|
6
|
+
|
|
7
|
+
let currentItem = 0;
|
|
8
|
+
let carousel, carouselWidth;
|
|
9
|
+
|
|
10
|
+
// Scrolls the carousel to the current item
|
|
11
|
+
function scrollToCurrent() {
|
|
12
|
+
let item = document.getElementById(`${makeIdString(name)}-item-${currentItem}`);
|
|
13
|
+
item.scrollIntoView({block: "nearest", inline: "nearest", behavior: "smooth"});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Scrolls carousel to the next item to the right, or back around to the beginning if at the end of provided elements
|
|
17
|
+
function scrollRight() {
|
|
18
|
+
if (currentItem >= items.length - 1) {
|
|
19
|
+
currentItem = 0;
|
|
20
|
+
} else {
|
|
21
|
+
currentItem += 1;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
scrollToCurrent();
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Scrolls carousel to the next item to the left, or back around to the end if at the beginning of provided elements
|
|
28
|
+
function scrollLeft() {
|
|
29
|
+
if (currentItem <= 0) {
|
|
30
|
+
currentItem = items.length - 1;
|
|
31
|
+
} else {
|
|
32
|
+
currentItem -= 1;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
scrollToCurrent();
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Updates the currentItem index if the user manually scrolls using the scrollbar/mouse/touch
|
|
39
|
+
function updateOnScroll(_) {
|
|
40
|
+
currentItem = parseInt((carousel.scrollLeft / carouselWidth).toFixed());
|
|
41
|
+
}
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<div class="relative flex max-w-xs sm:max-w-xl md:max-w-2xl lg:max-w-7xl mx-auto items-center shadow-lg">
|
|
45
|
+
|
|
46
|
+
<!-- Carousel container -->
|
|
47
|
+
<div bind:this={carousel} bind:clientWidth={carouselWidth} id={makeIdString(name)} class="carousel snap-x snap-mandatory overflow-y-hidden flex flex-row space-x-8 overflow-x-scroll items-center align-middle scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-white scrollbar-thumb-rounded-full scrollbar-track-rounded-full bg-gray-300/50 sm:h-96 lg:h-[28rem] ring-gray-300/80 ring-1" on:scroll={updateOnScroll}>
|
|
48
|
+
|
|
49
|
+
<!-- Carousel Items -->
|
|
50
|
+
{#each items as item, index}
|
|
51
|
+
<!-- Images -->
|
|
52
|
+
{#if item.type === "image"}
|
|
53
|
+
<div id={`${makeIdString(name)}-item-${index}`} class="item snap-center flex flex-col sm:flex-row w-full items-center justify-center flex-shrink-0 p-2">
|
|
54
|
+
|
|
55
|
+
<!-- Image -->
|
|
56
|
+
<a class="flex-grow flex-shrink-0 flex justify-center {item.cta ? "w-1/2" : "w-full"}" href={item.url ? item.url : item.image} target="_blank">
|
|
57
|
+
<img class="sm:h-72 lg:h-96 shadow" alt="" src={item.image} />
|
|
58
|
+
</a>
|
|
59
|
+
|
|
60
|
+
<!-- Caption -->
|
|
61
|
+
{#if item.cta}
|
|
62
|
+
<div class="flex flex-col p-4 items-center w-fit">
|
|
63
|
+
{#if item.cta.title}
|
|
64
|
+
<h1 class="text-lg sm:text-xl md:text-3xl lg:text-5xl font-bold tracking-tight text-gray-900 sm:text-center">{@html item.cta.title}</h1>
|
|
65
|
+
{/if}
|
|
66
|
+
{#if item.cta.text}
|
|
67
|
+
<p class="mt-5 text-sm sm:text-lg text-gray-500 text-center line-clamp-6">{@html item.cta.text}</p>
|
|
68
|
+
{/if}
|
|
69
|
+
{#if item.cta.cta}
|
|
70
|
+
<a href={item.cta.cta.url} target="_blank" class="mt-6">
|
|
71
|
+
<button class="btn {getColorStyles("button", item.cta.cta.color)}">
|
|
72
|
+
{item.cta.cta.text}
|
|
73
|
+
</button>
|
|
74
|
+
</a>
|
|
75
|
+
{/if}
|
|
76
|
+
</div>
|
|
77
|
+
{/if}
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<!-- Call to Action -->
|
|
81
|
+
{:else if item.type === "cta"}
|
|
82
|
+
<div id={`${makeIdString(name)}-item-${index}`} class="item snap-center flex flex-col items-center w-full flex-shrink-0">
|
|
83
|
+
{#if item.title}
|
|
84
|
+
<h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">{@html item.title}</h1>
|
|
85
|
+
{/if}
|
|
86
|
+
{#if item.subtitle}
|
|
87
|
+
<h3 class="mt-5 text-xl text-gray-500 sm:text-center">{@html item.subtitle}</h3>
|
|
88
|
+
{/if}
|
|
89
|
+
{#if item.cta}
|
|
90
|
+
<a href={item.cta.url} target="_blank" class="mt-6">
|
|
91
|
+
<button class="btn {getColorStyles("button", item.cta.color)}">
|
|
92
|
+
{item.cta.text}
|
|
93
|
+
</button>
|
|
94
|
+
</a>
|
|
95
|
+
{/if}
|
|
96
|
+
</div>
|
|
97
|
+
{/if}
|
|
98
|
+
{/each}
|
|
99
|
+
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- Scroll Left -->
|
|
103
|
+
<button class="absolute left-4 rounded-full bg-transparent hover:bg-gray-400/50 text-gray-300 hover:text-gray-600 transition duration-100 ease-in-out active:bg-gray-500/50" on:click={() => scrollLeft()}>
|
|
104
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
|
|
105
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
106
|
+
</svg>
|
|
107
|
+
</button>
|
|
108
|
+
|
|
109
|
+
<!-- Scroll Right -->
|
|
110
|
+
<button class="absolute right-4 rounded-full bg-transparent hover:bg-gray-400/50 text-gray-300 hover:text-gray-600 transition duration-100 ease-in-out active:bg-gray-500/50" on:click={() => scrollRight()}>
|
|
111
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
|
|
112
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
113
|
+
</svg>
|
|
114
|
+
</button>
|
|
115
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} CarouselProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} CarouselEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} CarouselSlots */
|
|
4
|
+
export default class Carousel extends SvelteComponent<{
|
|
5
|
+
data: any;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type CarouselProps = typeof __propDef.props;
|
|
11
|
+
export type CarouselEvents = typeof __propDef.events;
|
|
12
|
+
export type CarouselSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
data: any;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -1,26 +1,30 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { makeIdString } from "../utils";
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
|
|
5
4
|
export let data = {};
|
|
6
5
|
let id = makeIdString(data.name);
|
|
7
6
|
</script>
|
|
8
7
|
|
|
9
8
|
<div id={id} class="bg-white scroll-mt-16">
|
|
10
9
|
<div class="mx-auto max-w-7xl divide-y divide-gray-900/10 px-6 lg:px-8">
|
|
10
|
+
|
|
11
|
+
<!-- Element headings -->
|
|
11
12
|
<h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900"><a href={`#${id}`}>{@html data.heading}</a></h2>
|
|
13
|
+
|
|
14
|
+
<!-- Item List -->
|
|
12
15
|
<dl class="mt-10 space-y-8 divide-y divide-gray-900/10">
|
|
13
16
|
<div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
|
|
14
17
|
|
|
15
18
|
{#each data.items as item, index}
|
|
19
|
+
<!-- Item Label -->
|
|
16
20
|
<dt id={`${id}-list-item-${index}`} class="text-base font-semibold leading-7 text-gray-900 lg:col-span-5 scroll-mt-16"><a href={`#${id}-list-item-${index}`}>{@html item.label}</a></dt>
|
|
21
|
+
|
|
22
|
+
<!-- Item Content -->
|
|
17
23
|
<dd class="mt-4 lg:col-span-7 lg:mt-0">
|
|
18
24
|
<p class="text-base leading-7 text-gray-600">{@html item.description}</p>
|
|
19
25
|
</dd>
|
|
20
26
|
{/each}
|
|
21
27
|
</div>
|
|
22
|
-
|
|
23
|
-
<!-- More questions... -->
|
|
24
28
|
</dl>
|
|
25
29
|
</div>
|
|
26
30
|
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} DescriptionListProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} DescriptionListEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} DescriptionListSlots */
|
|
4
|
+
export default class DescriptionList extends SvelteComponent<{
|
|
5
|
+
data?: {};
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type DescriptionListProps = typeof __propDef.props;
|
|
11
|
+
export type DescriptionListEvents = typeof __propDef.events;
|
|
12
|
+
export type DescriptionListSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
data?: {};
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
<!-- Adding this component to a post in /news will cause a build failing error. See the onMount below for details-->
|
|
1
2
|
<script>
|
|
2
3
|
import { goto } from "$app/navigation";
|
|
3
4
|
import { page } from "$app/stores";
|
|
@@ -126,17 +127,27 @@
|
|
|
126
127
|
}
|
|
127
128
|
}
|
|
128
129
|
|
|
130
|
+
// When the component mounts, switch to the group defined in the ?group search parameter, then check for and scroll to the element specified in the URL hash.
|
|
131
|
+
// NOTE: This behavior (specifically accessing the $page store) causes issues when rendering this component in the /news route. The server side pre-rendering behavior of that route (specifically for generating a JSON file for use in the NewGrid component) conflicts with Svelte safety rules for accessing certain stores. Adding this component to a post in /news will cause a build failing error.
|
|
129
132
|
onMount(() => {
|
|
133
|
+
// Get the group param
|
|
130
134
|
let initialGroupParam = $page.url.searchParams.get("group");
|
|
135
|
+
|
|
136
|
+
// Set the selected group
|
|
131
137
|
if (initialGroupParam != null) {
|
|
132
138
|
let initialGroup = data.groups.filter(group => group.name === initialGroupParam)[0];
|
|
133
139
|
selectedGroup.update(_ => initialGroup);
|
|
134
140
|
}
|
|
135
141
|
|
|
142
|
+
// When the selected group changes, set the URL param, then update the displayed URL
|
|
136
143
|
selectedGroup.subscribe(newGroup => {
|
|
144
|
+
// Set URL param
|
|
137
145
|
$page.url.searchParams.set("group", newGroup.name);
|
|
146
|
+
|
|
147
|
+
// Update displayed URL
|
|
138
148
|
goto($page.url.toString(), {noScroll: true});
|
|
139
149
|
|
|
150
|
+
// Wait a bit for the group to switch, then scroll to the element defined in the URL hash
|
|
140
151
|
setTimeout(() => {
|
|
141
152
|
let anchorElement = document.getElementById($page.url.hash.slice(1,));
|
|
142
153
|
if (anchorElement) anchorElement.scrollIntoView(true);
|
|
@@ -231,13 +242,13 @@
|
|
|
231
242
|
</div>
|
|
232
243
|
|
|
233
244
|
<!-- Desktop Table Headings -->
|
|
234
|
-
<div class="hidden sticky top-16 bg-white sm:flex flex-row space-x-8 w-full z-20 border-b shadow-lg">
|
|
245
|
+
<div class="hidden sticky top-16 bg-white sm:flex flex-row space-x-8 w-full z-20 border-b shadow-lg h-40">
|
|
235
246
|
<div class="w-full py-8"></div>
|
|
236
247
|
{#each $selectedTable.columns as column}
|
|
237
248
|
<div class="-mt-px border-b-2 w-full border-transparent py-8 {column.highlightOption ? getColorStyles("border", data.color) : ""}">
|
|
238
249
|
<h3 class="font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.color) : ""}">{column.name}</h3>
|
|
239
250
|
{#if column.description}
|
|
240
|
-
<p class="mt-1 text-sm leading-6 text-gray-600">{@html column.description}</p>
|
|
251
|
+
<p class="mt-1 text-sm leading-6 text-gray-600 line-clamp-3">{@html column.description}</p>
|
|
241
252
|
{/if}
|
|
242
253
|
</div>
|
|
243
254
|
{/each}
|
|
@@ -247,9 +258,9 @@
|
|
|
247
258
|
{#each Object.values($selectedTable.categories) as category, categoryIndex}
|
|
248
259
|
|
|
249
260
|
<!-- Category Name -->
|
|
250
|
-
<div class="hidden sm:flex sticky top-
|
|
261
|
+
<div class="hidden sm:flex sticky top-44 z-20 bg-transparent flex-row">
|
|
251
262
|
|
|
252
|
-
<h4 id={makeIdString($selectedTable.name + " " + category.name)} class="scroll-mt-
|
|
263
|
+
<h4 id={makeIdString($selectedTable.name + " " + category.name)} class="scroll-mt-36 bg-white font-semibold leading-6 text-gray-900 pl-4 mr-8 py-2 w-full"><a href={"#"+makeIdString($selectedTable.name + " " + category.name)}>{category.name}</a></h4>
|
|
253
264
|
|
|
254
265
|
{#each $selectedTable.columns as col}
|
|
255
266
|
<div class="w-full"></div>
|
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export { default as ContentTwoColumns } from "./components/ContentTwoColumns.sve
|
|
|
10
10
|
export { default as CountrySelector } from "./components/CountrySelector.svelte";
|
|
11
11
|
export { default as CTA } from "./components/CTA.svelte";
|
|
12
12
|
export { default as CTASplitImage } from "./components/CTASplitImage.svelte";
|
|
13
|
-
export { default as
|
|
13
|
+
export { default as DescriptionList } from "./components/DescriptionList.svelte";
|
|
14
14
|
export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
|
|
15
15
|
export { default as FeatureTable } from "./components/FeatureTable.svelte";
|
|
16
16
|
export { default as Figure } from "./components/Figure.svelte";
|
package/dist/index.js
CHANGED
|
@@ -5,12 +5,13 @@ export { default as Banner } from './components/Banner.svelte';
|
|
|
5
5
|
export { default as Blocks } from './layouts/blocks.svelte';
|
|
6
6
|
export { default as Button } from './components/Button.svelte';
|
|
7
7
|
export { default as Card } from './components/Card.svelte';
|
|
8
|
+
export { deafault as Carousel } from './components/Carousel.svelte';
|
|
8
9
|
export { default as CognitoForm } from './components/CognitoForm.svelte';
|
|
9
10
|
export { default as ContentTwoColumns } from './components/ContentTwoColumns.svelte';
|
|
10
11
|
export { default as CountrySelector } from './components/CountrySelector.svelte';
|
|
11
12
|
export { default as CTA } from './components/CTA.svelte';
|
|
12
13
|
export { default as CTASplitImage } from './components/CTASplitImage.svelte';
|
|
13
|
-
export { default as
|
|
14
|
+
export { default as DescriptionList } from './components/DescriptionList.svelte';
|
|
14
15
|
export { default as FeatureGrid } from './components/FeatureGrid.svelte';
|
|
15
16
|
export { default as FeatureTable } from './components/FeatureTable.svelte';
|
|
16
17
|
export { default as Figure } from './components/Figure.svelte';
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
import PageNav from "../components/PageNav.svelte";
|
|
21
21
|
import Testimonial from "../components/Testimonial.svelte";
|
|
22
22
|
import PartnersList from "../components/PartnersList.svelte";
|
|
23
|
-
import
|
|
23
|
+
import DescriptionList from "../components/DescriptionList.svelte";
|
|
24
|
+
import Carousel from "../components/Carousel.svelte";
|
|
24
25
|
|
|
25
26
|
let blocks = [
|
|
26
27
|
{ ref: "accordion", component: Accordion},
|
|
@@ -44,7 +45,8 @@
|
|
|
44
45
|
{ ref: "pageNav", component: PageNav },
|
|
45
46
|
{ ref: "testimonial", component: Testimonial },
|
|
46
47
|
{ ref: "partners", component: PartnersList },
|
|
47
|
-
{ ref: "
|
|
48
|
+
{ ref: "description-list", component: DescriptionList },
|
|
49
|
+
{ ref: "carousel", component: Carousel},
|
|
48
50
|
];
|
|
49
51
|
|
|
50
52
|
export let data = {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tecitheme",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
"svelte-preprocess": "^5.0.4",
|
|
59
59
|
"svelte2tsx": "^0.6.19",
|
|
60
60
|
"sveltekit-autoimport": "^1.7.0",
|
|
61
|
+
"tailwind-scrollbar": "^3.1.0",
|
|
61
62
|
"tailwindcss": "^3.3.2",
|
|
62
63
|
"tslib": "^2.6.0",
|
|
63
64
|
"typescript": "^5.1.6",
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} AnswersListProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} AnswersListEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} AnswersListSlots */
|
|
4
|
-
export default class AnswersList extends SvelteComponent<{
|
|
5
|
-
data?: {};
|
|
6
|
-
}, {
|
|
7
|
-
[evt: string]: CustomEvent<any>;
|
|
8
|
-
}, {}> {
|
|
9
|
-
}
|
|
10
|
-
export type AnswersListProps = typeof __propDef.props;
|
|
11
|
-
export type AnswersListEvents = typeof __propDef.events;
|
|
12
|
-
export type AnswersListSlots = typeof __propDef.slots;
|
|
13
|
-
import { SvelteComponent } from "svelte";
|
|
14
|
-
declare const __propDef: {
|
|
15
|
-
props: {
|
|
16
|
-
data?: {};
|
|
17
|
-
};
|
|
18
|
-
events: {
|
|
19
|
-
[evt: string]: CustomEvent<any>;
|
|
20
|
-
};
|
|
21
|
-
slots: {};
|
|
22
|
-
};
|
|
23
|
-
export {};
|