@momentum-design/components 0.121.8 → 0.122.1

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

@@ -163,9 +163,9 @@ declare class Input extends Input_base implements AssociatedFormControl {
     /**
      * Handles the input event of the input field.
      * Updates the value and sets the validity of the input field.
-     *
+     * @internal
      */
-    private onInput;
+    protected onInput(): void;
     /**
      * Handles the change event of the input field.
      * Updates the value and sets the validity of the input field.
@@ -175,8 +175,9 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
      *
      * @param event - Event which contains information about the value change.
+     * @internal
      */
-    private onChange;
+    protected onChange(event: Event): void;
     /**
      * Handles the keydown event of the input field.
      * If the key pressed is 'Enter', it submits the form.

package/dist/components/input/input.component.js

@@ -194,7 +194,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     /**
      * Handles the input event of the input field.
      * Updates the value and sets the validity of the input field.
-     *
+     * @internal
      */
     onInput() {
         this.updateValue();
@@ -210,6 +210,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
      * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
      *
      * @param event - Event which contains information about the value change.
+     * @internal
      */
     onChange(event) {
         this.updateValue();

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

@@ -7,6 +7,13 @@ import Input from '../input/input.component';
  *
  * This component is built by extending the `mdc-input` component.
  *
+ * **Accessibility:**
+ *
+ * NOTE: this component should not be used in combination with a Popover or Listbox component.
+ * Search results should be shown permanently on the page if using this component.
+ *
+ * For a search field that opens a Popover, use the `mdc-searchpopover` widget instead.
+ *
  * @tagname mdc-searchfield
  *
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
@@ -77,8 +84,9 @@ declare class Searchfield extends Input {
     /**
      * This method is used to render the input chips inside filters slot.
      * It will remove any elements that are not input chips.
+     * @internal
      */
-    private renderInputChips;
+    protected renderInputChips(): void;
     /**
      * This sets the focus ring state based on the input focus state.
      * Eventually, this logic has to be omitted and achieved using CSS instead.

package/dist/components/searchfield/searchfield.component.js

@@ -21,6 +21,13 @@ import { DEFAULTS } from './searchfield.constants';
  *
  * This component is built by extending the `mdc-input` component.
  *
+ * **Accessibility:**
+ *
+ * NOTE: this component should not be used in combination with a Popover or Listbox component.
+ * Search results should be shown permanently on the page if using this component.
+ *
+ * For a search field that opens a Popover, use the `mdc-searchpopover` widget instead.
+ *
  * @tagname mdc-searchfield
  *
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
@@ -107,6 +114,7 @@ class Searchfield extends Input {
     /**
      * This method is used to render the input chips inside filters slot.
      * It will remove any elements that are not input chips.
+     * @internal
      */
     renderInputChips() {
         var _a;

package/dist/components/searchpopover/index.d.ts

@@ -0,0 +1,11 @@
+import Searchpopover from './searchpopover.component';
+import '../button';
+import '../icon';
+import '../text';
+import '../popover';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-searchpopover']: Searchpopover;
+    }
+}
+export default Searchpopover;

package/dist/components/searchpopover/index.js

@@ -0,0 +1,8 @@
+import Searchpopover from './searchpopover.component';
+import { TAG_NAME } from './searchpopover.constants';
+import '../button';
+import '../icon';
+import '../text';
+import '../popover';
+Searchpopover.register(TAG_NAME);
+export default Searchpopover;

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

@@ -0,0 +1,100 @@
+import { CSSResult } from 'lit';
+import Searchfield from '../searchfield/searchfield.component';
+import type { Placement } from './searchpopover.types';
+/**
+ * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure
+ * proper accessibility. This component should be used when search results or suggestions need to be displayed
+ * in a popover below the search input field, where the search results hold individual actions like navigating to a
+ * a different url etc.
+ *
+ * - Don't use this when search results are displayed inline on the page -> use Searchfield component instead.
+ * - Don't use this when a list of options is filtered based on the search input -> use Combobox component instead.
+ *
+ * It supports `mdc-inputchip` as filters.
+ *
+ * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
+ *
+ * @tagname mdc-searchpopover
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event shown - (React: onShown) This event is dispatched when the popover is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
+ *
+ * @slot default - Default slot (=children) for the popover content
+ * @slot filters - Slot for input chips
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component
+ * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component
+ * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart leading-icon - The leading icon element that is displayed before the input field.
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
+ * @csspart popover-content - The popover content element.
+ */
+declare class Searchpopover extends Searchfield {
+    /**
+     * Whether to display the popover.
+     * @default false
+     */
+    displayPopover?: boolean;
+    /**
+     * The placement of the popover within Searchpopover component.
+     * This defines the position of the popover relative to the search input field.
+     *
+     * Possible values:
+     *  - 'top-start'
+     *  - 'bottom-start'
+     * @default 'bottom-start'
+     */
+    placement: Placement;
+    /**
+     * The z-index of the popover within Searchpopover.
+     *
+     * Override this to make sure this stays on top of other components.
+     * @default 1000
+     */
+    popoverZIndex: number;
+    protected renderInputElement(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Searchpopover;

package/dist/components/searchpopover/searchpopover.component.js

@@ -0,0 +1,208 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import Searchfield from '../searchfield/searchfield.component';
+import { KEYS } from '../../utils/keys';
+import { POPOVER_PLACEMENT, DEFAULTS as POPOVER_DEFAULTS } from '../popover/popover.constants';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { ROLE } from '../../utils/roles';
+import styles from './searchpopover.styles';
+import { DEFAULTS, TRIGGER_ID, POPOVER_ID } from './searchpopover.constants';
+/**
+ * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure
+ * proper accessibility. This component should be used when search results or suggestions need to be displayed
+ * in a popover below the search input field, where the search results hold individual actions like navigating to a
+ * a different url etc.
+ *
+ * - Don't use this when search results are displayed inline on the page -> use Searchfield component instead.
+ * - Don't use this when a list of options is filtered based on the search input -> use Combobox component instead.
+ *
+ * It supports `mdc-inputchip` as filters.
+ *
+ * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
+ *
+ * @tagname mdc-searchpopover
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event shown - (React: onShown) This event is dispatched when the popover is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
+ *
+ * @slot default - Default slot (=children) for the popover content
+ * @slot filters - Slot for input chips
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component
+ * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component
+ * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart leading-icon - The leading icon element that is displayed before the input field.
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
+ * @csspart popover-content - The popover content element.
+ */
+class Searchpopover extends Searchfield {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to display the popover.
+         * @default false
+         */
+        this.displayPopover = DEFAULTS.DISPLAY_POPOVER;
+        /**
+         * The placement of the popover within Searchpopover component.
+         * This defines the position of the popover relative to the search input field.
+         *
+         * Possible values:
+         *  - 'top-start'
+         *  - 'bottom-start'
+         * @default 'bottom-start'
+         */
+        this.placement = POPOVER_PLACEMENT.BOTTOM_START;
+        /**
+         * The z-index of the popover within Searchpopover.
+         *
+         * Override this to make sure this stays on top of other components.
+         * @default 1000
+         */
+        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+    }
+    renderInputElement() {
+        var _a, _b;
+        const placeholderText = this.hasInputChips ? '' : this.placeholder;
+        return html `<input
+      aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      part="input-text"
+      id="${this.inputId}"
+      name="${this.name}"
+      .value="${live(this.value)}"
+      ?disabled="${this.disabled}"
+      ?readonly="${this.readonly}"
+      ?required="${this.required}"
+      type="${DEFAULTS.TYPE}"
+      aria-expanded="${this.displayPopover ? 'true' : 'false'}"
+      aria-controls="${POPOVER_ID}"
+      aria-owns="${POPOVER_ID}"
+      aria-haspopup="${ROLE.DIALOG}"
+      aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : ((_b = this.dataAriaDescribedby) !== null && _b !== void 0 ? _b : ''))}"
+      aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
+      placeholder=${ifDefined(placeholderText)}
+      minlength=${ifDefined(this.minlength)}
+      maxlength=${ifDefined(this.maxlength)}
+      autocapitalize=${this.autocapitalize}
+      autocomplete=${this.autocomplete}
+      dirname=${ifDefined(this.dirname)}
+      pattern=${ifDefined(this.pattern)}
+      list=${ifDefined(this.list)}
+      size=${ifDefined(this.size)}
+      @input=${this.onInput}
+      @change=${this.onChange}
+      @keydown=${this.handleKeyDown}
+      role=${ifDefined(ROLE.COMBOBOX)}
+    />`;
+    }
+    render() {
+        return html `
+      ${this.renderLabelElement()}
+      <div
+        class="${classMap({
+            'mdc-focus-ring': this.isInputFocused,
+        })}"
+        part="input-container"
+        id="${TRIGGER_ID}"
+      >
+        ${this.renderLeadingIcon()}
+        <div part="scrollable-container" tabindex="-1">
+          <div
+            part="filters-container"
+            @click=${() => this.inputElement.focus()}
+            @keydown=${(e) => (e.key === KEYS.ENTER ? this.inputElement.focus() : null)}
+            @keyup=${(e) => (e.key === KEYS.SPACE ? this.inputElement.focus() : null)}
+          >
+            <slot name="filters" @slotchange=${this.renderInputChips}></slot>
+          </div>
+          ${this.renderInputElement()}
+        </div>
+        ${this.renderTrailingButton(this.hasInputChips)}
+      </div>
+      <mdc-popover
+        triggerID="${TRIGGER_ID}"
+        id="${POPOVER_ID}"
+        trigger="manual"
+        interactive
+        ?visible=${this.displayPopover}
+        hide-on-outside-click
+        hide-on-escape
+        focus-back-to-trigger
+        size
+        placement="${this.placement}"
+        disable-aria-expanded
+        z-index="${ifDefined(this.popoverZIndex)}"
+        exportparts="popover-content"
+      >
+        <slot></slot>
+      </mdc-popover>
+    `;
+    }
+}
+Searchpopover.styles = [...Searchfield.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'display-popover' }),
+    __metadata("design:type", Boolean)
+], Searchpopover.prototype, "displayPopover", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Searchpopover.prototype, "placement", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'popover-z-index' }),
+    __metadata("design:type", Number)
+], Searchpopover.prototype, "popoverZIndex", void 0);
+export default Searchpopover;

package/dist/components/searchpopover/searchpopover.constants.d.ts

@@ -0,0 +1,8 @@
+declare const TAG_NAME: "mdc-searchpopover";
+declare const DEFAULTS: {
+    readonly TYPE: "text";
+    readonly DISPLAY_POPOVER: false;
+};
+declare const TRIGGER_ID = "searchpopover-container-triggerid";
+declare const POPOVER_ID = "searchpopover-popoverid";
+export { TAG_NAME, DEFAULTS, TRIGGER_ID, POPOVER_ID };

package/dist/components/searchpopover/searchpopover.constants.js

@@ -0,0 +1,10 @@
+import utils from '../../utils/tag-name';
+import { INPUT_TYPE } from '../input/input.constants';
+const TAG_NAME = utils.constructTagName('searchpopover');
+const DEFAULTS = {
+    TYPE: INPUT_TYPE.TEXT,
+    DISPLAY_POPOVER: false,
+};
+const TRIGGER_ID = 'searchpopover-container-triggerid';
+const POPOVER_ID = 'searchpopover-popoverid';
+export { TAG_NAME, DEFAULTS, TRIGGER_ID, POPOVER_ID };

package/dist/components/searchpopover/searchpopover.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/searchpopover/searchpopover.styles.js

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-searchpopover-width: 100%;
+    --mdc-searchpopover-popover-width: var(--mdc-searchpopover-width);
+    --mdc-searchpopover-popover-height: auto;
+
+    width: var(--mdc-searchpopover-width);
+    position: relative;
+  }
+
+  /* Popover height, width & padding overrides */
+  :host mdc-popover {
+    --mdc-popover-max-width: var(--mdc-searchpopover-popover-width);
+    --mdc-popover-max-height: var(--mdc-searchpopover-popover-height);
+  }
+  :host mdc-popover::part(popover-content) {
+    max-height: var(--mdc-popover-max-height);
+    min-width: auto;
+    padding: 0.75rem 0.5rem;
+  }
+`;
+export default [styles];

package/dist/components/searchpopover/searchpopover.types.d.ts

@@ -0,0 +1,8 @@
+import type { Events as InputEvents } from '../input/input.types';
+import type { PopoverPlacement, PopoverShownEvent, PopoverHiddenEvent } from '../popover/popover.types';
+type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
+type Events = InputEvents & {
+    onShownEvent: PopoverShownEvent;
+    onHiddenEvent: PopoverHiddenEvent;
+};
+export type { Events, Placement };

package/dist/components/searchpopover/searchpopover.types.js

@@ -0,0 +1 @@
+export {};