@neovici/cosmoz-omnitable 12.3.0 → 12.4.1

package/cosmoz-omnitable-header-row.js

@@ -2,6 +2,7 @@ import { html, component } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat.js';
 import './lib/cosmoz-omnitable-resize-nub';
 import { render } from './lib/settings/cosmoz-omnitable-sort-group';
+import { when } from 'lit-html/directives/when.js';
 
 const /* eslint-disable-next-line max-lines-per-function */
 	renderHeaderRow = ({
@@ -53,15 +54,16 @@ const /* eslint-disable-next-line max-lines-per-function */
 				></cosmoz-omnitable-resize-nub>`,
 			]
 		),
-	HeaderRow = ({ columns, settingsConfig, ...thru }) => [
+	HeaderRow = ({ columns, settingsConfig, hideSelectAll, ...thru }) => [
 		columns &&
 			renderHeaderRow({
 				columns,
 				...thru,
 			}),
-		html`<cosmoz-omnitable-settings
-			.config=${settingsConfig}
-		></cosmoz-omnitable-settings>`,
+		html`${when(!hideSelectAll, () => html`
+			<cosmoz-omnitable-settings
+			.config=${settingsConfig}>
+			</cosmoz-omnitable-settings>`)}`,
 	];
 
 customElements.define(

package/cosmoz-omnitable-styles.js

@@ -106,18 +106,6 @@ export default `
 		align-items: flex-end;
 	}
 
-	.headerDots {
-	 	align-items: center;
-	 	cursor: default;
-		display: flex;
-		font-size: 20px;
-		height: 30px;
-		justify-content: center;
-		min-width: 42px;
-		padding-bottom: 12px;
-		transform: rotate(90deg);
-		}
-
 	[hidden] {
 		display: none;
 	}

package/cosmoz-omnitable.js

@@ -24,6 +24,7 @@ import { component } from 'haunted';
 import { renderHeader } from './lib/render-header';
 import { renderFooter } from './lib/render-footer';
 import { renderList } from './lib/render-list';
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 const Omnitable = (host) => {
 	const { header, list, footer } = useOmnitable(host);
@@ -48,9 +49,23 @@ const Omnitable = (host) => {
 
 customElements.define(
 	'cosmoz-omnitable',
-	component(Omnitable, {
-		observedAttributes: ['hash-param', 'sort-on', 'group-on', 'hide-select-all'],
-	})
+	class extends component(Omnitable, {
+		observedAttributes: [
+			'hash-param',
+			'sort-on',
+			'group-on',
+			'hide-select-all',
+		],
+	}) {
+		connectedCallback() {
+			super.connectedCallback();
+			notifyProperty(this, 'selectedItems', []);
+			notifyProperty(this, 'visibleData', []);
+			notifyProperty(this, 'sortedFilteredGroupedItems', []);
+			notifyProperty(this, 'sortOn', '');
+			notifyProperty(this, 'descending', false);
+		}
+	}
 );
 
 const tmplt = `

package/lib/render-header.js

@@ -12,7 +12,7 @@ export const renderHeader = ({
 	groupOnColumn,
 	setFilterState,
 	settingsConfig,
-															 hideSelectAll
+	hideSelectAll
 }) => {
 	return html` <sort-and-group-provider .value=${sortAndGroup}>
 		<div class="header" id="header">
@@ -28,7 +28,11 @@ export const renderHeader = ({
 			)}
 			${when(
 				hideSelectAll,
-				() => html`<div class="headerDots"><span>...</span></div>`
+				() => html`
+					<cosmoz-omnitable-settings
+						.newLayout="${true}"
+						.config=${settingsConfig}
+					></cosmoz-omnitable-settings>`
 			)}
 
 			<cosmoz-omnitable-header-row
@@ -38,6 +42,7 @@ export const renderHeader = ({
 				.groupOnColumn=${groupOnColumn}
 				.setFilterState=${setFilterState}
 				.settingsConfig=${settingsConfig}
+				.hideSelectAll=${hideSelectAll}
 			></cosmoz-omnitable-header-row>
 		</div>
 	</sort-and-group-provider>`;

package/lib/settings/cosmoz-omnitable-settings.js

@@ -1,5 +1,4 @@
 import { html, component } from 'haunted';
-import { nothing } from 'lit-html';
 import { _ } from '@neovici/cosmoz-i18next';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
@@ -8,6 +7,7 @@ import { sort, group } from './cosmoz-omnitable-sort-group';
 import style, { dropdown as dropdownStyle } from './style.css';
 import useSettingsUi from './use-settings-ui';
 import { close, pull, arrow } from '../icons';
+import { when } from 'lit-html/directives/when.js';
 
 /* eslint-disable max-lines-per-function */
 const placement = ['bottom-right', ...defaultPlacement],
@@ -130,7 +130,7 @@ const placement = ['bottom-right', ...defaultPlacement],
 				</div>`,
 		].filter(Boolean);
 	},
-	Settings = ({ config }) => html`
+	Settings = ({ config, newLayout }) => html`
 		<style>
 			${dropdownStyle}
 		</style>
@@ -138,12 +138,17 @@ const placement = ['bottom-right', ...defaultPlacement],
 			.render=${() => html`<cosmoz-omnitable-settings-ui
 				.config=${config}
 			></cosmoz-omnitable-settings-ui>`}
-			.placement=${placement}
+			.placement=${newLayout ? ['bottom-left', ...defaultPlacement] : placement}
 		>
-			<svg viewBox="0 0 24 24" width="24" slot="button" fill="currentColor">
-				<path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path>
-			</svg>
-			${config?.badge ? html`<div class="badge" slot="button"></div>` : nothing}
+			${newLayout ?
+				html`<div class="headerDots" slot="button">...</div>` :
+				html`
+					<svg viewBox="0 0 24 24" width="24" slot="button" fill="currentColor">
+						<path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path>
+					</svg>`
+			}
+
+			${when(config?.badge, () => html`<div class="badge" slot="button"></div>`)}
 		</cosmoz-dropdown>
 	`;
 customElements.define('cosmoz-omnitable-settings', component(Settings));

package/lib/settings/style.css.js

@@ -196,7 +196,6 @@ export const dropdown = css`
 		outline: none;
 	}
 	cosmoz-dropdown::part(button) {
-		--cosmoz-dropdown-button-size: 24px;
 		padding: 0;
 		background: transparent;
 		color: inherit;
@@ -216,4 +215,15 @@ export const dropdown = css`
 		height: 8px;
 		border-radius: 100%;
 	}
+	.headerDots {
+		align-items: center;
+		color: var(--cosmoz-input-color);
+		display: flex;
+		font-size: 20px;
+		height: 42px;
+		justify-content: center;
+		margin-left: 12px;
+		min-width: 30px;
+		transform: rotate(90deg);
+	}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "12.3.0",
+	"version": "12.4.1",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"