@momentum-design/components 0.16.4 → 0.16.6

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

@@ -136,8 +136,8 @@ class Icon extends Component {
         var _a;
         if (this.computedIconSize && (this.lengthUnit || this.lengthUnitFromContext)) {
             const value = `${this.computedIconSize}${(_a = this.lengthUnit) !== null && _a !== void 0 ? _a : this.lengthUnitFromContext}`;
-            this.style.width = value;
-            this.style.height = value;
+            // set the computed icon size as a css variable to be used in the icon styles
+            this.style.setProperty('--computed-icon-size', value);
         }
     }
     setRoleOnIcon() {

package/dist/components/icon/icon.styles.js

@@ -5,6 +5,10 @@ const styles = [
     css `
     :host {
       --mdc-icon-fill-color: currentColor;
+      --mdc-icon-computed-size: var(--computed-icon-size);
+
+      height: var(--mdc-icon-computed-size);
+      width: var(--mdc-icon-computed-size);
     }
     :host::part(icon) {
       height: 100%;

package/dist/custom-elements.json

@@ -3089,6 +3089,70 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/LabelMixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "LabelMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "public",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LabelMixin",
+          "declaration": {
+            "name": "LabelMixin",
+            "module": "utils/mixins/LabelMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/TabIndexMixin.js",

package/dist/utils/mixins/LabelMixin.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface LabelMixinInterface {
+    label: string;
+    renderLabel(): void;
+}
+export declare const LabelMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<LabelMixinInterface> & T;

package/dist/utils/mixins/LabelMixin.js

@@ -0,0 +1,39 @@
+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 { nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+export const LabelMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * The label of the input field. It is linked to the input field using the `for` attribute.
+             */
+            this.label = '';
+        }
+        /**
+         * creates the label element when the label property is set.
+         * id is used to link the label with the input field.
+         * @returns void
+         */
+        renderLabel() {
+            if (!this.label) {
+                return nothing;
+            }
+            return html `<label for="${this.id}" class='mdc-label'>${this.label}</label>`;
+        }
+    }
+    __decorate([
+        property({ reflect: true, type: String }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "label", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

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