@nuralyui/menu 0.0.9 → 0.0.15
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/bundle.js +1305 -0
- package/index.d.ts +2 -0
- package/index.js.map +1 -1
- package/menu.component.d.ts +48 -13
- package/menu.component.js +256 -73
- package/menu.component.js.map +1 -1
- package/menu.style.js +316 -79
- package/menu.style.js.map +1 -1
- package/menu.types.d.ts +41 -1
- package/menu.types.js +6 -1
- package/menu.types.js.map +1 -1
- package/package.json +40 -5
- package/react.d.ts +4 -2
- package/react.js +7 -5
- package/react.js.map +1 -1
- package/demo/menus-demo.d.ts +0 -22
- package/demo/menus-demo.d.ts.map +0 -1
- package/demo/menus-demo.js +0 -157
- package/demo/menus-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/menu.component.d.ts.map +0 -1
- package/menu.constants.d.ts.map +0 -1
- package/menu.style.d.ts.map +0 -1
- package/menu.types.d.ts.map +0 -1
- package/react.d.ts.map +0 -1
- package/templates/hy-menu-link.d.ts +0 -29
- package/templates/hy-menu-link.d.ts.map +0 -1
- package/templates/hy-menu-link.js +0 -122
- package/templates/hy-menu-link.js.map +0 -1
- package/templates/hy-sub-menu.d.ts +0 -32
- package/templates/hy-sub-menu.d.ts.map +0 -1
- package/templates/hy-sub-menu.js +0 -121
- package/templates/hy-sub-menu.js.map +0 -1
- package/templates/menu-link.contants.d.ts +0 -5
- package/templates/menu-link.contants.d.ts.map +0 -1
- package/templates/menu-link.contants.js +0 -6
- package/templates/menu-link.contants.js.map +0 -1
- package/templates/menu-link.style.d.ts +0 -2
- package/templates/menu-link.style.d.ts.map +0 -1
- package/templates/menu-link.style.js +0 -98
- package/templates/menu-link.style.js.map +0 -1
- package/templates/sub-menu.style.d.ts +0 -2
- package/templates/sub-menu.style.d.ts.map +0 -1
- package/templates/sub-menu.style.js +0 -88
- package/templates/sub-menu.style.js.map +0 -1
- package/test/menu-link_test.d.ts +0 -2
- package/test/menu-link_test.d.ts.map +0 -1
- package/test/menu-link_test.js +0 -85
- package/test/menu-link_test.js.map +0 -1
- package/test/menu_test.d.ts +0 -2
- package/test/menu_test.d.ts.map +0 -1
- package/test/menu_test.js +0 -81
- package/test/menu_test.js.map +0 -1
- package/test/sub-menu_test.d.ts +0 -2
- package/test/sub-menu_test.d.ts.map +0 -1
- package/test/sub-menu_test.js +0 -72
- package/test/sub-menu_test.js.map +0 -1
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
const menuLinkStyle = css `
|
|
3
|
-
:host([disabled]) li {
|
|
4
|
-
color: var(--hybrid-menu-disabled-link-color);
|
|
5
|
-
cursor: not-allowed;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
:host(:not([disabled]):not([selected])) li {
|
|
9
|
-
background-color: var(--hybrid-menu-link-background-color);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:host(:not([disabled]):not([selected])) li:hover {
|
|
13
|
-
background-color: var(--hybrid-menu-hover-link-background-color);
|
|
14
|
-
color: var(--hybrid-menu-hover-link-color);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([selected]) li:not(:focus) {
|
|
18
|
-
background-color: var(--hybrid-menu-selected-link-background-color);
|
|
19
|
-
color: var(--hybrid-menu-selected-color);
|
|
20
|
-
border-left: var(--hybrid-menu-selected-link-border);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
:host(:not([disabled])) li {
|
|
24
|
-
color: var(--hybrid-menu-link-color);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host([text='']) li {
|
|
28
|
-
width: var(--hybrid-menu-link-icon-only-width);
|
|
29
|
-
}
|
|
30
|
-
hy-icon {
|
|
31
|
-
--hybrid-icon-color: var(--hybrid-menu-link-icon-color);
|
|
32
|
-
}
|
|
33
|
-
.icon-container{
|
|
34
|
-
display:flex;
|
|
35
|
-
align-items:center;
|
|
36
|
-
position:relative;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.status-icon{
|
|
40
|
-
padding-right:0px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
li {
|
|
44
|
-
list-style: none;
|
|
45
|
-
display: flex;
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
padding-bottom: var(--hybrid-menu-link-padding-y);
|
|
48
|
-
padding-top: var(--hybrid-menu-link-padding-y);
|
|
49
|
-
}
|
|
50
|
-
.action-text-container{
|
|
51
|
-
width:100%;
|
|
52
|
-
display:flex;
|
|
53
|
-
justify-content:space-between;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
:host([iconPosition='right']) li {
|
|
57
|
-
flex-direction: row-reverse;
|
|
58
|
-
justify-content: space-between;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
:host(:not([disabled])) li:focus {
|
|
62
|
-
/* border: var(--hybrid-menu-focus-border); */
|
|
63
|
-
background-color: var(--hybrid-menu-active-background-color);
|
|
64
|
-
color: var(--hybrid-menu-focus-color);
|
|
65
|
-
border-left: var(--hybrid-menu-selected-link-border);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
:host(:not([disabled]):not([selected])) li:active {
|
|
69
|
-
color: var(--hybrid-menu-active-color);
|
|
70
|
-
background-color: var(--hybrid-menu-active-background-color);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([icon='']) #text-container {
|
|
74
|
-
padding-left: var(--hybrid-menu-link-empty-icon-padding-left);
|
|
75
|
-
}
|
|
76
|
-
:host([icon=''][iconPosition='right']) #text-container {
|
|
77
|
-
margin-right: auto;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:host([iconPosition='right']) #text-container,
|
|
81
|
-
:host([iconPosition='right']) #icon-only {
|
|
82
|
-
padding-left: var(--hybrid-menu-link-icon-right-padding-left);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
#link-icon {
|
|
86
|
-
display: flex;
|
|
87
|
-
align-items: center;
|
|
88
|
-
justify-content: center;
|
|
89
|
-
}
|
|
90
|
-
hy-icon {
|
|
91
|
-
display: flex;
|
|
92
|
-
align-items: center;
|
|
93
|
-
padding-right: var(--hybrid-menu-link-icon-padding-right);
|
|
94
|
-
padding-left: var(--hybrid-menu-link-icon-padding-left);
|
|
95
|
-
}
|
|
96
|
-
`;
|
|
97
|
-
export const styles = menuLinkStyle;
|
|
98
|
-
//# sourceMappingURL=menu-link.style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu-link.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\nconst menuLinkStyle = css`\n :host([disabled]) li {\n color: var(--hybrid-menu-disabled-link-color);\n cursor: not-allowed;\n }\n\n :host(:not([disabled]):not([selected])) li {\n background-color: var(--hybrid-menu-link-background-color);\n }\n\n :host(:not([disabled]):not([selected])) li:hover {\n background-color: var(--hybrid-menu-hover-link-background-color);\n color: var(--hybrid-menu-hover-link-color);\n }\n\n :host([selected]) li:not(:focus) {\n background-color: var(--hybrid-menu-selected-link-background-color);\n color: var(--hybrid-menu-selected-color);\n border-left: var(--hybrid-menu-selected-link-border);\n }\n\n :host(:not([disabled])) li {\n color: var(--hybrid-menu-link-color);\n }\n\n :host([text='']) li {\n width: var(--hybrid-menu-link-icon-only-width);\n }\n hy-icon {\n --hybrid-icon-color: var(--hybrid-menu-link-icon-color);\n }\n .icon-container{\n display:flex;\n align-items:center;\n position:relative;\n }\n \n .status-icon{\n padding-right:0px;\n }\n\n li {\n list-style: none;\n display: flex;\n cursor: pointer;\n padding-bottom: var(--hybrid-menu-link-padding-y);\n padding-top: var(--hybrid-menu-link-padding-y);\n }\n .action-text-container{\n width:100%;\n display:flex;\n justify-content:space-between;\n }\n\n :host([iconPosition='right']) li {\n flex-direction: row-reverse;\n justify-content: space-between;\n }\n\n :host(:not([disabled])) li:focus {\n /* border: var(--hybrid-menu-focus-border); */\n background-color: var(--hybrid-menu-active-background-color);\n color: var(--hybrid-menu-focus-color);\n border-left: var(--hybrid-menu-selected-link-border);\n }\n\n :host(:not([disabled]):not([selected])) li:active {\n color: var(--hybrid-menu-active-color);\n background-color: var(--hybrid-menu-active-background-color);\n }\n\n :host([icon='']) #text-container {\n padding-left: var(--hybrid-menu-link-empty-icon-padding-left);\n }\n :host([icon=''][iconPosition='right']) #text-container {\n margin-right: auto;\n }\n\n :host([iconPosition='right']) #text-container,\n :host([iconPosition='right']) #icon-only {\n padding-left: var(--hybrid-menu-link-icon-right-padding-left);\n }\n\n #link-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n hy-icon {\n display: flex;\n align-items: center;\n padding-right: var(--hybrid-menu-link-icon-padding-right);\n padding-left: var(--hybrid-menu-link-icon-padding-left);\n }\n`;\nexport const styles = menuLinkStyle;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sub-menu.style.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"AAuFA,eAAO,MAAM,MAAM,yBAAe,CAAC"}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
const subMenuStyle = css `
|
|
3
|
-
:host([disabled]) ul > div {
|
|
4
|
-
color: var(--hybrid-sub-menu-disabled-color);
|
|
5
|
-
cursor: not-allowed;
|
|
6
|
-
}
|
|
7
|
-
:host(:not([disabled])[highlighted]) ul > div {
|
|
8
|
-
background: var(--hybrid-sub-menu-highlighted-background-color);
|
|
9
|
-
color: var(--hybrid-sub-menu-highlighted-color);
|
|
10
|
-
}
|
|
11
|
-
:host(:not([disabled])) {
|
|
12
|
-
color: var(--hybrid-sub-menu-color);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
:host([icon]) span {
|
|
16
|
-
margin-right: auto;
|
|
17
|
-
padding-left: var(--hybrid-sub-menu-padding-left-text);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.icons-container{
|
|
21
|
-
display:flex;
|
|
22
|
-
align-items:center;
|
|
23
|
-
position:relative;
|
|
24
|
-
}
|
|
25
|
-
.action-icon{
|
|
26
|
-
margin-right:1px;
|
|
27
|
-
--hybrid-icon-color: var(--hybrid-sub-menu-action-icon-color);
|
|
28
|
-
}
|
|
29
|
-
.status-icon{
|
|
30
|
-
margin-right:10px;
|
|
31
|
-
--hybrid-icon-color: var(--hybrid-sub-menu-status-icon-color);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
#text-icon {
|
|
35
|
-
--hybrid-icon-color: var(--hybrid-sub-menu-text-icon-color);
|
|
36
|
-
}
|
|
37
|
-
#toggle-icon {
|
|
38
|
-
--hybrid-icon-color: var(--hybrid-sub-menu-toggle-icon-color);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
ul {
|
|
42
|
-
display: flex;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
margin-bottom: var(--hybrid-sub-menu-margin-y);
|
|
45
|
-
margin-top: var(--hybrid-sub-menu-margin-y);
|
|
46
|
-
padding-left: 0px;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:host([icon]) ::slotted(*) {
|
|
50
|
-
padding-left: var(--hybrid-sub-menu-children-padding-left);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
:host([icon='']) span {
|
|
54
|
-
padding-left: var(--hybrid-sub-menu-empty-icon-padding-left-text);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
ul > div {
|
|
58
|
-
display: flex;
|
|
59
|
-
justify-content: space-between;
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
padding-top: var(--hybrid-sub-menu-padding-y);
|
|
62
|
-
padding-bottom: var(--hybrid-sub-menu-padding-y);
|
|
63
|
-
padding-left: var(--hybrid-sub-menu-padding-left);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
:host(:not([disabled])) ul > div:focus {
|
|
67
|
-
border: var(--hybrid-sub-menu-focus-border);
|
|
68
|
-
color: var(--hybrid-sub-menu-focus-color);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
:host(:not([disabled])) ul > div:hover {
|
|
72
|
-
background-color: var(--hybrid-sub-menu-hover-background-color);
|
|
73
|
-
color: var(--hybrid-sub-menu-hover-color);
|
|
74
|
-
}
|
|
75
|
-
:host([selected]:not([disabled])) ul > div {
|
|
76
|
-
background-color: var(--hybrid-menu-selected-link-background-color);
|
|
77
|
-
color: var(--hybrid-menu-focus-color);
|
|
78
|
-
border-left: var(--hybrid-menu-selected-link-border);
|
|
79
|
-
}
|
|
80
|
-
:host(:not([disabled])) ul > div:active {
|
|
81
|
-
background-color: var(--hybrid-sub-menu-active-background-color);
|
|
82
|
-
color: var(--hybrid-sub-menu-active-color);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
`;
|
|
87
|
-
export const styles = subMenuStyle;
|
|
88
|
-
//# sourceMappingURL=sub-menu.style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sub-menu.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFvB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst subMenuStyle = css`\n :host([disabled]) ul > div {\n color: var(--hybrid-sub-menu-disabled-color);\n cursor: not-allowed;\n }\n :host(:not([disabled])[highlighted]) ul > div {\n background: var(--hybrid-sub-menu-highlighted-background-color);\n color: var(--hybrid-sub-menu-highlighted-color);\n }\n :host(:not([disabled])) {\n color: var(--hybrid-sub-menu-color);\n }\n\n :host([icon]) span {\n margin-right: auto;\n padding-left: var(--hybrid-sub-menu-padding-left-text);\n }\n\n .icons-container{\n display:flex;\n align-items:center;\n position:relative;\n }\n .action-icon{\n margin-right:1px;\n --hybrid-icon-color: var(--hybrid-sub-menu-action-icon-color);\n }\n .status-icon{\n margin-right:10px;\n --hybrid-icon-color: var(--hybrid-sub-menu-status-icon-color);\n }\n\n #text-icon {\n --hybrid-icon-color: var(--hybrid-sub-menu-text-icon-color);\n }\n #toggle-icon {\n --hybrid-icon-color: var(--hybrid-sub-menu-toggle-icon-color);\n }\n\n ul {\n display: flex;\n flex-direction: column;\n margin-bottom: var(--hybrid-sub-menu-margin-y);\n margin-top: var(--hybrid-sub-menu-margin-y);\n padding-left: 0px;\n }\n\n :host([icon]) ::slotted(*) {\n padding-left: var(--hybrid-sub-menu-children-padding-left);\n }\n\n :host([icon='']) span {\n padding-left: var(--hybrid-sub-menu-empty-icon-padding-left-text);\n }\n\n ul > div {\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n padding-top: var(--hybrid-sub-menu-padding-y);\n padding-bottom: var(--hybrid-sub-menu-padding-y);\n padding-left: var(--hybrid-sub-menu-padding-left);\n }\n\n :host(:not([disabled])) ul > div:focus {\n border: var(--hybrid-sub-menu-focus-border);\n color: var(--hybrid-sub-menu-focus-color);\n }\n\n :host(:not([disabled])) ul > div:hover {\n background-color: var(--hybrid-sub-menu-hover-background-color);\n color: var(--hybrid-sub-menu-hover-color);\n }\n :host([selected]:not([disabled])) ul > div {\n background-color: var(--hybrid-menu-selected-link-background-color);\n color: var(--hybrid-menu-focus-color);\n border-left: var(--hybrid-menu-selected-link-border);\n}\n :host(:not([disabled])) ul > div:active {\n background-color: var(--hybrid-sub-menu-active-background-color);\n color: var(--hybrid-sub-menu-active-color);\n }\n\n \n`;\nexport const styles = subMenuStyle;\n"]}
|
package/test/menu-link_test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu-link_test.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/test/menu-link_test.ts"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}
|
package/test/menu-link_test.js
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
|
-
import '../templates/hy-menu-link';
|
|
12
|
-
import { ICON_POSITION } from '../templates/menu-link.contants';
|
|
13
|
-
suite('HyMenuLinkComponent', () => {
|
|
14
|
-
test('init menu link', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
15
|
-
var _a, _b, _c, _d;
|
|
16
|
-
const text = 'link text';
|
|
17
|
-
const link = 'url';
|
|
18
|
-
const icon = 'pencil';
|
|
19
|
-
const el = yield fixture(html `<hy-menu-link text="${text}" link=${link} icon=${icon}></hy-menu-link>`);
|
|
20
|
-
const templateIcon = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('hy-icon');
|
|
21
|
-
const templateLink = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a');
|
|
22
|
-
const templateText = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('span');
|
|
23
|
-
const templateLinkIcon = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#link-icon');
|
|
24
|
-
expect(el.text).to.equal(text);
|
|
25
|
-
expect(el.link).to.equal(link);
|
|
26
|
-
expect(el.icon).to.equal(icon);
|
|
27
|
-
expect(el.iconPosition).to.equal(ICON_POSITION.LEFT);
|
|
28
|
-
expect(el.disabled).to.be.false;
|
|
29
|
-
expect(el.selected).to.be.false;
|
|
30
|
-
expect(templateIcon).to.have.attribute('name', icon);
|
|
31
|
-
expect(templateLink).to.have.attribute('href', link);
|
|
32
|
-
expect(templateText === null || templateText === void 0 ? void 0 : templateText.textContent).to.equal(text);
|
|
33
|
-
expect(templateLinkIcon).to.not.exist;
|
|
34
|
-
}));
|
|
35
|
-
test('icon only', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
36
|
-
var _e, _f, _g;
|
|
37
|
-
const link = 'url';
|
|
38
|
-
const icon = 'pencil';
|
|
39
|
-
const el = yield fixture(html `<hy-menu-link link=${link} icon=${icon}></hy-menu-link>`);
|
|
40
|
-
const templateText = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('span');
|
|
41
|
-
const templateLinkIcon = (_f = el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('#link-icon');
|
|
42
|
-
const anchors = (_g = el.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelectorAll('a');
|
|
43
|
-
expect(templateText).not.exist;
|
|
44
|
-
expect(templateLinkIcon).to.exist;
|
|
45
|
-
expect(templateLinkIcon).to.have.attribute('href', link);
|
|
46
|
-
expect(templateLinkIcon === null || templateLinkIcon === void 0 ? void 0 : templateLinkIcon.children[0]).to.have.attribute('name', icon);
|
|
47
|
-
expect(anchors).to.have.length(1);
|
|
48
|
-
}));
|
|
49
|
-
test('text only', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
50
|
-
var _h, _j;
|
|
51
|
-
const link = 'url';
|
|
52
|
-
const text = 'this is a text';
|
|
53
|
-
const el = yield fixture(html `<hy-menu-link link=${link} text=${text}></hy-menu-link>`);
|
|
54
|
-
const templateText = (_h = el.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('span');
|
|
55
|
-
const templateLinkIcon = (_j = el.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('#link-icon');
|
|
56
|
-
const templateAnchor = el.shadowRoot.querySelectorAll('a');
|
|
57
|
-
expect(templateText).exist;
|
|
58
|
-
expect(templateLinkIcon).not.to.exist;
|
|
59
|
-
expect(templateAnchor).to.exist;
|
|
60
|
-
expect(templateAnchor).to.have.length(1);
|
|
61
|
-
expect(templateAnchor[0]).to.have.attribute('href', link);
|
|
62
|
-
expect(templateAnchor[0].children[0].textContent).to.equal(text);
|
|
63
|
-
}));
|
|
64
|
-
test('enabled link', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
65
|
-
const el = yield fixture(html `<hy-menu-link> </hy-menu-link>`);
|
|
66
|
-
const container = el.shadowRoot.querySelector('li');
|
|
67
|
-
let selectedLinkDispatch = false;
|
|
68
|
-
el.addEventListener('selected-link', () => {
|
|
69
|
-
selectedLinkDispatch = true;
|
|
70
|
-
});
|
|
71
|
-
container.click();
|
|
72
|
-
expect(selectedLinkDispatch).to.be.true;
|
|
73
|
-
}));
|
|
74
|
-
test('disabled link', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
75
|
-
const el = yield fixture(html `<hy-menu-link disabled=${true}> </hy-menu-link>`);
|
|
76
|
-
const container = el.shadowRoot.querySelector('li');
|
|
77
|
-
let selectedLinkDispatch = false;
|
|
78
|
-
el.addEventListener('selected-link', () => {
|
|
79
|
-
selectedLinkDispatch = true;
|
|
80
|
-
});
|
|
81
|
-
container.click();
|
|
82
|
-
expect(selectedLinkDispatch).to.be.false;
|
|
83
|
-
}));
|
|
84
|
-
});
|
|
85
|
-
//# sourceMappingURL=menu-link_test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu-link_test.js","sourceRoot":"","sources":["../../../../src/components/menu/test/menu-link_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport {HyMenuLink} from '../templates/hy-menu-link';\nimport '../templates/hy-menu-link';\nimport {ICON_POSITION} from '../templates/menu-link.contants';\n\nsuite('HyMenuLinkComponent', () => {\n test('init menu link', async () => {\n const text = 'link text';\n const link = 'url';\n const icon = 'pencil';\n const el: HyMenuLink = await fixture(html`<hy-menu-link text=\"${text}\" link=${link} icon=${icon}></hy-menu-link>`);\n const templateIcon = el.shadowRoot?.querySelector('hy-icon');\n const templateLink = el.shadowRoot?.querySelector('a');\n const templateText = el.shadowRoot?.querySelector('span');\n const templateLinkIcon = el.shadowRoot?.querySelector('#link-icon');\n expect(el.text).to.equal(text);\n expect(el.link).to.equal(link);\n expect(el.icon).to.equal(icon);\n expect(el.iconPosition).to.equal(ICON_POSITION.LEFT);\n expect(el.disabled).to.be.false;\n expect(el.selected).to.be.false;\n expect(templateIcon).to.have.attribute('name', icon);\n expect(templateLink).to.have.attribute('href', link);\n expect(templateText?.textContent).to.equal(text);\n expect(templateLinkIcon).to.not.exist;\n });\n\n test('icon only', async () => {\n const link = 'url';\n const icon = 'pencil';\n const el: HyMenuLink = await fixture(html`<hy-menu-link link=${link} icon=${icon}></hy-menu-link>`);\n const templateText = el.shadowRoot?.querySelector('span');\n const templateLinkIcon = el.shadowRoot?.querySelector('#link-icon');\n const anchors = el.shadowRoot?.querySelectorAll('a');\n expect(templateText).not.exist;\n expect(templateLinkIcon).to.exist;\n expect(templateLinkIcon).to.have.attribute('href', link);\n expect(templateLinkIcon?.children[0]).to.have.attribute('name', icon);\n expect(anchors).to.have.length(1);\n });\n test('text only', async () => {\n const link = 'url';\n const text = 'this is a text';\n const el: HyMenuLink = await fixture(html`<hy-menu-link link=${link} text=${text}></hy-menu-link>`);\n const templateText = el.shadowRoot?.querySelector('span');\n const templateLinkIcon = el.shadowRoot?.querySelector('#link-icon');\n const templateAnchor = el.shadowRoot!.querySelectorAll('a')!;\n expect(templateText).exist;\n expect(templateLinkIcon).not.to.exist;\n expect(templateAnchor).to.exist;\n expect(templateAnchor).to.have.length(1);\n expect(templateAnchor[0]).to.have.attribute('href', link);\n expect(templateAnchor[0].children[0].textContent).to.equal(text);\n });\n\n test('enabled link', async () => {\n const el: HyMenuLink = await fixture(html`<hy-menu-link> </hy-menu-link>`);\n const container = el.shadowRoot!.querySelector('li')!;\n let selectedLinkDispatch = false;\n el.addEventListener('selected-link', () => {\n selectedLinkDispatch = true;\n });\n container.click();\n expect(selectedLinkDispatch).to.be.true;\n });\n test('disabled link', async () => {\n const el: HyMenuLink = await fixture(html`<hy-menu-link disabled=${true}> </hy-menu-link>`);\n const container = el.shadowRoot!.querySelector('li')!;\n let selectedLinkDispatch = false;\n el.addEventListener('selected-link', () => {\n selectedLinkDispatch = true;\n });\n container.click();\n expect(selectedLinkDispatch).to.be.false;\n });\n});\n"]}
|
package/test/menu_test.d.ts
DELETED
package/test/menu_test.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu_test.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/test/menu_test.ts"],"names":[],"mappings":"AACA,OAAO,mBAAmB,CAAC"}
|
package/test/menu_test.js
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
|
11
|
-
import '../menu.component';
|
|
12
|
-
suite('HyMenuComponent', () => {
|
|
13
|
-
const mockMenuItems = [
|
|
14
|
-
{ text: ' link', link: 'menu.html', icon: 'user' },
|
|
15
|
-
{
|
|
16
|
-
text: 'first menu',
|
|
17
|
-
children: [
|
|
18
|
-
{ text: 'under the first menu', link: '', icon: 'user', iconPosition: 'right' },
|
|
19
|
-
{ text: 'selected menu', link: '', icon: 'user', selected: true },
|
|
20
|
-
{
|
|
21
|
-
text: 'under the first menu',
|
|
22
|
-
link: '',
|
|
23
|
-
icon: 'bomb',
|
|
24
|
-
children: [{ text: 'child of under the link', link: '', icon: 'user' }],
|
|
25
|
-
},
|
|
26
|
-
],
|
|
27
|
-
disabled: false,
|
|
28
|
-
link: '',
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
text: 'second menu',
|
|
32
|
-
children: [
|
|
33
|
-
{ text: 'under second menu', link: '', icon: 'warning' },
|
|
34
|
-
{ text: 'under second menu', link: '', icon: 'pencil' },
|
|
35
|
-
{
|
|
36
|
-
text: 'menu under second menu',
|
|
37
|
-
link: '',
|
|
38
|
-
icon: 'bomb',
|
|
39
|
-
children: [
|
|
40
|
-
{
|
|
41
|
-
text: 'children of menu under second menu',
|
|
42
|
-
link: '',
|
|
43
|
-
icon: 'book',
|
|
44
|
-
children: [
|
|
45
|
-
{ text: 'children of children of menu unser second menu', link: '', icon: 'book', iconPosition: 'right' },
|
|
46
|
-
],
|
|
47
|
-
},
|
|
48
|
-
],
|
|
49
|
-
},
|
|
50
|
-
],
|
|
51
|
-
disabled: false,
|
|
52
|
-
link: '',
|
|
53
|
-
},
|
|
54
|
-
];
|
|
55
|
-
test('select the correct number of menu links and sub menus', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
56
|
-
const el = yield fixture(html `<hy-menu .items=${mockMenuItems}></hy-menu>`);
|
|
57
|
-
expect(el._menuLinks).to.have.length(7);
|
|
58
|
-
expect(el._subMenues).to.have.length(5);
|
|
59
|
-
}));
|
|
60
|
-
test('update the selected link', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
61
|
-
const el = yield fixture(html `<hy-menu .items=${mockMenuItems}></hy-menu>`);
|
|
62
|
-
const previousSelectedIndex = 2;
|
|
63
|
-
const newSelectedIndex = 1;
|
|
64
|
-
const event = new CustomEvent('selected-link', {
|
|
65
|
-
detail: { index: newSelectedIndex },
|
|
66
|
-
});
|
|
67
|
-
el._updateSelectedLink(event);
|
|
68
|
-
const selectedLink = el.shadowRoot.querySelectorAll('hy-menu-link')[newSelectedIndex];
|
|
69
|
-
expect(selectedLink).to.have.attribute('selected');
|
|
70
|
-
const previouslySelectedLink = el.shadowRoot.querySelectorAll('hy-menu-link')[previousSelectedIndex];
|
|
71
|
-
expect(previouslySelectedLink).to.not.have.attribute('selected');
|
|
72
|
-
}));
|
|
73
|
-
test('init highlighted', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
74
|
-
const el = yield fixture(html `<hy-menu .items=${mockMenuItems}></hy-menu>`);
|
|
75
|
-
const subMenu = el.shadowRoot.querySelector('hy-sub-menu');
|
|
76
|
-
subMenu.setAttribute('highlighted', 'true');
|
|
77
|
-
el._handleInitHighlighted();
|
|
78
|
-
expect(subMenu).to.not.have.attribute('highlighted');
|
|
79
|
-
}));
|
|
80
|
-
});
|
|
81
|
-
//# sourceMappingURL=menu_test.js.map
|
package/test/menu_test.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu_test.js","sourceRoot":"","sources":["../../../../src/components/menu/test/menu_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {expect, fixture, html} from '@open-wc/testing';\nimport '../menu.component';\nimport {HyMenuComponent} from '../menu.component';\nimport {IMenu} from '../menu.types';\n\nsuite('HyMenuComponent', () => {\n const mockMenuItems: IMenu[] = [\n {text: ' link', link: 'menu.html', icon: 'user'},\n {\n text: 'first menu',\n children: [\n {text: 'under the first menu', link: '', icon: 'user', iconPosition: 'right'},\n {text: 'selected menu', link: '', icon: 'user', selected: true},\n {\n text: 'under the first menu',\n link: '',\n icon: 'bomb',\n children: [{text: 'child of under the link', link: '', icon: 'user'}],\n },\n ],\n disabled: false,\n link: '',\n },\n {\n text: 'second menu',\n children: [\n {text: 'under second menu', link: '', icon: 'warning'},\n {text: 'under second menu', link: '', icon: 'pencil'},\n {\n text: 'menu under second menu',\n link: '',\n icon: 'bomb',\n children: [\n {\n text: 'children of menu under second menu',\n link: '',\n icon: 'book',\n children: [\n {text: 'children of children of menu unser second menu', link: '', icon: 'book', iconPosition: 'right'},\n ],\n },\n ],\n },\n ],\n disabled: false,\n link: '',\n },\n ];\n\n test('select the correct number of menu links and sub menus', async () => {\n const el: HyMenuComponent = await fixture(html`<hy-menu .items=${mockMenuItems}></hy-menu>`);\n\n expect(el._menuLinks).to.have.length(7);\n expect(el._subMenues).to.have.length(5);\n });\n\n test('update the selected link', async () => {\n const el: HyMenuComponent = await fixture(html`<hy-menu .items=${mockMenuItems}></hy-menu>`);\n const previousSelectedIndex = 2;\n const newSelectedIndex = 1;\n const event = new CustomEvent('selected-link', {\n detail: {index: newSelectedIndex},\n });\n el._updateSelectedLink(event);\n\n const selectedLink = el.shadowRoot!.querySelectorAll('hy-menu-link')[newSelectedIndex];\n expect(selectedLink).to.have.attribute('selected');\n const previouslySelectedLink = el.shadowRoot!.querySelectorAll('hy-menu-link')[previousSelectedIndex];\n expect(previouslySelectedLink).to.not.have.attribute('selected');\n });\n\n test('init highlighted', async () => {\n const el: HyMenuComponent = await fixture(html`<hy-menu .items=${mockMenuItems}></hy-menu>`);\n const subMenu = el.shadowRoot!.querySelector('hy-sub-menu')!;\n subMenu.setAttribute('highlighted', 'true');\n el._handleInitHighlighted();\n expect(subMenu).to.not.have.attribute('highlighted');\n });\n});\n"]}
|
package/test/sub-menu_test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sub-menu_test.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/test/sub-menu_test.ts"],"names":[],"mappings":"AAEA,OAAO,0BAA0B,CAAC"}
|
package/test/sub-menu_test.js
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
|
-
import '../templates/hy-sub-menu';
|
|
12
|
-
suite('HySubMenuComponent', () => {
|
|
13
|
-
test('init sub menu', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
14
|
-
var _a, _b;
|
|
15
|
-
const text = 'link';
|
|
16
|
-
const icon = 'bomb';
|
|
17
|
-
const el = yield fixture(html `<hy-sub-menu text=${text} icon=${icon}></hy-sub-menu>`);
|
|
18
|
-
const toggleIcon = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#toggle-icon');
|
|
19
|
-
const textContainer = el.shadowRoot.querySelector('span');
|
|
20
|
-
const textIcon = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#text-icon');
|
|
21
|
-
expect(el.disabled).to.be.false;
|
|
22
|
-
expect(el.highlighted).to.be.false;
|
|
23
|
-
expect(el.text).to.equal(text);
|
|
24
|
-
expect(el.icon).to.equal(icon);
|
|
25
|
-
expect(el.isOpen).to.be.false;
|
|
26
|
-
expect(toggleIcon).to.have.attribute('name', 'angle-down');
|
|
27
|
-
expect(textContainer.textContent).to.equal(text);
|
|
28
|
-
expect(textIcon).to.have.attribute('name', icon);
|
|
29
|
-
}));
|
|
30
|
-
test('toggle sub menu', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
31
|
-
var _c;
|
|
32
|
-
const el = yield fixture(html `<hy-sub-menu></hy-sub-menu>`);
|
|
33
|
-
const container = el.shadowRoot.querySelector('div');
|
|
34
|
-
const toggleIcon = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#toggle-icon');
|
|
35
|
-
container.click();
|
|
36
|
-
yield el.updateComplete;
|
|
37
|
-
expect(el.isOpen).to.be.true;
|
|
38
|
-
expect(toggleIcon).to.have.attribute('name', 'angle-up');
|
|
39
|
-
container.click();
|
|
40
|
-
yield el.updateComplete;
|
|
41
|
-
expect(el.isOpen).to.be.false;
|
|
42
|
-
expect(toggleIcon).to.have.attribute('name', 'angle-down');
|
|
43
|
-
}));
|
|
44
|
-
test('disabled sub menu', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
45
|
-
const el = yield fixture(html `<hy-sub-menu disabled=${true}></hy-sub-menu>`);
|
|
46
|
-
const container = el.shadowRoot.querySelector('div');
|
|
47
|
-
expect(el.disabled).to.be.true;
|
|
48
|
-
container.click();
|
|
49
|
-
yield el.updateComplete;
|
|
50
|
-
expect(el.isOpen).to.be.false;
|
|
51
|
-
}));
|
|
52
|
-
test('sub menu with text only', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
53
|
-
const text = 'sub menu text';
|
|
54
|
-
const el = yield fixture(html `<hy-sub-menu text="${text}"></hy-sub-menu>`);
|
|
55
|
-
const icon = el.shadowRoot.querySelector('#text-icon');
|
|
56
|
-
const textContainer = el.shadowRoot.querySelector('span');
|
|
57
|
-
expect(icon).to.not.exist;
|
|
58
|
-
expect(textContainer.textContent).to.equal(text);
|
|
59
|
-
}));
|
|
60
|
-
test('highlight sub menu', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
61
|
-
const el = yield fixture(html `<hy-sub-menu></hy-sub-menu>`);
|
|
62
|
-
let eventDispatched = false;
|
|
63
|
-
el.addEventListener('init-highlighted', () => {
|
|
64
|
-
eventDispatched = true;
|
|
65
|
-
});
|
|
66
|
-
expect(el.highlighted).to.be.false;
|
|
67
|
-
el._handleSelectedChild();
|
|
68
|
-
expect(eventDispatched).to.be.true;
|
|
69
|
-
expect(el.highlighted).to.be.true;
|
|
70
|
-
}));
|
|
71
|
-
});
|
|
72
|
-
//# sourceMappingURL=sub-menu_test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sub-menu_test.js","sourceRoot":"","sources":["../../../../src/components/menu/test/sub-menu_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport {HySubMenu} from '../templates/hy-sub-menu';\nimport '../templates/hy-sub-menu';\n\nsuite('HySubMenuComponent', () => {\n test('init sub menu', async () => {\n const text = 'link';\n const icon = 'bomb';\n const el: HySubMenu = await fixture(html`<hy-sub-menu text=${text} icon=${icon}></hy-sub-menu>`);\n const toggleIcon = el.shadowRoot?.querySelector('#toggle-icon');\n const textContainer = el.shadowRoot!.querySelector('span')!;\n const textIcon = el.shadowRoot?.querySelector('#text-icon');\n expect(el.disabled).to.be.false;\n expect(el.highlighted).to.be.false;\n expect(el.text).to.equal(text);\n expect(el.icon).to.equal(icon);\n expect(el.isOpen).to.be.false;\n expect(toggleIcon).to.have.attribute('name', 'angle-down');\n expect(textContainer.textContent).to.equal(text);\n expect(textIcon).to.have.attribute('name', icon);\n });\n\n test('toggle sub menu', async () => {\n const el: HySubMenu = await fixture(html`<hy-sub-menu></hy-sub-menu>`);\n const container = el.shadowRoot!.querySelector('div')!;\n const toggleIcon = el.shadowRoot?.querySelector('#toggle-icon');\n container.click();\n await el.updateComplete;\n expect(el.isOpen).to.be.true;\n expect(toggleIcon).to.have.attribute('name', 'angle-up');\n container.click();\n await el.updateComplete;\n expect(el.isOpen).to.be.false;\n expect(toggleIcon).to.have.attribute('name', 'angle-down');\n });\n\n test('disabled sub menu', async () => {\n const el: HySubMenu = await fixture(html`<hy-sub-menu disabled=${true}></hy-sub-menu>`);\n const container = el.shadowRoot!.querySelector('div')!;\n expect(el.disabled).to.be.true;\n container.click();\n await el.updateComplete;\n expect(el.isOpen).to.be.false;\n });\n\n test('sub menu with text only', async () => {\n const text = 'sub menu text';\n const el: HySubMenu = await fixture(html`<hy-sub-menu text=\"${text}\"></hy-sub-menu>`);\n const icon = el.shadowRoot!.querySelector('#text-icon');\n const textContainer = el.shadowRoot!.querySelector('span')!;\n expect(icon).to.not.exist;\n expect(textContainer.textContent).to.equal(text);\n });\n\n test('highlight sub menu', async () => {\n const el: HySubMenu = await fixture(html`<hy-sub-menu></hy-sub-menu>`);\n let eventDispatched = false;\n el.addEventListener('init-highlighted', () => {\n eventDispatched = true;\n });\n expect(el.highlighted).to.be.false;\n\n el._handleSelectedChild();\n\n expect(eventDispatched).to.be.true;\n expect(el.highlighted).to.be.true;\n });\n});\n"]}
|