@neovici/cosmoz-tabs 7.6.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "7.6.0",
+	"version": "8.1.0",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"
@@ -68,29 +68,28 @@
 		"./next/*": "./src/next/*"
 	},
 	"dependencies": {
-		"@neovici/cosmoz-router": "^10.0.0",
-		"@neovici/cosmoz-utils": "^5.0.0",
+		"@neovici/cosmoz-collapse": "^1.3.0",
+		"@neovici/cosmoz-router": "^11.0.0",
+		"@neovici/cosmoz-utils": "^6.0.0",
+		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"compute-scroll-into-view": "^1.0.17",
-		"haunted": "^5.0.0",
-		"lit-html": "^2.0.0"
+		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^17.0.0",
-		"@commitlint/config-conventional": "^17.0.0",
+		"@commitlint/cli": "^18.0.0",
+		"@commitlint/config-conventional": "^18.0.0",
 		"@neovici/cfg": "^1.11.0",
-		"@open-wc/testing": "^3.0.0",
+		"@open-wc/testing": "^4.0.0",
 		"@polymer/iron-list": "^3.1.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.0",
-		"@web/dev-server-storybook": "^0.5.0",
-		"@web/test-runner": "^0.15.0",
-		"eslint-import-resolver-typescript": "^3.2.7",
+		"@web/dev-server-storybook": "^2.0.0",
 		"husky": "^8.0.0",
-		"semantic-release": "^20.0.0",
-		"sinon": "^15.0.0",
-		"typescript": "^4.4.0"
+		"semantic-release": "^22.0.0",
+		"sinon": "^17.0.0",
+		"typescript": "^5.0.0"
 	}
 }

package/src/cosmoz-tab-card.js

@@ -1,8 +1,18 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
-import {
-	html,
-	component
-} from 'haunted';
+import { html, component, useState, useEffect } from '@pionjs/pion';
+import '@neovici/cosmoz-collapse';
+import { when } from 'lit-html/directives/when.js';
+import { css } from './utils';
+
+const collapseIcon = html`<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M5 1L10 8L5 15" stroke="#101010" stroke-width="1.5" />
+</svg>`;
 
 /**
 
@@ -22,8 +32,40 @@ Custom property                         | Description              | Default
 `--cosmoz-tab-card-content-line-height` | Card content line height | `initial`
 `--cosmoz-tab-card-content-padding`     | Card content padding     | `initial`
 */
-const CosmozTabCard = ({ heading }) => html`
-<style>
+
+const CosmozTabCard = (host) => {
+	const { heading, collapsable, collapsed: isCollapsed } = host,
+		[collapsed, setCollapsed] = useState(Boolean(isCollapsed)),
+		toggleCollapsed = () => {
+			if (!collapsable) return;
+			return setCollapsed((c) => !c);
+		};
+
+	useEffect(() => {
+		host.toggleAttribute('collapsed', collapsed);
+	}, [collapsed]);
+
+	return html`<div id="header" part="header">
+			${when(
+				collapsable,
+				() => html`
+					<div @click=${toggleCollapsed} part="collapse-icon">
+						<slot name="collapse-icon">${collapseIcon}</slot>
+					</div>
+				`,
+			)}
+			<h1 class="heading" @click=${toggleCollapsed} part="heading">
+				${heading}<slot name="after-title"></slot>
+			</h1>
+			<slot name="card-actions"></slot>
+		</div>
+
+		<div id="content" part="content">
+			<cosmoz-collapse ?opened=${!collapsed}><slot></slot></cosmoz-collapse>
+		</div>`;
+};
+
+const style = css`
 	:host {
 		display: block;
 		position: relative;
@@ -34,7 +76,10 @@ const CosmozTabCard = ({ heading }) => html`
 		align-self: flex-start;
 		padding: var(--cosmoz-tab-card-padding, 0);
 		width: var(--cosmoz-tab-card-width, 300px);
-		box-shadow: var(--cosmoz-shadow-2dp, var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5));
+		box-shadow: var(
+			--cosmoz-shadow-2dp,
+			var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5)
+		);
 	}
 
 	#content {
@@ -45,9 +90,9 @@ const CosmozTabCard = ({ heading }) => html`
 	#header {
 		display: flex;
 		align-items: center;
+		gap: 8px;
 		background-color: #fff;
-		cursor: default;
-		-webkit-tap-highlight-color: rgba(0,0,0,0);
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 	}
 
 	.heading {
@@ -55,19 +100,29 @@ const CosmozTabCard = ({ heading }) => html`
 		font-size: 17px;
 		font-weight: 400;
 		flex: 1;
-		margin: 0.67em 0 0;
 	}
-</style>
 
-<div id="header" part="header">
-	<h1 class="heading" part="heading">${ heading }<slot name="after-title"></slot></h1>
-	<slot name="card-actions"></slot>
-</div>
+	[part='collapse-icon'] {
+		order: var(--cosmoz-tab-card-collapse-icon-order);
+		transition: transform 250ms linear;
+		transform: rotate(90deg);
+	}
 
-<div id="content" part="content">
-	<slot></slot>
-</div>`;
+	:host([collapsed]) [part='collapse-icon'] {
+		transform: rotate(0deg);
+	}
+
+	:host([collapsable]) [part='collapse-icon'],
+	:host([collapsable]) .heading {
+		cursor: pointer;
+		user-select: none;
+	}
+`;
 
-customElements.define('cosmoz-tab-card', component(CosmozTabCard, {
-	observedAttributes: ['heading']
-}));
+customElements.define(
+	'cosmoz-tab-card',
+	component(CosmozTabCard, {
+		observedAttributes: ['heading', 'collapsable', 'collapsed'],
+		styleSheets: [style],
+	}),
+);

package/src/cosmoz-tab.js

@@ -3,7 +3,7 @@ import './cosmoz-tab-card.js';
 import {
 	html,
 	component
-} from 'haunted';
+} from '@pionjs/pion';
 import { useTab } from './use-tab';
 
 /**

package/src/cosmoz-tabs.js

@@ -1,5 +1,5 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 import { useTabs } from './use-tabs';
 import { style, renderTab } from './render';
 import './cosmoz-tab.js';

package/src/next/cosmoz-tab.js

@@ -1,4 +1,4 @@
-import { component, useEffect, useLayoutEffect } from 'haunted';
+import { component, useEffect, useLayoutEffect } from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import computeScroll from 'compute-scroll-into-view';

package/src/next/cosmoz-tabs.js

@@ -1,4 +1,4 @@
-import { html, component, useEffect } from 'haunted';
+import { html, component, useEffect } from '@pionjs/pion';
 import style from './cosmoz-tabs.css';
 
 const Tabs = (host) => {

package/src/next/use-tabs.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/group-exports */
-import { html, useMemo, useCallback, useRef } from 'haunted';
+import { html, useMemo, useCallback, useRef } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 /* eslint-disable-next-line import/no-unresolved */
 import { useHashParam } from '@neovici/cosmoz-router/use-hash-param';

package/src/render.js

@@ -1,4 +1,4 @@
-import { html } from 'haunted';
+import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { getIcon, getIconStyle } from './utils';
 
@@ -100,29 +100,42 @@ const style = `
 	color: #ffffff;
 	text-align: center;
 }`,
+	renderTab =
+		({ selectedTab, onSelect, href }) =>
+		(tab, i, tabs) => {
+			const isSelected = selectedTab === tab,
+				icon = getIcon(tab, isSelected);
+			return html`<a
+				class="tab"
+				tabindex="-1"
+				role="tab"
+				part=${[
+					'tab',
+					i === 0 && 'first-tab',
+					i === tabs.length - 1 && 'last-tab',
+					isSelected && 'selected-tab',
+				]
+					.filter(Boolean)
+					.join(' ')}
+				?hidden=${tab.hidden}
+				?disabled=${tab.disabled}
+				?aria-selected=${isSelected}
+				@click=${onSelect}
+				.tab=${tab}
+				href=${ifDefined(href(tab))}
+			>
+				${icon
+					? html`<iron-icon
+							class="icon"
+							icon=${icon}
+							style=${getIconStyle(tab)}
+						></iron-icon>`
+					: ''}
+				<span>${tab.heading}</span>
+				${tab.badge
+					? html`<div class="badge" title=${tab.badge}>${tab.badge}</div>`
+					: ''}
+			</a>`;
+		};
 
-	renderTab = ({
-		selectedTab,
-		onSelect,
-		href
-	}) => (tab, i, tabs) => {
-		const isSelected = selectedTab === tab,
-			icon = getIcon(tab, isSelected);
-		return html`<a class="tab" tabindex="-1" role="tab"
-			part=${ ['tab', i === 0 && 'first-tab', i === tabs.length - 1 && 'last-tab', isSelected && 'selected-tab'].filter(Boolean).join(' ') }
-			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
-			?aria-selected=${ isSelected }
-			@click=${ onSelect }
-			.tab=${ tab }
-			href=${ ifDefined(href(tab)) }
-		>
-			${ icon ? html `<iron-icon class="icon" icon=${ icon } style=${ getIconStyle(tab) }></iron-icon>` : '' }
-			<span>${ tab.heading }</span>
-			${ tab.badge ? html`<div class="badge" title=${ tab.badge }>${ tab.badge }</div>` : '' }
-		</a>`;
-	};
-
-export {
-	style,
-	renderTab
-};
+export { style, renderTab };

package/src/use-tab.js

@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'haunted';
+import { useEffect, useCallback } from '@pionjs/pion';
 import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 const useTab = (host) => {

package/src/use-tabs.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from 'haunted';
+import { useState, useEffect, useMemo, useCallback } from '@pionjs/pion';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 /* eslint-disable-next-line import/no-unresolved */
 import { useHashParam, link } from '@neovici/cosmoz-router/use-hash-param';

package/src/utils.js

@@ -1,5 +1,6 @@
-const isValid = tab => !tab.hidden && !tab.disabled,
+import { tagged } from '@neovici/cosmoz-utils';
 
+const isValid = (tab) => !tab.hidden && !tab.disabled,
 	/**
 	 * Gets the element icon name.
 	 *
@@ -7,10 +8,9 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 	 * @param {boolean} isSelected Is the tab selected
 	 * @returns {string} Name of the element icon.
 	 */
-	getIcon = (tab, isSelected) => isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
-
-	getName = tab => tab.getAttribute('name'),
-
+	getIcon = (tab, isSelected) =>
+		isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
+	getName = (tab) => tab.getAttribute('name'),
 	/**
 	 * Gets the element icon style property and value if icon color is
 	 * set, otherwise return nothing.
@@ -18,19 +18,16 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 	 * @param {HTMLElement} tab The tab to compute icon stype for
 	 * @returns {string/void} Style color property and value for the icon.
 	 */
-	getIconStyle = tab => {
+	getIconStyle = (tab) => {
 		const iconColor = tab.iconColor ?? '#15b0d3';
-		return ['color: ' + iconColor, tab.iconStyle]
-			.join(';');
+		return ['color: ' + iconColor, tab.iconStyle].join(';');
 	},
-
-	valid = tabs => tabs.find(isValid),
-
+	valid = (tabs) => tabs.find(isValid),
 	choose = (tabs, selected) => {
 		if (selected == null) {
 			return valid(tabs);
 		}
-		const selectedTab = tabs.find(tab => getName(tab) === selected);
+		const selectedTab = tabs.find((tab) => getName(tab) === selected);
 		if (selectedTab == null) {
 			return valid(tabs);
 		}
@@ -44,21 +41,21 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 		}
 		return fallback;
 	},
-	collect = slot => slot.assignedElements().flatMap(el => {
-		if (el.matches('cosmoz-tab')) {
-			return [el];
-		}
-		if (el.matches('slot')) {
-			return collect(el);
-		}
-		return [];
-	});
+	collect = (slot) =>
+		slot.assignedElements().flatMap((el) => {
+			if (el.matches('cosmoz-tab')) {
+				return [el];
+			}
+			if (el.matches('slot')) {
+				return collect(el);
+			}
+			return [];
+		}),
+	sheet = (...styles) => {
+		const cs = new CSSStyleSheet();
+		cs.replaceSync(styles.join(''));
+		return cs;
+	},
+	css = (strings, ...values) => sheet(tagged(strings, ...values));
 
-export {
-	choose,
-	collect,
-	isValid,
-	getIcon,
-	getIconStyle,
-	getName
-};
+export { choose, collect, isValid, getIcon, getIconStyle, getName, sheet, css };