feat(api): add new options inline, horizontal and right

Also includes emitting value-change correctly.

Author: yokun

src/client/scripts/rb-checkbox.js

@@ -16,15 +16,6 @@ export class RbCheckbox extends FormControl(RbBase()) {
 			formControl: this.shadowRoot.querySelector('input')
 		});
 	}
-	updated(prevProps, prevState) { // :void (runs before viewReady())
-		if (super.updated) super.updated(prevProps, prevState);
-		if (!this.rb.view.isReady) return;
-		if (prevProps.value === this.value) return;
-		// runs after view updated (required)
-		this.rb.events.emit(this, 'value-changed', {
-			detail: { value: this.value }
-		});
-	}
 
 	/* Properties
 	 *************/
@@ -33,6 +24,9 @@ export class RbCheckbox extends FormControl(RbBase()) {
 			...super.props,
 			kind: props.string,
 			label: props.string,
+			inline: props.boolean,
+			horizontal: props.boolean,
+			right: props.boolean,
 			sublabel: props.string,
 			subtext: props.string,
 			value: Object.assign({}, props.any, {
@@ -63,7 +57,16 @@ export class RbCheckbox extends FormControl(RbBase()) {
 	}
 	async setValue(value) { // :void
 		this.value = !value;
-		await this.validate();
+		// await this.validate();
+	}
+
+	/* Observer
+	 ***********/
+	updating(prevProps) { // :void
+		if (prevProps.value === this.value) return;
+		this.rb.events.emit(this, 'value-changed', {
+			detail: { value: this.value }
+		});
 	}
 
 	/* Event Handlers

src/client/styles/rb-checkbox.scss

@@ -14,6 +14,7 @@
 	@import 'main/checkbox.scss';
 	@import 'main/subtext.scss';
 	// In Order!
+	@import 'main/layout.scss';
 	@import 'main/states.scss';
 	@import 'main/disabled.scss';
 }

src/client/views/rb-checkbox.html

@@ -2,6 +2,9 @@
 	?disabled="${props.disabled}"
 	class="
 		rb-checkbox
+		${props.inline ? 'inline' : ''}
+		${props.horizontal ? 'horizontal' : ''}
+		${props.right ? 'right' : ''}
 		${props._valid ? 'valid' : 'invalid'}
 	">