@momentum-design/components 0.112.5 → 0.112.7

package/dist/components/buttonlink/buttonlink.component.d.ts

@@ -58,7 +58,7 @@ declare class ButtonLink extends ButtonLink_base {
      */
     private setSoftDisabled;
     update(changedProperties: PropertyValues): void;
-    render(): import("lit-html").TemplateResult<1>;
+    protected renderAnchorContent(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default ButtonLink;

package/dist/components/buttonlink/buttonlink.component.js

@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import Button from '../button/button.component';
 import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
 import { DEFAULTS } from '../button/button.constants';
@@ -91,39 +90,15 @@ class ButtonLink extends ButtonComponentMixin(Linksimple) {
             this.inferButtonType();
         }
     }
-    render() {
-        var _a;
+    renderAnchorContent() {
         return html `
-      <a
-        class="mdc-focus-ring"
-        part="anchor"
-        href="${this.href}"
-        target="${this.target}"
-        rel="${ifDefined(this.rel)}"
-        download="${ifDefined(this.download)}"
-        ping="${ifDefined(this.ping)}"
-        hreflang="${ifDefined(this.hreflang)}"
-        type="${ifDefined(this.type)}"
-        referrerpolicy="${ifDefined(this.referrerpolicy)}"
-        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-        tabindex="${this.disabled ? -1 : 0}"
-      >
-        ${this.prefixIcon
-            ? html `<mdc-icon
-              name="${this.prefixIcon}"
-              part="prefix-icon"
-              length-unit="rem"
-            ></mdc-icon>`
+      ${this.prefixIcon
+            ? html `<mdc-icon name="${this.prefixIcon}" part="prefix-icon" length-unit="rem"></mdc-icon>`
             : ''}
-        <slot @slotchange="${this.inferButtonType}" part="button-text"></slot>
-        ${this.postfixIcon
-            ? html `<mdc-icon
-              name="${this.postfixIcon}"
-              part="postfix-icon"
-              length-unit="rem"
-            ></mdc-icon>`
+      <slot @slotchange="${this.inferButtonType}" part="button-text"></slot>
+      ${this.postfixIcon
+            ? html `<mdc-icon name="${this.postfixIcon}" part="postfix-icon" length-unit="rem"></mdc-icon>`
             : ''}
-      </a>
     `;
     }
 }

package/dist/components/combobox/combobox.component.d.ts

@@ -1,16 +1,270 @@
-import { CSSResult } from 'lit';
-import { Component } from '../../models';
+import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
+import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import type Option from '../option/option.component';
+import type { PopoverStrategy } from '../popover/popover.types';
+import type { Placement } from './combobox.types';
+declare const Combobox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
- * combobox component, which ...
+ * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.
+ * Users can type text to filter the options and select their desired choice.
+ *
+ * When the user starts typing, the filter uses a "starts with" search and displays options based on the text entered by the user.
+ * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.
+ *
+ * If there is no text in the `no-result-text` attribute then nothing will be shown.
+ *
+ * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.
+ *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
+ * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
+ * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.
+ *
+ * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
+ *
+ * @dependency mdc-buttonsimple
+ * @dependency mdc-icon
+ * @dependency mdc-input
+ * @dependency mdc-listitem
+ * @dependency mdc-popover
  *
  * @tagname mdc-combobox
  *
- * @slot default - This is a default/unnamed slot
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
+ *
+ * @event click - (React: onClick) This event is dispatched when the combobox is clicked.
+ * @event change - (React: onChange) This event is dispatched when the combobox is changed.
+ * @event input - (React: onInput) This event is dispatched when the combobox is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.
+ * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.
+ *
+ * @cssproperty --mdc-combobox-border-color - The border color of the combobox
+ * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox
+ * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-width - The width of the combobox
+ * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
+ * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
+ * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
+ * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
+ * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
+ * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
+ * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
+ * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @csspart internal-native-input - The internal native input element of the combobox.
+ * @csspart mdc-input - The input element of the combobox.
+ * @csspart no-result-text - The no result text element of the combobox.
+ * @csspart combobox__base - The base container element of the combobox.
+ * @csspart combobox__button - The button element of the combobox.
+ * @csspart combobox__button-icon - The icon element of the button of the combobox.
  */
-declare class Combobox extends Component {
-    render(): import("lit-html").TemplateResult<1>;
+declare class Combobox extends Combobox_base implements AssociatedFormControl {
+    /** @internal */
+    private itemsStore;
+    /**
+     * The placeholder text which will be shown on the text if provided.
+     */
+    placeholder?: string;
+    /**
+     * readonly attribute of the combobox field. If true, the combobox is read-only.
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * The placement of the popover within Combobox.
+     * This defines the position of the popover relative to the combobox input field.
+     *
+     * Possible values:
+     *  - 'top-start'
+     *  - 'bottom-start'
+     * @default 'bottom-start'
+     */
+    placement: Placement;
+    /**
+     * Text to be displayed when no results are found.
+     * @default undefined
+     */
+    noResultText?: string;
+    /**
+     * Text to be displayed when no a custom values are selected, without selecting any option from the dropdown
+     * @default undefined
+     */
+    invalidCustomValueText?: string;
+    /**
+     * This describes the clipping element(s) or area relative to which the overflow of the popover will be checked.
+     * The default is 'clippingAncestors', which are the overflow ancestors that can cause the element to be clipped.
+     * Possible values:
+     *  - 'clippingAncestors'
+     *  - any css selector
+     *
+     * @default 'clippingAncestors'
+     *
+     * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+     */
+    boundary: 'clippingAncestors' | string;
+    /**
+     * The strategy of the popover within Combobox.
+     * This determines how the popover is positioned in the DOM.
+     *
+     * In case `boundary` is set to something other than 'clippingAncestors',
+     * it might be necessary to set the `strategy` to 'fixed' to ensure that the popover
+     * is not getting clipped by scrollable containers enclosing the combobox.
+     *
+     * @default absolute
+     * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
+     */
+    strategy: PopoverStrategy;
+    /**
+     * The z-index of the popover within Combobox.
+     *
+     * Override this to make sure this stays on top of other components.
+     * @default 1000
+     */
+    popoverZIndex: number;
+    /**
+     * ID of the element where the backdrop will be appended to.
+     * This is useful to ensure that the backdrop is appended to the correct element in the DOM.
+     * If not set, the backdrop will be appended to the parent element of the combobox.
+     */
+    backdropAppendTo?: string;
+    /** @internal */
+    private visualCombobox;
+    /** @internal */
+    private dropDownButton;
+    /** @internal */
+    slottedListboxes: Array<HTMLElement>;
+    /** @internal */
+    private isOpen;
+    /** @internal */
+    private filteredValue;
+    /** @internal */
+    private initialSelectedOption;
+    /** @internal */
+    get navItems(): Option[];
+    constructor();
+    connectedCallback(): void;
+    private isValidItem;
+    private openPopover;
+    private closePopover;
+    private toggleDropdown;
+    private compareOptionWithValue;
+    private getFirstSelectedOption;
+    private getVisibleOptions;
+    private handleUpdateError;
+    /**
+     * Update the focus when an item is removed.
+     * If there is a next item, focus it. If not, focus the previous item.
+     *
+     * @internal
+     */
+    private handleDestroyEvent;
+    private setSelectedValue;
+    /**
+     * Resets the selected value to an empty string and clears the form value.
+     * This method is called when there is a change on the input.
+     */
+    private resetSelectedValue;
+    private resetHelpText;
+    /**
+     * This function is called when the attribute changes.
+     * It updates the validity of the input field based on the input field's validity.
+     *
+     * @param name - attribute name
+     * @param old - old value
+     * @param value - new value
+     */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Sets the validity of the input element based on the selected option.
+     * If the selected option is not set and the combobox is required,
+     * it sets a custom validation message.
+     * If the selected option is set or the combobox is not required,
+     * it clears the custom validation message.
+     * This method is called to ensure that the combobox component behaves correctly
+     * in form validation scenarios, especially when the combobox is required.
+     * @internal
+     */
+    private setInputValidity;
+    /**
+     * Resets the combobox to its initially selected option.
+     * @internal
+     */
+    formResetCallback(): void;
+    /** @internal */
+    formStateRestoreCallback(state: string): void;
+    /**
+     * When the native input is focused, visually highlight the dropdown options (the "visual combobox"),
+     * so users can see which option is active, even though the actual DOM focus remains on the input box.
+     * This ensures that after actions like form submission, users can still interact with the dropdown options
+     * through visual cues, while keyboard focus stays on the input field.
+     * @internal
+     */
+    private handleNativeInputFocus;
+    /**
+     * Resets the focused option in the dropdown list.
+     * This method removes the 'data-focused' attribute from all options that currently have it,
+     * effectively clearing any visual indication of focus within the dropdown.
+     * It is typically called when the user navigates away from the dropdown or when the dropdown is closed,
+     * ensuring that no option remains visually highlighted as focused.
+     * @internal
+     */
+    private resetFocusedOption;
+    private updateSelectedOption;
+    /**
+     * Updates the visual focus state of a specific option in the dropdown list based on 'data-focused' attribute.
+     * It also updates the 'aria-selected' attribute for a11y purposes.
+     *
+     * @param option - The option element to update focus state for.
+     * @param value - The new focus state to set (true for focused, false for unfocused).
+     */
+    private updateOptionAttributes;
+    /**
+     * Handles the blur event of the combobox.
+     * This method is called when the combobox loses focus.
+     * It checks if the combobox has a focused option and sets the selected value to that option and closes the popover.
+     * If the combobox does not have a focused option and the filtered value is not empty,
+     * it sets the help text to the invalid custom value text and closes the popover.
+     * It also updates the input validity.
+     */
+    private handleBlurChange;
+    private updateFocusAndScrollIntoView;
+    private handleInputKeydown;
+    /**
+     * Updates the hidden state of options based on the current filtered value.
+     * If an option does not match the current filtered value, it is hidden.
+     * Otherwise, it is made visible.
+     * Additionally, it updates the hidden state of option groups and dividers based on the current filtered value.
+     */
+    private updateHiddenOptions;
+    private hideOptionGroupAndDivider;
+    private showOptionGroupAndDivider;
+    private handleInputChange;
+    private handleOptionsClick;
+    private shouldDisplayPopover;
+    /**
+     * Renders the native input element.
+     * This input is hidden and is used for internal purposes only.
+     * The value of the selected option is set as the value of this input.
+     * @internal
+     */
+    private renderNativeInput;
+    /**
+     * Renders the base input element with accessibility.
+     * This input is displayed on the screen and is used for user interaction only.
+     * The label of the selected option is set as the value of this input.
+     * @internal
+     */
+    private renderBaseInput;
+    private renderNoResultsText;
+    render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default Combobox;