vira 31.31.7 → 32.0.0

package/dist/elements/color/vira-all-color-space-sliders.element.d.ts

@@ -0,0 +1,11 @@
+import { type Color } from '@electrovir/color/dist/data/color-class/color.js';
+/**
+ * Color sliders for all color spaces.
+ *
+ * @category Elements
+ */
+export declare const ViraAllColorSpaceSliders: import("element-vir").DeclarativeElementDefinition<"vira-all-color-space-sliders", {
+    color: Readonly<Color>;
+}, {}, {
+    colorChange: import("element-vir").DefineElementEvent<string>;
+}, "vira-all-color-space-sliders-", "vira-all-color-space-sliders-", readonly [], readonly []>;

package/dist/elements/color/vira-all-color-space-sliders.element.js

@@ -0,0 +1,55 @@
+/* node:coverage disable */
+import { getObjectTypedKeys, getObjectTypedValues } from '@augment-vir/common';
+import { colorFormatsBySpace } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { ViraColorFormatSliders } from './vira-color-format-sliders.element.js';
+/**
+ * Color sliders for all color spaces.
+ *
+ * @category Elements
+ */
+export const ViraAllColorSpaceSliders = defineElement()({
+    tagName: 'vira-all-color-space-sliders',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .color-space {
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: 32px;
+            row-gap: 8px;
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent(),
+    },
+    render({ inputs, dispatch, events }) {
+        const colorSpaceTemplates = getObjectTypedValues(colorFormatsBySpace).map((colorSpaceFormats) => {
+            const formatTemplates = getObjectTypedKeys(colorSpaceFormats).map((colorFormatName) => {
+                return html `
+                            <${ViraColorFormatSliders.assign({
+                    color: inputs.color,
+                    colorFormatName,
+                    showFormatName: true,
+                })}
+                                ${listen(ViraColorFormatSliders.events.colorChange, (event) => {
+                    dispatch(new events.colorChange({
+                        detail: event.detail,
+                    }));
+                })}
+                            ></${ViraColorFormatSliders}>
+                        `;
+            });
+            return html `
+                    <section class="color-space">${formatTemplates}</section>
+                `;
+        });
+        return html `
+            ${colorSpaceTemplates}
+        `;
+    },
+});

package/dist/elements/color/vira-all-spaces-color-picker.element.d.ts

@@ -0,0 +1,15 @@
+import { type ColorSyntaxName } from '@electrovir/color/dist/data/color-class/color-formats.js';
+/**
+ * A color picker element that shows sliders for all supported color spaces at once, as well as all
+ * the values for all supported color spaces in a table.
+ *
+ * @category Elements
+ */
+export declare const ViraAllSpacesColorPicker: import("element-vir").DeclarativeElementDefinition<"vira-all-spaces-color-picker", {
+    color: string;
+}, {
+    inputColorString: undefined | string;
+    overrideInputColor: undefined | ColorSyntaxName;
+}, {
+    colorChange: import("element-vir").DefineElementEvent<string>;
+}, "vira-all-spaces-color-picker-", "vira-all-spaces-color-picker-", readonly [], readonly []>;

package/dist/elements/color/vira-all-spaces-color-picker.element.js

@@ -0,0 +1,73 @@
+/* node:coverage disable */
+import { getColorSyntaxFromCssString, } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { Color } from '@electrovir/color/dist/data/color-class/color.js';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { ViraAllColorSpaceSliders } from './vira-all-color-space-sliders.element.js';
+import { ViraColorDetails } from './vira-color-details.element.js';
+/**
+ * A color picker element that shows sliders for all supported color spaces at once, as well as all
+ * the values for all supported color spaces in a table.
+ *
+ * @category Elements
+ */
+export const ViraAllSpacesColorPicker = defineElement()({
+    tagName: 'vira-all-spaces-color-picker',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent(),
+    },
+    state() {
+        return {
+            inputColorString: undefined,
+            overrideInputColor: undefined,
+        };
+    },
+    render({ inputs, dispatch, events, state, updateState }) {
+        const color = new Color(inputs.color);
+        if (state.overrideInputColor) {
+            updateState({
+                inputColorString: color.toCss()[state.overrideInputColor],
+            });
+        }
+        if (state.inputColorString == undefined) {
+            updateState({
+                inputColorString: inputs.color,
+            });
+        }
+        return html `
+            <${ViraColorDetails.assign({
+            color: inputs.color,
+            showInput: true,
+        })}
+                ${listen(ViraColorDetails.events.colorChange, (event) => {
+            updateState({
+                inputColorString: event.detail,
+                overrideInputColor: undefined,
+            });
+            dispatch(new events.colorChange({
+                detail: event.detail,
+            }));
+        })}
+            ></${ViraColorDetails}>
+            <${ViraAllColorSpaceSliders.assign({
+            color,
+        })}
+                ${listen(ViraAllColorSpaceSliders.events.colorChange, (event) => {
+            const colorSyntax = getColorSyntaxFromCssString(state.inputColorString || '#');
+            updateState({
+                overrideInputColor: colorSyntax,
+            });
+            dispatch(new events.colorChange({
+                detail: event.detail,
+            }));
+        })}
+            ></${ViraAllColorSpaceSliders}>
+        `;
+    },
+});

package/dist/elements/color/vira-color-details.element.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A color swatch alongside the color in all of its different supported formats.
+ *
+ * @category Internal
+ */
+export declare const ViraColorDetails: import("element-vir").DeclarativeElementDefinition<"vira-color-details", {
+    color: string;
+    /** Show a text input that triggers an event when it is edited, for changing the color. */
+    showInput: boolean;
+}, {
+    inputColorString: undefined | string;
+}, {
+    colorChange: import("element-vir").DefineElementEvent<string>;
+}, "vira-color-details-", "vira-color-details-", readonly [], readonly []>;

package/dist/elements/color/vira-color-details.element.js

@@ -0,0 +1,153 @@
+/* node:coverage disable */
+import { check } from '@augment-vir/assert';
+import { getObjectTypedEntries, mapObject } from '@augment-vir/common';
+import { ColorSyntaxName } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { Color } from '@electrovir/color/dist/data/color-class/color.js';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { viraFontCssVars } from '../../styles/font.js';
+import { noNativeSpacing } from '../../styles/native-styles.js';
+import { defineTable } from '../../util/define-table.js';
+import { ViraInput } from '../vira-input.element.js';
+import { ViraColorSwatch } from './vira-color-swatch.element.js';
+const omittedColors = [
+    ColorSyntaxName.hex,
+    ColorSyntaxName.name,
+];
+/**
+ * A color swatch alongside the color in all of its different supported formats.
+ *
+ * @category Internal
+ */
+export const ViraColorDetails = defineElement()({
+    tagName: 'vira-color-details',
+    styles: css `
+        :host {
+            display: flex;
+            gap: 16px;
+        }
+
+        ${ViraColorSwatch} {
+            height: 200px;
+            width: 200px;
+        }
+
+        .swatch {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            align-items: center;
+        }
+
+        ${ViraInput} {
+            font-size: 14px;
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+            max-width: 200px;
+        }
+
+        td {
+            font-weight: bold;
+        }
+
+        th {
+            padding: 4px 8px;
+            font-weight: normal;
+            text-align: right;
+        }
+        pre {
+            ${noNativeSpacing};
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent(),
+    },
+    state() {
+        return {
+            inputColorString: undefined,
+        };
+    },
+    render({ inputs, dispatch, events, state, updateState }) {
+        const color = new Color(inputs.color);
+        const colorStrings = mapObject(color.toFormattedStrings(), (key, value) => {
+            if (check.hasValue(omittedColors, key)) {
+                return undefined;
+            }
+            else if (key === 'hexString') {
+                return {
+                    key: 'hex',
+                    value,
+                };
+            }
+            else {
+                return {
+                    key,
+                    value,
+                };
+            }
+        });
+        if (state.inputColorString == undefined) {
+            updateState({
+                inputColorString: inputs.color,
+            });
+        }
+        const { rows } = defineTable({
+            headers: [
+                {
+                    key: 'colorFormat',
+                },
+                {
+                    key: 'formattedString',
+                },
+            ],
+            originalData: getObjectTypedEntries(colorStrings),
+            dataMap([colorFormat, value,]) {
+                return {
+                    colorFormat: `${colorFormat}:`,
+                    formattedString: html `
+                        <pre>${value}</pre>
+                    `,
+                };
+            },
+        });
+        const inputTemplate = inputs.showInput
+            ? html `
+                  <${ViraInput.assign({
+                value: state.inputColorString || '',
+                fitText: true,
+            })}
+                      ${listen(ViraInput.events.valueChange, (event) => {
+                updateState({
+                    inputColorString: event.detail,
+                });
+                dispatch(new events.colorChange({
+                    detail: event.detail,
+                }));
+            })}
+                  ></${ViraInput}>
+              `
+            : '';
+        return html `
+            <div class="swatch">
+                <${ViraColorSwatch.assign({
+            backgroundColor: inputs.color,
+        })}></${ViraColorSwatch}>
+                ${inputTemplate}
+            </div>
+            <table>
+                <tbody>
+                    ${rows.map((row) => {
+            const cells = row.cells.map((cell, index) => {
+                const element = index ? 'td' : 'th';
+                return html `
+                                <${element}>${cell.content}</${element}>
+                            `;
+            });
+            return html `
+                            <tr>${cells}</tr>
+                        `;
+        })}
+                </tbody>
+            </table>
+        `;
+    },
+});

package/dist/elements/color/vira-color-format-sliders.element.d.ts

@@ -0,0 +1,14 @@
+import { type ColorFormatName } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { type Color } from '@electrovir/color/dist/data/color-class/color.js';
+/**
+ * Color sliders for all coordinates within a specific color format.
+ *
+ * @category Elements
+ */
+export declare const ViraColorFormatSliders: import("element-vir").DeclarativeElementDefinition<"vira-color-format-sliders", {
+    color: Readonly<Color>;
+    colorFormatName: ColorFormatName;
+    showFormatName: boolean;
+}, {}, {
+    colorChange: import("element-vir").DefineElementEvent<string>;
+}, "vira-color-format-sliders-", "vira-color-format-sliders-", readonly [], readonly []>;

package/dist/elements/color/vira-color-format-sliders.element.js

@@ -0,0 +1,60 @@
+/* node:coverage disable */
+import { getObjectTypedKeys } from '@augment-vir/common';
+import { colorFormats, } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
+import { noNativeSpacing } from '../../styles/native-styles.js';
+import { ViraColorSlider } from './vira-color-slider.element.js';
+/**
+ * Color sliders for all coordinates within a specific color format.
+ *
+ * @category Elements
+ */
+export const ViraColorFormatSliders = defineElement()({
+    tagName: 'vira-color-format-sliders',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        h3 {
+            ${noNativeSpacing};
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent(),
+    },
+    render({ inputs, dispatch, events }) {
+        const colorFormat = colorFormats[inputs.colorFormatName];
+        const coordinateTemplates = getObjectTypedKeys(colorFormat.coords).map((colorCoordinate) => {
+            return html `
+                    <${ViraColorSlider.assign({
+                color: inputs.color,
+                colorCoordinateName: colorCoordinate,
+                colorFormatName: inputs.colorFormatName,
+            })}
+                        ${listen(ViraColorSlider.events.valueChange, (event) => {
+                const newColor = inputs.color.clone();
+                newColor.set({
+                    [inputs.colorFormatName]: {
+                        [colorCoordinate]: event.detail,
+                    },
+                });
+                const newValue = newColor.toCss()[colorFormat.conversionFormat];
+                dispatch(new events.colorChange({
+                    detail: newValue,
+                }));
+            })}
+                    ></${ViraColorSlider}>
+                `;
+        });
+        return html `
+            ${inputs.showFormatName
+            ? html `
+                      <h3>${inputs.colorFormatName}</h3>
+                  `
+            : nothing}
+            ${coordinateTemplates}
+        `;
+    },
+});

package/dist/elements/color/vira-color-pair-contrast-summary.element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A huge summary of a color pair's contrast levels, font sizes, font weights, etc.
+ *
+ * @category Elements
+ */
+export declare const ViraColorPairContrastSummary: import("element-vir").DeclarativeElementDefinition<"vira-color-pair-contrast-summary", {
+    foregroundColor: string;
+    backgroundColor: string;
+}, {}, {}, "vira-color-pair-contrast-summary-", "vira-color-pair-contrast-summary-", readonly [], readonly []>;