@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.2 → 0.0.0-pr624.21

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

@@ -6,12 +6,14 @@
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
+ * @slot displayValue - Allows custom HTML content to display the selected value when select is not focused.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
-export class AuroSelect extends LitElement {
+export class AuroSelect extends AuroElement {
     static get properties(): {
         /**
          * If declared, sets the autocomplete attribute for the select element.
@@ -20,6 +22,13 @@ export class AuroSelect extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
+         */
+        forceDisplayValue: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If declared, bib's position will be automatically calculated where to appear.
          * @default false
@@ -36,19 +45,26 @@ export class AuroSelect extends LitElement {
             reflect: boolean;
         };
         /**
-         * The name for the select element.
+         * @private
          */
-        name: {
-            type: StringConstructor;
+        isPopoverVisible: {
+            type: BooleanConstructor;
             reflect: boolean;
         };
         /**
-         * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
+         * If declared, the popover and trigger will be set to the same width.
          */
-        flexMenuWidth: {
+        matchWidth: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * The name for the select element.
+         */
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
          * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
@@ -130,7 +146,7 @@ export class AuroSelect extends LitElement {
          * "top" | "right" | "bottom" | "left" |
          * "bottom-start" | "top-start" | "top-end" |
          * "right-start" | "right-end" | "bottom-end" |
-         * "left-start" | "left-end"
+         * "left-start" | "left-end".
          * @default bottom-start
          */
         placement: {
@@ -196,6 +212,22 @@ export class AuroSelect extends LitElement {
          * @private
          */
         touched: boolean;
+        /**
+         * @private
+         */
+        hasFocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * @private
+         */
+        hasDisplayValueContent: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     /**
@@ -207,10 +239,14 @@ export class AuroSelect extends LitElement {
      *
      */
     static register(name?: string): void;
+    matchWidth: boolean;
+    shape: string;
+    size: string;
     placement: string;
     offset: number;
     noFlip: boolean;
     autoPlacement: boolean;
+    forceDisplayValue: boolean;
     /**
      * @private
      */
@@ -231,10 +267,22 @@ export class AuroSelect extends LitElement {
      * @private
      */
     private bibtemplateTag;
+    /**
+     * @private
+     */
+    private helpTextTag;
     /**
      * @private
      */
     private isHiddenWhileLoading;
+    /**
+     * @private
+     */
+    private hasFocus;
+    /**
+     * @private
+     */
+    private hasDisplayValueContent;
     /**
      * @private
      * @returns {void} Internal defaults.
@@ -246,6 +294,19 @@ export class AuroSelect extends LitElement {
     value: any;
     fullscreenBreakpoint: string;
     onDark: boolean;
+    isPopoverVisible: any;
+    /**
+     * Returns classmap configuration for html5 input labels in all layouts.
+     * @private
+     * @returns {void}
+     */
+    private get commonLabelClasses();
+    /**
+     * Returns classmap configuration for wrapper elements in each layout.
+     * @private
+     * @returns {object} - Returns classmap.
+     */
+    private get commonWrapperClasses();
     /**
      * Binds all behavior needed to the dropdown after rendering.
      * @private
@@ -253,7 +314,6 @@ export class AuroSelect extends LitElement {
      */
     private configureDropdown;
     dropdown: any;
-    menuWrapper: any;
     bibtemplate: any;
     /**
      * Updates the displayed value in an Auro dropdown component based on optionSelected.
@@ -324,6 +384,13 @@ export class AuroSelect extends LitElement {
      */
     private clearSelection;
     firstUpdated(): void;
+    /**
+     * Update the menu value. With checks for menu existence. Awaits value update.
+     * @param {string} value - The value to set in the menu.
+     * @returns void
+     * @private
+     */
+    private updateMenuValue;
     updated(changedProperties: any): Promise<void>;
     /**
      * Resets component to initial state.
@@ -353,6 +420,39 @@ export class AuroSelect extends LitElement {
      * @private
      */
     private _updateNativeSelect;
-    render(): import("lit-html").TemplateResult;
+    renderAriaHtml(): import("lit-html").TemplateResult;
+    renderNativeSelect(): import("lit-html").TemplateResult;
+    /**
+     * Returns HTML for the help text and error message.
+     * @private
+     * @returns {html} - Returns HTML for the help text and error message.
+     */
+    private renderHtmlHelpText;
+    /**
+     * Returns HTML for the emphasized layout.
+     * @private
+     * @returns {import("lit").TemplateResult} - Returns HTML for the emphasized layout.
+     */
+    private renderLayoutEmphasized;
+    /**
+     * Returns HTML for the snowflake layout.
+     * @private
+     * @returns {import("lit").TemplateResult} - Returns HTML for the snowflake layout.
+     */
+    private renderLayoutSnowflake;
+    /**
+     * Returns HTML for the classic layout.
+     * @private
+     * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
+     */
+    private renderLayoutClassic;
+    /**
+     * Logic to determine the layout of the component.
+     * @private
+     * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
+     * @returns {void}
+     */
+    private renderLayout;
+    renderBACKUP(): import("lit-html").TemplateResult;
 }
-import { LitElement } from "lit";
+import { AuroElement } from '../../layoutElement/src/auroElement.js';

package/components/select/dist/helptextVersion.d.ts

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