@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.
- package/dist/browser/index.js +217 -217
- package/dist/browser/index.js.map +4 -4
- package/dist/components/coachmark/coachmark.component.d.ts +52 -0
- package/dist/components/coachmark/coachmark.component.js +82 -0
- package/dist/components/coachmark/coachmark.constants.d.ts +9 -0
- package/dist/components/coachmark/coachmark.constants.js +11 -0
- package/dist/components/coachmark/index.d.ts +8 -0
- package/dist/components/coachmark/index.js +5 -0
- package/dist/custom-elements.json +2517 -966
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/coachmark/index.d.ts +23 -0
- package/dist/react/coachmark/index.js +32 -0
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.js +2 -1
- package/package.json +1 -1
@@ -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,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 };
|