@functionalcms/svelte-components 3.0.6 → 3.0.7

package/dist/components/Banner.svelte

@@ -1,6 +1,8 @@
-<script>export let background = "";
-export let css = "";
-$: bannerKlasses = ["banner", css].filter((c) => c).join(" ");
+<script lang="ts">
+	export let background: string = '';
+	export let css: string = '';
+
+	$: bannerKlasses = ['banner', css].filter((c) => c).join(' ');
 </script>
 
 <div class={bannerKlasses} style="--functional-banner-background: {background};">

package/dist/components/Link.svelte

@@ -289,50 +289,60 @@ on the side padding. As such, these have a good bit less then regular buttons. *
   display: inline-flex;
   flex-direction: row;
 }</style>
-<script>import { AlignItmes, ComponentSize, Justify, Orientation } from "./Styling.js";
-import { mergedClasses } from "./CssHelper.js";
-export let css = "";
-export let href = "";
-export let isPrimary = false;
-export let isDisabled = false;
-export let isBordered = false;
-export let isSecondary = false;
-export let idRounded = false;
-export let idPill = false;
-export let idBlock = false;
-export let idCapsule = false;
-export let idCircle = false;
-export let idGrouped = false;
-export let isCircle = false;
-export let isFlex = true;
-export let size = ComponentSize.Normal;
-export let justify = Justify.Center;
-export let alignItems = AlignItmes.Center;
-export let orientation = Orientation.Row;
-export let role = "link";
-$: isSmall = size === ComponentSize.Small;
-$: isLarge = size === ComponentSize.Large;
-$: klasses = mergedClasses(
-  isPrimary ? "btn-primary" : "",
-  isDisabled ? "disabled" : "",
-  isBordered ? "btn-bordered" : "",
-  isSecondary ? "btn-secondary" : "",
-  idRounded ? "btn-rounded" : "",
-  idPill ? "btn-pill" : "",
-  idBlock ? "btn-block" : "",
-  idCapsule ? "btn-capsule" : "",
-  idCircle ? "btn-circle" : "",
-  idGrouped ? "btn-grouped" : "",
-  isLarge ? "btn-large" : "",
-  isSmall ? "btn-small" : "",
-  isLarge && isCircle ? "btn-large btn-circle-large" : "",
-  isSmall && idCircle ? "btn-small btn-circle-small" : "",
-  isFlex ? `flex` : "",
-  isFlex ? `${orientation}` : "",
-  isFlex ? `${justify}` : "",
-  isFlex ? `${alignItems}` : "",
-  css ? css : "btn"
-);
+<script lang='ts'>
+    import { AlignItmes, ComponentSize, Justify, Orientation } from './Styling.js'
+	import { mergedClasses } from './CssHelper.js';
+
+    export let css: string = ""
+    export let href: string = ""
+
+    export let isPrimary: boolean = false
+    export let isDisabled: boolean = false
+    export let isBordered: boolean = false
+    export let isSecondary: boolean = false
+    export let idRounded: boolean = false
+    export let idPill: boolean = false
+    export let idBlock: boolean = false
+    export let idCapsule: boolean = false
+    export let idCircle: boolean = false
+    export let idGrouped: boolean = false
+    export let isCircle: boolean = false
+    export let isFlex: boolean = true
+    export let size: ComponentSize = ComponentSize.Normal
+    export let justify: Justify = Justify.Center
+    export let alignItems: AlignItmes = AlignItmes.Center
+    export let orientation: Orientation = Orientation.Row
+    export let role: string = "link"
+
+    $: isSmall = size === ComponentSize.Small
+    $: isLarge = size === ComponentSize.Large
+
+    $: klasses =  mergedClasses(
+        isPrimary ? 'btn-primary' : '',
+        isDisabled? 'disabled': '',
+
+        isBordered ? 'btn-bordered' : '',
+        isSecondary ? 'btn-secondary' : '',
+        
+        idRounded ? 'btn-rounded' : '',
+        idPill ? 'btn-pill' : '', 
+        idBlock ? 'btn-block' : '', 
+        idCapsule ? 'btn-capsule' : '',
+        idCircle ? 'btn-circle' : '',
+        idGrouped ? 'btn-grouped' : '', 
+
+        isLarge ? 'btn-large' : '',
+        isSmall ? 'btn-small' : '',
+
+        isLarge && isCircle ? 'btn-large btn-circle-large' : '',
+        isSmall && idCircle ? 'btn-small btn-circle-small' : '',
+
+        isFlex ? `flex` : '',
+        isFlex ? `${orientation}` : '',
+        isFlex ? `${justify}` : '',
+        isFlex ? `${alignItems}` : '',
+
+        css ? css : 'btn');
 </script>
 <a class={klasses} href={href}>
     <slot />

package/dist/components/Logo.svelte

@@ -16,9 +16,21 @@
 	}	
 </style>
 
-<script>export let companyName;
-export let logoUrl;
-export let css = "logo";
+<script lang='ts'>
+	/**
+	 * @type {string}
+	 */
+	export let companyName: string
+	
+	/**
+	 * @type {string}
+	 */
+	 export let logoUrl: string
+
+	/**
+	 * @type {string}
+	 */
+	 export let css: string = "logo"
 </script>
 
 <a href="/" class={css}>

package/dist/components/Spacer.svelte

@@ -5,13 +5,16 @@
     }
 </style>
 
-<script>import { Sizes } from "./Styling";
-export let width = Sizes.V0;
-export let height = Sizes.V0;
-const klasses = [
-  width ? `w${width}` : "",
-  height ? `h${height}` : ""
-].filter((c) => c).join(" ");
+<script lang='ts'>
+    import { Sizes } from "./Styling";
+
+    export let width: Sizes = Sizes.V0
+    export let height: Sizes = Sizes.V0
+
+    const klasses = [
+        width ? `w${width}`: '',
+        height ? `h${height}`: ''
+    ].filter(c => c).join(' ')
 </script>
 <div class={klasses}>
 

package/dist/components/Well.svelte

@@ -12,18 +12,21 @@
     }
 </style>
 
-<script>import { AlignItmes, Justify, Orientation } from "./Styling.js";
-export let css = "";
-export let orientation = Orientation.Column;
-export let justify = Justify.Start;
-export let alignItems = AlignItmes.Start;
-$: klasses = [
-  "flex",
-  `${orientation}`,
-  `${justify}`,
-  `${alignItems}`,
-  css ? css : ""
-].filter((c) => c).join(" ");
+<script lang='ts'>
+    import { AlignItmes,  Justify, Orientation } from "./Styling.js"
+
+    export let css: string = ""
+    export let orientation: Orientation = Orientation.Column
+    export let justify: Justify = Justify.Start
+    export let alignItems: AlignItmes = AlignItmes.Start
+
+    $: klasses = [
+        'flex',
+        `${orientation}`,
+        `${justify}`,
+        `${alignItems}`,
+        css ? css : ''
+    ].filter(c => c).join(" ")
 </script>
 
 <div class={klasses}>

package/dist/components/agnostic/Alert/Alert.svelte

@@ -240,63 +240,70 @@
 
 </style>
 
-<script>export let isAnimationFadeIn = true;
-export let isAnimationSlideUp = false;
-export let isToast = false;
-export let isRounded = false;
-export let isBorderAll = false;
-export let isBorderLeft = false;
-export let isBorderRight = false;
-export let isBorderTop = false;
-export let isBorderBottom = false;
-export let isBlockEnd = false;
-export let type = "";
-let typeClass;
-switch (type) {
-  case "warning":
-    typeClass = "alert-warning";
-    break;
-  case "dark":
-    typeClass = "alert-dark";
-    break;
-  case "error":
-    typeClass = "alert-error";
-    break;
-  case "info":
-    typeClass = "alert-info";
-    break;
-  case "success":
-    typeClass = "alert-success";
-    break;
-  default:
-    typeClass = "";
-}
-const ariaAtomicValue = isToast ? true : void 0;
-$: ariaLiveValue = () => {
-  let liveValue;
-  if (isToast && type === "error") {
-    liveValue = "assertive";
-  } else if (isToast) {
-    liveValue = "polite";
-  } else {
-    liveValue = "off";
-  }
-  return liveValue;
-};
-const classes = [
-  "alert",
-  typeClass,
-  isRounded ? "alert-rounded" : "",
-  isBorderAll ? "alert-border-all" : "",
-  isBorderLeft ? "alert-border-left" : "",
-  isBorderRight ? "alert-border-right" : "",
-  isBorderTop ? "alert-border-top" : "",
-  isBorderBottom ? "alert-border-bottom" : "",
-  isBlockEnd ? "alert-end" : "",
-  isAnimationFadeIn && !isAnimationSlideUp ? "fade-in" : "",
-  !isAnimationFadeIn && isAnimationSlideUp ? "slide-up" : "",
-  isAnimationFadeIn && isAnimationSlideUp ? "slide-up-fade-in" : ""
-].filter((klass) => klass.length).join(" ");
+<script lang="ts">
+	export let isAnimationFadeIn = true;
+	export let isAnimationSlideUp = false;
+	export let isToast = false;
+
+	export let isRounded = false;
+	export let isBorderAll = false;
+	export let isBorderLeft = false;
+	export let isBorderRight = false;
+	export let isBorderTop = false;
+	export let isBorderBottom = false;
+	export let isBlockEnd = false;
+	export let type = '';
+	let typeClass;
+	switch (type) {
+		case 'warning':
+			typeClass = 'alert-warning';
+			break;
+		case 'dark':
+			typeClass = 'alert-dark';
+			break;
+		case 'error':
+			typeClass = 'alert-error';
+			break;
+		case 'info':
+			typeClass = 'alert-info';
+			break;
+		case 'success':
+			typeClass = 'alert-success';
+			break;
+		default:
+			typeClass = '';
+	}
+
+	const ariaAtomicValue = isToast ? true : undefined;
+
+	$: ariaLiveValue = () => {
+		let liveValue: 'assertive' | 'polite' | 'off';
+		if (isToast && type === 'error') {
+			liveValue = 'assertive';
+		} else if (isToast) {
+			liveValue = 'polite';
+		} else {
+			liveValue = 'off';
+		}
+		return liveValue;
+	};
+
+	const classes = [
+		'alert',
+		typeClass,
+		isRounded ? 'alert-rounded' : '',
+		isBorderAll ? 'alert-border-all' : '',
+		isBorderLeft ? 'alert-border-left' : '',
+		isBorderRight ? 'alert-border-right' : '',
+		isBorderTop ? 'alert-border-top' : '',
+		isBorderBottom ? 'alert-border-bottom' : '',
+		isBlockEnd ? 'alert-end' : '',
+		isAnimationFadeIn && !isAnimationSlideUp ? 'fade-in' : '',
+		!isAnimationFadeIn && isAnimationSlideUp ? 'slide-up' : '',
+		isAnimationFadeIn && isAnimationSlideUp ? 'slide-up-fade-in' : ''
+	]
+		.filter((klass) => klass.length)
+		.join(' ');
 </script>
 
 <div

package/dist/components/agnostic/Avatar/Avatar.svelte

@@ -100,21 +100,25 @@ respectively generate the <span> tag in their own templates (not the consumer) *
 
 </style>
 
-<script>export let isRounded = false;
-export let isTransparent = false;
-export let isSquare = false;
-export let type = "";
-export let size = "";
-export let text = "";
-export let imgUrl = "";
-const avatarClasses = [
-  "avatar",
-  isRounded ? "avatar-rounded" : "",
-  isTransparent ? "avatar-transparent" : "",
-  isSquare ? "avatar-square" : "",
-  type ? `avatar-${type}` : "",
-  size ? `avatar-${size}` : ""
-].filter((cls) => cls).join(" ");
+<script lang="ts">
+  export let isRounded = false;
+  export let isTransparent = false;
+  export let isSquare = false;
+  export let type = "";
+  export let size = "";
+  export let text = "";
+  export let imgUrl = "";
+
+  const avatarClasses = [
+    "avatar",
+    isRounded ? "avatar-rounded" : "",
+    isTransparent ? "avatar-transparent" : "",
+    isSquare ? "avatar-square" : "",
+    type ? `avatar-${type}` : "",
+    size ? `avatar-${size}` : "",
+  ]
+    .filter((cls) => cls)
+    .join(" ");
 </script>
 
 <span class={avatarClasses} data-text={text || null}>

package/dist/components/agnostic/Breadcrumb/Breadcrumb.svelte

@@ -31,16 +31,25 @@
 
 </style>
 
-<script>export let routes = [];
-export let type = "";
-const breadcrumbClasses = ["breadcrumb", type ? `breadcrumb-${type}` : ""].filter((cls) => cls).join(" ");
-const isLast = (idx) => {
-  return idx === routes.length - 1;
-};
-const crumbClasses = (index) => {
-  const isLastCrumb = isLast(index);
-  return ["breadcrumb-item", isLastCrumb ? "active" : ""].filter((cl) => cl).join(" ");
-};
+<script lang="ts">
+  import type { BreadcrumbRoute } from './api';
+  export let routes: BreadcrumbRoute[] = [];
+  export let type = "";
+
+  const breadcrumbClasses = ["breadcrumb", type ? `breadcrumb-${type}` : ""]
+    .filter((cls) => cls)
+    .join(" ");
+
+  const isLast = (idx): boolean => {
+    return idx === routes.length - 1;
+  };
+
+  const crumbClasses = (index): string => {
+    const isLastCrumb = isLast(index);
+    return ["breadcrumb-item", isLastCrumb ? "active" : ""]
+      .filter((cl) => cl)
+      .join(" ");
+  };
 </script>
 
 <nav aria-label="breadcrumbs">

package/dist/components/agnostic/Button/Button.svelte

@@ -283,41 +283,66 @@ on the side padding. As such, these have a good bit less then regular buttons. *
 }
 </style>
 
-<script>export let mode = "";
-export let size = "";
-export let isBordered = false;
-export let isCapsule = false;
-export let isGrouped = false;
-export let isBlock = false;
-export let isLink = false;
-export let isBlank = false;
-export let isDisabled = false;
-export let role = void 0;
-export let isCircle = false;
-export let isRounded = false;
-export let isSkinned = true;
-export let ariaSelected = void 0;
-export let ariaControls = void 0;
-export let tabIndex = void 0;
-$: aSelected = ariaSelected || null;
-$: tIndex = tabIndex || null;
-export let css = "";
-export let type = "button";
-$: klasses = [
-  isSkinned ? "btn" : "btn-base",
-  mode ? `btn-${mode}` : "",
-  size ? `btn-${size}` : "",
-  isBordered ? "btn-bordered" : "",
-  isCapsule ? "btn-capsule " : "",
-  isGrouped ? "btn-grouped" : "",
-  isBlock ? "btn-block" : "",
-  isCircle ? "btn-circle" : "",
-  isRounded ? "btn-rounded" : "",
-  isDisabled ? "disabled" : "",
-  isBlank ? "btn-blank" : "",
-  isLink ? "btn-link" : "",
-  css ? `${css}` : ""
-].filter((c) => c).join(" ");
+<script lang="ts">
+  export let mode = "";
+  export let size = "";
+  export let isBordered = false;
+  export let isCapsule = false;
+  export let isGrouped = false;
+  export let isBlock = false;
+  export let isLink = false;
+  export let isBlank = false;
+  export let isDisabled = false;
+  export let role = undefined;
+  export let isCircle = false;
+  export let isRounded = false;
+  export let isSkinned = true;
+  // The following properties can be used by consumers of Tabs which setup their own
+  // custom buttons as these aria and tabindex attributes are required for a11y
+  export let ariaSelected = undefined;
+  export let ariaControls = undefined;
+  export let tabIndex = undefined;
+
+  $: aSelected = ariaSelected || null;
+  $: tIndex = tabIndex || null;
+  /**
+   * This prop is an escape hatch for global CSS overrides. Likely, the most useful reason to
+   * leverage this is to add custom responsive media query code. Note that you'll likely need
+   * to add specificity to beat out the Svelte based CSS, and, in Svelte land you'll need to
+   * utilize globals functionality which might look like:
+   * @media all and (min-width: 769px) {
+   *   :global(button.btn.button-overrides) {
+   *     font-size: 18px;
+   *     ...etc.
+   */
+  export let css = "";
+
+  /**
+   * Button type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+   * submit: submits form data to the server
+   * reset: resets all the controls to their initial values, like <input type="reset">
+   * button: button has no default behavior, and does nothing when pressed by default.
+   */
+  export let type = "button";
+
+  // ******************** HEY! ************************
+  // You will need to also add these to the buttonslot:
+  // agnostic-svelte/src/stories/ButtonSlot.svelte
+  $: klasses = [
+    isSkinned ? "btn" : "btn-base",
+    mode ? `btn-${mode}` : "",
+    size ? `btn-${size}` : "",
+    isBordered ? "btn-bordered" : "",
+    isCapsule ? "btn-capsule " : "",
+    isGrouped ? "btn-grouped" : "",
+    isBlock ? "btn-block" : "",
+    isCircle ? "btn-circle" : "",
+    isRounded ? "btn-rounded" : "",
+    isDisabled ? "disabled" : "",
+    isBlank ? "btn-blank" : "",
+    isLink ? "btn-link" : "",
+    css ? `${css}` : "",
+  ].filter(c => c).join(" ");
 </script>
 
 <!-- https://github.com/sveltejs/svelte/issues/2324 -->

package/dist/components/agnostic/Button/ButtonGroup.svelte

@@ -10,9 +10,10 @@
 
 </style>
 
-<script>export let ariaLabel = "";
-export let css = "";
-let klasses = ["btn-group", css ? `${css}` : ""].filter((cl) => cl.length).join(" ");
+<script lang="ts">
+  export let ariaLabel = "";
+  export let css = "";
+  let klasses: string = ["btn-group", css ? `${css}` : ""].filter((cl) => cl.length).join(' ');
 </script>
 
 <div class={klasses} role="group" aria-label={ariaLabel} on:click>

package/dist/components/agnostic/Card/Card.svelte

@@ -108,24 +108,28 @@
 
 </style>
   
-<script>export let isAnimated = false;
-export let isSkinned = true;
-export let isStacked = false;
-export let isShadow = false;
-export let isBorder = false;
-export let isRounded = false;
-export let type = "";
-export let css = "";
-let klasses = [
-  isSkinned ? "card" : "card-base",
-  isAnimated ? "card-animated" : "",
-  isStacked ? "card-stacked" : "",
-  isShadow ? "card-shadow" : "",
-  isRounded ? "card-rounded" : "",
-  isBorder ? "card-border" : "",
-  type ? `card-${type}` : "",
-  css ? `${css}` : ""
-].filter((klass) => klass.length).join(" ");
+<script lang="ts">
+  export let isAnimated = false;
+  export let isSkinned = true;
+  export let isStacked = false;
+  export let isShadow = false;
+  export let isBorder = false;
+  export let isRounded = false;
+  export let type = "";
+  export let css = "";
+
+  let klasses = [
+    isSkinned ? "card" : "card-base",
+    isAnimated ? "card-animated" : "",
+    isStacked ? "card-stacked" : "",
+    isShadow ? "card-shadow" : "",
+    isRounded ? "card-rounded" : "",
+    isBorder ? "card-border" : "",
+    type ? `card-${type}` : "",
+    css ? `${css}` : "",
+  ]
+    .filter((klass) => klass.length)
+    .join(" ");
 </script>
 
 <div class={klasses} on:click on:focus on:blur>