@ni/fast-foundation 0.0.2

package/dist/dts/test-utilities/fixture.d.ts

@@ -0,0 +1,89 @@
+import { Constructable, ExecutionContext, HTMLView, ViewTemplate } from "@ni/fast-element";
+import { DesignSystem } from "../design-system/index.js";
+import type { FoundationElementDefinition, FoundationElementRegistry } from "../foundation-element/foundation-element.js";
+/**
+ * Options used to customize the creation of the test fixture.
+ */
+export interface FixtureOptions {
+    /**
+     * The document to run the fixture in.
+     * @defaultValue `globalThis.document`
+     */
+    document?: Document;
+    /**
+     * The parent element to append the fixture to.
+     * @defaultValue An instance of `HTMLDivElement`.
+     */
+    parent?: HTMLElement;
+    /**
+     * The data source to bind the HTML to.
+     * @defaultValue An empty object.
+     */
+    source?: any;
+    /**
+     * The execution context to use during binding.
+     * @defaultValue {@link @ni/fast-element#defaultExecutionContext}
+     */
+    context?: ExecutionContext;
+    /**
+     * A pre-configured design system instance used in setting up the fixture.
+     */
+    designSystem?: DesignSystem;
+}
+export interface Fixture<TElement = HTMLElement> {
+    /**
+     * The document the fixture is running in.
+     */
+    document: Document;
+    /**
+     * The template the fixture was created from.
+     */
+    template: ViewTemplate;
+    /**
+     * The view that was created from the fixture's template.
+     */
+    view: HTMLView;
+    /**
+     * The parent element that the view was appended to.
+     * @remarks
+     * This element will be appended to the DOM only
+     * after {@link Fixture.connect} has been called.
+     */
+    parent: HTMLElement;
+    /**
+     * The first element in the {@link Fixture.view}.
+     */
+    element: TElement;
+    /**
+     * Adds the {@link Fixture.parent} to the DOM, causing the
+     * connect lifecycle to begin.
+     * @remarks
+     * Yields control to the caller one Microtask later, in order to
+     * ensure that the DOM has settled.
+     */
+    connect: () => Promise<void>;
+    /**
+     * Removes the {@link Fixture.parent} from the DOM, causing the
+     * disconnect lifecycle to begin.
+     * @remarks
+     * Yields control to the caller one Microtask later, in order to
+     * ensure that the DOM has settled.
+     */
+    disconnect: () => Promise<void>;
+}
+/**
+ * Creates a random, unique name suitable for use as a Custom Element name.
+ */
+export declare function uniqueElementName(): string;
+/**
+ * Creates a test fixture suitable for testing custom elements, templates, and bindings.
+ * @param templateNameOrRegistry An HTML template or single element name to create the fixture for.
+ * @param options Enables customizing fixture creation behavior.
+ * @remarks
+ * Yields control to the caller one Microtask later, in order to
+ * ensure that the DOM has settled.
+ */
+export declare function fixture<TElement = HTMLElement>(templateNameOrRegistry: ViewTemplate | string | FoundationElementRegistry<FoundationElementDefinition, Constructable<TElement>> | [
+    FoundationElementRegistry<FoundationElementDefinition, Constructable<TElement>>,
+    ...FoundationElementRegistry<FoundationElementDefinition, Constructable>[]
+], options?: FixtureOptions): Promise<Fixture<TElement>>;

package/dist/dts/test-utilities/timeout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Timeout for use in async tets.
+ */
+export declare function timeout(timeout?: number): Promise<void>;

package/dist/dts/text-area/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./text-area.template.js";
+export * from "./text-area.js";

package/dist/dts/text-area/text-area.d.ts

@@ -0,0 +1,149 @@
+import { DelegatesARIATextbox } from "../text-field/text-field.js";
+import { FormAssociatedTextArea } from "./text-area.form-associated.js";
+import { TextAreaResize } from "./text-area.options.js";
+export { TextAreaResize };
+/**
+ * A Text Area Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
+ *
+ * @slot - The default slot for the label
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control
+ * @csspart control - The textarea element
+ * @fires change - Emits a custom 'change' event when the textarea emits a change event
+ *
+ * @public
+ */
+export declare class TextArea extends FormAssociatedTextArea {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    private readOnlyChanged;
+    /**
+     * The resize mode of the element.
+     * @public
+     * @remarks
+     * HTML Attribute: resize
+     */
+    resize: TextAreaResize;
+    /**
+     * A reference to the internal textarea element
+     * @internal
+     */
+    control: HTMLTextAreaElement;
+    /**
+     * Indicates that this element should get focus after the page finishes loading.
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    private autofocusChanged;
+    /**
+     * The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id | id} of the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form | form} the element is associated to
+     * @public
+     */
+    formId: string;
+    /**
+     * Allows associating a {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist} to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
+     * @public
+     * @remarks
+     * HTML Attribute: list
+     */
+    list: string;
+    private listChanged;
+    /**
+     * The maximum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: maxlength
+     */
+    maxlength: number;
+    private maxlengthChanged;
+    /**
+     * The minimum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: minlength
+     */
+    minlength: number;
+    private minlengthChanged;
+    /**
+     * The name of the element.
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    name: string;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @public
+     * @remarks
+     * HTML Attribute: placeholder
+     * Using this attribute does is not a valid substitute for a labeling element.
+     */
+    placeholder: string;
+    /**
+     * Sizes the element horizontally by a number of character columns.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: cols
+     */
+    cols: number;
+    /**
+     * Sizes the element vertically by a number of character rows.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: rows
+     */
+    rows: number;
+    /**
+     * Sets if the element is eligible for spell checking
+     * but the UA.
+     * @public
+     * @remarks
+     * HTML Attribute: spellcheck
+     */
+    spellcheck: boolean;
+    private spellcheckChanged;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * Selects all the text in the text area
+     *
+     * @public
+     */
+    protected select(): void;
+    /**
+     * @internal
+     */
+    handleTextInput: () => void;
+    /**
+     * Change event handler for inner control.
+     * @remarks
+     * "Change" events are not `composable` so they will not
+     * permeate the shadow DOM boundary. This fn effectively proxies
+     * the change event, emitting a `change` event whenever the internal
+     * control emits a `change` event
+     * @internal
+     */
+    handleChange(): void;
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface TextArea extends DelegatesARIATextbox {
+}

package/dist/dts/text-area/text-area.form-associated.d.ts

@@ -0,0 +1,16 @@
+import { FormAssociated } from "../form-associated/form-associated.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+declare class _TextArea extends FoundationElement {
+}
+interface _TextArea extends FormAssociated {
+}
+declare const FormAssociatedTextArea_base: typeof _TextArea;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(TextArea:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedTextArea extends FormAssociatedTextArea_base {
+    proxy: HTMLTextAreaElement;
+}
+export {};

package/dist/dts/text-area/text-area.options.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Resize mode for a TextArea
+ * @public
+ */
+export declare const TextAreaResize: {
+    /**
+     * No resize.
+     */
+    readonly none: "none";
+    /**
+     * Resize vertically and horizontally.
+     */
+    readonly both: "both";
+    /**
+     * Resize horizontally.
+     */
+    readonly horizontal: "horizontal";
+    /**
+     * Resize vertically.
+     */
+    readonly vertical: "vertical";
+};
+/**
+ * Types for the Text Area resize mode
+ * @public
+ */
+export type TextAreaResize = typeof TextAreaResize[keyof typeof TextAreaResize];

package/dist/dts/text-area/text-area.template.d.ts

@@ -0,0 +1,8 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { TextArea } from "./text-area.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(TextArea:class)} component.
+ * @public
+ */
+export declare const textAreaTemplate: FoundationElementTemplate<ViewTemplate<TextArea>>;

package/dist/dts/text-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./text-field.template.js";
+export * from "./text-field.js";

package/dist/dts/text-field/text-field.d.ts

@@ -0,0 +1,166 @@
+import { ARIAGlobalStatesAndProperties, StartEnd, StartEndOptions } from "../patterns/index.js";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FormAssociatedTextField } from "./text-field.form-associated.js";
+import { TextFieldType } from "./text-field.options.js";
+export { TextFieldType };
+/**
+ * Text field configuration options
+ * @public
+ */
+export type TextFieldOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * A Text Field Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
+ *
+ * @slot start - Content which can be provided before the number field input
+ * @slot end - Content which can be provided after the number field input
+ * @slot - The default slot for the label
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The text field element
+ * @fires change - Fires a custom 'change' event when the value has changed
+ *
+ * @public
+ */
+export declare class TextField extends FormAssociatedTextField {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    private readOnlyChanged;
+    /**
+     * Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    private autofocusChanged;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @public
+     * @remarks
+     * HTML Attribute: placeholder
+     * Using this attribute does is not a valid substitute for a labeling element.
+     */
+    placeholder: string;
+    private placeholderChanged;
+    /**
+     * Allows setting a type or mode of text.
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: TextFieldType;
+    private typeChanged;
+    /**
+     * Allows associating a {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist} to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
+     * @public
+     * @remarks
+     * HTML Attribute: list
+     */
+    list: string;
+    private listChanged;
+    /**
+     * The maximum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: maxlength
+     */
+    maxlength: number;
+    private maxlengthChanged;
+    /**
+     * The minimum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: minlength
+     */
+    minlength: number;
+    private minlengthChanged;
+    /**
+     * A regular expression that the value must match to pass validation.
+     * @public
+     * @remarks
+     * HTMLAttribute: pattern
+     */
+    pattern: string;
+    private patternChanged;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    size: number;
+    private sizeChanged;
+    /**
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    spellcheck: boolean;
+    private spellcheckChanged;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * A reference to the internal input element
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * Selects all the text in the text field
+     *
+     * @public
+     */
+    protected select(): void;
+    /**
+     * Handles the internal control's `input` event
+     * @internal
+     */
+    handleTextInput(): void;
+    /**
+     * Change event handler for inner control.
+     * @remarks
+     * "Change" events are not `composable` so they will not
+     * permeate the shadow DOM boundary. This fn effectively proxies
+     * the change event, emitting a `change` event whenever the internal
+     * control emits a `change` event
+     * @internal
+     */
+    handleChange(): void;
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
+ * @public
+ */
+export declare class DelegatesARIATextbox {
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface TextField extends StartEnd, DelegatesARIATextbox {
+}

package/dist/dts/text-field/text-field.form-associated.d.ts

@@ -0,0 +1,16 @@
+import { FormAssociated } from "../form-associated/form-associated.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+declare class _TextField extends FoundationElement {
+}
+interface _TextField extends FormAssociated {
+}
+declare const FormAssociatedTextField_base: typeof _TextField;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(TextField:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedTextField extends FormAssociatedTextField_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/dist/dts/text-field/text-field.options.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Text field sub-types
+ * @public
+ */
+export declare const TextFieldType: {
+    /**
+     * An email TextField
+     */
+    readonly email: "email";
+    /**
+     * A password TextField
+     */
+    readonly password: "password";
+    /**
+     * A telephone TextField
+     */
+    readonly tel: "tel";
+    /**
+     * A text TextField
+     */
+    readonly text: "text";
+    /**
+     * A URL TextField
+     */
+    readonly url: "url";
+};
+/**
+ * Types for the text field sub-types
+ * @public
+ */
+export type TextFieldType = typeof TextFieldType[keyof typeof TextFieldType];

package/dist/dts/text-field/text-field.template.d.ts

@@ -0,0 +1,8 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { TextField, TextFieldOptions } from "./text-field.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
+ * @public
+ */
+export declare const textFieldTemplate: FoundationElementTemplate<ViewTemplate<TextField>, TextFieldOptions>;

package/dist/dts/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./toolbar.template.js";
+export * from "./toolbar.js";