@momentum-design/components 0.35.0 → 0.36.0

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

@@ -0,0 +1,52 @@
+import Popover from '../popover/popover.component';
+import type { PopoverTrigger } from '../popover/popover.types';
+/**
+ * Coachmark component based on top of the popover component,
+ * with the default value of certain properties changed.
+ *
+ * @dependency mdc-popover
+ *
+ * @tagname mdc-coachmark
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+declare class Coachmark extends Popover {
+    /**
+     * Determines the events that cause the Coachmark to show.
+     * Multiple event names should be separated by spaces.
+     * For example to allow both click and hover, use 'click mouseenter' as the trigger.
+     * - **click**
+     * - **mouseenter**
+     * - **focusin**
+     * - **manual**
+     * @default manual
+     */
+    trigger: PopoverTrigger;
+    /**
+     * The arrow visibility of the Coachmark.
+     * @default true
+     */
+    showArrow: boolean;
+    /**
+     * The close button visibility of the Coachmark.
+     * @default true
+     */
+    closeButton: boolean;
+    /**
+     * Disable aria-expanded attribute on trigger element.
+     * @default true
+     */
+    disableAriaExpanded: boolean;
+    constructor();
+}
+export default Coachmark;

package/dist/components/coachmark/coachmark.component.js

@@ -0,0 +1,82 @@
+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 { property } from 'lit/decorators.js';
+import Popover from '../popover/popover.component';
+import { DEFAULTS } from './coachmark.constants';
+/**
+ * Coachmark component based on top of the popover component,
+ * with the default value of certain properties changed.
+ *
+ * @dependency mdc-popover
+ *
+ * @tagname mdc-coachmark
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+class Coachmark extends Popover {
+    constructor() {
+        super();
+        /**
+         * Determines the events that cause the Coachmark to show.
+         * Multiple event names should be separated by spaces.
+         * For example to allow both click and hover, use 'click mouseenter' as the trigger.
+         * - **click**
+         * - **mouseenter**
+         * - **focusin**
+         * - **manual**
+         * @default manual
+         */
+        this.trigger = DEFAULTS.TRIGGER;
+        /**
+         * The arrow visibility of the Coachmark.
+         * @default true
+         */
+        this.showArrow = DEFAULTS.ARROW;
+        /**
+         * The close button visibility of the Coachmark.
+         * @default true
+         */
+        this.closeButton = DEFAULTS.CLOSE_BUTTON;
+        /**
+         * Disable aria-expanded attribute on trigger element.
+         * @default true
+         */
+        this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
+        this.color = DEFAULTS.COLOR;
+        this.showArrow = DEFAULTS.ARROW;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Coachmark.prototype, "trigger", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-arrow' }),
+    __metadata("design:type", Boolean)
+], Coachmark.prototype, "showArrow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'close-button' }),
+    __metadata("design:type", Boolean)
+], Coachmark.prototype, "closeButton", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
+    __metadata("design:type", Boolean)
+], Coachmark.prototype, "disableAriaExpanded", void 0);
+export default Coachmark;

package/dist/components/coachmark/coachmark.constants.d.ts

@@ -0,0 +1,9 @@
+declare const TAG_NAME: "mdc-coachmark";
+declare const DEFAULTS: {
+    COLOR: "contrast";
+    TRIGGER: "manual";
+    ARROW: boolean;
+    CLOSE_BUTTON: boolean;
+    DISABLE_ARIA_EXPANDED: boolean;
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/coachmark/coachmark.constants.js

@@ -0,0 +1,11 @@
+import utils from '../../utils/tag-name';
+import { COLOR, TRIGGER } from '../popover/popover.constants';
+const TAG_NAME = utils.constructTagName('coachmark');
+const DEFAULTS = {
+    COLOR: COLOR.CONTRAST,
+    TRIGGER: TRIGGER.MANUAL,
+    ARROW: true,
+    CLOSE_BUTTON: true,
+    DISABLE_ARIA_EXPANDED: true,
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/coachmark/index.d.ts

@@ -0,0 +1,8 @@
+import Coachmark from './coachmark.component';
+import '../button';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-coachmark']: Coachmark;
+    }
+}
+export default Coachmark;

package/dist/components/coachmark/index.js

@@ -0,0 +1,5 @@
+import Coachmark from './coachmark.component';
+import { TAG_NAME } from './coachmark.constants';
+import '../button';
+Coachmark.register(TAG_NAME);
+export default Coachmark;