@exmg/exm-navigation 1.1.36 → 1.2.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.
Files changed (96) hide show
  1. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-base.d.ts +141 -0
  2. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-base.js +506 -0
  3. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-base.d.ts +14 -0
  4. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-base.js +65 -0
  5. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu-base.d.ts +12 -0
  6. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu-base.js +45 -0
  7. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu.d.ts +9 -0
  8. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-menu.js +12 -0
  9. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item-base.d.ts +14 -0
  10. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item-base.js +49 -0
  11. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item.d.ts +8 -0
  12. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer-nav-item.js +10 -0
  13. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer.d.ts +8 -0
  14. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-drawer.js +10 -0
  15. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-base.d.ts +7 -0
  16. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-base.js +20 -0
  17. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button-base.d.ts +9 -0
  18. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button-base.js +36 -0
  19. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button.d.ts +8 -0
  20. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon-button.js +10 -0
  21. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon.d.ts +8 -0
  22. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-icon.js +10 -0
  23. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-base.d.ts +12 -0
  24. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-base.js +62 -0
  25. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item-base.d.ts +12 -0
  26. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item-base.js +37 -0
  27. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item.d.ts +8 -0
  28. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail-nav-item.js +10 -0
  29. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail.d.ts +8 -0
  30. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-rail.js +10 -0
  31. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu-base.d.ts +28 -0
  32. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu-base.js +153 -0
  33. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu.d.ts +8 -0
  34. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-sub-menu.js +10 -0
  35. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar-base.d.ts +10 -0
  36. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar-base.js +33 -0
  37. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar.d.ts +8 -0
  38. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation-topbar.js +10 -0
  39. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation.d.ts +8 -0
  40. package/.rollup.cache/root/repo/packages/exm-navigation/dist/exm-navigation.js +10 -0
  41. package/.rollup.cache/root/repo/packages/exm-navigation/dist/index.d.ts +12 -0
  42. package/.rollup.cache/root/repo/packages/exm-navigation/dist/index.js +13 -0
  43. package/.rollup.cache/root/repo/packages/exm-navigation/dist/mixins/media-queries.d.ts +8 -0
  44. package/.rollup.cache/root/repo/packages/exm-navigation/dist/mixins/media-queries.js +57 -0
  45. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-css.d.ts +1 -0
  46. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-css.js +75 -0
  47. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-css.d.ts +1 -0
  48. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-css.js +32 -0
  49. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-nav-item-css.d.ts +1 -0
  50. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-drawer-nav-item-css.js +84 -0
  51. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-button-css.d.ts +1 -0
  52. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-button-css.js +29 -0
  53. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-css.d.ts +1 -0
  54. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-icon-css.js +22 -0
  55. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-css.d.ts +1 -0
  56. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-css.js +59 -0
  57. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-nav-item-css.d.ts +1 -0
  58. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-rail-nav-item-css.js +94 -0
  59. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-sub-menu-css.d.ts +1 -0
  60. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-sub-menu-css.js +24 -0
  61. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-topbar-css.d.ts +1 -0
  62. package/.rollup.cache/root/repo/packages/exm-navigation/dist/styles/exm-navigation-topbar-css.js +30 -0
  63. package/.rollup.cache/root/repo/packages/exm-navigation/dist/types.d.ts +10 -0
  64. package/dist/exm-navigation-base.js +7 -6
  65. package/dist/exm-navigation-drawer-base.js +6 -3
  66. package/dist/exm-navigation-drawer-menu-base.js +6 -3
  67. package/dist/exm-navigation-drawer-menu.js +4 -2
  68. package/dist/exm-navigation-drawer-nav-item-base.js +7 -4
  69. package/dist/exm-navigation-drawer-nav-item.js +4 -2
  70. package/dist/exm-navigation-drawer.js +4 -2
  71. package/dist/exm-navigation-icon-base.js +6 -4
  72. package/dist/exm-navigation-icon-button-base.js +7 -4
  73. package/dist/exm-navigation-icon-button.js +4 -2
  74. package/dist/exm-navigation-icon.js +4 -2
  75. package/dist/exm-navigation-rail-base.js +6 -3
  76. package/dist/exm-navigation-rail-nav-item-base.js +6 -3
  77. package/dist/exm-navigation-rail-nav-item.js +4 -2
  78. package/dist/exm-navigation-rail.js +4 -2
  79. package/dist/exm-navigation-sub-menu-base.js +8 -5
  80. package/dist/exm-navigation-sub-menu.js +4 -2
  81. package/dist/exm-navigation-topbar-base.js +6 -3
  82. package/dist/exm-navigation-topbar.js +4 -2
  83. package/dist/exm-navigation.js +4 -2
  84. package/dist/index.js +1 -1
  85. package/dist/mixins/media-queries.js +6 -3
  86. package/dist/styles/exm-navigation-css.js +5 -2
  87. package/dist/styles/exm-navigation-drawer-css.js +5 -2
  88. package/dist/styles/exm-navigation-drawer-nav-item-css.js +5 -2
  89. package/dist/styles/exm-navigation-icon-button-css.js +5 -2
  90. package/dist/styles/exm-navigation-icon-css.js +5 -2
  91. package/dist/styles/exm-navigation-rail-css.js +5 -2
  92. package/dist/styles/exm-navigation-rail-nav-item-css.js +5 -2
  93. package/dist/styles/exm-navigation-sub-menu-css.js +5 -2
  94. package/dist/styles/exm-navigation-topbar-css.js +5 -2
  95. package/package.json +2 -2
  96. /package/{dist → .rollup.cache/root/repo/packages/exm-navigation/dist}/types.js +0 -0
@@ -0,0 +1,153 @@
1
+ import { __decorate } from "tslib";
2
+ import { html } from 'lit';
3
+ import { ExmgElement } from '@exmg/lit-base/index.js';
4
+ import { property, query, state } from 'lit/decorators.js';
5
+ import { repeat } from 'lit/directives/repeat.js';
6
+ import { style } from './styles/exm-navigation-sub-menu-css.js';
7
+ import { animate, fadeOut, fadeIn } from '@lit-labs/motion';
8
+ import './exm-navigation-rail-nav-item.js';
9
+ import './exm-navigation-drawer-nav-item.js';
10
+ import '@material/web/list/list.js';
11
+ import '@exmg/exm-collapsed/exm-collapsed.js';
12
+ import { classMap } from 'lit/directives/class-map.js';
13
+ import { styleMap } from 'lit/directives/style-map.js';
14
+ export class ExmNavigationSubMenuBase extends ExmgElement {
15
+ constructor() {
16
+ super(...arguments);
17
+ this.items = [];
18
+ this.path = [];
19
+ this.hasBackButton = false;
20
+ }
21
+ updated(changedProperties) {
22
+ var _a;
23
+ if (changedProperties.has('path') || changedProperties.has('items')) {
24
+ this.currentItem = ((_a = this.items.find((item) => item.id === this.path[0])) === null || _a === void 0 ? void 0 : _a.items) || [];
25
+ }
26
+ }
27
+ connectedCallback() {
28
+ super.connectedCallback();
29
+ }
30
+ disconnectedCallback() {
31
+ if (this.navigationElement) {
32
+ this.navigationElement.classList.remove('show');
33
+ }
34
+ super.disconnectedCallback();
35
+ }
36
+ handleSubMenuItemClick(path) {
37
+ this.fire('sub-menu-item-click', path);
38
+ }
39
+ /**
40
+ * If a collapsable menuitem is not selected we can just pass the path.
41
+ * If it is selected, we remove the item from the path to collapse the menu again
42
+ */
43
+ handleCollapsableSubMenuItemClick(path, id, selected) {
44
+ if (!selected) {
45
+ this.handleSubMenuItemClick(path);
46
+ return;
47
+ }
48
+ const index = path.findIndex((item) => item === id);
49
+ this.fire('sub-menu-item-click', path.splice(0, index));
50
+ }
51
+ getItemStyle() {
52
+ return {
53
+ 'grid-area': `${ExmNavigationSubMenuBase.itemIndex}/1/${ExmNavigationSubMenuBase.itemIndex + 1}/2`,
54
+ };
55
+ }
56
+ renderSubMenu(item, path) {
57
+ const selected = this.path.includes(item.id);
58
+ return html `
59
+ <exm-navigation-drawer-nav-item
60
+ ${animate({
61
+ keyframeOptions: {
62
+ duration: 300,
63
+ },
64
+ out: fadeOut,
65
+ in: fadeIn,
66
+ properties: ['opacity'],
67
+ })}
68
+ style=${styleMap(this.getItemStyle())}
69
+ type="button"
70
+ ?selected=${selected}
71
+ class="has-submenu ${this.path.includes(item.id) ? 'selected' : ''}"
72
+ @click=${this.handleCollapsableSubMenuItemClick.bind(this, [...path], item.id, selected)}
73
+ ?has-submenu=${true}
74
+ submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
75
+ >${item.label}
76
+ </exm-navigation-drawer-nav-item>
77
+ <exm-collapsed id="collapsed" ?opened=${this.path.includes(item.id)}>
78
+ <div class="sub-menu">
79
+ <md-list>
80
+ <!-- Need to check for multiple items -->
81
+ ${(item.items || []).map((subItem) => {
82
+ ExmNavigationSubMenuBase.itemIndex += 1;
83
+ return (subItem.items || []).length === 0
84
+ ? html `
85
+ <exm-navigation-drawer-nav-item
86
+ style=${styleMap(this.getItemStyle())}
87
+ class="collapsed-item"
88
+ ?selected=${this.path.includes(subItem.id)}
89
+ @click=${this.handleSubMenuItemClick.bind(this, [...path, subItem.id])}
90
+ >
91
+ ${subItem.label}
92
+ </exm-navigation-drawer-nav-item>
93
+ `
94
+ : this.renderSubMenu(item, [this.path[0] || '', item.id]);
95
+ })}
96
+ </md-list>
97
+ </div>
98
+ </exm-collapsed>
99
+ `;
100
+ }
101
+ render() {
102
+ const navClass = { nav: true, 'has-back-button': this.hasBackButton };
103
+ ExmNavigationSubMenuBase.itemIndex = 0;
104
+ return html `<div class="top"><slot name="top"></slot></div>
105
+ <nav id="exm-navigation-sub-menu" class=${classMap(navClass)}>
106
+ <md-list>
107
+ ${repeat(this.currentItem || [], ({ id }) => id, (item) => {
108
+ ExmNavigationSubMenuBase.itemIndex += 1;
109
+ return (item.items || []).length === 0
110
+ ? html `
111
+ <exm-navigation-drawer-nav-item
112
+ ${animate({
113
+ keyframeOptions: {
114
+ duration: 300,
115
+ },
116
+ stabilizeOut: true,
117
+ out: fadeOut,
118
+ in: fadeIn,
119
+ properties: ['opacity'],
120
+ })}
121
+ style="${styleMap(this.getItemStyle())}"
122
+ type="button"
123
+ ?selected=${this.path.includes(item.id)}
124
+ @click=${this.handleSubMenuItemClick.bind(this, [this.path[0] || '', item.id])}
125
+ >
126
+ ${item.label}
127
+ </exm-navigation-drawer-nav-item>
128
+ `
129
+ : this.renderSubMenu(item, [this.path[0] || '', item.id]);
130
+ })}
131
+ </md-list>
132
+ </nav>
133
+ <div class="bottom"><slot name="bottom"></slot></div>`;
134
+ }
135
+ }
136
+ ExmNavigationSubMenuBase.itemIndex = 0;
137
+ ExmNavigationSubMenuBase.styles = [style];
138
+ __decorate([
139
+ property({ type: Array })
140
+ ], ExmNavigationSubMenuBase.prototype, "items", void 0);
141
+ __decorate([
142
+ property({ type: Array })
143
+ ], ExmNavigationSubMenuBase.prototype, "path", void 0);
144
+ __decorate([
145
+ property({ type: Boolean, attribute: 'has-back-button' })
146
+ ], ExmNavigationSubMenuBase.prototype, "hasBackButton", void 0);
147
+ __decorate([
148
+ state()
149
+ ], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);
150
+ __decorate([
151
+ query('nav')
152
+ ], ExmNavigationSubMenuBase.prototype, "navigationElement", void 0);
153
+ //# sourceMappingURL=exm-navigation-sub-menu-base.js.map
@@ -0,0 +1,8 @@
1
+ import { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
2
+ export declare class ExmNavigationSubMenu extends ExmNavigationSubMenuBase {
3
+ }
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'exm-navigation-sub-menu': ExmNavigationSubMenu;
7
+ }
8
+ }
@@ -0,0 +1,10 @@
1
+ import { __decorate } from "tslib";
2
+ import { customElement } from 'lit/decorators/custom-element.js';
3
+ import { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
4
+ let ExmNavigationSubMenu = class ExmNavigationSubMenu extends ExmNavigationSubMenuBase {
5
+ };
6
+ ExmNavigationSubMenu = __decorate([
7
+ customElement('exm-navigation-sub-menu')
8
+ ], ExmNavigationSubMenu);
9
+ export { ExmNavigationSubMenu };
10
+ //# sourceMappingURL=exm-navigation-sub-menu.js.map
@@ -0,0 +1,10 @@
1
+ import { ExmgElement } from '@exmg/lit-base/index.js';
2
+ import { MenuItem } from './types.js';
3
+ import './exm-navigation-rail-nav-item.js';
4
+ export declare class ExmNavigationTopbarBase extends ExmgElement {
5
+ items: MenuItem[];
6
+ drawerOpen: boolean;
7
+ static styles: import("lit").CSSResult[];
8
+ handleMenuButtonClick(itemId: string): void;
9
+ render(): import("lit-html").TemplateResult<1>;
10
+ }
@@ -0,0 +1,33 @@
1
+ import { __decorate } from "tslib";
2
+ import { html } from 'lit';
3
+ import { ExmgElement } from '@exmg/lit-base/index.js';
4
+ import { property } from 'lit/decorators.js';
5
+ import { style } from './styles/exm-navigation-topbar-css.js';
6
+ import './exm-navigation-rail-nav-item.js';
7
+ export class ExmNavigationTopbarBase extends ExmgElement {
8
+ constructor() {
9
+ super(...arguments);
10
+ this.items = [];
11
+ this.drawerOpen = false;
12
+ }
13
+ handleMenuButtonClick(itemId) {
14
+ this.fire('topbar-menu-click', itemId);
15
+ }
16
+ render() {
17
+ return html `
18
+ <md-icon-button @click=${this.handleMenuButtonClick}
19
+ ><md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon></md-icon-button
20
+ >
21
+ <slot name="topbar-title" class="topbar-title"></slot>
22
+ <slot name="topbar-actions"></slot>
23
+ `;
24
+ }
25
+ }
26
+ ExmNavigationTopbarBase.styles = [style];
27
+ __decorate([
28
+ property({ type: Array })
29
+ ], ExmNavigationTopbarBase.prototype, "items", void 0);
30
+ __decorate([
31
+ property({ type: Boolean, attribute: 'drawer-open' })
32
+ ], ExmNavigationTopbarBase.prototype, "drawerOpen", void 0);
33
+ //# sourceMappingURL=exm-navigation-topbar-base.js.map
@@ -0,0 +1,8 @@
1
+ import { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
2
+ export declare class ExmNavigationTopbar extends ExmNavigationTopbarBase {
3
+ }
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'exm-navigation-topbar': ExmNavigationTopbar;
7
+ }
8
+ }
@@ -0,0 +1,10 @@
1
+ import { __decorate } from "tslib";
2
+ import { customElement } from 'lit/decorators/custom-element.js';
3
+ import { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
4
+ let ExmNavigationTopbar = class ExmNavigationTopbar extends ExmNavigationTopbarBase {
5
+ };
6
+ ExmNavigationTopbar = __decorate([
7
+ customElement('exm-navigation-topbar')
8
+ ], ExmNavigationTopbar);
9
+ export { ExmNavigationTopbar };
10
+ //# sourceMappingURL=exm-navigation-topbar.js.map
@@ -0,0 +1,8 @@
1
+ import { ExmNavigationBase } from './exm-navigation-base.js';
2
+ export declare class ExmNavigation extends ExmNavigationBase {
3
+ }
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'exm-navigation': ExmNavigation;
7
+ }
8
+ }
@@ -0,0 +1,10 @@
1
+ import { __decorate } from "tslib";
2
+ import { customElement } from 'lit/decorators.js';
3
+ import { ExmNavigationBase } from './exm-navigation-base.js';
4
+ let ExmNavigation = class ExmNavigation extends ExmNavigationBase {
5
+ };
6
+ ExmNavigation = __decorate([
7
+ customElement('exm-navigation')
8
+ ], ExmNavigation);
9
+ export { ExmNavigation };
10
+ //# sourceMappingURL=exm-navigation.js.map
@@ -0,0 +1,12 @@
1
+ export { ExmNavigation } from './exm-navigation.js';
2
+ export { ExmNavigationBase } from './exm-navigation-base.js';
3
+ export { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
4
+ export { ExmNavigationDrawerMenuBase } from './exm-navigation-drawer-menu-base.js';
5
+ export { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
6
+ export { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
7
+ export { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
8
+ export { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
9
+ export { ExmNavigationRailNavItemBase } from './exm-navigation-rail-nav-item-base.js';
10
+ export { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
11
+ export { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
12
+ export { style as exmgNavigationStyles } from './styles/exm-navigation-css.js';
@@ -0,0 +1,13 @@
1
+ export { ExmNavigation } from './exm-navigation.js';
2
+ export { ExmNavigationBase } from './exm-navigation-base.js';
3
+ export { ExmNavigationDrawerBase } from './exm-navigation-drawer-base.js';
4
+ export { ExmNavigationDrawerMenuBase } from './exm-navigation-drawer-menu-base.js';
5
+ export { ExmNavigationDrawerNavItemBase } from './exm-navigation-drawer-nav-item-base.js';
6
+ export { ExmNavigationIconBase } from './exm-navigation-icon-base.js';
7
+ export { ExmNavigationIconButtonBase } from './exm-navigation-icon-button-base.js';
8
+ export { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
9
+ export { ExmNavigationRailNavItemBase } from './exm-navigation-rail-nav-item-base.js';
10
+ export { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
11
+ export { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
12
+ export { style as exmgNavigationStyles } from './styles/exm-navigation-css.js';
13
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,8 @@
1
+ import { LitElement } from 'lit';
2
+ type Constructor<T = {}> = new (...args: any[]) => T;
3
+ type MediaType = 'mobile' | 'tablet' | 'desktop';
4
+ export declare const MediaQueries: <T extends Constructor<LitElement>>(superClass: T) => Constructor<{
5
+ media: MediaType;
6
+ touch: boolean;
7
+ }> & T;
8
+ export {};
@@ -0,0 +1,57 @@
1
+ import { __decorate } from "tslib";
2
+ import { property } from 'lit/decorators.js';
3
+ export const MediaQueries = (superClass) => {
4
+ class MediaQueryClass extends superClass {
5
+ constructor() {
6
+ super(...arguments);
7
+ this.media = 'desktop';
8
+ this.touch = false;
9
+ this.mobileMedia = window.matchMedia('(max-width: 960px)');
10
+ this.tabletMedia = window.matchMedia('(min-width: 961px) and (max-width: 1600px)');
11
+ this.desktopMedia = window.matchMedia('(min-width: 1601px)');
12
+ this.hoverMedia = window.matchMedia('(hover: hover)');
13
+ }
14
+ updateMedia(media) {
15
+ return (mediaMatch) => {
16
+ if (mediaMatch.matches) {
17
+ this.media = media;
18
+ this.requestUpdate();
19
+ }
20
+ };
21
+ }
22
+ updateTouch() {
23
+ return (mediaMatch) => {
24
+ this.touch = !mediaMatch.matches;
25
+ this.requestUpdate();
26
+ };
27
+ }
28
+ connectedCallback() {
29
+ super.connectedCallback();
30
+ // @ts-ignore
31
+ this.updateMedia('mobile')(this.mobileMedia);
32
+ // @ts-ignore
33
+ this.updateMedia('tablet')(this.tabletMedia);
34
+ // @ts-ignore
35
+ this.updateMedia('desktop')(this.desktopMedia);
36
+ // @ts-ignore
37
+ this.updateTouch()(this.hoverMedia);
38
+ this.mobileMedia.addEventListener('change', this.updateMedia('mobile').bind(this));
39
+ this.tabletMedia.addEventListener('change', this.updateMedia('tablet').bind(this));
40
+ this.desktopMedia.addEventListener('change', this.updateMedia('desktop').bind(this));
41
+ this.hoverMedia.addEventListener('change', this.updateTouch().bind(this));
42
+ }
43
+ updated(changedProperties) {
44
+ var _a;
45
+ (_a = super.updated) === null || _a === void 0 ? void 0 : _a.call(this, changedProperties);
46
+ console.log(`${this.media} was updated`);
47
+ }
48
+ }
49
+ __decorate([
50
+ property({ type: String })
51
+ ], MediaQueryClass.prototype, "media", void 0);
52
+ __decorate([
53
+ property({ type: Boolean })
54
+ ], MediaQueryClass.prototype, "touch", void 0);
55
+ return MediaQueryClass;
56
+ };
57
+ //# sourceMappingURL=media-queries.js.map
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
@@ -0,0 +1,75 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ :host {
4
+ --_exm-navigation-drawer-shape: var(--exm-navigation-drawer-shape, 1rem);
5
+ }
6
+
7
+ .navigation-container {
8
+ display: grid;
9
+ grid-template-columns: auto var(--exm-navigation-submenu-column-width, 500px) 1fr;
10
+ grid-template-rows: 1fr;
11
+ width: 100%;
12
+ transition: grid-template-columns 0.3s ease;
13
+ max-height: 100vh;
14
+ }
15
+
16
+ .navigation-container.show-topbar {
17
+ grid-template-columns: 1fr;
18
+ grid-template-rows: auto 1fr;
19
+ }
20
+
21
+ .navigation-container.show-topbar exm-navigation-topbar {
22
+ grid-area: 1/1/2/2;
23
+ z-index: 2;
24
+ }
25
+
26
+ .navigation-container.show-topbar exm-navigation-drawer {
27
+ grid-area: 1/1/3/2;
28
+ }
29
+
30
+ .navigation-container.show-topbar .content {
31
+ grid-area: 2/1/3/2;
32
+ }
33
+
34
+ exm-navigation-rail {
35
+ grid-area: 1/1/2/2;
36
+ }
37
+
38
+ exm-navigation-drawer {
39
+ grid-area: 1/2/2/3;
40
+ }
41
+
42
+ .content {
43
+ grid-area: 1/3/2/4;
44
+ z-index: 1;
45
+ overflow: auto;
46
+ }
47
+
48
+ exm-navigation-drawer {
49
+ --md-list-container-color: none;
50
+ --md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);
51
+ --md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
52
+ --md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
53
+ --md-list-item-container-shape: 24px;
54
+ --mdc-theme-surface: var(--md-sys-color-surface-container-high);
55
+ }
56
+
57
+ .left-margin {
58
+ margin-left: 2.5rem;
59
+ }
60
+
61
+ .drawer-menu-button {
62
+ padding: 0 8px;
63
+ height: var(--_exm-navigation-top-bar-height, 64px);
64
+ box-sizing: border-box;
65
+ display: grid;
66
+ grid-template-columns: 48px 1fr;
67
+ align-items: center;
68
+ justify-items: center;
69
+ }
70
+
71
+ .drawer-back-button {
72
+ padding: 0 8px;
73
+ }
74
+ `;
75
+ //# sourceMappingURL=exm-navigation-css.js.map
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
@@ -0,0 +1,32 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ :host {
4
+ --md-sys-color-background: var(--md-sys-color-surface-container-high);
5
+ --_exm-navigation-submenu-width: var(--exm-navigation-submenu-width);
6
+ display: grid;
7
+ grid-template-columns: var(--_exm-navigation-submenu-width, 300px) 1fr;
8
+ height: 100vh;
9
+ width: 100%;
10
+ box-sizing: border-box;
11
+ transition: grid-template-columns 0.3s ease;
12
+ position: relative;
13
+ }
14
+
15
+ aside {
16
+ position: absolute;
17
+ left: calc(-1 * var(--_exm-navigation-submenu-width, 300px) - 1px);
18
+ width: var(--_exm-navigation-submenu-width, 300px);
19
+ height: 100%;
20
+ transition: left 0.3s ease-out;
21
+ z-index: 4;
22
+ background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
23
+ color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface, #f3edf7));
24
+ border-radius: 0 var(--_exm-navigation-drawer-shape, 0) var(--_exm-navigation-drawer-shape, 0) 0;
25
+ border-left: 1px solid var(--md-sys-color-outline-variant);
26
+
27
+ &.open {
28
+ left: 0;
29
+ }
30
+ }
31
+ `;
32
+ //# sourceMappingURL=exm-navigation-drawer-css.js.map
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
@@ -0,0 +1,84 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ :host {
4
+ --_exm-navigation-item-background-color-selected: var(
5
+ --exm-navigation-item-background-color-selected,
6
+ var(--md-sys-color-secondary)
7
+ );
8
+ --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
9
+ --_exm-navigation-item-color-sub-selected: var(
10
+ --exm-navigation-item-color-sub-selected,
11
+ var(--md-sys-color-on-surface)
12
+ );
13
+ --_exm-navigation-item-background-color-sub-selected: var(
14
+ --exm-navigation-item-background-color-sub-selected,
15
+ var(--md-sys-color-surface-container-highest)
16
+ );
17
+ --md-list-item-container-shape: 2rem;
18
+ --md-list-item-one-line-container-height: 48px;
19
+ }
20
+
21
+ button {
22
+ --background-color: transparent;
23
+ --text-color: var(--md-list-item-label-text-color);
24
+
25
+ border-radius: var(--md-list-item-container-shape);
26
+ height: var(--md-list-item-one-line-container-height);
27
+ font-size: 16px;
28
+ padding: 0 16px;
29
+ display: grid;
30
+ align-items: center;
31
+ width: 100%;
32
+ grid-template-columns: auto 1fr auto;
33
+ background-color: var(--background-color);
34
+ position: relative;
35
+ border: none;
36
+ color: var(--md-sys-color-on-surface, black);
37
+ outline: none;
38
+
39
+ .label {
40
+ grid-area: 1/2/2/3;
41
+ text-align: start;
42
+ }
43
+
44
+ &.selected {
45
+ --background-color: var(--_exm-navigation-item-background-color-selected);
46
+ --text-color: var(--_exm-navigation-item-color-selected);
47
+ color: var(--text-color, black);
48
+
49
+ &.has-sub-menu {
50
+ --background-color: var(--_exm-navigation-item-background-color-sub-selected);
51
+ --text-color: var(--_exm-navigation-item-color-sub-selected);
52
+ }
53
+ }
54
+
55
+ &.has-icon {
56
+ padding-left: 4px;
57
+ }
58
+
59
+ &.has-sub-menu {
60
+ padding-right: 4px;
61
+ }
62
+
63
+ & + button {
64
+ margin-top: 4px;
65
+ }
66
+
67
+ md-focus-ring {
68
+ color: white;
69
+ }
70
+
71
+ exm-navigation-icon {
72
+ width: 48px;
73
+
74
+ &.item-icon {
75
+ grid-area: 1/1/2/2;
76
+ }
77
+
78
+ &.has-submenu {
79
+ grid-area: 1/3/2/4;
80
+ }
81
+ }
82
+ }
83
+ `;
84
+ //# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
@@ -0,0 +1,29 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ .icon-button {
4
+ display: inline-grid;
5
+ grid-template-columns: 48px;
6
+ border: none;
7
+ background-color: rgba(0, 0, 0, 0);
8
+ height: 48px;
9
+ align-items: center;
10
+ justify-content: start;
11
+ padding: 0;
12
+ color: var(--md-sys-color-on-surface, black);
13
+ position: relative;
14
+ border-radius: 2rem;
15
+ outline: none;
16
+ }
17
+
18
+ .icon-button.has-label {
19
+ grid-template-columns: 48px auto;
20
+ width: 100%;
21
+ }
22
+
23
+ .icon-button .label {
24
+ padding: 0 8px;
25
+ white-space: nowrap;
26
+ font-size: 16px;
27
+ }
28
+ `;
29
+ //# sourceMappingURL=exm-navigation-icon-button-css.js.map
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
@@ -0,0 +1,22 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ .icon {
4
+ align-items: center;
5
+ justify-content: center;
6
+ display: flex;
7
+ position: relative;
8
+ height: 100%;
9
+ width: 100%;
10
+ font-variation-settings:
11
+ 'wght' 400,
12
+ 'opsz' 24;
13
+ transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
14
+ border-radius: 16px;
15
+ font-family: 'Material Symbols Outlined';
16
+ font-size: 24px;
17
+ line-height: 1;
18
+ direction: ltr;
19
+ -webkit-font-smoothing: antialiased;
20
+ }
21
+ `;
22
+ //# sourceMappingURL=exm-navigation-icon-css.js.map
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;