@momentum-design/components 0.62.3 → 0.62.4

package/dist/utils/mixins/CardComponentMixin.js

@@ -0,0 +1,130 @@
+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 { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DEFAULTS } from '../../components/card/card.constants';
+export const CardComponentMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+           * The title of the card - part of header section
+           * @default ''
+           */
+            this.cardTitle = '';
+            /**
+             * The subtitle of the card - part of header section
+             * @default ''
+             */
+            this.subtitle = '';
+            /**
+             * The image source URL to render on the card
+             * @default ''
+             */
+            this.imageSrc = '';
+            /**
+             * The image alt for accessibility support
+             * @default ''
+             */
+            this.imageAlt = '';
+            /**
+             * The variant of the card. It can either be set to 'border' or 'ghost'
+             * @default 'border'
+             */
+            this.variant = DEFAULTS.VARIANT;
+            /**
+             * The orientation of the card. It can either be set to 'vertical' or 'horizontal'
+             * @default 'vertical'
+             */
+            this.orientation = DEFAULTS.ORIENTATION;
+            /**
+             * The tag name for the card title. It supports all the types that `msc-text` supports
+             * @default 'span'
+             */
+            this.titleTagName = DEFAULTS.TAGNAME;
+            /**
+             * The tag name for the subtitle. It supports all the types that `msc-text` supports
+             * @default 'span'
+             */
+            this.subtitleTagName = DEFAULTS.TAGNAME;
+        }
+        /**
+      * Renders the image on the card if image source is provided
+      * @returns The image element
+      */
+        renderImage() {
+            if (!this.imageSrc) {
+                return nothing;
+            }
+            return html `<img part="image" src="${this.imageSrc}" alt="${this.imageAlt}"/>`;
+        }
+        /**
+       * Renders the icon on the card if icon name is provided
+       * @returns The icon element
+       */
+        renderIcon() {
+            return this.iconName ? html `<mdc-icon part="icon"
+       size="${DEFAULTS.ICON_SIZE}" 
+       length-unit="${DEFAULTS.ICON_LENGTH_UNIT}" 
+       name="${this.iconName}"></mdc-icon>`
+                : nothing;
+        }
+        /**
+       * Renders the title and subtitle on the card
+       * @returns The title and subtitle elements
+       */
+        renderTitle() {
+            return html `<div part="title-container">
+        <mdc-text part="title" type="${DEFAULTS.TITLE_TYPE}" tagname="${this.titleTagName}">${this.cardTitle}</mdc-text>
+        ${this.subtitle ? html `<mdc-text part="subtitle"
+            type="${DEFAULTS.SUBTITLE_TYPE}" 
+            tagname="${this.subtitleTagName}">${this.subtitle}</mdc-text>` : nothing}
+        </div>`;
+        }
+    }
+    __decorate([
+        property({ type: String, attribute: 'card-title' }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "cardTitle", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "subtitle", void 0);
+    __decorate([
+        property({ type: String, attribute: 'image-src' }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "imageSrc", void 0);
+    __decorate([
+        property({ type: String, attribute: 'image-alt' }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "imageAlt", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "variant", void 0);
+    __decorate([
+        property({ type: String, reflect: true }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "orientation", void 0);
+    __decorate([
+        property({ type: String, attribute: 'title-tag-name' }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "titleTagName", void 0);
+    __decorate([
+        property({ type: String, attribute: 'subtitle-tag-name' }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "subtitleTagName", void 0);
+    __decorate([
+        property({ type: String, attribute: 'icon-name' }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "iconName", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.62.3"
+  "version": "0.62.4"
 }