@momentum-design/components 0.53.0 → 0.53.2

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

@@ -1,4 +1,6 @@
 import FilterChip from './filterchip.component';
+import '../text';
+import '../icon';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-filterchip']: FilterChip;

package/dist/components/filterchip/index.js

@@ -1,4 +1,6 @@
 import FilterChip from './filterchip.component';
 import { TAG_NAME } from './filterchip.constants';
+import '../text';
+import '../icon';
 FilterChip.register(TAG_NAME);
 export default FilterChip;

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -20,14 +20,18 @@ const styles = [
 
     .mdc-label-text,
     .mdc-help-text {
-      font-size: var(--mds-font-size-body-midsize);
-      line-height: var(--mds-font-lineheight-body-midsize);
       display: flex;
       align-items: center;
       gap: 0.5rem;
       width: 100%;
     }
 
+    .mdc-label, .mdc-help-text{
+      font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+      line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    }
+
     .mdc-label {
       color: var(--mds-color-theme-text-primary-normal);
       overflow: hidden;

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

@@ -167,7 +167,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
        * If the key pressed is 'Enter', it submits the form.
        * @param event - Keyboard event
        */
-    private handleKeyDown;
+    protected handleKeyDown(event: KeyboardEvent): void;
     /**
      * Renders the leading icon before the input field.
      * If the leading icon is not set, it will not be displayed.
@@ -189,13 +189,13 @@ declare class Input extends Input_base implements AssociatedFormControl {
     /**
      * Clears the input field.
      */
-    private clearInputText;
+    protected clearInputText(): void;
     /**
      * Renders the trailing button to clear the input field if the trailingButton is set to true.
      * @returns void
      */
-    protected renderTrailingButton(): import("lit-html").TemplateResult<1> | typeof nothing;
-    protected renderInputElement(type: InputType): import("lit-html").TemplateResult<1>;
+    protected renderTrailingButton(show?: boolean): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderInputElement(type: InputType, hidePlaceholder?: boolean): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -275,25 +275,27 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * Renders the trailing button to clear the input field if the trailingButton is set to true.
      * @returns void
      */
-    renderTrailingButton() {
-        if (!this.trailingButton || !this.value) {
+    renderTrailingButton(show = false) {
+        const showBtn = show || (this.value && this.trailingButton);
+        if (!showBtn) {
             return nothing;
         }
         return html `
       <mdc-button 
         part='trailing-button'
-        class='own-focus-ring ${!this.value ? 'hidden' : ''}'
+        class='own-focus-ring ${!showBtn ? 'hidden' : ''}'
         prefix-icon='${DEFAULTS.CLEAR_BUTTON_ICON}'
         variant='${DEFAULTS.CLEAR_BUTTON_VARIANT}'
         size="${DEFAULTS.CLEAR_BUTTON_SIZE}"
         aria-label="${this.clearAriaLabel}"
         @click=${this.clearInputText}
-        ?disabled=${this.disabled || this.readonly || !this.value}
+        ?disabled=${this.disabled || this.readonly || !showBtn}
       ></mdc-button>
     `;
     }
-    renderInputElement(type) {
+    renderInputElement(type, hidePlaceholder = false) {
         var _a;
+        const placeholderText = hidePlaceholder ? '' : this.placeholder;
         return html `<input 
                   aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
                   class='input'
@@ -307,7 +309,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                   type="${type}"
                   aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
                   aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
-                  placeholder=${ifDefined(this.placeholder)}
+                  placeholder=${ifDefined(placeholderText)}
                   minlength=${ifDefined(this.minlength)}
                   maxlength=${ifDefined(this.maxlength)}
                   autocapitalize=${this.autocapitalize}

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

@@ -4,7 +4,7 @@ const styles = [css `
   :host{
     --mdc-input-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
     --mdc-input-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-input-disabled-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-input-disabled-background-color: var(--mds-color-theme-background-input-disabled);
     --mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
     --mdc-input-text-color: var(--mds-color-theme-text-primary-normal);
     --mdc-input-background-color: var(--mds-color-theme-background-primary-ghost);
@@ -12,7 +12,7 @@ const styles = [css `
     --mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
     --mdc-input-support-text-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-input-hover-background-color: var(--mds-color-theme-background-primary-hover);
-    --mdc-input-focused-background-color: var(--mds-color-theme-background-primary-active);
+    --mdc-input-focused-background-color: var(--mds-color-theme-background-primary-ghost);
     --mdc-input-focused-border-color: var(--mds-color-theme-outline-input-active);
     --mdc-input-error-border-color: var(--mds-color-theme-text-error-normal);
     --mdc-input-warning-border-color: var(--mds-color-theme-text-warning-normal);
@@ -24,6 +24,10 @@ const styles = [css `
     width: 100%;
   }
 
+  input{
+    font-family: inherit;
+  }
+
   :host([readonly]) .leading-icon {
     color: var(--mdc-input-support-text-color);
   }
@@ -34,19 +38,15 @@ const styles = [css `
     color: var(--mdc-input-disabled-text-color);
   }
 
-  :host([disabled]) .input,
-  :host([readonly]) .input{
-    border-color: var(--mdc-input-disabled-border-color);
-    background: var(--mdc-input-disabled-background-color);
-  }
-
   :host([disabled]) .input-container,
+  :host([readonly]) .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,
   :host([disabled][help-text-type="error"]) .input-container,
   :host([disabled][help-text-type="priority"]) .input-container{
     border-color: var(--mdc-input-disabled-border-color);
+    background: var(--mdc-input-disabled-background-color);
   }
 
   .leading-icon{

package/dist/components/option/option.component.js

@@ -11,10 +11,11 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
-import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
+import { TAG_NAME as SELECT_TAG_NAME } from '../select/select.constants';
 import { TYPE } from '../text/text.constants';
+import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import { SELECTED_ICON_NAME, TOOLTIP_ID } from './option.constants';
 import styles from './option.styles';
 /**
@@ -98,7 +99,7 @@ class Option extends FormInternalsMixin(ListItem) {
         tooltip.setAttribute('triggerid', this.id);
         tooltip.setAttribute('visible', '');
         // Add tooltip programmatically after the nearest select component or the parent element.
-        const parent = this.closest('mdc-select') || this.parentElement;
+        const parent = this.closest(SELECT_TAG_NAME) || this.parentElement;
         parent === null || parent === void 0 ? void 0 : parent.after(tooltip);
     }
     /**

package/dist/components/progressbar/progressbar.styles.js

@@ -82,5 +82,6 @@ const styles = [css `
   :host::part(progress-container), :host::part(progress-bar) {
     border: var(--mdc-progressbar-border);
   }
+}
 `];
 export default styles;

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

@@ -18,6 +18,17 @@ declare class Searchfield extends Input {
      * @internal
      */
     isInputFocused: boolean;
+    /**
+     * @internal
+     */
+    hasInputChips: boolean;
+    /**
+     * Handles the keydown event of the search field.
+     * If the key pressed is 'Enter', it submits the form.
+     * If the key pressed is 'Escape', it clears the input text.
+     * @param event - Keyboard event
+     */
+    handleKeyDown(event: KeyboardEvent): void;
     connectedCallback(): void;
     /**
      * This method is used to render the input chips inside filters slot.
@@ -30,6 +41,7 @@ declare class Searchfield extends Input {
      * @override
      */
     firstUpdated(): void;
+    clearInputText(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -32,6 +32,22 @@ class Searchfield extends Input {
          * @internal
          */
         this.isInputFocused = false;
+        /**
+         * @internal
+         */
+        this.hasInputChips = false;
+    }
+    /**
+     * Handles the keydown event of the search field.
+     * If the key pressed is 'Enter', it submits the form.
+     * If the key pressed is 'Escape', it clears the input text.
+     * @param event - Keyboard event
+     */
+    handleKeyDown(event) {
+        super.handleKeyDown(event);
+        if (event.key === 'Escape') {
+            this.clearInputText();
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -48,9 +64,11 @@ class Searchfield extends Input {
      * It will remove any elements that are not input chips.
      */
     renderInputChips() {
+        var _a;
+        this.hasInputChips = !!((_a = this.inputChips) === null || _a === void 0 ? void 0 : _a.length);
         if (this.inputChips) {
             this.inputChips.forEach((element) => {
-                if (!element.matches('mdc-inputchip')) {
+                if (!element.matches(DEFAULTS.INPUT_CHIP_TAG)) {
                     element.remove();
                 }
             });
@@ -69,6 +87,14 @@ class Searchfield extends Input {
             this.isInputFocused = false;
         };
     }
+    clearInputText() {
+        var _a;
+        super.clearInputText();
+        (_a = this.inputChips) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+            // Dispatch the custom 'remove' event from inputChip
+            element.dispatchEvent(new CustomEvent('remove', { bubbles: true, composed: true }));
+        });
+    }
     render() {
         return html `
     ${this.renderLabelElement()}
@@ -77,15 +103,15 @@ class Searchfield extends Input {
             'mdc-focus-ring': this.isInputFocused,
         })}" part="input-container">
     ${this.renderLeadingIcon()}
-      <div part='scrollable-container'>
+      <div part='scrollable-container' tabindex='-1'>
       <div part="filters-container" 
       @click=${() => this.inputElement.focus()} 
       @keydown=${(e) => e.key === 'Enter' ? this.inputElement.focus() : null} 
       @keyup=${(e) => e.key === ' ' ? this.inputElement.focus() : null}>
         <slot name="filters" @slotchange=${this.renderInputChips}></slot></div>
-      ${this.renderInputElement(DEFAULTS.TYPE)}
+      ${this.renderInputElement(DEFAULTS.TYPE, this.hasInputChips)}
       </div>
-      ${this.renderTrailingButton()}
+      ${this.renderTrailingButton(this.hasInputChips)}
     </div>
   `;
     }
@@ -99,4 +125,8 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Searchfield.prototype, "isInputFocused", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Searchfield.prototype, "hasInputChips", void 0);
 export default Searchfield;

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

@@ -3,5 +3,6 @@ declare const DEFAULTS: {
     TYPE: "search";
     ICON: "search-bold";
     CLOSE_BTN: boolean;
+    INPUT_CHIP_TAG: "mdc-inputchip";
 };
 export { TAG_NAME, DEFAULTS };

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

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

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

@@ -4,12 +4,12 @@ const styles = css `
 :host::part(filters-container){
   display: flex;
   gap: 0.25rem;
-  margin: 0.25rem;
+  margin: 0.25rem 0;
 }
 
 .input {
   white-space: nowrap;
-  min-width: 50%;
+  min-width: 90%;
 }
 
 .input::-webkit-search-cancel-button {

package/dist/components/textarea/textarea.styles.js

@@ -4,7 +4,7 @@ const styles = [css `
   :host {
     --mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
     --mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-input-disabled);
     --mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
     --mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
     --mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
@@ -14,7 +14,7 @@ const styles = [css `
     --mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
     --mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
     --mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
-    --mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-active);
+    --mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-ghost);
     --mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
     --mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
     --mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
@@ -25,8 +25,8 @@ const styles = [css `
     color: var(--mdc-input-disabled-text-color);
   }
 
-  :host([disabled])::part(textarea),
-  :host([readonly])::part(textarea){
+  :host([disabled])::part(textarea-container),
+  :host([readonly])::part(textarea-container){
     border-color: var(--mdc-textarea-disabled-border-color);
     background: var(--mdc-textarea-disabled-background-color);
   }