npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.9 → 2.0.1 - Mend

@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1006) hide show

package/components/datepicker/demo/readme.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!--
+  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-datepicker 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/tokens/CSSCustomProperties.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" />
+  </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('./readme.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 "./index.min.js";
+      initExamples();
+    </script>
+  </body>
+</html>

package/components/datepicker/demo/readme.md ADDED Viewed

@@ -0,0 +1,140 @@
+<!--
+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 -->
+## 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-datepicker> automatically
+import '@aurodesignsystem/auro-formkit/auro-datepicker';
+```
+#### Custom Registration
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroDatepicker.register('custom-datepicker')` method on the component class and pass in a unique name.
+```javascript
+// Import the class only
+import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
+// Register with a custom name if desired
+AuroDatepicker.register('custom-datepicker');
+```
+#### 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-datepicker>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- 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@2.0.0/auro-datepicker/+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-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 -->
+## 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/datepicker/dist/auro-calendar-cell.d.ts CHANGED Viewed

@@ -160,4 +160,3 @@ export class AuroCalendarCell extends LitElement {
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
-//# sourceMappingURL=auro-calendar-cell.d.ts.map

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

@@ -1,5 +1,19 @@
 export class AuroCalendarMonth extends RangeDatepickerCalendar {
     static get styles(): import("lit").CSSResult[];
+    static get properties(): {
+        /**
+         * @private
+         */
+        monthFirst: {
+            type: BooleanConstructor;
+        };
+    };
+    /**
+     * 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';
-//# sourceMappingURL=auro-calendar-month.d.ts.map

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

@@ -7,7 +7,7 @@
  * @prop {Date} minDate - Minimum date. All dates before will be disabled.
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:.
  * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).
@@ -51,6 +51,20 @@ export class AuroCalendar extends RangeDatepicker {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        largeFullscreenHeadline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        isFullscreen: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        monthFirst: {
+            type: BooleanConstructor;
+        };
     };
     /**
      * @private
@@ -86,12 +100,21 @@ export class AuroCalendar extends RangeDatepicker {
      * @private
      */
     private slots;
+    /**
+     * @private
+     */
+    private bibtemplateTag;
+    /**
+     * @private
+     */
+    private dropdown;
     /**
      * Renders all of the auro-calendar-months HTML.
      * @private
      * @returns {Object} Returns the auro-calendar-months HTML.
      */
     private renderAllCalendars;
+    isFullscreen: any;
     firstRenderedMonth: any;
     /**
      * Request the calendar be scrolled to a given date.
@@ -100,6 +123,6 @@ export class AuroCalendar extends RangeDatepicker {
      */
     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';
-//# sourceMappingURL=auro-calendar.d.ts.map

package/components/datepicker/dist/auro-datepicker.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * @slot helpText - Defines the content of the helpText.
- * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
+ * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
+ * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
  * @slot date_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
@@ -61,6 +62,21 @@ export class AuroDatePicker extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Specifies the date format. The default is `mm/dd/yyyy`.
+         */
+        format: {
+            type: StringConstructor;
+            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.
          */
@@ -81,6 +97,12 @@ export class AuroDatePicker extends LitElement {
         monthNames: {
             type: ArrayConstructor;
         };
+        /**
+         * @private
+         */
+        monthFirst: {
+            type: BooleanConstructor;
+        };
         /**
          * If set, disables auto-validation on blur.
          */
@@ -169,6 +191,7 @@ export class AuroDatePicker extends LitElement {
      * @private
      */
     private calendarRenderUtil;
+    formattedStartDate: boolean;
     disabled: boolean;
     required: boolean;
     range: boolean;
@@ -179,11 +202,9 @@ export class AuroDatePicker extends LitElement {
     calendarStartDate: any;
     calendarEndDate: any;
     calendarFocusDate: any;
+    format: string;
     monthNames: string[];
-    /**
-     * @private
-     */
-    private type;
+    monthFirst: boolean;
     /**
      * @private
      */
@@ -208,6 +229,11 @@ export class AuroDatePicker extends LitElement {
      * @private
      */
     private inputTag;
+    /**
+     * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
+     * @returns {string[]}
+     */
+    get values(): string[];
     /**
      * Force the calendar view to the focus date when it changes.
      * @private
@@ -246,13 +272,6 @@ export class AuroDatePicker extends LitElement {
      * @returns {void}
      */
     private notifyValueChanged;
-    /**
-     * Generates a date string used in the mobile calendar layout.
-     * @private
-     * @param {string} date - Date to parse into longer mobile version.
-     * @returns {string}
-     */
-    private getMobileDateStr;
     /**
      * Changes the calendar's visibility to reflect the value of the central date attribute.
      * @private
@@ -333,7 +352,18 @@ export class AuroDatePicker extends LitElement {
      * @returns {void}
      */
     reset(): void;
+    /**
+     * Validates value.
+     * @param {boolean} [force=false] - Whether to force validation.
+     */
+    validate(force?: boolean): void;
     updated(changedProperties: any): void;
+    formattedFocusDate: boolean;
+    formattedEndDate: boolean;
+    formattedValue: boolean;
+    formattedValueEnd: boolean;
+    formattedMinDate: boolean;
+    formattedMaxDate: boolean;
     /**
      * Handles the transfer of content between slots in the component.
      *
@@ -347,4 +377,3 @@ export class AuroDatePicker extends LitElement {
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
-//# sourceMappingURL=auro-datepicker.d.ts.map

package/components/datepicker/dist/bibtemplateVersion.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: "1.0.0";
2	+ export default _default;

package/components/datepicker/dist/dropdownVersion.d.ts CHANGED Viewed

@@ -1 +1,2 @@
-//# sourceMappingURL=dropdownVersion.d.ts.map
+declare const _default: "3.0.0";
+export default _default;

package/components/datepicker/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 export { AuroDatePicker };
 import { AuroDatePicker } from "./auro-datepicker.js";
-//# sourceMappingURL=index.d.ts.map