@momentum-design/components 0.12.5 → 0.12.6

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

@@ -145,11 +145,6 @@ declare class Button extends Component {
      * @param active - The active state.
      */
     private modifyIconName;
-    /**
-     * Sets the class of 'icon' for icon buttons.
-     * @param type - The type of the button.
-     */
-    private setClassBasedOnType;
     /**
      * Sets the variant attribute for the button component.
      * If the provided variant is not included in the BUTTON_VARIANTS,
@@ -174,7 +169,7 @@ declare class Button extends Component {
      */
     private setColor;
     /**
-     * Sets or removes the aria-pressed attribute based on the active state.
+     * Sets the aria-pressed attribute based on the active state.
      *
      * @param element - The target element.
      * @param active - The active state.

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

@@ -157,7 +157,6 @@ class Button extends Component {
         }
         if (changedProperties.has('typeInternal')) {
             this.setSize(this.size);
-            this.setClassBasedOnType(this.typeInternal);
         }
         if (changedProperties.has('prefixIcon') || changedProperties.has('postfixIcon')) {
             this.inferButtonType();
@@ -199,18 +198,6 @@ class Button extends Component {
             }
         }
     }
-    /**
-     * Sets the class of 'icon' for icon buttons.
-     * @param type - The type of the button.
-     */
-    setClassBasedOnType(type) {
-        if (type === BUTTON_TYPE_INTERNAL.ICON) {
-            this.classList.add('mdc-icon-button');
-        }
-        else {
-            this.classList.remove('mdc-icon-button');
-        }
-    }
     /**
      * Sets the variant attribute for the button component.
      * If the provided variant is not included in the BUTTON_VARIANTS,
@@ -252,17 +239,17 @@ class Button extends Component {
         }
     }
     /**
-     * Sets or removes the aria-pressed attribute based on the active state.
+     * Sets the aria-pressed attribute based on the active state.
      *
      * @param element - The target element.
      * @param active - The active state.
      */
     setAriaPressed(element, active) {
         if (active) {
-            element.setAttribute('aria-pressed', '');
+            element.setAttribute('aria-pressed', 'true');
         }
         else {
-            element.removeAttribute('aria-pressed');
+            element.setAttribute('aria-pressed', 'false');
         }
     }
     /**
@@ -275,10 +262,10 @@ class Button extends Component {
      */
     setSoftDisabled(element, softDisabled) {
         if (softDisabled) {
-            element.setAttribute('aria-disabled', '');
+            element.setAttribute('aria-disabled', 'true');
         }
         else {
-            element.removeAttribute('aria-disabled');
+            element.setAttribute('aria-disabled', 'false');
         }
     }
     /**
@@ -292,7 +279,7 @@ class Button extends Component {
      */
     setDisabled(element, disabled) {
         if (disabled) {
-            element.setAttribute('aria-disabled', '');
+            element.setAttribute('aria-disabled', 'true');
             this.prevTabindex = this.tabIndex;
             this.tabIndex = -1;
         }
@@ -349,12 +336,15 @@ class Button extends Component {
         const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().length;
         if (slot && (this.prefixIcon || this.postfixIcon)) {
             this.typeInternal = BUTTON_TYPE_INTERNAL.PILL_WITH_ICON;
+            this.setAttribute('data-btn-type', 'pill-with-icon');
         }
         else if (!slot && (this.prefixIcon || this.postfixIcon)) {
             this.typeInternal = BUTTON_TYPE_INTERNAL.ICON;
+            this.setAttribute('data-btn-type', 'icon');
         }
         else {
             this.typeInternal = BUTTON_TYPE_INTERNAL.PILL;
+            this.setAttribute('data-btn-type', 'pill');
         }
     }
     // Note: @click is attached to each of the children of the button.

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

@@ -47,7 +47,6 @@ const styles = [hostFitContentStyles, css `
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
   }
 
-
   :host([variant="primary"]){
     background: var(--mdc-button-primary-background-color);
     color: var(--mdc-button-primary-color);
@@ -99,12 +98,12 @@ const styles = [hostFitContentStyles, css `
     cursor: auto;
   }
 
-  :host([size="64"].mdc-icon-button), 
-  :host([size="52"].mdc-icon-button), 
-  :host([size="40"].mdc-icon-button), 
-  :host([size="32"].mdc-icon-button),
-  :host([size="28"].mdc-icon-button),
-  :host([size="24"].mdc-icon-button){
+  :host([size="64"][data-btn-type='icon']), 
+  :host([size="52"][data-btn-type='icon']), 
+  :host([size="40"][data-btn-type='icon']), 
+  :host([size="32"][data-btn-type='icon']),
+  :host([size="28"][data-btn-type='icon']),
+  :host([size="24"][data-btn-type='icon']){
     border-radius: 6.25rem;
     aspect-ratio: 1;
     padding: unset;
@@ -145,6 +144,7 @@ const styles = [hostFitContentStyles, css `
   }
   :host([size="20"]){
     height: var(--mdc-button-height-size-20);
+    padding: 0.0625rem;
   }
 
   :host([color="accent"]){

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

@@ -59,9 +59,15 @@ declare class Icon extends Component {
      */
     ariaLabel: string | null;
     private readonly iconProviderContext;
+    private abortController;
+    constructor();
     /**
      * Get Icon Data function which will fetch the icon (currently only svg)
      * and sets state and attributes once fetched successfully
+     *
+     * This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
+     * If the request is aborted after the fetch() call has been fulfilled but before the response body has been read,
+     * then attempting to read the response body will reject with an AbortError exception.
      */
     private getIconData;
     /**

package/dist/components/icon/icon.component.js

@@ -54,7 +54,7 @@ import { DEFAULTS } from './icon.constants';
  */
 class Icon extends Component {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Name of the icon (= filename)
          */
@@ -64,16 +64,23 @@ class Icon extends Component {
          */
         this.ariaLabel = null;
         this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
+        this.abortController = new AbortController(); // Initialize AbortController
     }
     /**
      * Get Icon Data function which will fetch the icon (currently only svg)
      * and sets state and attributes once fetched successfully
+     *
+     * This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
+     * If the request is aborted after the fetch() call has been fulfilled but before the response body has been read,
+     * then attempting to read the response body will reject with an AbortError exception.
      */
     async getIconData() {
         if (this.iconProviderContext.value) {
             const { fileExtension, url } = this.iconProviderContext.value;
             if (url && fileExtension && this.name) {
-                const iconHtml = await dynamicSVGImport(url, this.name, fileExtension);
+                this.abortController.abort();
+                this.abortController = new AbortController();
+                const iconHtml = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
                 // update iconData state once fetched:
                 this.iconData = iconHtml;
                 // when icon got fetched, set role and aria-label:
@@ -122,8 +129,9 @@ class Icon extends Component {
         if (changedProperties.has('name')) {
             // fetch icon data if name changes:
             this.getIconData().catch((err) => {
-                // eslint-disable-next-line no-console
-                console.error(err);
+                if (err.name !== 'AbortError' && this.onerror) {
+                    this.onerror(err);
+                }
             });
         }
         if (changedProperties.has('ariaLabel')) {
@@ -175,4 +183,8 @@ __decorate([
     property({ type: String, attribute: 'aria-label' }),
     __metadata("design:type", Object)
 ], Icon.prototype, "ariaLabel", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", AbortController)
+], Icon.prototype, "abortController", void 0);
 export default Icon;

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

@@ -5,8 +5,10 @@
  * @param url - The base url of the icon
  * @param name - The name of the icon
  * @param fileExtension - The file extension of the icon
+ * @param signal - The signal to abort the fetch.
+ * It is used to cancel the fetch when the component is disconnected or updated.
  * @returns The valid icon element
  * @throws Error if the response is not ok
  */
-declare const dynamicSVGImport: (url: string, name: string, fileExtension: string) => Promise<Element>;
+declare const dynamicSVGImport: (url: string, name: string, fileExtension: string, signal: AbortSignal) => Promise<Element>;
 export { dynamicSVGImport };

package/dist/components/icon/icon.utils.js

@@ -6,11 +6,13 @@
  * @param url - The base url of the icon
  * @param name - The name of the icon
  * @param fileExtension - The file extension of the icon
+ * @param signal - The signal to abort the fetch.
+ * It is used to cancel the fetch when the component is disconnected or updated.
  * @returns The valid icon element
  * @throws Error if the response is not ok
  */
-const dynamicSVGImport = async (url, name, fileExtension) => {
-    const response = await fetch(`${url}/${name}.${fileExtension}`);
+const dynamicSVGImport = async (url, name, fileExtension, signal) => {
+    const response = await fetch(`${url}/${name}.${fileExtension}`, { signal });
     if (!response.ok) {
         throw new Error('There was a problem while fetching the icon!');
     }

package/dist/custom-elements.json

@@ -180,77 +180,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
@@ -512,6 +441,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -660,21 +660,6 @@
               ],
               "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
             },
-            {
-              "kind": "method",
-              "name": "setClassBasedOnType",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The type of the button."
-                }
-              ],
-              "description": "Sets the class of 'icon' for icon buttons."
-            },
             {
               "kind": "method",
               "name": "setVariant",
@@ -740,7 +725,7 @@
                   "description": "The active state."
                 }
               ],
-              "description": "Sets or removes the aria-pressed attribute based on the active state."
+              "description": "Sets the aria-pressed attribute based on the active state."
             },
             {
               "kind": "method",
@@ -1036,11 +1021,20 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "abortController",
+              "type": {
+                "text": "AbortController"
+              },
+              "privacy": "private",
+              "default": "new AbortController()"
+            },
             {
               "kind": "method",
               "name": "getIconData",
               "privacy": "private",
-              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
+              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
             },
             {
               "kind": "method",

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as Bullet } from './bullet';
 export { default as Badge } from './badge';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as Bullet } from './bullet';
 export { default as Badge } from './badge';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.12.5"
+  "version": "0.12.6"
 }