@momentum-design/components 0.53.8 → 0.53.9

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

@@ -1,15 +1,13 @@
-import type { PropertyValues } from 'lit';
-import { CSSResult } from 'lit';
+import { PropertyValues, CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { LinkSize } from './link.types';
-declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
+declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -17,6 +15,11 @@ declare const Link_base: import("../../utils/mixins/index.types").Constructor<im
  *
  * @tagname mdc-link
  *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
  * @cssproperty --mdc-link-border-radius - Border radius of the link
  * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
  * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
@@ -52,31 +55,39 @@ declare class Link extends Link_base {
      */
     size: LinkSize;
     /**
-     * Used to store the previous tabindex value of the host element
-     * null value means that the host element did not have a tabindex attribute.
+     * Href for navigation. The URL that the hyperlink points to
+     */
+    href: string;
+    /**
+     * Optional target: _blank, _self, _parent, _top and _unfencedTop
+     */
+    target: string;
+    /**
+     * Optional rel attribute that defines the relationship of the linked URL as space-separated link types.
+     */
+    rel?: string;
+    /**
+     * Stores the previous tabindex if set by user
+     * so it can be restored after disabling
      * @internal
      */
     private prevTabindex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleNavigation;
     /**
      * Method to get the size of the trailing icon based on the link size.
      * @returns The icon size value and units.
      */
     private getIconSize;
     /**
-     * Updates the tabindex of the host element to disable or enable the link.
-     * When disabled, the link is not focusable or clickable, and tabindex is set to -1
-     * and aria-disabled attribute is set to true
-     * When link is not disabled, the previous tabindex of the host element is restored
-     * and aria-disabled attribute is removed.
+     * Sets or removes `aria-disabled` and updates `tabIndex` to reflect
+     * the disabled state. When disabled, the element becomes unfocusable;
+     * when enabled, the previous `tabIndex` is restored.
      *
-     * @param disabled - The disabled state of icon
+     * @param disabled - Whether the element should be disabled
      */
     private setDisabled;
-    /**
-     * Method to create and append trailing icon to the first anchor element in the slot.
-     * If no icon name is provided, no icon will be rendered.
-     */
-    private updateTrailingIcon;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/link/link.component.js

@@ -7,20 +7,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
 import styles from './link.styles';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -28,6 +28,11 @@ import styles from './link.styles';
  *
  * @tagname mdc-link
  *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
  * @cssproperty --mdc-link-border-radius - Border radius of the link
  * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
  * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
@@ -40,7 +45,7 @@ import styles from './link.styles';
  * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
  */
-class Link extends DisabledMixin(IconNameMixin(Component)) {
+class Link extends DisabledMixin(TabIndexMixin(IconNameMixin(Component))) {
     constructor() {
         super(...arguments);
         /**
@@ -65,11 +70,37 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
          */
         this.size = DEFAULTS.LINK_SIZE;
         /**
-         * Used to store the previous tabindex value of the host element
-         * null value means that the host element did not have a tabindex attribute.
+         * Href for navigation. The URL that the hyperlink points to
+         */
+        this.href = '#';
+        /**
+         * Optional target: _blank, _self, _parent, _top and _unfencedTop
+         */
+        this.target = '_self';
+        /**
+         * Stores the previous tabindex if set by user
+         * so it can be restored after disabling
          * @internal
          */
-        this.prevTabindex = null;
+        this.prevTabindex = 0;
+        this.handleNavigation = (e) => {
+            if ((e.type === 'click' || (e instanceof KeyboardEvent && e.key === 'Enter')) && this.href) {
+                if (this.disabled)
+                    return;
+                window.open(this.href, this.target, this.rel);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'link');
+        this.addEventListener('click', this.handleNavigation);
+        this.addEventListener('keydown', this.handleNavigation);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleNavigation);
+        this.removeEventListener('keydown', this.handleNavigation);
     }
     /**
      * Method to get the size of the trailing icon based on the link size.
@@ -86,45 +117,25 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
         }
     }
     /**
-     * Updates the tabindex of the host element to disable or enable the link.
-     * When disabled, the link is not focusable or clickable, and tabindex is set to -1
-     * and aria-disabled attribute is set to true
-     * When link is not disabled, the previous tabindex of the host element is restored
-     * and aria-disabled attribute is removed.
+     * Sets or removes `aria-disabled` and updates `tabIndex` to reflect
+     * the disabled state. When disabled, the element becomes unfocusable;
+     * when enabled, the previous `tabIndex` is restored.
      *
-     * @param disabled - The disabled state of icon
+     * @param disabled - Whether the element should be disabled
      */
     setDisabled(disabled) {
         if (disabled) {
-            this.prevTabindex = this.hasAttribute('tabindex') ? this.tabIndex : null;
-            this.tabIndex = -1;
             this.setAttribute('aria-disabled', 'true');
-        }
-        else if (this.prevTabindex === null) {
-            this.removeAttribute('tabindex');
-            this.removeAttribute('aria-disabled');
+            this.prevTabindex = this.tabIndex;
+            this.tabIndex = -1;
         }
         else {
-            this.tabIndex = this.prevTabindex;
+            if (this.tabIndex === -1) {
+                this.tabIndex = this.prevTabindex;
+            }
             this.removeAttribute('aria-disabled');
         }
     }
-    /**
-     * Method to create and append trailing icon to the first anchor element in the slot.
-     * If no icon name is provided, no icon will be rendered.
-     */
-    updateTrailingIcon() {
-        var _a, _b;
-        const anchorElement = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements({ flatten: true }).find((element) => element.tagName === 'A');
-        const iconSize = this.getIconSize();
-        if (this.iconName && anchorElement) {
-            const trailingIcon = document.createElement('mdc-icon');
-            trailingIcon.setAttribute('name', this.iconName);
-            trailingIcon.setAttribute('size', `${iconSize}`);
-            trailingIcon.setAttribute('length-unit', 'rem');
-            anchorElement.appendChild(trailingIcon);
-        }
-    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('disabled')) {
@@ -133,9 +144,14 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
     }
     render() {
         return html `
-      <div part='link-container' class='mdc-focus-ring'>
-        <slot @slotchange=${this.updateTrailingIcon}></slot>
-      </div>
+      <slot></slot>
+      ${this.iconName ? html `
+        <mdc-icon
+          name=${this.iconName}
+          size=${this.getIconSize()}
+          length-unit="rem"
+        ></mdc-icon>
+      ` : nothing}
     `;
     }
 }
@@ -152,4 +168,16 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Link.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Link.prototype, "href", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Link.prototype, "target", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Link.prototype, "rel", void 0);
 export default Link;

package/dist/components/link/link.styles.js

@@ -1,9 +1,7 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [hostFitContentStyles, css `
-
   :host {
-
     --mdc-link-border-radius: 0.25rem;
     --mdc-link-color-active: var(--mds-color-theme-text-accent-active);
     --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
@@ -15,49 +13,50 @@ const styles = [hostFitContentStyles, css `
     --mdc-link-inverted-color-hover: var(--mds-color-theme-inverted-text-accent-hover);
     --mdc-link-inverted-color-normal: var(--mds-color-theme-inverted-text-accent-normal);
     --mdc-link-text-decoration-disabled: underline;
-  }
 
-  :host::part(link-container){
     border-radius: var(--mdc-link-border-radius);
     color: var(--mdc-link-color-normal);
-  }
-
-  ::slotted(a) {
-    outline: none;
-    align-items: center;
-    color: inherit;
-    display: flex;
     gap: var(--mdc-link-icon-margin-left);
-    text-decoration: inherit;
     text-underline-offset: auto;
     text-underline-position: from-font;
+    cursor: pointer;
   }
 
-  :host(:hover)::part(link-container) {
-    color: var(--mdc-link-color-hover);
+  :host([inline]) {
+    display: inline-flex;
   }
 
-  :host(:active)::part(link-container) {
-    color: var(--mdc-link-color-active);
+  :host(:hover) {
+    color: var(--mdc-link-color-hover);
   }
 
-  :host([inline]) {
-    display: inline-flex;
+  :host(:active) {
+    color: var(--mdc-link-color-active);
+    box-shadow: none;
   }
 
-  :host([inverted])::part(link-container) {
+  :host([inverted]) {
     color: var(--mdc-link-inverted-color-normal);
   }
 
-  :host([inverted]:hover)::part(link-container) {
+  :host([inverted]:hover) {
     color: var(--mdc-link-inverted-color-hover);
   }
 
-  :host([inverted]:active)::part(link-container) {
+  :host([inverted]:active) {
     color: var(--mdc-link-inverted-color-active);
   }
 
-  :host([size="large"])::part(link-container) {
+  :host([disabled]) {
+    color: var(--mdc-link-color-disabled);
+    pointer-events: none;
+  }
+
+  :host([inverted][disabled]) {
+    color: var(--mdc-link-inverted-color-disabled);
+  }
+
+  :host([size="large"]) {
     font-size: var(--mds-font-apps-body-large-regular-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-line-height);
@@ -65,7 +64,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([size="midsize"])::part(link-container) {
+  :host([size="midsize"]) {
     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);
@@ -73,7 +72,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([size="small"])::part(link-container) {
+  :host([size="small"]) {
     font-size: var(--mds-font-apps-body-small-regular-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-line-height);
@@ -81,9 +80,9 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-small-regular-text-case);
   }
 
-  :host([size="large"]:hover)::part(link-container),
-  :host([size="large"]:active)::part(link-container),
-  :host([size="large"][inline])::part(link-container) {
+  :host([size="large"]:hover),
+  :host([size="large"]:active),
+  :host([size="large"][inline]) {
     font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
@@ -91,9 +90,9 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
   }
 
-  :host([size="midsize"]:hover)::part(link-container),
-  :host([size="midsize"]:active)::part(link-container),
-  :host([size="midsize"][inline])::part(link-container) {
+  :host([size="midsize"]:hover),
+  :host([size="midsize"]:active),
+  :host([size="midsize"][inline]) {
     font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
@@ -101,28 +100,15 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
   }
 
-  :host([size="small"]:hover)::part(link-container),
-  :host([size="small"]:active)::part(link-container),
-  :host([size="small"][inline])::part(link-container) {
+  :host([size="small"]:hover),
+  :host([size="small"]:active),
+  :host([size="small"][inline]) {
     font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
     text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
   }
-
-  :host([disabled])::part(link-container) {
-    color: var(--mdc-link-color-disabled);
-    pointer-events: none;
-  }
-
-  :host([inverted][disabled])::part(link-container) {
-    color: var(--mdc-link-inverted-color-disabled);
-  }
-`, ...hostFocusRingStyles(true),
-    css `
-  :host(:active)::part(link-container) {
-    box-shadow: none;
-  }
-`];
+`, ...hostFocusRingStyles(),
+];
 export default styles;

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

@@ -1,4 +1,10 @@
 import type { ValueOf } from '../../utils/types';
 import { LINK_SIZES } from './link.constants';
 type LinkSize = ValueOf<typeof LINK_SIZES>;
-export type { LinkSize };
+interface Events {
+    onClickEvent: MouseEvent;
+    onBlurEvent: Event;
+    onKeyDownEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+}
+export type { LinkSize, Events };