@functionalcms/svelte-components 4.36.9 → 5.0.0-beta1

package/dist/components/form/Input.svelte

@@ -1,461 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-	import { InputType, LabelSize } from './form.js';
-
-	interface Props{
-		label: string;
-		labelSize: LabelSize;
-		labelCss: string;
-		isLabelHidden: boolean;
-
-		id: string;
-		name: string;
-		helpText: string;
-
-		isInvalid: boolean;
-		invalidText: string;
-
-		isInline: boolean;
-		isRounded: boolean;
-		isSkinned: boolean;
-		isUnderlinedWithBackground: boolean;
-		isUnderlined: boolean;
-
-		isDisabled: boolean | undefined;
-		isRequired: boolean | undefined;
-
-		css: string;
-
-		placeholder: string;
-		
-		type: InputType;
-
-		maxLength: number | undefined;
-		minLength: number | undefined;
-
-		value: string | any;
-		addonLeft: Snippet;
-		addonRight: Snippet;
-	}
-	
-	let {
-		addonLeft,
-		addonRight,
-		label = '',
-		id = '',
-		name = '',
-		labelCss = '',
-		isLabelHidden = false,
-		helpText = '',
-		isInvalid = false,
-		invalidText = '',
-		isInline = false,
-		isRounded = false,
-		isDisabled = undefined,
-		isRequired = undefined,
-		css = '',
-		isSkinned = true,
-		isUnderlinedWithBackground = false,
-		isUnderlined = false,
-		labelSize = LabelSize.None,
-		type = InputType.Text,
-		value = '',
-		placeholder= '',
-		...restProps
-	}: Partial<Props> = $props();
-
-	let labelClasses = $derived(
-		cn(
-			'label',
-			isInvalid ? 'label-error' : '',
-			isInline ? 'label-inline' : '',
-			labelSize ? `label-${labelSize}` : '',
-			isLabelHidden ? 'screenreader-only' : '',
-			labelCss ? labelCss : ''
-		)
-	);
-
-	let inputClasses = $derived(
-		cn(
-			isSkinned ? 'input' : 'input-base',
-			isRounded ? 'input-rounded' : '',
-			isUnderlined ? 'input-underlined' : '',
-			addonLeft ? 'input-has-left-addon' : '',
-			addonRight ? 'input-has-right-addon' : '',
-			isDisabled ? 'disabled' : '',
-			isInvalid ? 'input-error' : '',
-			isInline ? 'input-inline' : '',
-			isUnderlinedWithBackground ? 'input-underlined-bg' : '',
-			css ? css : '',
-			labelSize ? `input-${labelSize}` : ''
-		)
-	);
-
-	let invalidClasses = $derived(labelSize ? `field-error-${labelSize}` : 'field-error');
-
-	let helpClasses = $derived(labelSize ? `field-help-${labelSize}` : 'field-help');
-
-	let addonContainerClasses = () => 'input-addon-container';
-
-	const handleInput = (e: Event) => {
-		value = (e.target as HTMLInputElement).value;
-	};
-</script>
-
-{#snippet input()}
-	<input
-		{id}
-		{name}
-		{type}
-		{placeholder}
-		bind:value
-		class={inputClasses}
-		disabled={isDisabled}
-		required={isRequired}
-		oninput={handleInput}
-		{...restProps}
-	/>
-{/snippet}
-
-<div class="w-100">
-	<label class={labelClasses} for={id}>{label}</label>
-	{#if type == InputType.Textarea}
-		<textarea 
-			{id}
-			{name}
-			{placeholder}
-			class={inputClasses} 
-			bind:value 
-			oninput={handleInput} 
-			required={isRequired} 
-			{...restProps}></textarea>
-	{:else if addonLeft || addonRight}
-		<div class={addonContainerClasses()}>
-			{#if addonLeft}
-				{@render addonLeft()}
-			{/if}
-			{@render input()}
-			{#if addonRight}
-				{@render addonRight()}
-			{/if}
-		</div>
-	{:else}
-		{@render input()}
-	{/if}
-	{#if isInvalid}
-		<span role="status" aria-live="polite" class={invalidClasses}>
-			{invalidText}
-		</span>
-	{:else if helpText}<span class={helpClasses}>{helpText}</span>{/if}
-</div>
-
-<style>
-	.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
-       */
-		user-select: initial;
-		appearance: none;
-		box-sizing: border-box;
-
-		/* Use the same color for the cursor */
-		caret-color: currentColor;
-	}
-
-	.label,
-	.label-base {
-		padding: 0;
-		border: 0;
-		box-sizing: border-box;
-		font-family: inherit;
-	}
-
-	/* Electing to scope these as opposed to doing :root level definitions */
-	.field-help,
-	.field-help-large,
-	.field-help-small,
-	.field-error,
-	.field-error-large,
-	.field-error-small,
-	.label-skin,
-	.label,
-	.input-addon-container,
-	.input-small,
-	.input-large,
-	.input-skin,
-	.input-underlined,
-	.input-underlined-bg,
-	.input {
-		color: var(--font-color, var(--dark));
-		font-family: var(--font-family-body);
-		font-weight: var(--font-weight, 300);
-		font-size: var(--font-size, 1rem);
-		line-height: var(--line-height, var(--fluid-20, 1.25rem));
-		width: 100%;
-		max-width: 100%;
-	}
-
-	.input-skin,
-	.input {
-		/* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
-		border-style: solid;
-
-		/* this can be overriden, but it might mess with the balance of the button heights across variants */
-		border-width: var(--input-border-size, 1px);
-		border-color: var(--input-border-color, var(--gray-light));
-
-		/* these can be overriden, but it might mess with the balance of the inputheights across variants */
-		padding-block-start: var(--input-vertical-pad, 0.5rem);
-		padding-block-end: var(--input-vertical-pad, 0.5rem);
-		padding-inline-start: var(--input-side-padding, 0.75rem);
-		padding-inline-end: var(--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 :) */
-		transition-property: box-shadow;
-		transition-duration: var(--input-timing, var(--timing-medium));
-	}
-
-	.label {
-		display: inline-block;
-
-		/* Provided --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(--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(--font-size, 1rem) - 2px);
-	}
-
-	.label-inline,
-	.input-inline {
-		width: auto;
-	}
-
-	/* When inlined, the margin-block-end will throw the label off-center with adjacent input */
-	.label-inline {
-		margin-block-start: 0;
-		margin-block-end: 0;
-		margin-inline-start: 0;
-		margin-inline-end: var(--input-side-padding, 0.75rem);
-	}
-
-	/**
-    * Placeholder
-    */
-
-	/* stylelint-disable-next-line */
-	.input::-webkit-input-placeholder {
-		color: currentColor;
-		opacity: 50%;
-		transition: opacity var(--timing-fast) ease-out;
-	}
-
-	/* stylelint-disable-next-line */
-	.input::placeholder {
-		color: currentColor;
-		opacity: 50%;
-		transition: opacity var(--timing-fast) ease-out;
-	}
-
-	/* stylelint-disable-next-line */
-	.input::-ms-placeholder {
-		color: currentColor;
-		opacity: 50%;
-		transition: opacity var(--timing-fast) ease-out;
-	}
-
-	/* stylelint-disable-next-line */
-	.input:-ms-placeholder {
-		color: currentColor;
-		opacity: 50%;
-		transition: opacity var(--timing-fast) ease-out;
-	}
-
-	/**
-    * Underlined inputs
-    */
-	.input-underlined {
-		border-top: 0;
-		border-left: 0;
-		border-right: 0;
-		border-color: var(--input-underlined-color, var(--gray-mid-dark));
-		background-color: transparent;
-	}
-
-	.input-underlined-bg {
-		background-color: var(--input-underlined-bg-color, var(--gray-extra-light));
-	}
-
-	/**
-    * Rounded inputs
-    */
-	.input-rounded {
-		border-radius: var(--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).
-     */
-	.label-error {
-		color: var(--input-error-color, var(--error));
-	}
-
-	.input-error {
-		border-color: var(--input-error-color, var(--error));
-	}
-
-	.label-error,
-	.field-error,
-	.field-error-small,
-	.field-error-large {
-		color: var(--input-error-color, var(--error));
-	}
-
-	.field-help,
-	.field-help-small,
-	.field-help-large {
-		color: var(--input-help-color, var(--gray-dark));
-	}
-
-	.field-help,
-	.field-help-small,
-	.field-help-large,
-	.field-error,
-	.field-error-small,
-	.field-error-large {
-		display: inline-block;
-		width: 100%;
-		margin-block-start: calc(var(--input-vertical-pad, 0.5rem) / 2);
-	}
-
-	/**
-      * Sizes
-      */
-	.input-large {
-		font-size: calc(var(--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(--font-size, 1rem);
-	}
-
-	.label-large {
-		font-size: calc(var(--font-size, 1rem) + 0.25rem);
-	}
-
-	.input-small {
-		font-size: calc(var(--font-size, 1rem) - 0.25rem);
-		line-height: 1rem;
-	}
-
-	.field-help-small,
-	.field-error-small,
-	.label-small {
-		font-size: calc(var(--font-size, 1rem) - 0.25rem);
-	}
-
-	.input:focus {
-		box-shadow: 0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);
-
-		/* Needed for High Contrast mode */
-		outline: var(--focus-ring-outline-width) var(--focus-ring-outline-style)
-			var(--focus-ring-outline-color);
-		transition: box-shadow var(--timing-fast) ease-out;
-	}
-
-	/* Set the focus to transparent when there's an error since we use
-    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.
-    */
-	.input.disabled, /* DEPRECATED -- TODO remove class based disabled */
-    .input:disabled {
-		background: var(--input-disabled-bg, var(--disabled-bg)) !important;
-		color: var(--input-disabled-color, var(--disabled-color)) !important;
-		appearance: none !important;
-		box-shadow: none !important;
-		cursor: not-allowed !important;
-		opacity: 80% !important;
-	}
-
-	@media screen and (-ms-high-contrast: active) {
-		/* High contrast mode outline hacks */
-
-		/* styleint-disable-next-line no-descending-specificity  */
-		.input:disabled {
-			outline: 2px solid transparent;
-			outline-offset: -2px;
-		}
-	}
-
-	/**
-     * Input "has addon"
-     */
-
-	.input-addon-container {
-		display: flex;
-		position: relative;
-		width: 100%;
-		min-height: 100%;
-	}
-
-	.input-has-left-addon {
-		padding-left: calc(var(--side-padding) * 3);
-	}
-
-	.input-has-right-addon {
-		padding-right: calc(var(--side-padding) * 3);
-	}
-
-	.input-addon-left {
-		left: var(--input-side-padding);
-	}
-
-	.input-addon-right {
-		right: var(--input-side-padding);
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		/* stylelint-disable selector-no-vendor-prefix */
-		.input-skin,
-		.input,
-		.input::placeholder,
-		.input::-webkit-input-placeholder,
-		.input::-ms-placeholder,
-		.input:-ms-placeholder,
-		.input:focus {
-			transition-duration: 0.001ms !important;
-		}
-	}
-</style>

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

@@ -1,30 +0,0 @@
-import type { Snippet } from 'svelte';
-import { InputType, LabelSize } from './form.js';
-declare const Input: import("svelte").Component<Partial<{
-    label: string;
-    labelSize: LabelSize;
-    labelCss: string;
-    isLabelHidden: boolean;
-    id: string;
-    name: string;
-    helpText: string;
-    isInvalid: boolean;
-    invalidText: string;
-    isInline: boolean;
-    isRounded: boolean;
-    isSkinned: boolean;
-    isUnderlinedWithBackground: boolean;
-    isUnderlined: boolean;
-    isDisabled: boolean | undefined;
-    isRequired: boolean | undefined;
-    css: string;
-    placeholder: string;
-    type: InputType;
-    maxLength: number | undefined;
-    minLength: number | undefined;
-    value: string | any;
-    addonLeft: Snippet;
-    addonRight: Snippet;
-}>, {}, "">;
-type Input = ReturnType<typeof Input>;
-export default Input;

package/dist/components/form/Select.svelte

@@ -1,163 +0,0 @@
-<script lang="ts">
-	import { cn } from "../../utils.js";
-
-	interface Props {
-		id: string;
-		name: string;
-		label: string;
-		options: Array<{ value: string; label: string }>;
-		size: string;
-		multipleSize: number;
-		isMultiple: boolean;
-		defaultOptionLabel: string;
-		isDisabled: boolean;
-		isSkinned: boolean;
-		css: string;
-		singleSelected?: string; // singleSelected can be used for two-way bindings
-		multiSelected?: Array<string>; // If we don't make it seems Svelte gets confused:
-		selected: (value: string | Array<string>) => void;
-	}
-
-	let {
-		id = '',
-		name = '',
-		label = '',
-		options = [],
-		size = '',
-		multipleSize = 1,
-		isMultiple = false,
-		defaultOptionLabel = 'Please select an option',
-		isDisabled = false,
-		isSkinned = true,
-		css = '',
-		singleSelected = $bindable(''),
-		multiSelected = $bindable([]), // multiSelected can be used for two-way bindings
-		selected = () => {},
-	}: Partial<Props> = $props();
-
-	const changeHandler = () => {
-		// dispatch('selected', isMultiple ? multiSelected : singleSelected);
-		selected(isMultiple ? multiSelected : singleSelected);
-	};
-
-	let disable = isDisabled;
-	let classes = $derived(
-		cn(
-			isSkinned ? 'select' : 'select-base',
-			size ? `select-${size}` : '',
-			css ? `${css}` : ''));
-</script>
-
-<label class="screenreader-only" for={id}> {label} </label>
-{#if isMultiple}
-	<select
-		id={id}
-		class={classes}
-		{name}
-		disabled={disable}
-		multiple
-		size={multipleSize}
-		bind:value={multiSelected}
-		onchange={changeHandler}
-	>
-		{#each options as { value, label }}
-			<option {value}>{label}</option>
-		{/each}
-	</select>
-{:else}
-	<select
-		id={id}
-		class={classes}
-		{name}
-		disabled={disable}
-		bind:value={singleSelected}
-		onchange={changeHandler}
-	>
-		<option value="" disabled selected>
-			{defaultOptionLabel}
-		</option>
-		{#each options as { value, label }}
-			<option {value}>{label}</option>
-		{/each}
-	</select>
-{/if}
-
-<style>
-	.select,
-	.select-base {
-		display: block;
-		width: 100%;
-		/* stylelint-disable-next-line property-no-vendor-prefix */
-		-webkit-appearance: none;
-		/* stylelint-disable-next-line property-no-vendor-prefix */
-		-moz-appearance: none;
-		appearance: none;
-	}
-
-	.select,
-	.select-skin {
-		padding: var(--fluid-6) var(--fluid-32) var(--fluid-6) var(--fluid-12);
-		-moz-padding-start: calc(var(--fluid-12) - 3px);
-		font-size: var(--fluid-16);
-		font-weight: 400;
-		line-height: 1.5;
-		color: var(--agnostic-dark);
-		border: 1px solid var(--agnostic-select-border-color, var(--agnostic-gray-light));
-		border-radius: var(--agnostic-radius);
-		transition:
-			border-color var(--agnostic-timing-fast) ease-in-out,
-			box-shadow var(--agnostic-timing-fast) ease-in-out;
-	}
-
-	/* Only shows the down arrow SVG if in single mode */
-	.select:not([multiple]) {
-		background-color: inherit;
-		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-		background-repeat: no-repeat;
-		background-position: right var(--fluid-12) center;
-		background-size: var(--fluid-16) var(--fluid-12);
-	}
-
-	.select:focus {
-		border-color: var(--agnostic-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(--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;
-	}
-
-	.select-base,
-	.select:disabled {
-		background-color: var(--agnostic-disabled-bg);
-	}
-
-	.select-base,
-	.select:-moz-focusring {
-		color: transparent;
-		text-shadow: 0 0 0 var(--agnostic-dark);
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.select,
-		.select-base,
-		.select:focus {
-			transition: none;
-		}
-	}
-
-	.select-small {
-		padding-top: var(--fluid-4);
-		padding-bottom: var(--fluid-4);
-		padding-left: var(--fluid-8);
-		font-size: var(--fluid-14);
-	}
-
-	.select-large {
-		padding-top: var(--fluid-8);
-		padding-bottom: var(--fluid-8);
-		padding-left: var(--fluid-16);
-		font-size: var(--fluid-18);
-	}
-</style>

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

@@ -1,21 +0,0 @@
-declare const Select: import("svelte").Component<Partial<{
-    id: string;
-    name: string;
-    label: string;
-    options: Array<{
-        value: string;
-        label: string;
-    }>;
-    size: string;
-    multipleSize: number;
-    isMultiple: boolean;
-    defaultOptionLabel: string;
-    isDisabled: boolean;
-    isSkinned: boolean;
-    css: string;
-    singleSelected?: string;
-    multiSelected?: Array<string>;
-    selected: (value: string | Array<string>) => void;
-}>, {}, "singleSelected" | "multiSelected">;
-type Select = ReturnType<typeof Select>;
-export default Select;