@aurodesignsystem/auro-formkit 2.1.0-beta.4 → 2.1.0-beta.6

package/components/combobox/demo/index.min.js

@@ -3410,12 +3410,17 @@ class AuroDropdown extends r$1 {
     this.disabled = false;
     this.error = false;
     this.inset = false;
-    this.placement = 'bottom-start';
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
     this.labeled = true;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     /**
      * @private
      */
@@ -3436,16 +3441,6 @@ class AuroDropdown extends r$1 {
      */
     this.floater = new AuroFloatingUI();
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
-
     /**
      * Generate unique names for dependency components.
      */
@@ -3467,6 +3462,18 @@ class AuroDropdown extends r$1 {
     this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion$1, AuroHelpText$1);
   }
 
+  /**
+   * @ignore
+   */
+  get floaterConfig() {
+    return {
+      placement: this.placement,
+      flip: !this.noFlip,
+      autoPlacement: this.autoPlacement,
+      offset: this.offset,
+    };
+  }
+
   /**
    * Public method to hide the dropdown.
    * @returns {void}
@@ -3487,6 +3494,15 @@ class AuroDropdown extends r$1 {
   static get properties() {
     return {
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       * @default false
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, applies a border around the trigger slot.
        */
@@ -3571,7 +3587,7 @@ class AuroDropdown extends r$1 {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -3614,6 +3630,16 @@ class AuroDropdown extends r$1 {
         reflect: true
       },
 
+      /**
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       * @default false
+       */
+      noFlip: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the dropdown will not hide when moving focus outside the element.
        */
@@ -3630,16 +3656,32 @@ class AuroDropdown extends r$1 {
         reflect: true
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       onSlotChange: {
         type: Function,
         reflect: false
       },
 
       /**
-       * @private
+       * Position where the bib should appear relative to the trigger.
+       * Accepted values:
+       * "top" | "right" | "bottom" | "left" |
+       * "bottom-start" | "top-start" | "top-end" |
+       * "right-start" | "right-end" | "bottom-end" |
+       * "left-start" | "left-end"
+       * @default bottom-start
        */
       placement: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -11654,11 +11696,11 @@ class AuroBibtemplate extends r$1 {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }
@@ -11907,6 +11949,12 @@ class AuroCombobox extends r$1 {
 
     this.isHiddenWhileLoading = false;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     const versioning = new AuroDependencyVersioning$4();
 
     this.dropdownTag = versioning.generateTag('auro-formkit-checkbox-dropdown', dropdownVersion, AuroDropdown);
@@ -11923,12 +11971,21 @@ class AuroCombobox extends r$1 {
 
       /**
        * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+       * @default false
        */
       autocomplete: {
         type: String,
         reflect: true
       },
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When attribute is present auro-menu will apply checkmarks to selected options.
        */
@@ -11961,6 +12018,16 @@ class AuroCombobox extends r$1 {
         reflect: true
       },
 
+      /**
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       * @default false
+       */
+      noFlip: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If set, disables auto-validation on blur.
        */
@@ -11968,6 +12035,15 @@ class AuroCombobox extends r$1 {
         type: Boolean
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       /**
        * Specifies the current selected option.
        */
@@ -11977,6 +12053,20 @@ class AuroCombobox extends r$1 {
         hasChanged: arrayOrUndefinedHasChanged$1
       },
 
+      /**
+       * Position where the bib should appear relative to the trigger.
+       * Accepted values:
+       * "top" | "right" | "bottom" | "left" |
+       * "bottom-start" | "top-start" | "top-end" |
+       * "right-start" | "right-end" | "bottom-end" |
+       * "left-start" | "left-end"
+       * @default bottom-start
+       */
+      placement: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Populates the `required` attribute on the input. Used for client-side validation.
        */
@@ -12744,6 +12834,10 @@ class AuroCombobox extends r$1 {
           .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
+          .placement="${this.placement}"
+          .offset="${this.offset}"
+          ?autoPlacement="${this.autoPlacement}"
+          ?noFlip="${this.noFlip}"
           disableEventShow>
           <${this.inputTag}
             slot="trigger"

package/components/combobox/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.1.0-beta.3/auro-combobox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.5/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/dist/auro-combobox.d.ts

@@ -10,11 +10,19 @@ export class AuroCombobox extends LitElement {
     static get properties(): {
         /**
          * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+         * @default false
          */
         autocomplete: {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * If declared, bib's position will be automatically calculated where to appear.
+         */
+        autoPlacement: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * When attribute is present auro-menu will apply checkmarks to selected options.
          */
@@ -43,12 +51,29 @@ export class AuroCombobox extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * If declared, the bib will NOT flip to an alternate position
+         * when there isn't enough space in the specified `placement`.
+         * @default false
+         */
+        noFlip: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If set, disables auto-validation on blur.
          */
         noValidate: {
             type: BooleanConstructor;
         };
+        /**
+         * Gap between the trigger element and bib.
+         * @default 0
+         */
+        offset: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
         /**
          * Specifies the current selected option.
          */
@@ -57,6 +82,19 @@ export class AuroCombobox extends LitElement {
             converter: typeof arrayConverter;
             hasChanged: typeof arrayOrUndefinedHasChanged;
         };
+        /**
+         * Position where the bib should appear relative to the trigger.
+         * Accepted values:
+         * "top" | "right" | "bottom" | "left" |
+         * "bottom-start" | "top-start" | "top-end" |
+         * "right-start" | "right-end" | "bottom-end" |
+         * "left-start" | "left-end"
+         * @default bottom-start
+         */
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * Populates the `required` attribute on the input. Used for client-side validation.
          */
@@ -161,6 +199,10 @@ export class AuroCombobox extends LitElement {
     validation: AuroFormValidation;
     runtimeUtils: any;
     isHiddenWhileLoading: boolean;
+    placement: string;
+    offset: number;
+    noFlip: boolean;
+    autoPlacement: boolean;
     dropdownTag: any;
     bibtemplateTag: any;
     inputTag: any;

package/components/combobox/dist/index.js

@@ -3341,12 +3341,17 @@ class AuroDropdown extends LitElement {
     this.disabled = false;
     this.error = false;
     this.inset = false;
-    this.placement = 'bottom-start';
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
     this.labeled = true;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     /**
      * @private
      */
@@ -3367,16 +3372,6 @@ class AuroDropdown extends LitElement {
      */
     this.floater = new AuroFloatingUI();
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
-
     /**
      * Generate unique names for dependency components.
      */
@@ -3398,6 +3393,18 @@ class AuroDropdown extends LitElement {
     this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion$1, AuroHelpText$1);
   }
 
+  /**
+   * @ignore
+   */
+  get floaterConfig() {
+    return {
+      placement: this.placement,
+      flip: !this.noFlip,
+      autoPlacement: this.autoPlacement,
+      offset: this.offset,
+    };
+  }
+
   /**
    * Public method to hide the dropdown.
    * @returns {void}
@@ -3418,6 +3425,15 @@ class AuroDropdown extends LitElement {
   static get properties() {
     return {
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       * @default false
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, applies a border around the trigger slot.
        */
@@ -3502,7 +3518,7 @@ class AuroDropdown extends LitElement {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -3545,6 +3561,16 @@ class AuroDropdown extends LitElement {
         reflect: true
       },
 
+      /**
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       * @default false
+       */
+      noFlip: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the dropdown will not hide when moving focus outside the element.
        */
@@ -3561,16 +3587,32 @@ class AuroDropdown extends LitElement {
         reflect: true
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       onSlotChange: {
         type: Function,
         reflect: false
       },
 
       /**
-       * @private
+       * Position where the bib should appear relative to the trigger.
+       * Accepted values:
+       * "top" | "right" | "bottom" | "left" |
+       * "bottom-start" | "top-start" | "top-end" |
+       * "right-start" | "right-end" | "bottom-end" |
+       * "left-start" | "left-end"
+       * @default bottom-start
        */
       placement: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -11572,11 +11614,11 @@ class AuroBibtemplate extends LitElement {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }
@@ -11825,6 +11867,12 @@ class AuroCombobox extends LitElement {
 
     this.isHiddenWhileLoading = false;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     const versioning = new AuroDependencyVersioning$4();
 
     this.dropdownTag = versioning.generateTag('auro-formkit-checkbox-dropdown', dropdownVersion, AuroDropdown);
@@ -11841,12 +11889,21 @@ class AuroCombobox extends LitElement {
 
       /**
        * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+       * @default false
        */
       autocomplete: {
         type: String,
         reflect: true
       },
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When attribute is present auro-menu will apply checkmarks to selected options.
        */
@@ -11879,6 +11936,16 @@ class AuroCombobox extends LitElement {
         reflect: true
       },
 
+      /**
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       * @default false
+       */
+      noFlip: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If set, disables auto-validation on blur.
        */
@@ -11886,6 +11953,15 @@ class AuroCombobox extends LitElement {
         type: Boolean
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       /**
        * Specifies the current selected option.
        */
@@ -11895,6 +11971,20 @@ class AuroCombobox extends LitElement {
         hasChanged: arrayOrUndefinedHasChanged
       },
 
+      /**
+       * Position where the bib should appear relative to the trigger.
+       * Accepted values:
+       * "top" | "right" | "bottom" | "left" |
+       * "bottom-start" | "top-start" | "top-end" |
+       * "right-start" | "right-end" | "bottom-end" |
+       * "left-start" | "left-end"
+       * @default bottom-start
+       */
+      placement: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Populates the `required` attribute on the input. Used for client-side validation.
        */
@@ -12662,6 +12752,10 @@ class AuroCombobox extends LitElement {
           .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
+          .placement="${this.placement}"
+          .offset="${this.offset}"
+          ?autoPlacement="${this.autoPlacement}"
+          ?noFlip="${this.noFlip}"
           disableEventShow>
           <${this.inputTag}
             slot="trigger"