@neovici/cosmoz-bottom-bar 5.0.0 → 5.2.0

package/cosmoz-bottom-bar.html.js

@@ -28,6 +28,9 @@ export default html`
 				padding: 0;
 			};
 		}
+		:host([force-open]) {
+			transition: none;
+		}
 		[hidden], ::slotted([hidden]) {
 			display: none !important;
 		}

package/cosmoz-bottom-bar.js

@@ -11,7 +11,8 @@ import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 
 const
 	BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
-	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu';
+	BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu',
+	rendered = Symbol('rendered');
 
 /**
  * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
@@ -130,6 +131,16 @@ class CosmozBottomBar extends PolymerElement {
 				type: Number
 			},
 
+			renderOpen: {
+				type: Boolean,
+				value: false
+			},
+
+			forceOpen: {
+				type: Boolean,
+				value: false
+			},
+
 			/**
 			 * Whether the bar is visible (has actions and is `active`)
 			 */
@@ -137,7 +148,7 @@ class CosmozBottomBar extends PolymerElement {
 				type: Boolean,
 				notify: true,
 				readOnly: true,
-				computed: '_computeVisible(hasActions, active, hasExtraItems)'
+				computed: '_computeVisible(hasActions, active, hasExtraItems, forceOpen)'
 			},
 
 			/**
@@ -166,7 +177,7 @@ class CosmozBottomBar extends PolymerElement {
 
 	static get observers() {
 		return [
-			'_showHideBottomBar(visible)'
+			'_showHideBottomBar(visible, renderOpen)'
 		];
 	}
 
@@ -198,6 +209,7 @@ class CosmozBottomBar extends PolymerElement {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this[rendered] = false;
 
 		[...this._nodeObservers, this._hiddenMutationObserver].forEach(e => e.disconnect(e));
 		this._layoutDebouncer?.cancel(); /* eslint-disable-line no-unused-expressions */
@@ -230,8 +242,8 @@ class CosmozBottomBar extends PolymerElement {
 		return barHeight;
 	}
 
-	_computeVisible(hasActions, active, hasExtraItems) {
-		return (hasActions || hasExtraItems) && active;
+	_computeVisible(hasActions, active, hasExtraItems, forceOpen) {
+		return forceOpen || ((hasActions || hasExtraItems) && active);
 	}
 
 	_debounceLayoutActions() {
@@ -268,7 +280,7 @@ class CosmozBottomBar extends PolymerElement {
 		return FlattenedNodesObserver.getFlattenedNodes(this)
 			.filter(this._isActionNode)
 			.filter(element => !element.hidden)
-			.sort((a, b) => a.dataset.index - b.dataset.index);
+			.sort((a, b) => (a.dataset.index ?? 0) - (b.dataset.index ?? 0 ));
 	}
 	/**
 	 * Layout the actions available as buttons or menu items
@@ -325,15 +337,21 @@ class CosmozBottomBar extends PolymerElement {
 		this._computedBarHeightKicker += 1;
 	}
 
-	_showHideBottomBar(visible) {
+	_showHideBottomBar(visible, renderOpen) {
 		this.style.transitionDuration = 0;
 		this.style.display = '';
 		this.style.maxHeight = '';
 
 		const height = this.computedBarHeight,
-			from = visible ? '0px' : height + 'px',
 			to = !visible ? '0px' : height + 'px';
 
+		let from = visible ? '0px' : height + 'px';
+		
+		if(visible && renderOpen && !this[rendered]) {
+			from = to;
+			this[rendered] = true;
+		}
+
 		this.style.maxHeight = from;
 
 		const onEnd = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "5.0.0",
+	"version": "5.2.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",