@aurodesignsystem/auro-formkit 2.0.0-beta.41 → 2.0.0-beta.42

package/components/combobox/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@alaskaairux/icons": "^4.44.1",
+    "@aurodesignsystem/auro-bibtemplate": "*",
     "@aurodesignsystem/auro-dropdown": "*",
     "@aurodesignsystem/auro-input": "*",
     "@aurodesignsystem/auro-menu": "*",

package/components/combobox/src/auro-combobox.js

@@ -19,13 +19,16 @@ import dropdownVersion from './formkit/auro-dropdownVersion.js';
 import { AuroInput } from '@aurodesignsystem/auro-input';
 import inputVersion from './formkit/auro-inputVersion.js';
 
+import { AuroBibtemplate } from '@aurodesignsystem/auro-bibtemplate';
+import bibTemplateVersion from './bibtemplateVersion.js';
+
 import {
   arrayConverter,
   arrayOrUndefinedHasChanged
 } from '@aurodesignsystem/auro-menu';
 
 // Import touch detection lib
-import styleCss from "./styles/style-css.js";
+import styleCss from './styles/style-css.js';
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -58,6 +61,8 @@ export class AuroCombobox extends LitElement {
     this.optionActive = null;
     this.msgSelectionMissing = 'Please select an option.';
 
+    this.mobileFullscreenBreakpoint = 'sm';
+
     this.validation = new AuroFormValidation();
 
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
@@ -67,6 +72,7 @@ export class AuroCombobox extends LitElement {
     const versioning = new AuroDependencyVersioning();
 
     this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+    this.bibtemplateTag = versioning.generateTag('auro-bibtemplate', bibTemplateVersion, AuroBibtemplate);
     this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
@@ -193,6 +199,33 @@ export class AuroCombobox extends LitElement {
         converter: arrayConverter,
         hasChanged: arrayOrUndefinedHasChanged
       },
+
+      /**
+       * If declared, make mobileHeadline in HeadingDisplay.
+       * Otherwise, Heading 600
+       */
+      largeMobileHeadline: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * 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.
+       * @default sm
+       */
+      mobileFullscreenBreakpoint: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      isDropdownFullscreen: {
+        type: Boolean,
+        reflect: false
+      }
     };
   }
 
@@ -202,13 +235,13 @@ export class AuroCombobox extends LitElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-combobox"] - The name of element that you want to register to.
+   * @param {string} [name='auro-combobox'] - The name of element that you want to register to.
    *
    * @example
-   * AuroCombobox.register("custom-combobox") // this will register this element to <custom-combobox/>
+   * AuroCombobox.register('custom-combobox') // this will register this element to <custom-combobox/>
    *
    */
-  static register(name = "auro-combobox") {
+  static register(name = 'auro-combobox') {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCombobox);
   }
 
@@ -329,6 +362,9 @@ export class AuroCombobox extends LitElement {
       this.dropdown.hide();
       return;
     }
+
+    this.isDropdownFullscreen = this.dropdown.isBibFullscreen;
+
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
@@ -349,11 +385,39 @@ export class AuroCombobox extends LitElement {
     this.menuWrapper = this.dropdown.querySelector('.menuWrapper');
     this.menuWrapper.append(this.menu);
 
-    this.dropdown.setAttribute('role', 'combobox');
+    // setting up bibtemplate
+    this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
+    this.bibtemplate.append(this.menuWrapper);
+
+    // Exposes the CSS parts from the bibtemplate for styling
+    this.bibtemplate.exposeCssParts();
 
+    this.hideBib = this.hideBib.bind(this);
+    this.bibtemplate.addEventListener('close-click', this.hideBib);
+
+    const bibHeader = this.querySelector('[slot="bib.mobile.headline"]');
+    if (bibHeader) {
+      bibHeader.setAttribute('slot', 'header');
+      this.bibtemplate.append(bibHeader);
+    }
+
+    this.dropdown.setAttribute('role', 'combobox');
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
     });
+
+    this.transportInput = this.transportInput.bind(this);
+    this.dropdown.addEventListener('auroDropdown-toggled', () => {
+      // wait a frame in case the bib gets hide immediately after showing because there is no value
+      setTimeout(this.transportInput);
+    });
+
+    this.dropdown.addEventListener('auroDropdown-strategy-change', (event) => {
+      // event when the strategy(bib mode) is changed between fullscreen and floating
+      this.isDropdownFullscreen = event.detail.strategy === 'fullscreen';
+      setTimeout(this.transportInput);
+    });
+
   }
 
   /**
@@ -363,7 +427,7 @@ export class AuroCombobox extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
+    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -437,13 +501,45 @@ export class AuroCombobox extends LitElement {
     });
   }
 
+  /**
+   * @private
+   * Dispatches input's keyboard events from host
+   * This allows key events from the input to be handled by the parent.
+   * @param {KeyboardEvent} event - The keyboard event.
+   */
+  bubbleUpInputKeyEvent(event) {
+    if (event.currentTarget.parentNode !== this.dropdown) {
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault();
+      }
+      const ke = new KeyboardEvent(event.type, {
+        key: event.key,
+        code: event.code,
+        repeat: event.repeat,
+      });
+      this.dispatchEvent(ke);
+    }
+  }
+
   /**
    * Binds all behavior needed to the input after rendering.
    * @private
    * @returns {void}
    */
   configureInput() {
-    this.input.addEventListener('keyup', (evt) => {
+    // When input is in bibtemplate, make the event to be fired at combobox element
+    this.bubbleUpInputKeyEvent = this.bubbleUpInputKeyEvent.bind(this);
+    this.input.addEventListener('keydown', this.bubbleUpInputKeyEvent);
+    this.input.addEventListener('keyup', this.bubbleUpInputKeyEvent);
+
+    // Programatically inject as the slot cannot be carried over to bibtemplate.
+    // It's because the bib is newly attach to body.
+    const label = this.querySelector('[slot="label"]');
+    if (label) {
+      this.input.append(label);
+    }
+
+    this.addEventListener('keyup', (evt) => {
       if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
         this.showBib();
       }
@@ -491,6 +587,58 @@ export class AuroCombobox extends LitElement {
     }
   }
 
+  /**
+   * @private
+   * When the dropdown is visible in fullscreen mode, the input is moved to the subheader slot of bibtemplate.
+   * Otherwise, it's moved back to the trigger slot.
+   * @private
+   * @returns {void}
+   */
+  transportInput() {
+    if (!this.input) {
+      return;
+    }
+
+    const inputHelpText = this.input.shadowRoot.querySelector('auro-helptext, [auro-helptext');
+    const inputAlertIcon = this.input.shadowRoot.querySelector(".alertNotification");
+
+    if (this.dropdown.isPopoverVisible && this.isDropdownFullscreen) {
+      if (this.input.parentNode !== this.bibtemplate) {
+        // keep the trigger size the same even after input gets removed
+        const parentSize = window.getComputedStyle(this.dropdown.trigger);
+        this.dropdown.trigger.style.height = parentSize.height;
+
+        // input will not have border on bib
+        this.input.removeAttribute('bordered');
+        this.input.setAttribute('borderless', true);
+        this.input.setAttribute('slot', 'subheader');
+
+        // set disply of helpText and alert icon programatically
+        // because ::slotted and ::part do not work together
+        inputHelpText.style.display = 'none';
+        if (inputAlertIcon) {
+          inputAlertIcon.style.display = 'none';
+        }
+
+        this.bibtemplate.append(this.input);
+        this.input.focus();
+      }
+    } else if (this.input.parentNode !== this.dropdown) {
+      this.input.setAttribute('bordered', true);
+      this.input.removeAttribute('borderless');
+      this.input.setAttribute('slot', 'trigger');
+
+      // reset display of helpText and alert icon to be visible
+      inputHelpText.style.display = '';
+      if (inputAlertIcon) {
+        inputAlertIcon.style.display = '';
+      }
+
+      this.dropdown.append(this.input);
+      this.input.focus();
+    }
+  }
+
   /**
    * Handle changes to the input value and trigger changes that should result.
    * @private
@@ -549,7 +697,7 @@ export class AuroCombobox extends LitElement {
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
-    if (!this.availableOptions || this.availableOptions.length === 0) {
+    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.isDropdownFullscreen) {
       this.hideBib();
     }
   }
@@ -571,6 +719,11 @@ export class AuroCombobox extends LitElement {
 
       if (evt.key === 'Tab') {
         this.hideBib();
+
+        if (this.dropdown.isPopoverVisible && this.isDropdownFullscreen) {
+          // if bib is open in fullscreen, just close the bib and do not move the focus to the next focasable element
+          evt.preventDefault();
+        }
       }
 
       /**
@@ -583,16 +736,7 @@ export class AuroCombobox extends LitElement {
 
         if (this.dropdown.isPopoverVisible) {
           evt.preventDefault();
-        }
-      }
-
-      if (this.dropdown.isPopoverVisible) {
-        if (evt.key === 'ArrowUp') {
-          this.menu.navigateOptions('up');
-        }
-
-        if (evt.key === 'ArrowDown') {
-          this.menu.navigateOptions('down');
+          this.menu.navigateOptions(evt.key.replace('Arrow', '').toLowerCase());
         }
       }
     });
@@ -682,7 +826,8 @@ export class AuroCombobox extends LitElement {
           this.input.value = inputValue;
 
           // If the value got set programmatically make sure we hide the bib
-          if (!this.contains(document.activeElement)) {
+          // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
+          if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
             this.hideBib();
           }
         }
@@ -738,6 +883,7 @@ export class AuroCombobox extends LitElement {
           rounded
           matchWidth
           nocheckmark
+          mobilefullscreenbreakpoint="${this.mobileFullscreenBreakpoint}"
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow>
@@ -754,12 +900,15 @@ export class AuroCombobox extends LitElement {
             .autocomplete="${this.autocomplete}"
             .type="${this.type}"
             @input="${this.handleInputValueChange}">
-            <slot name="label" slot="label"></slot>
           </${this.inputTag}>
-          <div class="menuWrapper">
-          </div>
+
+          <div class="menuWrapper"></div>
+
+          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+          </${this.bibtemplateTag}>
+
           <p slot="helpText">
-          <!-- Help text and error message template -->
+            <!-- Help text and error message template -->
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`
                 <slot name="helpText"></slot>

package/components/combobox/src/bibtemplateVersion.js

@@ -0,0 +1 @@
+export default '1.0.0';

package/components/combobox/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}:host combobox-dropdown::part(trigger){padding-right:var(--ds-size-150, 0.75rem)}`;
+export default css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}`;

package/components/combobox/src/styles/style.css

@@ -54,7 +54,3 @@
   --ds-auro-input-border-color: transparent;
   --ds-auro-input-container-color: transparent;
 }
-
-:host combobox-dropdown::part(trigger) {
-  padding-right: var(--ds-size-150, 0.75rem);
-}

package/components/combobox/src/styles/style.scss

@@ -36,11 +36,3 @@
     --ds-auro-input-container-color: transparent;
   }
 }
-
-:host {
-  combobox-dropdown {
-    &::part(trigger) {
-      padding-right: var(--ds-size-150, $ds-size-150);
-    }
-  }
-}

package/components/counter/.turbo/turbo-build.log

@@ -342,10 +342,10 @@ Complete!
 created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 813ms
+created ./demo/ in 826ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 634ms
+created ./demo/ in 557ms
 
 > @aurodesignsystem/auro-counter@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component counter

package/components/counter/.turbo/turbo-bundler.log

@@ -7,16 +7,16 @@
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created dist in 633ms
+created dist in 815ms
 
 ./demo/index.js → ./demo/...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created ./demo/ in 403ms
+created ./demo/ in 484ms
 
 ./demo/api.js → ./demo/...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 @aurodesignsystem/auro-dropdown (imported by "src/auro-counter-group.js")
-created ./demo/ in 286ms
+created ./demo/ in 438ms

package/components/counter/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.40/dist/auro-counter__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.41/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter use cases