element-book/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.js

An [`element-vir`](https://npmjs.com/package/element-vir) drop-in element for building, testing, and demonstrating a collection of elements (or, in other words, a design system).

import { omitObjectKeys } from '@augment-vir/common';
import { css, html } from 'element-vir';
import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
import { defineBookElement } from '../../define-book-element.js';
import { BookElementExampleControls } from './book-element-example-controls.element.js';
import { BookElementExampleViewer } from './book-element-example-viewer.element.js';
export const BookElementExampleWrapper = defineBookElement()({
    tagName: 'book-element-example-wrapper',
    styles: css `
        :host {
            display: inline-block;
            max-width: 100%;
        }

        .examples-wrapper {
            display: flex;
            gap: 32px;
            flex-wrap: wrap;
        }

        .error {
            color: red;
            font-weight: bold;
        }

        .individual-example-wrapper {
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-width: 100%;
            align-items: flex-start;
        }

        ${BookElementExampleControls} {
            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
        }

        :host(:hover) ${BookElementExampleControls} {
            color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
        }
    `,
    render({ inputs }) {
        return html `
            <div class="individual-example-wrapper">
                <${BookElementExampleControls.assign(omitObjectKeys(inputs, ['currentPageControls']))}></${BookElementExampleControls}>
                <${BookElementExampleViewer.assign(inputs)}></${BookElementExampleViewer}>
            </div>
        `;
    },
});