@ephox/acid - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

lib/demo/i18n/en.d.ts

@@ -1,14 +0,2 @@
-declare var strings: {
-    'aria.color.picker': string;
-    'aria.input.invalid': string;
-    'colorcustom.rgb.red.label': string;
-    'colorcustom.rgb.red.description': string;
-    'colorcustom.rgb.green.label': string;
-    'colorcustom.rgb.green.description': string;
-    'colorcustom.rgb.blue.label': string;
-    'colorcustom.rgb.blue.description': string;
-    'colorcustom.rgb.hex.label': string;
-    'colorcustom.rgb.hex.description': string;
-    'colorcustom.rgb.range': string;
-};
+declare const strings: Record<string, string>;
 export { strings };

lib/demo/ts/ephox/acid/demo/Demo.js

@@ -1,4 +0,5 @@
-import { Debugging, Gui, GuiFactory } from '@ephox/alloy';
-import { document } from '@ephox/dom-globals';
-import { Class, Element, Insert } from '@ephox/sugar';
+import { Debugging, Gui, GuiFactory, Channels } from '@ephox/alloy';
+import { console, document } from '@ephox/dom-globals';
+import { Option } from '@ephox/katamari';
+import { Class, Element, Insert, DomEvent } from '@ephox/sugar';
 import ColourPicker from 'ephox/acid/gui/ColourPicker';
@@ -10,3 +11,14 @@ import { strings } from '../../../../i18n/en';
 Insert.append(body, gui.element());
-var fakeTranslate = function (key) { return strings[key]; };
+DomEvent.bind(Element.fromDom(document), 'mouseup', function (evt) {
+    if (evt.raw().button === 0) {
+        gui.broadcastOn([Channels.mouseReleased()], {
+            target: evt.target()
+        });
+    }
+});
+var fakeTranslate = function (key) { return Option.from(strings[key]).getOrThunk(function () {
+    // tslint:disable-next-line:no-console
+    console.error('Missing translation for ' + key);
+    return key;
+}); };
 var fakeGetClass = function (key) { return key; };
@@ -13,0 +25,0 @@ var colourPickerFactory = ColourPicker.makeFactory(fakeTranslate, fakeGetClass);

lib/main/ts/ephox/acid/api/colour/ColourTypes.d.ts

@@ -9,3 +9,3 @@ export interface Hex {
 }
-export declare type Rgba = {
+export interface Rgba {
     red: () => number;
@@ -15,2 +15,2 @@ green: () => number;
     alpha: () => number;
-};
+}

lib/main/ts/ephox/acid/api/colour/HexColour.d.ts

@@ -6,4 +6,4 @@ import { Option } from '@ephox/katamari';
 declare const fromString: (hex: string) => Option<Hex>;
-declare const extractValues: (hexColour: Hex) => RegExpExecArray;
+declare const extractValues: (hex: Hex) => RegExpExecArray | [string, string, string, string];
 declare const fromRgba: (rgbaColour: Rgba) => Hex;
 export { hexColour, isHexString, fromString, fromRgba, extractValues };

lib/main/ts/ephox/acid/api/colour/HexColour.js

@@ -1,2 +0,2 @@
-import { Option, Fun } from '@ephox/katamari';
+import { Fun, Option } from '@ephox/katamari';
 var hexColour = function (hexString) {
@@ -16,4 +16,4 @@ return {
 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-var getLongForm = function (hexColour) {
-    var hexString = hexColour.value().replace(shorthandRegex, function (m, r, g, b) {
+var getLongForm = function (hex) {
+    var hexString = hex.value().replace(shorthandRegex, function (m, r, g, b) {
         return r + r + g + g + b + b;
@@ -23,9 +23,10 @@ });
 };
-var extractValues = function (hexColour) {
-    var longForm = getLongForm(hexColour);
-    return longformRegex.exec(longForm.value());
+var extractValues = function (hex) {
+    var longForm = getLongForm(hex);
+    var splitForm = longformRegex.exec(longForm.value());
+    return splitForm === null ? ['FFFFFF', 'FF', 'FF', 'FF'] : splitForm;
 };
 var toHex = function (component) {
     var hex = component.toString(16);
-    return hex.length == 1 ? "0" + hex : hex;
+    return hex.length === 1 ? '0' + hex : hex;
 };
@@ -32,0 +33,0 @@ var fromRgba = function (rgbaColour) {

lib/main/ts/ephox/acid/api/colour/HsvColour.js

@@ -1,2 +0,2 @@
-import { Fun } from "@ephox/katamari";
+import { Fun } from '@ephox/katamari';
 var hsvColour = function (hue, saturation, value) {
@@ -10,11 +10,10 @@ return {
 var fromRgb = function (rgbaColour) {
-    var r, g, b, h, s, v, d, minRGB, maxRGB;
-    h = 0;
-    s = 0;
-    v = 0;
-    r = rgbaColour.red() / 255;
-    g = rgbaColour.green() / 255;
-    b = rgbaColour.blue() / 255;
-    minRGB = Math.min(r, Math.min(g, b));
-    maxRGB = Math.max(r, Math.max(g, b));
+    var h = 0;
+    var s = 0;
+    var v = 0;
+    var r = rgbaColour.red() / 255;
+    var g = rgbaColour.green() / 255;
+    var b = rgbaColour.blue() / 255;
+    var minRGB = Math.min(r, Math.min(g, b));
+    var maxRGB = Math.max(r, Math.max(g, b));
     if (minRGB === maxRGB) {
@@ -25,3 +24,3 @@ v = minRGB;
     /*eslint no-nested-ternary:0 */
-    d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r);
+    var d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r);
     h = (r === minRGB) ? 3 : ((b === minRGB) ? 1 : 5);
@@ -28,0 +27,0 @@ h = 60 * (h - d / (maxRGB - minRGB));

lib/main/ts/ephox/acid/api/colour/RgbaColour.d.ts

@@ -0,3 +1,3 @@
+import { Option } from '@ephox/katamari';
 import { Hex, Hsv, Rgba } from './ColourTypes';
-import { Option } from '@ephox/katamari';
 declare const rgbaColour: (red: number, green: number, blue: number, alpha: number) => Rgba;
@@ -9,3 +9,3 @@ declare const isRgbaComponent: (value: string) => boolean;
 declare const toString: (rgba: Rgba) => string;
-declare const red: (...args: any[]) => Rgba;
-export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, red };
+declare const redColour: (...args: any[]) => Rgba;
+export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, redColour as red };

lib/main/ts/ephox/acid/api/colour/RgbaColour.js

 import { Fun, Option } from '@ephox/katamari';
 import * as HexColour from './HexColour';
-var min = Math.min, max = Math.max, round = Math.round;
+var min = Math.min;
+var max = Math.max;
+var round = Math.round;
 var rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
@@ -19,6 +21,8 @@ var rgbaRegex = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d?(?:\.\d+)?)\)/;
 var fromHsv = function (hsv) {
-    var side, chroma, x, match, hue, saturation, brightness, r, g, b;
-    hue = (hsv.hue() || 0) % 360;
-    saturation = hsv.saturation() / 100;
-    brightness = hsv.value() / 100;
+    var r;
+    var g;
+    var b;
+    var hue = (hsv.hue() || 0) % 360;
+    var saturation = hsv.saturation() / 100;
+    var brightness = hsv.value() / 100;
     saturation = max(0, min(saturation, 1));
@@ -30,6 +34,6 @@ brightness = max(0, min(brightness, 1));
     }
-    side = hue / 60;
-    chroma = brightness * saturation;
-    x = chroma * (1 - Math.abs(side % 2 - 1));
-    match = brightness - chroma;
+    var side = hue / 60;
+    var chroma = brightness * saturation;
+    var x = chroma * (1 - Math.abs(side % 2 - 1));
+    var match = brightness - chroma;
     switch (Math.floor(side)) {
@@ -93,17 +97,15 @@ case 0:
     }
-    else if (rgbRegex.test(rgbaString)) {
-        var rgbMatch = rgbRegex.exec(rgbaString);
+    var rgbMatch = rgbRegex.exec(rgbaString);
+    if (rgbMatch !== null) {
         return Option.some(fromStringValues(rgbMatch[1], rgbMatch[2], rgbMatch[3], '1'));
     }
-    else if (rgbaRegex.test(rgbaString)) {
-        var rgbaMatch = rgbRegex.exec(rgbaString);
+    var rgbaMatch = rgbaRegex.exec(rgbaString);
+    if (rgbaMatch !== null) {
         return Option.some(fromStringValues(rgbaMatch[1], rgbaMatch[2], rgbaMatch[3], rgbaMatch[4]));
     }
-    else {
-        return Option.none();
-    }
+    return Option.none();
 };
 var toString = function (rgba) { return "rgba(" + rgba.red() + "," + rgba.green() + "," + rgba.blue() + "," + rgba.alpha() + ")"; };
-var red = Fun.constant(rgbaColour(255, 0, 0, 1));
-export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, red };
+var redColour = Fun.constant(rgbaColour(255, 0, 0, 1));
+export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, redColour as red };
 //# sourceMappingURL=RgbaColour.js.map

lib/main/ts/ephox/acid/gui/Calculations.d.ts

@@ -1,2 +0,2 @@
-declare const calcHex: (value: any) => import("../api/colour/ColourTypes").Hex;
+declare const calcHex: (value: number) => import("../api/colour/ColourTypes").Hex;
 export { calcHex };

lib/main/ts/ephox/acid/gui/Calculations.js

@@ -0,6 +1,6 @@
+import * as HexColour from '../api/colour/HexColour';
 import * as HsvColour from '../api/colour/HsvColour';
 import * as RgbaColour from '../api/colour/RgbaColour';
-import * as HexColour from '../api/colour/HexColour';
 var calcHex = function (value) {
-    var hue = ((100 - value / 100) * 360);
+    var hue = (((100 - value) / 100) * 360);
     var hsv = HsvColour.hsvColour(hue, 100, 100);
@@ -7,0 +7,0 @@ var rgb = RgbaColour.fromHsv(hsv);

lib/main/ts/ephox/acid/gui/ColourEvents.d.ts

@@ -0,4 +1,11 @@
+import { SliderTypes, EventFormat } from '@ephox/alloy';
 declare const fieldsUpdate: (...args: any[]) => string;
 declare const sliderUpdate: (...args: any[]) => string;
 declare const paletteUpdate: (...args: any[]) => string;
+export interface SliderUpdateEvent extends EventFormat {
+    value: () => SliderTypes.SliderValueY;
+}
+export interface PaletteUpdateEvent extends EventFormat {
+    value: () => SliderTypes.SliderValueXY;
+}
 export { fieldsUpdate, sliderUpdate, paletteUpdate };

lib/main/ts/ephox/acid/gui/ColourEvents.js

@@ -1,2 +0,2 @@
-import { Id, Fun } from "@ephox/katamari";
+import { Id, Fun } from '@ephox/katamari';
 var fieldsUpdate = Fun.constant(Id.generate('rgb-hex-update'));
@@ -3,0 +3,0 @@ var sliderUpdate = Fun.constant(Id.generate('slider-update'));

lib/main/ts/ephox/acid/gui/ColourPicker.d.ts

@@ -0,4 +1,17 @@
+import { AlloyComponent, RawDomSchema, Sketcher } from '@ephox/alloy';
+export interface ColourPickerDetail extends Sketcher.SingleSketchDetail {
+    dom: RawDomSchema;
+    onValidHex: (component: AlloyComponent) => void;
+    onInvalidHex: (component: AlloyComponent) => void;
+}
+export interface ColourPickerSpec extends Sketcher.SingleSketchSpec {
+    dom: RawDomSchema;
+    onValidHex?: (component: AlloyComponent) => void;
+    onInvalidHex?: (component: AlloyComponent) => void;
+}
+export interface ColourPickerSketcher extends Sketcher.SingleSketch<ColourPickerSpec, ColourPickerDetail> {
+}
 declare const _default: {
-    makeFactory: (translate: any, getClass: any) => any;
+    makeFactory: (translate: (key: string) => string, getClass: (key: string) => string) => ColourPickerSketcher;
 };
 export default _default;

lib/main/ts/ephox/acid/gui/ColourPicker.js

@@ -1,14 +0,12 @@
-import { Sketcher, Keying } from '@ephox/alloy';
-import SaturationBrightnessPalette from './components/SaturationBrightnessPalette';
+import { AddEventsBehaviour, AlloyEvents, Behaviour, Composing, Keying, Memento, Sketcher } from '@ephox/alloy';
+import { FieldSchema } from '@ephox/boulder';
+import { Arr, Cell, Fun } from '@ephox/katamari';
+import * as HexColour from '../api/colour/HexColour';
+import * as HsvColour from '../api/colour/HsvColour';
+import * as RgbaColour from '../api/colour/RgbaColour';
+import { calcHex } from './Calculations';
+import * as ColourEvents from './ColourEvents';
 import HueSlider from './components/HueSlider';
-import { Memento, AddEventsBehaviour, Behaviour, AlloyEvents } from '@ephox/alloy';
 import RgbForm from './components/RgbForm';
-import { Arr, Fun, Cell } from '@ephox/katamari';
-import { Composing } from '@ephox/alloy';
-import * as ColourEvents from './ColourEvents';
-import * as RgbaColour from '../api/colour/RgbaColour';
-import * as HsvColour from '../api/colour/HsvColour';
-import * as HexColour from '../api/colour/HexColour';
-import { calcHex } from './Calculations';
-import { FieldSchema } from '@ephox/boulder';
+import SaturationBrightnessPalette from './components/SaturationBrightnessPalette';
 var makeFactory = function (translate, getClass) {
@@ -85,12 +83,12 @@ var factory = function (detail) {
     };
-    var ColourPicker = Sketcher.single({
+    var colourPickerSketcher = Sketcher.single({
         name: 'ColourPicker',
         configFields: [
+            FieldSchema.strict('dom'),
             FieldSchema.defaulted('onValidHex', Fun.noop),
-            FieldSchema.defaulted('onInvalidHex', Fun.noop),
-            FieldSchema.optionString('formChangeEvent')
+            FieldSchema.defaulted('onInvalidHex', Fun.noop)
         ],
         factory: factory
     });
-    return ColourPicker;
+    return colourPickerSketcher;
 };
@@ -97,0 +95,0 @@ export default {

lib/main/ts/ephox/acid/gui/components/HueSlider.d.ts

 declare const _default: {
-    sliderFactory: (translate: any, getClass: any) => import("@ephox/alloy").SketchSpec;
+    sliderFactory: (translate: (key: string) => string, getClass: (key: string) => string) => import("@ephox/alloy").SketchSpec;
 };
 export default _default;

lib/main/ts/ephox/acid/gui/components/HueSlider.js

@@ -0,3 +1,3 @@
+import { AlloyTriggers, Behaviour, Focusing, Slider } from '@ephox/alloy';
 import { Fun } from '@ephox/katamari';
-import { Slider, Behaviour, Focusing, AlloyTriggers } from '@ephox/alloy';
 import { sliderUpdate } from '../ColourEvents';
@@ -43,3 +43,3 @@ var sliderFactory = function (translate, getClass) {
         ]),
-        onChange: function (slider, thumb, value) {
+        onChange: function (slider, _thumb, value) {
             AlloyTriggers.emitWith(slider, sliderUpdate(), {
@@ -46,0 +46,0 @@ value: value

lib/main/ts/ephox/acid/gui/components/RgbForm.d.ts

@@ -1,2 +0,2 @@
-import { Sketcher, AlloyComponent } from "@ephox/alloy";
+import { AlloyComponent, Sketcher } from '@ephox/alloy';
 import { Hex } from '../../api/colour/ColourTypes';
@@ -11,4 +11,4 @@ export interface RgbFormDetail extends Sketcher.SingleSketchDetail {
 declare const _default: {
-    rgbFormFactory: (translate: any, getClass: any, onValidHexx: any, onInvalidHexx: any) => RgbFormSketcher;
+    rgbFormFactory: (translate: (key: string) => string, getClass: (key: string) => string, onValidHexx: (component: import("@ephox/alloy/lib/main/ts/ephox/alloy/api/component/ComponentApi").AlloyComponent) => void, onInvalidHexx: (component: import("@ephox/alloy/lib/main/ts/ephox/alloy/api/component/ComponentApi").AlloyComponent) => void) => RgbFormSketcher;
 };
 export default _default;

lib/main/ts/ephox/acid/gui/components/RgbForm.js

 import * as tslib_1 from "tslib";
-import { Sketcher, Form, FormField, Behaviour, Input, Invalidating, AlloyEvents, AlloyTriggers, Representing, AddEventsBehaviour, Tabstopping, Memento } from "@ephox/alloy";
-import { Option, Result, Future, Id, Cell, Fun, Merger } from "@ephox/katamari";
+import { AddEventsBehaviour, AlloyEvents, AlloyTriggers, Behaviour, Focusing, Form, FormField, Input, Invalidating, Memento, Representing, Sketcher, Tabstopping } from '@ephox/alloy';
+import { Cell, Fun, Future, Id, Merger, Option, Result } from '@ephox/katamari';
+import { Css } from '@ephox/sugar';
 import * as HexColour from '../../api/colour/HexColour';
 import * as RgbaColour from '../../api/colour/RgbaColour';
 import * as ColourEvents from '../ColourEvents';
-import { Css } from "@ephox/sugar";
-import { Focusing } from "@ephox/alloy";
 var validInput = Id.generate('valid-input');
@@ -13,3 +12,2 @@ var invalidInput = Id.generate('invalid-input');
 var translatePrefix = 'colorcustom.rgb.';
-;
 var rgbFormFactory = function (translate, getClass, onValidHexx, onInvalidHexx) {
@@ -101,3 +99,5 @@ var invalidation = function (label, isValid) {
     var copyRgbToForm = function (form, rgb) {
-        var red = rgb.red(), green = rgb.green(), blue = rgb.blue();
+        var red = rgb.red();
+        var green = rgb.green();
+        var blue = rgb.blue();
         Representing.setValue(form, { red: red, green: green, blue: blue });
@@ -122,3 +122,3 @@ };
     };
-    var factory = function (detail) {
+    var factory = function () {
         var state = {
@@ -148,3 +148,5 @@ red: Fun.constant(Cell(Option.some(255))),
         var setValueRgb = function (rgb) {
-            var red = rgb.red(), green = rgb.green(), blue = rgb.blue();
+            var red = rgb.red();
+            var green = rgb.green();
+            var blue = rgb.blue();
             set('red', Option.some(red));
@@ -183,5 +185,8 @@ set('green', Option.some(green));
         };
+        var isHexInputEvent = function (data) {
+            return data.type() === 'hex';
+        };
         var onValidInput = function (form, simulatedEvent) {
             var data = simulatedEvent.event();
-            if (data.type() === 'hex') {
+            if (isHexInputEvent(data)) {
                 onValidHex(form, data.value());
@@ -241,3 +246,3 @@ }
     };
-    var RgbForm = Sketcher.single({
+    var rgbFormSketcher = Sketcher.single({
         factory: factory,
@@ -253,3 +258,3 @@ name: 'RgbForm',
     });
-    return RgbForm;
+    return rgbFormSketcher;
 };
@@ -256,0 +261,0 @@ export default {

lib/main/ts/ephox/acid/gui/components/SaturationBrightnessPalette.d.ts

@@ -1,2 +0,2 @@
-import { Sketcher, AlloyComponent } from '@ephox/alloy';
+import { AlloyComponent, Sketcher } from '@ephox/alloy';
 import { Rgba } from '../../api/colour/ColourTypes';
@@ -11,4 +11,4 @@ export interface SaturationBrightnessPaletteDetail extends Sketcher.SingleSketchDetail {
 declare const _default: {
-    paletteFactory: (translate: any, getClass: any) => SaturationBrightnessPaletteSketcher;
+    paletteFactory: (_translate: (key: string) => string, getClass: (key: string) => string) => SaturationBrightnessPaletteSketcher;
 };
 export default _default;

lib/main/ts/ephox/acid/gui/components/SaturationBrightnessPalette.js

@@ -0,8 +1,7 @@
+import { AlloyTriggers, Behaviour, Composing, Focusing, Sketcher, Slider } from '@ephox/alloy';
 import { Fun, Option } from '@ephox/katamari';
-import { Behaviour, Composing, Focusing, Slider, Sketcher, AlloyTriggers } from '@ephox/alloy';
 import * as RgbaColour from '../../api/colour/RgbaColour';
 import * as ColourEvents from '../ColourEvents';
-;
-var paletteFactory = function (translate, getClass) {
-    var spectrum = Slider.parts().spectrum({
+var paletteFactory = function (_translate, getClass) {
+    var spectrumPart = Slider.parts().spectrum({
         dom: {
@@ -16,3 +15,3 @@ tag: 'canvas',
     });
-    var thumb = Slider.parts().thumb({
+    var thumbPart = Slider.parts().thumb({
         dom: {
@@ -24,3 +23,3 @@ tag: 'div',
             classes: [getClass('sv-palette-thumb')],
-            innerHtml: "<div class=" + getClass("sv-palette-inner-thumb") + " role=\"presentation\"></div>"
+            innerHtml: "<div class=" + getClass('sv-palette-inner-thumb') + " role=\"presentation\"></div>"
         }
@@ -31,2 +30,5 @@ });
         var ctx = canvas.getContext('2d');
+        if (ctx === null) {
+            return;
+        }
         ctx.fillStyle = rgba;
@@ -50,3 +52,3 @@ ctx.fillRect(0, 0, width, height);
     };
-    var factory = function (detail) {
+    var factory = function (_detail) {
         var getInitialValue = Fun.constant({
@@ -85,4 +87,4 @@ x: Fun.constant(0),
             components: [
-                spectrum,
-                thumb
+                spectrumPart,
+                thumbPart
             ],
@@ -94,3 +96,3 @@ onChange: onChange,
     };
-    var SaturationBrightnessPalette = Sketcher.single({
+    var saturationBrightnessPaletteSketcher = Sketcher.single({
         factory: factory,
@@ -100,3 +102,3 @@ name: 'SaturationBrightnessPalette',
         apis: {
-            setRgba: function (apis, slider, rgba) {
+            setRgba: function (_apis, slider, rgba) {
                 setSliderColour(slider, rgba);
@@ -107,3 +109,3 @@ }
     });
-    return SaturationBrightnessPalette;
+    return saturationBrightnessPaletteSketcher;
 };
@@ -110,0 +112,0 @@ export default {

lib/test/ts/atomic/ConversionsTest.js

@@ -0,5 +1,5 @@
+import { assert, UnitTest } from '@ephox/bedrock';
+import * as HexColour from '../../../main/ts/ephox/acid/api/colour/HexColour';
 import * as RgbaColour from '../../../main/ts/ephox/acid/api/colour/RgbaColour';
-import * as HexColour from '../../../main/ts/ephox/acid/api/colour/HexColour';
-import { UnitTest, assert } from '@ephox/bedrock';
-UnitTest.test('SplitMenuTest', function () {
+UnitTest.test('ConversionsTest', function () {
     var rgbaBlack = RgbaColour.rgbaColour(0, 0, 0, 1);
@@ -6,0 +6,0 @@ var rgbaWhite = RgbaColour.rgbaColour(255, 255, 255, 1);

package.json

 {
   "name": "@ephox/acid",
   "description": "Color library including Alloy UI component for a color picker",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "repository": {
@@ -19,5 +19,8 @@ "type": "git",
     "@ephox/bedrock": "latest",
+    "@ephox/tslint-rules": "latest",
     "awesome-typescript-loader": "^4.0.0",
     "source-map-loader": "^0.2.3",
-    "typescript": "^3.0.1"
+    "tslint": "^5.14.0",
+    "typescript": "^3.0.1",
+    "webpack-cli": "^3.3.0"
   },
@@ -45,2 +48,3 @@ "publishConfig": {
     "prepublishOnly": "tsc",
+    "lint": "tslint --project tsconfig.json --config tslint.json",
     "test": "bedrock-auto -b phantomjs -d src/test/ts",
@@ -47,0 +51,0 @@ "test-manual": "bedrock -d src/test/ts"

src/demo/i18n/en.ts

@@ -1,2 +0,2 @@
-var strings = {
+const strings: Record<string, string> = {
   // 'colorcustom.palette.thumb': 'Palette Picker',
@@ -3,0 +3,0 @@ // 'colorcustom.palette.spectrum': 'Saturation and Brightness Palette',

src/demo/ts/ephox/acid/demo/Demo.ts

@@ -1,6 +0,6 @@
-import { Debugging, Gui, GuiFactory } from '@ephox/alloy';
-import { document } from '@ephox/dom-globals';
-import { Class, Element, Insert } from '@ephox/sugar';
+import { Debugging, Gui, GuiFactory, Channels } from '@ephox/alloy';
+import { console, document } from '@ephox/dom-globals';
+import { Option } from '@ephox/katamari';
+import { Class, Element, Insert, DomEvent } from '@ephox/sugar';
 import ColourPicker from 'ephox/acid/gui/ColourPicker';
-
 import { strings } from '../../../../i18n/en';
@@ -13,6 +13,18 @@
 
-var fakeTranslate = (key) => strings[key];
+DomEvent.bind(Element.fromDom(document), 'mouseup', function (evt) {
+  if (evt.raw().button === 0) {
+    gui.broadcastOn([ Channels.mouseReleased() ], {
+      target: evt.target()
+    });
+  }
+});
 
-const fakeGetClass = (key) => key;
+const fakeTranslate = (key: string) => Option.from(strings[key]).getOrThunk(() => {
+  // tslint:disable-next-line:no-console
+  console.error('Missing translation for ' + key);
+  return key;
+});
 
+const fakeGetClass = (key: string) => key;
+
 const colourPickerFactory = ColourPicker.makeFactory(fakeTranslate, fakeGetClass);
@@ -23,3 +35,3 @@
     tag: 'div',
-    classes: [ 'example-colour-picker' ]
+    classes: ['example-colour-picker']
   }
@@ -26,0 +38,0 @@ }));

src/main/ts/ephox/acid/api/colour/ColourTypes.ts

@@ -11,3 +11,3 @@ export interface Hex {
 
-export type Rgba = {
+export interface Rgba {
   red: () => number;
@@ -17,2 +17,2 @@ green: () => number;
   alpha: () => number;
-}
+}

src/main/ts/ephox/acid/api/colour/HexColour.ts

@@ -1,3 +0,2 @@
-import { Option, Fun } from '@ephox/katamari';
-
+import { Fun, Option } from '@ephox/katamari';
 import { Hex, Rgba } from './ColourTypes';
@@ -12,5 +11,5 @@
 const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-const longformRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
+const longformRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 
-const isHexString = (hex: string):boolean => {
+const isHexString = (hex: string): boolean => {
   return shorthandRegex.test(hex) || longformRegex.test(hex);
@@ -24,13 +23,14 @@ };
 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-const getLongForm = (hexColour: Hex): Hex => {
-  const hexString = hexColour.value().replace(shorthandRegex, function(m, r, g, b) {
-      return r + r + g + g + b + b;
+const getLongForm = (hex: Hex): Hex => {
+  const hexString = hex.value().replace(shorthandRegex, function (m, r, g, b) {
+    return r + r + g + g + b + b;
   });
 
-  return { value: Fun.constant(hexString) }
+  return { value: Fun.constant(hexString) };
 };
 
-const extractValues = (hexColour: Hex):RegExpExecArray => {
-  const longForm = getLongForm(hexColour);
-  return longformRegex.exec(longForm.value());
+const extractValues = (hex: Hex): RegExpExecArray | [string, string, string, string] => {
+  const longForm = getLongForm(hex);
+  const splitForm = longformRegex.exec(longForm.value());
+  return splitForm === null ? ['FFFFFF', 'FF', 'FF', 'FF'] : splitForm;
 };
@@ -40,3 +40,3 @@
   const hex = component.toString(16);
-  return hex.length == 1 ? "0" + hex : hex;
+  return hex.length === 1 ? '0' + hex : hex;
 };
@@ -43,0 +43,0 @@

src/main/ts/ephox/acid/api/colour/HsvColour.ts

@@ -1,3 +0,2 @@
-import { Fun } from "@ephox/katamari";
-
+import { Fun } from '@ephox/katamari';
 import { Hsv, Rgba } from './ColourTypes';
@@ -10,40 +9,36 @@
     value: Fun.constant(value)
-  }
+  };
 };
 
 const fromRgb = (rgbaColour: Rgba): Hsv => {
-  let r, g, b, h, s, v, d, minRGB, maxRGB;
+  let h = 0; let s = 0; let v = 0;
+  const r = rgbaColour.red() / 255;
+  const g = rgbaColour.green() / 255;
+  const b = rgbaColour.blue() / 255;
 
-    h = 0;
-    s = 0;
-    v = 0;
-    r = rgbaColour.red() / 255;
-    g = rgbaColour.green() / 255;
-    b = rgbaColour.blue() / 255;
+  const minRGB = Math.min(r, Math.min(g, b));
+  const maxRGB = Math.max(r, Math.max(g, b));
 
-    minRGB = Math.min(r, Math.min(g, b));
-    maxRGB = Math.max(r, Math.max(g, b));
+  if (minRGB === maxRGB) {
+    v = minRGB;
 
-    if (minRGB === maxRGB) {
-      v = minRGB;
+    return hsvColour(
+      0,
+      0,
+      v * 100
+    );
+  }
 
-      return hsvColour(
-        0,
-        0,
-        v * 100
-      );
-    }
+  /*eslint no-nested-ternary:0 */
+  const d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r);
+  h = (r === minRGB) ? 3 : ((b === minRGB) ? 1 : 5);
+  h = 60 * (h - d / (maxRGB - minRGB));
+  s = (maxRGB - minRGB) / maxRGB;
+  v = maxRGB;
 
-    /*eslint no-nested-ternary:0 */
-    d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r);
-    h = (r === minRGB) ? 3 : ((b === minRGB) ? 1 : 5);
-    h = 60 * (h - d / (maxRGB - minRGB));
-    s = (maxRGB - minRGB) / maxRGB;
-    v = maxRGB;
-
-    return hsvColour(
-      Math.round(h),
-      Math.round(s * 100),
-      Math.round(v * 100)
-    );
+  return hsvColour(
+    Math.round(h),
+    Math.round(s * 100),
+    Math.round(v * 100)
+  );
 };
@@ -50,0 +45,0 @@

src/main/ts/ephox/acid/api/colour/RgbaColour.ts

@@ -0,6 +1,8 @@
+import { Fun, Option } from '@ephox/katamari';
 import { Hex, Hsv, Rgba } from './ColourTypes';
-import { Fun, Option } from '@ephox/katamari';
 import * as HexColour from './HexColour';
 
-const min = Math.min, max = Math.max, round = Math.round;
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
 
@@ -17,3 +19,3 @@ const rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
   };
-}
+};
 
@@ -23,68 +25,67 @@ const isRgbaComponent = (value: string): boolean => {
   return num.toString() === value && num >= 0 && num <= 255;
-}
+};
 
 const fromHsv = (hsv: Hsv): Rgba => {
-  let side, chroma, x, match, hue, saturation, brightness, r, g, b;
+  let r; let g; let b;
+  const hue = (hsv.hue() || 0) % 360;
+  let saturation = hsv.saturation() / 100;
+  let brightness = hsv.value() / 100;
+  saturation = max(0, min(saturation, 1));
+  brightness = max(0, min(brightness, 1));
 
-    hue = (hsv.hue() || 0) % 360;
-    saturation = hsv.saturation() / 100;
-    brightness = hsv.value() / 100;
-    saturation = max(0, min(saturation, 1));
-    brightness = max(0, min(brightness, 1));
+  if (saturation === 0) {
+    r = g = b = round(255 * brightness);
+    return rgbaColour(r, g, b, 1);
+  }
 
-    if (saturation === 0) {
-      r = g = b = round(255 * brightness);
-      return rgbaColour(r, g, b, 1);
-    }
+  const side = hue / 60;
+  const chroma = brightness * saturation;
+  const x = chroma * (1 - Math.abs(side % 2 - 1));
+  const match = brightness - chroma;
 
-    side = hue / 60;
-    chroma = brightness * saturation;
-    x = chroma * (1 - Math.abs(side % 2 - 1));
-    match = brightness - chroma;
+  switch (Math.floor(side)) {
+    case 0:
+      r = chroma;
+      g = x;
+      b = 0;
+      break;
 
-    switch (Math.floor(side)) {
-      case 0:
-        r = chroma;
-        g = x;
-        b = 0;
-        break;
+    case 1:
+      r = x;
+      g = chroma;
+      b = 0;
+      break;
 
-      case 1:
-        r = x;
-        g = chroma;
-        b = 0;
-        break;
+    case 2:
+      r = 0;
+      g = chroma;
+      b = x;
+      break;
 
-      case 2:
-        r = 0;
-        g = chroma;
-        b = x;
-        break;
+    case 3:
+      r = 0;
+      g = x;
+      b = chroma;
+      break;
 
-      case 3:
-        r = 0;
-        g = x;
-        b = chroma;
-        break;
+    case 4:
+      r = x;
+      g = 0;
+      b = chroma;
+      break;
 
-      case 4:
-        r = x;
-        g = 0;
-        b = chroma;
-        break;
+    case 5:
+      r = chroma;
+      g = 0;
+      b = x;
+      break;
 
-      case 5:
-        r = chroma;
-        g = 0;
-        b = x;
-        break;
+    default:
+      r = g = b = 0;
+  }
 
-      default:
-        r = g = b = 0;
-    }
+  r = round(255 * (r + match));
+  g = round(255 * (g + match));
+  b = round(255 * (b + match));
 
-    r = round(255 * (r + match));
-    g = round(255 * (g + match));
-    b = round(255 * (b + match));
-    
   return rgbaColour(r, g, b, 1);
@@ -113,11 +114,12 @@ };
     return Option.some(rgbaColour(0, 0, 0, 0));
-  } else if (rgbRegex.test(rgbaString)) {
-    const rgbMatch = rgbRegex.exec(rgbaString);
+  }
+  const rgbMatch = rgbRegex.exec(rgbaString);
+  if (rgbMatch !== null) {
     return Option.some(fromStringValues(rgbMatch[1], rgbMatch[2], rgbMatch[3], '1'));
-  } else if (rgbaRegex.test(rgbaString)) {
-    const rgbaMatch = rgbRegex.exec(rgbaString);
+  }
+  const rgbaMatch = rgbaRegex.exec(rgbaString);
+  if (rgbaMatch !== null) {
     return Option.some(fromStringValues(rgbaMatch[1], rgbaMatch[2], rgbaMatch[3], rgbaMatch[4]));
-  } else {
-    return Option.none();
   }
+  return Option.none();
 };
@@ -127,3 +129,3 @@
 
-const red = Fun.constant(rgbaColour(255, 0, 0, 1));
+const redColour = Fun.constant(rgbaColour(255, 0, 0, 1));
 
@@ -137,3 +139,3 @@ export {
   toString,
-  red
+  redColour as red
 };

src/main/ts/ephox/acid/gui/Calculations.ts

@@ -0,8 +1,8 @@
+import * as HexColour from '../api/colour/HexColour';
 import * as HsvColour from '../api/colour/HsvColour';
-import * as RgbaColour from '../api/colour/RgbaColour'
-import * as HexColour from '../api/colour/HexColour';
+import * as RgbaColour from '../api/colour/RgbaColour';
 
-const calcHex = (value) => {
-  var hue = ((100 - value / 100) * 360);
-  var hsv = HsvColour.hsvColour(hue, 100, 100);
+const calcHex = (value: number) => {
+  const hue = (((100 - value) / 100) * 360);
+  const hsv = HsvColour.hsvColour(hue, 100, 100);
   const rgb = RgbaColour.fromHsv(hsv);
@@ -14,2 +14,2 @@ return HexColour.fromRgba(rgb);
   calcHex
-}
+};

src/main/ts/ephox/acid/gui/ColourEvents.ts

@@ -1,2 +0,3 @@
-import { Id, Fun } from "@ephox/katamari";
+import { Id, Fun } from '@ephox/katamari';
+import { SliderTypes, EventFormat } from '@ephox/alloy';
 
@@ -7,2 +8,10 @@ const fieldsUpdate = Fun.constant(Id.generate('rgb-hex-update'));
 
+export interface SliderUpdateEvent extends EventFormat {
+  value: () => SliderTypes.SliderValueY;
+}
+
+export interface PaletteUpdateEvent extends EventFormat {
+  value: () => SliderTypes.SliderValueXY;
+}
+
 export {
@@ -9,0 +18,0 @@ fieldsUpdate,

src/main/ts/ephox/acid/gui/ColourPicker.ts

@@ -1,18 +0,31 @@
-import { Sketcher, Keying }  from '@ephox/alloy';
-import SaturationBrightnessPalette from './components/SaturationBrightnessPalette';
+import { AddEventsBehaviour, AlloyComponent, AlloyEvents, Behaviour, Composing, Keying, Memento, RawDomSchema, SimulatedEvent, Sketcher } from '@ephox/alloy';
+import { FieldSchema } from '@ephox/boulder';
+import { Arr, Cell, Fun } from '@ephox/katamari';
+import { Hex } from '../api/colour/ColourTypes';
+import * as HexColour from '../api/colour/HexColour';
+import * as HsvColour from '../api/colour/HsvColour';
+import * as RgbaColour from '../api/colour/RgbaColour';
+import { calcHex } from './Calculations';
+import * as ColourEvents from './ColourEvents';
 import HueSlider from './components/HueSlider';
-import { Memento, AddEventsBehaviour, Behaviour, AlloyEvents } from '@ephox/alloy';
 import RgbForm from './components/RgbForm';
-import { Arr, Fun, Cell } from '@ephox/katamari';
-import { Composing } from '@ephox/alloy';
+import SaturationBrightnessPalette from './components/SaturationBrightnessPalette';
 
-import * as ColourEvents from './ColourEvents';
-import * as RgbaColour from '../api/colour/RgbaColour';
-import * as HsvColour from '../api/colour/HsvColour';
-import * as HexColour from '../api/colour/HexColour';
-import { calcHex } from './Calculations';
-import { FieldSchema } from '@ephox/boulder';
+export interface ColourPickerDetail extends Sketcher.SingleSketchDetail {
+  dom: RawDomSchema;
+  onValidHex: (component: AlloyComponent) => void;
+  onInvalidHex: (component: AlloyComponent) => void;
+}
 
-const makeFactory = (translate, getClass) => {
-  const factory = (detail) => {
+export interface ColourPickerSpec extends Sketcher.SingleSketchSpec {
+  dom: RawDomSchema;
+  onValidHex?: (component: AlloyComponent) => void;
+  onInvalidHex?: (component: AlloyComponent) => void;
+}
+
+export interface ColourPickerSketcher extends Sketcher.SingleSketch<ColourPickerSpec, ColourPickerDetail> {
+}
+
+const makeFactory = (translate: (key: string) => string, getClass: (key: string) => string) => {
+  const factory = (detail: ColourPickerDetail) => {
     const rgbForm = RgbForm.rgbFormFactory(translate, getClass, detail.onValidHex, detail.onInvalidHex);
@@ -26,9 +39,9 @@ const sbPalette = SaturationBrightnessPalette.paletteFactory(translate, getClass);
     const memPalette = Memento.record(
-      sbPalette.sketch({ })
+      sbPalette.sketch({})
     );
     const memRgb = Memento.record(
-      rgbForm.sketch({ })
+      rgbForm.sketch({})
     );
 
-    const updatePalette = (anyInSystem, hex) => {
+    const updatePalette = (anyInSystem: AlloyComponent, hex: Hex) => {
       memPalette.getOpt(anyInSystem).each((palette) => {
@@ -38,6 +51,6 @@ const rgba = RgbaColour.fromHex(hex);
         sbPalette.setRgba(palette, rgba);
-      })
+      });
     };
 
-    const updateFields = (anyInSystem, hex) => {
+    const updateFields = (anyInSystem: AlloyComponent, hex: Hex) => {
       memRgb.getOpt(anyInSystem).each((form) => {
@@ -48,3 +61,3 @@ rgbForm.updateHex(form, hex);
 
-    const runUpdates = (anyInSystem, hex, updates) => {
+    const runUpdates = (anyInSystem: AlloyComponent, hex: Hex, updates: ((anyInSystem: AlloyComponent, hex: Hex) => void)[]) => {
       Arr.each(updates, (update) => {
@@ -56,4 +69,4 @@ update(anyInSystem, hex);
     const paletteUpdates = () => {
-      const updates = [ updateFields ];
-      return (form, simulatedEvent) => {
+      const updates = [updateFields];
+      return (form: AlloyComponent, simulatedEvent: SimulatedEvent<ColourEvents.PaletteUpdateEvent>) => {
         const value = simulatedEvent.event().value();
@@ -66,12 +79,12 @@ const oldRgb = state.paletteRgba().get();
         runUpdates(form, nuHex, updates);
-      }
+      };
     };
 
     const sliderUpdates = () => {
-      const updates = [ updatePalette, updateFields ];
-      return (form, simulatedEvent) => {
+      const updates = [updatePalette, updateFields];
+      return (form: AlloyComponent, simulatedEvent: SimulatedEvent<ColourEvents.SliderUpdateEvent>) => {
         const value = simulatedEvent.event().value();
         const hex = calcHex(value.y());
         runUpdates(form, hex, updates);
-      }
+      };
     };
@@ -104,15 +117,15 @@
     };
-  }
+  };
 
-  const ColourPicker = Sketcher.single({
+  const colourPickerSketcher = Sketcher.single({
     name: 'ColourPicker',
     configFields: [
+      FieldSchema.strict('dom'),
       FieldSchema.defaulted('onValidHex', Fun.noop),
-      FieldSchema.defaulted('onInvalidHex', Fun.noop),
-      FieldSchema.optionString('formChangeEvent')
+      FieldSchema.defaulted('onInvalidHex', Fun.noop)
     ],
-    factory: factory
-  });
+    factory
+  }) as ColourPickerSketcher;
 
-  return ColourPicker;
+  return colourPickerSketcher;
 };
@@ -119,0 +132,0 @@

src/main/ts/ephox/acid/gui/components/HueSlider.ts

@@ -1,7 +0,7 @@
-import { Option, Fun } from '@ephox/katamari';
-import { Slider, Behaviour, Composing, Focusing, Tabstopping, AlloyTriggers } from '@ephox/alloy';
+import { AlloyTriggers, Behaviour, Focusing, Slider } from '@ephox/alloy';
+import { Fun } from '@ephox/katamari';
 import { sliderUpdate } from '../ColourEvents';
 
-const sliderFactory = (translate, getClass) => {
-  var spectrum = Slider.parts().spectrum({
+const sliderFactory = (translate: (key: string) => string, getClass: (key: string) => string) => {
+  const spectrum = Slider.parts().spectrum({
     dom: {
@@ -16,3 +16,3 @@ tag: 'div',
 
-  var thumb = Slider.parts().thumb({
+  const thumb = Slider.parts().thumb({
     dom: {
@@ -27,3 +27,2 @@ tag: 'div',
 
-
   return Slider.sketch({
@@ -50,3 +49,3 @@ dom: {
 
-    onChange: function (slider, thumb, value) {
+    onChange: (slider, _thumb, value) => {
       AlloyTriggers.emitWith(slider, sliderUpdate(), {
@@ -56,3 +55,3 @@ value
     }
-  })
+  });
 };
@@ -59,0 +58,0 @@

src/main/ts/ephox/acid/gui/components/RgbForm.ts

@@ -1,11 +0,12 @@
-import { Sketcher, Form, FormField, Behaviour, Input, Invalidating, AlloyEvents, AlloyTriggers, Representing, AddEventsBehaviour, Tabstopping, UiSketcher, SketchSpec, Memento, AlloyComponent } from "@ephox/alloy";
-import { Option, Result, Future, Id, Cell, Arr, Fun, Merger } from "@ephox/katamari";
-
+import {
+  AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloyTriggers, Behaviour,
+  EventFormat, Focusing, Form, FormField, Input, Invalidating, Memento,
+  Representing, SimulatedEvent, Sketcher, SketchSpec, Tabstopping, UiSketcher
+} from '@ephox/alloy';
+import { Cell, Fun, Future, Id, Merger, Option, Result } from '@ephox/katamari';
+import { Css } from '@ephox/sugar';
+import { Hex, Rgba } from '../../api/colour/ColourTypes';
 import * as HexColour from '../../api/colour/HexColour';
 import * as RgbaColour from '../../api/colour/RgbaColour';
-import { Hex, Rgba } from '../../api/colour/ColourTypes';
-
 import * as ColourEvents from '../ColourEvents';
-import { Css } from "@ephox/sugar";
-import { Focusing } from "@ephox/alloy";
 
@@ -16,4 +17,17 @@ const validInput = Id.generate('valid-input');
 
+interface HexInputEvent extends EventFormat {
+  type: () => 'hex';
+  value: () => string;
+}
+
+interface ColorInputEvent extends EventFormat {
+  type: () => 'red' | 'green' | 'blue';
+  value: () => string;
+}
+
+type InputEvent = HexInputEvent | ColorInputEvent;
+
 const translatePrefix = 'colorcustom.rgb.';
 
+// tslint:disable:no-empty-interface
 export interface RgbFormDetail extends Sketcher.SingleSketchDetail {
@@ -24,8 +38,9 @@ }
 }
+// tslint:enable:no-empty-interface
 
 export interface RgbFormSketcher extends Sketcher.SingleSketch<RgbFormSpec, RgbFormDetail> {
   updateHex: (slider: AlloyComponent, colour: Hex) => void;
-};
+}
 
-const rgbFormFactory = (translate, getClass, onValidHexx, onInvalidHexx) => {
+const rgbFormFactory = (translate: (key: string) => string, getClass: (key: string) => string, onValidHexx: (component: AlloyComponent) => void, onInvalidHexx: (component: AlloyComponent) => void) => {
   const invalidation = (label: string, isValid: (value: string) => boolean) => {
@@ -45,3 +60,3 @@ return Invalidating.config({
             value: Representing.getValue(comp)
-          })
+          });
         },
@@ -53,3 +68,3 @@
             value: Representing.getValue(comp)
-          })
+          });
         }
@@ -59,5 +74,5 @@ },
       validator: {
-        validate: function (comp) {
+        validate: (comp) => {
           const value = Representing.getValue(comp);
-          const res = isValid(value) ? Result.value(true) : Result.error(translate('aria.input.invalid'))
+          const res = isValid(value) ? Result.value(true) : Result.error(translate('aria.input.invalid'));
           return Future.pure(res);
@@ -71,3 +86,3 @@ },
   const renderTextField = (isValid: (value: string) => boolean, name: string, label: string, description: string, data: string | number) => {
-    var helptext = translate(translatePrefix + 'range');
+    const helptext = translate(translatePrefix + 'range');
 
@@ -83,5 +98,5 @@ const pLabel = FormField.parts().label({
         type: 'text',
-        ...name === 'hex' ? {'aria-live': 'polite'} : {}
+        ...name === 'hex' ? { 'aria-live': 'polite' } : {}
       },
-      inputClasses: [ getClass('textfield') ],
+      inputClasses: [getClass('textfield')],
 
@@ -91,10 +106,10 @@ // Have basic invalidating and tabstopping behaviour.
         invalidation(name, isValid),
-        Tabstopping.config({ })
+        Tabstopping.config({})
       ]),
 
       // If it was invalid, and the value was set, run validation against it.
-      onSetValue: (input) => {
+      onSetValue: (input: AlloyComponent) => {
         if (Invalidating.isInvalid(input)) {
           const run = Invalidating.run(input);
-          run.get(Fun.noop)
+          run.get(Fun.noop);
         }
@@ -104,3 +119,3 @@ }
 
-    let comps = [ pLabel, pField ];
+    const comps = [pLabel, pField];
     const concats = name !== 'hex' ? [FormField.parts()['aria-descriptor']({
@@ -120,5 +135,5 @@ text: helptext
     };
-  }
+  };
 
-  const copyRgbToHex = (form, rgba) => {
+  const copyRgbToHex = (form: AlloyComponent, rgba: Rgba) => {
     const hex = HexColour.fromRgba(rgba);
@@ -129,3 +144,3 @@ Form.getField(form, 'hex').each((hexField) => {
       // the hex field to be the six digit version of that same three digit hex code. This is incorrect.
-      if (! Focusing.isFocused(hexField)) {
+      if (!Focusing.isFocused(hexField)) {
         Representing.setValue(form, {
@@ -137,6 +152,6 @@ hex: hex.value()
     return hex;
-  }
+  };
 
-  const copyRgbToForm = (form, rgb: Rgba): void => {
-    const red = rgb.red(), green = rgb.green(), blue = rgb.blue();
+  const copyRgbToForm = (form: AlloyComponent, rgb: Rgba): void => {
+    const red = rgb.red(); const green = rgb.green(); const blue = rgb.blue();
     Representing.setValue(form, { red, green, blue });
@@ -149,3 +164,3 @@ };
         tag: 'div',
-        classes: [ getClass('rgba-preview') ],
+        classes: [getClass('rgba-preview')],
         styles: {
@@ -161,9 +176,9 @@ 'background-color': 'white'
 
-  const updatePreview = (anyInSystem, hex) => {
+  const updatePreview = (anyInSystem: AlloyComponent, hex: Hex) => {
     memPreview.getOpt(anyInSystem).each((preview) => {
       Css.set(preview.element(), 'background-color', '#' + hex.value());
-    })
+    });
   };
 
-  const factory: UiSketcher.SingleSketchFactory<RgbFormDetail, RgbFormSpec> = (detail): SketchSpec => {
+  const factory: UiSketcher.SingleSketchFactory<RgbFormDetail, RgbFormSpec> = (): SketchSpec => {
     const state = {
@@ -176,3 +191,3 @@ red: Fun.constant(Cell(Option.some(255))),
 
-    const copyHexToRgb = (form, hex) => {
+    const copyHexToRgb = (form: AlloyComponent, hex: Hex) => {
       const rgb = RgbaColour.fromHex(hex);
@@ -183,7 +198,7 @@ copyRgbToForm(form, rgb);
 
-    const get = (prop: string): Option<any> => {
+    const get = (prop: keyof typeof state): Option<any> => {
       return state[prop]().get();
     };
 
-    const set = (prop: string, value: Option<any>): void => {
+    const set = (prop: keyof typeof state, value: Option<any>): void => {
       state[prop]().set(value);
@@ -197,3 +212,3 @@ };
             (blue) => {
-              return RgbaColour.rgbaColour(red, green, blue, 1)
+              return RgbaColour.rgbaColour(red, green, blue, 1);
             }
@@ -207,3 +222,3 @@ )
     const setValueRgb = (rgb: Rgba): void => {
-      const red = rgb.red(), green = rgb.green(), blue = rgb.blue();
+      const red = rgb.red(); const green = rgb.green(); const blue = rgb.blue();
       set('red', Option.some(red));
@@ -214,3 +229,3 @@ set('green', Option.some(green));
 
-    const onInvalidInput = (form, simulatedEvent) => {
+    const onInvalidInput = (form: AlloyComponent, simulatedEvent: SimulatedEvent<InputEvent>) => {
       const data = simulatedEvent.event();
@@ -224,3 +239,3 @@ if (data.type() !== 'hex') {
 
-    const onValidHex = (form, value: string) => {
+    const onValidHex = (form: AlloyComponent, value: string) => {
       onValidHexx(form);
@@ -235,3 +250,3 @@ const hex = HexColour.hexColour(value);
       AlloyTriggers.emitWith(form, ColourEvents.fieldsUpdate(), {
-        hex: hex
+        hex
       });
@@ -242,14 +257,18 @@
 
-    const onValidRgb = (form, prop: string, value: string) => {
+    const onValidRgb = (form: AlloyComponent, prop: 'red' | 'green' | 'blue', value: string) => {
       const val = parseInt(value, 10);
       set(prop, Option.some(val));
       getValueRgb().each((rgb) => {
-        const hex = copyRgbToHex(form, rgb)
+        const hex = copyRgbToHex(form, rgb);
         updatePreview(form, hex);
-      })
-    }
+      });
+    };
 
-    const onValidInput = (form, simulatedEvent) => {
+    const isHexInputEvent = (data: InputEvent): data is HexInputEvent => {
+      return data.type() === 'hex';
+    };
+
+    const onValidInput = (form: AlloyComponent, simulatedEvent: SimulatedEvent<InputEvent>) => {
       const data = simulatedEvent.event();
-      if (data.type() === 'hex') {
+      if (isHexInputEvent(data)) {
         onValidHex(form, data.value());
@@ -259,9 +278,9 @@ } else {
       }
-    }
+    };
 
-    const formPartStrings = (key) => {
+    const formPartStrings = (key: string) => {
       return {
         label: translate(translatePrefix + key + '.label'),
         description: translate(translatePrefix + key + '.description')
-      }
+      };
     };
@@ -280,3 +299,3 @@
             tag: 'form',
-            classes: [ getClass('rgb-form') ],
+            classes: [getClass('rgb-form')],
             attributes: { 'aria-label': translate('aria.color.picker') }
@@ -307,3 +326,3 @@ },
         apis: {
-          updateHex (form, hex) {
+          updateHex(form: AlloyComponent, hex: Hex) {
             Representing.setValue(form, {
@@ -320,15 +339,19 @@ hex: hex.value()
 
-  const RgbForm = Sketcher.single({
-    factory: factory,
+  interface Apis {
+    updateHex(form: AlloyComponent, hex: Hex): void;
+  }
+
+  const rgbFormSketcher = Sketcher.single({
+    factory,
     name: 'RgbForm',
-    configFields: [ ],
+    configFields: [],
     apis: {
-      updateHex (apis, form, hex) {
+      updateHex(apis: Apis, form: AlloyComponent, hex: Hex) {
         apis.updateHex(form, hex);
       }
     },
-    extraApis: { }
+    extraApis: {}
   }) as RgbFormSketcher;
 
-  return RgbForm;
+  return rgbFormSketcher;
 };
@@ -338,2 +361,2 @@
   rgbFormFactory
-}
+};

src/main/ts/ephox/acid/gui/components/SaturationBrightnessPalette.ts

@@ -0,4 +1,4 @@
+import { AlloyComponent, AlloyTriggers, Behaviour, Composing, Focusing, Sketcher, SketchSpec, Slider, SliderTypes, UiSketcher } from '@ephox/alloy';
+import { HTMLCanvasElement } from '@ephox/dom-globals';
 import { Fun, Option } from '@ephox/katamari';
-import { Behaviour, Composing, Focusing, Slider, Tabstopping, SketchSpec, UiSketcher, Sketcher, AlloyTriggers, AlloyComponent } from '@ephox/alloy';
-
 import { Rgba } from '../../api/colour/ColourTypes';
@@ -8,2 +8,3 @@ import * as RgbaColour from '../../api/colour/RgbaColour';
 
+// tslint:disable:no-empty-interface
 export interface SaturationBrightnessPaletteDetail extends Sketcher.SingleSketchDetail {
@@ -14,8 +15,10 @@ }
 }
+// tslint:enable:no-empty-interface
+
 export interface SaturationBrightnessPaletteSketcher extends Sketcher.SingleSketch<SaturationBrightnessPaletteSpec, SaturationBrightnessPaletteDetail> {
   setRgba: (slider: AlloyComponent, colour: Rgba) => void;
-};
+}
 
-var paletteFactory = (translate, getClass) => {
-  var spectrum = Slider.parts().spectrum({
+const paletteFactory = (_translate: (key: string) => string, getClass: (key: string) => string) => {
+  const spectrumPart = Slider.parts().spectrum({
     dom: {
@@ -26,7 +29,7 @@ tag: 'canvas',
       },
-      classes: [ getClass('sv-palette-spectrum') ]
+      classes: [getClass('sv-palette-spectrum')]
     }
   });
 
-  var thumb = Slider.parts().thumb({
+  const thumbPart = Slider.parts().thumb({
     dom: {
@@ -37,10 +40,13 @@ tag: 'div',
       },
-      classes: [ getClass('sv-palette-thumb') ],
-      innerHtml: `<div class=${getClass("sv-palette-inner-thumb")} role="presentation"></div>`
+      classes: [getClass('sv-palette-thumb')],
+      innerHtml: `<div class=${getClass('sv-palette-inner-thumb')} role="presentation"></div>`
     }
   });
 
-  const setColour = (canvas, rgba: string): void => {
+  const setColour = (canvas: HTMLCanvasElement, rgba: string): void => {
     const { width, height } = canvas;
     const ctx = canvas.getContext('2d');
+    if (ctx === null) {
+      return;
+    }
 
@@ -63,3 +69,3 @@ ctx.fillStyle = rgba;
 
-  const setSliderColour = (slider, rgba: Rgba): void => {
+  const setSliderColour = (slider: AlloyComponent, rgba: Rgba): void => {
     // Very open to a better way of doing this.
@@ -70,3 +76,3 @@ const canvas = slider.components()[0].element().dom();
 
-  const factory: UiSketcher.SingleSketchFactory<SaturationBrightnessPaletteDetail, SaturationBrightnessPaletteSpec> = (detail): SketchSpec => {
+  const factory: UiSketcher.SingleSketchFactory<SaturationBrightnessPaletteDetail, SaturationBrightnessPaletteSpec> = (_detail): SketchSpec => {
     const getInitialValue = Fun.constant({
@@ -77,9 +83,9 @@ x: Fun.constant(0),
 
-    const onChange = (slider, _thumb, value) => {
+    const onChange = (slider: AlloyComponent, _thumb: AlloyComponent, value: number | SliderTypes.SliderValue) => {
       AlloyTriggers.emitWith(slider, ColourEvents.paletteUpdate(), {
         value
-      })
+      });
     };
 
-    const onInit = (_slider, _thumb, spectrum, _value) => {
+    const onInit = (_slider: AlloyComponent, _thumb: AlloyComponent, spectrum: AlloyComponent, _value: number | SliderTypes.SliderValue) => {
       // Maybe make this initial value configurable?
@@ -93,3 +99,3 @@ setColour(spectrum.element().dom(), RgbaColour.toString(RgbaColour.red()));
       }),
-      Focusing.config({ })
+      Focusing.config({})
     ]);
@@ -103,3 +109,3 @@
         },
-        classes: [ getClass('sv-palette') ]
+        classes: [getClass('sv-palette')]
       },
@@ -112,4 +118,4 @@ model: {
       components: [
-        spectrum,
-        thumb
+        spectrumPart,
+        thumbPart
       ],
@@ -122,15 +128,15 @@ onChange,
 
-  const SaturationBrightnessPalette = Sketcher.single({
-    factory: factory,
+  const saturationBrightnessPaletteSketcher = Sketcher.single({
+    factory,
     name: 'SaturationBrightnessPalette',
-    configFields: [ ],
+    configFields: [],
     apis: {
-      setRgba: (apis, slider, rgba) => {
+      setRgba: (_apis: {}, slider: AlloyComponent, rgba: Rgba) => {
         setSliderColour(slider, rgba);
       }
     },
-    extraApis: { }
+    extraApis: {}
   }) as SaturationBrightnessPaletteSketcher;
 
-  return SaturationBrightnessPalette;
+  return saturationBrightnessPaletteSketcher;
 };
@@ -137,0 +143,0 @@

src/test/ts/atomic/ConversionsTest.ts

@@ -0,8 +1,6 @@
+import { assert, UnitTest } from '@ephox/bedrock';
+import * as HexColour from '../../../main/ts/ephox/acid/api/colour/HexColour';
 import * as RgbaColour from '../../../main/ts/ephox/acid/api/colour/RgbaColour';
-import * as HexColour from '../../../main/ts/ephox/acid/api/colour/HexColour';
-import * as HsvColour from '../../../main/ts/ephox/acid/api/colour/HsvColour';
-import { Struct } from '@ephox/katamari';
-import { UnitTest, assert } from '@ephox/bedrock';
 
-UnitTest.test('SplitMenuTest', function() {
+UnitTest.test('ConversionsTest', function () {
   const rgbaBlack = RgbaColour.rgbaColour(0, 0, 0, 1);
@@ -16,3 +14,2 @@ const rgbaWhite = RgbaColour.rgbaColour(255, 255, 255, 1);
   assert.eq('ffffff', hexWhite.value());
-});
-
+});

tsconfig.json

@@ -7,5 +7,7 @@ {
     "lib": ["es2015"],
+    "types": [],
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
+    "strict": true,
     "outDir": "lib",
@@ -12,0 +14,0 @@ "baseUrl": ".",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100738

increased by5.39%

Lines of code

1765

increased by5.06%

Worsened metrics

Dev dependency count

7

increased by75%

No dependency changes