@functionalcms/svelte-components 3.5.19 → 4.0.0-pre

package/dist/components/form/Input.d.ts

@@ -0,0 +1,21 @@
+export declare enum Type {
+    Text = "text",
+    Textarea = "textarea",
+    Email = "email",
+    Search = "search",
+    Password = "password",
+    Tel = "tel",
+    Number = "number",
+    Url = "url",
+    Month = "month",
+    Time = "time",
+    Week = "week",
+    Date = "date",
+    DatetimeLocal = "datetime-local",
+    Color = "color"
+}
+export declare enum Size {
+    Small = "small",
+    Large = "large",
+    Normal = ""
+}

package/dist/components/form/Input.js

@@ -0,0 +1,23 @@
+export var Type;
+(function (Type) {
+    Type["Text"] = "text";
+    Type["Textarea"] = "textarea";
+    Type["Email"] = "email";
+    Type["Search"] = "search";
+    Type["Password"] = "password";
+    Type["Tel"] = "tel";
+    Type["Number"] = "number";
+    Type["Url"] = "url";
+    Type["Month"] = "month";
+    Type["Time"] = "time";
+    Type["Week"] = "week";
+    Type["Date"] = "date";
+    Type["DatetimeLocal"] = "datetime-local";
+    Type["Color"] = "color";
+})(Type || (Type = {}));
+export var Size;
+(function (Size) {
+    Size["Small"] = "small";
+    Size["Large"] = "large";
+    Size["Normal"] = "";
+})(Size || (Size = {}));

package/dist/components/form/Input.svelte

@@ -1,15 +1,38 @@
 <script lang="ts">
-	import { mergedClasses } from '../CssHelper.js';
-
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { Size, Type } from './Input.js';
+
+	interface Props {
+		label?: string;
+		id?: string;
+		labelCss?: string;
+		isLabelHidden?: boolean;
+		helpText?: string;
+		invalidText?: string;
+		isInvalid?: boolean;
+		isInline?: boolean;
+		isRounded?: boolean;
+		isDisabled?: boolean | undefined;
+		css?: string;
+		isSkinned?: boolean;
+		isUnderlinedWithBackground?: boolean;
+		isUnderlined?: boolean;
+		size?: Size;
+		type?: Type;
+		value?: string;
+		addonLeft?: Snippet;
+		addonRight?: Snippet;
+	}
 	let {
+		addonLeft,
+		addonRight,
 		label = '',
 		id = '',
 		labelCss = '',
 		isLabelHidden = false,
 		helpText = '',
 		invalidText = '',
-		hasLeftAddon = false,
-		hasRightAddon = false,
 		isInvalid = false,
 		isInline = false,
 		isRounded = false,
@@ -18,52 +41,14 @@
 		isSkinned = true,
 		isUnderlinedWithBackground = false,
 		isUnderlined = false,
-		size = '',
-		type = 'text',
-		value = $bindable(''),
-    	...restProps
-	}: {
-		label: string,
-		id: string,
-		labelCss: string,
-		isLabelHidden: boolean,
-		helpText: string,
-		invalidText: string,
-		hasLeftAddon: boolean,
-		hasRightAddon: boolean,
-		isInvalid: boolean,
-		isInline: boolean,
-		isRounded: boolean,
-		isDisabled: boolean | undefined,
-		css: string,
-		isSkinned: boolean,
-		isUnderlinedWithBackground: boolean,
-		isUnderlined: boolean,
-		size: 'small' | 'large' | '',
-		type:
-			| 'text'
-			| 'textarea'
-			| 'email'
-			| 'search'
-			| 'password'
-			| 'tel'
-			| 'number'
-			| 'url'
-			| 'month'
-			| 'time'
-			| 'week'
-			| 'date'
-			| 'datetime-local'
-			| 'color',
-		value: string,
-    restProps: any
-	} = $props();
-
-	// $: if (!value) value = '';
-	const inputType = $derived(type);
-
-	const labelClasses = $derived(
-		mergedClasses(
+		size = Size.Normal,
+		type = Type.Text,
+		value = '',
+		...restProps
+	}: Props = $props();
+
+	let labelClasses = $derived(
+		cn(
 			'label',
 			isInvalid ? 'label-error' : '',
 			isInline ? 'label-inline' : '',
@@ -73,13 +58,13 @@
 		)
 	);
 
-	const inputClasses = $derived(
-		mergedClasses(
+	let inputClasses = $derived(
+		cn(
 			isSkinned ? 'input' : 'input-base',
 			isRounded ? 'input-rounded' : '',
 			isUnderlined ? 'input-underlined' : '',
-			hasLeftAddon ? 'input-has-left-addon' : '',
-			hasRightAddon ? 'input-has-right-addon' : '',
+			addonLeft ? 'input-has-left-addon' : '',
+			addonRight ? 'input-has-right-addon' : '',
 			isDisabled ? 'disabled' : '',
 			isInvalid ? 'input-error' : '',
 			isInline ? 'input-inline' : '',
@@ -89,62 +74,45 @@
 		)
 	);
 
-	const invalidClasses = $derived(size ? `field-error-${size}` : 'field-error');
+	let invalidClasses = $derived(size ? `field-error-${size}` : 'field-error');
 
-	const helpClasses = $derived( size ? `field-help-${size}` : 'field-help');
+	let helpClasses = $derived(size ? `field-help-${size}` : 'field-help');
 
-	const addonContainerClasses = 'input-addon-container';
+	let addonContainerClasses = () => 'input-addon-container';
 
 	const handleInput = (e: Event) => {
 		value = (e.target as HTMLInputElement).value;
 	};
 </script>
 
+{#snippet input()}
+	<input
+		{id}
+		{type}
+		bind:value
+		class={inputClasses}
+		disabled={isDisabled}
+		oninput={handleInput}
+		{...restProps}
+	/>
+{/snippet}
+
 <div class="w-100">
 	<label class={labelClasses} for={id}>{label}</label>
 	{#if type == 'textarea'}
-		<textarea
-			{id}
-			class={inputClasses}
-			on:blur
-			on:change
-			bind:value
-			on:click
-			on:focus
-			{...restProps}
-		></textarea>
-	{:else if hasLeftAddon || hasRightAddon}
-		<div class={addonContainerClasses}>
-			<slot name="addonLeft" />
-			<input
-				{id}
-				type={inputType}
-				{value}
-				class={inputClasses}
-				disabled={isDisabled}
-				on:blur
-				on:change
-				on:input={handleInput}
-				on:click
-				on:focus
-				{...restProps}
-			/>
-			<slot name="addonRight" />
+		<textarea {id} class={inputClasses} bind:value {...restProps}></textarea>
+	{:else if addonLeft || addonRight}
+		<div class={addonContainerClasses()}>
+			{#if addonLeft}
+				{@render addonLeft()}
+			{/if}
+			{@render input()}
+			{#if addonRight}
+				{@render addonRight()}
+			{/if}
 		</div>
 	{:else}
-		<input
-			{id}
-			type={inputType}
-			{value}
-			class={inputClasses}
-			disabled={isDisabled}
-			on:blur
-			on:change
-			on:input={handleInput}
-			on:click
-			on:focus
-			{...restProps}
-		/>
+		{@render input()}
 	{/if}
 	{#if isInvalid}
 		<span role="status" aria-live="polite" class={invalidClasses}>
@@ -157,8 +125,8 @@
 	.input-base,
 	.input {
 		/* Note this cannot be user-select: none else mobile safari won't accept input:
-  https://stackoverflow.com/questions/49889003/cannot-write-into-input-field-on-safari/49901069
-   */
+      https://stackoverflow.com/questions/49889003/cannot-write-into-input-field-on-safari/49901069
+       */
 		user-select: initial;
 		appearance: none;
 		box-sizing: border-box;
@@ -191,11 +159,11 @@
 	.input-underlined,
 	.input-underlined-bg,
 	.input {
-		color: var(--functional-font-color, var(--functional-dark));
-		font-family: var(--functional-font-family-body);
-		font-weight: var(--functional-font-weight, 300);
-		font-size: var(--functional-font-size, 1rem);
-		line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
+		color: var(--agnostic-font-color, var(--agnostic-dark));
+		font-family: var(--agnostic-font-family-body);
+		font-weight: var(--agnostic-font-weight, 300);
+		font-size: var(--agnostic-font-size, 1rem);
+		line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
 		width: 100%;
 		max-width: 100%;
 	}
@@ -206,38 +174,38 @@
 		border-style: solid;
 
 		/* this can be overriden, but it might mess with the balance of the button heights across variants */
-		border-width: var(--functional-input-border-size, 1px);
-		border-color: var(--functional-input-border-color, var(--functional-gray-light));
+		border-width: var(--agnostic-input-border-size, 1px);
+		border-color: var(--agnostic-input-border-color, var(--agnostic-gray-light));
 
 		/* these can be overriden, but it might mess with the balance of the inputheights across variants */
-		padding-block-start: var(--functional-input-vertical-pad, 0.5rem);
-		padding-block-end: var(--functional-input-vertical-pad, 0.5rem);
-		padding-inline-start: var(--functional-input-side-padding, 0.75rem);
-		padding-inline-end: var(--functional-input-side-padding, 0.75rem);
+		padding-block-start: var(--agnostic-input-vertical-pad, 0.5rem);
+		padding-block-end: var(--agnostic-input-vertical-pad, 0.5rem);
+		padding-inline-start: var(--agnostic-input-side-padding, 0.75rem);
+		padding-inline-end: var(--agnostic-input-side-padding, 0.75rem);
 
 		/* Note we only want to set properties that we actually want
-  to transition in. For example, if we transition "all", the
-  inputs will "grow in" on page load—not a happy effect :) */
+      to transition in. For example, if we transition "all", the
+      inputs will "grow in" on page load—not a happy effect :) */
 		transition-property: box-shadow;
-		transition-duration: var(--functional-input-timing, var(--functional-timing-medium));
+		transition-duration: var(--agnostic-input-timing, var(--agnostic-timing-medium));
 	}
 
 	.label {
 		display: inline-block;
 
-		/* Provided --functional-input-vertical-pad isn't overriden we'll get 20px
-  label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
+		/* Provided --agnostic-input-vertical-pad isn't overriden we'll get 20px
+      label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
 		margin-block-start: 0;
 		margin-inline-start: 0;
 		margin-inline-end: 0;
-		margin-block-end: var(--functional-input-label-pad, 0.375rem);
+		margin-block-end: var(--agnostic-input-label-pad, 0.375rem);
 		vertical-align: initial;
 	}
 
 	/* Reset field errors and help text to be 2px less then input font size */
 	.field-help,
 	.field-error {
-		font-size: calc(var(--functional-font-size, 1rem) - 2px);
+		font-size: calc(var(--agnostic-font-size, 1rem) - 2px);
 	}
 
 	.label-inline,
@@ -250,96 +218,93 @@
 		margin-block-start: 0;
 		margin-block-end: 0;
 		margin-inline-start: 0;
-		margin-inline-end: var(--functional-input-side-padding, 0.75rem);
+		margin-inline-end: var(--agnostic-input-side-padding, 0.75rem);
 	}
 
 	/**
-* Placeholder
-*/
+    * Placeholder
+    */
 
 	/* stylelint-disable-next-line */
 	.input::-webkit-input-placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--functional-timing-fast) ease-out;
+		transition: opacity var(--agnostic-timing-fast) ease-out;
 	}
 
 	/* stylelint-disable-next-line */
 	.input::placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--functional-timing-fast) ease-out;
+		transition: opacity var(--agnostic-timing-fast) ease-out;
 	}
 
 	/* stylelint-disable-next-line */
 	.input::-ms-placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--functional-timing-fast) ease-out;
+		transition: opacity var(--agnostic-timing-fast) ease-out;
 	}
 
 	/* stylelint-disable-next-line */
 	.input:-ms-placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--functional-timing-fast) ease-out;
+		transition: opacity var(--agnostic-timing-fast) ease-out;
 	}
 
 	/**
-* Underlined inputs
-*/
+    * Underlined inputs
+    */
 	.input-underlined {
 		border-top: 0;
 		border-left: 0;
 		border-right: 0;
-		border-color: var(--functional-input-underlined-color, var(--functional-gray-mid-dark));
+		border-color: var(--agnostic-input-underlined-color, var(--agnostic-gray-mid-dark));
 		background-color: transparent;
 	}
 
 	.input-underlined-bg {
-		background-color: var(
-			--functional-input-underlined-bg-color,
-			var(--functional-gray-extra-light)
-		);
+		background-color: var(--agnostic-input-underlined-bg-color, var(--agnostic-gray-extra-light));
 	}
 
 	/**
-* Rounded inputs
-*/
+    * Rounded inputs
+    */
 	.input-rounded {
-		border-radius: var(--functional-radius, 0.25rem);
+		border-radius: var(--agnostic-radius, 0.25rem);
 	}
 
 	/**
- * Errors
- * We provide a class-based approach to setting errors which means we do
- * not support :invalid, so it requires custom use of html4 validation API
- * (see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
- * of the example in corresponding input.html file). The reason I elected to
- * not include :invalid, is it seems to result in "shouting" at the user as
- * I did not find an easy way to only kick in errors after a certain number
- * of characters have been type (blur is actually better but I did not
- * implement that in the contrived example).
- */
+     * Errors
+     * We provide a class-based approach to setting errors which means we do
+     * not support :invalid, so it requires custom use of html4 validation API
+     * (see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
+     * of the example in corresponding input.html file). The reason I elected to
+     * not include :invalid, is it seems to result in "shouting" at the user as
+     * I did not find an easy way to only kick in errors after a certain number
+     * of characters have been type (blur is actually better but I did not
+     * implement that in the contrived example).
+     */
 	.label-error {
-		color: var(--functional-input-error-color, var(--functional-error));
+		color: var(--agnostic-input-error-color, var(--agnostic-error));
 	}
 
 	.input-error {
-		border-color: var(--functional-input-error-color, var(--functional-error));
+		border-color: var(--agnostic-input-error-color, var(--agnostic-error));
 	}
 
 	.label-error,
 	.field-error,
 	.field-error-small,
 	.field-error-large {
-		color: var(--functional-input-error-color, var(--functional-error));
+		color: var(--agnostic-input-error-color, var(--agnostic-error));
 	}
 
 	.field-help,
 	.field-help-small,
 	.field-help-large {
-		color: var(--functional-input-help-color, var(--functional-gray-dark));
+		color: var(--agnostic-input-help-color, var(--agnostic-gray-dark));
 	}
 
 	.field-help,
@@ -350,65 +315,65 @@
 	.field-error-large {
 		display: inline-block;
 		width: 100%;
-		margin-block-start: calc(var(--functional-input-vertical-pad, 0.5rem) / 2);
+		margin-block-start: calc(var(--agnostic-input-vertical-pad, 0.5rem) / 2);
 	}
 
 	/**
-  * Sizes
-  */
+      * Sizes
+      */
 	.input-large {
-		font-size: calc(var(--functional-font-size, 1rem) + 0.25rem);
+		font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
 		line-height: 1.6rem;
 	}
 
 	.field-help-large,
 	.field-error-large {
 		/* We initially remove -2px from font-size so setting to font-size essentially adds the 2px back */
-		font-size: var(--functional-font-size, 1rem);
+		font-size: var(--agnostic-font-size, 1rem);
 	}
 
 	.label-large {
-		font-size: calc(var(--functional-font-size, 1rem) + 0.25rem);
+		font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
 	}
 
 	.input-small {
-		font-size: calc(var(--functional-font-size, 1rem) - 0.25rem);
+		font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
 		line-height: 1rem;
 	}
 
 	.field-help-small,
 	.field-error-small,
 	.label-small {
-		font-size: calc(var(--functional-font-size, 1rem) - 0.25rem);
+		font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
 	}
 
 	.input:focus {
-		box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
+		box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-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;
+		outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
+			var(--agnostic-focus-ring-outline-color);
+		transition: box-shadow var(--agnostic-timing-fast) ease-out;
 	}
 
 	/* Set the focus to transparent when there's an error since we use
-borders that visually conflict. */
+    borders that visually conflict. */
 	.input-error:focus {
 		box-shadow: 0 0 0 3px transparent;
 	}
 
 	/*
-* Disabled State
-*
-* The disabled state uses the class .disabled,
-* and the form attribute disabled="disabled".
-* The use of !important is only added because this is a state
-* that must be applied to all inputs when in a disabled state.
-*/
+    * Disabled State
+    *
+    * The disabled state uses the class .disabled,
+    * and the form attribute disabled="disabled".
+    * The use of !important is only added because this is a state
+    * that must be applied to all inputs when in a disabled state.
+    */
 	.input.disabled, /* DEPRECATED -- TODO remove class based disabled */
-.input:disabled {
-		background: var(--functional-input-disabled-bg, var(--functional-disabled-bg)) !important;
-		color: var(--functional-input-disabled-color, var(--functional-disabled-color)) !important;
+    .input:disabled {
+		background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
+		color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
 		appearance: none !important;
 		box-shadow: none !important;
 		cursor: not-allowed !important;
@@ -426,8 +391,8 @@ borders that visually conflict. */
 	}
 
 	/**
- * Input "has addon"
- */
+     * Input "has addon"
+     */
 
 	.input-addon-container {
 		display: flex;
@@ -437,19 +402,19 @@ borders that visually conflict. */
 	}
 
 	.input-has-left-addon {
-		padding-left: calc(var(--functional-side-padding) * 3);
+		padding-left: calc(var(--agnostic-side-padding) * 3);
 	}
 
 	.input-has-right-addon {
-		padding-right: calc(var(--functional-side-padding) * 3);
+		padding-right: calc(var(--agnostic-side-padding) * 3);
 	}
 
 	.input-addon-left {
-		left: var(--functional-input-side-padding);
+		left: var(--agnostic-input-side-padding);
 	}
 
 	.input-addon-right {
-		right: var(--functional-input-side-padding);
+		right: var(--agnostic-input-side-padding);
 	}
 
 	@media (prefers-reduced-motion), (update: slow) {

package/dist/components/form/Input.svelte.d.ts

@@ -1,48 +1,26 @@
-type $$ComponentProps = {
-    label: string;
-    id: string;
-    labelCss: string;
-    isLabelHidden: boolean;
-    helpText: string;
-    invalidText: string;
-    hasLeftAddon: boolean;
-    hasRightAddon: boolean;
-    isInvalid: boolean;
-    isInline: boolean;
-    isRounded: boolean;
-    isDisabled: boolean | undefined;
-    css: string;
-    isSkinned: boolean;
-    isUnderlinedWithBackground: boolean;
-    isUnderlined: boolean;
-    size: 'small' | 'large' | '';
-    type: 'text' | 'textarea' | 'email' | 'search' | 'password' | 'tel' | 'number' | 'url' | 'month' | 'time' | 'week' | 'date' | 'datetime-local' | 'color';
-    value: string;
-    restProps: any;
-};
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+import { Size, Type } from './Input.js';
+interface Props {
+    label?: string;
+    id?: string;
+    labelCss?: string;
+    isLabelHidden?: boolean;
+    helpText?: string;
+    invalidText?: string;
+    isInvalid?: boolean;
+    isInline?: boolean;
+    isRounded?: boolean;
+    isDisabled?: boolean | undefined;
+    css?: string;
+    isSkinned?: boolean;
+    isUnderlinedWithBackground?: boolean;
+    isUnderlined?: boolean;
+    size?: Size;
+    type?: Type;
+    value?: string;
+    addonLeft?: Snippet;
+    addonRight?: Snippet;
 }
-declare const Input: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
-    blur: FocusEvent;
-    change: Event;
-    click: MouseEvent;
-    focus: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    addonLeft: {};
-    addonRight: {};
-}, {}, "value">;
-type Input = InstanceType<typeof Input>;
+declare const Input: import("svelte").Component<Props, {}, "">;
+type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/{Banner.svelte → layouts/Banner.svelte}

@@ -1,25 +1,25 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { mergedClasses } from './CssHelper.js';
+	import { cn } from '../../utils.js';
 
 	interface Props {
 		children: Snippet;
 		background?: string;
 		css?: string;
 	}
+
 	let { children, background = '', css = '' }: Props = $props();
 
-	// const bannerKlasses = mergedClasses('banner', css);npm run build 
-	const bannerKlasses = 'banner';
+	const bannerKlasses = cn('banner', css);
 </script>
 
-<div class={bannerKlasses} style="--functional-banner-background: {background};">
+<div class={bannerKlasses} style="--banner-background: {background};">
 	{@render children()}
 </div>
 
 <style>
 	div.banner {
-		background: var(--functional-banner-background);
+		background: var(--banner-background);
 		height: 100%;
 		width: 100%;
 	}