Merge branch 'master' into dynamic_overflow

Author: zvonimirfras

src/checkbox/checkbox.component.ts

@@ -137,14 +137,14 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Reflects whether the checkbox state is indeterminate.
 	 * @readonly
 	 */
-	@Input() get indeterminate() {
+	get indeterminate() {
 		return this._indeterminate;
 	}
 
 	/**
 	 * Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
 	 */
-	set indeterminate(indeterminate: boolean) {
+	@Input() set indeterminate(indeterminate: boolean) {
 		let changed = this._indeterminate !== indeterminate;
 		this._indeterminate = indeterminate;
 
@@ -161,14 +161,14 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Returns value `true` if state is selected for the checkbox.
 	 * @readonly
 	 */
-	@Input() get checked() {
+	get checked() {
 		return this._checked;
 	}
 
 	/**
 	 * Updating the state of a checkbox to match the state of the parameter passed in.
 	 */
-	set checked (checked: boolean) {
+	@Input() set checked (checked: boolean) {
 		if (checked !== this.checked) {
 			if (this._indeterminate) {
 				Promise.resolve().then(() => {

src/code-snippet/code-snippet.component.ts

@@ -96,6 +96,13 @@ export class CodeSnippet {
 	@Input() display: SnippetType = SnippetType.single;
 	@Input() translations = this.i18n.get().CODE_SNIPPET;
 
+	/**
+	 * Set to `"light"` to apply the light style on the code snippet.
+	 * @type {"light" | "dark"}
+	 * @memberof CodeSnippet
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	/**
 	 * Text displayed in the tooltip when user clicks button to copy code.
 	 *
@@ -122,6 +129,9 @@ export class CodeSnippet {
 	@HostBinding("class.bx--snippet--inline") get snippetInlineClass() {
 		return this.display === SnippetType.inline;
 	}
+	@HostBinding("class.bx--snippet--light") get snippetInlineLightClass() {
+		return this.display === SnippetType.inline && this.theme === "light";
+	}
 	@HostBinding("class.bx--btn--copy") get btnCopyClass() {
 		return this.display === SnippetType.inline;
 	}

src/code-snippet/code-snippet.stories.ts

@@ -66,4 +66,10 @@ storiesOf("CodeSnippet", module).addDecorator(
 		props: {
 			inlineCode
 		}
+	}))
+	.add("Inline Light", () => ({
+		template: `Here is some <ibm-code-snippet display="inline" theme="light">{{inlineCode}}</ibm-code-snippet> for you.`,
+		props: {
+			inlineCode
+		}
 	}));

src/content-switcher/content-switcher-option.directive.ts

@@ -15,6 +15,7 @@ export class ContentSwitcherOption {
 		this._active = value;
 		this.selectedClass = value;
 		this.ariaSelected = value;
+		this.tabindex = value ? "0" : "-1";
 	}
 
 	get active() {
@@ -29,6 +30,7 @@ export class ContentSwitcherOption {
 	@HostBinding("class.bx--content-switcher--selected") selectedClass = false;
 	@HostBinding("attr.role") role = "tab";
 	@HostBinding("attr.aria-selected") ariaSelected = false;
+	@HostBinding("attr.tabIndex") tabindex = "-1";
 
 	protected _active = false;
 
@@ -37,4 +39,16 @@ export class ContentSwitcherOption {
 		this.active = true;
 		this.selected.emit(true);
 	}
+
+	@HostListener("focus")
+	onFocus() {
+		this.active = true;
+	}
+
+	@HostListener("blur", ["$event"])
+	onBlur(event) {
+		if (event.relatedTarget) {
+			this.active = false;
+		}
+	}
 }

src/content-switcher/content-switcher.component.ts

@@ -5,9 +5,12 @@ import {
 	QueryList,
 	Output,
 	EventEmitter,
-	AfterViewInit
+	AfterViewInit,
+	HostListener,
+	ElementRef
 } from "@angular/core";
 import { ContentSwitcherOption } from "./content-switcher-option.directive";
+import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
 
 /**
  *
@@ -31,7 +34,10 @@ export class ContentSwitcher implements AfterViewInit {
 
 	@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;
 
+	constructor(protected elementRef: ElementRef) {}
+
 	ngAfterViewInit() {
+		this.options.first.active = true;
 		this.options.forEach(option => {
 			option.selected.subscribe(_ => {
 				const active = option;
@@ -44,4 +50,43 @@ export class ContentSwitcher implements AfterViewInit {
 			});
 		});
 	}
+
+	@HostListener("keydown", ["$event"])
+	hostkeys(event: KeyboardEvent) {
+		const buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(".bx--content-switcher-btn"));
+
+		switch (event.key) {
+			case "Right": // IE specific value
+			case "ArrowRight":
+				event.preventDefault();
+				if (!isFocusInLastItem(event, buttonList))  {
+					const index = buttonList.findIndex(item => item === event.target);
+					buttonList[index + 1].focus();
+				} else {
+					buttonList[0].focus();
+				}
+				break;
+
+			case "Left": // IE specific value
+			case "ArrowLeft":
+				event.preventDefault();
+				if (!isFocusInFirstItem(event, buttonList))  {
+					const index = buttonList.findIndex(item => item === event.target);
+					buttonList[index - 1].focus();
+				} else {
+					buttonList[buttonList.length - 1].focus();
+				}
+				break;
+
+			case "Home":
+				event.preventDefault();
+				buttonList[0].focus();
+				break;
+
+			case "End":
+				event.preventDefault();
+				buttonList[buttonList.length - 1].focus();
+				break;
+		}
+	}
 }

src/dropdown/dropdown.component.ts

@@ -28,7 +28,9 @@ import { I18n } from "./../i18n/i18n.module";
 @Component({
 	selector: "ibm-dropdown",
 	template: `
-	<div class="bx--list-box">
+	<div
+		class="bx--list-box"
+		[ngClass]="{'bx--dropdown--light': theme === 'light'}">
 		<button
 			type="button"
 			#dropdownButton
@@ -82,7 +84,11 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * item selection.
 	 */
 	@Input() type: "single" | "multi" = "single";
-
+	/**
+	 * `light` or `dark` dropdown theme
+	 * @memberof Dropdown
+	 */
+	@Input() theme: "light" | "dark" = "dark";
 	/**
 	 * Set to `true` to disable the dropdown.
 	 */

src/dropdown/dropdown.stories.ts

@@ -41,6 +41,29 @@ storiesOf("Dropdown", module)
 			onClose: action("Dropdown closed")
 		}
 	}))
+	.add("Light", () => ({
+		template: `
+		<ibm-dropdown
+			theme="light"
+			placeholder="Select"
+			[disabled]="disabled"
+			(selected)="selected($event)"
+			(onClose)="onClose($event)">
+			<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
+		</ibm-dropdown>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: object("items", [
+				{ content: "one" },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for dropdown"),
+			onClose: action("Dropdown closed")
+		}
+	}))
 	.add("Multi-select", withNotes({ text: "Notes on multi select" })(() => ({
 		template: `
 		<ibm-dropdown

src/index.ts

@@ -12,6 +12,7 @@ export * from "./forms/forms.module";
 export * from "./i18n/i18n.module";
 export * from "./icon/icon.module";
 export * from "./input/input.module";
+export * from "./link/link.module";
 export * from "./list-group/list-group.module";
 export * from "./loading/loading.module";
 export * from "./modal/modal.module";
@@ -26,5 +27,3 @@ export * from "./switch/switch.module";
 export * from "./table/table.module";
 export * from "./tabs/tabs.module";
 export * from "./tiles/tiles.module";
-export * from "./toggle/toggle.module";
-export * from "./utils/position";

src/link/link.directive.ts

@@ -0,0 +1,47 @@
+import {
+	Directive,
+	HostBinding,
+	Input
+} from "@angular/core";
+
+/**
+ * A convinence directive for applying styling to a link.
+ *
+ * Example:
+ *
+ * ```hmtl
+ * <a href="#" ibmLink>A link</a>
+ * ```
+ *
+ * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/link/code) for more detail.
+ */
+@Directive({
+	selector: "[ibmLink]"
+})
+
+export class Link {
+	@HostBinding("class.bx--link") baseClass = true;
+
+	/**
+	 * Automatically set to `-1` when link is disabled.
+	 * @memberof Link
+	 */
+	@HostBinding("attr.tabindex") tabindex;
+
+	/**
+	 * Set to true to disable link.
+	 * @memberof Link
+	 */
+	@Input()
+	@HostBinding("attr.aria-disabled")
+	set disabled(disabled: boolean) {
+		this._disabled = disabled;
+		this.tabindex = this.disabled ? -1 : null;
+	}
+
+	get disabled(): boolean {
+		return this._disabled;
+	}
+
+	private _disabled;
+}

src/link/link.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Link } from "./link.directive";
+
+export { Link } from "./link.directive";
+
+@NgModule({
+	declarations: [
+		Link
+	],
+	exports: [
+		Link
+	],
+	imports: [
+		CommonModule
+	]
+})
+export class LinkModule {}