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

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

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 (1005) hide show

package/components/dropdown/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-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/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/dropdown/demo/readme.md ADDED Viewed

@@ -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@2.0.0-beta.54/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/dist/auro-dropdown.d.ts CHANGED Viewed

@@ -7,7 +7,6 @@
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
  * @csspart helpText - The helpText content container.
- * @csspart popover - The bib content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
  */
@@ -82,6 +81,13 @@ export class AuroDropdown extends LitElement {
         isPopoverVisible: {
             type: BooleanConstructor;
         };
+        /**
+         * If true, the dropdown bib is taking the fullscreen when it's open
+         */
+        isBibFullscreen: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
          */
@@ -98,7 +104,7 @@ export class AuroDropdown extends LitElement {
         /**
          * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
          */
-        mobileFullscreenBreakpoint: {
+        fullscreenBreakpoint: {
             type: StringConstructor;
             reflect: boolean;
         };
@@ -158,8 +164,17 @@ export class AuroDropdown extends LitElement {
      */
     static register(name?: string): void;
     isPopoverVisible: boolean;
+    isBibFullscreen: boolean;
     matchWidth: boolean;
     noHideOnThisFocusLoss: boolean;
+    /**
+     * @private
+     */
+    private triggerContentFocusable;
+    /**
+     * @private
+     */
+    private showTriggerBorders;
     /**
      * @private
      * @returns {void} Internal defaults.
@@ -193,7 +208,18 @@ export class AuroDropdown extends LitElement {
      * @private
      */
     private floaterConfig;
-    iconTag: any;
+    /**
+     * @private
+     */
+    private iconTag;
+    /**
+     * @private
+     */
+    private dropdownBibTag;
+    /**
+     * @private
+     */
+    private helpTextTag;
     /**
      * Public method to hide the dropdown.
      * @returns {void}
@@ -209,10 +235,9 @@ export class AuroDropdown extends LitElement {
     bibContent: any;
     /**
      * Exposes CSS parts for styling from parent components.
-     * @private
      * @returns {void}
      */
-    private exposeCssParts;
+    exposeCssParts(): void;
     /**
      * Determines if content is within a custom slot.
      * @private
@@ -220,6 +245,13 @@ export class AuroDropdown extends LitElement {
      * @returns {Boolean}
      */
     private isCustomSlotContent;
+    /**
+     * Determines if the element or any children are focusable.
+     * @private
+     * @param {HTMLElement} element - Element to check.
+     * @returns {Boolean} - True if the element or any children are focusable.
+     */
+    private containsFocusableElement;
     /**
      * Handles changes to the trigger content slot and updates related properties.
      *
@@ -229,7 +261,7 @@ export class AuroDropdown extends LitElement {
      *
      * @private
      * @method handleTriggerContentSlotChange
-     * @param {Event} event - native slotchange event
+     * @param {Event} event - Native slotchange event.
      * @returns {void}
      */
     private handleTriggerContentSlotChange;
@@ -250,4 +282,3 @@ export class AuroDropdown extends LitElement {
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
-//# sourceMappingURL=auro-dropdown.d.ts.map

package/components/dropdown/dist/auro-dropdownBib.d.ts CHANGED Viewed

@@ -1,10 +1,17 @@
 /**
- * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+ * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
  * @csspart bibContainer - Apply css to the bib container.
  */
 export class AuroDropdownBib extends LitElement {
     static get styles(): import("lit").CSSResult[];
     static get properties(): {
+        /**
+         * If declared, will take the fullscreen when the bib is displayed.
+         */
+        isFullscreen: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If declared, will apply all styles for the common theme.
          */
@@ -33,7 +40,7 @@ export class AuroDropdownBib extends LitElement {
     private _mobileBreakpointValue;
     set mobileFullscreenBreakpoint(value: any);
     get mobileFullscreenBreakpoint(): any;
+    updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
-//# sourceMappingURL=auro-dropdownBib.d.ts.map

package/components/{counter/dist/formkit/auro-dropdownVersion.d.ts → dropdown/dist/dropdownVersion.d.ts} RENAMED Viewed

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

package/components/dropdown/dist/helptextVersion.d.ts ADDED Viewed

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

package/components/dropdown/dist/iconVersion.d.ts CHANGED Viewed

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

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

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