@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.8

package/dist/dts/tabs/tabs.d.ts

@@ -1,12 +1,95 @@
-import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
-import { TabsAppearance, TabsSize } from './tabs.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '../patterns/index.js';
+import { TabsAppearance, TabsOrientation, TabsSize } from './tabs.options.js';
 /**
- * TabList extends FASTTabs and is used for constructing a fluent-tab-list custom html element.
  *
  * @class TabList component
  * @public
  */
-export declare class Tabs extends FASTTabs {
+export declare class BaseTabs extends FASTElement {
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TabsOrientation;
+    /**
+     * @internal
+     */
+    orientationChanged(): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabsChanged(): void;
+    /**
+     * @internal
+     */
+    tabpanels: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabpanelsChanged(): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
+export declare class Tabs extends BaseTabs {
     /**
      * activeTabData
      * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
@@ -86,3 +169,5 @@ export declare class Tabs extends FASTTabs {
     activeidChanged(oldValue: string, newValue: string): void;
     tabsChanged(): void;
 }
+export interface Tabs extends StartEnd {
+}

package/dist/dts/tabs/tabs.options.d.ts

@@ -1,5 +1,6 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
-import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+import { StartEndOptions } from '../patterns/index.js';
+import type { ValuesOf } from '../utils/index.js';
+import { Tabs } from './tabs.js';
 export declare const TabsAppearance: {
     readonly subtle: "subtle";
     readonly transparent: "transparent";
@@ -11,4 +12,21 @@ export declare const TabsSize: {
     readonly large: "large";
 };
 export declare type TabsSize = ValuesOf<typeof TabsSize>;
-export { TabsOrientation };
+/**
+ * Tabs option configuration options
+ * @public
+ */
+export declare type TabsOptions = StartEndOptions<Tabs>;
+/**
+ * The orientation of the component
+ * @public
+ */
+export declare const TabsOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+/**
+ * The types for the Tabs component
+ * @public
+ */
+export declare type TabsOrientation = ValuesOf<typeof TabsOrientation>;

package/dist/dts/tabs/tabs.template.d.ts

@@ -1 +1,5 @@
-export declare const template: import("@microsoft/fast-element").ElementViewTemplate<import("@microsoft/fast-foundation/tabs.js").FASTTabs, any>;
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { Tabs } from './tabs.js';
+import { TabsOptions } from './tabs.options.js';
+export declare function tabsTemplate<T extends Tabs>(options?: TabsOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Tabs, any>;

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * TextSize constants
  * @public

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

@@ -3,4 +3,3 @@ export * from './text-input.options.js';
 export { template as TextInputTemplate } from './text-input.template.js';
 export { styles as TextInputStyles } from './text-input.styles.js';
 export { definition as TextInputDefinition } from './text-input.definition.js';
-export { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';

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

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+declare class _TextField extends FASTElement {
+}
+interface _TextField extends FormAssociated {
+}
+declare const FormAssociatedTextField_base: typeof _TextField;
+/**
+ * @beta
+ */
+export declare class FormAssociatedTextField extends FormAssociatedTextField_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

@@ -1,10 +1,10 @@
-import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
+import { ARIAGlobalStatesAndProperties, StartEnd, StartEndOptions } from '../patterns/index.js';
 import { TextInputAppearance, TextInputControlSize } from './text-input.options.js';
-/**
- * The base class used for constructing a fluent-text-input custom element
- * @public
- */
-export declare class TextInput extends FASTTextField {
+import { TextFieldType } from './text-input.options.js';
+import { FormAssociatedTextField } from './text-field.form-associated.js';
+export { TextFieldType };
+export declare type TextFieldOptions = StartEndOptions<TextInput>;
+export declare class TextInput extends FormAssociatedTextField {
     /**
      * Defines TextInput control size
      *
@@ -23,4 +23,132 @@ export declare class TextInput extends FASTTextField {
      * HTML Attribute: appearance
      */
     appearance?: TextInputAppearance;
+    /**
+     * 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;
+    protected readOnlyChanged(): void;
+    /**
+     * 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;
+    protected autofocusChanged(): void;
+    /**
+     * 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;
+    protected placeholderChanged(): void;
+    /**
+     * 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;
+    protected listChanged(): void;
+    /**
+     * The maximum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: maxlength
+     */
+    maxlength: number;
+    protected maxlengthChanged(): void;
+    /**
+     * The minimum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: minlength
+     */
+    minlength: number;
+    protected minlengthChanged(): void;
+    /**
+     * A regular expression that the value must match to pass validation.
+     * @public
+     * @remarks
+     * HTMLAttribute: pattern
+     */
+    pattern: string;
+    protected patternChanged(): void;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    size: number;
+    protected sizeChanged(): void;
+    /**
+     * 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;
+    protected spellcheckChanged(): void;
+    /**
+     * @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
+     */
+    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 {
+}
+export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+}
+export interface TextInput extends StartEnd, DelegatesARIATextbox {
 }

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * TextInput size constants
  * @public
@@ -28,3 +28,34 @@ export declare const TextInputAppearance: {
  * @public
  */
 export declare type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;
+/**
+ * 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 declare type TextFieldType = ValuesOf<typeof TextFieldType>;

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

@@ -1,5 +1,6 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import type { TextInput } from './text-input.js';
+import type { TextFieldOptions, TextInput } from './text-input.js';
+export declare function textFieldTemplate<T extends TextInput>(options?: TextFieldOptions): ElementViewTemplate<T>;
 /**
  * @internal
  */

package/dist/dts/toggle-button/toggle-button.definition.d.ts

@@ -1,7 +1,5 @@
 import { ToggleButton } from './toggle-button.js';
 /**
- * The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
  *
  * @public
  * @remarks

package/dist/dts/toggle-button/toggle-button.options.d.ts

@@ -1,5 +1,5 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ButtonOptions } from '../button/index.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * Toggle Button Appearance constants
  * @public

package/dist/dts/utils/direction.d.ts

@@ -0,0 +1,10 @@
+import { Direction } from '@microsoft/fast-web-utilities';
+/**
+ * Determines the current localization direction of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the localization direction of the element
+ *
+ * @public
+ */
+export declare const getDirection: (rootNode: HTMLElement) => Direction;

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

@@ -0,0 +1,4 @@
+export * from './direction.js';
+export * from './typings.js';
+export * from './template-helpers.js';
+export * from './whitespace-filter.js';

package/dist/dts/utils/template-helpers.d.ts

@@ -0,0 +1,16 @@
+import { CaptureType, HTMLDirective } from '@microsoft/fast-element';
+import type { SyntheticViewTemplate } from '@microsoft/fast-element';
+/**
+ * A value that can be statically composed into a
+ * foundation template.
+ * @remarks
+ * When providing a string, take care to ensure that it is
+ * safe and will not enable an XSS attack.
+ * @public
+ */
+export declare type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
+/**
+ * A function to compose template options.
+ * @public
+ */
+export declare function staticallyCompose<TSource = any, TParent = any>(item: StaticallyComposableHTML<TSource, TParent>): CaptureType<TSource, TParent>;

package/dist/dts/utils/typings.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Helper for enumerating a type from a const object
+ * Example: export type Foo = ValuesOf\<typeof Foo\>
+ * @public
+ */
+export declare type ValuesOf<T> = T[keyof T];

package/dist/dts/utils/whitespace-filter.d.ts

@@ -0,0 +1,12 @@
+import type { ElementsFilter } from '@microsoft/fast-element';
+/**
+ * filters out any whitespace-only nodes, to be used inside a template.
+ *
+ * @param value - The Node that is being inspected
+ * @param index - The index of the node within the array
+ * @param array - The Node array that is being filtered
+ * @returns true if the node is not a whitespace-only node, false otherwise
+ *
+ * @public
+ */
+export declare const whitespaceFilter: ElementsFilter;

package/dist/esm/accordion/accordion.definition.js

@@ -3,10 +3,6 @@ import { Accordion } from './accordion.js';
 import { styles } from './accordion.styles.js';
 import { template } from './accordion.template.js';
 /**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-accordion\>

package/dist/esm/accordion/accordion.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.definition.js","sourceRoot":"","sources":["../../../src/accordion/accordion.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"accordion.definition.js","sourceRoot":"","sources":["../../../src/accordion/accordion.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}