@aquera/nile-elements 0.0.1-beta.3 → 0.0.1-beta.5
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/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/index.d.ts +4 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/index.js +4 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/index.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/internal/tabbable.d.ts +8 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/internal/tabbable.js +65 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/internal/tabbable.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/index.d.ts +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/index.js +2 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/index.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.css.d.ts +12 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.css.js +23 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.css.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.d.ts +27 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.js +127 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/index.d.ts +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/index.js +2 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/index.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.css.d.ts +12 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.css.js +146 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.css.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.d.ts +44 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.js +180 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/index.d.ts +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/index.js +2 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/index.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/nile-dropdown.css.d.ts +12 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/nile-dropdown.css.js +60 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/nile-dropdown.css.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/nile-dropdown.d.ts +105 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/nile-dropdown.js +412 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-dropdown/nile-dropdown.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-input/nile-input.css.js +20 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/index.d.ts +1 -41
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/index.js +1 -119
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/index.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/nile-menu.css.d.ts +12 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/nile-menu.css.js +28 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/nile-menu.css.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/nile-menu.d.ts +43 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/nile-menu.js +142 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu/nile-menu.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/index.d.ts +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/index.js +2 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/index.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.css.d.ts +12 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.css.js +121 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.css.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.d.ts +62 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.js +173 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.js.map +1 -0
- package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/internal/slot.cjs.js +1 -1
- package/dist/internal/slot.cjs.js.map +1 -1
- package/dist/internal/slot.esm.js +1 -1
- package/dist/internal/tabbable.cjs.js +2 -0
- package/dist/internal/tabbable.cjs.js.map +1 -0
- package/dist/internal/tabbable.esm.js +1 -0
- package/dist/nile-auto-complete/index.cjs.js +2 -0
- package/dist/nile-auto-complete/index.cjs.js.map +1 -0
- package/dist/nile-auto-complete/index.esm.js +1 -0
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js +2 -0
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js.map +1 -0
- package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js +2 -0
- package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js.map +1 -0
- package/dist/nile-auto-complete/nile-auto-complete.css.esm.js +11 -0
- package/dist/nile-auto-complete/nile-auto-complete.esm.js +21 -0
- package/dist/nile-chip/index.cjs.js +2 -0
- package/dist/nile-chip/index.cjs.js.map +1 -0
- package/dist/nile-chip/index.esm.js +1 -0
- package/dist/nile-chip/nile-chip.cjs.js +2 -0
- package/dist/nile-chip/nile-chip.cjs.js.map +1 -0
- package/dist/nile-chip/nile-chip.css.cjs.js +2 -0
- package/dist/nile-chip/nile-chip.css.cjs.js.map +1 -0
- package/dist/nile-chip/nile-chip.css.esm.js +134 -0
- package/dist/nile-chip/nile-chip.esm.js +46 -0
- package/dist/nile-dropdown/index.cjs.js +2 -0
- package/dist/nile-dropdown/index.cjs.js.map +1 -0
- package/dist/nile-dropdown/index.esm.js +1 -0
- package/dist/nile-dropdown/nile-dropdown.cjs.js +2 -0
- package/dist/nile-dropdown/nile-dropdown.cjs.js.map +1 -0
- package/dist/nile-dropdown/nile-dropdown.css.cjs.js +2 -0
- package/dist/nile-dropdown/nile-dropdown.css.cjs.js.map +1 -0
- package/dist/nile-dropdown/nile-dropdown.css.esm.js +48 -0
- package/dist/nile-dropdown/nile-dropdown.esm.js +33 -0
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +20 -0
- package/dist/nile-menu/index.cjs.js +1 -1
- package/dist/nile-menu/index.cjs.js.map +1 -1
- package/dist/nile-menu/index.esm.js +1 -53
- package/dist/nile-menu/nile-menu.cjs.js +2 -0
- package/dist/nile-menu/nile-menu.cjs.js.map +1 -0
- package/dist/nile-menu/nile-menu.css.cjs.js +2 -0
- package/dist/nile-menu/nile-menu.css.cjs.js.map +1 -0
- package/dist/nile-menu/nile-menu.css.esm.js +16 -0
- package/dist/nile-menu/nile-menu.esm.js +8 -0
- package/dist/nile-menu-item/index.cjs.js +2 -0
- package/dist/nile-menu-item/index.cjs.js.map +1 -0
- package/dist/nile-menu-item/index.esm.js +1 -0
- package/dist/nile-menu-item/nile-menu-item.cjs.js +2 -0
- package/dist/nile-menu-item/nile-menu-item.cjs.js.map +1 -0
- package/dist/nile-menu-item/nile-menu-item.css.cjs.js +2 -0
- package/dist/nile-menu-item/nile-menu-item.css.cjs.js.map +1 -0
- package/dist/nile-menu-item/nile-menu-item.css.esm.js +109 -0
- package/dist/nile-menu-item/nile-menu-item.esm.js +20 -0
- package/dist/src/index.d.ts +4 -0
- package/dist/src/index.js +4 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/internal/tabbable.d.ts +8 -0
- package/dist/src/internal/tabbable.js +65 -0
- package/dist/src/internal/tabbable.js.map +1 -0
- package/dist/src/nile-auto-complete/index.d.ts +1 -0
- package/dist/src/nile-auto-complete/index.js +2 -0
- package/dist/src/nile-auto-complete/index.js.map +1 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.css.d.ts +12 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.css.js +23 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map +1 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.d.ts +27 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.js +127 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.js.map +1 -0
- package/dist/src/nile-chip/index.d.ts +1 -0
- package/dist/src/nile-chip/index.js +2 -0
- package/dist/src/nile-chip/index.js.map +1 -0
- package/dist/src/nile-chip/nile-chip.css.d.ts +12 -0
- package/dist/src/nile-chip/nile-chip.css.js +146 -0
- package/dist/src/nile-chip/nile-chip.css.js.map +1 -0
- package/dist/src/nile-chip/nile-chip.d.ts +44 -0
- package/dist/src/nile-chip/nile-chip.js +180 -0
- package/dist/src/nile-chip/nile-chip.js.map +1 -0
- package/dist/src/nile-dropdown/index.d.ts +1 -0
- package/dist/src/nile-dropdown/index.js +2 -0
- package/dist/src/nile-dropdown/index.js.map +1 -0
- package/dist/src/nile-dropdown/nile-dropdown.css.d.ts +12 -0
- package/dist/src/nile-dropdown/nile-dropdown.css.js +60 -0
- package/dist/src/nile-dropdown/nile-dropdown.css.js.map +1 -0
- package/dist/src/nile-dropdown/nile-dropdown.d.ts +105 -0
- package/dist/src/nile-dropdown/nile-dropdown.js +412 -0
- package/dist/src/nile-dropdown/nile-dropdown.js.map +1 -0
- package/dist/src/nile-input/nile-input.css.js +20 -0
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-menu/index.d.ts +1 -41
- package/dist/src/nile-menu/index.js +1 -119
- package/dist/src/nile-menu/index.js.map +1 -1
- package/dist/src/nile-menu/nile-menu.css.d.ts +12 -0
- package/dist/src/nile-menu/nile-menu.css.js +28 -0
- package/dist/src/nile-menu/nile-menu.css.js.map +1 -0
- package/dist/src/nile-menu/nile-menu.d.ts +43 -0
- package/dist/src/nile-menu/nile-menu.js +142 -0
- package/dist/src/nile-menu/nile-menu.js.map +1 -0
- package/dist/src/nile-menu-item/index.d.ts +1 -0
- package/dist/src/nile-menu-item/index.js +2 -0
- package/dist/src/nile-menu-item/index.js.map +1 -0
- package/dist/src/nile-menu-item/nile-menu-item.css.d.ts +12 -0
- package/dist/src/nile-menu-item/nile-menu-item.css.js +121 -0
- package/dist/src/nile-menu-item/nile-menu-item.css.js.map +1 -0
- package/dist/src/nile-menu-item/nile-menu-item.d.ts +62 -0
- package/dist/src/nile-menu-item/nile-menu-item.js +173 -0
- package/dist/src/nile-menu-item/nile-menu-item.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/watch.cjs.js +1 -1
- package/dist/watch.cjs.js.map +1 -1
- package/dist/watch.esm.js +1 -1
- package/package.json +1 -1
- package/src/index.ts +4 -0
- package/src/internal/tabbable.ts +81 -0
- package/src/nile-auto-complete/index.ts +1 -0
- package/src/nile-auto-complete/nile-auto-complete.css.ts +25 -0
- package/src/nile-auto-complete/nile-auto-complete.ts +132 -0
- package/src/nile-chip/index.ts +1 -0
- package/src/nile-chip/nile-chip.css.ts +148 -0
- package/src/nile-chip/nile-chip.ts +189 -0
- package/src/nile-dropdown/index.ts +1 -0
- package/src/nile-dropdown/nile-dropdown.css.ts +62 -0
- package/src/nile-dropdown/nile-dropdown.ts +461 -0
- package/src/nile-input/nile-input.css.ts +20 -0
- package/src/nile-menu/index.ts +1 -116
- package/src/nile-menu/nile-menu.css.ts +30 -0
- package/src/nile-menu/nile-menu.ts +169 -0
- package/src/nile-menu-item/index.ts +1 -0
- package/src/nile-menu-item/nile-menu-item.css.ts +123 -0
- package/src/nile-menu-item/nile-menu-item.ts +171 -0
- package/src/nile-menu/nile-menu.scss +0 -0
@@ -1,120 +1,2 @@
|
|
1
|
-
|
2
|
-
import { LitElement, html, css } from 'lit';
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
4
|
-
import { classMap } from 'lit/directives/class-map.js';
|
5
|
-
/**
|
6
|
-
* An nile-menu element.
|
7
|
-
*
|
8
|
-
* @fires count-changed - Indicates when the count changes
|
9
|
-
* @slot - This element has a slot
|
10
|
-
* @csspart button - The button
|
11
|
-
*/
|
12
|
-
let NileMenu = class NileMenu extends LitElement {
|
13
|
-
constructor() {
|
14
|
-
super(...arguments);
|
15
|
-
/**
|
16
|
-
* Button Lab
|
17
|
-
*/
|
18
|
-
this.name = 'Heading 1';
|
19
|
-
/**
|
20
|
-
* Button Lab
|
21
|
-
*/
|
22
|
-
this.icon = "";
|
23
|
-
/**
|
24
|
-
* Button Lab
|
25
|
-
*/
|
26
|
-
this.isActive = false;
|
27
|
-
/**
|
28
|
-
* Displays shorter version
|
29
|
-
*/
|
30
|
-
this.short = false;
|
31
|
-
/**
|
32
|
-
* Button Lab
|
33
|
-
*/
|
34
|
-
this.href = "/";
|
35
|
-
}
|
36
|
-
get buttonClassMap() {
|
37
|
-
return {
|
38
|
-
'nds-menu--active': this.isActive,
|
39
|
-
'nds-menu--short': this.short
|
40
|
-
};
|
41
|
-
}
|
42
|
-
render() {
|
43
|
-
const { name, icon, href } = this;
|
44
|
-
const hrefPath = `/${href}`;
|
45
|
-
return html `
|
46
|
-
<a class="nds-menu ${classMap(this.buttonClassMap)}">
|
47
|
-
<span class="nds-menu__icon">
|
48
|
-
<nile-icon name="${this.icon}" size="14" color="#000"></nile-icon>
|
49
|
-
</span>
|
50
|
-
<span class="nds-menu__link">${this.name}</span>
|
51
|
-
</a>
|
52
|
-
`;
|
53
|
-
}
|
54
|
-
};
|
55
|
-
NileMenu.styles = css `
|
56
|
-
:host {
|
57
|
-
display: block;
|
58
|
-
width: 100%;
|
59
|
-
}
|
60
|
-
.nds-menu {
|
61
|
-
display: flex;
|
62
|
-
padding: 6px 6px;
|
63
|
-
border-radius: 4px;
|
64
|
-
cursor: pointer;
|
65
|
-
margin-bottom: 12px;
|
66
|
-
align-items: center;
|
67
|
-
text-decoration: none;
|
68
|
-
}
|
69
|
-
|
70
|
-
.nds-menu:hover {
|
71
|
-
background: rgba(0, 94, 166, 0.1);
|
72
|
-
}
|
73
|
-
.nds-menu__link {
|
74
|
-
font-family: var(--nile-font-family-sans-serif);
|
75
|
-
font-style: normal;
|
76
|
-
font-weight: 400;
|
77
|
-
font-size: 14px;
|
78
|
-
line-height: 14px;
|
79
|
-
letter-spacing: 0.2px;
|
80
|
-
color: #131415;
|
81
|
-
text-decoration: none;
|
82
|
-
margin-left: 12px;
|
83
|
-
}
|
84
|
-
.nds-menu--active {
|
85
|
-
background: rgba(0, 94, 166, 0.1);
|
86
|
-
}
|
87
|
-
|
88
|
-
.nds-menu__icon {
|
89
|
-
margin-bottom: 0;
|
90
|
-
height: 14px;
|
91
|
-
}
|
92
|
-
|
93
|
-
.nds-menu--short {
|
94
|
-
width: auto;
|
95
|
-
/* min-width: 30px; */
|
96
|
-
}
|
97
|
-
.nds-menu--short > .nds-menu__link {
|
98
|
-
display:none;
|
99
|
-
}
|
100
|
-
`;
|
101
|
-
__decorate([
|
102
|
-
property()
|
103
|
-
], NileMenu.prototype, "name", void 0);
|
104
|
-
__decorate([
|
105
|
-
property()
|
106
|
-
], NileMenu.prototype, "icon", void 0);
|
107
|
-
__decorate([
|
108
|
-
property()
|
109
|
-
], NileMenu.prototype, "isActive", void 0);
|
110
|
-
__decorate([
|
111
|
-
property()
|
112
|
-
], NileMenu.prototype, "short", void 0);
|
113
|
-
__decorate([
|
114
|
-
property()
|
115
|
-
], NileMenu.prototype, "href", void 0);
|
116
|
-
NileMenu = __decorate([
|
117
|
-
customElement('nile-menu')
|
118
|
-
], NileMenu);
|
119
|
-
export { NileMenu };
|
1
|
+
export { NileMenu } from './nile-menu';
|
120
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-menu/index.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { NileMenu } from './nile-menu';\n"]}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
/**
|
8
|
+
* Menu CSS
|
9
|
+
*/
|
10
|
+
export declare const styles: import("lit-element").CSSResult;
|
11
|
+
declare const _default: import("lit-element").CSSResult[];
|
12
|
+
export default _default;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { css } from 'lit-element';
|
8
|
+
/**
|
9
|
+
* Menu CSS
|
10
|
+
*/
|
11
|
+
export const styles = css `
|
12
|
+
:host {
|
13
|
+
display: block;
|
14
|
+
position: relative;
|
15
|
+
background: hsl(0, 0%, 100%);
|
16
|
+
border: solid 1px hsl(240 5.9% 90%);
|
17
|
+
border-radius: 0.25rem;
|
18
|
+
padding: 0.5rem 0;
|
19
|
+
overflow: auto;
|
20
|
+
overscroll-behavior: none;
|
21
|
+
}
|
22
|
+
|
23
|
+
::slotted(nile-divider) {
|
24
|
+
--spacing: 0.5rem;
|
25
|
+
}
|
26
|
+
`;
|
27
|
+
export default [styles];
|
28
|
+
//# sourceMappingURL=nile-menu.css.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAexB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Menu CSS\n */\nexport const styles = css`\n :host {\n display: block;\n position: relative;\n background: hsl(0, 0%, 100%);\n border: solid 1px hsl(240 5.9% 90%);\n border-radius: 0.25rem;\n padding: 0.5rem 0;\n overflow: auto;\n overscroll-behavior: none;\n }\n\n ::slotted(nile-divider) {\n --spacing: 0.5rem;\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import NileElement from '../internal/nile-element';
|
2
|
+
import type { CSSResultGroup } from 'lit';
|
3
|
+
import type NileMenuItem from '../nile-menu-item/nile-menu-item';
|
4
|
+
/**
|
5
|
+
* An nile-menu element.
|
6
|
+
* @summary Menus provide a list of options for the user to choose from.
|
7
|
+
*
|
8
|
+
* @slot - The menu's content, including menu items, menu labels, and dividers.
|
9
|
+
*
|
10
|
+
* @event nile-select - Emitted when a menu item is selected.
|
11
|
+
* @fires count-changed - Indicates when the count changes
|
12
|
+
* @slot - This element has a slot
|
13
|
+
* @csspart button - The button
|
14
|
+
*/
|
15
|
+
export declare class NileMenu extends NileElement {
|
16
|
+
static styles: CSSResultGroup;
|
17
|
+
defaultSlot: HTMLSlotElement;
|
18
|
+
connectedCallback(): void;
|
19
|
+
private handleClick;
|
20
|
+
private handleKeyDown;
|
21
|
+
private handleMouseDown;
|
22
|
+
private handleSlotChange;
|
23
|
+
private isMenuItem;
|
24
|
+
/** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
|
25
|
+
getAllItems(): NileMenuItem[];
|
26
|
+
/**
|
27
|
+
* @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
|
28
|
+
* The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
|
29
|
+
*/
|
30
|
+
getCurrentItem(): NileMenuItem | undefined;
|
31
|
+
/**
|
32
|
+
* @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
|
33
|
+
* `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
|
34
|
+
*/
|
35
|
+
setCurrentItem(item: NileMenuItem): void;
|
36
|
+
render(): import("lit-html").TemplateResult<1>;
|
37
|
+
}
|
38
|
+
export default NileMenu;
|
39
|
+
declare global {
|
40
|
+
interface HTMLElementTagNameMap {
|
41
|
+
'nile-menu': NileMenu;
|
42
|
+
}
|
43
|
+
}
|
@@ -0,0 +1,142 @@
|
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { html } from 'lit';
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
4
|
+
import { query } from 'lit/decorators.js';
|
5
|
+
import NileElement from '../internal/nile-element';
|
6
|
+
import { styles } from './nile-menu.css';
|
7
|
+
/**
|
8
|
+
* An nile-menu element.
|
9
|
+
* @summary Menus provide a list of options for the user to choose from.
|
10
|
+
*
|
11
|
+
* @slot - The menu's content, including menu items, menu labels, and dividers.
|
12
|
+
*
|
13
|
+
* @event nile-select - Emitted when a menu item is selected.
|
14
|
+
* @fires count-changed - Indicates when the count changes
|
15
|
+
* @slot - This element has a slot
|
16
|
+
* @csspart button - The button
|
17
|
+
*/
|
18
|
+
let NileMenu = class NileMenu extends NileElement {
|
19
|
+
connectedCallback() {
|
20
|
+
super.connectedCallback();
|
21
|
+
this.setAttribute('role', 'menu');
|
22
|
+
}
|
23
|
+
handleClick(event) {
|
24
|
+
const target = event.target;
|
25
|
+
const item = target.closest('nile-menu-item');
|
26
|
+
// if (!item || item.disabled || item.inert) {
|
27
|
+
if (!item || item.disabled) {
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
if (item.type === 'checkbox') {
|
31
|
+
item.checked = !item.checked;
|
32
|
+
}
|
33
|
+
this.emit('nile-select', { value: item.value });
|
34
|
+
}
|
35
|
+
handleKeyDown(event) {
|
36
|
+
// Make a selection when pressing enter
|
37
|
+
if (event.key === 'Enter') {
|
38
|
+
const item = this.getCurrentItem();
|
39
|
+
event.preventDefault();
|
40
|
+
// Simulate a click to support @click handlers on menu items that also work with the keyboard
|
41
|
+
item?.click();
|
42
|
+
}
|
43
|
+
// Prevent scrolling when space is pressed
|
44
|
+
if (event.key === ' ') {
|
45
|
+
event.preventDefault();
|
46
|
+
}
|
47
|
+
// Move the selection when pressing down or up
|
48
|
+
if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
49
|
+
const items = this.getAllItems();
|
50
|
+
const activeItem = this.getCurrentItem();
|
51
|
+
let index = activeItem ? items.indexOf(activeItem) : 0;
|
52
|
+
if (items.length > 0) {
|
53
|
+
event.preventDefault();
|
54
|
+
if (event.key === 'ArrowDown') {
|
55
|
+
index++;
|
56
|
+
}
|
57
|
+
else if (event.key === 'ArrowUp') {
|
58
|
+
index--;
|
59
|
+
}
|
60
|
+
else if (event.key === 'Home') {
|
61
|
+
index = 0;
|
62
|
+
}
|
63
|
+
else if (event.key === 'End') {
|
64
|
+
index = items.length - 1;
|
65
|
+
}
|
66
|
+
if (index < 0) {
|
67
|
+
index = items.length - 1;
|
68
|
+
}
|
69
|
+
if (index > items.length - 1) {
|
70
|
+
index = 0;
|
71
|
+
}
|
72
|
+
this.setCurrentItem(items[index]);
|
73
|
+
items[index].focus();
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
handleMouseDown(event) {
|
78
|
+
const target = event.target;
|
79
|
+
if (this.isMenuItem(target)) {
|
80
|
+
this.setCurrentItem(target);
|
81
|
+
}
|
82
|
+
}
|
83
|
+
handleSlotChange() {
|
84
|
+
const items = this.getAllItems();
|
85
|
+
// Reset the roving tab index when the slotted items change
|
86
|
+
if (items.length > 0) {
|
87
|
+
this.setCurrentItem(items[0]);
|
88
|
+
}
|
89
|
+
}
|
90
|
+
isMenuItem(item) {
|
91
|
+
return (item.tagName.toLowerCase() === 'nile-menu-item' ||
|
92
|
+
['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? ''));
|
93
|
+
}
|
94
|
+
/** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
|
95
|
+
getAllItems() {
|
96
|
+
return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
|
97
|
+
if (!this.isMenuItem(el)) {
|
98
|
+
// if (el.inert || !this.isMenuItem(el)) {
|
99
|
+
return false;
|
100
|
+
}
|
101
|
+
return true;
|
102
|
+
});
|
103
|
+
}
|
104
|
+
/**
|
105
|
+
* @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
|
106
|
+
* The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
|
107
|
+
*/
|
108
|
+
getCurrentItem() {
|
109
|
+
return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
|
110
|
+
}
|
111
|
+
/**
|
112
|
+
* @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
|
113
|
+
* `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
|
114
|
+
*/
|
115
|
+
setCurrentItem(item) {
|
116
|
+
const items = this.getAllItems();
|
117
|
+
// Update tab indexes
|
118
|
+
items.forEach(i => {
|
119
|
+
i.setAttribute('tabindex', i === item ? '0' : '-1');
|
120
|
+
});
|
121
|
+
}
|
122
|
+
render() {
|
123
|
+
return html `
|
124
|
+
<slot
|
125
|
+
@slotchange=${this.handleSlotChange}
|
126
|
+
@click=${this.handleClick}
|
127
|
+
@keydown=${this.handleKeyDown}
|
128
|
+
@mousedown=${this.handleMouseDown}
|
129
|
+
></slot>
|
130
|
+
`;
|
131
|
+
}
|
132
|
+
};
|
133
|
+
NileMenu.styles = styles;
|
134
|
+
__decorate([
|
135
|
+
query('slot')
|
136
|
+
], NileMenu.prototype, "defaultSlot", void 0);
|
137
|
+
NileMenu = __decorate([
|
138
|
+
customElement('nile-menu')
|
139
|
+
], NileMenu);
|
140
|
+
export { NileMenu };
|
141
|
+
export default NileMenu;
|
142
|
+
//# sourceMappingURL=nile-menu.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport {styles} from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n\n @query('slot') defaultSlot: HTMLSlotElement;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value :item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n if ( !this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n render() {\n return html`\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { NileMenuItem } from './nile-menu-item';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { NileMenuItem } from './nile-menu-item';\n"]}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
/**
|
8
|
+
* MenuItem CSS
|
9
|
+
*/
|
10
|
+
export declare const styles: import("lit-element").CSSResult;
|
11
|
+
declare const _default: import("lit-element").CSSResult[];
|
12
|
+
export default _default;
|
@@ -0,0 +1,121 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { css } from 'lit-element';
|
8
|
+
/**
|
9
|
+
* MenuItem CSS
|
10
|
+
*/
|
11
|
+
export const styles = css `
|
12
|
+
:host {
|
13
|
+
box-sizing: border-box;
|
14
|
+
}
|
15
|
+
|
16
|
+
:host *,
|
17
|
+
:host *::before,
|
18
|
+
:host *::after {
|
19
|
+
box-sizing: inherit;
|
20
|
+
}
|
21
|
+
|
22
|
+
[hidden] {
|
23
|
+
display: none !important;
|
24
|
+
}
|
25
|
+
|
26
|
+
:host {
|
27
|
+
display: block;
|
28
|
+
}
|
29
|
+
|
30
|
+
:host([inert]) {
|
31
|
+
display: none;
|
32
|
+
}
|
33
|
+
|
34
|
+
.menu-item {
|
35
|
+
position: relative;
|
36
|
+
display: flex;
|
37
|
+
align-items: stretch;
|
38
|
+
font-size: 1rem;
|
39
|
+
font-weight: 400;
|
40
|
+
line-height: 1.8;
|
41
|
+
letter-spacing: normal;
|
42
|
+
color: hsl(240 5.3% 26.1%);
|
43
|
+
padding: 0.25rem 0.25rem;
|
44
|
+
transition: 150ms fill;
|
45
|
+
user-select: none;
|
46
|
+
white-space: nowrap;
|
47
|
+
cursor: pointer;
|
48
|
+
}
|
49
|
+
|
50
|
+
.menu-item.menu-item--disabled {
|
51
|
+
outline: none;
|
52
|
+
opacity: 0.5;
|
53
|
+
cursor: not-allowed;
|
54
|
+
}
|
55
|
+
|
56
|
+
.menu-item .menu-item__label {
|
57
|
+
flex: 1 1 auto;
|
58
|
+
display: inline-block;
|
59
|
+
}
|
60
|
+
|
61
|
+
.menu-item .menu-item__prefix {
|
62
|
+
flex: 0 0 auto;
|
63
|
+
display: flex;
|
64
|
+
align-items: center;
|
65
|
+
}
|
66
|
+
|
67
|
+
.menu-item .menu-item__prefix::slotted(*) {
|
68
|
+
margin-inline-end: 0.5rem;
|
69
|
+
}
|
70
|
+
|
71
|
+
.menu-item .menu-item__suffix {
|
72
|
+
flex: 0 0 auto;
|
73
|
+
display: flex;
|
74
|
+
align-items: center;
|
75
|
+
}
|
76
|
+
|
77
|
+
.menu-item .menu-item__suffix::slotted(*) {
|
78
|
+
margin-inline-start: 0.5rem;
|
79
|
+
}
|
80
|
+
|
81
|
+
:host(:focus-visible) {
|
82
|
+
outline: none;
|
83
|
+
}
|
84
|
+
|
85
|
+
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
|
86
|
+
background-color: hsl(240 4.8% 95.9%);
|
87
|
+
color: hsl(0, 0%, 0%);
|
88
|
+
}
|
89
|
+
|
90
|
+
:host(:focus-visible) .menu-item {
|
91
|
+
outline: none;
|
92
|
+
background-color: hsl(200.4 98% 39.4%);
|
93
|
+
color: hsl(0, 0%, 100%);
|
94
|
+
opacity: 1;
|
95
|
+
}
|
96
|
+
|
97
|
+
.menu-item .menu-item__check,
|
98
|
+
.menu-item .menu-item__chevron {
|
99
|
+
flex: 0 0 auto;
|
100
|
+
display: flex;
|
101
|
+
align-items: center;
|
102
|
+
justify-content: center;
|
103
|
+
width: 1.5em;
|
104
|
+
visibility: hidden;
|
105
|
+
}
|
106
|
+
|
107
|
+
.menu-item--checked .menu-item__check,
|
108
|
+
.menu-item--has-submenu .menu-item__chevron {
|
109
|
+
visibility: visible;
|
110
|
+
}
|
111
|
+
|
112
|
+
@media (forced-colors: active) {
|
113
|
+
:host(:hover:not([aria-disabled='true'])) .menu-item,
|
114
|
+
:host(:focus-visible) .menu-item {
|
115
|
+
outline: dashed 1px SelectedItem;
|
116
|
+
outline-offset: -1px;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
`;
|
120
|
+
export default [styles];
|
121
|
+
//# sourceMappingURL=nile-menu-item.css.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * MenuItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n :host([inert]) {\n display: none;\n }\n\n .menu-item {\n position: relative;\n display: flex;\n align-items: stretch;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.8;\n letter-spacing: normal;\n color: hsl(240 5.3% 26.1%);\n padding: 0.25rem 0.25rem;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n }\n\n .menu-item.menu-item--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .menu-item .menu-item__label {\n flex: 1 1 auto;\n display: inline-block;\n }\n\n .menu-item .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__prefix::slotted(*) {\n margin-inline-end: 0.5rem;\n }\n\n .menu-item .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__suffix::slotted(*) {\n margin-inline-start: 0.5rem;\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(0, 0%, 0%);\n }\n\n :host(:focus-visible) .menu-item {\n outline: none;\n background-color: hsl(200.4 98% 39.4%);\n color: hsl(0, 0%, 100%);\n opacity: 1;\n }\n\n .menu-item .menu-item__check,\n .menu-item .menu-item__chevron {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n visibility: hidden;\n }\n\n .menu-item--checked .menu-item__check,\n .menu-item--has-submenu .menu-item__chevron {\n visibility: visible;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .menu-item,\n :host(:focus-visible) .menu-item {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { TemplateResult } from 'lit-element';
|
8
|
+
import '../nile-icon';
|
9
|
+
import NileElement from '../internal/nile-element';
|
10
|
+
import type { CSSResultGroup } from 'lit';
|
11
|
+
/**
|
12
|
+
* Nile icon component.
|
13
|
+
*
|
14
|
+
* @tag nile-menu-item
|
15
|
+
*
|
16
|
+
* @summary Menu items provide options for the user to pick from in a menu.
|
17
|
+
* @status stable
|
18
|
+
* @since 2.0
|
19
|
+
*
|
20
|
+
* @dependency nile-icon
|
21
|
+
*
|
22
|
+
* @slot - The menu item's label.
|
23
|
+
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
24
|
+
* @slot suffix - Used to append an icon or similar element to the menu item.
|
25
|
+
*
|
26
|
+
* @csspart base - The component's base wrapper.
|
27
|
+
* @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
|
28
|
+
* @csspart prefix - The prefix container.
|
29
|
+
* @csspart label - The menu item label.
|
30
|
+
* @csspart suffix - The suffix container.
|
31
|
+
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
|
32
|
+
*/
|
33
|
+
export declare class NileMenuItem extends NileElement {
|
34
|
+
static styles: CSSResultGroup;
|
35
|
+
private cachedTextLabel;
|
36
|
+
defaultSlot: HTMLSlotElement;
|
37
|
+
menuItem: HTMLElement;
|
38
|
+
/** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
|
39
|
+
type: 'normal' | 'checkbox';
|
40
|
+
/** Draws the item in a checked state. */
|
41
|
+
checked: boolean;
|
42
|
+
/** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
|
43
|
+
value: string;
|
44
|
+
/** Draws the menu item in a disabled state, preventing selection. */
|
45
|
+
disabled: boolean;
|
46
|
+
connectedCallback(): void;
|
47
|
+
disconnectedCallback(): void;
|
48
|
+
private handleDefaultSlotChange;
|
49
|
+
private handleHostClick;
|
50
|
+
handleCheckedChange(): void;
|
51
|
+
handleDisabledChange(): void;
|
52
|
+
handleTypeChange(): void;
|
53
|
+
/** Returns a text label based on the contents of the menu item's default slot. */
|
54
|
+
getTextLabel(): string;
|
55
|
+
render(): TemplateResult<1>;
|
56
|
+
}
|
57
|
+
export default NileMenuItem;
|
58
|
+
declare global {
|
59
|
+
interface HTMLElementTagNameMap {
|
60
|
+
'nile-menu-item': NileMenuItem;
|
61
|
+
}
|
62
|
+
}
|