@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.0

package/components/datepicker/dist/styles/color-calendar-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/datepicker/dist/styles/color-cell-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/datepicker/dist/styles/color-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/datepicker/dist/styles/color-month-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/datepicker/dist/styles/style-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/datepicker/dist/styles/tokens-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/datepicker/dist/utilities.d.ts

@@ -0,0 +1,78 @@
+export class AuroDatepickerUtilities {
+    /**
+     * Returns true if value passed in is a valid date.
+     * @private
+     * @param {String} date - Date to validate.
+     * @param {String} format - Date format to validate against.
+     * @returns {Boolean}
+     */
+    private validDateStr;
+    /**
+     * Converts a date string to a North American date format.
+     * @private
+     * @param {String} dateStr - Date to validate.
+     * @param {String} format - Date format to validate against.
+     * @returns {Boolean}
+     */
+    private toNorthAmericanFormat;
+    /**
+     * Parses a date string into its components.
+     * @private
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {void}
+     */
+    private parseDate;
+    /**
+     * Converts a date string to a custom date format.
+     * @private
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {void}
+     */
+    private toCustomFormat;
+    /**
+     * Converts any date object to a date object representing the first day of the month.
+     * @param {Object} date - Date to convert to the first day of the month.
+     * @returns {Object} Returns the auro-calendar-months HTML.
+     */
+    convertDateToFirstOfMonth(date: any): any;
+    /**
+     * Calculate the number of months between two dates.
+     * @param {Object} date1 - First date to compare.
+     * @param {Object} date2 - Second date to compare.
+     * @returns {Number} Returns the number of months between the two dates.
+     */
+    monthDiff(date1: any, date2: any): number;
+    /**
+     * Convert a date object to string format.
+     * @private
+     * @param {Object} date - Date to convert to string.
+     * @returns {Object} Returns the date as a string.
+     */
+    private getDateAsString;
+    /**
+     * Function to format a number to two digits.
+     * @private
+     * @param {Number} num - Number to format.
+     * @returns {String} Returns the number as a string.
+     */
+    private formatTwoDigits;
+    /**
+     * Function to generate checkmark svg.
+     * @private
+     * @param {Object} icon - Icon object containing the SVG.
+     * @returns {Object} Returns the svg portion of the icon object.
+     */
+    private generateIconHtml;
+    dom: Document;
+    svg: ChildNode;
+    /**
+     * Compares two dates to see if they match.
+     * @private
+     * @param {Object} date1 - First date to compare.
+     * @param {Object} date2 - Second date to compare.
+     * @returns {Boolean} Returns true if the dates match.
+     */
+    private datesMatch;
+}

package/components/datepicker/dist/utilitiesCalendar.d.ts

@@ -0,0 +1,38 @@
+export class CalendarUtilities {
+    util: AuroDatepickerUtilities;
+    /**
+     * Scroll the calendar month list to a given valid date if in mobile view.
+     * @param {Object} elem - The calendar element.
+     * @param {String} date - The date to scroll into view.
+     * @param {String} format - The format of the date.
+     * @returns {void}
+     */
+    scrollMonthIntoView(elem: any, date: string, format: string): void;
+    /**
+     * Sends an event requesting the dropdown bib be closed.
+     * @private
+     * @returns {void}
+     */
+    private requestDismiss;
+    /**
+     * Handles the visibility of the previous and next month buttons.
+     * @param {Object} elem - The auro-calendar element.
+     * @returns {void}
+     */
+    assessNavigationButtonVisibility(elem: any): void;
+    /**
+     * Handles the change of the centralDate property.
+     * @param {Object} elem - The auro-calendar element.
+     * @private
+     * @returns {void}
+     */
+    private centralDateChanged;
+    /**
+     * Updates the month and year when the user navigates to a different calendar month.
+     * @param {Object} elem - The auro-calendar element.
+     * @param {String} direction - The direction the user is navigating.
+     * @returns {void}
+     */
+    handleMonthChange(elem: any, direction: string): void;
+}
+import { AuroDatepickerUtilities } from './utilities.js';

package/components/datepicker/dist/utilitiesCalendarRender.d.ts

@@ -0,0 +1,50 @@
+export class UtilitiesCalendarRender {
+    util: AuroDatepickerUtilities;
+    /**
+     * Attempt to update the central date but only if the date is a valid date.
+     * @param {Object} elem - The element to set the centralDate on.
+     * @param {String} date - The date to set the centralDate to.
+     * @private
+     */
+    private updateCentralDate;
+    /**
+     * Determine how many months to render based on the defined calendar range.
+     * @param {Object} elem - The auro-calendar element.
+     * @private
+     * @returns {Number} Returns the number of months between the calendarStartDate and the calendarEndDate.
+     */
+    private determineDefinedCalendarRange;
+    /**
+     * Determines how many calendar months can be rendered based on the screen size and defined range.
+     * @param {Object} elem - The auro-calendar element.
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
+     * @private
+     * @returns {Number} Returns the maximum number of months that can be rendered.
+     */
+    private maximumRenderableMonths;
+    /**
+     * Determines the number of months rendered inside the calendar.
+     * @param {Object} elem - The auro-calendar element.
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
+     * @private
+     * @returns {void}
+     */
+    private determineNumCalendarsToRender;
+    /**
+     * Determine which month is to be rendered first.
+     * @param {Object} elem - The auro-calendar element.
+     * @private
+     * @returns {void}
+     */
+    private setFirstRenderableMonthDate;
+    /**
+     * Renders one auro-calendar-month HTML for the given month/date combination.
+     * @private
+     * @param {Object} elem - The auro-calendar element.
+     * @param {Number} month - Month the calendar displays.
+     * @param {Number} year - Year the calendar displays.
+     * @returns {Object} Returns the auro-calendar-month HTML.
+     */
+    private renderCalendar;
+}
+import { AuroDatepickerUtilities } from './utilities.js';

package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts

@@ -0,0 +1,5 @@
+export class Day {
+    constructor(date: any);
+    date: number;
+    title: number;
+}

package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts

@@ -0,0 +1,60 @@
+export class RangeDatepickerCalendar extends LitElement {
+    /**
+     * Date from. Format is Unix timestamp.
+     */
+    dateFrom: any;
+    /**
+     * Date to. Format is Unix timestamp.
+     */
+    dateTo: any;
+    hoveredDate: any;
+    enableYearChange: boolean;
+    month: string;
+    narrow: boolean;
+    noRange: boolean;
+    next: boolean;
+    prev: boolean;
+    year: number;
+    disabledDays: any[];
+    /**
+     * Max date. Format is Unix timestamp.
+     */
+    max: any;
+    /**
+     * Minimal date. Format is Unix timestamp.
+     */
+    min: any;
+    yearsList: any[];
+    monthsList: any[];
+    dayNamesOfTheWeek: any[];
+    daysOfMonth: any[];
+    _locale: any;
+    currentDate: number;
+    set locale(value: any);
+    get locale(): any;
+    render(): import("lit-html").TemplateResult<1>;
+    renderPrevButton(): import("lit-html").TemplateResult<1>;
+    renderNextButton(): import("lit-html").TemplateResult<1>;
+    renderYear(): import("lit-html").TemplateResult<1>;
+    renderDayOfWeek(dayOfWeek: any): import("lit-html").TemplateResult<1>;
+    renderWeek(week: any): import("lit-html").TemplateResult<1>;
+    renderDay(day: any): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    updated(properties: any): void;
+    isCurrentDate(day: any): boolean;
+    localeChanged(): void;
+    yearAndMonthChanged(year: any, month: any): void;
+    computeCurrentMonthName(month: any, year: any): string;
+    tdIsEnabled(day: any): "" | "enabled";
+    handleDateSelected(event: any): void;
+    handleOpenYearSelection(): void;
+    handleYearSelected(): void;
+    handleDateHovered(event: any): void;
+    handleNextMonth(): void;
+    handlePrevMonth(): void;
+    setYears(from: any, to: any): void;
+}
+export namespace RangeDatepickerCalendar {
+    let styles: import("lit").CSSResult;
+}
+import { LitElement } from 'lit';

package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts

@@ -0,0 +1,57 @@
+export class RangeDatepicker extends LitElement {
+    /**
+     * Array of disabled days. Format is Unix timestamp.
+     */
+    disabledDays: any[];
+    /**
+     * Display a select year control.
+     */
+    enableYearChange: boolean;
+    /**
+     * Force display of only one month.
+     */
+    forceNarrow: boolean;
+    /**
+     * Set locale of the calendar.
+     */
+    locale: any;
+    /**
+     * Max date. Format is Unix timestamp.
+     */
+    max: string;
+    /**
+     * Minimal date. Format is Unix timestamp.
+     */
+    min: string;
+    /**
+     * If true only one date can be selected.
+     */
+    noRange: boolean;
+    dateFrom: any;
+    dateTo: any;
+    hoveredDate: any;
+    monthPlus: number;
+    yearPlus: any;
+    narrow: boolean;
+    month: number;
+    year: number;
+    render(): import("lit-html").TemplateResult<1>;
+    renderNormal(): import("lit-html").TemplateResult<1>;
+    renderNarrow(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(properties: any): void;
+    isNarrow(forceNarrow: any, narrow: any): any;
+    queryMatchesChanged(mql: any): void;
+    handlePrevMonth(): void;
+    handleNextMonth(): void;
+    hoveredDateChanged(event: any): void;
+    monthChanged(month: any, year: any): void;
+    noRangeChanged(isNoRange: any, wasNoRange: any): void;
+    localeChanged(): void;
+    dateToChanged(event: any): void;
+    dateFromChanged(event: any): void;
+}
+export namespace RangeDatepicker {
+    let styles: import("lit").CSSResult;
+}
+import { LitElement } from 'lit';

package/components/dropdown/README.md

@@ -0,0 +1,144 @@
+<!--
+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`          |
+-->
+
+# Dropdown
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
+
+_Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
+<!-- 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 -->
+
+## 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 -->
+
+### Import Options
+
+#### Automatic Registration
+
+For automatic registration, simply import the component:
+
+```javascript
+// Registers <auro-dropdown> automatically
+import '@aurodesignsystem/auro-formkit/auro-dropdown';
+```
+
+#### Custom Registration
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroDropdown.register('custom-dropdown')` method on the component class and pass in a unique name.
+
+```javascript
+// Import the class only
+import { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
+
+// Register with a custom name if desired
+AuroDropdown.register('custom-dropdown');
+```
+
+#### 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 -->
+**Reference component in HTML**
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+
+```html
+<auro-dropdown aria-label="custom label">
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Design Token CSS Custom Property dependency
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+
+<!-- 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@0.0.0/auro-dropdown/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-dropdown 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-dropdown` element should be used in situations where users may:
+
+* interact with an element to get clarification on content offering
+* provide definition to iconic imagery
+* when interactive help is required
+<!-- 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 -->

package/components/dropdown/demo/api.html

@@ -0,0 +1,57 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-dropdown custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./api.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </script>
+    <script type="module">
+      import { initExamples } from "./api.min.js";
+
+      initExamples();
+    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
+  </body>
+</html>

package/components/dropdown/demo/api.js

@@ -0,0 +1,21 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
+import { showExample } from './../apiExamples/programmaticallyShow.js';
+import { hideExample } from './../apiExamples/programmaticallyHide.js';
+import { inDialogExample } from '../apiExamples/inDialog.js';
+import '../src/registered.js';
+
+export function initExamples(initialCount = 0) {
+  try {
+    // javascript example function calls to be added here upon creation to test examples
+    showExample();
+    hideExample();
+    inDialogExample();
+  } catch (err) {
+    if (initialCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initialCount + 1);
+      }, 100);
+    }
+  }
+}