@neovici/cosmoz-bottom-bar 8.1.1 → 9.0.0

package/dist/cosmoz-bottom-bar.d.ts

@@ -0,0 +1,28 @@
+import '@neovici/cosmoz-dropdown';
+export declare const openMenu: unique symbol;
+/**
+ * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
+ * can be used for actions.
+ *
+ * The items placed inside the `cosmoz-bottom-bar` are distributed into the toolbar in a horizontal container.
+ * If the items do not fit the available width, those that do not fit are placed in a dropdown
+ * menu triggered by a button in the toolbar.
+ * The class specified by the property `toolbarClass` (default `cosmoz-bottom-bar-toolbar`)
+ * is applied to items distributed to the toolbar.
+ * The class specified in the property `menuClass` (default `cosmoz-bottom-bar-menu`)
+ * is applied to items distributed to the menu.
+ *
+ * ### Usage
+ *
+ * See demo for example usage
+ *
+ * @element cosmoz-bottom-bar
+ * @demo demo/bottom-bar-next.html Basic Demo
+ */
+type Host = HTMLElement & {
+    active?: boolean;
+    maxToolbarItems?: number;
+};
+declare const CosmozBottomBar: (host: Host) => import("lit-html").TemplateResult<1>;
+export default CosmozBottomBar;
+export declare const bottomBarSlots: import("lit-html").TemplateResult<1>, bottomBarSlotsPolymer: HTMLTemplateElement;

package/dist/cosmoz-bottom-bar.js

@@ -0,0 +1,233 @@
+/* eslint-disable max-len */
+import { html } from 'lit-html';
+import { map } from 'lit-html/directives/map.js';
+import { html as polymerHtml } from '@polymer/polymer/polymer-element.js';
+import { component, css, useEffect, useLayoutEffect, useMemo, useState, } from '@pionjs/pion';
+import { toggleSize } from '@neovici/cosmoz-collapse/toggle';
+import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
+import '@neovici/cosmoz-dropdown';
+import overflow from './overflow';
+const style = css `
+	:host {
+		display: block;
+		overflow: hidden;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		max-width: 100%; /* Firefox fix */
+		background-color: inherit;
+		transition: max-height 0.3s ease;
+		flex: none;
+		background-color: var(
+			--cosmoz-bottom-bar-bg-color,
+			rgba(230, 230, 230, 0.8)
+		);
+		box-shadow: var(--cosmoz-bottom-bar-shadow, none);
+		z-index: 1;
+
+		--cosmoz-dropdown-anchor-spacing: 12px 6px;
+		--paper-button: {
+			background-color: inherit;
+			text-transform: none;
+			border: 0;
+			border-radius: 0;
+			font-size: inherit;
+			color: inherit;
+			font-weight: inherit;
+			margin: 0;
+			padding: 0;
+		};
+	}
+
+	:host([force-open]) {
+		transition: none;
+	}
+
+	[hidden],
+	::slotted([hidden]) {
+		display: none !important;
+	}
+
+	#bar {
+		height: 64px;
+		padding: 0 3%;
+		display: flex;
+		align-items: center;
+	}
+
+	#info {
+		flex: 0 0 auto;
+		padding-right: 3%;
+		white-space: nowrap;
+	}
+
+	#buttonContainer {
+		display: flex;
+		flex: 1 1 auto;
+		overflow: hidden;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		flex-direction: row-reverse;
+		position: relative;
+		margin: 0 8px;
+		min-width: 0;
+		max-height: 40px;
+	}
+
+	#bottomBarToolbar::slotted(:not(slot):not([unstyled])) {
+		margin: 0 0.29em;
+		min-width: 40px;
+		min-height: 40px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		background: var(
+			--cosmoz-bottom-bar-button-bg-color,
+			var(--cosmoz-button-bg-color, #101010)
+		);
+		color: var(
+			--cosmoz-bottom-bar-button-color,
+			var(--cosmoz-button-color, #fff)
+		);
+		border-radius: 6px;
+		padding: 0 18px;
+		font-size: 14px;
+		font-weight: 500;
+		line-height: 40px;
+		overflow: hidden;
+		flex: 0 0 auto;
+		visibility: hidden;
+	}
+
+	#bottomBarToolbar::slotted(:not(slot)[disabled]) {
+		opacity: var(--cosmoz-button-disabled-opacity, 0.15);
+		pointer-events: none;
+	}
+
+	#bottomBarToolbar::slotted(:not(slot):hover) {
+		background: var(
+			--cosmoz-bottom-bar-button-hover-bg-color,
+			var(--cosmoz-button-hover-bg-color, #3a3f44)
+		);
+	}
+
+	#dropdown::part(content) {
+		max-width: 300px;
+	}
+
+	:host([hide-actions]) #bottomBarToolbar,
+	:host([hide-actions]) #bottomBarMenu,
+	:host([hide-actions]) #dropdown {
+		display: none;
+	}
+
+	:host(:not([has-menu-items])) cosmoz-dropdown-menu {
+		display: none;
+	}
+`;
+export const openMenu = Symbol('openMenu');
+const openActionsMenu = (host) => {
+    const dropdown = host.shadowRoot?.querySelector('#dropdown');
+    if (!dropdown || dropdown.hasAttribute('hidden'))
+        return;
+    //TODO: Clean up when open function is implemented for cosmoz-dropdown-menu
+    const cosmozDropdown = dropdown.shadowRoot?.querySelector('cosmoz-dropdown'), button = cosmozDropdown?.shadowRoot?.querySelector('#dropdownButton');
+    button?.click();
+};
+const useMenuButtons = (host) => {
+    const [buttonStates, setButtonStates] = useState({
+        visible: new Set(),
+        overflowing: new Set(),
+    });
+    const allButtons = useMemo(() => [...buttonStates.visible, ...buttonStates.overflowing], [buttonStates]);
+    const processedButtons = useMemo(() => allButtons
+        .map((btn) => ({
+        element: btn,
+        priority: Number(btn.dataset.priority ?? 0),
+        text: btn.textContent?.trim() || '',
+    }))
+        .toSorted((a, b) => b.priority - a.priority), [allButtons]);
+    const { maxToolbarItems = 1 } = host;
+    const toolbarLimit = Math.min(maxToolbarItems, buttonStates.visible.size >= 0
+        ? buttonStates.visible.size
+        : allButtons.length);
+    useEffect(() => {
+        processedButtons.forEach(({ element, priority }, i) => {
+            const isVisible = i < toolbarLimit;
+            element.style.visibility = isVisible ? 'visible' : 'hidden';
+            element.style.order = String(-priority);
+        });
+    }, [processedButtons, toolbarLimit]);
+    const menuButtons = useMemo(() => processedButtons
+        .slice(toolbarLimit)
+        .sort((a, b) => b.element.compareDocumentPosition(a.element) -
+        a.element.compareDocumentPosition(b.element)), [processedButtons, toolbarLimit]);
+    useEffect(() => {
+        host.toggleAttribute('has-menu-items', menuButtons.length > 0);
+    }, [menuButtons.length]);
+    return { setButtonStates, menuButtons };
+};
+const CosmozBottomBar = (host) => {
+    const { active = false } = host;
+    useActivity({
+        activity: openMenu,
+        callback: () => openActionsMenu(host),
+        check: () => active && !host.hasAttribute('hide-actions'),
+        element: () => host.shadowRoot?.querySelector('#dropdown'),
+    }, [active]);
+    const { setButtonStates, menuButtons } = useMenuButtons(host);
+    const toggle = useMemo(() => toggleSize('height'), []);
+    useLayoutEffect(() => {
+        toggle(host, active);
+    }, [active]);
+    return html `<div id="bar" part="bar">
+		<div id="info" part="info"><slot name="info"></slot></div>
+		<div id="buttonContainer">
+			<slot id="bottomBarToolbar" ${overflow(setButtonStates)}></slot>
+		</div>
+
+		<cosmoz-dropdown-menu id="dropdown">
+			<svg
+				slot="button"
+				width="4"
+				height="16"
+				viewBox="0 0 4 16"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<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"
+				/>
+				<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"
+				/>
+				<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"
+				/>
+			</svg>
+			${map(menuButtons, (menuButton) => html `
+					<paper-button @click=${() => menuButton.element.click()}
+						>${menuButton.text}</paper-button
+					>
+				`)}
+		</cosmoz-dropdown-menu>
+		<slot name="extra" id="extraSlot"></slot>
+	</div>`;
+};
+export default CosmozBottomBar;
+customElements.define('cosmoz-bottom-bar', component(CosmozBottomBar, {
+    observedAttributes: ['active', 'max-toolbar-items'],
+    styleSheets: [style],
+}));
+const tmplt = `
+	<slot name="extra" slot="extra"></slot>
+`;
+export const bottomBarSlots = html(Object.assign([tmplt], { raw: [tmplt] })), bottomBarSlotsPolymer = polymerHtml(Object.assign([tmplt], { raw: [tmplt] }));

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './cosmoz-bottom-bar';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './cosmoz-bottom-bar';

package/dist/overflow.d.ts

@@ -0,0 +1,19 @@
+import { AttributePart } from 'lit-html';
+import { AsyncDirective } from 'lit-html/async-directive.js';
+import { DirectiveResult } from 'lit-html/directive.js';
+type OnOverflow = (opts: {
+    visible: Set<HTMLElement>;
+    overflowing: Set<HTMLElement>;
+}) => void;
+declare class OverflowDirective extends AsyncDirective {
+    observer?: IntersectionObserver;
+    slot?: HTMLSlotElement;
+    cleanup?: () => void;
+    render(): symbol;
+    update(part: AttributePart, [onOverflow]: [OnOverflow]): symbol;
+}
+interface Overflow {
+    (onOverflow: OnOverflow): DirectiveResult<typeof OverflowDirective>;
+}
+declare const overflow: Overflow;
+export default overflow;

package/dist/overflow.js

@@ -0,0 +1,68 @@
+import { noChange } from 'lit-html';
+import { AsyncDirective } from 'lit-html/async-directive.js';
+import { directive } from 'lit-html/directive.js';
+function isEntryHidden(el) {
+    return el.boundingClientRect.height === 0;
+}
+const check = (part) => {
+    if (part.element.tagName !== 'SLOT') {
+        throw new Error('Overflow directive must be used on a slot element');
+    }
+};
+const setupObserver = (slot, onOverflow) => {
+    const visible = new Set();
+    const overflowing = new Set();
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            const el = entry.target;
+            if (entry.intersectionRatio === 1) {
+                visible.add(el);
+                overflowing.delete(el);
+            }
+            else if (isEntryHidden(entry)) {
+                visible.delete(el);
+                overflowing.delete(el);
+            }
+            else {
+                visible.delete(el);
+                overflowing.add(el);
+            }
+        });
+        onOverflow({ visible, overflowing });
+    }, { root: slot.parentElement, threshold: 1 });
+    const observe = () => {
+        const elements = Array.from(slot.assignedElements());
+        for (const c of elements) {
+            observer.observe(c);
+        }
+    };
+    observe();
+    slot.addEventListener('slotchange', observe);
+    return () => {
+        slot.removeEventListener('slotchange', observe);
+        observer.disconnect();
+    };
+};
+class OverflowDirective extends AsyncDirective {
+    observer;
+    slot;
+    cleanup;
+    render() {
+        return noChange;
+    }
+    update(part, [onOverflow]) {
+        check(part);
+        const hasChanged = this.slot !== part.element;
+        if (hasChanged) {
+            if (this.cleanup) {
+                this.cleanup();
+                this.cleanup = undefined;
+            }
+            this.slot = part.element;
+            this.cleanup = setupObserver(this.slot, onOverflow);
+        }
+        return noChange;
+    }
+}
+const overflow = directive(OverflowDirective);
+export default overflow;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "8.1.1",
+	"version": "9.0.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",
@@ -16,20 +16,17 @@
 	},
 	"license": "Apache-2.0",
 	"author": "Neovici Development",
-	"main": "cosmoz-bottom-bar.js",
+	"main": "dist/index.js",
 	"exports": {
-		".": "./cosmoz-bottom-bar.js",
-		"./next": "./src/cosmoz-bottom-bar-next.js"
-	},
-	"directories": {
-		"test": "test"
+		".": "./dist/index.js"
 	},
 	"files": [
-		"cosmoz-*.js",
-		"src/**/*.js"
+		"dist/*",
+		"types"
 	],
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "npm run storybook:start",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
@@ -72,14 +69,14 @@
 		"@polymer/paper-toggle-button": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"@storybook/addon-essentials": "^7.0.0",
+		"@storybook/addon-essentials": "^8.6.9",
 		"@storybook/addon-links": "^7.0.0",
-		"@storybook/builder-vite": "7.6.17",
+		"@storybook/builder-vite": "8.6.9",
 		"@storybook/storybook-deployer": "^2.8.5",
-		"@storybook/web-components": "7.6.17",
+		"@storybook/web-components": "8.6.9",
 		"@types/mocha": "^10.0.6",
-		"@web/storybook-builder": "^0.1.9",
-		"@web/storybook-framework-web-components": "^0.1.1",
+		"@web/storybook-builder": "^0.2.1",
+		"@web/storybook-framework-web-components": "^0.2.0",
 		"@webcomponents/webcomponentsjs": "^2.5.0",
 		"esbuild": "^0.25.0",
 		"eslint": "^8.57.1",
@@ -88,7 +85,7 @@
 		"rollup-plugin-esbuild": "^6.1.1",
 		"semantic-release": "^24.0.0",
 		"sinon": "^19.0.0",
-		"storybook": "^7.6.17",
+		"storybook": "^8.6.9",
 		"typescript": "^5.0.0"
 	}
 }

package/cosmoz-bottom-bar.html.js

@@ -1,137 +0,0 @@
-/* eslint-disable max-len */
-import '@neovici/cosmoz-dropdown';
-import { html } from '@polymer/polymer/lib/utils/html-tag';
-
-export default html`
-	<style>
-		:host {
-			display: block;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			max-width: 100%; /* Firefox fix */
-			background-color: inherit;
-			transition: max-height 0.3s ease;
-			flex: none;
-			background-color: var(
-				--cosmoz-bottom-bar-bg-color,
-				rgba(230, 230, 230, 0.8)
-			);
-			box-shadow: var(--cosmoz-bottom-bar-shadow, none);
-			z-index: 1;
-
-			--cosmoz-dropdown-anchor-spacing: 12px 6px;
-			--paper-button: {
-				background-color: inherit;
-				text-transform: none;
-				border: 0;
-				border-radius: 0;
-				font-size: inherit;
-				color: inherit;
-				font-weight: inherit;
-				margin: 0;
-				padding: 0;
-			};
-		}
-		:host([force-open]) {
-			transition: none;
-		}
-		[hidden],
-		::slotted([hidden]) {
-			display: none !important;
-		}
-		#bar {
-			padding: 0 3%;
-			display: flex;
-			align-items: center;
-		}
-		#info {
-			min-width: 5px;
-			padding-right: 3%;
-			margin-right: auto;
-			white-space: nowrap;
-		}
-		#bottomBarToolbar::slotted(:not(slot):not([unstyled])) {
-			margin: 0 0.29em;
-			min-width: 40px;
-			min-height: 40px;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			background: var(
-				--cosmoz-bottom-bar-button-bg-color,
-				var(--cosmoz-button-bg-color, #101010)
-			);
-			color: var(
-				--cosmoz-bottom-bar-button-color,
-				var(--cosmoz-button-color, #fff)
-			);
-			border-radius: 6px;
-			padding: 0 18px;
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 40px;
-		}
-
-		#bottomBarToolbar::slotted(:not(slot)[disabled]) {
-			opacity: var(--cosmoz-button-disabled-opacity, 0.15);
-			pointer-events: none;
-		}
-		#bottomBarToolbar::slotted(:not(slot):hover) {
-			background: var(
-				--cosmoz-bottom-bar-button-hover-bg-color,
-				var(--cosmoz-button-hover-bg-color, #3a3f44)
-			);
-		}
-		#dropdown::part(content) {
-			max-width: 300px;
-		}
-
-		:host([hide-actions]) #bottomBarToolbar,
-		:host([hide-actions]) #bottomBarMenu,
-		:host([hide-actions]) #dropdown {
-			display: none;
-		}
-	</style>
-	<div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
-		<div id="info" part="info"><slot name="info"></slot></div>
-		<slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
-		<cosmoz-dropdown-menu
-			id="dropdown"
-			hidden="[[ !hasMenuItems ]]"
-			placement="[[ topPlacement ]]"
-		>
-			<svg
-				slot="button"
-				width="4"
-				height="16"
-				viewBox="0 0 4 16"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<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"
-				/>
-				<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"
-				/>
-				<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"
-				/>
-			</svg>
-			<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
-		</cosmoz-dropdown-menu>
-		<slot name="extra" id="extraSlot"></slot>
-	</div>
-	<div hidden style="display:none">
-		<slot id="content"></slot>
-	</div>
-`;

package/cosmoz-bottom-bar.js

@@ -1,435 +0,0 @@
-import {
-	PolymerElement,
-	html as polymerHtml,
-} from '@polymer/polymer/polymer-element.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer';
-import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
-import { timeOut } from '@polymer/polymer/lib/utils/async';
-import { html } from 'lit-html';
-import { hauntedPolymer } from '@neovici/cosmoz-utils';
-import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
-import template from './cosmoz-bottom-bar.html.js';
-
-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.
- *
- * The items placed inside the `cosmoz-bottom-bar` are distributed into the toolbar in a horizontal container.
- * If the items do not fit the available width, those that do not fit are placed in a dropdown
- * menu triggered by a button in the toolbar.
- * The class specified by the property `toolbarClass` (default `cosmoz-bottom-bar-toolbar`)
- * is applied to items distributed to the toolbar.
- * The class specified in the property `menuClass` (default `cosmoz-bottom-bar-menu`)
- * is applied to items distributed to the menu.
- *
- * ### Usage
- *
- * See demo for example usage
- *
- * @element cosmoz-bottom-bar
- * @demo demo/bottom-bar.html Basic Demo
- * @demo demo/bottom-bar-match-parent.html match parent Demo
- */
-class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
-	static get template() {
-		return template;
-	}
-
-	static get properties() {
-		return {
-			/**
-			 * Whether the bar is active (shown)
-			 */
-			active: {
-				type: Boolean,
-				value: false,
-				notify: true,
-				reflectToAttribute: true,
-			},
-
-			hideActions: {
-				type: Boolean,
-				value: false,
-				reflectToAttribute: true,
-			},
-
-			/**
-			 * Bar height (not used when `matchParent` or `matchElementHeight` is set)
-			 */
-			barHeight: {
-				type: Number,
-				value: 64,
-			},
-
-			/**
-			 * Whether to match the height of parent
-			 */
-			matchParent: {
-				type: Boolean,
-				value: false,
-			},
-
-			/**
-			 * Whether this bottom bar has items distributed to the menu
-			 */
-			hasMenuItems: {
-				type: Boolean,
-				value: false,
-				readOnly: true,
-				notify: true,
-			},
-
-			hasExtraItems: {
-				type: Boolean,
-				value: false,
-			},
-
-			/**
-			 * Class applied the the selected item
-			 */
-			selectedClass: {
-				type: String,
-				value: 'cosmoz-bottom-bar-selected-item',
-			},
-
-			/**
-			 * Class applied to items distributed to the toolbar
-			 */
-			toolbarClass: {
-				type: String,
-				value: 'cosmoz-bottom-bar-toolbar',
-			},
-
-			/**
-			 * Class applied to items distributed to the menu
-			 */
-			menuClass: {
-				type: String,
-				value: 'cosmoz-bottom-bar-menu',
-			},
-
-			/**
-			 * Maximum number of items in toolbar, regardless of space
-			 */
-			maxToolbarItems: {
-				type: Number,
-				value: 1,
-			},
-
-			/**
-			 * The actual bar height, depending on if we `matchParent` or set `barHeight`
-			 */
-			computedBarHeight: {
-				type: Number,
-				notify: true,
-			},
-			forceOpen: {
-				type: Boolean,
-				value: false,
-			},
-
-			/**
-			 * Whether the bar is visible (has actions and is `active`)
-			 */
-			visible: {
-				type: Boolean,
-				notify: true,
-				readOnly: true,
-				computed:
-					'_computeVisible(hasActions, active, hasExtraItems, forceOpen)',
-			},
-
-			/**
-			 * Whether we have any visible actions
-			 */
-			hasActions: {
-				type: Boolean,
-				value: false,
-				readOnly: true,
-				notify: true,
-			},
-
-			/**
-			 * Reference element from which to inherit height
-			 */
-			_matchHeightElement: {
-				type: Object,
-				computed: '_getHeightMatchingElement(matchParent)',
-			},
-
-			topPlacement: {
-				value: 'top-end',
-				type: String,
-			},
-		};
-	}
-
-	static get observers() {
-		return ['_showHideBottomBar(visible)'];
-	}
-
-	constructor() {
-		super();
-		this._boundChildrenUpdated = this._childrenUpdated.bind(this);
-		this._boundLayoutActions = this._layoutActions.bind(this);
-		this._resizeObserver = new ResizeObserver((...args) => {
-			cancelAnimationFrame(this._resizeId);
-			this._resizeId = requestAnimationFrame(() => this._onResize(...args));
-		});
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-
-		const layoutOnRemove = (info) =>
-			info.removedNodes.filter(this._isActionNode) &&
-			this._debounceLayoutActions();
-		this._nodeObservers = [
-			new FlattenedNodesObserver(this.$.content, this._boundChildrenUpdated),
-			new FlattenedNodesObserver(this.$.extraSlot, (info) =>
-				this.set('hasExtraItems', info.addedNodes.length > 0),
-			),
-			new FlattenedNodesObserver(this.$.bottomBarToolbar, layoutOnRemove),
-			new FlattenedNodesObserver(this.$.bottomBarMenu, layoutOnRemove),
-		];
-		this._hiddenMutationObserver = new MutationObserver(() =>
-			this._debounceLayoutActions(),
-		);
-		this._resizeObserver.observe(this);
-		this.computedBarHeight = this._computeComputedBarHeight(
-			this._matchHeightElement,
-			this.barHeight,
-		);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this[rendered] = false;
-
-		[...this._nodeObservers, this._hiddenMutationObserver].forEach((e) =>
-			e.disconnect(e),
-		);
-		this._resizeObserver.unobserve(this);
-	}
-
-	_childrenUpdated(info) {
-		const addedNodes = info.addedNodes.filter(this._isActionNode),
-			removedNodes = info.removedNodes.filter(this._isActionNode),
-			newNodes = addedNodes.filter((node) => !removedNodes.includes(node));
-
-		if (
-			(addedNodes.length === 0 && removedNodes.length === 0) ||
-			newNodes.length === 0
-		) {
-			return;
-		}
-		newNodes.forEach((node) => {
-			this._hiddenMutationObserver.observe(node, {
-				attributes: true,
-				attributeFilter: ['hidden'],
-			});
-			this._moveElement(node, false);
-		});
-
-		this._debounceLayoutActions();
-	}
-
-	_computeComputedBarHeight(matchElementHeight, barHeight) {
-		if (matchElementHeight) {
-			return matchElementHeight.offsetHeight;
-		}
-		return barHeight;
-	}
-
-	_computeVisible(hasActions, active, hasExtraItems, forceOpen) {
-		return forceOpen || ((hasActions || hasExtraItems) && active);
-	}
-
-	_debounceLayoutActions() {
-		this._layoutDebouncer = Debouncer.debounce(
-			this._layoutDebouncer,
-			timeOut.after(30),
-			this._boundLayoutActions,
-		);
-	}
-
-	_getHeightMatchingElement(matchParent) {
-		if (matchParent) {
-			return this.parentElement;
-		}
-
-		return null;
-	}
-
-	_getHeightStyle(height) {
-		return 'height: ' + height + 'px;';
-	}
-
-	_isActionNode(node) {
-		return (
-			node.nodeType === Node.ELEMENT_NODE &&
-			node.getAttribute('slot') !== 'info' &&
-			node.tagName !== 'TEMPLATE' &&
-			node.tagName !== 'STYLE' &&
-			node.tagName !== 'DOM-REPEAT' &&
-			node.tagName !== 'DOM-IF' &&
-			node.getAttribute('slot') !== 'extra'
-		);
-	}
-
-	_getElements() {
-		const elements = FlattenedNodesObserver.getFlattenedNodes(this)
-			.filter(this._isActionNode)
-			.filter((element) => !element.hidden)
-			.sort((a, b) => (a.dataset.index ?? 0) - (b.dataset.index ?? 0));
-
-		if (elements.length === 0) {
-			return elements;
-		}
-
-		const topPriorityAction = elements.reduce(
-			(top, element) => {
-				return parseInt(top.dataset.priority ?? 0, 10) >=
-					parseInt(element.dataset.priority ?? 0, 10)
-					? top
-					: element;
-			},
-			{ dataset: { priority: '-1000' } },
-			[],
-		);
-
-		return [
-			topPriorityAction,
-			...elements.filter((e) => e !== topPriorityAction),
-		];
-	}
-
-	/**
-	 * Layout the actions available as buttons or menu items
-	 *
-	 * If the window is resizing down, just make sure that all buttons fits, and if not,
-	 * move one to menu and call itself async (to allow re-rendering) and see if we fit.
-	 * Repeat until the button fits or no buttons are left.
-	 *
-	 * If the window is sizing up, try to place a menu item out as a button, call itself
-	 * async (to allow re-rendering) and see if we fit - if we don't, remove the button again.
-	 *
-	 * We also need to keep track of `_scalingUp` between calls since the resize might fire
-	 * a lot of events, and we don't want to be starting multiple "calculation processes"
-	 * since this will result in an infinite loop.
-	 *
-	 * The actual layouting of actions will be performed by adding or removing the 'button'
-	 * attribute from the action, which will cause it to match different content insertion
-	 * points.
-	 *
-	 * @returns {void}
-	 */
-	_layoutActions() {
-		const elements = this._getElements(),
-			hasActions = elements.length > 0 || this.hasExtraItems;
-		this._setHasActions(hasActions);
-
-		if (!hasActions) {
-			// No need to render if we don't have any actions
-			return this._setHasMenuItems(false);
-		}
-
-		const toolbarElements = elements.slice(0, this.maxToolbarItems),
-			menuElements = elements.slice(toolbarElements.length);
-		toolbarElements.forEach((el) => this._moveElement(el, true));
-		menuElements.forEach((el) => this._moveElement(el));
-		this._setHasMenuItems(menuElements.length > 0);
-	}
-
-	_moveElement(element, toToolbar) {
-		const slot = toToolbar ? BOTTOM_BAR_TOOLBAR_SLOT : BOTTOM_BAR_MENU_SLOT,
-			tabindex = '0';
-		element.setAttribute('slot', slot);
-		element.setAttribute('tabindex', tabindex);
-		element.classList.toggle(this.menuClass, !toToolbar);
-		element.classList.toggle(this.toolbarClass, toToolbar);
-		this.updateStyles();
-	}
-
-	_onResize([entry]) {
-		const hidden =
-			entry.borderBoxSize?.[0]?.inlineSize === 0 ||
-			entry.contentRect?.width === 0;
-		if (hidden) {
-			return;
-		}
-		this.computedBarHeight = this._computeComputedBarHeight(
-			this._matchHeightElement,
-			this.barHeight,
-		);
-	}
-
-	_showHideBottomBar(visible) {
-		this.style.transitionDuration = 0;
-		this.style.display = '';
-		this.style.maxHeight = '';
-
-		const height = this.computedBarHeight,
-			to = !visible ? '0px' : height + 'px';
-
-		let from = visible ? '0px' : height + 'px';
-
-		if (!this[rendered]) {
-			from = to;
-			this[rendered] = true;
-		}
-
-		this.style.maxHeight = from;
-
-		const onEnd = () => {
-			this.removeEventListener('transitionend', onEnd);
-			this.style.maxHeight = '';
-			this.style.display = this.visible ? '' : 'none';
-		};
-		requestAnimationFrame(() => {
-			this.addEventListener('transitionend', onEnd);
-			this.style.transitionDuration = '';
-			this.style.maxHeight = to;
-		});
-	}
-}
-
-customElements.define('cosmoz-bottom-bar', CosmozBottomBar);
-
-const tmplt = `
-	<slot name="extra" slot="extra"></slot>
-	<slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
-	<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
-`;
-
-export const bottomBarSlots = html(Object.assign([tmplt], { raw: [tmplt] })),
-	bottomBarSlotsPolymer = polymerHtml(Object.assign([tmplt], { raw: [tmplt] }));

package/src/cosmoz-bottom-bar-next.js

@@ -1,232 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable max-lines */
-import { html } from 'lit-html';
-import { component, useLayoutEffect } from '@pionjs/pion';
-import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
-import { style } from './cosmoz-bottom-bar-next.style.js';
-import { toggleSize } from '@neovici/cosmoz-collapse/toggle';
-import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
-import '@neovici/cosmoz-dropdown';
-
-const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar';
-const BOTTOM_BAR_MENU_SLOT = 'bottom-bar-menu';
-
-const _moveElement = (element, toToolbar) => {
-	const slot = toToolbar ? BOTTOM_BAR_TOOLBAR_SLOT : BOTTOM_BAR_MENU_SLOT;
-	const tabindex = '0';
-
-	element.setAttribute('slot', slot);
-	element.setAttribute('tabindex', tabindex);
-};
-
-const _isActionNode = (node) => {
-	return (
-		node.nodeType === Node.ELEMENT_NODE &&
-		node.getAttribute('slot') !== 'info' &&
-		node.tagName !== 'TEMPLATE' &&
-		node.tagName !== 'STYLE' &&
-		node.tagName !== 'DOM-REPEAT' &&
-		node.tagName !== 'DOM-IF' &&
-		node.getAttribute('slot') !== 'extra'
-	);
-};
-
-const getFlattenedNodes = (element) => {
-	const childNodes = [...element.childNodes];
-
-	for (let i = 0; i < element.childNodes.length; i++) {
-		const node = element.childNodes[i];
-		if (node.tagName === 'SLOT') {
-			// remove current slot element
-			childNodes.splice(i, 1);
-
-			// append slot elements to the current index
-			const slotElements = node.assignedElements({ flatten: true });
-			for (let j = 0; j < slotElements.length; j++) {
-				const slotElement = slotElements[j];
-
-				childNodes.splice(i + j, 0, slotElement);
-			}
-		}
-	}
-
-	return childNodes;
-};
-
-const _getElements = (host) => {
-	const elements = getFlattenedNodes(host)
-		.filter(_isActionNode)
-		.filter((element) => !element.hidden)
-		.sort((a, b) => (a.dataset.index ?? 0) - (b.dataset.index ?? 0));
-
-	if (elements.length === 0) {
-		return elements;
-	}
-
-	const topPriorityAction = elements.reduce(
-		(top, element) => {
-			return parseInt(top.dataset.priority ?? 0, 10) >=
-				parseInt(element.dataset.priority ?? 0, 10)
-				? top
-				: element;
-		},
-		{ dataset: { priority: '-1000' } },
-		[],
-	);
-
-	return [
-		topPriorityAction,
-		...elements.filter((e) => e !== topPriorityAction),
-	];
-};
-
-/**
- * Layout the actions available as buttons or menu items
- *
- * If the window is resizing down, just make sure that all buttons fits, and if not,
- * move one to menu and call itself async (to allow re-rendering) and see if we fit.
- * Repeat until the button fits or no buttons are left.
- *
- * If the window is sizing up, try to place a menu item out as a button, call itself
- * async (to allow re-rendering) and see if we fit - if we don't, remove the button again.
- *
- * We also need to keep track of `_scalingUp` between calls since the resize might fire
- * a lot of events, and we don't want to be starting multiple "calculation processes"
- * since this will result in an infinite loop.
- *
- * The actual layouting of actions will be performed by adding or removing the 'button'
- * attribute from the action, which will cause it to match different content insertion
- * points.
- *
- * @param {*} host The current element
- * @param {*} maxToolbarItems Maximum items for the toolbar
- * @returns {void}
- */
-const _layoutActions = (host, maxToolbarItems) => {
-	// eslint-disable-line max-statements
-	const elements = _getElements(host);
-	const hasActions = elements.length > 0;
-
-	if (!hasActions) {
-		// No need to render if we don't have any actions
-		return host.toggleAttribute('has-menu-items', false);
-	}
-
-	const toolbarElements = elements.slice(0, maxToolbarItems);
-	const menuElements = elements.slice(toolbarElements.length);
-
-	toolbarElements.forEach((el) => _moveElement(el, true));
-	menuElements.forEach((el) => _moveElement(el));
-	host.toggleAttribute('has-menu-items', menuElements.length > 0);
-};
-
-export const openMenu = Symbol('openMenu');
-
-const openActionsMenu = (host) => {
-	const dropdown = host.shadowRoot.querySelector('#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();
-};
-
-/**
- * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
- * can be used for actions.
- *
- * The items placed inside the `cosmoz-bottom-bar` are distributed into the toolbar in a horizontal container.
- * If the items do not fit the available width, those that do not fit are placed in a dropdown
- * menu triggered by a button in the toolbar.
- * The class specified by the property `toolbarClass` (default `cosmoz-bottom-bar-toolbar`)
- * is applied to items distributed to the toolbar.
- * The class specified in the property `menuClass` (default `cosmoz-bottom-bar-menu`)
- * is applied to items distributed to the menu.
- *
- * ### Usage
- *
- * See demo for example usage
- *
- * @element cosmoz-bottom-bar
- * @demo demo/bottom-bar-next.html Basic Demo
- */
-// eslint-disable-next-line max-statements
-const CosmozBottomBar = ({ active = false, maxToolbarItems = 1 }) => {
-	const host = useHost();
-
-	useActivity(
-		{
-			activity: openMenu,
-			callback: () => openActionsMenu(host),
-			check: () => host.active && !host.hasAttribute('hide-actions'),
-			element: () => host.shadowRoot.querySelector('#dropdown'),
-		},
-		[host.active],
-	);
-
-	const toggle = toggleSize('height');
-
-	useLayoutEffect(() => {
-		toggle(host, active);
-	}, [active]);
-
-	const slotChangeHandler = () => {
-		_layoutActions(host, maxToolbarItems);
-	};
-
-	return html`<div id="bar" part="bar">
-			<div id="info" part="info"><slot name="info"></slot></div>
-			<slot
-				id="bottomBarToolbar"
-				name="bottom-bar-toolbar"
-				@slotchange=${slotChangeHandler}
-			></slot>
-			<cosmoz-dropdown-menu id="dropdown">
-				<svg
-					slot="button"
-					width="4"
-					height="16"
-					viewBox="0 0 4 16"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<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"
-					/>
-					<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"
-					/>
-					<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"
-					/>
-				</svg>
-				<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
-			</cosmoz-dropdown-menu>
-			<slot name="extra" id="extraSlot"></slot>
-		</div>
-		<div hidden style="display:none">
-			<slot id="content" @slotchange=${slotChangeHandler}></slot>
-		</div>`;
-};
-
-export default CosmozBottomBar;
-
-customElements.define(
-	'cosmoz-bottom-bar-next',
-	component(CosmozBottomBar, {
-		observedAttributes: ['active'],
-		styleSheets: [style],
-	}),
-);

package/src/cosmoz-bottom-bar-next.style.js

@@ -1,98 +0,0 @@
-/* eslint-disable max-len */
-import { css } from '@neovici/cosmoz-utils';
-
-export const style = css`
-	:host {
-		display: block;
-		overflow: hidden;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		max-width: 100%; /* Firefox fix */
-		background-color: inherit;
-		transition: max-height 0.3s ease;
-		flex: none;
-		background-color: var(
-			--cosmoz-bottom-bar-bg-color,
-			rgba(230, 230, 230, 0.8)
-		);
-		box-shadow: var(--cosmoz-bottom-bar-shadow, none);
-		z-index: 1;
-
-		--cosmoz-dropdown-anchor-spacing: 12px 6px;
-		--paper-button: {
-			background-color: inherit;
-			text-transform: none;
-			border: 0;
-			border-radius: 0;
-			font-size: inherit;
-			color: inherit;
-			font-weight: inherit;
-			margin: 0;
-			padding: 0;
-		};
-	}
-	:host([force-open]) {
-		transition: none;
-	}
-	[hidden],
-	::slotted([hidden]) {
-		display: none !important;
-	}
-	#bar {
-		height: 64px;
-		padding: 0 3%;
-		display: flex;
-		align-items: center;
-	}
-	#info {
-		min-width: 5px;
-		padding-right: 3%;
-		margin-right: auto;
-		white-space: nowrap;
-	}
-	#bottomBarToolbar::slotted(:not(slot):not([unstyled])) {
-		margin: 0 0.29em;
-		min-width: 40px;
-		min-height: 40px;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		background: var(
-			--cosmoz-bottom-bar-button-bg-color,
-			var(--cosmoz-button-bg-color, #101010)
-		);
-		color: var(
-			--cosmoz-bottom-bar-button-color,
-			var(--cosmoz-button-color, #fff)
-		);
-		border-radius: 6px;
-		padding: 0 18px;
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 40px;
-	}
-
-	#bottomBarToolbar::slotted(:not(slot)[disabled]) {
-		opacity: var(--cosmoz-button-disabled-opacity, 0.15);
-		pointer-events: none;
-	}
-	#bottomBarToolbar::slotted(:not(slot):hover) {
-		background: var(
-			--cosmoz-bottom-bar-button-hover-bg-color,
-			var(--cosmoz-button-hover-bg-color, #3a3f44)
-		);
-	}
-	#dropdown::part(content) {
-		max-width: 300px;
-	}
-
-	:host([hide-actions]) #bottomBarToolbar,
-	:host([hide-actions]) #bottomBarMenu,
-	:host([hide-actions]) #dropdown {
-		display: none;
-	}
-
-	:host(:not([has-menu-items])) cosmoz-dropdown-menu {
-		display: none;
-	}
-`;