@electrovir/color 1.3.0 → 1.4.0

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

@@ -0,0 +1,15 @@
+import { type ColorSyntaxName } from '../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 VirAllSpacesColorPicker: import("element-vir").DeclarativeElementDefinition<"vir-all-spaces-color-picker", {
+    color: string;
+}, {
+    inputColorString: undefined | string;
+    overrideInputColor: undefined | ColorSyntaxName;
+}, {
+    colorChange: import("element-vir").DefineEvent<string>;
+}, "vir-all-spaces-color-picker-", "vir-all-spaces-color-picker-", readonly [], readonly []>;

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

@@ -0,0 +1,67 @@
+/* node:coverage disable */
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { getColorSyntaxFromCssString } from '../color-class/color-formats.js';
+import { Color } from '../color-class/color.js';
+import { VirAllColorSpaceSliders } from './vir-all-color-space-sliders.element.js';
+import { VirColorDetails } from './vir-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 VirAllSpacesColorPicker = defineElement()({
+    tagName: 'vir-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 `
+            <${VirColorDetails.assign({
+            color: inputs.color,
+            showInput: true,
+        })}
+                ${listen(VirColorDetails.events.colorChange, (event) => {
+            updateState({
+                inputColorString: event.detail,
+                overrideInputColor: undefined,
+            });
+            dispatch(new events.colorChange(event.detail));
+        })}
+            ></${VirColorDetails}>
+            <${VirAllColorSpaceSliders.assign({ color })}
+                ${listen(VirAllColorSpaceSliders.events.colorChange, (event) => {
+            const colorSyntax = getColorSyntaxFromCssString(state.inputColorString || '#');
+            updateState({
+                overrideInputColor: colorSyntax,
+            });
+            dispatch(new events.colorChange(event.detail));
+        })}
+            ></${VirAllColorSpaceSliders}>
+        `;
+    },
+});

package/dist/index.d.ts

@@ -3,7 +3,11 @@ export * from './color-class/color-name-length.js';
 export * from './color-class/color.js';
 export * from './contrast/contrast.js';
 export * from './elements/vir-all-color-space-sliders.element.js';
+export * from './elements/vir-all-spaces-color-picker.element.js';
+export * from './elements/vir-color-details.element.js';
 export * from './elements/vir-color-format-sliders.element.js';
+export * from './elements/vir-color-pair-contrast-summary.element.js';
 export * from './elements/vir-color-pair.element.js';
 export * from './elements/vir-color-slider.element.js';
+export * from './elements/vir-color-swatch.element.js';
 export * from './elements/vir-contrast-indicator.element.js';

package/dist/index.js

@@ -3,7 +3,11 @@ export * from './color-class/color-name-length.js';
 export * from './color-class/color.js';
 export * from './contrast/contrast.js';
 export * from './elements/vir-all-color-space-sliders.element.js';
+export * from './elements/vir-all-spaces-color-picker.element.js';
+export * from './elements/vir-color-details.element.js';
 export * from './elements/vir-color-format-sliders.element.js';
+export * from './elements/vir-color-pair-contrast-summary.element.js';
 export * from './elements/vir-color-pair.element.js';
 export * from './elements/vir-color-slider.element.js';
+export * from './elements/vir-color-swatch.element.js';
 export * from './elements/vir-contrast-indicator.element.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",