@momentum-design/components 0.53.1 → 0.53.3

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

@@ -76,8 +76,6 @@ declare class Button extends Buttonsimple {
     role: string;
     /** @internal */
     private typeInternal;
-    /** @internal */
-    private iconSize;
     /**
      * @internal
      */

package/dist/components/button/button.component.js

@@ -12,7 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
 import styles from './button.styles';
-import { getIconNameWithoutStyle, getIconSize } from './button.utils';
+import { getIconNameWithoutStyle } from './button.utils';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -79,8 +79,6 @@ class Button extends Buttonsimple {
         this.role = 'button';
         /** @internal */
         this.typeInternal = DEFAULTS.TYPE_INTERNAL;
-        /** @internal */
-        this.iconSize = 1;
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -156,7 +154,6 @@ class Button extends Buttonsimple {
                 && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
             : Object.values(PILL_BUTTON_SIZES).includes(size);
         this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
-        this.iconSize = getIconSize(size);
     }
     /**
      * Sets the color attribute for the button.
@@ -198,7 +195,6 @@ class Button extends Buttonsimple {
             ? html ` <mdc-icon
             name="${this.prefixIcon}"
             part="prefix-icon"
-            size=${this.iconSize}
             length-unit="rem"
           >
           </mdc-icon>`
@@ -208,7 +204,6 @@ class Button extends Buttonsimple {
             ? html ` <mdc-icon
             name="${this.postfixIcon}"
             part="postfix-icon"
-            size=${this.iconSize}
             length-unit="rem"
           >
           </mdc-icon>`
@@ -245,8 +240,4 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], Button.prototype, "typeInternal", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Button.prototype, "iconSize", void 0);
 export default Button;

package/dist/components/button/button.styles.js

@@ -31,6 +31,33 @@ const styles = css `
     --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
     --mdc-button-line-height-size-24: var(--mds-font-lineheight-body-small);
+
+    --mdc-button-prefix-icon-size: 1rem;
+    --mdc-button-postfix-icon-size: 1rem;
+  }
+
+  :host([size="64"]) {
+    --mdc-button-prefix-icon-size: 2rem;
+    --mdc-button-postfix-icon-size: 2rem;
+  }
+
+  :host([size="52"]) {
+    --mdc-button-prefix-icon-size: 1.75rem;
+    --mdc-button-postfix-icon-size: 1.75rem;
+  }
+
+  :host([size="40"]) {
+    --mdc-button-prefix-icon-size: 1.25rem;
+    --mdc-button-postfix-icon-size: 1.25rem;
+  }
+
+  /* Apply icon size for prefix and postfix icons */
+  :host::part(prefix-icon) {
+    --mdc-icon-size: var(--mdc-button-prefix-icon-size);
+  }
+
+  :host::part(postfix-icon) {
+    --mdc-icon-size: var(--mdc-button-postfix-icon-size);
   }
 
   :host([active]){

package/dist/components/button/button.utils.d.ts

@@ -1,11 +1,3 @@
-import { IconButtonSize } from './button.types';
-/**
- * Returns the icon size multiplier based on the provided button size.
- *
- * @param size - The size of the button.
- * @returns The multiplier for the icon size.
- */
-declare const getIconSize: (size: IconButtonSize) => number;
 /**
  * Returns the name of the icon without the style suffix.
  *
@@ -13,4 +5,4 @@ declare const getIconSize: (size: IconButtonSize) => number;
  * @returns The name of the icon without the suffix.
  */
 declare const getIconNameWithoutStyle: (iconName: string) => string;
-export { getIconSize, getIconNameWithoutStyle };
+export { getIconNameWithoutStyle };

package/dist/components/button/button.utils.js

@@ -1,18 +1,3 @@
-import { ICON_BUTTON_SIZES } from './button.constants';
-/**
- * Returns the icon size multiplier based on the provided button size.
- *
- * @param size - The size of the button.
- * @returns The multiplier for the icon size.
- */
-const getIconSize = (size) => {
-    switch (size) {
-        case ICON_BUTTON_SIZES[64]: return 2;
-        case ICON_BUTTON_SIZES[52]: return 1.75;
-        case ICON_BUTTON_SIZES[40]: return 1.25;
-        default: return 1;
-    }
-};
 /**
  * Returns the name of the icon without the style suffix.
  *
@@ -24,4 +9,4 @@ const getIconNameWithoutStyle = (iconName) => {
     const variants = ['bold', 'filled', 'regular', 'light'];
     return iconParts.filter((part) => !variants.includes(part)).join('-');
 };
-export { getIconSize, getIconNameWithoutStyle };
+export { getIconNameWithoutStyle };

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

@@ -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: transparent; // TODO: update with token value
+    --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);
   }

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

@@ -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: transparent;
+    --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);