tecitheme 0.11.10 → 0.11.11

package/dist/components/Accordion.svelte

@@ -1,34 +1,49 @@
+<!-- Adding this component to a post in /news will cause a build failing error. See the onMount below for details-->
 <script>
   import { slide } from "svelte/transition";
-  import { cubicIn, cubicOut, cubicInOut } from "svelte/easing";
+  import { cubicInOut } from "svelte/easing";
   import { makeIdString } from "../utils";
-    import { onMount } from "svelte";
-    import { page } from "$app/stores";
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
 
   export let data = {};
 
   let {prompts, title} = data;
   let id = makeIdString(title);
 
-  let openPrompts=[];
+  // This list controls which list prompts are expanded
+  let openPrompts = [];
 
+  // Adds an id to the list of expanded prompts
   function addPrompt(id) {
     openPrompts = [...openPrompts, id];
 
   }
 
+  // Removes and id from the list of expanded prompts
   function removePrompt(id) {
     openPrompts = openPrompts.filter((x) => x !== id);
   }
 
+  // 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.
+  // 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.
   onMount(() => {
-    if ($page.url.hash) {
-      let hashedPrompt = $page.url.hash.slice(1,);
+    // Get the hash
+    let hash = $page.url.hash;
+
+    if (hash) {
+      // Extract the ID
+      let hashedPrompt = hash.slice(1,);
+
+      // Check if there is a prompt with a matching ID
       let initialPrompt = prompts.filter(prompt => {
         return makeIdString(prompt.title) == hashedPrompt;
-      })[0]
+      })[0];
+
+      // Get the index of the prompt
       let initialPromptIndex = prompts.indexOf(initialPrompt);
       
+      // If we found a prompt, expand it
       if (initialPromptIndex != null) {
         openPrompts = [...openPrompts, `prompt-${initialPromptIndex}`]
       }

package/dist/components/Carousel.svelte

@@ -0,0 +1,115 @@
+<script>
+    import { getColorStyles, makeIdString } from "../utils";
+
+    export let data;
+    let { name, items } = data;
+
+    let currentItem = 0;
+    let carousel, carouselWidth;
+
+    // Scrolls the carousel to the current item
+    function scrollToCurrent() {
+      let item = document.getElementById(`${makeIdString(name)}-item-${currentItem}`);
+      item.scrollIntoView({block: "nearest", inline: "nearest", behavior: "smooth"});
+    }
+
+    // Scrolls carousel to the next item to the right, or back around to the beginning if at the end of provided elements
+    function scrollRight() {
+      if (currentItem >= items.length - 1) {
+        currentItem = 0;
+      } else {
+        currentItem += 1;
+      }
+
+      scrollToCurrent();
+    }
+
+    // Scrolls carousel to the next item to the left, or back around to the end if at the beginning of provided elements
+    function scrollLeft() {
+      if (currentItem <= 0) {
+        currentItem = items.length - 1;
+      } else {
+        currentItem -= 1;
+      }
+
+      scrollToCurrent();
+    }
+
+    // Updates the currentItem index if the user manually scrolls using the scrollbar/mouse/touch
+    function updateOnScroll(_) {
+      currentItem = parseInt((carousel.scrollLeft / carouselWidth).toFixed());
+    }
+</script>
+
+<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">
+
+  <!-- Carousel container -->
+  <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}>
+
+    <!-- Carousel Items -->
+    {#each items as item, index}
+      <!-- Images -->
+      {#if item.type === "image"}
+        <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">
+
+          <!-- Image -->
+          <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">
+            <img class="sm:h-72 lg:h-96 shadow" alt="" src={item.image} />
+          </a>
+
+          <!-- Caption -->
+          {#if item.cta}
+            <div class="flex flex-col p-4 items-center w-fit">
+              {#if item.cta.title}
+                <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>
+              {/if}
+              {#if item.cta.text}
+                <p class="mt-5 text-sm sm:text-lg text-gray-500 text-center line-clamp-6">{@html item.cta.text}</p>
+              {/if}
+              {#if item.cta.cta}
+                <a href={item.cta.cta.url} target="_blank" class="mt-6">
+                  <button class="btn {getColorStyles("button", item.cta.cta.color)}">
+                    {item.cta.cta.text}
+                  </button>
+                </a>
+              {/if}
+            </div>
+          {/if}
+        </div>
+
+      <!-- Call to Action -->
+      {:else if item.type === "cta"}
+        <div id={`${makeIdString(name)}-item-${index}`} class="item snap-center flex flex-col items-center w-full flex-shrink-0">
+          {#if item.title}
+            <h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">{@html item.title}</h1>
+          {/if}
+          {#if item.subtitle}
+            <h3 class="mt-5 text-xl text-gray-500 sm:text-center">{@html item.subtitle}</h3>
+          {/if}
+          {#if item.cta}
+            <a href={item.cta.url} target="_blank" class="mt-6">
+              <button class="btn {getColorStyles("button", item.cta.color)}">
+                {item.cta.text}
+              </button>
+            </a>
+          {/if}
+        </div>
+      {/if}
+    {/each}
+
+  </div>
+  
+  <!-- Scroll Left -->
+  <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()}>
+    <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">
+      <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" />
+    </svg>    
+  </button>
+
+  <!-- Scroll Right -->
+  <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()}>
+    <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">
+      <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" />
+    </svg>    
+  </button>
+</div>

package/dist/components/Carousel.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CarouselProps */
+/** @typedef {typeof __propDef.events}  CarouselEvents */
+/** @typedef {typeof __propDef.slots}  CarouselSlots */
+export default class Carousel extends SvelteComponent<{
+    data: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CarouselProps = typeof __propDef.props;
+export type CarouselEvents = typeof __propDef.events;
+export type CarouselSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/{AnswersList.svelte → DescriptionList.svelte}

@@ -1,26 +1,30 @@
 <script>
   import { makeIdString } from "../utils";
-
-
+  
   export let data = {};
   let id = makeIdString(data.name);
 </script>
 
 <div id={id} class="bg-white scroll-mt-16">
   <div class="mx-auto max-w-7xl divide-y divide-gray-900/10 px-6 lg:px-8">
+
+    <!-- Element headings -->
     <h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900"><a href={`#${id}`}>{@html data.heading}</a></h2>
+
+    <!-- Item List -->
     <dl class="mt-10 space-y-8 divide-y divide-gray-900/10">
       <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
 
         {#each data.items as item, index}
+          <!-- Item Label -->
           <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>
+
+          <!-- Item Content -->
           <dd class="mt-4 lg:col-span-7 lg:mt-0">
             <p class="text-base leading-7 text-gray-600">{@html item.description}</p>
           </dd>
         {/each}
       </div>
-
-      <!-- More questions... -->
     </dl>
   </div>
 </div>

package/dist/components/DescriptionList.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  DescriptionListProps */
+/** @typedef {typeof __propDef.events}  DescriptionListEvents */
+/** @typedef {typeof __propDef.slots}  DescriptionListSlots */
+export default class DescriptionList extends SvelteComponent<{
+    data?: {};
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DescriptionListProps = typeof __propDef.props;
+export type DescriptionListEvents = typeof __propDef.events;
+export type DescriptionListSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/FeatureTable.svelte

@@ -1,3 +1,4 @@
+<!-- Adding this component to a post in /news will cause a build failing error. See the onMount below for details-->
 <script>
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
@@ -126,17 +127,27 @@
     }
   }
 
+  // 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.
+  // 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.
   onMount(() => {
+    // Get the group param
     let initialGroupParam = $page.url.searchParams.get("group");
+
+    // Set the selected group
     if (initialGroupParam != null) {
       let initialGroup = data.groups.filter(group => group.name === initialGroupParam)[0];
       selectedGroup.update(_ => initialGroup);
     }
 
+    // When the selected group changes, set the URL param, then update the displayed URL
     selectedGroup.subscribe(newGroup => {
+      // Set URL param
       $page.url.searchParams.set("group", newGroup.name);
+
+      // Update displayed URL
       goto($page.url.toString(), {noScroll: true});
 
+      // Wait a bit for the group to switch, then scroll to the element defined in the URL hash
       setTimeout(() => {
         let anchorElement = document.getElementById($page.url.hash.slice(1,));
         if (anchorElement) anchorElement.scrollIntoView(true);
@@ -231,13 +242,13 @@
   </div>
 
   <!-- Desktop Table Headings -->
-  <div class="hidden sticky top-16 bg-white sm:flex flex-row space-x-8 w-full z-20 border-b shadow-lg">
+  <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">
     <div class="w-full py-8"></div>
     {#each $selectedTable.columns as column}
       <div class="-mt-px border-b-2 w-full border-transparent py-8 {column.highlightOption ? getColorStyles("border", data.color) : ""}">
           <h3 class="font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.color) : ""}">{column.name}</h3>
           {#if column.description}
-            <p class="mt-1 text-sm leading-6 text-gray-600">{@html column.description}</p>
+            <p class="mt-1 text-sm leading-6 text-gray-600 line-clamp-3">{@html column.description}</p>
           {/if}
       </div>
     {/each}
@@ -247,9 +258,9 @@
   {#each Object.values($selectedTable.categories) as category, categoryIndex}
 
     <!-- Category Name -->
-    <div class="hidden sm:flex sticky top-32 z-20 bg-transparent flex-row">
+    <div class="hidden sm:flex sticky top-44 z-20 bg-transparent flex-row">
 
-      <h4 id={makeIdString($selectedTable.name + " " + category.name)} class="scroll-mt-24 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>
+      <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>
 
       {#each $selectedTable.columns as col}
       <div class="w-full"></div>

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { default as ContentTwoColumns } from "./components/ContentTwoColumns.sve
 export { default as CountrySelector } from "./components/CountrySelector.svelte";
 export { default as CTA } from "./components/CTA.svelte";
 export { default as CTASplitImage } from "./components/CTASplitImage.svelte";
-export { default as AnswersList } from "./components/AnswersList.svelte";
+export { default as DescriptionList } from "./components/DescriptionList.svelte";
 export { default as FeatureGrid } from "./components/FeatureGrid.svelte";
 export { default as FeatureTable } from "./components/FeatureTable.svelte";
 export { default as Figure } from "./components/Figure.svelte";

package/dist/index.js

@@ -5,12 +5,13 @@ export { default as Banner } from './components/Banner.svelte';
 export { default as Blocks } from './layouts/blocks.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
+export { deafault as Carousel } from './components/Carousel.svelte';
 export { default as CognitoForm } from './components/CognitoForm.svelte';
 export { default as ContentTwoColumns } from './components/ContentTwoColumns.svelte';
 export { default as CountrySelector } from './components/CountrySelector.svelte';
 export { default as CTA } from './components/CTA.svelte';
 export { default as CTASplitImage } from './components/CTASplitImage.svelte';
-export { default as AnswersList } from './components/AnswersList.svelte';
+export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as FeatureGrid } from './components/FeatureGrid.svelte';
 export { default as FeatureTable } from './components/FeatureTable.svelte';
 export { default as Figure } from './components/Figure.svelte';

package/dist/layouts/blocks.svelte

@@ -20,7 +20,8 @@
   import PageNav from "../components/PageNav.svelte";
   import Testimonial from "../components/Testimonial.svelte";
   import PartnersList from "../components/PartnersList.svelte";
-  import AnswersList  from "../components/AnswersList.svelte";
+  import DescriptionList  from "../components/DescriptionList.svelte";
+  import Carousel from "../components/Carousel.svelte";
 
   let blocks = [
     { ref: "accordion", component: Accordion},
@@ -44,7 +45,8 @@
     { ref: "pageNav", component: PageNav },
     { ref: "testimonial", component: Testimonial },
     { ref: "partners", component: PartnersList },
-    { ref: "answers-list", component: AnswersList }
+    { ref: "description-list", component: DescriptionList },
+    { ref: "carousel", component: Carousel},
   ];
 
   export let data = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.11.10",
+  "version": "0.11.11",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",
@@ -58,6 +58,7 @@
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.19",
     "sveltekit-autoimport": "^1.7.0",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",

package/dist/components/AnswersList.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  AnswersListProps */
-/** @typedef {typeof __propDef.events}  AnswersListEvents */
-/** @typedef {typeof __propDef.slots}  AnswersListSlots */
-export default class AnswersList extends SvelteComponent<{
-    data?: {};
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AnswersListProps = typeof __propDef.props;
-export type AnswersListEvents = typeof __propDef.events;
-export type AnswersListSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        data?: {};
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};