@ni/fast-foundation 0.0.2

package/dist/esm/calendar/calendar.js

@@ -0,0 +1,280 @@
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, } from "@ni/fast-element";
+import { keyEnter } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { DateFormatter } from "./date-formatter.js";
+/**
+ * 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 class Calendar extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * date formatter utitlity for getting localized strings
+         * @public
+         */
+        this.dateFormatter = new DateFormatter();
+        /**
+         * Readonly attribute for turning off data-grid
+         * @public
+         */
+        this.readonly = false;
+        /**
+         * String repesentation of the full locale including market, calendar type and numbering system
+         * @public
+         */
+        this.locale = "en-US";
+        /**
+         * Month to display
+         * @public
+         */
+        this.month = new Date().getMonth() + 1;
+        /**
+         * Year of the month to display
+         * @public
+         */
+        this.year = new Date().getFullYear();
+        /**
+         * Format style for the day
+         * @public
+         */
+        this.dayFormat = "numeric";
+        /**
+         * Format style for the week day labels
+         * @public
+         */
+        this.weekdayFormat = "short";
+        /**
+         * Format style for the month label
+         * @public
+         */
+        this.monthFormat = "long";
+        /**
+         * Format style for the year used in the title
+         * @public
+         */
+        this.yearFormat = "numeric";
+        /**
+         * 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
+         */
+        this.minWeeks = 0;
+        /**
+         * A list of dates that should be shown as disabled
+         * @public
+         */
+        this.disabledDates = "";
+        /**
+         * A list of dates that should be shown as highlighted
+         * @public
+         */
+        this.selectedDates = "";
+        /**
+         * The number of miliseconds in a day
+         * @internal
+         */
+        this.oneDayInMs = 86400000;
+    }
+    localeChanged() {
+        this.dateFormatter.locale = this.locale;
+    }
+    dayFormatChanged() {
+        this.dateFormatter.dayFormat = this.dayFormat;
+    }
+    weekdayFormatChanged() {
+        this.dateFormatter.weekdayFormat = this.weekdayFormat;
+    }
+    monthFormatChanged() {
+        this.dateFormatter.monthFormat = this.monthFormat;
+    }
+    yearFormatChanged() {
+        this.dateFormatter.yearFormat = this.yearFormat;
+    }
+    /**
+     * 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 = this.month, year = this.year) {
+        const getFirstDay = (date) => new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+        const getLength = (date) => {
+            const nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+            return new Date(nextMonth.getTime() - this.oneDayInMs).getDate();
+        };
+        const thisMonth = new Date(year, month - 1);
+        const nextMonth = new Date(year, month);
+        const previousMonth = new Date(year, month - 2);
+        return {
+            length: getLength(thisMonth),
+            month,
+            start: getFirstDay(thisMonth),
+            year,
+            previous: {
+                length: getLength(previousMonth),
+                month: previousMonth.getMonth() + 1,
+                start: getFirstDay(previousMonth),
+                year: previousMonth.getFullYear(),
+            },
+            next: {
+                length: getLength(nextMonth),
+                month: nextMonth.getMonth() + 1,
+                start: getFirstDay(nextMonth),
+                year: nextMonth.getFullYear(),
+            },
+        };
+    }
+    /**
+     * 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 = this.getMonthInfo(), minWeeks = this.minWeeks) {
+        minWeeks = minWeeks > 10 ? 10 : minWeeks;
+        const { start, length, previous, next } = info;
+        const days = [];
+        let dayCount = 1 - start;
+        while (dayCount < length + 1 ||
+            days.length < minWeeks ||
+            days[days.length - 1].length % 7 !== 0) {
+            const { month, year } = dayCount < 1 ? previous : dayCount > length ? next : info;
+            const day = dayCount < 1
+                ? previous.length + dayCount
+                : dayCount > length
+                    ? dayCount - length
+                    : dayCount;
+            const dateString = `${month}-${day}-${year}`;
+            const disabled = this.dateInString(dateString, this.disabledDates);
+            const selected = this.dateInString(dateString, this.selectedDates);
+            const date = {
+                day,
+                month,
+                year,
+                disabled,
+                selected,
+            };
+            const target = days[days.length - 1];
+            if (days.length === 0 || target.length % 7 === 0) {
+                days.push([date]);
+            }
+            else {
+                target.push(date);
+            }
+            dayCount++;
+        }
+        return days;
+    }
+    /**
+     * 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, datesString) {
+        const dates = datesString.split(",").map(str => str.trim());
+        date =
+            typeof date === "string"
+                ? date
+                : `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
+        return dates.some(d => d === date);
+    }
+    /**
+     * Creates a class string for the day container
+     * @param date - date of the calendar cell
+     * @returns - string of class names
+     * @public
+     */
+    getDayClassNames(date, todayString) {
+        const { day, month, year, disabled, selected } = date;
+        const today = todayString === `${month}-${day}-${year}`;
+        const inactive = this.month !== month;
+        return [
+            "day",
+            today && "today",
+            inactive && "inactive",
+            disabled && "disabled",
+            selected && "selected",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    /**
+     * Returns a list of weekday labels
+     * @returns An array of weekday text and full text if abbreviated
+     * @public
+     */
+    getWeekdayText() {
+        const weekdayText = this.dateFormatter.getWeekdays().map(text => ({ text }));
+        if (this.weekdayFormat !== "long") {
+            const longText = this.dateFormatter.getWeekdays("long");
+            weekdayText.forEach((weekday, index) => {
+                weekday.abbr = longText[index];
+            });
+        }
+        return weekdayText;
+    }
+    /**
+     * Emits the "date-select" event with the day, month and year.
+     * @param date - Date cell
+     * @public
+     */
+    handleDateSelect(event, day) {
+        event.preventDefault;
+        this.$emit("dateselected", day);
+    }
+    /**
+     * Handles keyboard events on a cell
+     * @param event - Keyboard event
+     * @param date - Date of the cell selected
+     */
+    handleKeydown(event, date) {
+        if (event.key === keyEnter) {
+            this.handleDateSelect(event, date);
+        }
+        return true;
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Calendar.prototype, "readonly", void 0);
+__decorate([
+    attr
+], Calendar.prototype, "locale", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Calendar.prototype, "month", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Calendar.prototype, "year", void 0);
+__decorate([
+    attr({ attribute: "day-format", mode: "fromView" })
+], Calendar.prototype, "dayFormat", void 0);
+__decorate([
+    attr({ attribute: "weekday-format", mode: "fromView" })
+], Calendar.prototype, "weekdayFormat", void 0);
+__decorate([
+    attr({ attribute: "month-format", mode: "fromView" })
+], Calendar.prototype, "monthFormat", void 0);
+__decorate([
+    attr({ attribute: "year-format", mode: "fromView" })
+], Calendar.prototype, "yearFormat", void 0);
+__decorate([
+    attr({ attribute: "min-weeks", converter: nullableNumberConverter })
+], Calendar.prototype, "minWeeks", void 0);
+__decorate([
+    attr({ attribute: "disabled-dates" })
+], Calendar.prototype, "disabledDates", void 0);
+__decorate([
+    attr({ attribute: "selected-dates" })
+], Calendar.prototype, "selectedDates", void 0);

package/dist/esm/calendar/calendar.template.js

@@ -0,0 +1,191 @@
+import { html, repeat, when } from "@ni/fast-element";
+import { endTemplate, startTemplate } from "../patterns/start-end.js";
+import { DataGrid, DataGridCell, DataGridRow } from "../data-grid/index.js";
+/**
+ * A basic Calendar title template that includes the month and year
+ * @returns - A calendar title template
+ * @public
+ */
+export const CalendarTitleTemplate = html `
+    <div
+        class="title"
+        part="title"
+        aria-label="${(x) => x.dateFormatter.getDate(`${x.month}-2-${x.year}`, {
+    month: "long",
+    year: "numeric",
+})}"
+    >
+        <span part="month">
+            ${(x) => x.dateFormatter.getMonth(x.month)}
+        </span>
+        <span part="year">${(x) => x.dateFormatter.getYear(x.year)}</span>
+    </div>
+`;
+/**
+ * Calendar weekday label template
+ * @returns - The weekday labels template
+ * @public
+ */
+export const calendarWeekdayTemplate = context => {
+    const cellTag = context.tagFor(DataGridCell);
+    return html `
+        <${cellTag}
+            class="week-day"
+            part="week-day"
+            tabindex="-1"
+            grid-column="${(x, c) => c.index + 1}"
+            abbr="${x => x.abbr}"
+        >
+            ${x => x.text}
+        </${cellTag}>
+    `;
+};
+/**
+ * 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 const calendarCellTemplate = (context, todayString) => {
+    const cellTag = context.tagFor(DataGridCell);
+    return html `
+        <${cellTag}
+            class="${(x, c) => c.parentContext.parent.getDayClassNames(x, todayString)}"
+            part="day"
+            tabindex="-1"
+            role="gridcell"
+            grid-column="${(x, c) => c.index + 1}"
+            @click="${(x, c) => c.parentContext.parent.handleDateSelect(c.event, x)}"
+            @keydown="${(x, c) => c.parentContext.parent.handleKeydown(c.event, x)}"
+            aria-label="${(x, c) => c.parentContext.parent.dateFormatter.getDate(`${x.month}-${x.day}-${x.year}`, { month: "long", day: "numeric" })}"
+        >
+            <div
+                class="date"
+                part="${x => todayString === `${x.month}-${x.day}-${x.year}` ? "today" : "date"}"
+            >
+                ${(x, c) => c.parentContext.parent.dateFormatter.getDay(x.day)}
+            </div>
+            <slot name="${x => x.month}-${x => x.day}-${x => x.year}"></slot>
+        </${cellTag}>
+    `;
+};
+/**
+ *
+ * @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 const calendarRowTemplate = (context, todayString) => {
+    const rowTag = context.tagFor(DataGridRow);
+    return html `
+        <${rowTag}
+            class="week"
+            part="week"
+            role="row"
+            role-type="default"
+            grid-template-columns="1fr 1fr 1fr 1fr 1fr 1fr 1fr"
+        >
+        ${repeat(x => x, calendarCellTemplate(context, todayString), {
+        positioning: true,
+    })}
+        </${rowTag}>
+    `;
+};
+/**
+ * Interactive template using DataGrid
+ * @param context - The templates context
+ * @param todayString - string representation of todays date
+ * @returns - interactive calendar template
+ *
+ * @internal
+ */
+export const interactiveCalendarGridTemplate = (context, todayString) => {
+    const gridTag = context.tagFor(DataGrid);
+    const rowTag = context.tagFor(DataGridRow);
+    return html `
+    <${gridTag} class="days interact" part="days" generate-header="none">
+        <${rowTag}
+            class="week-days"
+            part="week-days"
+            role="row"
+            row-type="header"
+            grid-template-columns="1fr 1fr 1fr 1fr 1fr 1fr 1fr"
+        >
+            ${repeat(x => x.getWeekdayText(), calendarWeekdayTemplate(context), {
+        positioning: true,
+    })}
+        </${rowTag}>
+        ${repeat(x => x.getDays(), calendarRowTemplate(context, todayString))}
+    </${gridTag}>
+`;
+};
+/**
+ * Non-interactive calendar template used for a readonly calendar
+ * @param todayString - string representation of todays date
+ * @returns - non-interactive calendar template
+ *
+ * @internal
+ */
+export const noninteractiveCalendarTemplate = (todayString) => {
+    return html `
+        <div class="days" part="days">
+            <div class="week-days" part="week-days">
+                ${repeat(x => x.getWeekdayText(), html `
+                        <div class="week-day" part="week-day" abbr="${x => x.abbr}">
+                            ${x => x.text}
+                        </div>
+                    `)}
+            </div>
+            ${repeat(x => x.getDays(), html `
+                    <div class="week">
+                        ${repeat(x => x, html `
+                                <div
+                                    class="${(x, c) => c.parentContext.parent.getDayClassNames(x, todayString)}"
+                                    part="day"
+                                    aria-label="${(x, c) => c.parentContext.parent.dateFormatter.getDate(`${x.month}-${x.day}-${x.year}`, { month: "long", day: "numeric" })}"
+                                >
+                                    <div
+                                        class="date"
+                                        part="${x => todayString ===
+        `${x.month}-${x.day}-${x.year}`
+        ? "today"
+        : "date"}"
+                                    >
+                                        ${(x, c) => c.parentContext.parent.dateFormatter.getDay(x.day)}
+                                    </div>
+                                    <slot
+                                        name="${x => x.month}-${x => x.day}-${x => x.year}"
+                                    ></slot>
+                                </div>
+                            `)}
+                    </div>
+                `)}
+        </div>
+    `;
+};
+/**
+ * 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 const calendarTemplate = (context, definition) => {
+    var _a;
+    const today = new Date();
+    const todayString = `${today.getMonth() + 1}-${today.getDate()}-${today.getFullYear()}`;
+    return html `
+        <template>
+            ${startTemplate}
+            ${definition.title instanceof Function
+        ? definition.title(context, definition)
+        : (_a = definition.title) !== null && _a !== void 0 ? _a : ""}
+            <slot></slot>
+            ${when(x => x.readonly, noninteractiveCalendarTemplate(todayString), interactiveCalendarGridTemplate(context, todayString))}
+            ${endTemplate}
+        </template>
+    `;
+};

package/dist/esm/calendar/date-formatter.js

@@ -0,0 +1,144 @@
+/**
+ * Date formatting utility
+ * @public
+ */
+export class DateFormatter {
+    constructor(config) {
+        /**
+         * Formatting for the day
+         * @public
+         */
+        this.dayFormat = "numeric";
+        /**
+         * Formatting for the weekday labels
+         * @public
+         */
+        this.weekdayFormat = "long";
+        /**
+         * Formatting for the month
+         * @public
+         */
+        this.monthFormat = "long";
+        /**
+         * Formatting for the year
+         * @public
+         */
+        this.yearFormat = "numeric";
+        /**
+         * Date used for formatting
+         */
+        this.date = new Date();
+        /**
+         * Add properties on construction
+         */
+        if (config) {
+            for (const key in config) {
+                const value = config[key];
+                if (key === "date") {
+                    this.date = this.getDateObject(value);
+                }
+                else {
+                    this[key] = value;
+                }
+            }
+        }
+    }
+    /**
+     * 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) {
+        if (typeof date === "string") {
+            const dates = date.split(/[/-]/);
+            if (dates.length < 3) {
+                return new Date();
+            }
+            return new Date(parseInt(dates[2], 10), parseInt(dates[0], 10) - 1, parseInt(dates[1], 10));
+        }
+        else if ("day" in date && "month" in date && "year" in date) {
+            const { day, month, year } = date;
+            return new Date(year, month - 1, day);
+        }
+        return 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 = this.date, format = {
+        weekday: this.weekdayFormat,
+        month: this.monthFormat,
+        day: this.dayFormat,
+        year: this.yearFormat,
+    }, locale = this.locale) {
+        const dateObj = this.getDateObject(date);
+        if (!dateObj.getTime()) {
+            return "";
+        }
+        const optionsWithTimeZone = Object.assign({ timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }, format);
+        return new Intl.DateTimeFormat(locale, optionsWithTimeZone).format(dateObj);
+    }
+    /**
+     *
+     * @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 = this.date.getDate(), format = this.dayFormat, locale = this.locale) {
+        return this.getDate({ month: 1, day, year: 2020 }, { day: format }, locale);
+    }
+    /**
+     *
+     * @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 = this.date.getMonth() + 1, format = this.monthFormat, locale = this.locale) {
+        return this.getDate({ month, day: 2, year: 2020 }, { month: format }, locale);
+    }
+    /**
+     *
+     * @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 = this.date.getFullYear(), format = this.yearFormat, locale = this.locale) {
+        return this.getDate({ month: 2, day: 2, year }, { year: format }, locale);
+    }
+    /**
+     *
+     * @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 = 0, format = this.weekdayFormat, locale = this.locale) {
+        const date = `1-${weekday + 1}-2017`;
+        return this.getDate(date, { weekday: format }, locale);
+    }
+    /**
+     *
+     * @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 = this.weekdayFormat, locale = this.locale) {
+        return Array(7)
+            .fill(null)
+            .map((_, day) => this.getWeekday(day, format, locale));
+    }
+}

package/dist/esm/calendar/index.js

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

package/dist/esm/card/card.js

@@ -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 class Card extends FoundationElement {
+}

package/dist/esm/card/card.template.js

@@ -0,0 +1,8 @@
+import { html } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Card} component.
+ * @public
+ */
+export const cardTemplate = (context, definition) => html `
+    <slot></slot>
+`;

package/dist/esm/card/index.js

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

package/dist/esm/checkbox/checkbox.form-associated.js

@@ -0,0 +1,15 @@
+import { CheckableFormAssociated } from "../form-associated/form-associated.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+class _Checkbox extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Checkbox:class)} component.
+ *
+ * @internal
+ */
+export class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}