@fluentui/web-components 3.0.0-alpha.3 → 3.0.0-alpha.30

package/dist/dts/slider/slider.d.ts

@@ -0,0 +1,24 @@
+import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
+import type { SliderSize } from './slider.options.js';
+/**
+ * The base class used for constructing a fluent-slider custom element
+ * @public
+ */
+export declare class Slider extends FASTSlider {
+    /**
+     * The size of the slider
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SliderSize;
+    handleChange(source: any, propertyName: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private stepStyles?;
+    /**
+     * Handles changes to step styling based on the step value
+     * NOTE: This function is not a changed callback, stepStyles is not observable
+     */
+    private handleStepStyles;
+}

package/dist/dts/slider/slider.definition.d.ts

@@ -0,0 +1,10 @@
+import { Slider } from './slider.js';
+/**
+ * The Fluent Slider Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-slider\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Slider>;

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

@@ -0,0 +1,15 @@
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+export { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
+/**
+ * SliderSize Constants
+ * @public
+ */
+export declare const SliderSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+/**
+ * Applies bar height to the slider rail and diameter to the slider thumbs
+ * @public
+ */
+export declare type SliderSize = ValuesOf<typeof SliderSize>;

package/dist/dts/slider/slider.styles.d.ts

@@ -0,0 +1,4 @@
+/** Text styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,3 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
+export declare const template: ElementViewTemplate<FASTSlider>;

package/dist/dts/spinner/spinner.d.ts

@@ -1,4 +1,4 @@
-import { FASTProgressRing } from '@microsoft/fast-foundation';
+import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
 import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 /**
  * The base class used for constructing a fluent-spinner custom element
@@ -13,7 +13,7 @@ export declare class Spinner extends FASTProgressRing {
      * @remarks
      * HTML Attribute: size
      */
-    size: SpinnerSize;
+    size?: SpinnerSize;
     /**
      * The appearance of the spinner
      * @public
@@ -21,5 +21,5 @@ export declare class Spinner extends FASTProgressRing {
      * @remarks
      * HTML Attribute: appearance
      */
-    appearance: SpinnerAppearance;
+    appearance?: SpinnerAppearance;
 }

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

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

package/dist/dts/switch/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export * from './switch.js';
+export * from './switch.options.js';
+export { definition as SwitchDefinition } from './switch.definition.js';
+export { styles as SwitchStyles } from './switch.styles.js';
+export { template as SwitchTemplate } from './switch.template.js';

package/dist/dts/switch/switch.d.ts

@@ -0,0 +1,13 @@
+import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
+import { SwitchLabelPosition } from './switch.options.js';
+export declare class Switch extends FASTSwitch {
+    /**
+     * The label position of the switch
+     *
+     * @public
+     * @default 'after'
+     * @remarks
+     * HTML Attribute: labelposition
+     */
+    labelPosition: SwitchLabelPosition | undefined;
+}

package/dist/dts/switch/switch.definition.d.ts

@@ -0,0 +1,9 @@
+import { Switch } from './switch.js';
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Switch>;

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

@@ -0,0 +1,15 @@
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * SwitchLabelPosition Constants
+ * @public
+ */
+export declare const SwitchLabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+/**
+ * Applies label position
+ * @public
+ */
+export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;

package/dist/dts/switch/switch.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,3 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { Switch } from './switch.js';
+export declare const template: ElementViewTemplate<Switch>;

package/dist/dts/tab/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export * from './tab.js';
+export { template as TabTemplate } from './tab.template.js';
+export { styles as TabStyles } from './tab.styles.js';
+export { definition as TabDefinition } from './tab.definition.js';

package/dist/dts/tab/tab.d.ts

@@ -0,0 +1,8 @@
+import { FASTTab } from '@microsoft/fast-foundation/tab.js';
+/**
+ * Tab extends the FASTTab and is a child of the TabList
+ */
+export declare class Tab extends FASTTab {
+    private styles;
+    connectedCallback(): void;
+}

package/dist/dts/tab/tab.definition.d.ts

@@ -0,0 +1,2 @@
+import { Tab } from './tab.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tab>;

package/dist/dts/tab/tab.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,4 @@
+import { FASTTab, TabOptions } from '@microsoft/fast-foundation/tab.js';
+import { ElementViewTemplate } from '@microsoft/fast-element';
+export declare function tabTemplate<T extends FASTTab>(options?: TabOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<FASTTab, any>;

package/dist/dts/tab-panel/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/tab-panel/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tab-panel.js';
+export { template as TabPanelTemplate } from './tab-panel.template.js';
+export { styles as TabPanelStyles } from './tab-panel.styles.js';
+export { definition as TabPanelDefinition } from './tab-panel.definition.js';

package/dist/dts/tab-panel/tab-panel.d.ts

@@ -0,0 +1,3 @@
+import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
+export declare class TabPanel extends FASTTabPanel {
+}

package/dist/dts/tab-panel/tab-panel.definition.d.ts

@@ -0,0 +1,2 @@
+import { TabPanel } from './tab-panel.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof TabPanel>;

package/dist/dts/tab-panel/tab-panel.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/tab-panel/tab-panel.template.d.ts

@@ -0,0 +1 @@
+export declare const template: import("@microsoft/fast-element").ElementViewTemplate<import("@microsoft/fast-foundation/tab-panel.js").FASTTabPanel, any>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export * from './tabs.js';
+export * from './tabs.options.js';
+export { template as TabsTemplate } from './tabs.template.js';
+export { styles as TabsStyles } from './tabs.styles.js';
+export { definition as TabsDefinition } from './tabs.definition.js';

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

@@ -0,0 +1,88 @@
+import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
+import { TabsAppearance, 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 {
+    /**
+     * activeTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private activeTabData;
+    /**
+     * previousActiveTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private previousActiveTabData;
+    /**
+     * activeTabOffset
+     * Used to position the active indicator for animations of the active indicator on active tab changes.
+     */
+    private activeTabOffset;
+    /**
+     * activeTabScale
+     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
+     */
+    private activeTabScale;
+    /**
+     * styles
+     * used in the class for storing the css variables required for animations
+     */
+    private styles;
+    /**
+     * appearance
+     * There are two modes of appearance: transparent and subtle.
+     */
+    appearance?: TabsAppearance;
+    /**
+     * disabled
+     * Used for disabling all click and keyboard events for the tabs, child tab elements and tab panel elements. UI styling of content and tabs will appear as "grayed out."
+     */
+    disabled?: boolean;
+    /**
+     * size
+     * defaults to medium.
+     * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
+     */
+    size?: TabsSize;
+    /**
+     * calculateAnimationProperties
+     *
+     * Recalculates the active tab offset and scale.
+     * These values will be applied to css variables that control the tab active indicator position animations
+     */
+    private calculateAnimationProperties;
+    /**
+     * getSelectedTabPosition - gets the x or y coordinates of the tab
+     */
+    private getTabPosition;
+    /**
+     * getSelectedTabScale - gets the scale of the tab
+     */
+    private getTabScale;
+    /**
+     * applyUpdatedCSSValues
+     *
+     * calculates and applies updated values to CSS variables
+     * @param tab
+     */
+    private applyUpdatedCSSValues;
+    /**
+     * animationLoop
+     * runs through all the operations required for setting the tab active indicator to its starting location, ending location, and applying the animated css class to the tab.
+     * @param tab
+     */
+    private animationLoop;
+    /**
+     * setTabData
+     * sets the data from the active tab onto the class. used for making all the animation calculations for the active tab indicator.
+     */
+    private setTabData;
+    private setTabOffsetCSSVar;
+    private setTabScaleCSSVar;
+    activeidChanged(oldValue: string, newValue: string): void;
+    tabsChanged(): void;
+}

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

@@ -0,0 +1,2 @@
+import { Tabs } from './tabs.js';
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tabs>;

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

@@ -0,0 +1,14 @@
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+export declare const TabsAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+export declare type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+export declare const TabsSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+export declare type TabsSize = ValuesOf<typeof TabsSize>;
+export { TabsOrientation };

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1 @@
+export declare const template: import("@microsoft/fast-element").ElementViewTemplate<import("@microsoft/fast-foundation/tabs.js").FASTTabs, any>;

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

@@ -63,7 +63,7 @@ export declare class Text extends FASTElement {
      * HTML Attribute: size
      *
      */
-    size: TextSize;
+    size?: TextSize;
     /**
      * THe Text font
      *
@@ -71,7 +71,7 @@ export declare class Text extends FASTElement {
      * @remarks
      * HTML Attribute: font
      */
-    font: TextFont;
+    font?: TextFont;
     /**
      * THe Text weight
      *
@@ -79,7 +79,7 @@ export declare class Text extends FASTElement {
      * @remarks
      * HTML Attribute: weight
      */
-    weight: TextWeight;
+    weight?: TextWeight;
     /**
      * THe Text align
      *
@@ -87,5 +87,5 @@ export declare class Text extends FASTElement {
      * @remarks
      * HTML Attribute: align
      */
-    align: TextAlign;
+    align?: TextAlign;
 }

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+export * from './text-input.js';
+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-input.d.ts

@@ -0,0 +1,26 @@
+import { FASTTextField } from '@microsoft/fast-foundation/text-field.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 {
+    /**
+     * Defines TextInput control size
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: control-size
+     */
+    controlSize?: TextInputControlSize;
+    /**
+     * Defines TextInput appearance.
+     *
+     * @public
+     * @default 'outline'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: TextInputAppearance;
+}

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

@@ -0,0 +1,10 @@
+import { TextInput } from './text-input.js';
+/**
+ * The Fluent TextInput Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text-input\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof TextInput>;

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

@@ -0,0 +1,30 @@
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * TextInput size constants
+ * @public
+ */
+export declare const TextInputControlSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * Applies size styling to TextInput
+ * @public
+ */
+export declare type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
+/**
+ * TextInput appearance constants
+ * @public
+ */
+export declare const TextInputAppearance: {
+    readonly outline: "outline";
+    readonly underline: "underline";
+    readonly filledLighter: "filled-lighter";
+    readonly filledDarker: "filled-darker";
+};
+/**
+ * Applies appearance styling to TextInput
+ * @public
+ */
+export declare type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;

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

@@ -0,0 +1,4 @@
+/** TextInput styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,6 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { TextInput } from './text-input.js';
+/**
+ * @internal
+ */
+export declare const template: ElementViewTemplate<TextInput>;