@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.2

package/components/datepicker/demo/keyboardBehavior.md

@@ -0,0 +1,19 @@
+<auro-header level="1" id="overview">Datepicker - Keyboard Behavior</auro-header>
+<div class="contentWrapper">
+  <div class="mainContent">
+    <div class="scrollWrapper">
+      <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+      <p>The component trigger contains <code>&lt;auro-input&gt;</code> element(s) which each have two focusable elements:</p>
+      <ol>
+        <li><strong>Input</strong></li>
+        <li><strong>Clear button:</strong> only shown when the input has a value.</li>
+      </ol>
+      <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
+      <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
+      <div class="note">
+        <p><strong>Note:</strong> The current implementation <strong>DOES</strong> support full interaction of the bib content and calendar with touch, click and VoiceOver interactions.</p>
+        <p>The current implementation of the component <strong>DOES</strong> support using the keyboard to navigate the trigger and type dates via the keyboard. It <strong>DOES NOT</strong> support navigating the bib content and calendar via the keyboard. This functionality is scheduled to be added in the next major redesign of the component.</p>
+      </div>
+    </div>
+  </div>
+</div>

package/components/datepicker/demo/readme.md

@@ -0,0 +1,137 @@
+<!--
+The README.md file is a compiled document. No edits should be made directly to this file.
+
+README.md is created by running `npm run build:docs`.
+
+This file is generated based on a template fetched from
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
+
+The following sections are editable by making changes to the following files:
+
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
+|------------------------|---------------------------------------------------|-------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
+| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
+| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+-->
+
+# Datepicker
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
+<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Datepicker Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-datepicker>` element should be used in situations where users may:
+
+* select a single date
+* select a pair of dates which identify a calendar range
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Getting Started
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
+
+#### NPM Installation
+
+```shell
+$ npm i @aurodesignsystem/auro-formkit
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
+
+### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
+```
+
+This configuration enables proper module resolution for the component's TypeScript files.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-datepicker/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Formkit Development
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
+
+### Filtering
+
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
+
+To only develop a single component, use the `--filter` flag:
+
+```shell
+npx turbo dev --filter=@aurodesignsystem/auro-input
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+```js
+// Import the class only
+import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
+
+// Register with a custom name if desired
+AuroDatepicker.register('custom-datepicker');
+```
+
+This will create a new custom element `<custom-datepicker>` that behaves exactly like `<auro-datepicker>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-datepicker>
+    <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </custom-datepicker>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-datepicker>
+    <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </custom-datepicker>
+```
+</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:END -->

package/components/datepicker/dist/auro-calendar-cell.d.ts

@@ -0,0 +1,169 @@
+export class AuroCalendarCell extends LitElement {
+    static get properties(): {
+        day: {
+            type: ObjectConstructor;
+        };
+        selected: {
+            type: BooleanConstructor;
+        };
+        hovered: {
+            type: BooleanConstructor;
+        };
+        dateTo: {
+            type: StringConstructor;
+        };
+        dateFrom: {
+            type: StringConstructor;
+        };
+        month: {
+            type: StringConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabledDays: {
+            type: ArrayConstructor;
+        };
+        hoveredDate: {
+            type: StringConstructor;
+        };
+        isCurrentDate: {
+            type: BooleanConstructor;
+        };
+        locale: {
+            type: ObjectConstructor;
+        };
+        dateStr: {
+            type: StringConstructor;
+        };
+        renderForDateSlot: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    day: any;
+    selected: boolean;
+    hovered: boolean;
+    dateTo: any;
+    dateFrom: any;
+    month: any;
+    min: any;
+    max: any;
+    disabled: boolean;
+    disabledDays: any[];
+    hoveredDate: any;
+    isCurrentDate: boolean;
+    _locale: any;
+    dateStr: string;
+    renderForDateSlot: boolean;
+    runtimeUtils: any;
+    popoverTag: any;
+    set locale(value: any);
+    get locale(): any;
+    /**
+     * Handles selected and hovered states of the calendar cell when the date changes.
+     * @private
+     * @param {Number} dateFrom - Depart date.
+     * @param {Number} dateTo - Return date.
+     * @param {Number} hoveredDate - Hovered date.
+     * @param {Object} day - An object containing the dateFrom and day of month values.
+     * @returns {void}
+     */
+    private dateChanged;
+    /**
+     * Handles user click events and calls datepicker to update the value(s).
+     * @private
+     * @returns {void}
+     */
+    private handleTap;
+    /**
+     * Handles user hover events and dispatches a custom event.
+     * @private
+     * @returns {void}
+     */
+    private handleHover;
+    /**
+     * Checks if the current date is a valid date depending on the min and max values.
+     * @private
+     * @param {Object} day - An object containing the dateFrom and day of month values.
+     * @param {Number} min - The minimum date value.
+     * @param {Number} max - The maximum date value.
+     * @param {Array} disabledDays - An array of disabled dates.
+     * @returns {Boolean} - True if the date is disabled.
+     */
+    private isEnabled;
+    /**
+     * Checks if the current date is the depart date.
+     * @private
+     * @param {Object} day - An object containing the dateFrom and day of month values.
+     * @param {Number} dateFrom - Depart date.
+     * @returns {Boolean} True if the date is the depart date.
+     */
+    private isDepartDate;
+    /**
+     * Checks if the current date is the return date.
+     * @private
+     * @param {Object} day - An object containing the dateFrom and day of month values.
+     * @param {Number} dateFrom - Depart date.
+     * @param {Number} dateTo - Return date.
+     * @returns {Boolean} True if the date is the return date.
+     */
+    private isReturnDate;
+    /**
+     * Checks if the current date is between dateFrom and dateTo.
+     * @private
+     * @param {Object} day - An object containing the dateFrom and day of month values.
+     * @param {Number} dateFrom - Depart date.
+     * @param {Number} dateTo - Return date.
+     * @returns {Boolean} True if the current date is between dateFrom and dateTo.
+     */
+    private isInRange;
+    /**
+     * Determines the hovered date appearing latest in the calendar.
+     * @private
+     * @param {Object} day - An object containing the dateFrom and day of month values.
+     * @param {Number} dateFrom - Depart date.
+     * @param {Number} dateTo - Return date.
+     * @param {Number} hoveredDate - Hovered date.
+     * @returns {Boolean} True if the hovered date is the latest hovered date in the calendar.
+     */
+    private isLastHoveredDate;
+    /**
+     * Checks if the current date is a highlighted date.
+     * @param {Object} dateStr - The date string in MM_DD_YYYY format.
+     * @returns Boolean - True if the date is a highlighted date.
+     */
+    isReferenceDate(dateStr: any): boolean;
+    /**
+     * Determines the title of the auro-calendar-cell.
+     * @private
+     * @param {Number} date - The date of the auro-calendar-cell.
+     * @returns {String} The title of the auro-calendar-cell in the user's locale.
+     */
+    private getTitle;
+    /**
+     * Gets the name of the date slot.
+     * @private
+     * @returns {void}
+     */
+    private setDateSlotName;
+    /**
+     * Remove existing cell slot content and clone any current slot content from the root `auro-datepicker` which matches this cells date.
+     * @private
+     * @returns {void}
+     */
+    private handleSlotContent;
+    firstUpdated(): void;
+    datepicker: any;
+    auroPopover: any;
+    updated(properties: any): void;
+    render(): import("lit-html").TemplateResult;
+}
+import { LitElement } from "lit";

package/components/datepicker/dist/auro-calendar-month.d.ts

@@ -0,0 +1,20 @@
+export class AuroCalendarMonth extends RangeDatepickerCalendar {
+    static get styles(): import("lit").CSSResult[];
+    static get properties(): {
+        /**
+         * @private
+         */
+        monthFirst: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * Returns month name to be rendered in the calendar header.
+     * @private
+     * @param {Number} month - The month number (1-12).
+     * @returns {String} The name of the month.
+     */
+    private computeCurrentMonthName;
+}
+import { RangeDatepickerCalendar } from './vendor/wc-range-datepicker/range-datepicker-calendar.js';

package/components/datepicker/dist/auro-calendar.d.ts

@@ -0,0 +1,173 @@
+/**
+ * @event auroCalendar-dateSelected - Notifies that a date has been selected in the calendar.
+ * @event auroCalendar-monthChanged - Notifies that the visible calendar month(s) have changed.
+ */
+export class AuroCalendar extends RangeDatepicker {
+    static get styles(): import("lit").CSSResult[];
+    static get properties(): {
+        /**
+         * The last month that may be displayed in the calendar.
+         */
+        calendarEndMonth: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * The first month that may be displayed in the calendar.
+         */
+        calendarStartMonth: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * The date that determines the currently visible month.
+         */
+        centralDate: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * The starting date of the selected range.
+         */
+        dateFrom: {
+            type: StringConstructor;
+        };
+        /**
+         * The ending date of the selected range.
+         */
+        dateTo: {
+            type: StringConstructor;
+        };
+        /**
+         * Dropdown element that contains the calendar.
+         * @private
+         */
+        dropdown: {
+            type: ObjectConstructor;
+        };
+        /**
+         * Flag indicating if the calendar is in fullscreen mode.
+         */
+        isFullscreen: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
+         * Otherwise, Heading 600.
+         */
+        largeFullscreenHeadline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Maximum date. All dates after will be disabled.
+         */
+        maxDate: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Minimum date. All dates before will be disabled.
+         */
+        minDate: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Mobile breakpoint for responsive design.
+         * @private
+         */
+        mobileBreakpoint: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        monthFirst: {
+            type: BooleanConstructor;
+        };
+        /**
+         * Number of calendars to render.
+         * @private
+         */
+        numCalendars: {
+            type: NumberConstructor;
+        };
+        /**
+         * Flag indicating if the calendar is visible.
+         */
+        visible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * @private
+     */
+    private util;
+    /**
+     * @private
+     */
+    private utilCal;
+    /**
+     * @private
+     */
+    private utilCalRender;
+    calendarStartDate: any;
+    calendarEndDate: any;
+    centralDate: any;
+    showPrevMonthBtn: boolean;
+    showNextMonthBtn: boolean;
+    visible: boolean;
+    largeFullscreenHeadline: boolean;
+    isFullscreen: boolean;
+    /**
+     * @private
+     */
+    private firstMonthRenderable;
+    /**
+     * @private
+     */
+    private calendarRangeMonths;
+    /**
+     * @private
+     */
+    private numCalendars;
+    /**
+     * @private
+     */
+    private slots;
+    /**
+     * @private
+     */
+    private bibtemplateTag;
+    /**
+     * @private
+     */
+    private buttonTag;
+    dropdown: any;
+    /**
+     * Renders all of the auro-calendar-months HTML.
+     * @private
+     * @returns {Object} Returns the auro-calendar-months HTML.
+     */
+    private renderAllCalendars;
+    firstRenderedMonth: any;
+    /**
+     * Focuses the close button inside the calendar's bibtemplate.
+     * Used by datepicker to set initial focus when the fullscreen dialog opens.
+     * @returns {void}
+     */
+    focusCloseButton(): void;
+    /**
+     * Request the calendar be scrolled to a given date.
+     * @param {String} date - The date to scroll into view.
+     * @returns {void}
+     */
+    scrollMonthIntoView(date: string): void;
+    injectSlot(slotName: any, nodes: any): void;
+    render(): import("lit-html").TemplateResult;
+}
+import { RangeDatepicker } from './vendor/wc-range-datepicker/range-datepicker.js';