@electrovir/color/dist/demo/vir-demo.element.js

A wrapper for culori with an extremely simple API.

/* node:coverage disable */
import { ElementBookApp } from 'element-book';
import { css, defineElement, html } from 'element-vir';
import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
import { allBookPages } from './all-book-pages.js';
export const VirDemo = defineElement()({
    tagName: 'vir-demo',
    styles: css `
        :host {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        ${ElementBookApp} {
            flex-grow: 1;
            max-width: 100%;
            box-sizing: border-box;
        }

        h1 {
            ${noNativeSpacing};
            font-size: 16px;
            margin-bottom: 16px;
            text-align: center;
        }
    `,
    render() {
        return html `
            <${ElementBookApp.assign({
            pages: allBookPages,
            internalRouterConfig: {
                useInternalRouter: true,
                basePath: 'color',
            },
        })}>
                <h1 slot=${ElementBookApp.slotNames.navHeader}>@electrovir/color</h1>
            </${ElementBookApp}>
        `;
    },
});