@ni/fast-foundation 0.0.2

package/dist/dts/foundation-element/foundation-element.d.ts

@@ -0,0 +1,120 @@
+import type { AttributeConfiguration, ComposableStyles, Constructable, ElementViewTemplate } from "@ni/fast-element";
+import { ElementStyles, FASTElement } from "@ni/fast-element";
+import { ComponentPresentation } from "../design-system/component-presentation.js";
+import type { DesignSystemRegistrationContext, ElementDefinitionContext } from "../design-system/registration-context.js";
+import type { Container, Registry } from "../di/di.js";
+type LazyFoundationOption<T, K extends FoundationElementDefinition> = (context: ElementDefinitionContext, definition: OverrideFoundationElementDefinition<K>) => T;
+type EagerOrLazyFoundationOption<T, K extends FoundationElementDefinition> = T | LazyFoundationOption<T, K>;
+/**
+ * An element definition used to define a FoundationElement when registered through the design
+ * system registry.
+ * @public
+ */
+export interface FoundationElementDefinition {
+    /**
+     * The non-prefixed name of the component.
+     */
+    baseName: string;
+    /**
+     * The actual FAST base class of the component if different from the class used to compose.
+     */
+    baseClass?: Constructable;
+    /**
+     * The template to render for the custom element.
+     */
+    readonly template?: EagerOrLazyFoundationOption<ElementViewTemplate, this>;
+    /**
+     * The styles to associate with the custom element.
+     */
+    readonly styles?: EagerOrLazyFoundationOption<ComposableStyles | ComposableStyles[], this>;
+    /**
+     * The custom attributes of the custom element.
+     */
+    readonly attributes?: EagerOrLazyFoundationOption<(AttributeConfiguration | string)[], this>;
+    /**
+     * Options controlling the creation of the custom element's shadow DOM.
+     */
+    readonly shadowOptions?: EagerOrLazyFoundationOption<Partial<ShadowRootInit> | null, this>;
+    /**
+     * Options controlling how the custom element is defined with the platform.
+     */
+    readonly elementOptions?: EagerOrLazyFoundationOption<ElementDefinitionOptions, this>;
+}
+/**
+ * A foundation element template function.
+ * @public
+ */
+export type FoundationElementTemplate<T, K extends FoundationElementDefinition = FoundationElementDefinition> = LazyFoundationOption<T, K>;
+/**
+ * A set of properties which the component consumer can override during the element registration process.
+ * @public
+ */
+export type OverrideFoundationElementDefinition<T extends FoundationElementDefinition> = Partial<Omit<T, "type" | "baseClass">> & {
+    /**
+     * An element prefix that overrides the design system configuration.
+     * @public
+     */
+    prefix?: string;
+};
+/**
+ * Defines a foundation element class that:
+ * 1. Connects the element to its ComponentPresentation
+ * 2. Allows resolving the element template from the instance or ComponentPresentation
+ * 3. Allows resolving the element styles from the instance or ComponentPresentation
+ *
+ * @public
+ */
+export declare class FoundationElement extends FASTElement {
+    private _presentation;
+    /**
+     * A property which resolves the ComponentPresentation instance
+     * for the current component.
+     * @public
+     */
+    protected get $presentation(): ComponentPresentation | null;
+    /**
+     * Sets the template of the element instance. When undefined,
+     * the element will attempt to resolve the template from
+     * the associated presentation or custom element definition.
+     * @public
+     */
+    template: ElementViewTemplate | void | null;
+    protected templateChanged(): void;
+    /**
+     * Sets the default styles for the element instance. When undefined,
+     * the element will attempt to resolve default styles from
+     * the associated presentation or custom element definition.
+     * @public
+     */
+    styles: ElementStyles | void | null;
+    protected stylesChanged(): void;
+    /**
+     * The connected callback for this FASTElement.
+     * @remarks
+     * This method is invoked by the platform whenever this FoundationElement
+     * becomes connected to the document.
+     * @public
+     */
+    connectedCallback(): void;
+    /**
+     * Defines an element registry function with a set of element definition defaults.
+     * @param elementDefinition - The definition of the element to create the registry
+     * function for.
+     * @public
+     */
+    static compose<T extends FoundationElementDefinition = FoundationElementDefinition, K extends Constructable<FoundationElement> = Constructable<FoundationElement>>(this: K, elementDefinition: T): (overrideDefinition?: OverrideFoundationElementDefinition<T>) => FoundationElementRegistry<T, K>;
+}
+/**
+ * Registry capable of defining presentation properties for a DOM Container hierarchy.
+ *
+ * @internal
+ */
+export declare class FoundationElementRegistry<TDefinition extends FoundationElementDefinition, TType> implements Registry {
+    readonly type: Constructable<FoundationElement>;
+    private elementDefinition;
+    private overrideDefinition;
+    readonly definition: OverrideFoundationElementDefinition<TDefinition>;
+    constructor(type: Constructable<FoundationElement>, elementDefinition: TDefinition, overrideDefinition: OverrideFoundationElementDefinition<TDefinition>);
+    register(container: Container, context: DesignSystemRegistrationContext): void;
+}
+export {};

package/dist/dts/foundation-element/index.d.ts

@@ -0,0 +1 @@
+export * from "./foundation-element.js";

package/dist/dts/horizontal-scroll/horizontal-scroll.d.ts

@@ -0,0 +1,242 @@
+import type { SyntheticViewTemplate } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import type { FoundationElementDefinition, FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+/**
+ * The views types for a horizontal-scroll {@link @ni/fast-foundation#(HorizontalScroll:class)}
+ * @public
+ */
+export type HorizontalScrollView = "default" | "mobile";
+/**
+ * The easing types available for the horizontal-scroll {@link @ni/fast-foundation#(HorizontalScroll:class)}
+ * @public
+ */
+export type ScrollEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out" | string;
+/**
+ * Horizontal scroll configuration options
+ * @public
+ */
+export type HorizontalScrollOptions = FoundationElementDefinition & StartEndOptions & {
+    nextFlipper?: FoundationElementTemplate<SyntheticViewTemplate<any, HorizontalScroll>, HorizontalScrollOptions> | SyntheticViewTemplate | string;
+    previousFlipper?: FoundationElementTemplate<SyntheticViewTemplate<any, HorizontalScroll>, HorizontalScrollOptions> | SyntheticViewTemplate | string;
+};
+/**
+ * A HorizontalScroll Custom HTML Element
+ *
+ * @slot start - Content which can be provided before the scroll area
+ * @slot end - Content which can be provided after the scroll area
+ * @csspart scroll-area - Wraps the entire scrollable region
+ * @csspart scroll-view - The visible scroll area
+ * @csspart content-container - The container for the content
+ * @csspart scroll-prev - The previous flipper container
+ * @csspart scroll-action-previous - The element wrapping the previous flipper
+ * @csspart scroll-next - The next flipper container
+ * @csspart scroll-action-next - The element wrapping the next flipper
+ * @fires scrollstart - Fires a custom 'scrollstart' event when scrolling
+ * @fires scrollend - Fires a custom 'scrollend' event when scrolling stops
+ *
+ * @public
+ */
+export declare class HorizontalScroll extends FoundationElement {
+    /**
+     * Reference to DOM element that scrolls the content
+     * @public
+     */
+    scrollContainer: HTMLDivElement;
+    /**
+     * Reference to DOM element that holds the slotted content
+     * @public
+     */
+    content: HTMLDivElement;
+    /**
+     * Reference to flipper to scroll to previous content
+     * @public
+     */
+    previousFlipperContainer: HTMLDivElement;
+    /**
+     * Reference to flipper to scroll to the next content
+     * @public
+     */
+    nextFlipperContainer: HTMLDivElement;
+    /**
+     * @internal
+     */
+    private framesPerSecond;
+    /**
+     * The calculated duration for a frame.
+     *
+     * @internal
+     */
+    private get frameTime();
+    /**
+     * The timeout identifier for the scroll event throttling.
+     *
+     * @internal
+     */
+    private resizeTimeout?;
+    /**
+     * The timeout identifier for the scroll event throttling.
+     *
+     * @internal
+     */
+    private scrollTimeout?;
+    /**
+     * Flag indicating that the items are being updated
+     *
+     * @internal
+     */
+    private updatingItems;
+    /**
+     * Speed of scroll in pixels per second
+     * @public
+     */
+    speed: number;
+    /**
+     * The CSS time value for the scroll transition duration. Overrides the `speed` attribute.
+     *
+     * @remarks
+     * When `duration` is set, the `speed` attribute has no effect.
+     *
+     * @public
+     */
+    duration: string;
+    /**
+     * Attribute used for easing, defaults to ease-in-out
+     * @public
+     */
+    easing: ScrollEasing;
+    /**
+     * Attribute to hide flippers from assistive technology
+     * @public
+     */
+    flippersHiddenFromAT: boolean;
+    /**
+     * Scrolling state
+     * @internal
+     */
+    private scrolling;
+    /**
+     * Firing scrollstart and scrollend events
+     * @internal
+     */
+    scrollingChanged(prev: unknown, next: boolean): void;
+    /**
+     * Detects if the component has been resized
+     * @internal
+     */
+    private resizeDetector;
+    /**
+     * Width of the parent container
+     * @internal
+     */
+    private width;
+    /**
+     * Scroll stop positions between elements
+     * @internal
+     */
+    private scrollStops;
+    /**
+     * The default slotted items placed in the scrolling container.
+     *
+     * @public
+     */
+    scrollItems: HTMLElement[];
+    /**
+     * In RTL mode
+     * @internal
+     */
+    private get isRtl();
+    /**
+     * View: default | mobile
+     * @public
+     */
+    view: HorizontalScrollView;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Updates scroll stops and flippers when scroll items change
+     * @param previous - current scroll items
+     * @param next - new updated scroll items
+     * @public
+     */
+    scrollItemsChanged(previous: HTMLElement[], next: HTMLElement[]): void;
+    /**
+     * destroys the instance's resize observer
+     * @internal
+     */
+    private disconnectResizeDetector;
+    /**
+     * initializes the instance's resize observer
+     * @internal
+     */
+    private initializeResizeDetector;
+    /**
+     * Looks for slots and uses child nodes instead
+     * @internal
+     */
+    private updateScrollStops;
+    /**
+     * Finds all of the scroll stops between elements
+     * @internal
+     */
+    private setStops;
+    /**
+     * Checks to see if the stops are returning values
+     *  otherwise it will try to reinitialize them
+     *
+     * @returns boolean indicating that current scrollStops are valid non-zero values
+     * @internal
+     */
+    private validateStops;
+    /**
+     *
+     */
+    private fixScrollMisalign;
+    /**
+     * Sets the controls view if enabled
+     * @internal
+     */
+    private setFlippers;
+    /**
+     * Function that can scroll an item into view.
+     * @param item - An item index, a scroll item or a child of one of the scroll items
+     * @param padding - Padding of the viewport where the active item shouldn't be
+     * @param rightPadding - Optional right padding. Uses the padding if not defined
+     *
+     * @public
+     */
+    scrollInView(item: HTMLElement | number, padding?: number, rightPadding?: number): void;
+    /**
+     * Lets the user arrow left and right through the horizontal scroll
+     * @param e - Keyboard event
+     * @public
+     */
+    keyupHandler(e: Event & KeyboardEvent): void;
+    /**
+     * Scrolls items to the left
+     * @public
+     */
+    scrollToPrevious(): void;
+    /**
+     * Scrolls items to the right
+     * @public
+     */
+    scrollToNext(): void;
+    /**
+     * Handles scrolling with easing
+     * @param position - starting position
+     * @param newPosition - position to scroll to
+     * @public
+     */
+    scrollToPosition(newPosition: number, position?: number): void;
+    /**
+     * Monitors resize event on the horizontal-scroll element
+     * @public
+     */
+    resized(): void;
+    /**
+     * Monitors scrolled event on the content container
+     * @public
+     */
+    scrolled(): void;
+}

package/dist/dts/horizontal-scroll/horizontal-scroll.template.d.ts

@@ -0,0 +1,7 @@
+import { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { HorizontalScroll, HorizontalScrollOptions } from "./horizontal-scroll.js";
+/**
+ * @public
+ */
+export declare const horizontalScrollTemplate: FoundationElementTemplate<ViewTemplate<HorizontalScroll>, HorizontalScrollOptions>;

package/dist/dts/horizontal-scroll/index.d.ts

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

package/dist/dts/index-rollup.d.ts

@@ -0,0 +1,2 @@
+export * from "./index.js";
+export * from "@ni/fast-element";

package/dist/dts/index.d.ts

@@ -0,0 +1,53 @@
+export * from "./accordion-item/index.js";
+export * from "./accordion/index.js";
+export * from "./anchor/index.js";
+export * from "./anchored-region/index.js";
+export * from "./avatar/index.js";
+export * from "./badge/index.js";
+export * from "./breadcrumb-item/index.js";
+export * from "./breadcrumb/index.js";
+export * from "./button/index.js";
+export * from "./calendar/index.js";
+export * from "./card/index.js";
+export * from "./checkbox/index.js";
+export * from "./combobox/index.js";
+export * from "./data-grid/index.js";
+export * from "./design-system/index.js";
+export { DesignToken, CSSDesignToken, DesignTokenChangeRecord, DesignTokenSubscriber, } from "./design-token/design-token.js";
+export { StaticDesignTokenValue, DerivedDesignTokenValue, DesignTokenValue, DesignTokenConfiguration, } from "./design-token/interfaces.js";
+export * from "./di/index.js";
+export * from "./dialog/index.js";
+export { reflectAttributes } from "./directives/reflect-attributes.js";
+export * from "./disclosure/index.js";
+export * from "./divider/index.js";
+export * from "./flipper/index.js";
+export * from "./form-associated/index.js";
+export * from "./foundation-element/index.js";
+export * from "./listbox-option/index.js";
+export * from "./listbox/index.js";
+export * from "./picker/index.js";
+export * from "./menu-item/index.js";
+export * from "./menu/index.js";
+export * from "./number-field/index.js";
+export * from "./patterns/index.js";
+export * from "./progress-ring/index.js";
+export * from "./progress/index.js";
+export * from "./radio-group/index.js";
+export * from "./radio/index.js";
+export * from "./horizontal-scroll/index.js";
+export * from "./search/index.js";
+export * from "./select/index.js";
+export * from "./skeleton/index.js";
+export * from "./slider-label/index.js";
+export * from "./slider/index.js";
+export * from "./switch/index.js";
+export * from "./tab-panel/index.js";
+export * from "./tab/index.js";
+export * from "./tabs/index.js";
+export * from "./text-area/index.js";
+export * from "./text-field/index.js";
+export * from "./toolbar/index.js";
+export * from "./tooltip/index.js";
+export * from "./tree-item/index.js";
+export * from "./tree-view/index.js";
+export * from "./utilities/index.js";

package/dist/dts/interfaces.d.ts

@@ -0,0 +1,4 @@
+export type Class<T, C = {}> = C & {
+    readonly prototype: T;
+    new (...args: any[]): T;
+};

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

@@ -0,0 +1,3 @@
+export * from "./listbox.js";
+export * from "./listbox.element.js";
+export * from "./listbox.template.js";