@neovici/cosmoz-bottom-bar 4.5.2 → 5.1.1

package/README.md

@@ -17,7 +17,7 @@ Example:
 <custom-element-demo>
 	<template>
 		<script src="../webcomponentsjs/webcomponents-lite.js"></script>
-		<link rel="import" href="cosmoz-bottom-bar-view.html">
+		<link rel="import" href="cosmoz-bottom-bar.html">
 		<link rel="import" href="../paper-button/paper-button.html">
 		<style>
 			body {
@@ -38,27 +38,27 @@ Example:
 ```
 -->
 ```html
-<cosmoz-bottom-bar-view>
-	<div slot="scroller-content" style="padding: 0 18px;">
-		<h3>Sample page</h3>
-		<p>Nam non enim vitae mauris pharetra semper nec sed lectus.</p>
-		<p>Maecenas gravida sollicitudin mauris, id gravida odio commodo iaculis.</p>
-		<p>Nulla pulvinar justo vel sodales sollicitudin.</p>
-		<p>Proin turpis tortor, sagittis sit amet consequat ut, tempor non velit.</p>
-		<p>Proin finibus elit libero, vitae scelerisque lacus maximus ac.</p>
-		<p>Vivamus ut finibus ligula. Mauris sollicitudin vitae orci eu scelerisque.</p>
-		<p>Duis nec placerat mauris, at tincidunt libero.</p>
-		<p>Nullam non magna eget mauris porta tempor.</p>
-		<p>Proin non sagittis enim.</p>
-		<p>Sed pharetra ante ipsum, in porta dolor sagittis non.</p>
-		<p>Cras odio quam, pretium consectetur finibus eu, elementum at risus.</p>
-		<p>Proin feugiat vitae sem eu imperdiet.</p>
-	</div>
+<div style="padding: 0 18px;">
+	<h3>Sample page</h3>
+	<p>Nam non enim vitae mauris pharetra semper nec sed lectus.</p>
+	<p>Maecenas gravida sollicitudin mauris, id gravida odio commodo iaculis.</p>
+	<p>Nulla pulvinar justo vel sodales sollicitudin.</p>
+	<p>Proin turpis tortor, sagittis sit amet consequat ut, tempor non velit.</p>
+	<p>Proin finibus elit libero, vitae scelerisque lacus maximus ac.</p>
+	<p>Vivamus ut finibus ligula. Mauris sollicitudin vitae orci eu scelerisque.</p>
+	<p>Duis nec placerat mauris, at tincidunt libero.</p>
+	<p>Nullam non magna eget mauris porta tempor.</p>
+	<p>Proin non sagittis enim.</p>
+	<p>Sed pharetra ante ipsum, in porta dolor sagittis non.</p>
+	<p>Cras odio quam, pretium consectetur finibus eu, elementum at risus.</p>
+	<p>Proin feugiat vitae sem eu imperdiet.</p>
+</div>
+<cosmoz-bottom-bar active>
 	<div slot="info">5 dummy actions</div>
 	<paper-button>Action 1</paper-button>
 	<paper-button>Action 2</paper-button>
 	<paper-button>Action 3</paper-button>
 	<paper-button>Action 4</paper-button>
 	<paper-button>Action 5</paper-button>
-</cosmoz-bottom-bar-view>
-```
+</cosmoz-bottom-bar>
+```

package/cosmoz-bottom-bar.html.js

@@ -5,14 +5,13 @@ export default html`
 	<style>
 		:host {
 			display: block;
-			position: absolute;
 			bottom: 0;
 			left: 0;
 			width: 100%;
 			max-width: 100%; /* Firefox fix */
 			background-color: inherit;
 			transition: max-height 0.3s ease;
-			z-index: 10;
+			flex: none;
 			background-color: var(--cosmoz-bottom-bar-bg-color, rgba(230, 230, 230, 0.8));
 			box-shadow: var(--cosmoz-bottom-bar-shadow, none);
 
@@ -29,6 +28,9 @@ export default html`
 				padding: 0;
 			};
 		}
+		:host([force-open]) {
+			transition: none;
+		}
 		[hidden], ::slotted([hidden]) {
 			display: none !important;
 		}

package/cosmoz-bottom-bar.js

@@ -130,6 +130,11 @@ class CosmozBottomBar extends PolymerElement {
 				type: Number
 			},
 
+			forceOpen: {
+				type: Boolean,
+				value: false
+			},
+
 			/**
 			 * Whether the bar is visible (has actions and is `active`)
 			 */
@@ -137,7 +142,7 @@ class CosmozBottomBar extends PolymerElement {
 				type: Boolean,
 				notify: true,
 				readOnly: true,
-				computed: '_computeVisible(hasActions, active, hasExtraItems)'
+				computed: '_computeVisible(hasActions, active, hasExtraItems, forceOpen)'
 			},
 
 			/**
@@ -230,8 +235,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 +273,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

package/package.json

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

package/cosmoz-bottom-bar-view.js

@@ -1,54 +0,0 @@
-import { component } from 'haunted';
-import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { bottomBarSlots } from './cosmoz-bottom-bar';
-
-/**
- * `cosmoz-bottom-bar-view` contains a content section and a bottom bar with actions.
- *
- * __Important:__ Because `cosmoz-bottom-bar-view` is handling scrolling of its content, it must be explicitly sized.
- * By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style,
- * or else is sized by other layout means (e.g. the flex or fit classes).
- *
- * @demo demo/bottom-bar-view.html Basic Demo
-*/
-
-const CosmozBottomBarView = ({
-	active = true,
-	barHeight
-}) => html`
-	<style>
-		:host {
-			position: relative;
-			display: flex;
-			flex-direction: column;
-			flex: var(--cosmoz-bottom-bar-view-flex, auto);
-			overflow: hidden;
-		}
-
-		#content {
-			display: flex;
-			flex-direction: column;
-			flex: auto;
-			-webkit-overflow-scrolling: touch;
-			overflow-y: auto;
-		}
-
-		#bar {
-			background-color: var(--cosmoz-bottom-bar-view-bar-color, rgba(230, 230, 230, 0.8));
-			box-shadow: var(--cosmoz-bottom-bar-view-bar-shadow, none);
-			position: static;
-			flex: none;
-		}
-	</style>
-	<div id="content" part="content">
-		<slot name="content"></slot>
-		<slot name="scroller-content"></slot>
-	</div>
-	<cosmoz-bottom-bar id="bar" ?active=${ active } bar-height=${ ifDefined(barHeight) } part="bar">
-		<slot></slot>
-		${ bottomBarSlots }
-	</cosmoz-bottom-bar>
-`;
-customElements.define('cosmoz-bottom-bar-view', component(CosmozBottomBarView));
-