@neovici/cosmoz-bottom-bar 7.3.0 → 7.5.0

package/cosmoz-bottom-bar.html.js

@@ -92,7 +92,7 @@ export default html`
 		}
 	</style>
 	<div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
-		<div id="info"><slot name="info"></slot></div>
+		<div id="info" part="info"><slot name="info"></slot></div>
 		<slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
 		<cosmoz-dropdown-menu
 			id="dropdown"

package/cosmoz-bottom-bar.js

@@ -7,13 +7,40 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { timeOut } from '@polymer/polymer/lib/utils/async';
 import { html } from 'lit-html';
+import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 import template from './cosmoz-bottom-bar.html.js';
+import { hauntedPolymer } from '@neovici/cosmoz-utils';
 
 const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
 	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu',
 	rendered = Symbol('rendered');
 
+export const openMenu = Symbol('openMenu');
+
+const openActionsMenu = (host) => {
+		const dropdown = host.$.dropdown;
+
+		if (dropdown.hasAttribute('hidden')) return;
+
+		//TODO: Clean up when open function is implemented for cosmoz-dropdown-menu
+		dropdown.shadowRoot
+			.querySelector('cosmoz-dropdown')
+			.shadowRoot.getElementById('dropdownButton')
+			.click();
+	},
+	useBottomBar = (host) => {
+		useActivity(
+			{
+				activity: openMenu,
+				callback: () => openActionsMenu(host),
+				check: () => host.active && !host.hasAttribute('hide-actions'),
+				element: () => host.$.dropdown,
+			},
+			[host.active],
+		);
+	};
+
 /**
  * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
  * can be used for actions.
@@ -34,7 +61,7 @@ const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
  * @demo demo/bottom-bar.html Basic Demo
  * @demo demo/bottom-bar-match-parent.html match parent Demo
  */
-class CosmozBottomBar extends PolymerElement {
+class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
 	static get template() {
 		// eslint-disable-line max-lines-per-function
 		return template;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "7.3.0",
+	"version": "7.5.0",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
 	"keywords": [
 		"polymer",
@@ -33,7 +33,7 @@
 		"start": "npm run storybook:start",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
-		"prepare": "husky install",
+		"prepare": "husky",
 		"storybook:start": "storybook dev -p 8000",
 		"storybook:build": "storybook build",
 		"storybook:deploy": "storybook-to-ghpages",
@@ -61,7 +61,7 @@
 	"dependencies": {
 		"@neovici/cosmoz-collapse": "^1.5.0",
 		"@neovici/cosmoz-dropdown": "^4.0.0",
-		"@neovici/cosmoz-utils": "^6.8.1",
+		"@neovici/cosmoz-utils": "^6.13.1",
 		"@pionjs/pion": "^2.5.2",
 		"@polymer/polymer": "^3.3.0",
 		"lit-html": "^2.0.0 || ^3.0.0"