@exmg/exm-navigation 1.1.4 → 1.1.6-alpha.12

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 (70) hide show
  1. package/{src → dist}/exm-navigation-base.d.ts +2 -0
  2. package/{src → dist}/exm-navigation-base.js +13 -8
  3. package/{src → dist}/exm-navigation-drawer-base.d.ts +1 -4
  4. package/{src → dist}/exm-navigation-drawer-base.js +9 -8
  5. package/{src → dist}/exm-navigation-drawer-nav-item-base.js +12 -8
  6. package/{src → dist}/exm-navigation-icon-button-base.js +2 -0
  7. package/{src → dist}/exm-navigation-sub-menu-base.d.ts +5 -0
  8. package/{src → dist}/exm-navigation-sub-menu-base.js +15 -4
  9. package/dist/index.d.ts +12 -0
  10. package/dist/index.js +13 -0
  11. package/{src → dist}/styles/exm-navigation-css.js +5 -3
  12. package/dist/styles/exm-navigation-drawer-css.js +35 -0
  13. package/dist/styles/exm-navigation-drawer-nav-item-css.js +84 -0
  14. package/{src → dist}/styles/exm-navigation-icon-button-css.js +6 -2
  15. package/{src → dist}/styles/exm-navigation-rail-css.js +1 -0
  16. package/dist/styles/exm-navigation-sub-menu-css.js +21 -0
  17. package/package.json +18 -21
  18. package/index.d.ts +0 -12
  19. package/index.js +0 -13
  20. package/src/styles/exm-navigation-drawer-css.js +0 -24
  21. package/src/styles/exm-navigation-drawer-nav-item-css.js +0 -55
  22. package/src/styles/exm-navigation-sub-menu-css.js +0 -53
  23. /package/{src → dist}/exm-navigation-drawer-menu-base.d.ts +0 -0
  24. /package/{src → dist}/exm-navigation-drawer-menu-base.js +0 -0
  25. /package/{src → dist}/exm-navigation-drawer-menu.d.ts +0 -0
  26. /package/{src → dist}/exm-navigation-drawer-menu.js +0 -0
  27. /package/{src → dist}/exm-navigation-drawer-nav-item-base.d.ts +0 -0
  28. /package/{src → dist}/exm-navigation-drawer-nav-item.d.ts +0 -0
  29. /package/{src → dist}/exm-navigation-drawer-nav-item.js +0 -0
  30. /package/{src → dist}/exm-navigation-drawer.d.ts +0 -0
  31. /package/{src → dist}/exm-navigation-drawer.js +0 -0
  32. /package/{src → dist}/exm-navigation-icon-base.d.ts +0 -0
  33. /package/{src → dist}/exm-navigation-icon-base.js +0 -0
  34. /package/{src → dist}/exm-navigation-icon-button-base.d.ts +0 -0
  35. /package/{src → dist}/exm-navigation-icon-button.d.ts +0 -0
  36. /package/{src → dist}/exm-navigation-icon-button.js +0 -0
  37. /package/{src → dist}/exm-navigation-icon.d.ts +0 -0
  38. /package/{src → dist}/exm-navigation-icon.js +0 -0
  39. /package/{src → dist}/exm-navigation-rail-base.d.ts +0 -0
  40. /package/{src → dist}/exm-navigation-rail-base.js +0 -0
  41. /package/{src → dist}/exm-navigation-rail-nav-item-base.d.ts +0 -0
  42. /package/{src → dist}/exm-navigation-rail-nav-item-base.js +0 -0
  43. /package/{src → dist}/exm-navigation-rail-nav-item.d.ts +0 -0
  44. /package/{src → dist}/exm-navigation-rail-nav-item.js +0 -0
  45. /package/{src → dist}/exm-navigation-rail.d.ts +0 -0
  46. /package/{src → dist}/exm-navigation-rail.js +0 -0
  47. /package/{src → dist}/exm-navigation-sub-menu.d.ts +0 -0
  48. /package/{src → dist}/exm-navigation-sub-menu.js +0 -0
  49. /package/{src → dist}/exm-navigation-topbar-base.d.ts +0 -0
  50. /package/{src → dist}/exm-navigation-topbar-base.js +0 -0
  51. /package/{src → dist}/exm-navigation-topbar.d.ts +0 -0
  52. /package/{src → dist}/exm-navigation-topbar.js +0 -0
  53. /package/{src → dist}/exm-navigation.d.ts +0 -0
  54. /package/{src → dist}/exm-navigation.js +0 -0
  55. /package/{src → dist}/mixins/media-queries.d.ts +0 -0
  56. /package/{src → dist}/mixins/media-queries.js +0 -0
  57. /package/{src → dist}/styles/exm-navigation-css.d.ts +0 -0
  58. /package/{src → dist}/styles/exm-navigation-drawer-css.d.ts +0 -0
  59. /package/{src → dist}/styles/exm-navigation-drawer-nav-item-css.d.ts +0 -0
  60. /package/{src → dist}/styles/exm-navigation-icon-button-css.d.ts +0 -0
  61. /package/{src → dist}/styles/exm-navigation-icon-css.d.ts +0 -0
  62. /package/{src → dist}/styles/exm-navigation-icon-css.js +0 -0
  63. /package/{src → dist}/styles/exm-navigation-rail-css.d.ts +0 -0
  64. /package/{src → dist}/styles/exm-navigation-rail-nav-item-css.d.ts +0 -0
  65. /package/{src → dist}/styles/exm-navigation-rail-nav-item-css.js +0 -0
  66. /package/{src → dist}/styles/exm-navigation-sub-menu-css.d.ts +0 -0
  67. /package/{src → dist}/styles/exm-navigation-topbar-css.d.ts +0 -0
  68. /package/{src → dist}/styles/exm-navigation-topbar-css.js +0 -0
  69. /package/{src → dist}/types.d.ts +0 -0
  70. /package/{src → dist}/types.js +0 -0
@@ -2,6 +2,8 @@ import { PropertyValues } from 'lit';
2
2
  import { ExmgElement } from '@exmg/lit-base/index.js';
3
3
  import { MenuItem } from './types.js';
4
4
  import { ExmNavigationDrawer } from './exm-navigation-drawer.js';
5
+ import '@material/web/icon/icon.js';
6
+ import '@material/web/iconbutton/icon-button.js';
5
7
  import './exm-navigation-icon-button.js';
6
8
  import './exm-navigation-topbar.js';
7
9
  import './exm-navigation-rail.js';
@@ -6,6 +6,8 @@ import { styleMap } from 'lit/directives/style-map.js';
6
6
  import { MediaQueries } from './mixins/media-queries.js';
7
7
  import { classMap } from 'lit/directives/class-map.js';
8
8
  import { style } from './styles/exm-navigation-css.js';
9
+ import '@material/web/icon/icon.js';
10
+ import '@material/web/iconbutton/icon-button.js';
9
11
  import './exm-navigation-icon-button.js';
10
12
  import './exm-navigation-topbar.js';
11
13
  import './exm-navigation-rail.js';
@@ -107,9 +109,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
107
109
  * @param param0
108
110
  */
109
111
  handleDrawerOpen({ mobileForce, tabletForce } = {}) {
110
- if (this.media === 'mobile') {
112
+ if (this.media === 'mobile' || this.touch) {
111
113
  // Only triggerable by button
112
- if (mobileForce) {
114
+ if (mobileForce || !this.navigationHasSubmenu[this.activeItem[0]]) {
113
115
  this.drawerOpen = false;
114
116
  }
115
117
  }
@@ -137,9 +139,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
137
139
  */
138
140
  handleRailItemClick({ detail }) {
139
141
  var _a;
140
- if (this.activeItem[0] !== detail || this.media === 'mobile') {
142
+ if (this.activeItem[0] !== detail || this.media !== 'desktop') {
141
143
  const items = ((_a = this.items.find((item) => item.id === detail)) === null || _a === void 0 ? void 0 : _a.items) || [];
142
- if (items.length) {
144
+ if (items.length && !this.touch) {
143
145
  this.selectedItem = [detail, items[0].id];
144
146
  }
145
147
  else {
@@ -153,6 +155,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
153
155
  * Handle the mouse enter of the rail item.
154
156
  */
155
157
  handleRailItemMouseEnter({ detail }) {
158
+ if (this.touch) {
159
+ return;
160
+ }
156
161
  this.selectedItem = [detail];
157
162
  this.handleDrawerOpen();
158
163
  }
@@ -185,7 +190,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
185
190
  this.loadPage(this.selectedItem);
186
191
  mobileForce = true;
187
192
  }
188
- this.handleDrawerOpen({ mobileForce, tabletForce: this.touch });
193
+ this.handleDrawerOpen({ mobileForce, tabletForce: this.touch && !!endPoint });
189
194
  }
190
195
  /**
191
196
  * Handle the topbar menu click.
@@ -221,9 +226,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
221
226
  return !this.railOpen
222
227
  ? html `
223
228
  <section class="drawer-menu-button">
224
- <md-icon-button @click=${this.handleTopbarMenuClick}
225
- ><md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon></md-icon-button
226
- >
229
+ <md-icon-button @click=${this.handleTopbarMenuClick}>
230
+ <md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon>
231
+ </md-icon-button>
227
232
  </section>
228
233
  `
229
234
  : nothing;
@@ -1,14 +1,11 @@
1
- import { Drawer } from '@material/mwc-drawer';
2
1
  import { ExmgElement } from '@exmg/lit-base';
3
- import '@material/mwc-drawer';
4
2
  export declare class ExmNavigationDrawerBase extends ExmgElement {
5
3
  open: boolean;
6
4
  persistent: boolean;
7
- drawer?: Drawer;
5
+ drawer?: HTMLDivElement;
8
6
  static styles: import("lit").CSSResult[];
9
7
  private handleMouseEnter;
10
8
  private handleMouseLeave;
11
- private handleDrawerClose;
12
9
  protected firstUpdated(): Promise<void>;
13
10
  render(): import("lit-html").TemplateResult<1>;
14
11
  }
@@ -3,7 +3,7 @@ import { html } from 'lit';
3
3
  import { property, query } from 'lit/decorators.js';
4
4
  import { ExmgElement } from '@exmg/lit-base';
5
5
  import { style } from './styles/exm-navigation-drawer-css.js';
6
- import '@material/mwc-drawer';
6
+ import { classMap } from 'lit/directives/class-map.js';
7
7
  export class ExmNavigationDrawerBase extends ExmgElement {
8
8
  constructor() {
9
9
  super(...arguments);
@@ -16,9 +16,6 @@ export class ExmNavigationDrawerBase extends ExmgElement {
16
16
  handleMouseLeave() {
17
17
  this.fire('drawer-mouseleave');
18
18
  }
19
- handleDrawerClose() {
20
- this.fire('drawer-mouseleave');
21
- }
22
19
  async firstUpdated() {
23
20
  var _a;
24
21
  await this.updateComplete;
@@ -30,12 +27,16 @@ export class ExmNavigationDrawerBase extends ExmgElement {
30
27
  asideElement.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
31
28
  }
32
29
  }
33
- this.addEventListener('drawer-close', this.handleDrawerClose.bind(this));
34
30
  }
35
31
  render() {
36
- return html `<mwc-drawer type="dismissible" ?open=${this.open}>
32
+ const classNames = { open: this.open };
33
+ return html `<aside
34
+ class="${classMap(classNames)}"
35
+ @mouseenter=${this.handleMouseEnter}
36
+ @mouseleave=${this.handleMouseLeave}
37
+ >
37
38
  <slot></slot>
38
- </mwc-drawer>`;
39
+ </aside> `;
39
40
  }
40
41
  }
41
42
  ExmNavigationDrawerBase.styles = [style];
@@ -46,6 +47,6 @@ __decorate([
46
47
  property({ type: Boolean })
47
48
  ], ExmNavigationDrawerBase.prototype, "persistent", void 0);
48
49
  __decorate([
49
- query('mwc-drawer')
50
+ query('aside')
50
51
  ], ExmNavigationDrawerBase.prototype, "drawer", void 0);
51
52
  //# sourceMappingURL=exm-navigation-drawer-base.js.map
@@ -6,6 +6,7 @@ import '@material/web/focus/md-focus-ring.js';
6
6
  import './exm-navigation-icon.js';
7
7
  import '@material/web/list/list.js';
8
8
  import '@material/web/list/list-item.js';
9
+ import { classMap } from 'lit/directives/class-map.js';
9
10
  export class ExmNavigationDrawerNavItemBase extends LitElement {
10
11
  constructor() {
11
12
  super(...arguments);
@@ -15,15 +16,18 @@ export class ExmNavigationDrawerNavItemBase extends LitElement {
15
16
  this.submenuIcon = 'arrow_forward';
16
17
  }
17
18
  render() {
18
- return html `<md-list-item type="button" ?selected=${this.selected}>
19
- ${this.icon
20
- ? html `<exm-navigation-icon slot="start" class="item-icon" icon=${this.icon}></exm-navigation-icon>`
19
+ const classList = { selected: this.selected, 'has-sub-menu': this.hasSubmenu, 'has-icon': !!this.icon };
20
+ return html `
21
+ <button class="${classMap(classList)}">
22
+ ${this.icon ? html `<exm-navigation-icon class="item-icon" icon=${this.icon}></exm-navigation-icon>` : nothing}
23
+ <span class="label"><slot></slot></span>
24
+ ${this.hasSubmenu
25
+ ? html `<exm-navigation-icon class="has-submenu" icon=${this.submenuIcon}></exm-navigation-icon>`
21
26
  : nothing}
22
- <div class="label"><slot></slot></div>
23
- ${this.hasSubmenu
24
- ? html `<exm-navigation-icon slot="end" class="has-submenu" icon=${this.submenuIcon}></exm-navigation-icon>`
25
- : nothing}
26
- </md-list-item>`;
27
+ <md-ripple part="ripple"></md-ripple>
28
+ <md-focus-ring part="focus-ring" inward></md-focus-ring>
29
+ </button>
30
+ `;
27
31
  }
28
32
  }
29
33
  ExmNavigationDrawerNavItemBase.styles = [style];
@@ -20,6 +20,8 @@ export class ExmNavigationIconButtonBase extends ExmgElement {
20
20
  <button class="icon-button ${classMap(buttonClass)}" @click=${this.handleMenuButtonClick}>
21
21
  <exm-navigation-icon icon=${this.icon}></exm-navigation-icon>
22
22
  ${this.label ? html ` <span class="label">${this.label}</span>` : nothing}
23
+ <md-ripple part="ripple"></md-ripple>
24
+ <md-focus-ring part="focus-ring" inward></md-focus-ring>
23
25
  </button>
24
26
  `;
25
27
  }
@@ -17,6 +17,11 @@ export declare class ExmNavigationSubMenuBase extends ExmgElement {
17
17
  connectedCallback(): void;
18
18
  disconnectedCallback(): void;
19
19
  private handleSubMenuItemClick;
20
+ /**
21
+ * If a collapsable menuitem is not selected we can just pass the path.
22
+ * If it is selected, we remove the item from the path to collapse the menu again
23
+ */
24
+ private handleCollapsableSubMenuItemClick;
20
25
  private getItemStyle;
21
26
  private renderSubMenu;
22
27
  render(): import("lit-html").TemplateResult<1>;
@@ -26,10 +26,8 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
26
26
  }
27
27
  connectedCallback() {
28
28
  super.connectedCallback();
29
- console.log('Conected submenu');
30
29
  }
31
30
  disconnectedCallback() {
32
- console.log('UNConected submenu');
33
31
  if (this.navigationElement) {
34
32
  this.navigationElement.classList.remove('show');
35
33
  }
@@ -38,12 +36,25 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
38
36
  handleSubMenuItemClick(path) {
39
37
  this.fire('sub-menu-item-click', path);
40
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
+ }
41
51
  getItemStyle() {
42
52
  return {
43
53
  'grid-area': `${ExmNavigationSubMenuBase.itemIndex}/1/${ExmNavigationSubMenuBase.itemIndex + 1}/2`,
44
54
  };
45
55
  }
46
56
  renderSubMenu(item, path) {
57
+ const selected = this.path.includes(item.id);
47
58
  return html `
48
59
  <exm-navigation-drawer-nav-item
49
60
  ${animate({
@@ -56,9 +67,9 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
56
67
  })}
57
68
  style=${styleMap(this.getItemStyle())}
58
69
  type="button"
59
- ?selected=${this.path.includes(item.id)}
70
+ ?selected=${selected}
60
71
  class="has-submenu ${this.path.includes(item.id) ? 'selected' : ''}"
61
- @click=${this.handleSubMenuItemClick.bind(this, [...path])}
72
+ @click=${this.handleCollapsableSubMenuItemClick.bind(this, [...path], item.id, selected)}
62
73
  ?has-submenu=${true}
63
74
  submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
64
75
  >${item.label}
@@ -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';
package/dist/index.js ADDED
@@ -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
@@ -56,15 +56,17 @@ export const style = css `
56
56
  }
57
57
 
58
58
  .drawer-menu-button {
59
- padding: 8px 16px;
59
+ padding: 0 8px;
60
60
  height: var(--_exm-navigation-top-bar-height, 64px);
61
61
  box-sizing: border-box;
62
- display: flex;
62
+ display: grid;
63
+ grid-template-columns: 48px 1fr;
63
64
  align-items: center;
65
+ justify-items: center;
64
66
  }
65
67
 
66
68
  .drawer-back-button {
67
- padding: 8px 12px 0;
69
+ padding: 0 8px;
68
70
  }
69
71
  `;
70
72
  //# sourceMappingURL=exm-navigation-css.js.map
@@ -0,0 +1,35 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ :root {
4
+ --md-sys-color-background: var(--md-sys-color-surface-container-high);
5
+ }
6
+
7
+ :host {
8
+ --exm-drawer-max-width: 319px;
9
+ display: grid;
10
+ grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
11
+ height: 100vh;
12
+ width: 100%;
13
+ box-sizing: border-box;
14
+ transition: grid-template-columns 0.3s ease;
15
+ position: relative;
16
+ }
17
+
18
+ aside {
19
+ position: absolute;
20
+ left: -300px;
21
+ width: var(--exm-drawer-max-width, 300px);
22
+ height: 100%;
23
+ transition: left 0.3s ease-out;
24
+ z-index: 4;
25
+ background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
26
+ color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface-container, #f3edf7));
27
+ border-radius: 0 var(--mdc-shape-large, 0) var(--mdc-shape-large, 0) 0;
28
+ border-left: 1px solid var(--md-sys-color-outline);
29
+
30
+ &.open {
31
+ left: 0;
32
+ }
33
+ }
34
+ `;
35
+ //# sourceMappingURL=exm-navigation-drawer-css.js.map
@@ -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
@@ -5,15 +5,19 @@ export const style = css `
5
5
  grid-template-columns: 48px;
6
6
  border: none;
7
7
  background-color: rgba(0, 0, 0, 0);
8
- color: #fff;
9
8
  height: 48px;
10
9
  align-items: center;
11
- justify-content: center;
10
+ justify-content: start;
12
11
  padding: 0;
12
+ color: var(--md-sys-color-on-surface, black);
13
+ position: relative;
14
+ border-radius: 2rem;
15
+ outline: none;
13
16
  }
14
17
 
15
18
  .icon-button.has-label {
16
19
  grid-template-columns: 48px auto;
20
+ width: 100%;
17
21
  }
18
22
 
19
23
  .icon-button .label {
@@ -16,6 +16,7 @@ export const style = css `
16
16
  z-index: 8;
17
17
  box-sizing: border-box;
18
18
  width: var(--_exm-navigation-rail-width);
19
+ scrollbar-width: none;
19
20
  }
20
21
 
21
22
  @media screen and (min-width: 961px) {
@@ -0,0 +1,21 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ .nav {
4
+ padding: 8px;
5
+ }
6
+
7
+ md-list {
8
+ padding-top: 0;
9
+ display: grid;
10
+ grid-template-rows: repeat(auto-fit, auto);
11
+ }
12
+
13
+ .has-back-button {
14
+ padding-left: 48px;
15
+ }
16
+
17
+ .sub-menu {
18
+ margin-left: 1rem;
19
+ }
20
+ `;
21
+ //# sourceMappingURL=exm-navigation-sub-menu-css.js.map
package/package.json CHANGED
@@ -1,26 +1,25 @@
1
1
  {
2
2
  "name": "@exmg/exm-navigation",
3
- "version": "1.1.4",
3
+ "version": "1.1.6-alpha.12+33e1367",
4
4
  "type": "module",
5
- "main": "index.js",
6
- "module": "index.js",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.js",
7
7
  "exports": {
8
- ".": "./index.js",
9
- "./exm-navigation.js": "./src/exm-navigation.js",
10
- "./exm-navigation-drawer.js": "./src/exm-navigation-drawer.js",
11
- "./exm-navigation-drawer-menu.js": "./src/exm-navigation-drawer-menu.js",
12
- "./exm-navigation-drawer-nav-item.js": "./src/exm-navigation-drawer-nav-item.js",
13
- "./exm-navigation-icon.js": "./src/exm-navigation-icon.js",
14
- "./exm-navigation-icon-button.js": "./src/exm-navigation-icon-button.js",
15
- "./exm-navigation-rail.js": "./src/exm-navigation-rail.js",
16
- "./exm-navigation-rail-nav-item.js": "./src/exm-navigation-rail-nav-item.js",
17
- "./exm-navigation-topbar.js": "./src/exm-navigation-topbar.js",
18
- "./exm-navigation-base.js": "./src/ExmNavigationBase.js"
8
+ ".": "./dist/index.js",
9
+ "./exm-navigation.js": "./dist/exm-navigation.js",
10
+ "./exm-navigation-drawer.js": "./dist/exm-navigation-drawer.js",
11
+ "./exm-navigation-drawer-menu.js": "./dist/exm-navigation-drawer-menu.js",
12
+ "./exm-navigation-drawer-nav-item.js": "./dist/exm-navigation-drawer-nav-item.js",
13
+ "./exm-navigation-icon.js": "./dist/exm-navigation-icon.js",
14
+ "./exm-navigation-icon-button.js": "./dist/exm-navigation-icon-button.js",
15
+ "./exm-navigation-rail.js": "./dist/exm-navigation-rail.js",
16
+ "./exm-navigation-rail-nav-item.js": "./dist/exm-navigation-rail-nav-item.js",
17
+ "./exm-navigation-topbar.js": "./dist/exm-navigation-topbar.js",
18
+ "./exm-navigation-base.js": "./dist/ExmNavigationBase.js"
19
19
  },
20
20
  "dependencies": {
21
21
  "@exmg/lit-base": "^3.0.0",
22
22
  "@lit-labs/motion": "^1.0.7",
23
- "@material/mwc-drawer": "^0.27.0",
24
23
  "@material/mwc-top-app-bar-fixed": "^0.27.0",
25
24
  "@material/web": "^2.2.0",
26
25
  "lit": "^3.0.0",
@@ -39,18 +38,16 @@
39
38
  "**/*.js",
40
39
  "**/*.d.ts"
41
40
  ],
42
- "homepage": "https://github.com/exmg/exmachina-web-components",
41
+ "homepage": "https://bitbucket.org/exmachina/exm-web-components",
43
42
  "repository": {
44
43
  "type": "git",
45
- "url": "git@github.com:exmg/exm-web-components.git",
44
+ "url": "git@bitbucket.org:exmachina/exm-web-components.git",
46
45
  "directory": "packages/exm-navigation"
47
46
  },
48
47
  "license": "MIT",
49
- "scripts": {
50
- "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
51
- },
48
+ "scripts": {},
52
49
  "publishConfig": {
53
50
  "access": "public"
54
51
  },
55
- "gitHead": "b7a2332237126f8df4b270b2685a45265c684cc0"
52
+ "gitHead": "33e1367329dfae6f98f21c981edb7ada370fc0d5"
56
53
  }
package/index.d.ts DELETED
@@ -1,12 +0,0 @@
1
- export { ExmNavigation } from './src/exm-navigation.js';
2
- export { ExmNavigationBase } from './src/exm-navigation-base.js';
3
- export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
4
- export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
5
- export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
6
- export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
7
- export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
8
- export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
9
- export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
10
- export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
11
- export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
12
- export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';
package/index.js DELETED
@@ -1,13 +0,0 @@
1
- export { ExmNavigation } from './src/exm-navigation.js';
2
- export { ExmNavigationBase } from './src/exm-navigation-base.js';
3
- export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
4
- export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
5
- export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
6
- export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
7
- export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
8
- export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
9
- export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
10
- export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
11
- export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
12
- export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';
13
- //# sourceMappingURL=index.js.map
@@ -1,24 +0,0 @@
1
- import { css } from 'lit';
2
- export const style = css `
3
- :root {
4
- --md-sys-color-background: var(--md-sys-color-surface-container-high);
5
- }
6
-
7
- :host {
8
- --mdc-drawer-width: 319px;
9
- display: grid;
10
- grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
11
- height: 100vh;
12
- width: 100%;
13
- box-sizing: border-box;
14
- transition: grid-template-columns 0.3s ease;
15
- position: relative;
16
- }
17
-
18
- @media screen and (min-width: 961px) {
19
- slot[name='appContent'] {
20
- background-color: rgba(0, 0, 0, 0);
21
- }
22
- }
23
- `;
24
- //# sourceMappingURL=exm-navigation-drawer-css.js.map
@@ -1,55 +0,0 @@
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
- }
18
-
19
- md-list-item {
20
- margin-right: 8px;
21
- margin-left: 8px;
22
- border-radius: 2rem;
23
- --md-list-item-container-shape: 2rem;
24
- --md-list-item-one-line-container-height: 48px;
25
- }
26
-
27
- md-list-item[selected] {
28
- --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
29
- background-color: var(--_exm-navigation-item-background-color-selected);
30
- --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected)
31
- --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
32
- --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected)
33
- --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
34
- }
35
-
36
- :host(.has-submenu) {
37
- md-list-item[selected] {
38
- background-color: var(--_exm-navigation-item-background-color-sub-selected);
39
- --md-list-item-label-text-color: var(--_exm-navigation-item-color-sub-selected);
40
- }
41
- }
42
- md-list-item.collapsed-item[selected] {
43
- --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
44
- background-color: var(--_exm-navigation-item-background-color-selected);
45
- }
46
-
47
- md-list-item[selected] md-icon {
48
- color: var(--md-sys-color-primary);
49
- }
50
-
51
- .sub-menu {
52
- margin-left: 1rem;
53
- }
54
- `;
55
- //# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map
@@ -1,53 +0,0 @@
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
- }
10
-
11
- .nav {
12
- padding-top: 4px;
13
- }
14
-
15
- md-list {
16
- padding-top: 0;
17
- display: grid;
18
- grid-template-rows: repeat(auto-fit, auto);
19
- }
20
-
21
- md-list-item {
22
- margin-right: 8px;
23
- margin-left: 8px;
24
- border-radius: 2rem;
25
- --md-list-item-container-shape: 2rem;
26
- --md-list-item-one-line-container-height: 48px;
27
- }
28
-
29
- md-list-item[selected] {
30
- --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
31
- background-color: var(--_exm-navigation-item-background-color-selected);
32
- --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected);
33
- --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
34
- }
35
-
36
- md-list-item.collapsed-item[selected] {
37
- --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
38
- background-color: var(--_exm-navigation-item-background-color-selected);
39
- }
40
-
41
- md-list-item[selected] md-icon {
42
- color: var(--md-sys-color-primary);
43
- }
44
-
45
- .has-back-button {
46
- padding-left: 44px;
47
- }
48
-
49
- .sub-menu {
50
- margin-left: 1rem;
51
- }
52
- `;
53
- //# sourceMappingURL=exm-navigation-sub-menu-css.js.map
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes