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

package/components/datepicker/demo/keyboardBehavior.md

@@ -1,24 +0,0 @@
-<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>
-
-## DEVELOPER NOTES / CODE ACTION ITEMS / TODO ITEMS
-1. Remove the bridge for keyboard event bubbling out of the bib
-1. Prevent auro-dropdown `Enter` and `Space` key behavior for opening and closing the bib. Preserve `Escape` key to close.
-1. Strip out key event listeners not listed in this document

package/components/datepicker/demo/readme.md

@@ -1,137 +0,0 @@
-<!--
-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

@@ -1,169 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,173 +0,0 @@
-/**
- * @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';