@momentum-design/components 0.42.0 → 0.43.1

package/dist/components/alertchip/alertchip.styles.js

@@ -8,6 +8,7 @@ const styles = css `
     border-radius: 0.25rem;
     border: 1px solid;
     cursor: pointer;
+    white-space: nowrap;
     
     --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
     --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);

package/dist/components/chip/chip.styles.js

@@ -8,6 +8,7 @@ const styles = css `
     border-radius: 0.25rem;
     border: 1px solid;
     cursor: pointer;
+    white-space: nowrap;
     
     --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
     --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);

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

@@ -1,7 +1,7 @@
 import { CSSResult, nothing, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
-import type { AutoCapitalizeType } from './input.types';
+import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
@@ -86,7 +86,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * The autocomplete attribute of the input field.
      * @default 'off'
      */
-    autocomplete: any;
+    autocomplete: AutoCompleteType;
     /**
      * If true, the input field is focused when the component is rendered.
      * @default false
@@ -195,6 +195,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @returns void
      */
     protected renderTrailingButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderInputElement(type: InputType): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './input.styles';
 import FormfieldWrapper from '../formfieldwrapper';
-import { AUTO_CAPITALIZE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
+import { AUTO_CAPITALIZE, AUTO_COMPLETE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
@@ -82,7 +82,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * The autocomplete attribute of the input field.
          * @default 'off'
          */
-        this.autocomplete = 'off';
+        this.autocomplete = AUTO_COMPLETE.OFF;
         /**
          * If true, the input field is focused when the component is rendered.
          * @default false
@@ -276,7 +276,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @returns void
      */
     renderTrailingButton() {
-        if (!this.trailingButton) {
+        if (!this.trailingButton || !this.value) {
             return nothing;
         }
         return html `
@@ -292,43 +292,44 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       ></mdc-button>
     `;
     }
-    render() {
+    renderInputElement(type) {
         var _a;
+        return html `<input 
+                  aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+                  class='input'
+                  part='input'
+                  id="${this.id}"
+                  name="${this.name}"
+                  .value="${this.value}"
+                  ?disabled="${this.disabled}"
+                  ?readonly="${this.readonly}"
+                  ?required="${!!this.requiredLabel}"
+                  type="${type}"
+                  aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+                  aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
+                  placeholder=${ifDefined(this.placeholder)}
+                  minlength=${ifDefined(this.minlength)}
+                  maxlength=${ifDefined(this.maxlength)}
+                  autocapitalize=${this.autocapitalize}
+                  autocomplete=${this.autocomplete}
+                  ?autofocus="${this.autofocus}"
+                  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}
+                />`;
+    }
+    render() {
         return html `
       ${this.renderLabel()}
       <div class="input-container mdc-focus-ring" part="input-container">
         <slot name="input-leading-icon">${this.renderLeadingIcon()}</slot>
        <div class="input-section" part="input-section">
        <slot name="input-prefix-text">${this.renderPrefixText()}</slot>
-        <slot name="input">
-          <input 
-            aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-            class='input'
-            part='input'
-            id="${this.id}"
-            name="${this.name}"
-            .value="${this.value}"
-            ?disabled="${this.disabled}"
-            ?readonly="${this.readonly}"
-            ?required="${!!this.requiredLabel}"
-            type="text"
-            aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
-            aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
-            placeholder=${ifDefined(this.placeholder)}
-            minlength=${ifDefined(this.minlength)}
-            maxlength=${ifDefined(this.maxlength)}
-            autocapitalize=${this.autocapitalize}
-            autocomplete=${this.autocomplete}
-            ?autofocus="${this.autofocus}"
-            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}
-          />
-        </slot>
+        <slot name="input">${this.renderInputElement(DEFAULTS.INPUT_TYPE)}</slot>
        </div>
         <slot name="trailing-button">${this.renderTrailingButton()}</slot>
       </div>
@@ -371,7 +372,7 @@ __decorate([
 ], Input.prototype, "autocapitalize", void 0);
 __decorate([
     property({ type: String }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Input.prototype, "autocomplete", void 0);
 __decorate([
     property({ type: Boolean }),

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

@@ -7,6 +7,14 @@ declare const AUTO_CAPITALIZE: {
     readonly WORDS: "words";
     readonly CHARACTERS: "characters";
 };
+declare const AUTO_COMPLETE: {
+    readonly OFF: "off";
+    readonly ON: "on";
+};
+declare const INPUT_TYPE: {
+    readonly TEXT: "text";
+    readonly SEARCH: "search";
+};
 declare const PREFIX_TEXT_OPTIONS: {
     MAX_LENGTH: number;
     VALIDATION: "error";
@@ -20,5 +28,7 @@ declare const DEFAULTS: {
     CLEAR_BUTTON_SIZE: 20;
     PREFIX_TEXT_TYPE: "body-midsize-regular";
     PREFIX_TEXT_TAG: "span";
+    AUTO_COMPLETE: "off";
+    INPUT_TYPE: "text";
 };
-export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, DEFAULTS };
+export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE, DEFAULTS };

package/dist/components/input/input.constants.js

@@ -11,6 +11,14 @@ const AUTO_CAPITALIZE = {
     WORDS: 'words',
     CHARACTERS: 'characters',
 };
+const AUTO_COMPLETE = {
+    OFF: 'off',
+    ON: 'on',
+};
+const INPUT_TYPE = {
+    TEXT: 'text',
+    SEARCH: 'search',
+};
 const PREFIX_TEXT_OPTIONS = {
     MAX_LENGTH: 10,
     VALIDATION: VALIDATION.ERROR,
@@ -24,5 +32,7 @@ const DEFAULTS = {
     CLEAR_BUTTON_SIZE: ICON_BUTTON_SIZES[20],
     PREFIX_TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
     PREFIX_TEXT_TAG: VALID_TEXT_TAGS.SPAN,
+    AUTO_COMPLETE: AUTO_COMPLETE.OFF,
+    INPUT_TYPE: INPUT_TYPE.TEXT,
 };
-export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, DEFAULTS };
+export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE, DEFAULTS };

package/dist/components/input/input.styles.js

@@ -40,6 +40,7 @@ const styles = [css `
     background: var(--mdc-input-disabled-background-color);
   }
 
+  :host([disabled]) .input-container,
   :host([disabled][help-text-type="default"]) .input-container,
   :host([disabled][help-text-type="success"]) .input-container,
   :host([disabled][help-text-type="warning"]) .input-container,

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

@@ -1,4 +1,6 @@
 import type { ValueOf } from '../../utils/types';
-import { AUTO_CAPITALIZE } from './input.constants';
+import { AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE } from './input.constants';
 type AutoCapitalizeType = ValueOf<typeof AUTO_CAPITALIZE>;
-export { AutoCapitalizeType };
+type AutoCompleteType = ValueOf<typeof AUTO_COMPLETE>;
+type InputType = ValueOf<typeof INPUT_TYPE>;
+export { AutoCapitalizeType, AutoCompleteType, InputType };

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

@@ -14,10 +14,7 @@ declare const InputChip_base: import("../../utils/mixins/index.types").Construct
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @event click - (React: onClick) This event is dispatched when the close button is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
- * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.
  *
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.

package/dist/components/inputchip/inputchip.component.js

@@ -27,10 +27,7 @@ import { DEFAULTS } from './inputchip.constants';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @event click - (React: onClick) This event is dispatched when the close button is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
- * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.
  *
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
@@ -76,10 +73,8 @@ class InputChip extends IconNameMixin(DisabledMixin(Component)) {
      * Handles the behavior of the close button on click event.
      * @param event - The event object.
      */
-    handleClose(event) {
-        event.stopPropagation(); // Prevents triggering click event twice
-        const EventConstructor = event.constructor;
-        this.dispatchEvent(new EventConstructor(event.type, event));
+    handleClose() {
+        this.dispatchEvent(new CustomEvent('remove', { bubbles: true, composed: true }));
     }
     render() {
         return html `

package/dist/components/inputchip/inputchip.styles.js

@@ -7,7 +7,7 @@ const styles = css `
     padding: 0 0.25rem 0 0.5rem;
     border-radius: 0.25rem;
     border: 1px solid;
-    cursor: pointer;
+    white-space: nowrap;
 
     --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
     --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);

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

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

package/dist/components/searchfield/index.js

@@ -0,0 +1,7 @@
+import Searchfield from './searchfield.component';
+import { TAG_NAME } from './searchfield.constants';
+import '../button';
+import '../icon';
+import '../text';
+Searchfield.register(TAG_NAME);
+export default Searchfield;

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

@@ -0,0 +1,36 @@
+import { CSSResult } from 'lit';
+import Input from '../input/input.component';
+/**
+ * searchfield component is used as an input field for search functionality.
+ *
+ * It supports `mdc-inputchip` as filters.
+ *
+ * This component is built by extending the `mdc-input` component.
+ *
+ * @tagname mdc-searchfield
+ *
+ * @slot filters - Slot for input chips
+ *
+ */
+declare class Searchfield extends Input {
+    inputChips?: Array<HTMLElement>;
+    /**
+     * @internal
+     */
+    isInputFocused: boolean;
+    connectedCallback(): void;
+    /**
+     * This method is used to render the input chips inside filters slot.
+     * It will remove any elements that are not input chips.
+     */
+    private renderInputChips;
+    /**
+     * This sets the focus ring state based on the input focus state.
+     * Eventually, this logic has to be omitted and achieved using CSS instead.
+     * @override
+     */
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Searchfield;

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

@@ -0,0 +1,98 @@
+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 { queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+import styles from './searchfield.styles';
+import Input from '../input/input.component';
+import { DEFAULTS } from './searchfield.constants';
+/**
+ * searchfield component is used as an input field for search functionality.
+ *
+ * It supports `mdc-inputchip` as filters.
+ *
+ * This component is built by extending the `mdc-input` component.
+ *
+ * @tagname mdc-searchfield
+ *
+ * @slot filters - Slot for input chips
+ *
+ */
+class Searchfield extends Input {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.isInputFocused = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.leadingIcon = DEFAULTS.ICON;
+        this.trailingButton = DEFAULTS.CLOSE_BTN;
+        this.helpText = undefined;
+        this.helpTextType = undefined;
+        this.requiredLabel = undefined;
+        this.validationMessage = undefined;
+        this.prefixText = undefined;
+    }
+    /**
+     * This method is used to render the input chips inside filters slot.
+     * It will remove any elements that are not input chips.
+     */
+    renderInputChips() {
+        if (this.inputChips) {
+            this.inputChips.forEach((element) => {
+                if (!element.matches('mdc-inputchip')) {
+                    element.remove();
+                }
+            });
+        }
+    }
+    /**
+     * This sets the focus ring state based on the input focus state.
+     * Eventually, this logic has to be omitted and achieved using CSS instead.
+     * @override
+     */
+    firstUpdated() {
+        this.inputElement.onfocus = () => {
+            this.isInputFocused = true;
+        };
+        this.inputElement.onblur = () => {
+            this.isInputFocused = false;
+        };
+    }
+    render() {
+        return html `
+    ${this.renderLabelElement()}
+    <div class="${classMap({
+            'input-container': true,
+            'mdc-focus-ring': this.isInputFocused,
+        })}" part="input-container">
+    ${this.renderLeadingIcon()}
+      <div part='scrollable-container'>
+      <div part="filters-container"><slot name="filters" @slotchange=${this.renderInputChips}></slot></div>
+      ${this.renderInputElement(DEFAULTS.TYPE)}
+      </div>
+      ${this.renderTrailingButton()}
+    </div>
+  `;
+    }
+}
+Searchfield.styles = [...Input.styles, ...styles];
+__decorate([
+    queryAssignedElements({ slot: 'filters' }),
+    __metadata("design:type", Array)
+], Searchfield.prototype, "inputChips", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Searchfield.prototype, "isInputFocused", void 0);
+export default Searchfield;

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

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-searchfield";
+declare const DEFAULTS: {
+    TYPE: "search";
+    ICON: "search-bold";
+    CLOSE_BTN: boolean;
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/searchfield/searchfield.constants.js

@@ -0,0 +1,9 @@
+import utils from '../../utils/tag-name';
+import { INPUT_TYPE } from '../input/input.constants';
+const TAG_NAME = utils.constructTagName('searchfield');
+const DEFAULTS = {
+    TYPE: INPUT_TYPE.SEARCH,
+    ICON: 'search-bold',
+    CLOSE_BTN: true,
+};
+export { TAG_NAME, DEFAULTS };

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

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

package/dist/components/searchfield/searchfield.styles.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+const styles = css `
+
+:host::part(filters-container){
+  display: flex;
+  gap: 0.25rem;
+  margin: 0.25rem;
+}
+
+.input {
+  white-space: nowrap;
+  min-width: 50%;
+}
+
+.input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    pointer-events: none;
+  }
+
+  :host::part(scrollable-container){
+    display: flex;
+    flex-grow: 1;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    position: relative;
+    scrollbar-width: none;
+  }
+
+`;
+export default [styles];