fluent-svelte-extra 1.0.5 → 1.0.6

package/AutoSuggestBox/AutoSuggestBox.svelte

@@ -0,0 +1,157 @@
+<script >import { createEventDispatcher } from "svelte";
+import { uid } from "../internal";
+import TextBox from "../TextBox/TextBox.svelte";
+import ListItem from "../ListItem/ListItem.svelte";
+/** @extends {"../TextBox/TextBox.svelte"} */
+/** The input's current value. */
+export let value = "";
+/** Array of strings that will be suggested to the user as options. */
+export let items = [];
+/** The current visibility state of the suggestion flyout. */
+export let open = false;
+/** Bindable index of the currently selected item. */
+export let selection = 0;
+/** Bindable array of currently suggested items. */
+export let matches = [];
+/** Specifies a custom class name for the component. */
+let className = "";
+export { className as class };
+/** Obtains a bound DOM reference to the input element. */
+export let inputElement = null;
+/** Obtains a bound DOM reference to the AutoSuggestBox's container element. */
+export let containerElement = null;
+/** Obtains a bound DOM reference to the AutoSuggestBox's buttons container element. */
+export let buttonsContainerElement = null;
+/** Obtains a bound DOM reference to the AutoSuggestBox's clear button element. Only available if `clearButton` is set to true, `readonly` is set to false, and a `value` is present. */
+export let clearButtonElement = null;
+/** Obtains a bound DOM reference to the AutoSuggestBox's search button element. Only available if `type` is set to `search`. */
+export let searchButtonElement = null;
+export let flyoutElement = null;
+let focused = false;
+let typedValue = "";
+const dispatch = createEventDispatcher();
+const flyoutId = uid("fds-auto-suggest-flyout-");
+$: matches = items.filter(item => item.toLowerCase().includes(typedValue.toLowerCase()));
+$: selection, dispatchSelect();
+function dispatchSelect() {
+    dispatch("select", {
+        item: items[selection],
+        index: selection
+    });
+}
+function handleInput() {
+    typedValue = inputElement.value;
+    if (focused && value && items.length > 0)
+        open = true;
+}
+function handleKeyDown(event) {
+    const { key } = event;
+    if (open && matches.length > 0) {
+        if (key === "ArrowDown") {
+            selection++;
+            if (selection > matches.length - 1)
+                selection = 0;
+        }
+        else if (key === "ArrowUp") {
+            selection--;
+            if (selection < 0)
+                selection = matches.length - 1;
+        }
+        else if (key === "Enter" || key === "Escape") {
+            open = false;
+        }
+        if (key === "Enter" || key === "ArrowDown" || key === "ArrowUp") {
+            event.preventDefault();
+            value = matches[selection];
+            flyoutElement === null || flyoutElement === void 0 ? void 0 : flyoutElement.children[selection].scrollIntoView({ block: "nearest" });
+        }
+    }
+    else if (!open && matches.length > 0 && (key === "ArrowDown" || key === "ArrowUp")) {
+        open = true;
+    }
+}
+</script>
+
+<TextBox
+	type="search"
+	class="auto-suggest-box {open && matches.length > 0 ? 'open' : ''} {className}"
+	aria-autocomplete="list"
+	aria-activedescendant={open && matches.length > 0
+		? `${flyoutId}-item-${items.indexOf(matches[selection])}`
+		: ""}
+	aria-expanded={open && matches.length > 0}
+	aria-controls={flyoutId}
+	on:search={() => {
+		if (open && matches.length > 0) value = matches[selection];
+	}}
+	on:search
+	on:input
+	on:input={handleInput}
+	on:outermousedown={() => (open = false)}
+	on:focus={() => (focused = true)}
+	on:focus
+	on:blur={() => (focused = false)}
+	on:blur
+	on:keydown={handleKeyDown}
+	on:keydown
+	on:change
+	on:beforeinput
+	on:click
+	on:dblclick
+	on:contextmenu
+	on:mousedown
+	on:mouseup
+	on:mouseover
+	on:mouseout
+	on:mouseenter
+	on:mouseleave
+	on:keypress
+	on:keyup
+	on:clear={() => {
+		typedValue = "";
+		if (items.length > 0) open = true;
+	}}
+	on:clear
+	bind:inputElement
+	bind:containerElement
+	bind:clearButtonElement
+	bind:searchButtonElement
+	bind:buttonsContainerElement
+	bind:value
+	{...$$restProps}
+>
+	{#if open && matches.length > 0}
+		<ul id={flyoutId} role="listbox" class="auto-suggest-box-flyout" bind:this={flyoutElement}>
+			{#each matches as item, index (item)}
+				<div class="auto-suggest-item-wrapper">
+					<slot
+						name="item-template"
+						id="{flyoutId}-item-{index}"
+						{value}
+						{matches}
+						{selection}
+						{item}
+						{index}
+					>
+						<ListItem
+							tabindex={-1}
+							id="{flyoutId}-item-{index}"
+							role="option"
+							on:click={() => {
+								value = matches[selection];
+								selection = index;
+								open = false;
+							}}
+							selected={selection === index}>{item}</ListItem
+						>
+					</slot>
+				</div>
+			{/each}
+		</ul>
+	{/if}
+
+	<slot />
+	<slot name="buttons" slot="buttons" />
+</TextBox>
+
+<style >.auto-suggest-box-flyout{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-end-end-radius:0;border-end-start-radius:0;border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow);box-sizing:border-box;color:var(--fds-text-primary);inline-size:calc(100% + 2px);inset-block-start:calc(100% + 1px);inset-inline-start:-1px;margin:0;max-block-size:472px;overflow:auto;padding:0;padding-block:2px;position:absolute;z-index:100}.auto-suggest-item-wrapper{display:block}:global(.auto-suggest-box.open){background-color:var(--fds-control-fill-input-active)!important}:global(.auto-suggest-box.open) :global(.text-box-underline:after){border-bottom:2px solid var(--fds-accent-default);content:""}:global(.auto-suggest-box.open) :global(input::-moz-placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(input:-ms-input-placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(input::placeholder){color:var(--fds-text-tertiary)}:global(.auto-suggest-box.open) :global(.text-box-underline){border-bottom-left-radius:0;border-bottom-right-radius:0}</style>

package/AutoSuggestBox/AutoSuggestBox.svelte.d.ts

@@ -0,0 +1,62 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: any;
+        items?: string[];
+        open?: boolean;
+        selection?: number;
+        matches?: string[];
+        class?: string;
+        inputElement?: HTMLInputElement;
+        containerElement?: HTMLDivElement;
+        buttonsContainerElement?: HTMLDivElement;
+        clearButtonElement?: HTMLButtonElement;
+        searchButtonElement?: HTMLButtonElement;
+        flyoutElement?: HTMLUListElement;
+    };
+    events: {
+        search: CustomEvent<any>;
+        input: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        keydown: CustomEvent<any>;
+        change: CustomEvent<any>;
+        beforeinput: CustomEvent<any>;
+        click: CustomEvent<any>;
+        dblclick: CustomEvent<any>;
+        contextmenu: CustomEvent<any>;
+        mousedown: CustomEvent<any>;
+        mouseup: CustomEvent<any>;
+        mouseover: CustomEvent<any>;
+        mouseout: CustomEvent<any>;
+        mouseenter: CustomEvent<any>;
+        mouseleave: CustomEvent<any>;
+        keypress: CustomEvent<any>;
+        keyup: CustomEvent<any>;
+        clear: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'item-template': {
+            id: string;
+            value: any;
+            matches: string[];
+            selection: number;
+            item: string;
+            index: any;
+        };
+        default: {};
+        buttons: {
+            slot: string;
+        };
+    };
+};
+export declare type AutoSuggestBoxProps = typeof __propDef.props;
+export declare type AutoSuggestBoxEvents = typeof __propDef.events;
+export declare type AutoSuggestBoxSlots = typeof __propDef.slots;
+export default class AutoSuggestBox extends SvelteComponentTyped<AutoSuggestBoxProps, AutoSuggestBoxEvents, AutoSuggestBoxSlots> {
+}
+export {};

package/Button/Button.svelte

@@ -0,0 +1,39 @@
+<script >import { get_current_component } from "svelte/internal";
+import { createEventForwarder } from "../internal";
+/** @restProps {button | a} */
+/** Specifies the visual styling of the button. */
+export let variant = "standard";
+/** Sets an href value and converts the button element into an anchor/ */
+export let href = "";
+/** Controls whether the button is intended for user interaction, and styles it accordingly. */
+export let disabled = false;
+/** Specifies a custom class name for the button. */
+let className = "";
+export { className as class };
+/** Obtains a bound DOM reference to the button or anchor element. */
+export let element = null;
+const forwardEvents = createEventForwarder(get_current_component());
+</script>
+
+<!--
+@component
+A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
+- Usage:
+    ```tsx
+    <Button>Click me!</Button>
+    ```
+-->
+<svelte:element
+	this={href && !disabled ? "a" : "button"}
+	use:forwardEvents
+	bind:this={element}
+	role={href && !disabled ? "button" : undefined}
+	href={href && !disabled ? href : undefined}
+	class="button style-{variant} {className}"
+	class:disabled
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
+
+<style >.button{align-items:center;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;cursor:default;display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;justify-content:center;line-height:20px;outline:none;padding-block:4px 6px;padding-inline:11px;position:relative;text-decoration:none;transition:var(--fds-control-faster-duration) ease background;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button:focus-visible{box-shadow:var(--fds-focus-stroke)}.button.style-standard{background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid;border-color:var(--fds-control-border-default);color:var(--fds-text-primary)}.button.style-standard:hover{background-color:var(--fds-control-fill-secondary)}.button.style-standard:active{background-color:var(--fds-control-fill-tertiary);border-color:var(--fds-control-stroke-default);color:var(--fds-text-secondary)}.button.style-standard.disabled{background-color:var(--fds-control-fill-disabled);border-color:var(--fds-control-stroke-default);color:var(--fds-text-disabled)}.button.style-accent{background-color:var(--fds-accent-default);border:1px solid var(--fds-control-stroke-on-accent-default);border-bottom-color:var(--fds-control-stroke-on-accent-secondary);color:var(--fds-text-on-accent-primary);transition:var(--fds-control-faster-duration) ease border-color}.button.style-accent:hover{background-color:var(--fds-accent-secondary)}.button.style-accent:active{background-color:var(--fds-accent-tertiary);border-color:transparent;color:var(--fds-text-on-accent-secondary)}.button.style-accent.disabled{background-color:var(--fds-accent-disabled);border-color:transparent;color:var(--fds-text-on-accent-disabled)}.button.style-hyperlink{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-accent-text-primary);cursor:pointer}.button.style-hyperlink:hover{background-color:var(--fds-subtle-fill-secondary)}.button.style-hyperlink:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-accent-text-tertiary)}.button.style-hyperlink.disabled{color:var(--fds-accent-text-disabled)}.button.disabled{pointer-events:none}</style>

package/Button/Button.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        variant?: "standard" | "accent" | "hyperlink";
+        href?: string;
+        disabled?: boolean;
+        class?: string;
+        element?: HTMLElement;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ButtonProps = typeof __propDef.props;
+export declare type ButtonEvents = typeof __propDef.events;
+export declare type ButtonSlots = typeof __propDef.slots;
+/**
+ * A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
+ * - Usage:
+ * ```tsx
+ * <Button>Click me!</Button>
+ * ```
+ */
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/{src/lib/CalendarDatePicker → CalendarDatePicker}/CalendarDatePicker.svelte

@@ -1,42 +1,31 @@
-<script lang="ts">
-	import CalendarView from "../CalendarView/CalendarView.svelte";
-	import Flyout from "../Flyout/FlyoutWrapper.svelte";
-	import Button from "../Button/Button.svelte";
-
-	/** The currently selected calendar date. */
-	export let value: Date | null;
-
-	/** Determines the calendar's flyout's visibility. */
-	export let open = false;
-
-	/** Locale code used for specifying the language of the calendar. If unset, the locale will be automatically inferred from `navigator.language`. */
-	export let locale: string = undefined;
-
-	/** Placeholder text that will be displayed on the calendar's input field if no value is specified. This string is not localized and will be displayed in english if no property is set. */
-	export let placeholder = "Pick a date";
-
-	/** Controls whether the picker is intended for user interaction, and styles it accordingly. */
-	export let disabled = false;
-
-	/** Determines if the flyout can be closed using conventional user interaction. */
-	export let closable = true;
-
-	/** Direction that the flyout will be opened from. */
-	export let placement: "top" | "bottom" | "left" | "right" = "bottom";
-
-	/** Alignment of the menu along the clickable target's given axis. */
-	export let alignment: "start" | "center" | "end" = "center";
-
-	/** Distance of the flyout from the control button in pixels. */
-	export let offset = 4;
-
-	/** Determines if keyboard focus should be locked to the flyout's contents. */
-	export let trapFocus = true;
-
-	function handleKeyDown(event) {
-		event.stopPropagation();
-		if (event.key === "Escape") open = false;
-	}
+<script >import CalendarView from "../CalendarView/CalendarView.svelte";
+import Flyout from "../Flyout/FlyoutWrapper.svelte";
+import Button from "../Button/Button.svelte";
+/** The currently selected calendar date. */
+export let value;
+/** Determines the calendar's flyout's visibility. */
+export let open = false;
+/** Locale code used for specifying the language of the calendar. If unset, the locale will be automatically inferred from `navigator.language`. */
+export let locale = undefined;
+/** Placeholder text that will be displayed on the calendar's input field if no value is specified. This string is not localized and will be displayed in english if no property is set. */
+export let placeholder = "Pick a date";
+/** Controls whether the picker is intended for user interaction, and styles it accordingly. */
+export let disabled = false;
+/** Determines if the flyout can be closed using conventional user interaction. */
+export let closable = true;
+/** Direction that the flyout will be opened from. */
+export let placement = "bottom";
+/** Alignment of the menu along the clickable target's given axis. */
+export let alignment = "center";
+/** Distance of the flyout from the control button in pixels. */
+export let offset = 4;
+/** Determines if keyboard focus should be locked to the flyout's contents. */
+export let trapFocus = true;
+function handleKeyDown(event) {
+    event.stopPropagation();
+    if (event.key === "Escape")
+        open = false;
+}
 </script>
 
 <Flyout
@@ -81,6 +70,4 @@
 	/>
 </Flyout>
 
-<style lang="scss">
-	@use "./CalendarDatePicker";
-</style>
+<style >.calendar-date-picker-label{-webkit-padding-end:2px;padding-inline-end:2px}.calendar-date-picker-label.placeholder:not(.disabled){color:var(--fds-text-secondary)}.calendar-date-picker-icon{fill:currentColor;-webkit-margin-start:8px;block-size:auto;color:currentColor;inline-size:12px;margin-inline-start:8px}</style>

package/CalendarDatePicker/CalendarDatePicker.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value: Date | null;
+        open?: boolean;
+        locale?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        closable?: boolean;
+        placement?: "top" | "bottom" | "left" | "right";
+        alignment?: "start" | "center" | "end";
+        offset?: number;
+        trapFocus?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CalendarDatePickerProps = typeof __propDef.props;
+export declare type CalendarDatePickerEvents = typeof __propDef.events;
+export declare type CalendarDatePickerSlots = typeof __propDef.slots;
+export default class CalendarDatePicker extends SvelteComponentTyped<CalendarDatePickerProps, CalendarDatePickerEvents, CalendarDatePickerSlots> {
+}
+export {};