tweak-ui 0.4.3 → 0.5.0

package/dist/lib/components/controls/angle.js

@@ -0,0 +1,201 @@
+import m from 'mithril';
+import { component, getValue, renderModel, setValue, } from '../../core';
+import { call, clamp, cssClass, dragUtil, getTouchInTarget, twuiClass } from '../../core/utils';
+const TYPE = 'angle';
+const AngleComponent = (vnode) => {
+    let angle = 0;
+    let dragged = false;
+    let pos = [0, 0];
+    function toDeg(value) {
+        return value * (180 / Math.PI);
+    }
+    function toRad(value) {
+        return value * (Math.PI / 180);
+    }
+    function toScreen(value) {
+        return clamp((value / 2 + 0.5) * 100, 0, 100);
+    }
+    function fetchValue(node) {
+        var _a;
+        const data = node.attrs.data;
+        angle = (_a = getValue(data)) !== null && _a !== void 0 ? _a : angle;
+        if (data.degree) {
+            angle = toRad(angle);
+        }
+        updatePositions();
+    }
+    function onChange(type) {
+        updatePositions();
+        const data = vnode.attrs.data;
+        const value = data.degree ? toRad(angle) : angle;
+        const written = setValue(data, value);
+        call(type === 'input' ? data.onInput : data.onChange, data, written);
+    }
+    function updatePositions() {
+        pos[0] = Math.cos(angle);
+        pos[1] = Math.sin(angle);
+    }
+    function onStartPhi(e) {
+        dragged = true;
+        drag.activate(e);
+    }
+    let touchOffset;
+    const drag = dragUtil({
+        onStart: (e) => {
+            const touch = getTouchInTarget(e);
+            touchOffset = [
+                -(touch.x - touch.width / 2),
+                -(touch.y - touch.height / 2),
+            ];
+            drag.onMove(e);
+        },
+        onMove: (e) => {
+            e.preventDefault();
+            const position = getTouchInTarget(e, drag.target.parentElement, touchOffset);
+            const px = position.normalizedX - 0.5;
+            const py = position.normalizedY - 0.5;
+            if (dragged) {
+                // [-PI;PI]
+                angle = Math.atan2(px, py);
+                // convert to range [0;2PI]
+                angle += angle < 0 ? 2 * Math.PI : 0;
+            }
+            onChange('input');
+            m.redraw();
+        },
+        onEnd: (e) => {
+            drag.deactivate();
+            dragged = false;
+            onChange('change');
+            m.redraw();
+        },
+    });
+    function onPhiInput(model, value) {
+        angle = toRad(value);
+        onChange('input');
+    }
+    function onPhiChange(model, value) {
+        angle = toRad(value);
+        onChange('change');
+    }
+    return {
+        onremove: () => {
+            drag.deactivate();
+        },
+        oninit: (node) => {
+            fetchValue(node);
+        },
+        onupdate: (node) => {
+            fetchValue(node);
+        },
+        view: () => {
+            return m('div', {
+                class: twuiClass(TYPE),
+                style: {
+                    '--angle-value': `${toDeg(-angle) + 90}deg`,
+                    '--angle-percent': `${(toDeg(angle) / 360) * 100}%`,
+                },
+            }, m('div.left-container', m('div.pane', {
+                style: {
+                    position: 'relative',
+                    width: '100%',
+                    'padding-top': '100%',
+                },
+            }, m('div.angle-pane', {
+                class: cssClass({
+                    'is-dragging': dragged,
+                }),
+                style: {
+                    position: 'absolute',
+                    top: '0.5rem',
+                    left: '0.5rem',
+                    width: 'calc(100% - 1rem)',
+                    height: 'calc(100% - 1rem)',
+                },
+            }, m('div.angle-knob', {
+                onmousedown: onStartPhi,
+                ontouchstart: onStartPhi,
+                style: {
+                    position: 'absolute',
+                    width: '15px',
+                    height: '15px',
+                    top: `calc(${toScreen(pos[0])}% - 7px)`,
+                    left: `calc(${toScreen(pos[1])}% - 7px)`,
+                },
+            })))), m('div.right-container', m('label', m.trust('&alpha;')), renderModel({
+                type: 'number',
+                min: 0,
+                max: 360,
+                step: 0.1,
+                value: toDeg(angle),
+                onInput: onPhiInput,
+                onChange: onPhiChange,
+            })));
+        },
+    };
+};
+component(TYPE, AngleComponent);
+export function angleCodec({ axes, length, result } = {}) {
+    axes = axes || { x: 'right', y: 'up' };
+    const keys = Object.keys(axes);
+    const radius = () => {
+        return (typeof length === 'function' ? length() : length) || 1;
+    };
+    return {
+        decode: (value) => {
+            let x = 0;
+            let y = 0;
+            for (const key of keys) {
+                switch (axes[key]) {
+                    case 'right':
+                        y = value[key];
+                        break;
+                    case 'left':
+                        y = -value[key];
+                        break;
+                    case 'up':
+                    case 'front':
+                        x = -value[key];
+                        break;
+                    case 'down':
+                    case 'back':
+                        x = value[key];
+                    default:
+                        break;
+                }
+            }
+            const r = radius();
+            x /= r;
+            y /= r;
+            return Math.atan2(y, x) || 0;
+        },
+        encode: (angle) => {
+            const r = radius();
+            const x = r * Math.cos(angle);
+            const y = r * Math.sin(angle);
+            const value = result() || {};
+            for (const key of keys) {
+                switch (axes[key]) {
+                    case 'right':
+                        value[key] = y;
+                        break;
+                    case 'left':
+                        value[key] = -y;
+                        break;
+                    case 'up':
+                    case 'front':
+                        value[key] = -x;
+                        break;
+                    case 'down':
+                    case 'back':
+                        value[key] = x;
+                        break;
+                    default:
+                        break;
+                }
+            }
+            return value;
+        },
+    };
+}
+//# sourceMappingURL=angle.js.map

package/dist/lib/components/controls/angle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/angle.ts"],"names":[],"mappings":"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","sourcesContent":["import m, { FactoryComponent } from 'mithril'\r\n\r\nimport {\r\n  component,\r\n  getValue,\r\n  renderModel,\r\n  setValue,\r\n  ComponentModel,\r\n  ValueSource,\r\n  ComponentAttrs,\r\n  ValueCodec,\r\n} from '../../core'\r\nimport { call, clamp, cssClass, dragUtil, getTouchInTarget, twuiClass } from '../../core/utils'\r\nimport type { NumberModel } from './number'\r\nimport { Direction } from './spherical'\r\n\r\n/**\r\n * Spherical component attributes\r\n * @public\r\n */\r\nexport type AngleAttrs = ComponentAttrs<AngleModel>\r\n\r\n/**\r\n * Spherical component model\r\n * @public\r\n */\r\nexport interface AngleModel<T = unknown> extends ComponentModel, ValueSource<T, number> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'angle'\r\n  /**\r\n   * Whether to use degrees instead of radians\r\n   */\r\n  degree?: boolean\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: AngleModel<T>, value: unknown) => void\r\n  /**\r\n   * This is called once the control value is committed by the user.\r\n   *\r\n   * @remarks\r\n   * Unlike the `onInput` callback, this is not necessarily called for each value change.\r\n   */\r\n  onChange?: (model: AngleModel<T>, value: unknown) => void\r\n}\r\n\r\nconst TYPE = 'angle'\r\nconst AngleComponent: FactoryComponent<AngleAttrs> = (vnode) => {\r\n  let angle = 0\r\n  let dragged = false\r\n  let pos = [0, 0]\r\n\r\n  function toDeg(value: number) {\r\n    return value * (180 / Math.PI)\r\n  }\r\n  function toRad(value: number) {\r\n    return value * (Math.PI / 180)\r\n  }\r\n  function toScreen(value: number) {\r\n    return clamp((value / 2 + 0.5) * 100, 0, 100)\r\n  }\r\n\r\n  function fetchValue(node: m.Vnode<AngleAttrs>) {\r\n    const data = node.attrs.data\r\n    angle = getValue(data) ?? angle\r\n    if (data.degree) {\r\n      angle = toRad(angle)\r\n    }\r\n    updatePositions()\r\n  }\r\n\r\n  function onChange(type: 'change' | 'input') {\r\n    updatePositions()\r\n    const data = vnode.attrs.data\r\n    const value = data.degree ? toRad(angle) : angle\r\n    const written = setValue(data, value)\r\n    call(type === 'input' ? data.onInput : data.onChange, data, written)\r\n  }\r\n\r\n  function updatePositions() {\r\n    pos[0] = Math.cos(angle)\r\n    pos[1] = Math.sin(angle)\r\n  }\r\n\r\n  function onStartPhi(e: MouseEvent) {\r\n    dragged = true\r\n    drag.activate(e)\r\n  }\r\n\r\n  let touchOffset: [number, number]\r\n  const drag = dragUtil({\r\n    onStart: (e) => {\r\n      const touch = getTouchInTarget(e)\r\n      touchOffset = [\r\n        -(touch.x - touch.width / 2),\r\n        -(touch.y - touch.height / 2),\r\n      ]\r\n      drag.onMove(e)\r\n    },\r\n    onMove: (e) => {\r\n      e.preventDefault()\r\n\r\n      const position = getTouchInTarget(e, drag.target.parentElement, touchOffset)\r\n      const px = position.normalizedX - 0.5\r\n      const py = position.normalizedY - 0.5\r\n      if (dragged) {\r\n        // [-PI;PI]\r\n        angle = Math.atan2(px, py)\r\n        // convert to range [0;2PI]\r\n        angle += angle < 0 ? 2 * Math.PI : 0\r\n      }\r\n      onChange('input')\r\n      m.redraw()\r\n    },\r\n    onEnd: (e) => {\r\n      drag.deactivate()\r\n      dragged = false\r\n      onChange('change')\r\n      m.redraw()\r\n    },\r\n  })\r\n\r\n  function onPhiInput(model: unknown, value: number) {\r\n    angle = toRad(value)\r\n    onChange('input')\r\n  }\r\n  function onPhiChange(model: unknown, value: number) {\r\n    angle = toRad(value)\r\n    onChange('change')\r\n  }\r\n\r\n  return {\r\n    onremove: () => {\r\n      drag.deactivate()\r\n    },\r\n    oninit: (node) => {\r\n      fetchValue(node)\r\n    },\r\n    onupdate: (node) => {\r\n      fetchValue(node)\r\n    },\r\n    view: () => {\r\n      return m(\r\n        'div',\r\n        {\r\n          class: twuiClass(TYPE),\r\n          style: {\r\n            '--angle-value': `${toDeg(-angle) + 90}deg`,\r\n            '--angle-percent': `${(toDeg(angle) / 360) * 100}%`,\r\n          },\r\n        },\r\n        m(\r\n          'div.left-container',\r\n          m(\r\n            'div.pane',\r\n            {\r\n              style: {\r\n                position: 'relative',\r\n                width: '100%',\r\n                'padding-top': '100%',\r\n              },\r\n            },\r\n            m(\r\n              'div.angle-pane',\r\n              {\r\n                class: cssClass({\r\n                  'is-dragging': dragged,\r\n                }),\r\n                style: {\r\n                  position: 'absolute',\r\n                  top: '0.5rem',\r\n                  left: '0.5rem',\r\n                  width: 'calc(100% - 1rem)',\r\n                  height: 'calc(100% - 1rem)',\r\n                },\r\n              },\r\n              m('div.angle-knob', {\r\n                onmousedown: onStartPhi,\r\n                ontouchstart: onStartPhi,\r\n                style: {\r\n                  position: 'absolute',\r\n                  width: '15px',\r\n                  height: '15px',\r\n                  top: `calc(${toScreen(pos[0])}% - 7px)`,\r\n                  left: `calc(${toScreen(pos[1])}% - 7px)`,\r\n                },\r\n              }),\r\n            ),\r\n          ),\r\n        ),\r\n        m(\r\n          'div.right-container',\r\n          m('label', m.trust('&alpha;')),\r\n          renderModel<NumberModel>({\r\n            type: 'number',\r\n            min: 0,\r\n            max: 360,\r\n            step: 0.1,\r\n            value: toDeg(angle),\r\n            onInput: onPhiInput,\r\n            onChange: onPhiChange,\r\n          }),\r\n        ),\r\n      )\r\n    },\r\n  }\r\n}\r\n\r\ncomponent<AngleAttrs>(TYPE, AngleComponent)\r\n\r\nexport interface AngleCodecOptions<T> {\r\n  /**\r\n   * Maps object keys to cartesian axes. Defaults to `{ x: 'right', y: 'up' }`\r\n   */\r\n  axes?: Record<string | number, Direction>\r\n  /**\r\n   * The vector length (circle radius). Defaults to `1`\r\n   */\r\n  length?: number | (() => number)\r\n  /**\r\n   * Gets the objec where the result should be stored. May return a new instance.\r\n   */\r\n  result?: () => T\r\n}\r\n\r\nexport function angleCodec(): ValueCodec<{ x: number; y: number }, number>\r\nexport function angleCodec<T>(options: AngleCodecOptions<T>): ValueCodec<T, number>\r\nexport function angleCodec({ axes, length, result }: AngleCodecOptions<any> = {}): ValueCodec<\r\n  any,\r\n  number\r\n> {\r\n  axes = axes || { x: 'right', y: 'up'}\r\n  const keys = Object.keys(axes)\r\n  const radius = () => {\r\n    return (typeof length === 'function' ? length() : length) || 1\r\n  }\r\n  return {\r\n    decode: (value: any) => {\r\n      let x: number = 0\r\n      let y: number = 0\r\n      for (const key of keys) {\r\n        switch (axes[key]) {\r\n          case 'right':\r\n            y = value[key]\r\n            break\r\n          case 'left':\r\n            y = -value[key]\r\n            break\r\n          case 'up':\r\n          case 'front':\r\n            x = -value[key]\r\n            break\r\n          case 'down':\r\n          case 'back':\r\n            x = value[key]\r\n          default:\r\n            break\r\n        }\r\n      }\r\n      const r = radius()\r\n      x /= r\r\n      y /= r\r\n      return Math.atan2(y, x) || 0\r\n    },\r\n    encode: (angle) => {\r\n      const r = radius()\r\n      const x = r * Math.cos(angle)\r\n      const y = r * Math.sin(angle)\r\n      const value = result() || {}\r\n      for (const key of keys) {\r\n        switch (axes[key]) {\r\n          case 'right':\r\n            value[key] = y\r\n            break\r\n          case 'left':\r\n            value[key] = -y\r\n            break\r\n          case 'up':\r\n          case 'front':\r\n            value[key] = -x\r\n            break\r\n          case 'down':\r\n          case 'back':\r\n            value[key] = x\r\n            break\r\n          default:\r\n            break\r\n        }\r\n      }\r\n      return value\r\n    },\r\n  }\r\n}\r\n"]}

package/dist/lib/components/controls/checkbox.d.ts

@@ -1,29 +1,29 @@
-import { ValueSource, ComponentAttrs, ComponentModel } from '../../core';
-/**
- * Checkbox component attrs
- * @public
- */
-export declare type CheckboxAttrs = ComponentAttrs<CheckboxModel>;
-/**
- * Describes a checkbox control
- * @public
- */
-export interface CheckboxModel<T = unknown> extends ComponentModel, ValueSource<T, boolean> {
-    /**
-     * The type name of the control
-     */
-    type: 'checkbox';
-    /**
-     * This is called when the control value changes
-     */
-    onChange?: (model: CheckboxModel, value: unknown) => void;
-    /**
-     * Text behind the checkbox or inside the buttn
-     */
-    text?: string;
-    /**
-     * Disables the control input
-     */
-    disabled?: boolean;
-}
+import { ValueSource, ComponentAttrs, ComponentModel } from '../../core';
+/**
+ * Checkbox component attrs
+ * @public
+ */
+export type CheckboxAttrs = ComponentAttrs<CheckboxModel>;
+/**
+ * Describes a checkbox control
+ * @public
+ */
+export interface CheckboxModel<T = unknown> extends ComponentModel, ValueSource<T, boolean> {
+    /**
+     * The type name of the control
+     */
+    type: 'checkbox';
+    /**
+     * This is called when the control value changes
+     */
+    onChange?: (model: CheckboxModel, value: unknown) => void;
+    /**
+     * Text behind the checkbox or inside the buttn
+     */
+    text?: string;
+    /**
+     * Disables the control input
+     */
+    disabled?: boolean;
+}
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/lib/components/controls/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/checkbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,WAAW,EACX,cAAc,EACd,cAAc,EACf,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,oBAAY,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEzD;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CACxC,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/checkbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,WAAW,EACX,cAAc,EACd,cAAc,EACf,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEzD;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CACxC,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/lib/components/controls/checkbox.js

@@ -0,0 +1,31 @@
+import m from 'mithril';
+import { getValue, component, setValue, } from '../../core';
+import { call, twuiClass, cssClass, viewFn } from '../../core/utils';
+const TYPE = 'checkbox';
+const CheckboxComponent = (node) => {
+    function onChange(e) {
+        const data = node.attrs.data;
+        const checked = e.target.checked;
+        const written = setValue(data, checked);
+        call(data.onChange, data, written);
+    }
+    return {
+        view: viewFn((data) => {
+            const checked = getValue(data) === true;
+            return m('label', {
+                class: cssClass({
+                    [twuiClass(TYPE)]: true,
+                    checked: checked,
+                    disabled: data.disabled,
+                }),
+            }, m('input', {
+                type: 'checkbox',
+                checked: checked,
+                onchange: onChange,
+                disabled: data.disabled,
+            }), data.text);
+        }),
+    };
+};
+component(TYPE, CheckboxComponent);
+//# sourceMappingURL=checkbox.js.map

package/dist/lib/components/controls/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,CAAuB,MAAM,SAAS,CAAA;AAE7C,OAAO,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GAIT,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAiCpE,MAAM,IAAI,GAAG,UAAU,CAAA;AACvB,MAAM,iBAAiB,GAAoC,CAAC,IAAI,EAAE,EAAE;IAClE,SAAS,QAAQ,CAAC,CAAQ;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;QACtD,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAA;IACpC,CAAC;IACD,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;YACvC,OAAO,CAAC,CACN,OAAO,EACP;gBACE,KAAK,EAAE,QAAQ,CAAC;oBACd,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI;oBACvB,OAAO,EAAE,OAAO;oBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC;aACH,EACD,CAAC,CAAC,OAAO,EAAE;gBACT,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,OAAO;gBAChB,QAAQ,EAAE,QAAQ;gBAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,EACF,IAAI,CAAC,IAAI,CACV,CAAA;QACH,CAAC,CAAC;KACH,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAA","sourcesContent":["import m, { FactoryComponent } from 'mithril'\r\n\r\nimport {\r\n  getValue,\r\n  component,\r\n  setValue,\r\n  ValueSource,\r\n  ComponentAttrs,\r\n  ComponentModel,\r\n} from '../../core'\r\nimport { call, twuiClass, cssClass, viewFn } from '../../core/utils'\r\n\r\n/**\r\n * Checkbox component attrs\r\n * @public\r\n */\r\nexport type CheckboxAttrs = ComponentAttrs<CheckboxModel>\r\n\r\n/**\r\n * Describes a checkbox control\r\n * @public\r\n */\r\nexport interface CheckboxModel<T = unknown>\r\n  extends ComponentModel,\r\n    ValueSource<T, boolean> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'checkbox'\r\n  /**\r\n   * This is called when the control value changes\r\n   */\r\n  onChange?: (model: CheckboxModel, value: unknown) => void\r\n  /**\r\n   * Text behind the checkbox or inside the buttn\r\n   */\r\n  text?: string\r\n  /**\r\n   * Disables the control input\r\n   */\r\n  disabled?: boolean\r\n}\r\n\r\nconst TYPE = 'checkbox'\r\nconst CheckboxComponent: FactoryComponent<CheckboxAttrs> = (node) => {\r\n  function onChange(e: Event) {\r\n    const data = node.attrs.data\r\n    const checked = (e.target as HTMLInputElement).checked\r\n    const written = setValue(data, checked)\r\n    call(data.onChange, data, written)\r\n  }\r\n  return {\r\n    view: viewFn((data) => {\r\n      const checked = getValue(data) === true\r\n      return m(\r\n        'label',\r\n        {\r\n          class: cssClass({\r\n            [twuiClass(TYPE)]: true,\r\n            checked: checked,\r\n            disabled: data.disabled,\r\n          }),\r\n        },\r\n        m('input', {\r\n          type: 'checkbox',\r\n          checked: checked,\r\n          onchange: onChange,\r\n          disabled: data.disabled,\r\n        }),\r\n        data.text,\r\n      )\r\n    }),\r\n  }\r\n}\r\n\r\ncomponent(TYPE, CheckboxComponent)\r\n"]}

package/dist/lib/components/controls/color-picker.d.ts

@@ -1,57 +1,57 @@
-import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
-/**
- * Color picker component attributes
- *
- * @public
- */
-export declare type ColorPickerAttrs = ComponentAttrs<ColorPickerModel>;
-/**
- * Color picker component model
- *
- * @public
- */
-export interface ColorPickerModel<T = unknown, V = number | string | number[]> extends ComponentModel, ValueSource<T, V> {
-    /**
-     * The type name of the control
-     */
-    type: 'color-picker';
-    /**
-     * If `target` and `property` are not set, then this is used as the control value
-     *
-     * @remarks
-     * The format is determined by the `format` property.
-     *
-     * It is allowed to omit the '#' character but the '#' will be added on change
-     *
-     * It is allowed to use single character form per component (#f00 instead of #ff0000)
-     * but it will always be written back as #ff0000 on change
-     */
-    value?: V;
-    /**
-     * The format of the string value. Defaults to 'rgb'
-     *
-     * @remarks
-     * This must be a combination of the letters `r`, `g`, `b` and `a`.
-     *
-     * A prefix of `#` indicates the input/output is a hex string. e.g. #rgba
-     *
-     * A prefix of `0x` indicates the input is a number. e.g. 0xrgba
-     *
-     * A prefix of `[]` indicates the input is an array of numbers. e.g. `[]rgba`
-     *
-     * If a prefix is missing `#` is assumed
-     */
-    format?: string;
-    /**
-     * This is called when the control value has been changed.
-     */
-    onInput?: (model: ColorPickerModel<T, V>, value: unknown) => void;
-    /**
-     * This is called once the control value is committed by the user.
-     *
-     * @remarks
-     * Unlike the `onInput` callback, this is not necessarily called for each value change.
-     */
-    onChange?: (model: ColorPickerModel<T, V>, value: unknown) => void;
-}
+import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
+/**
+ * Color picker component attributes
+ *
+ * @public
+ */
+export type ColorPickerAttrs = ComponentAttrs<ColorPickerModel>;
+/**
+ * Color picker component model
+ *
+ * @public
+ */
+export interface ColorPickerModel<T = unknown, V = number | string | number[]> extends ComponentModel, ValueSource<T, V> {
+    /**
+     * The type name of the control
+     */
+    type: 'color-picker';
+    /**
+     * If `target` and `property` are not set, then this is used as the control value
+     *
+     * @remarks
+     * The format is determined by the `format` property.
+     *
+     * It is allowed to omit the '#' character but the '#' will be added on change
+     *
+     * It is allowed to use single character form per component (#f00 instead of #ff0000)
+     * but it will always be written back as #ff0000 on change
+     */
+    value?: V;
+    /**
+     * The format of the string value. Defaults to 'rgb'
+     *
+     * @remarks
+     * This must be a combination of the letters `r`, `g`, `b` and `a`.
+     *
+     * A prefix of `#` indicates the input/output is a hex string. e.g. #rgba
+     *
+     * A prefix of `0x` indicates the input is a number. e.g. 0xrgba
+     *
+     * A prefix of `[]` indicates the input is an array of numbers. e.g. `[]rgba`
+     *
+     * If a prefix is missing `#` is assumed
+     */
+    format?: string;
+    /**
+     * This is called when the control value has been changed.
+     */
+    onInput?: (model: ColorPickerModel<T, V>, value: unknown) => void;
+    /**
+     * This is called once the control value is committed by the user.
+     *
+     * @remarks
+     * Unlike the `onInput` callback, this is not necessarily called for each value change.
+     */
+    onChange?: (model: ColorPickerModel<T, V>, value: unknown) => void;
+}
 //# sourceMappingURL=color-picker.d.ts.map

package/dist/lib/components/controls/color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/color-picker.ts"],"names":[],"mappings":"AAWA,OAAO,EAIL,cAAc,EACd,WAAW,EACX,cAAc,EACf,MAAM,YAAY,CAAA;AASnB;;;;GAIG;AACH,oBAAY,gBAAgB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAA;AAE/D;;;;GAIG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAC3E,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAA;IACpB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,CAAC,CAAA;IACT;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACjE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnE"}
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/color-picker.ts"],"names":[],"mappings":"AAWA,OAAO,EAIL,cAAc,EACd,WAAW,EACX,cAAc,EACf,MAAM,YAAY,CAAA;AASnB;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAA;AAE/D;;;;GAIG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAC3E,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAA;IACpB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,CAAC,CAAA;IACT;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACjE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnE"}