@ni/fast-foundation 0.0.2

package/dist/dts/button/button.d.ts

@@ -0,0 +1,167 @@
+import { ARIAGlobalStatesAndProperties, StartEnd, StartEndOptions } from "../patterns/index.js";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FormAssociatedButton } from "./button.form-associated.js";
+/**
+ * Button configuration options
+ * @public
+ */
+export type ButtonOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
+ * @public
+ */
+export declare class Button extends FormAssociatedButton {
+    /**
+     * Determines if the element should receive document focus on page load.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    /**
+     * The id of a form to associate the element to.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: form
+     */
+    formId: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formaction
+     */
+    formaction: string;
+    private formactionChanged;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formenctype
+     */
+    formenctype: string;
+    private formenctypeChanged;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formmethod
+     */
+    formmethod: string;
+    private formmethodChanged;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formnovalidate
+     */
+    formnovalidate: boolean;
+    private formnovalidateChanged;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formtarget
+     */
+    formtarget: "_self" | "_blank" | "_parent" | "_top";
+    private formtargetChanged;
+    /**
+     * The button type.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: "submit" | "reset" | "button";
+    private typeChanged;
+    /**
+     *
+     * Default slotted content
+     *
+     * @public
+     * @remarks
+     */
+    defaultSlottedContent: HTMLElement[];
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
+     * @internal
+     */
+    private handleClick;
+    /**
+     * Submits the parent form
+     */
+    private handleSubmission;
+    /**
+     * Resets the parent form
+     */
+    private handleFormReset;
+    control: HTMLButtonElement;
+    /**
+     * Overrides the focus call for where delegatesFocus is unsupported.
+     * This check works for Chrome, Edge Chromium, FireFox, and Safari
+     * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+     */
+    private handleUnsupportedDelegatesFocus;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+export declare class DelegatesARIAButton {
+    /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: aria-expanded
+     */
+    ariaExpanded: "true" | "false" | string | null;
+    /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: aria-pressed
+     */
+    ariaPressed: "true" | "false" | "mixed" | string | null;
+}
+/**
+ * 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 DelegatesARIAButton 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 Button extends StartEnd, DelegatesARIAButton {
+}

package/dist/dts/button/button.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 _Button extends FoundationElement {
+}
+interface _Button extends FormAssociated {
+}
+declare const FormAssociatedButton_base: typeof _Button;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Button:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedButton extends FormAssociatedButton_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/dist/dts/button/button.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 { Button, ButtonOptions } from "./button.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Button:class)} component.
+ * @public
+ */
+export declare const buttonTemplate: FoundationElementTemplate<ViewTemplate<Button>, ButtonOptions>;

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

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

package/dist/dts/calendar/calendar.d.ts

@@ -0,0 +1,178 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import type { FoundationElementDefinition, FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { DayFormat, MonthFormat, WeekdayFormat, YearFormat } from "./date-formatter.js";
+import { DateFormatter } from "./date-formatter.js";
+/**
+ * Information about a month
+ * @public
+ */
+export type MonthInfo = {
+    month: number;
+    year: number;
+    length: number;
+    start: number;
+};
+/**
+ * Calendar information needed for rendering
+ * including the next and previous months
+ * @public
+ */
+export type CalendarInfo = MonthInfo & {
+    previous: MonthInfo;
+    next: MonthInfo;
+};
+/**
+ * Caldendar date info
+ * used to represent a date
+ * @public
+ */
+export type CalendarDateInfo = {
+    day: number;
+    month: number;
+    year: number;
+    disabled?: boolean;
+    selected?: boolean;
+};
+/**
+ * Calendar configuration options
+ * @public
+ */
+export type CalendarOptions = FoundationElementDefinition & StartEndOptions & {
+    title?: FoundationElementTemplate<SyntheticViewTemplate<any, Calendar>, CalendarOptions> | SyntheticViewTemplate | string;
+};
+/**
+ * Calendar component
+ *
+ * @slot - The default slot for calendar content
+ * @fires dateselected - Fires a custom 'dateselected' event when Enter is invoked via keyboard on a date
+ *
+ * @public
+ */
+export declare class Calendar extends FoundationElement {
+    /**
+     * date formatter utitlity for getting localized strings
+     * @public
+     */
+    dateFormatter: DateFormatter;
+    /**
+     * Readonly attribute for turning off data-grid
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * String repesentation of the full locale including market, calendar type and numbering system
+     * @public
+     */
+    locale: string;
+    private localeChanged;
+    /**
+     * Month to display
+     * @public
+     */
+    month: number;
+    /**
+     * Year of the month to display
+     * @public
+     */
+    year: number;
+    /**
+     * Format style for the day
+     * @public
+     */
+    dayFormat: DayFormat;
+    private dayFormatChanged;
+    /**
+     * Format style for the week day labels
+     * @public
+     */
+    weekdayFormat: WeekdayFormat;
+    private weekdayFormatChanged;
+    /**
+     * Format style for the month label
+     * @public
+     */
+    monthFormat: MonthFormat;
+    private monthFormatChanged;
+    /**
+     * Format style for the year used in the title
+     * @public
+     */
+    yearFormat: YearFormat;
+    private yearFormatChanged;
+    /**
+     * Minimum number of weeks to show for the month
+     * This can be used to normalize the calendar view
+     *  when changing or across multiple calendars
+     * @public
+     */
+    minWeeks: number;
+    /**
+     * A list of dates that should be shown as disabled
+     * @public
+     */
+    disabledDates: string;
+    /**
+     * A list of dates that should be shown as highlighted
+     * @public
+     */
+    selectedDates: string;
+    /**
+     * The number of miliseconds in a day
+     * @internal
+     */
+    private oneDayInMs;
+    /**
+     * Gets data needed to render about a calendar month as well as the previous and next months
+     * @param year - year of the calendar
+     * @param month - month of the calendar
+     * @returns - an object with data about the current and 2 surrounding months
+     * @public
+     */
+    getMonthInfo(month?: number, year?: number): CalendarInfo;
+    /**
+     * A list of calendar days
+     * @param info - an object containing the information needed to render a calendar month
+     * @param minWeeks - minimum number of weeks to show
+     * @returns a list of days in a calendar month
+     * @public
+     */
+    getDays(info?: CalendarInfo, minWeeks?: number): CalendarDateInfo[][];
+    /**
+     * A helper function that checks if a date exists in a list of dates
+     * @param date - A date objec that includes the day, month and year
+     * @param datesString - a comma separated list of dates
+     * @returns - Returns true if it found the date in the list of dates
+     * @public
+     */
+    dateInString(date: Date | string, datesString: string): boolean;
+    /**
+     * Creates a class string for the day container
+     * @param date - date of the calendar cell
+     * @returns - string of class names
+     * @public
+     */
+    getDayClassNames(date: CalendarDateInfo, todayString?: string): string;
+    /**
+     * Returns a list of weekday labels
+     * @returns An array of weekday text and full text if abbreviated
+     * @public
+     */
+    getWeekdayText(): {
+        text: string;
+        abbr?: string;
+    }[];
+    /**
+     * Emits the "date-select" event with the day, month and year.
+     * @param date - Date cell
+     * @public
+     */
+    handleDateSelect(event: Event, day: CalendarDateInfo): void;
+    /**
+     * Handles keyboard events on a cell
+     * @param event - Keyboard event
+     * @param date - Date of the cell selected
+     */
+    handleKeydown(event: KeyboardEvent, date: CalendarDateInfo): boolean;
+}

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

@@ -0,0 +1,58 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { ElementDefinitionContext } from "../design-system/registration-context.js";
+import type { Calendar, CalendarDateInfo, CalendarOptions } from "./calendar.js";
+/**
+ * A basic Calendar title template that includes the month and year
+ * @returns - A calendar title template
+ * @public
+ */
+export declare const CalendarTitleTemplate: ViewTemplate<Calendar>;
+/**
+ * Calendar weekday label template
+ * @returns - The weekday labels template
+ * @public
+ */
+export declare const calendarWeekdayTemplate: (context: ElementDefinitionContext) => ViewTemplate;
+/**
+ * A calendar day template
+ * @param context - Element definition context for getting the cell tag for calendar-cell
+ * @param todayString - A string representation for todays date
+ * @returns - A calendar cell template for a given date
+ * @public
+ */
+export declare const calendarCellTemplate: (context: ElementDefinitionContext, todayString: string) => ViewTemplate<CalendarDateInfo>;
+/**
+ *
+ * @param context - Element definition context for getting the cell tag for calendar-cell
+ * @param todayString - A string representation for todays date
+ * @returns - A template for a week of days
+ * @public
+ */
+export declare const calendarRowTemplate: (context: ElementDefinitionContext, todayString: string) => ViewTemplate;
+/**
+ * Interactive template using DataGrid
+ * @param context - The templates context
+ * @param todayString - string representation of todays date
+ * @returns - interactive calendar template
+ *
+ * @internal
+ */
+export declare const interactiveCalendarGridTemplate: (context: ElementDefinitionContext, todayString: string) => ViewTemplate;
+/**
+ * Non-interactive calendar template used for a readonly calendar
+ * @param todayString - string representation of todays date
+ * @returns - non-interactive calendar template
+ *
+ * @internal
+ */
+export declare const noninteractiveCalendarTemplate: (todayString: string) => ViewTemplate;
+/**
+ * The template for the {@link @ni/fast-foundation#(Calendar:class)} component.
+ *
+ * @param context - Element definition context for getting the cell tag for calendar-cell
+ * @param definition - Foundation element definition
+ * @returns - a template for a calendar month
+ * @public
+ */
+export declare const calendarTemplate: FoundationElementTemplate<ViewTemplate<Calendar>, CalendarOptions>;

package/dist/dts/calendar/date-formatter.d.ts

@@ -0,0 +1,124 @@
+/**
+ * A type representing the different day formats
+ * @public
+ */
+export type DayFormat = "2-digit" | "numeric";
+/**
+ * A type representing the different weekday formats
+ * @public
+ */
+export type WeekdayFormat = "long" | "narrow" | "short";
+/**
+ * A type representing the different month formats
+ * @public
+ */
+export type MonthFormat = "2-digit" | "long" | "narrow" | "numeric" | "short";
+/**
+ * A type representing the different year formats
+ * @public
+ */
+export type YearFormat = "2-digit" | "numeric";
+/**
+ * Date formatting utility
+ * @public
+ */
+export declare class DateFormatter {
+    /**
+     * Localization settings to use for formatting
+     * @public
+     */
+    locale: string;
+    /**
+     * Formatting for the day
+     * @public
+     */
+    dayFormat: DayFormat;
+    /**
+     * Formatting for the weekday labels
+     * @public
+     */
+    weekdayFormat: WeekdayFormat;
+    /**
+     * Formatting for the month
+     * @public
+     */
+    monthFormat: MonthFormat;
+    /**
+     * Formatting for the year
+     * @public
+     */
+    yearFormat: YearFormat;
+    /**
+     * Date used for formatting
+     */
+    date: Date;
+    constructor(config?: {});
+    /**
+     * Helper function to make sure that the DateFormatter is working with an instance of Date
+     * @param date - The date as an object, string or Date insance
+     * @returns - A Date instance
+     * @public
+     */
+    getDateObject(date: {
+        day: number;
+        month: number;
+        year: number;
+    } | string | Date): Date;
+    /**
+     *
+     * @param date - a valide date as either a Date, string, objec or a DateFormatter
+     * @param format - The formatting for the string
+     * @param locale - locale data used for formatting
+     * @returns A localized string of the date provided
+     * @public
+     */
+    getDate(date?: {
+        day: number;
+        month: number;
+        year: number;
+    } | string | Date, format?: Intl.DateTimeFormatOptions, locale?: string): string;
+    /**
+     *
+     * @param day - Day to localize
+     * @param format - The formatting for the day
+     * @param locale - The locale data used for formatting
+     * @returns - A localized number for the day
+     * @public
+     */
+    getDay(day?: number, format?: DayFormat, locale?: string): string;
+    /**
+     *
+     * @param month - The month to localize
+     * @param format - The formatting for the month
+     * @param locale - The locale data used for formatting
+     * @returns - A localized name of the month
+     * @public
+     */
+    getMonth(month?: number, format?: MonthFormat, locale?: string): string;
+    /**
+     *
+     * @param year - The year to localize
+     * @param format - The formatting for the year
+     * @param locale - The locale data used for formatting
+     * @returns - A localized string for the year
+     * @public
+     */
+    getYear(year?: number, format?: YearFormat, locale?: string): string;
+    /**
+     *
+     * @param weekday - The number of the weekday, defaults to Sunday
+     * @param format - The formatting for the weekday label
+     * @param locale - The locale data used for formatting
+     * @returns - A formatted weekday label
+     * @public
+     */
+    getWeekday(weekday?: number, format?: WeekdayFormat, locale?: string): string;
+    /**
+     *
+     * @param format - The formatting for the weekdays
+     * @param locale - The locale data used for formatting
+     * @returns - An array of the weekday labels
+     * @public
+     */
+    getWeekdays(format?: WeekdayFormat, locale?: string): string[];
+}

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

@@ -0,0 +1,3 @@
+export * from "./calendar.js";
+export * from "./calendar.template.js";
+export * from "./date-formatter.js";

package/dist/dts/card/card.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * An Card Custom HTML Element.
+ *
+ * @slot - The default slot for the card content
+ *
+ * @public
+ */
+export declare class Card extends FoundationElement {
+}

package/dist/dts/card/card.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 { Card } from "./card.js";
+/**
+ * The template for the {@link @ni/fast-foundation#Card} component.
+ * @public
+ */
+export declare const cardTemplate: FoundationElementTemplate<ViewTemplate<Card>>;

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

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

package/dist/dts/checkbox/checkbox.d.ts

@@ -0,0 +1,58 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FormAssociatedCheckbox } from "./checkbox.form-associated.js";
+/**
+ * Checkbox configuration options
+ * @public
+ */
+export type CheckboxOptions = FoundationElementDefinition & {
+    checkedIndicator?: string | SyntheticViewTemplate;
+    indeterminateIndicator?: string | SyntheticViewTemplate;
+};
+/**
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual checkbox control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export declare class Checkbox extends FormAssociatedCheckbox {
+    /**
+     * 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 element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * The indeterminate state of the control
+     */
+    indeterminate: boolean;
+    constructor();
+    /**
+     * @internal
+     */
+    keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void;
+}

package/dist/dts/checkbox/checkbox.form-associated.d.ts

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

package/dist/dts/checkbox/checkbox.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 { Checkbox, CheckboxOptions } from "./checkbox.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Checkbox:class)} component.
+ * @public
+ */
+export declare const checkboxTemplate: FoundationElementTemplate<ViewTemplate<Checkbox>, CheckboxOptions>;

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

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