@functionalcms/svelte-components 3.5.16 → 3.5.18

package/dist/components/agnostic/Tooltip/Tooltip.svelte

@@ -1,120 +0,0 @@
-<style>
-.tooltip {
-  display: none;
-  position: absolute;
-  background: var(--functional-dark);
-  color: var(--functional-light);
-  padding: var(--fluid-4) var(--fluid-8);
-  border-radius: var(--fluid-4);
-  pointer-events: none;
-}
-
-.tooltip-arrow {
-  position: absolute;
-  background: var(--functional-dark);
-  width: var(--fluid-8);
-  height: var(--fluid-8);
-  transform: rotate(45deg);
-}
-
-</style>
-<script lang="ts">
-  import {
-    computePosition,
-    flip,
-    offset as fuOffset,
-    shift,
-    arrow,
-  } from "@floating-ui/dom";
-  import type { TooltipPlacement } from './api';
-
-  export let placement: TooltipPlacement = "top";
-  export let offset: number = 6;
-
-  let tooltipRef;
-  let tooltipTargetRef;
-  let tooltipArrowRef;
-
-  const uid = () =>
-    `tip-${Date.now().toString(32)}-${Math.random()
-      .toString(16)
-      .replace(/\./g, "")
-      .toString()}`;
-
-  const id = uid();
-
-
-  const update = () => {
-    const tip = tooltipRef;
-    const target = tooltipTargetRef;
-    const arrowEl = tooltipArrowRef;
-
-    if (tip && target && arrowEl) {
-      computePosition(target, tip, {
-        placement: placement,
-        middleware: [
-          fuOffset(offset),
-          flip(),
-          shift({ padding: 4 }),
-          arrow({
-            element: arrowEl,
-            // Offset from edge; fixes issue on left-start, left-end, right-start,
-            // etc., where arrow oddly overlaps the rounded corner of content box
-            padding: 10,
-          }),
-        ],
-      }).then(({ x, y, placement, middlewareData }) => {
-        const arrowX = middlewareData.arrow!.x;
-        const arrowY = middlewareData.arrow!.y;
-        const staticSide = {
-          top: "bottom",
-          right: "left",
-          bottom: "top",
-          left: "right",
-        }[placement.split("-")[0]]!;
-
-        Object.assign(tip.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-
-        Object.assign(arrowEl.style, {
-          left: typeof arrowX === "number" ? `${arrowX}px` : "",
-          top: typeof arrowY === "number" ? `${arrowY}px` : "",
-          right: "",
-          bottom: "",
-          [staticSide]: "-4px",
-        });
-      });
-    }
-  }
-
-  const showTooltip = () => {
-    if (tooltipRef) {
-      tooltipRef.style.display = "block";
-    }
-    update();
-  };
-
-  const hideTooltip = () => {
-    if (tooltipRef) {
-      tooltipRef.style.display = "";
-    }
-  };
-  const tooltipClasses = "tooltip";
-  const tooltipArrowClasses = "tooltip-arrow";
-</script>
-<div
-  bind:this={tooltipTargetRef}
-  aria-describedby={id}
-  on:focus={showTooltip}
-  on:mouseenter={showTooltip}
-  on:mouseleave={hideTooltip}
-  on:blur={hideTooltip}
->
-  <slot></slot>
-</div>
-<div id={id} bind:this={tooltipRef} role="tooltip" class={tooltipClasses}>
-  <slot name="content"></slot>
-  <div id="arrow" bind:this={tooltipArrowRef} class={tooltipArrowClasses} />
-</div>

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

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TooltipPlacement } from './api';
-declare const __propDef: {
-    props: {
-        placement?: TooltipPlacement;
-        offset?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        content: {};
-    };
-};
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
-}
-export {};

package/dist/components/agnostic/Tooltip/TooltipSlots.svelte

@@ -1,82 +0,0 @@
-<style>
-  div {
-    margin-block-end: 1rem;
-  }
-  
-  /* Hack: probably shouldn't target aria but it's just for demo purposes */
-  :global(.tooltips-container [aria-describedby^="tip-"]) {
-    width: 100px;
-    height: 100px;
-    padding: var(--fluid-6) var(--fluid-12);
-    border-radius: var(--functional-radius);
-    border: 1px solid var(--functional-gray-light);
-    display: flex;
-    align-items: center;
-    text-align: center;
-  }
-</style>
-
-<script lang="ts">
-  import Tooltip from "./Tooltip.svelte";
-</script>
-
-<div class="h4 mbs40">Tooltips</div>
-<div class="text-center tooltips-container">
-  <section class="mbs56 mbe40 flex-inline justify-between w-100">
-    <Tooltip placement="top-start">
-      Tooltip top-start
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="top">
-      Tooltip top
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="top-end">
-      Tooltip top-end
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-  </section>
-  <section
-    class="flex flex-column items-center"
-    style="gap: var(--fluid-18);"
-  >
-    <Tooltip placement="left-start">
-      Tooltip left-start
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="left">
-      Tooltip left
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="left-end">
-      Tooltip left-end
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="right-start">
-      Tooltip right-start
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="right">
-      Tooltip right
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="right-end">
-      Tooltip right-end
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-  </section>
-  <section class="mbs56 mbe40 flex-inline justify-between w-100">
-    <Tooltip placement="bottom-start">
-      Tooltip bottom-start
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="bottom">
-      Tooltip bottom
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-    <Tooltip placement="bottom-end">
-      Tooltip bottom-end
-      <div slot="content">This is the tooltip content from named slot.</div>
-    </Tooltip>
-  </section>
-</div>

package/dist/components/agnostic/Tooltip/TooltipSlots.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TooltipSlotsProps = typeof __propDef.props;
-export type TooltipSlotsEvents = typeof __propDef.events;
-export type TooltipSlotsSlots = typeof __propDef.slots;
-export default class TooltipSlots extends SvelteComponentTyped<TooltipSlotsProps, TooltipSlotsEvents, TooltipSlotsSlots> {
-}
-export {};

package/dist/components/agnostic/Tooltip/api.d.ts

@@ -1 +0,0 @@
-export type TooltipPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";

package/dist/components/agnostic/Tooltip/api.js

@@ -1 +0,0 @@
-export {};

package/dist/components/presentation/Carusel.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">
-	import { Splide, SplideSlide } from '@splidejs/svelte-splide';
-	import type { Options } from '@splidejs/splide';
-	import type { CaruseleItem } from './Carusele';
-
-	export let items: Array<CaruseleItem> = [];
-	export let perPage: number = 1;
-	export let rewind: boolean = true;
-	export let type: 'slide' | 'loop' | 'fade' = 'loop';
-	export let waitForTransition: boolean = true;
-	export let autoWidth: boolean | undefined = undefined;
-	export let autoHeight: boolean | undefined = undefined;
-	export let start: number | undefined = undefined;
-	export let arrowPath: string | undefined = undefined;
-	export let autoplay: boolean | 'pause' | undefined = undefined;
-	export let interval: number | undefined = undefined;
-	export let pauseOnHover: boolean | undefined = undefined;
-	export let pauseOnFocus: boolean | undefined = undefined;
-	export let resetProgress: boolean | undefined = undefined;
-	export let lazyLoad: boolean | 'nearby' | 'sequential' | undefined = undefined;
-	export let preloadPages: number | undefined = undefined;
-	export let keyboard: boolean | 'global' | 'focused' | undefined = undefined;
-	export let wheel: boolean | undefined = undefined;
-	export let wheelMinThreshold: number | undefined = undefined;
-	export let wheelSleep: number | undefined = undefined;
-	export let releaseWheel: boolean | undefined = undefined;
-	export let direction: 'ltr' | 'rtl' | 'ttb' = 'ltr';
-	export let cover: boolean | undefined = undefined;
-	export let slideFocus: boolean | undefined = undefined;
-	export let isNavigation: boolean | undefined = undefined;
-	export let trimSpace: boolean | 'move' | undefined = undefined;
-	export let omitEnd: boolean | undefined = undefined;
-	export let updateOnMove: boolean | undefined = undefined;
-	export let mediaQuery: 'min' | 'max' | undefined = undefined;
-	export let focusableNodes: string | undefined = undefined;
-	export let noDrag: string | undefined = undefined;
-	export let live: boolean | undefined = undefined;
-	export let useScroll: boolean | undefined = undefined;
-	export let reducedMotion: Options | undefined = undefined;
-	export let padding : string = "";
-
-	let options = {
-		perPage: perPage,
-		rewind: rewind,
-		type: type,
-		waitForTransition: waitForTransition,
-		autoWidth: autoWidth,
-		autoHeight: autoHeight,
-		start: start,
-		arrowPath: arrowPath,
-		autoplay: autoplay,
-		interval: interval,
-		pauseOnHover: pauseOnHover,
-		pauseOnFocus: pauseOnFocus,
-		resetProgress: resetProgress,
-		lazyLoad: lazyLoad,
-		preloadPages: preloadPages,
-		keyboard: keyboard,
-		wheel: wheel,
-		wheelMinThreshold: wheelMinThreshold,
-		wheelSleep: wheelSleep,
-		releaseWheel: releaseWheel,
-		direction: direction,
-		cover: cover,
-		slideFocus: slideFocus,
-		isNavigation: isNavigation,
-		trimSpace: trimSpace,
-		omitEnd: omitEnd,
-		updateOnMove: updateOnMove,
-		mediaQuery: mediaQuery,
-		focusableNodes: focusableNodes,
-		noDrag: noDrag,
-		live: live,
-		useScroll: useScroll,
-		reducedMotion: reducedMotion,
-		padding
-	} satisfies Options;
-</script>
-
-<Splide class="carusele" aria-label="gallery" {options}>
-	{#each items as item}
-		<SplideSlide>
-			<slot item={item}>
-				<h1>{item.text}</h1>
-				<a href={item.link}>
-					<img src={item.image} alt={item.text} />
-				</a>
-			</slot>
-		</SplideSlide>
-	{/each}
-</Splide>
-
-<style>
-	:global(.carusele) {
-		width: 100%;
-	}
-	:global(.splide__slide) {
-		overflow: hidden !important;
-	}
-	img {
-		width: 100%;
-		height: auto;
-		margin: auto;
-	}
-	a {
-		height: 100%;
-		display: flex;
-	}
-</style>

package/dist/components/presentation/Carusel.svelte.d.ts

@@ -1,56 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Options } from '@splidejs/splide';
-import type { CaruseleItem } from './Carusele';
-declare const __propDef: {
-    props: {
-        items?: Array<CaruseleItem>;
-        perPage?: number;
-        rewind?: boolean;
-        type?: "slide" | "loop" | "fade";
-        waitForTransition?: boolean;
-        autoWidth?: boolean | undefined;
-        autoHeight?: boolean | undefined;
-        start?: number | undefined;
-        arrowPath?: string | undefined;
-        autoplay?: boolean | "pause" | undefined;
-        interval?: number | undefined;
-        pauseOnHover?: boolean | undefined;
-        pauseOnFocus?: boolean | undefined;
-        resetProgress?: boolean | undefined;
-        lazyLoad?: boolean | "nearby" | "sequential" | undefined;
-        preloadPages?: number | undefined;
-        keyboard?: boolean | "global" | "focused" | undefined;
-        wheel?: boolean | undefined;
-        wheelMinThreshold?: number | undefined;
-        wheelSleep?: number | undefined;
-        releaseWheel?: boolean | undefined;
-        direction?: "ltr" | "rtl" | "ttb";
-        cover?: boolean | undefined;
-        slideFocus?: boolean | undefined;
-        isNavigation?: boolean | undefined;
-        trimSpace?: boolean | "move" | undefined;
-        omitEnd?: boolean | undefined;
-        updateOnMove?: boolean | undefined;
-        mediaQuery?: "min" | "max" | undefined;
-        focusableNodes?: string | undefined;
-        noDrag?: string | undefined;
-        live?: boolean | undefined;
-        useScroll?: boolean | undefined;
-        reducedMotion?: Options | undefined;
-        padding?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            item: CaruseleItem;
-        };
-    };
-};
-export type CaruselProps = typeof __propDef.props;
-export type CaruselEvents = typeof __propDef.events;
-export type CaruselSlots = typeof __propDef.slots;
-export default class Carusel extends SvelteComponentTyped<CaruselProps, CaruselEvents, CaruselSlots> {
-}
-export {};