@neovici/cosmoz-bottom-bar 6.3.0 → 6.4.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 (3) hide show
  1. package/cosmoz-bottom-bar.html.js +56 -11
  2. package/cosmoz-bottom-bar.js +24 -13
  3. package/package.json +3 -5
package/cosmoz-bottom-bar.html.js CHANGED
@@ -12,7 +12,10 @@ export default html`
12
12
  background-color: inherit;
13
13
  transition: max-height 0.3s ease;
14
14
  flex: none;
15
- background-color: var(--cosmoz-bottom-bar-bg-color, rgba(230, 230, 230, 0.8));
15
+ background-color: var(
16
+ --cosmoz-bottom-bar-bg-color,
17
+ rgba(230, 230, 230, 0.8)
18
+ );
16
19
  box-shadow: var(--cosmoz-bottom-bar-shadow, none);
17
20
 
18
21
  --cosmoz-dropdown-anchor-spacing: 12px 6px;
@@ -26,12 +29,13 @@ export default html`
26
29
  font-weight: inherit;
27
30
  margin: 0;
28
31
  padding: 0;
29
- };
32
+ }
30
33
  }
31
34
  :host([force-open]) {
32
35
  transition: none;
33
36
  }
34
- [hidden], ::slotted([hidden]) {
37
+ [hidden],
38
+ ::slotted([hidden]) {
35
39
  display: none !important;
36
40
  }
37
41
  #bar {
@@ -51,8 +55,14 @@ export default html`
51
55
  min-height: 40px;
52
56
  text-overflow: ellipsis;
53
57
  white-space: nowrap;
54
- background: var(--cosmoz-bottom-bar-button-bg-color, var(--cosmoz-button-bg-color, #101010));
55
- color: var(--cosmoz-bottom-bar-button-color, var(--cosmoz-button-color, #fff));
58
+ background: var(
59
+ --cosmoz-bottom-bar-button-bg-color,
60
+ var(--cosmoz-button-bg-color, #101010)
61
+ );
62
+ color: var(
63
+ --cosmoz-bottom-bar-button-color,
64
+ var(--cosmoz-button-color, #fff)
65
+ );
56
66
  border-radius: 6px;
57
67
  padding: 0 18px;
58
68
  font-size: 14px;
@@ -65,20 +75,55 @@ export default html`
65
75
  pointer-events: none;
66
76
  }
67
77
  #bottomBarToolbar::slotted(:not(slot):hover) {
68
- background: var(--cosmoz-bottom-bar-button-hover-bg-color, var(--cosmoz-button-hover-bg-color, #3A3F44));
78
+ background: var(
79
+ --cosmoz-bottom-bar-button-hover-bg-color,
80
+ var(--cosmoz-button-hover-bg-color, #3a3f44)
81
+ );
69
82
  }
70
83
  #dropdown::part(content) {
71
84
  max-width: 300px;
72
85
  }
86
+
87
+ :host([hide-actions]) #bottomBarToolbar,
88
+ :host([hide-actions]) #bottomBarMenu,
89
+ :host([hide-actions]) #dropdown {
90
+ display: none;
91
+ }
73
92
  </style>
74
93
  <div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
75
94
  <div id="info"><slot name="info"></slot></div>
76
95
  <slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
77
- <cosmoz-dropdown-menu id="dropdown" hidden="[[ !hasMenuItems ]]" placement="[[ topPlacement ]]">
78
- <svg slot="button" width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
79
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z" fill="white"/>
80
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z" fill="white"/>
81
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z" fill="white"/>
96
+ <cosmoz-dropdown-menu
97
+ id="dropdown"
98
+ hidden="[[ !hasMenuItems ]]"
99
+ placement="[[ topPlacement ]]"
100
+ >
101
+ <svg
102
+ slot="button"
103
+ width="4"
104
+ height="16"
105
+ viewBox="0 0 4 16"
106
+ fill="none"
107
+ xmlns="http://www.w3.org/2000/svg"
108
+ >
109
+ <path
110
+ fill-rule="evenodd"
111
+ clip-rule="evenodd"
112
+ d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z"
113
+ fill="white"
114
+ />
115
+ <path
116
+ fill-rule="evenodd"
117
+ clip-rule="evenodd"
118
+ d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z"
119
+ fill="white"
120
+ />
121
+ <path
122
+ fill-rule="evenodd"
123
+ clip-rule="evenodd"
124
+ d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z"
125
+ fill="white"
126
+ />
82
127
  </svg>
83
128
  <slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
84
129
  </cosmoz-dropdown-menu>
package/cosmoz-bottom-bar.js CHANGED
@@ -53,6 +53,12 @@ class CosmozBottomBar extends PolymerElement {
53
53
  reflectToAttribute: true,
54
54
  },
55
55
 
56
+ hideActions: {
57
+ type: Boolean,
58
+ value: false,
59
+ reflectToAttribute: true,
60
+ },
61
+
56
62
  /**
57
63
  * Bar height (not used when `matchParent` or `matchElementHeight` is set)
58
64
  */
@@ -291,19 +297,24 @@ class CosmozBottomBar extends PolymerElement {
291
297
 
292
298
  _getElements() {
293
299
  const elements = FlattenedNodesObserver.getFlattenedNodes(this)
294
- .filter(this._isActionNode)
295
- .filter((element) => !element.hidden)
296
- .sort((a, b) => (a.dataset.index ?? 0) - (b.dataset.index ?? 0)),
297
- topPriorityAction = elements.reduce(
298
- (top, element) => {
299
- return parseInt(top.dataset.priority ?? 0, 10) >=
300
- parseInt(element.dataset.priority ?? 0, 10)
301
- ? top
302
- : element;
303
- },
304
- { dataset: { priority: '-1000' } },
305
- []
306
- );
300
+ .filter(this._isActionNode)
301
+ .filter((element) => !element.hidden)
302
+ .sort((a, b) => (a.dataset.index ?? 0) - (b.dataset.index ?? 0));
303
+
304
+ if (elements.length === 0) {
305
+ return elements;
306
+ }
307
+
308
+ const topPriorityAction = elements.reduce(
309
+ (top, element) => {
310
+ return parseInt(top.dataset.priority ?? 0, 10) >=
311
+ parseInt(element.dataset.priority ?? 0, 10)
312
+ ? top
313
+ : element;
314
+ },
315
+ { dataset: { priority: '-1000' } },
316
+ []
317
+ );
307
318
 
308
319
  return [
309
320
  topPriorityAction,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-bottom-bar",
3
- "version": "6.3.0",
3
+ "version": "6.4.0",
4
4
  "description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
5
5
  "keywords": [
6
6
  "polymer",
@@ -66,11 +66,9 @@
66
66
  "@polymer/paper-toggle-button": "^3.0.0",
67
67
  "@semantic-release/changelog": "^6.0.0",
68
68
  "@semantic-release/git": "^10.0.0",
69
- "@web/dev-server": "^0.1.0",
70
- "@web/test-runner": "^0.13.0",
71
69
  "@webcomponents/webcomponentsjs": "^2.5.0",
72
70
  "husky": "^8.0.0",
73
- "semantic-release": "^19.0.0",
74
- "sinon": "^14.0.0"
71
+ "semantic-release": "^21.0.0",
72
+ "sinon": "^15.0.0"
75
73
  }
76
74
  }