vira 32.0.0-beta.0 → 32.1.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/{src/elements/color/vira-color-details.element.ts → dist/elements/color/vira-color-details.element.js}

@@ -1,33 +1,26 @@
 /* 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[] = [
+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<{
-    color: string;
-    /** Show a text input that triggers an event when it is edited, for changing the color. */
-    showInput: boolean;
-}>()({
+export const ViraColorDetails = defineElement()({
     tagName: 'vira-color-details',
-    styles: css`
+    styles: css `
         :host {
             display: flex;
             gap: 16px;
@@ -66,38 +59,38 @@ export const ViraColorDetails = defineElement<{
         }
     `,
     events: {
-        colorChange: defineElementEvent<string>(),
+        colorChange: defineElementEvent(),
     },
     state() {
         return {
-            inputColorString: undefined as undefined | string,
+            inputColorString: undefined,
         };
     },
-    render({inputs, dispatch, events, state, updateState}) {
+    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') {
+            }
+            else if (key === 'hexString') {
                 return {
                     key: 'hex',
                     value,
                 };
-            } else {
+            }
+            else {
                 return {
                     key,
                     value,
                 };
             }
         });
-
         if (state.inputColorString == undefined) {
             updateState({
                 inputColorString: inputs.color,
             });
         }
-
-        const {rows} = defineTable({
+        const { rows } = defineTable({
             headers: [
                 {
                     key: 'colorFormat',
@@ -107,61 +100,52 @@ export const ViraColorDetails = defineElement<{
                 },
             ],
             originalData: getObjectTypedEntries(colorStrings),
-            dataMap: ([
-                colorFormat,
-                value,
-            ]) => {
+            dataMap([colorFormat, value,]) {
                 return {
                     colorFormat: `${colorFormat}:`,
-                    formattedString: html`
+                    formattedString: html `
                         <pre>${value}</pre>
                     `,
                 };
             },
         });
-
         const inputTemplate = inputs.showInput
-            ? html`
+            ? html `
                   <${ViraInput.assign({
-                      value: state.inputColorString || '',
-                      fitText: true,
-                  })}
+                value: state.inputColorString || '',
+                fitText: true,
+            })}
                       ${listen(ViraInput.events.valueChange, (event) => {
-                          updateState({
-                              inputColorString: event.detail,
-                          });
-                          dispatch(
-                              new events.colorChange({
-                                  detail: event.detail,
-                              }),
-                          );
-                      })}
+                updateState({
+                    inputColorString: event.detail,
+                });
+                dispatch(new events.colorChange({
+                    detail: event.detail,
+                }));
+            })}
                   ></${ViraInput}>
               `
             : '';
-
-        return html`
+        return html `
             <div class="swatch">
                 <${ViraColorSwatch.assign({
-                    backgroundColor: inputs.color,
-                })}></${ViraColorSwatch}>
+            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`
+            const cells = row.cells.map((cell, index) => {
+                const element = index ? 'td' : 'th';
+                return html `
                                 <${element}>${cell.content}</${element}>
                             `;
-                        });
-
-                        return html`
+            });
+            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 []>;