@momentum-design/components 0.35.0 → 0.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,52 @@
1
+ import Popover from '../popover/popover.component';
2
+ import type { PopoverTrigger } from '../popover/popover.types';
3
+ /**
4
+ * Coachmark component based on top of the popover component,
5
+ * with the default value of certain properties changed.
6
+ *
7
+ * @dependency mdc-popover
8
+ *
9
+ * @tagname mdc-coachmark
10
+ *
11
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
12
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
13
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
14
+ * @cssproperty --mdc-popover-border-color - border color of the popover
15
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
16
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
17
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
18
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
19
+ *
20
+ * @slot - Default slot for modal container
21
+ *
22
+ */
23
+ declare class Coachmark extends Popover {
24
+ /**
25
+ * Determines the events that cause the Coachmark to show.
26
+ * Multiple event names should be separated by spaces.
27
+ * For example to allow both click and hover, use 'click mouseenter' as the trigger.
28
+ * - **click**
29
+ * - **mouseenter**
30
+ * - **focusin**
31
+ * - **manual**
32
+ * @default manual
33
+ */
34
+ trigger: PopoverTrigger;
35
+ /**
36
+ * The arrow visibility of the Coachmark.
37
+ * @default true
38
+ */
39
+ showArrow: boolean;
40
+ /**
41
+ * The close button visibility of the Coachmark.
42
+ * @default true
43
+ */
44
+ closeButton: boolean;
45
+ /**
46
+ * Disable aria-expanded attribute on trigger element.
47
+ * @default true
48
+ */
49
+ disableAriaExpanded: boolean;
50
+ constructor();
51
+ }
52
+ export default Coachmark;
@@ -0,0 +1,82 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { property } from 'lit/decorators.js';
11
+ import Popover from '../popover/popover.component';
12
+ import { DEFAULTS } from './coachmark.constants';
13
+ /**
14
+ * Coachmark component based on top of the popover component,
15
+ * with the default value of certain properties changed.
16
+ *
17
+ * @dependency mdc-popover
18
+ *
19
+ * @tagname mdc-coachmark
20
+ *
21
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
22
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
23
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
24
+ * @cssproperty --mdc-popover-border-color - border color of the popover
25
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
26
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
27
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
28
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
29
+ *
30
+ * @slot - Default slot for modal container
31
+ *
32
+ */
33
+ class Coachmark extends Popover {
34
+ constructor() {
35
+ super();
36
+ /**
37
+ * Determines the events that cause the Coachmark to show.
38
+ * Multiple event names should be separated by spaces.
39
+ * For example to allow both click and hover, use 'click mouseenter' as the trigger.
40
+ * - **click**
41
+ * - **mouseenter**
42
+ * - **focusin**
43
+ * - **manual**
44
+ * @default manual
45
+ */
46
+ this.trigger = DEFAULTS.TRIGGER;
47
+ /**
48
+ * The arrow visibility of the Coachmark.
49
+ * @default true
50
+ */
51
+ this.showArrow = DEFAULTS.ARROW;
52
+ /**
53
+ * The close button visibility of the Coachmark.
54
+ * @default true
55
+ */
56
+ this.closeButton = DEFAULTS.CLOSE_BUTTON;
57
+ /**
58
+ * Disable aria-expanded attribute on trigger element.
59
+ * @default true
60
+ */
61
+ this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
62
+ this.color = DEFAULTS.COLOR;
63
+ this.showArrow = DEFAULTS.ARROW;
64
+ }
65
+ }
66
+ __decorate([
67
+ property({ type: String, reflect: true }),
68
+ __metadata("design:type", String)
69
+ ], Coachmark.prototype, "trigger", void 0);
70
+ __decorate([
71
+ property({ type: Boolean, attribute: 'show-arrow' }),
72
+ __metadata("design:type", Boolean)
73
+ ], Coachmark.prototype, "showArrow", void 0);
74
+ __decorate([
75
+ property({ type: Boolean, reflect: true, attribute: 'close-button' }),
76
+ __metadata("design:type", Boolean)
77
+ ], Coachmark.prototype, "closeButton", void 0);
78
+ __decorate([
79
+ property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
80
+ __metadata("design:type", Boolean)
81
+ ], Coachmark.prototype, "disableAriaExpanded", void 0);
82
+ export default Coachmark;
@@ -0,0 +1,9 @@
1
+ declare const TAG_NAME: "mdc-coachmark";
2
+ declare const DEFAULTS: {
3
+ COLOR: "contrast";
4
+ TRIGGER: "manual";
5
+ ARROW: boolean;
6
+ CLOSE_BUTTON: boolean;
7
+ DISABLE_ARIA_EXPANDED: boolean;
8
+ };
9
+ export { TAG_NAME, DEFAULTS };
@@ -0,0 +1,11 @@
1
+ import utils from '../../utils/tag-name';
2
+ import { COLOR, TRIGGER } from '../popover/popover.constants';
3
+ const TAG_NAME = utils.constructTagName('coachmark');
4
+ const DEFAULTS = {
5
+ COLOR: COLOR.CONTRAST,
6
+ TRIGGER: TRIGGER.MANUAL,
7
+ ARROW: true,
8
+ CLOSE_BUTTON: true,
9
+ DISABLE_ARIA_EXPANDED: true,
10
+ };
11
+ export { TAG_NAME, DEFAULTS };
@@ -0,0 +1,8 @@
1
+ import Coachmark from './coachmark.component';
2
+ import '../button';
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ ['mdc-coachmark']: Coachmark;
6
+ }
7
+ }
8
+ export default Coachmark;
@@ -0,0 +1,5 @@
1
+ import Coachmark from './coachmark.component';
2
+ import { TAG_NAME } from './coachmark.constants';
3
+ import '../button';
4
+ Coachmark.register(TAG_NAME);
5
+ export default Coachmark;