@neovici/cosmoz-queue 3.8.0 → 3.9.0

package/dist/actions/index.d.ts

@@ -1,3 +1,4 @@
+import '@neovici/cosmoz-button';
 import type { Dialogable, Resolvable } from '@neovici/cosmoz-form';
 import { nothing } from 'lit-html';
 export declare const actionCount: <T>(items: T[], applicableItems?: T[]) => import("lit-html").TemplateResult<1> | undefined;

package/dist/actions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAQ,OAAO,EAAE,MAAM,UAAU,CAAC;AAIzC,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE,kBAAiB,CAAC,EAAU,qDASrE,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS,MAAM,EAC1C,MAAM,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,WAAW,UAAU,CAC1B,KAAK,SAAS,MAAM,EACpB,KAAK,SAAS,UAAU,GAAG,WAAW,GAAG,WAAW;IAEpD,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,MAAM;IAC/C,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,MAAM,CAAC,KAAK,SAAS,MAAM,EAAE,OAAO,SAAS,MAAM,GAAG,MAAM;IAC5E,KAAK,EAAE,MAAM,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,WAAW,CAAC,KACtE,OAAO,CAAC;IACb,MAAM,EAAE,CACP,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAC3D,UAAU,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,aAAa,GACzB,KAAK,SAAS,MAAM,EACpB,OAAO,SAAS,MAAM,GAAG,MAAM,EAC/B,KAAK,SAAS,UAAU,GAAG,WAAW,GAAG,WAAW,EAEpD,MAAM,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,0DAgBvD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,KAAK,SAAS,MAAM,EAAE,OAAO,SAAS,MAAM,EAClE,QAAQ,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,2BACpB,CAAC;AAEZ,eAAO,MAAM,aAAa,GAExB,KAAK,SAAS,MAAM,EACpB,OAAO,SAAS,MAAM,GAAG,MAAM,EAC/B,KAAK,SAAS,UAAU,GAAG,WAAW,GAAG,WAAW,EAEpD,MAAM,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,MAE9B,SAAS,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,cAK/B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAQ,OAAO,EAAE,MAAM,UAAU,CAAC;AAIzC,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE,kBAAiB,CAAC,EAAU,qDASrE,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS,MAAM,EAC1C,MAAM,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,WAAW,UAAU,CAC1B,KAAK,SAAS,MAAM,EACpB,KAAK,SAAS,UAAU,GAAG,WAAW,GAAG,WAAW;IAEpD,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,MAAM;IAC/C,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,MAAM,CAAC,KAAK,SAAS,MAAM,EAAE,OAAO,SAAS,MAAM,GAAG,MAAM;IAC5E,KAAK,EAAE,MAAM,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,WAAW,CAAC,KACtE,OAAO,CAAC;IACb,MAAM,EAAE,CACP,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAC3D,UAAU,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,aAAa,GACzB,KAAK,SAAS,MAAM,EACpB,OAAO,SAAS,MAAM,GAAG,MAAM,EAC/B,KAAK,SAAS,UAAU,GAAG,WAAW,GAAG,WAAW,EAEpD,MAAM,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,0DAevD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,KAAK,SAAS,MAAM,EAAE,OAAO,SAAS,MAAM,EAClE,QAAQ,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,2BACpB,CAAC;AAEZ,eAAO,MAAM,aAAa,GAExB,KAAK,SAAS,MAAM,EACpB,OAAO,SAAS,MAAM,GAAG,MAAM,EAC/B,KAAK,SAAS,UAAU,GAAG,WAAW,GAAG,WAAW,EAEpD,MAAM,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,MAE9B,SAAS,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,cAK/B,CAAC"}

package/dist/actions/index.js

@@ -1,3 +1,4 @@
+import '@neovici/cosmoz-button';
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { when } from 'lit-html/directives/when.js';
@@ -8,15 +9,14 @@ export const defaultButton = (opts) => {
     const applicableItems = applicable ? items.filter(applicable) : items;
     if (!applicableItems.length)
         return nothing;
-    return html `<button
-		class="button"
+    return html `<cosmoz-button
 		slot="${ifDefined(slot)}"
 		title="${title}"
 		data-priority="${ifDefined(opts.priority)}"
 		@click=${() => open(dialog({ ...opts, items: applicableItems, title }))}
 	>
 		${title} ${actionCount(items, applicableItems)}
-	</button>`;
+	</cosmoz-button>`;
 };
 export const action = (action) => action;
 export const renderActions = (opts) => (actions) => actions.map((action) => {

package/dist/list/more/render-more.d.ts

@@ -1,9 +1,11 @@
+import '@neovici/cosmoz-button';
 import '@neovici/cosmoz-spinner';
-export declare const style: string;
 export declare const renderLoadMore: ({ loading, data$, hasItems, onMore, }: {
     loading?: boolean;
     data$?: PromiseLike<unknown>;
     hasItems?: boolean;
     onMore?: () => void;
 }) => import("lit-html").TemplateResult<1>;
+/** @deprecated Button presentation is provided by cosmoz-button. */
+export declare const style = "";
 //# sourceMappingURL=render-more.d.ts.map

package/dist/list/more/render-more.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-more.d.ts","sourceRoot":"","sources":["../../../src/list/more/render-more.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAOjC,eAAO,MAAM,KAAK,QAcjB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uCAK5B;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,yCAkBU,CAAC"}
+{"version":3,"file":"render-more.d.ts","sourceRoot":"","sources":["../../../src/list/more/render-more.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AAMjC,eAAO,MAAM,cAAc,GAAI,uCAK5B;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,yCAoBiB,CAAC;AAEnB,oEAAoE;AACpE,eAAO,MAAM,KAAK,KAAK,CAAC"}

package/dist/list/more/render-more.js

@@ -1,25 +1,12 @@
+import '@neovici/cosmoz-button';
 import '@neovici/cosmoz-spinner';
-import { css } from '@pionjs/pion';
 import { t } from 'i18next';
 import { html, nothing } from 'lit-html';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
-export const style = css `
-	.more {
-		font-family: inherit;
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 40px;
-		background: inherit;
-		color: var(--cz-text-color);
-		border: none;
-		cursor: pointer;
-	}
-	.more:hover {
-		color: var(--secondary-text-color);
-	}
-`;
-export const renderLoadMore = ({ loading, data$, hasItems, onMore, }) => html `<button
+export const renderLoadMore = ({ loading, data$, hasItems, onMore, }) => html `<cosmoz-button
+		variant="primary"
+		size="lg"
 		class="more"
 		slot="extraContent"
 		?hidden="${!onMore}"
@@ -28,4 +15,6 @@ export const renderLoadMore = ({ loading, data$, hasItems, onMore, }) => html `<
 		${when(loading, () => html `<cosmoz-spinner></cosmoz-spinner>`)}
 		${when(hasItems && data$, (data$) => until(data$.then(() => nothing, () => nothing), html `<cosmoz-spinner></cosmoz-spinner>`))}
 		<span>${t('Load more')}</span>
-	</button>`;
+	</cosmoz-button>`;
+/** @deprecated Button presentation is provided by cosmoz-button. */
+export const style = '';

package/dist/list/style.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../src/list/style.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK,QAejB,CAAC"}
+{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../src/list/style.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAajB,CAAC"}

package/dist/list/style.css.js

@@ -1,6 +1,5 @@
 import { css } from '@pionjs/pion';
-import { bottomBarInfoStyles, buttonStyles, statusStyle, } from '../styles/shared-styles';
-import { style as loadMoreStyle } from './more/render-more';
+import { bottomBarInfoStyles, statusStyle } from '../styles/shared-styles';
 export const style = css `
 	:host {
 		display: flex;
@@ -13,7 +12,5 @@ export const style = css `
 		min-height: 200px;
 	}
 	${bottomBarInfoStyles}
-	${buttonStyles}
 	${statusStyle}
-	${loadMoreStyle}
 `;

package/dist/queue/icon.js

@@ -2,8 +2,8 @@ import { html } from 'lit-html';
 export const arrow = html `
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="6"
-		height="10"
+		width="16"
+		height="16"
 		fill="none"
 		viewBox="0 0 6 10"
 	>

package/dist/queue/render.js

@@ -17,7 +17,7 @@ const _emptySlide = {
 };
 const emptySlide = () => _emptySlide;
 export const renderNav = ({ next, prev, }) => html ` <cosmoz-button
-			variant="secondary"
+			variant="tertiary"
 			icon-only
 			class="button-nav prev"
 			title="${t('Previous item')}"
@@ -28,7 +28,7 @@ export const renderNav = ({ next, prev, }) => html ` <cosmoz-button
 			${arrow}
 		</cosmoz-button>
 		<cosmoz-button
-			variant="secondary"
+			variant="tertiary"
 			icon-only
 			title="${t('Next item')}"
 			class="button-nav next"
@@ -49,7 +49,7 @@ export const renderPagination = (pagination) => {
 			title="${t('Previous page')}"
 			class="button-page page-prev"
 			size="sm"
-			variant="secondary"
+			variant="tertiary"
 			icon-only
 			?disabled=${!(pageNumber > 1)}
 			@click=${(e) => onPage(e.ctrlKey ? 1 : pageNumber - 1)}
@@ -58,7 +58,7 @@ export const renderPagination = (pagination) => {
 		</cosmoz-button>
 		<cosmoz-button
 			title="${t('Next page')}"
-			variant="secondary"
+			variant="tertiary"
 			icon-only
 			class="button-page page-next"
 			size="sm"

package/dist/styles/shared-styles.d.ts

@@ -1,4 +1,3 @@
 export declare const statusStyle: string;
 export declare const bottomBarInfoStyles: string;
-export declare const buttonStyles: string;
 //# sourceMappingURL=shared-styles.d.ts.map

package/dist/styles/shared-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAiHvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAa/B,CAAC;AAEF,eAAO,MAAM,YAAY,QAqGxB,CAAC"}
+{"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAiHvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAa/B,CAAC"}

package/dist/styles/shared-styles.js

@@ -127,105 +127,3 @@ export const bottomBarInfoStyles = css `
 		margin: 0;
 	}
 `;
-export const buttonStyles = css `
-	.button {
-		font-family: inherit;
-	}
-	.button:not([slot='bottom-bar-menu']),
-	.file::-webkit-file-upload-button,
-	.file::file-selector-button {
-		background-color: var(--cz-color-bg-action-solid);
-		color: var(--cz-color-text-on-action);
-		background-image: var(--cz-action-sheen, none);
-		box-shadow: var(--cz-shadow-action);
-		box-sizing: border-box;
-		cursor: pointer;
-		outline: none;
-		flex: none;
-		border: none;
-		padding: calc(var(--cz-spacing) * 2.5) calc(var(--cz-spacing) * 4);
-		border-radius: var(--cz-radius-md);
-		height: 40px;
-		min-width: 78px;
-		font-family: inherit;
-		font-size: var(--cz-text-sm);
-		font-weight: var(--cz-font-weight-semibold);
-		line-height: var(--cz-text-sm-line-height);
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.button:not([slot='bottom-bar-menu']):hover,
-	.button:not([slot='bottom-bar-menu']):active,
-	.file::-webkit-file-upload-button:hover,
-	.file::file-selector-button:hover {
-		background-color: var(--cz-color-bg-action-solid-hover);
-	}
-	.button[disabled],
-	.button:disabled {
-		opacity: var(--cosmoz-button-disabled-opacity, 0.15);
-		pointer-events: none;
-	}
-	a.button {
-		text-decoration: none;
-	}
-	.buttons {
-		display: flex;
-		justify-content: flex-end;
-		padding: 8px 8px 8px 24px;
-	}
-	.buttons .button {
-		margin: 0 4px;
-	}
-	.button-ricon {
-		border: none;
-		border-radius: 50%;
-		fill: var(--primary-button-icon-fill);
-		padding: 8px;
-		display: inline-flex;
-		background: transparent;
-		cursor: pointer;
-		transition: background 0.15s ease;
-	}
-	.button-ricon:active {
-		background: rgb(56, 62, 74, 0.15);
-	}
-	.actionButton {
-		border: transparent;
-		background: var(--cz-action-button-bg, #fff);
-		border-radius: 500px;
-		font-size: 1.08em;
-		letter-spacing: -0.01em;
-		padding: 0.5em 0.9em;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-		justify-content: center;
-		white-space: nowrap;
-		transition: background 0.25s;
-	}
-	.actionButton:hover {
-		background: var(--cz-action-button-hover-bg, #f0f0f0);
-	}
-	.actionButton span {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		min-width: 10px;
-	}
-
-	.actionButton iron-icon {
-		margin-left: 4px;
-		flex: none;
-		--iron-icon-width: 18px;
-		--iron-icon-height: 18px;
-	}
-	.actionButton iron-icon:hover {
-		color: var(--cz-accent-color);
-	}
-	.expand-more-icon {
-		fill: var(--cz-expand-more-icon-color, inherit);
-	}
-	cosmoz-tab-card::part(collapse-icon) svg {
-		fill: var(--cz-expand-more-icon-color, inherit);
-	}
-`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-queue",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "A reusable queue component for master-detail views with list, split, and queue modes",
   "keywords": [
     "web-components",
@@ -63,7 +63,7 @@
     "./list/more/render": "./dist/list/more/render-more.js"
   },
   "dependencies": {
-    "@neovici/cosmoz-button": "^1.1.0",
+    "@neovici/cosmoz-button": "^2.3.0",
     "@neovici/cosmoz-form": "^4.0.0",
     "@neovici/cosmoz-icons": "^1.6.0",
     "@neovici/cosmoz-omnitable": "^19.0.0",
@@ -100,5 +100,9 @@
     "storybook": "^10.0.0",
     "typescript": "^5.4.3",
     "vitest": "^4.0.0"
+  },
+  "overrides": {
+    "@neovici/cosmoz-button": "$@neovici/cosmoz-button",
+    "@neovici/cosmoz-tokens": "$@neovici/cosmoz-tokens"
   }
 }