@fluentui/web-components 3.0.0-beta.53 → 3.0.0-beta.55

package/dist/web-components.d.ts

@@ -1825,6 +1825,71 @@ export declare class BaseProgressBar extends FASTElement {
     constructor();
 }
 
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ * @public
+ */
+export declare class BaseRatingDisplay extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The number of ratings.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `count`
+     */
+    count?: number;
+    /**
+     * The maximum possible value of the rating.
+     * This attribute determines the number of icons displayed.
+     * Must be a whole number greater than 1.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * The value of the rating.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    private intlNumberFormatter;
+    constructor();
+    /**
+     * Returns "count" as string, formatted according to the locale.
+     *
+     * @internal
+     */
+    get formattedCount(): string;
+    /**
+     * Gets the selected value
+     *
+     * @protected
+     */
+    protected getSelectedValue(): number;
+    /**
+     * Gets the maximum icons to render
+     *
+     * @protected
+     */
+    protected getMaxIcons(): number;
+    /**
+     * Generates the icon SVG elements based on the "max" attribute.
+     *
+     * @internal
+     */
+    generateIcons(): string;
+}
+
 /**
  * The base class used for constructing a fluent-spinner custom element
  * @public
@@ -1839,6 +1904,99 @@ export declare class BaseSpinner extends FASTElement {
     constructor();
 }
 
+/**
+ * A Tablist element that wraps a collection of tab elements
+ * @public
+ */
+export declare class BaseTablist extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled.
+     */
+    disabled: boolean;
+    /**
+     * Handles disabled changes
+     * @param prev - previous value
+     * @param next - next value
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TablistOrientation;
+    /**
+     * @internal
+     */
+    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    protected activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    protected tabsChanged(): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private change;
+    private getActiveIndex;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void;
+    private getTabIds;
+    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 activateTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
+
 /**
  * A Tabs component that wraps a collection of tab and tab panel elements.
  *
@@ -7364,16 +7522,12 @@ export declare const RadioStyles: ElementStyles;
 export declare const RadioTemplate: ElementViewTemplate<Radio>;
 
 /**
- * The base class used for constructing a fluent-rating-display custom element
+ * A Rating Dislpay Custom HTML Element.
+ * Based on BaseRatingDisplay and includes style and layout specific attributes
+ *
  * @public
  */
-export declare class RatingDisplay extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
+export declare class RatingDisplay extends BaseRatingDisplay {
     /**
      * The color of the rating display icons.
      *
@@ -7390,32 +7544,6 @@ export declare class RatingDisplay extends FASTElement {
      * @param next - The next state
      */
     colorChanged(prev: RatingDisplayColor | undefined, next: RatingDisplayColor | undefined): void;
-    /**
-     * Renders a single filled icon with a label next to it.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `compact`
-     */
-    compact: boolean;
-    /**
-     * The number of ratings.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `count`
-     */
-    count?: number;
-    /**
-     * The maximum possible value of the rating.
-     * This attribute determines the number of icons displayed.
-     * Must be a whole number greater than 1.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `max`
-     */
-    max?: number;
     /**
      * The size of the component.
      *
@@ -7433,27 +7561,25 @@ export declare class RatingDisplay extends FASTElement {
      */
     sizeChanged(prev: RatingDisplaySize | undefined, next: RatingDisplaySize | undefined): void;
     /**
-     * The value of the rating.
+     * Renders a single filled icon with a label next to it.
      *
      * @public
      * @remarks
-     * HTML Attribute: `value`
+     * HTML Attribute: `compact`
      */
-    value?: number;
-    private intlNumberFormatter;
-    constructor();
+    compact: boolean;
     /**
-     * Returns "count" as string, formatted according to the locale.
+     * Overrides the selected value and returns 1 if compact is true.
      *
-     * @internal
+     * @override
      */
-    get formattedCount(): string;
+    protected getSelectedValue(): number;
     /**
-     * Generates the icon SVG elements based on the "max" attribute.
+     * Overrides the maximum icons and returns a max of 1 if compact is true.
      *
-     * @internal
+     * @override
      */
-    generateIcons(): string;
+    protected getMaxIcons(): number;
 }
 
 /**
@@ -8406,6 +8532,170 @@ export declare interface Tab extends StartEnd {
 
 export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
 
+/**
+ * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ * @public
+ */
+export declare class Tablist extends BaseTablist {
+    /**
+     * 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;
+    /**
+     * appearance
+     * There are two modes of appearance: transparent and subtle.
+     */
+    appearance?: TablistAppearance;
+    /**
+     * @internal
+     */
+    protected appearanceChanged(prev: TablistAppearance, next: TablistAppearance): void;
+    /**
+     * 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?: TablistSize;
+    /**
+     * @internal
+     */
+    protected sizeChanged(prev: TablistSize, next: TablistSize): void;
+    /**
+     * 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;
+    /**
+     * Calculates and applies updated values to CSS variables.
+     *
+     * @param tab - the tab element to apply the updated values to
+     * @internal
+     */
+    private applyUpdatedCSSValues;
+    /**
+     * 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 - the tab element to apply the updated values to
+     * @internal
+     */
+    private animationLoop;
+    /**
+     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
+     * tab indicator.
+     *
+     * @internal
+     */
+    private setTabData;
+    /**
+     * Sets the css variables for the active tab indicator.
+     * @internal
+     */
+    private setAnimationVars;
+    /**
+     * Initiates the active tab indicator animation loop when activeid changes.
+     * @param oldValue - the previous tabId
+     * @param newValue - the new tabId
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * Initiates the active tab indicator animation loop when tabs change.
+     */
+    tabsChanged(): void;
+}
+
+/**
+ * The appearance of the component
+ * @public
+ */
+export declare const TablistAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+/**
+ * The types for the Tablist appearance
+ * @public
+ */
+export declare type TablistAppearance = ValuesOf<typeof TablistAppearance>;
+
+/**
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-tablist\>
+ */
+export declare const TablistDefinition: FASTElementDefinition<typeof Tablist>;
+
+/**
+ * The orientation of the component
+ * @public
+ */
+export declare const TablistOrientation: {
+    readonly horizontal: "horizontal"; /**
+    * The appearance of the component
+    * @public
+    */
+    readonly vertical: "vertical";
+};
+
+/**
+ * The types for the Tablist orientation
+ * @public
+ */
+export declare type TablistOrientation = ValuesOf<typeof TablistOrientation>;
+
+/**
+ * The size of the component
+ * @public
+ */
+export declare const TablistSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * The types for the Tablist size
+ * @public
+ */
+export declare type TablistSize = ValuesOf<typeof TablistSize>;
+
+/**
+ * @public
+ */
+export declare const TablistStyles: ElementStyles;
+
+/**
+ * @public
+ */
+export declare const TablistTemplate: ViewTemplate<Tablist, any>;
+
 /**
  * Tab configuration options
  * @public