@neovici/cosmoz-queue 1.0.0

package/dist/queue/list-core/use-more.js

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useState } from '@pionjs/pion';
+export const useMore = ({ params: _params, list$, pageSize = 50, setTotalAvailable, }) => {
+    const [{ page, data$, totalAvailable, params }, setData] = useState({
+        page: 0,
+        data$: Promise.resolve([]),
+        totalAvailable: Infinity,
+        params: _params,
+    });
+    const hasMore = pageSize > 0 &&
+        totalAvailable < Infinity &&
+        totalAvailable >= pageSize &&
+        page < Math.ceil(totalAvailable / pageSize);
+    const loadMore = useMemo(() => hasMore ? () => setData((s) => ({ ...s, page: s.page + 1 })) : undefined, [hasMore]);
+    useEffect(() => setData((d) => ({
+        ...d,
+        params: _params,
+        page: 0,
+        data$: Promise.resolve([]),
+    })), [_params, list$]);
+    useEffect(() => {
+        setData(({ data$, params, page, ...thru }) => ({
+            ...thru,
+            params,
+            page,
+            data$: Promise.resolve(data$).then((prev) => list$({
+                params,
+                page,
+                pageSize,
+            }).then((data) => {
+                const totalAvailable = data.total;
+                setTotalAvailable(totalAvailable);
+                setData((s) => ({
+                    ...s,
+                    totalAvailable,
+                }));
+                return [...prev, ...data.items];
+            })),
+        }));
+    }, [page, params, list$, pageSize]);
+    return { data$, loadMore };
+};

package/dist/queue/omnitable.d.ts

@@ -0,0 +1,19 @@
+import '@neovici/cosmoz-omnitable';
+import { Rec } from '@neovici/cosmoz-utils/object';
+import { Ref } from '@pionjs/pion';
+interface Props<I> {
+    exposedParts?: string;
+    settingsId?: string;
+    data$?: Promise<I[]>;
+    onData?: (v: I[]) => void;
+    selected?: I[];
+    onSelected?: (v: I[]) => void;
+    descending?: boolean;
+    onDescending?: (v: boolean) => void;
+    sortOn?: string;
+    onSort?: (v: string) => void;
+    ref?: Ref<HTMLElement | undefined>;
+}
+declare const omnitable: <I extends Rec>({ exposedParts, settingsId, data$, onData, selected, onSelected, descending, onDescending, sortOn, onSort, ref: omnitableRef, }: Props<I>, content?: unknown) => import("lit-html").TemplateResult<1>;
+export default omnitable;
+//# sourceMappingURL=omnitable.d.ts.map

package/dist/queue/omnitable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"omnitable.d.ts","sourceRoot":"","sources":["../../src/queue/omnitable.ts"],"names":[],"mappings":"AAIA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAEnD,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnC,UAAU,KAAK,CAAC,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAErB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAEpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;CACnC;AA0BD,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,GAAG,EAC/B,iIAYG,KAAK,CAAC,CAAC,CAAC,EACX,UAAU,OAAO,yCAoBjB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/queue/omnitable.js

@@ -0,0 +1,31 @@
+import { html } from 'lit-html';
+import { guard } from 'lit-html/directives/guard.js';
+import { until } from 'lit-html/directives/until.js';
+import { when } from 'lit-html/directives/when.js';
+import '@neovici/cosmoz-omnitable';
+import { updateWith } from '../util/polymer-property-changed-event.js';
+import { ref } from 'lit-html/directives/ref.js';
+const loading$$ = (data$, loading) => guard([data$, loading], () => when(data$, (data$) => until(data$?.then(() => false, () => false), true), () => loading));
+const data$$ = (data$, data) => guard([data$, data], () => when(data$, () => until(data$, []), () => data));
+const omnitable = ({ exposedParts, settingsId, data$, onData, selected, onSelected, descending, onDescending, sortOn, onSort, ref: omnitableRef, }, content) => html `
+	<cosmoz-omnitable
+		${ref((el) => {
+    if (omnitableRef)
+        omnitableRef.current = el;
+})}
+		class="ot"
+		.settingsId=${settingsId}
+		.data=${data$$(data$)}
+		?loading=${loading$$(data$)}
+		exportparts=${exposedParts}
+		.sortOn=${sortOn}
+		@sort-on-changed=${updateWith(onSort)}
+		.descending=${descending}
+		@descending-changed=${updateWith(onDescending)}
+		.selectedItems=${selected}
+		@selected-items-changed=${updateWith(onSelected)}
+		@visible-data-changed=${updateWith(onData)}
+		>${content}</cosmoz-omnitable
+	>
+`;
+export default omnitable;

package/dist/queue/pagination.d.ts

@@ -0,0 +1,5 @@
+export declare const usePagination: () => {
+    page: number;
+    onPage: (page?: number) => void;
+};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/queue/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/queue/pagination.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;;oBAQhB,MAAM;CAIf,CAAC"}

package/dist/queue/pagination.js

@@ -0,0 +1,10 @@
+import { useCallback, useMemo } from '@pionjs/pion';
+import { useHashParam } from '@neovici/cosmoz-router/use-hash-param';
+import { parse as parseNumber } from '@neovici/cosmoz-utils/number';
+export const usePagination = () => {
+    const [_page, setPageNumber] = useHashParam('page');
+    return {
+        page: useMemo(() => Math.max(1, parseNumber(_page) || 1), [_page]),
+        onPage: useCallback((page = 0) => setPageNumber(page < 2 ? undefined : page), []),
+    };
+};

package/dist/queue/queue.d.ts

@@ -0,0 +1,24 @@
+import type { TemplateResult } from 'lit-html';
+import { RenderQueue } from './render';
+import { Pagination } from './types';
+import useQueue, { UseQueue } from './use-queue';
+type QueueProps<I> = ReturnType<typeof useQueue<I>>;
+type ViewProps<I> = Omit<QueueProps<I>, 'nav'> & {
+    nav: TemplateResult;
+    item: I;
+};
+interface Props<I, D> extends Pick<UseQueue<I>, 'id' | 'api' | 'fallback' | 'split'>, Pick<RenderQueue<I, D>, 'details' | 'afterHeading'> {
+    list: (thru: Record<string, any>, props: QueueProps<I> & {
+        onRef: (el?: Element) => void;
+    }) => TemplateResult;
+    view: (thru: Record<string, any>, props: ViewProps<I>) => TemplateResult;
+    loader: (thru: Record<string, any>, props: ViewProps<I>) => TemplateResult;
+    heading: string;
+    settingsId?: string;
+    idHashParam?: string;
+    tabHashParam?: string;
+    pagination?: Pagination;
+}
+export declare const queue: <I, D = I>(props: Props<I, D>) => TemplateResult<1>;
+export {};
+//# sourceMappingURL=queue.d.ts.map

package/dist/queue/queue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/queue/queue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,KAAK,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,CAAC,EAC7D,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACpD,IAAI,EAAE,CACL,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,KACpD,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBAgGjD,CAAC"}

package/dist/queue/queue.js

@@ -0,0 +1,58 @@
+import { updateWith } from '../util/polymer-property-changed-event.js';
+import { renderQueue } from './render';
+import useAsyncAction from './use-async-action';
+import useQueue from './use-queue';
+export const queue = (props) => {
+    const { heading, afterHeading, settingsId, idHashParam = 'qid', tabHashParam = 'qtab', id, api, details, list, view, loader, pagination, fallback, split, } = props;
+    const queueProps = useQueue({
+        id,
+        api,
+        idHashParam,
+        tabHashParam,
+        fallback,
+        split,
+    });
+    const { index, mobile, hideActions, items, setItems, setSelected, totalAvailable, setTotalAvailable, onItemClick, nav, tabnav, } = queueProps;
+    const { listRef, onAsyncSimpleAction } = useAsyncAction(nav);
+    const renderProps = {
+        ...queueProps,
+        onAsyncSimpleAction,
+    };
+    return renderQueue({
+        details,
+        heading,
+        afterHeading,
+        mobile,
+        index,
+        items,
+        tabnav,
+        totalAvailable,
+        nav,
+        pagination,
+        list: list({
+            id: 'list',
+            '.exposedParts': `itemRow, itemRow-${index}`,
+            '.settingsId': settingsId,
+            '@visible-items-changed': updateWith(setItems),
+            '@selected-items-changed': updateWith(setSelected),
+            '@total-available-changed': updateWith(setTotalAvailable),
+            '@async-simple-action': onAsyncSimpleAction,
+            '@omnitable-item-click': onItemClick,
+        }, {
+            ...renderProps,
+            onRef: (el) => (listRef.current = el),
+        }),
+        renderItem: ({ item, nav }) => view({
+            class: 'view-core',
+            exportparts: 'header, header-bg',
+            '.hideActions': hideActions,
+            '.item': item,
+            '@async-simple-action': onAsyncSimpleAction,
+            '@rendered': (event) => event.target.syncImageState(),
+        }, { ...renderProps, nav, item: item }),
+        renderLoader: ({ item, nav }) => loader({
+            class: 'view-core',
+            '.item': item,
+        }, { ...renderProps, nav, item }),
+    });
+};

package/dist/queue/render.d.ts

@@ -0,0 +1,74 @@
+import { nothing, TemplateResult } from 'lit-html';
+import { RenderTabs } from '@neovici/cosmoz-tabs/next/index.js';
+import type { Tab } from './use-tabs';
+import type { Pagination } from './types';
+export declare const renderNav: ({ next, prev, }: {
+    next?: () => void;
+    prev?: () => void;
+}) => TemplateResult<1>;
+export declare const renderPagination: (pagination?: Pagination) => TemplateResult<1> | typeof nothing;
+export declare const renderStats: <I>({ pagination, index, items, totalAvailable, nav, }: {
+    pagination?: Pagination;
+    totalAvailable?: number;
+    index?: number;
+    items: I[];
+    nav: {
+        items?: I[];
+        index: number;
+    };
+}) => TemplateResult<1> | typeof nothing;
+interface RenderView<I, D> {
+    animationEnd$: Promise<unknown>;
+    details?: (i: I) => PromiseLike<D>;
+    item: I;
+    next?: () => void;
+    prev?: () => void;
+    renderItem: (opts: {
+        item: I | D;
+        nav: TemplateResult;
+        next?: () => void;
+        prev?: () => void;
+        animationEnd$?: Promise<unknown>;
+    }) => TemplateResult;
+    renderLoader: (opts: {
+        item: I;
+        nav: TemplateResult;
+    }) => TemplateResult;
+}
+export declare const renderView: <I, D>({ animationEnd$, details, item, next, prev, renderItem, renderLoader, }: RenderView<I, D>) => import("lit-html/directive.js").DirectiveResult<{
+    new (_partInfo: import("lit-html/directive.js").PartInfo): import("lit-html/directives/guard.js").GuardDirective<import("lit-html/directive.js").DirectiveResult<typeof import("@neovici/cosmoz-utils/directives/lazy-until").UntilDirective>>;
+}>;
+interface RenderSlide<I, D> extends Omit<RenderView<I, D>, 'animationEnd$'> {
+    id: (i: I) => unknown;
+    forward?: boolean;
+}
+export declare const renderSlide: <I, D>({ id, forward, item, ...thru }: RenderSlide<I, D>) => {
+    id: string;
+    content: symbol;
+    animation: (inEl: HTMLElement, outEl: HTMLElement) => Promise<[Animation, Animation]>;
+} | {
+    id: unknown;
+    render: (rnd: {
+        animationEnd$: Promise<unknown>;
+    }) => import("lit-html/directive.js").DirectiveResult<{
+        new (_partInfo: import("lit-html/directive.js").PartInfo): import("lit-html/directives/guard.js").GuardDirective<import("lit-html/directive.js").DirectiveResult<typeof import("@neovici/cosmoz-utils/directives/lazy-until").UntilDirective>>;
+    }>;
+    animation: (inEl: HTMLElement, outEl: HTMLElement) => Promise<[Animation, Animation]>;
+};
+export interface RenderQueue<I, D> extends Pick<RenderView<I, D>, 'renderItem' | 'renderLoader' | 'details'> {
+    heading?: string;
+    afterHeading?: unknown;
+    index?: number;
+    mobile?: boolean;
+    items: I[];
+    totalAvailable?: number;
+    list: TemplateResult;
+    pagination?: Pagination;
+    tabnav: RenderTabs<Tab>;
+    nav: Omit<RenderSlide<I, D>, 'renderItem' | 'renderLoader' | 'details'> & Pick<RenderView<I, D>, 'details'> & {
+        index: number;
+    };
+}
+export declare const renderQueue: <I, D>({ heading, afterHeading, index, mobile, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details, pagination: _pagination, }: RenderQueue<I, D>) => TemplateResult<1>;
+export {};
+//# sourceMappingURL=render.d.ts.map

package/dist/queue/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"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"}

package/dist/queue/render.js

@@ -0,0 +1,134 @@
+import { html, nothing } from 'lit-html';
+import { guard } from 'lit-html/directives/guard.js';
+import { lazyUntil } from '@neovici/cosmoz-utils/directives/lazy-until';
+import { t } from 'i18next';
+import { renderTabs } from '@neovici/cosmoz-tabs/next/index.js';
+import { slideInRight, slideInLeft } from '@neovici/cosmoz-slider';
+import renderStyles from './style';
+import { arrow } from './icon';
+const _emptySlide = {
+    id: 'empty',
+    content: nothing,
+    animation: slideInRight,
+};
+const emptySlide = () => _emptySlide;
+export const renderNav = ({ next, prev, }) => html ` <button
+			class="button-nav prev"
+			title="${t('Previous item')}"
+			?disabled=${!prev}
+			slot="extra"
+			@click=${prev}
+		>
+			${arrow}
+		</button>
+		<button
+			title="${t('Next item')}"
+			class="button-nav next"
+			?disabled=${!next}
+			slot="extra"
+			@click=${next}
+		>
+			${arrow}
+		</button>`;
+export const renderPagination = (pagination) => {
+    if (!pagination)
+        return nothing;
+    const { pageNumber = -1, onPage } = pagination;
+    const totalPages = pagination.totalPages ??
+        Math.ceil((pagination.totalAvailable ?? 0) / (pagination.pageSize ?? 0));
+    return html ` <div class="tabn-pagination">
+		<button
+			title="${t('Previous page')}"
+			class="button-page page-prev"
+			?disabled=${!(pageNumber > 1)}
+			@click=${(e) => onPage(e.ctrlKey ? 1 : pageNumber - 1)}
+		>
+			${arrow}
+		</button>
+		<button
+			title="${t('Next page')}"
+			class="button-page page-next"
+			?disabled=${!(pageNumber < totalPages)}
+			@click=${(e) => onPage(e.ctrlKey ? totalPages : pageNumber + 1)}
+		>
+			${arrow}
+		</button>
+	</div>`;
+};
+export const renderStats = ({ pagination, index, items, totalAvailable, nav, }) => {
+    if (items.length < 1) {
+        return nothing;
+    }
+    return html `<div class="tabn-stats">
+		${(() => {
+        if (pagination) {
+            const { pageNumber, pageSize } = pagination;
+            const size = pageSize ?? items.length;
+            const start = ((pageNumber ?? 1) - 1) * size + index + 1;
+            const end = items.length < size
+                ? pagination.totalAvailable
+                : (pageNumber ?? 1) * size;
+            return [start, end].join('-');
+        }
+        const qidx = nav.index;
+        const qlen = nav.items?.length;
+        return [
+            qlen !== items.length
+                ? [qidx < 0 ? '?' : qidx + 1, qlen].join('/')
+                : [index + 1, items.length].join('-'),
+        ];
+    })()}
+		${[t('of'), totalAvailable ?? t('many')].join(' ')}
+	</div>`;
+};
+export const renderView = ({ animationEnd$, details, item, next, prev, renderItem, renderLoader, }) => {
+    const nav = renderNav({ next, prev });
+    if (!details) {
+        return renderItem({ item, nav, next, prev, animationEnd$ });
+    }
+    const detail$ = details(item);
+    return guard([detail$, animationEnd$, next], () => lazyUntil(Promise.all([detail$, animationEnd$]).then(([item]) => renderItem({ item, nav, next, prev })), renderLoader({ item, nav })));
+};
+export const renderSlide = ({ id, forward, item, ...thru }) => item
+    ? {
+        id: id(item),
+        render: (rnd) => renderView({
+            ...rnd,
+            item,
+            ...thru,
+        }),
+        animation: forward ? slideInRight : slideInLeft,
+    }
+    : emptySlide();
+export const renderQueue = ({ heading, afterHeading, index, mobile, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details = nav?.details, pagination: _pagination, }) => {
+    const activeTab = tabnav.active?.name;
+    const pagination = _pagination
+        ? { ..._pagination, totalAvailable }
+        : undefined;
+    return html `
+		<style>
+			${renderStyles({ index, mobile })}
+		</style>
+
+		<cosmoz-tabs-next class="tabn">
+			<div class="tabn-heading">${heading}${afterHeading}</div>
+			${renderTabs({ ...tabnav, className: 'tabn-tab' })}
+			${renderStats({
+        pagination,
+        totalAvailable,
+        index,
+        items,
+        nav,
+    })}
+			${renderPagination(pagination)}
+		</cosmoz-tabs-next>
+
+		<div class="split" data-active=${activeTab}>
+			${list}
+			<cosmoz-slider
+				id="queue"
+				.slide=${renderSlide({ ...nav, renderLoader, renderItem, details })}
+			></cosmoz-slider>
+		</div>
+	`;
+};

package/dist/queue/style.d.ts

@@ -0,0 +1,7 @@
+export declare const base: string;
+declare const _default: ({ index, mobile, }: {
+    index?: number | string;
+    mobile?: boolean;
+}) => string;
+export default _default;
+//# sourceMappingURL=style.d.ts.map

package/dist/queue/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/queue/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QA2JhB,CAAC;yBAEc,oBAGb;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAND,wBA8BE"}

package/dist/queue/style.js

@@ -0,0 +1,182 @@
+import { css } from '@pionjs/pion';
+export const base = css `
+	:host {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		position: relative;
+		font-size: 14px;
+	}
+
+	.tabn {
+		--cosmoz-tabs-bg-color: var(--cz-bg-color);
+		box-shadow: none;
+		position: relative;
+		color: #959ba5;
+	}
+	.tabn-tab {
+		flex: 0 1 0.000001px;
+		flex: 0 1 min-content;
+		padding: 11px 16px;
+		background: inherit;
+	}
+	.tabn-tab:first-of-type {
+		margin-left: auto;
+	}
+	.tabn-tab[active] {
+		color: var(--cz-tabn-tab-active-color);
+		box-shadow: none;
+	}
+	.tabn-heading {
+		font-size: 17px;
+		font-weight: 600;
+		line-height: 25px;
+		color: var(--cz-tabn-heading-color, var(--cz-text-secondary-color));
+		margin-left: 18px;
+		white-space: nowrap;
+	}
+	.tabn-stats {
+		margin: 0 16px;
+		color: var(--cz-text-color);
+		white-space: nowrap;
+	}
+
+	.split {
+		display: flex;
+		flex: auto;
+		flex-direction: row;
+		min-height: 0;
+	}
+
+	.gutter {
+		cursor: col-resize;
+		flex: none;
+		display: flex;
+		background: var(--cz-queue-gutter-bg, var(--cz-header-bg-color, #fff));
+		z-index: 2;
+		position: relative;
+	}
+	.gutter::before {
+		content: '';
+		display: block;
+		flex: none;
+		background: var(--cz-queue-gutter-bg, var(--cz-header-bg-color, #bbb));
+		width: 1px;
+		margin-left: auto;
+		pointer-events: none;
+	}
+	.gutter:hover::before {
+		background: var(--cz-accent-color);
+		box-shadow: -1px 0 0 1px var(--cz-accent-color);
+	}
+	.gutter:hover::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: -2px;
+		right: -2px;
+		bottom: 0;
+	}
+
+	#list {
+		min-width: 0;
+	}
+	#list,
+	#queue {
+		flex: auto;
+	}
+
+	[data-active='split'] .view-core::part(header-bg) {
+		border-top-left-radius: 0;
+	}
+
+	[data-active='overview'] .view-core,
+	[data-active='queue'] #list {
+		display: none;
+	}
+	[data-active='overview'] #queue {
+		flex: none;
+	}
+
+	.button-nav {
+		width: 40px;
+		height: 40px;
+		cursor: pointer;
+		outline: none;
+	}
+
+	.button-nav:active {
+		background: rgba(52, 52, 52, 0.4);
+	}
+	.button-nav.prev,
+	.button-page.prev,
+	.page-prev {
+		transform: scaleX(-1);
+	}
+
+	.tabn-pagination {
+		font-size: 0;
+		display: flex;
+		border: var(--cz-pagination-border-color);
+		border-radius: var(--cz-pagination-border-radius);
+	}
+	.button-page {
+		width: 30px;
+		height: 30px;
+		padding: 0 5px;
+		cursor: pointer;
+		outline: none;
+		border: none;
+		border-radius: var(--cz-pagination-border);
+		fill: var(--cz-pagination-color);
+		position: relative;
+		background-color: transparent;
+	}
+	.button-page[disabled] {
+		opacity: 0.45;
+		pointer-events: none;
+		fill: var(--cz-pagination-inactive-color);
+	}
+
+	.button-page:active,
+	.button-page:hover {
+		fill: var(--cz-pagination-active-color);
+	}
+
+	.tabn-pagination .button-page + .button-page::before {
+		content: '';
+		position: absolute;
+		width: 1px;
+		height: 18.5px;
+		background-color: var(--cz-pagination-border-divider-color);
+		left: -0.5px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+`;
+export default ({ index, mobile, }) => css `
+	${base}
+
+	#list::part(itemRow-${index || '0'}) {
+		background: var(
+			--cosmoz-omnitable-highlight-color,
+			rgba(80, 138, 239, 0.4)
+		);
+	}
+
+	${(mobile &&
+    css `
+		.tabn-heading {
+			font-size: 14px;
+			margin-left: 12px;
+		}
+		.tabn-tab {
+			padding: 10px;
+		}
+		[name="split"] {
+			display: none;
+		}
+	}`) ||
+    ''}
+`;

package/dist/queue/test/__snapshots__/render.test.snap.d.ts

@@ -0,0 +1,2 @@
+export const snapshots: typeof snapshots;
+//# sourceMappingURL=render.test.snap.d.ts.map

package/dist/queue/test/__snapshots__/render.test.snap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.test.snap.d.ts","sourceRoot":"","sources":["../../../../src/queue/test/__snapshots__/render.test.snap.js"],"names":[],"mappings":"AACA,yCAA4B"}