diff --git a/packages/mosaic/list/list-selection.component.spec.ts b/packages/mosaic/list/list-selection.component.spec.ts index 34bf93232..6d99bef27 100644 --- a/packages/mosaic/list/list-selection.component.spec.ts +++ b/packages/mosaic/list/list-selection.component.spec.ts @@ -11,7 +11,7 @@ import { createKeyboardEvent, dispatchFakeEvent, dispatchEvent, - dispatchKeyboardEvent + dispatchKeyboardEvent, createMouseEvent } from '@ptsecurity/cdk/testing'; import { @@ -151,21 +151,23 @@ describe('McListSelection without forms', () => { expect(selectList.selected.length).toBe(0); - testListItem._handleClick(); + const event = createMouseEvent('click'); + + testListItem.handleClick(event); fixture.detectChanges(); expect(selectList.selected.length).toBe(0); }); it('should be able to use keyboard select with SPACE', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE); const selectList = selectionList.injector.get(McListSelection).selectedOptions; expect(selectList.selected.length).toBe(0); manager.updateActiveItem(1); - selectionList.componentInstance._onKeyDown(SPACE_EVENT); + selectionList.componentInstance.onKeyDown(SPACE_EVENT); fixture.detectChanges(); @@ -174,14 +176,14 @@ describe('McListSelection without forms', () => { }); it('should be able to select an item using ENTER', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; const testListItem: HTMLElement = listOptions[1].nativeElement; const ENTER_EVENT: KeyboardEvent = createKeyboardEvent('keydown', ENTER, testListItem); const selectList = selectionList.injector.get(McListSelection).selectedOptions; expect(selectList.selected.length).toBe(0); manager.updateActiveItem(1); - selectionList.componentInstance._onKeyDown(ENTER_EVENT); + selectionList.componentInstance.onKeyDown(ENTER_EVENT); fixture.detectChanges(); @@ -191,7 +193,7 @@ describe('McListSelection without forms', () => { // todo restore this TC xit('should restore focus if active option is destroyed', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; listOptions[3].componentInstance.focus(); @@ -207,12 +209,12 @@ describe('McListSelection without forms', () => { const testListItem = listOptions[2].nativeElement as HTMLElement; const UP_EVENT: KeyboardEvent = createKeyboardEvent('keydown', UP_ARROW, testListItem); - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; - listOptions[2].componentInstance.focus(); + manager.setActiveItem(2); expect(manager.activeItemIndex).toEqual(2); - selectionList.componentInstance._onKeyDown(UP_EVENT); + selectionList.componentInstance.onKeyDown(UP_EVENT); fixture.detectChanges(); @@ -220,23 +222,23 @@ describe('McListSelection without forms', () => { }); it('should focus and toggle the next item when pressing SHIFT + UP_ARROW', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; const upKeyEvent = createKeyboardEvent('keydown', UP_ARROW); Object.defineProperty(upKeyEvent, 'shiftKey', { get: () => true }); - listOptions[3].componentInstance.focus(); + manager.setActiveItem(3); expect(manager.activeItemIndex).toBe(3); expect(listOptions[1].componentInstance.selected).toBe(false); expect(listOptions[2].componentInstance.selected).toBe(false); - selectionList.componentInstance._onKeyDown(upKeyEvent); + selectionList.componentInstance.onKeyDown(upKeyEvent); fixture.detectChanges(); expect(listOptions[1].componentInstance.selected).toBe(false); expect(listOptions[2].componentInstance.selected).toBe(true); - selectionList.componentInstance._onKeyDown(upKeyEvent); + selectionList.componentInstance.onKeyDown(upKeyEvent); fixture.detectChanges(); expect(listOptions[1].componentInstance.selected).toBe(true); @@ -244,35 +246,35 @@ describe('McListSelection without forms', () => { }); it('should focus next item when press DOWN ARROW', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; - listOptions[2].componentInstance.focus(); + manager.setActiveItem(2); expect(manager.activeItemIndex).toEqual(2); - selectionList.componentInstance._onKeyDown(createKeyboardEvent('keydown', DOWN_ARROW)); + selectionList.componentInstance.onKeyDown(createKeyboardEvent('keydown', DOWN_ARROW)); fixture.detectChanges(); expect(manager.activeItemIndex).toEqual(3); }); it('should focus and toggle the next item when pressing SHIFT + DOWN_ARROW', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; const downKeyEvent = createKeyboardEvent('keydown', DOWN_ARROW); Object.defineProperty(downKeyEvent, 'shiftKey', { get: () => true }); - listOptions[1].componentInstance.focus(); + manager.setActiveItem(1); expect(manager.activeItemIndex).toBe(1); expect(listOptions[2].componentInstance.selected).toBe(false); expect(listOptions[3].componentInstance.selected).toBe(false); - selectionList.componentInstance._onKeyDown(downKeyEvent); + selectionList.componentInstance.onKeyDown(downKeyEvent); fixture.detectChanges(); expect(listOptions[2].componentInstance.selected).toBe(true); expect(listOptions[3].componentInstance.selected).toBe(false); - selectionList.componentInstance._onKeyDown(downKeyEvent); + selectionList.componentInstance.onKeyDown(downKeyEvent); fixture.detectChanges(); expect(listOptions[2].componentInstance.selected).toBe(true); @@ -280,7 +282,7 @@ describe('McListSelection without forms', () => { }); it('should be able to focus the first item when pressing HOME', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; expect(manager.activeItemIndex).toBe(-1); const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', HOME); @@ -291,7 +293,7 @@ describe('McListSelection without forms', () => { }); it('should focus the last item when pressing END', () => { - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; expect(manager.activeItemIndex).toBe(-1); const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', END); @@ -303,7 +305,7 @@ describe('McListSelection without forms', () => { xit('should be able to jump focus down to an item by typing', fakeAsync(() => { const listEl = selectionList.nativeElement; - const manager = selectionList.componentInstance._keyManager; + const manager = selectionList.componentInstance.keyManager; expect(manager.activeItemIndex).toBe(-1); @@ -541,7 +543,9 @@ describe('McListSelection without forms', () => { expect(selectList.selected.length).toBe(0); - testListItem._handleClick(); + const event = createMouseEvent('click'); + + testListItem.handleClick(event); fixture.detectChanges(); expect(selectList.selected.length).toBe(0); @@ -627,7 +631,7 @@ xdescribe('McListSelection with forms', () => { expect(fixture.componentInstance.selectedOptions.length) .toBe(0, 'Expected no options to be selected by default'); - dispatchFakeEvent(listOptions[0]._getHostElement(), 'click'); + dispatchFakeEvent(listOptions[0].getHostElement(), 'click'); fixture.detectChanges(); tick(); diff --git a/packages/mosaic/list/list-selection.component.ts b/packages/mosaic/list/list-selection.component.ts index 4116c04d9..494527fb4 100644 --- a/packages/mosaic/list/list-selection.component.ts +++ b/packages/mosaic/list/list-selection.component.ts @@ -17,22 +17,28 @@ import { OnInit, ViewChild } from '@angular/core'; - import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; - -import { Subscription } from 'rxjs'; - import { FocusKeyManager, IFocusableOption } from '@ptsecurity/cdk/a11y'; import { SelectionModel } from '@ptsecurity/cdk/collections'; -import { END, ENTER, HOME, PAGE_DOWN, PAGE_UP, SPACE } from '@ptsecurity/cdk/keycodes'; - +import { + DOWN_ARROW, + END, + ENTER, + hasModifierKey, + HOME, LEFT_ARROW, + PAGE_DOWN, + PAGE_UP, RIGHT_ARROW, + SPACE, + TAB, + UP_ARROW +} from '@ptsecurity/cdk/keycodes'; import { McLine, - McLineSetter, CanDisable, mixinDisabled, toBoolean, CanDisableCtor } from '@ptsecurity/mosaic/core'; +import { Subscription } from 'rxjs'; /** @@ -48,22 +54,22 @@ import { class: 'mc-list-option', '[class.mc-selected]': 'selected', - '[class.mc-focused]': '_hasFocus', - '(focus)': '_handleFocus()', - '(blur)': '_handleBlur()', - '(click)': '_handleClick()' + '[class.mc-focused]': 'hasFocus', + '(focus)': 'handleFocus()', + '(blur)': 'handleBlur()', + '(click)': 'handleClick($event)' }, templateUrl: 'list-option.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush }) -export class McListOption implements AfterContentInit, OnDestroy, OnInit, IFocusableOption { - _hasFocus: boolean = false; +export class McListOption implements OnDestroy, OnInit, IFocusableOption { + hasFocus: boolean = false; - @ContentChildren(McLine) _lines: QueryList; + @ContentChildren(McLine) lines: QueryList; - @ViewChild('text') _text: ElementRef; + @ViewChild('text') text: ElementRef; // Whether the label should appear before or after the checkbox. Defaults to 'after' @Input() checkboxPosition: 'before' | 'after' = 'after'; @@ -84,6 +90,8 @@ export class McListOption implements AfterContentInit, OnDestroy, OnInit, IFocus } } + private _disabled = false; + @Input() get selected(): boolean { return this.listSelection.selectedOptions && this.listSelection.selectedOptions.isSelected(this) || false; @@ -95,13 +103,11 @@ export class McListOption implements AfterContentInit, OnDestroy, OnInit, IFocus if (isSelected !== this._selected) { this.setSelected(isSelected); - this.listSelection._reportValueChange(); + this.listSelection.reportValueChange(); } } - private _lineSetter: McLineSetter; private _selected = false; - private _disabled = false; constructor( private _element: ElementRef, @@ -128,10 +134,6 @@ export class McListOption implements AfterContentInit, OnDestroy, OnInit, IFocus } } - ngAfterContentInit() { - this._lineSetter = new McLineSetter(this._lines, this._element); - } - ngOnDestroy(): void { if (this.selected) { // We have to delay this until the next tick in order @@ -139,7 +141,7 @@ export class McListOption implements AfterContentInit, OnDestroy, OnInit, IFocus Promise.resolve().then(() => this.selected = false); } - this.listSelection._removeOptionFromList(this); + this.listSelection.removeOptionFromList(this); } toggle(): void { @@ -148,12 +150,10 @@ export class McListOption implements AfterContentInit, OnDestroy, OnInit, IFocus focus(): void { this._element.nativeElement.focus(); - - this.listSelection.setFocusedOption(this); } getLabel() { - return this._text ? this._text.nativeElement.textContent : ''; + return this.text ? this.text.nativeElement.textContent : ''; } setSelected(selected: boolean) { @@ -170,29 +170,29 @@ export class McListOption implements AfterContentInit, OnDestroy, OnInit, IFocus this._changeDetector.markForCheck(); } - _getHeight(): number { + getHeight(): number { return this._element.nativeElement.getClientRects()[0].height; } - _handleClick() { + handleClick($event) { if (this.disabled) { return; } - this.listSelection.setFocusedOption(this); + this.listSelection.setFocusedOption(this, $event); } - _handleFocus() { - if (this.disabled || this._hasFocus) { return; } + handleFocus() { + if (this.disabled || this.hasFocus) { return; } - this._hasFocus = true; + this.hasFocus = true; } - _handleBlur() { - this._hasFocus = false; + handleBlur() { + this.hasFocus = false; - this.listSelection._onTouched(); + this.listSelection.onTouched(); } - _getHostElement(): HTMLElement { + getHostElement(): HTMLElement { return this._element.nativeElement; } } @@ -204,12 +204,9 @@ export const MC_SELECTION_LIST_VALUE_ACCESSOR: any = { multi: true }; -// Change event that is being fired whenever the selected state of an option changes. */ export class McListSelectionChange { constructor( - // Reference to the selection list that emitted the event. public source: McListSelection, - // Reference to the option that has been changed. public option: McListOption ) {} } @@ -217,6 +214,7 @@ export class McListSelectionChange { export class McListSelectionBase {} +// tslint:disable-next-line:naming-convention export const _McListSelectionMixinBase: CanDisableCtor & typeof McListSelectionBase = mixinDisabled(McListSelectionBase); @@ -232,8 +230,8 @@ export const _McListSelectionMixinBase: CanDisableCtor & typeof McListSelectionB class: 'mc-list-selection', '[tabIndex]': 'tabIndex', '(focus)': 'focus()', - '(blur)': '_onTouched()', - '(keydown)': '_onKeyDown($event)', + '(blur)': 'onTouched()', + '(keydown)': 'onKeyDown($event)', '(window:resize)': 'updateScrollSize()' }, providers: [MC_SELECTION_LIST_VALUE_ACCESSOR], @@ -242,7 +240,7 @@ export const _McListSelectionMixinBase: CanDisableCtor & typeof McListSelectionB export class McListSelection extends _McListSelectionMixinBase implements IFocusableOption, CanDisable, AfterContentInit, ControlValueAccessor { - _keyManager: FocusKeyManager; + keyManager: FocusKeyManager; // The option components contained within this selection-list. @ContentChildren(McListOption) options: QueryList; @@ -253,10 +251,6 @@ export class McListSelection extends _McListSelectionMixinBase implements noUnselect: boolean; multiple: boolean; - // todo temporary solution - withShift: boolean; - withCtrl: boolean; - @Input() horizontal: boolean = false; // Emits a change event whenever the selected state of an option changes. @@ -265,12 +259,12 @@ export class McListSelection extends _McListSelectionMixinBase implements selectedOptions: SelectionModel; // Used for storing the values that were assigned before the options were initialized. - private _tempValues: string[] | null; + private tempValues: string[] | null; - private _modelChanges = Subscription.EMPTY; + private modelChanges = Subscription.EMPTY; constructor( - private _element: ElementRef, + private element: ElementRef, @Attribute('tabindex') tabIndex: string, @Attribute('auto-select') autoSelect: string, @Attribute('no-unselect') noUnselect: string, @@ -290,18 +284,18 @@ export class McListSelection extends _McListSelectionMixinBase implements ngAfterContentInit(): void { this.horizontal = toBoolean(this.horizontal); - this._keyManager = new FocusKeyManager(this.options) + this.keyManager = new FocusKeyManager(this.options) .withTypeAhead() .withVerticalOrientation(!this.horizontal) .withHorizontalOrientation(this.horizontal ? 'ltr' : null); - if (this._tempValues) { - this._setOptionsFromValues(this._tempValues); - this._tempValues = null; + if (this.tempValues) { + this.setOptionsFromValues(this.tempValues); + this.tempValues = null; } // Sync external changes to the model back to the options. - this._modelChanges = this.selectedOptions.onChange!.subscribe((event) => { + this.modelChanges = this.selectedOptions.onChange!.subscribe((event) => { for (const item of event.added) { item.selected = true; } @@ -315,38 +309,41 @@ export class McListSelection extends _McListSelectionMixinBase implements } ngOnDestroy() { - this._modelChanges.unsubscribe(); + this.modelChanges.unsubscribe(); } focus() { - this._element.nativeElement.focus(); + this.element.nativeElement.focus(); } selectAll() { this.options.forEach((option) => option.setSelected(true)); - this._reportValueChange(); + this.reportValueChange(); } deselectAll() { this.options.forEach((option) => option.setSelected(false)); - this._reportValueChange(); + this.reportValueChange(); } updateScrollSize(): void { if (this.horizontal || !this.options.first) { return; } - this._keyManager.withScrollSize(Math.floor(this._getHeight() / this.options.first._getHeight())); + this.keyManager.withScrollSize(Math.floor(this.getHeight() / this.options.first.getHeight())); } // Sets the focused option of the selection-list. - setFocusedOption(option: McListOption): void { - this._keyManager.updateActiveItem(option); + setFocusedOption(option: McListOption, $event?: KeyboardEvent): void { + this.keyManager.updateActiveItem(option); + + const withShift = $event ? hasModifierKey($event, 'shiftKey') : false; + const withCtrl = $event ? hasModifierKey($event, 'ctrlKey') : false; - if (this.withShift && this.multiple) { - const previousIndex = this._keyManager.previousActiveItemIndex; - const activeIndex = this._keyManager.activeItemIndex; + if (withShift && this.multiple) { + const previousIndex = this.keyManager.previousActiveItemIndex; + const activeIndex = this.keyManager.activeItemIndex; if (previousIndex < activeIndex) { this.options.forEach((item, index) => { @@ -357,12 +354,9 @@ export class McListSelection extends _McListSelectionMixinBase implements if (index >= activeIndex && index <= previousIndex) { item.setSelected(true); } }); } + } else if (withCtrl) { - this.withShift = false; - } else if (this.withCtrl) { - this.withCtrl = false; - - if (!this._canDeselectLast(option)) { return; } + if (!this.canDeselectLast(option)) { return; } option.toggle(); } else { @@ -372,27 +366,27 @@ export class McListSelection extends _McListSelectionMixinBase implements } } - this._emitChangeEvent(option); - this._reportValueChange(); + this.emitChangeEvent(option); + this.reportValueChange(); } // Implemented as part of ControlValueAccessor. writeValue(values: string[]): void { if (this.options) { - this._setOptionsFromValues(values || []); + this.setOptionsFromValues(values || []); } else { - this._tempValues = values; + this.tempValues = values; } } // Implemented as part of ControlValueAccessor. registerOnChange(fn: (value: any) => void): void { - this._onChange = fn; + this.onChange = fn; } // Implemented as part of ControlValueAccessor. registerOnTouched(fn: () => void): void { - this._onTouched = fn; + this.onTouched = fn; } // Implemented as a part of ControlValueAccessor. @@ -408,107 +402,117 @@ export class McListSelection extends _McListSelectionMixinBase implements // Toggles the selected state of the currently focused option. toggleFocusedOption(): void { - const focusedIndex = this._keyManager.activeItemIndex; + const focusedIndex = this.keyManager.activeItemIndex; - if (focusedIndex != null && this._isValidIndex(focusedIndex)) { + if (focusedIndex != null && this.isValidIndex(focusedIndex)) { const focusedOption: McListOption = this.options.toArray()[focusedIndex]; - if (focusedOption && this._canDeselectLast(focusedOption)) { + if (focusedOption && this.canDeselectLast(focusedOption)) { focusedOption.toggle(); // Emit a change event because the focused option changed its state through user interaction. - this._emitChangeEvent(focusedOption); + this.emitChangeEvent(focusedOption); } } } - _canDeselectLast(listOption: McListOption): boolean { + canDeselectLast(listOption: McListOption): boolean { return !(this.noUnselect && this.selectedOptions.selected.length === 1 && listOption.selected); } - _getHeight(): number { - return this._element.nativeElement.getClientRects()[0].height; + getHeight(): number { + return this.element.nativeElement.getClientRects()[0].height; } // View to model callback that should be called if the list or its options lost focus. - _onTouched: () => void = () => {}; + // tslint:disable-next-line:no-empty + onTouched: () => void = () => {}; // Removes an option from the selection list and updates the active item. - _removeOptionFromList(option: McListOption) { - if (option._hasFocus) { - const optionIndex = this._getOptionIndex(option); + removeOptionFromList(option: McListOption) { + if (option.hasFocus) { + const optionIndex = this.getOptionIndex(option); // Check whether the option is the last item if (optionIndex > 0) { - this._keyManager.setPreviousItemActive(); + this.keyManager.setPreviousItemActive(); } else if (optionIndex === 0 && this.options.length > 1) { - this._keyManager.setNextItemActive(); + this.keyManager.setNextItemActive(); } } } - _onKeyDown(event: KeyboardEvent) { + onKeyDown(event: KeyboardEvent) { const keyCode = event.keyCode; - this.withShift = event.shiftKey; - this.withCtrl = event.ctrlKey; switch (keyCode) { case SPACE: case ENTER: this.toggleFocusedOption(); - event.preventDefault(); + + break; + + case TAB: + this.keyManager.tabOut.next(); + + return; + + case DOWN_ARROW: + this.keyManager.setNextItemActive(); + + break; + case UP_ARROW: + this.keyManager.setPreviousItemActive(); break; case HOME: - this._keyManager.setFirstItemActive(); - event.preventDefault(); + this.keyManager.setFirstItemActive(); break; case END: - this._keyManager.setLastItemActive(); - event.preventDefault(); + this.keyManager.setLastItemActive(); break; case PAGE_UP: - if (!this.horizontal) { this._keyManager.setPreviousPageItemActive(); } - - event.preventDefault(); + this.keyManager.setPreviousPageItemActive(); break; case PAGE_DOWN: - if (!this.horizontal) { this._keyManager.setNextPageItemActive(); } - - event.preventDefault(); + this.keyManager.setNextPageItemActive(); break; default: - this._keyManager.onKeydown(event); + return; } + + event.preventDefault(); + + this.setFocusedOption(this.keyManager.activeItem as McListOption, event); } // Reports a value change to the ControlValueAccessor - _reportValueChange() { + reportValueChange() { if (this.options) { - this._onChange(this.getSelectedOptionValues()); + this.onChange(this.getSelectedOptionValues()); } } // Emits a change event if the selected state of an option changed. - _emitChangeEvent(option: McListOption) { + emitChangeEvent(option: McListOption) { this.selectionChange.emit(new McListSelectionChange(this, option)); } // Returns the option with the specified value. - private _getOptionByValue(value: string): McListOption | undefined { + private getOptionByValue(value: string): McListOption | undefined { return this.options.find((option) => option.value === value); } // Sets the selected options based on the specified values. - private _setOptionsFromValues(values: string[]) { + private setOptionsFromValues(values: string[]) { this.options.forEach((option) => option.setSelected(false)); values - .map((value) => this._getOptionByValue(value)) + .map((value) => this.getOptionByValue(value)) .filter(Boolean) .forEach((option) => option!.setSelected(true)); } @@ -518,15 +522,15 @@ export class McListSelection extends _McListSelectionMixinBase implements * @param index The index to be checked. * @returns True if the index is valid for our list of options. */ - private _isValidIndex(index: number): boolean { + private isValidIndex(index: number): boolean { return index >= 0 && index < this.options.length; } // Returns the index of the specified list option. - private _getOptionIndex(option: McListOption): number { + private getOptionIndex(option: McListOption): number { return this.options.toArray().indexOf(option); } // View to model callback that should be called whenever the selected options change. - private _onChange: (value: any) => void = (_: any) => {}; + private onChange: (value: any) => void = (_: any) => {}; } diff --git a/packages/mosaic/list/list.component.spec.ts b/packages/mosaic/list/list.component.spec.ts index 5cf8a70e4..e3b8d1c40 100644 --- a/packages/mosaic/list/list.component.spec.ts +++ b/packages/mosaic/list/list.component.spec.ts @@ -34,11 +34,11 @@ describe('McList', () => { expect(listItemEl.nativeElement.classList).not.toContain('mc-list-item-focus'); - listItem.componentInstance._handleFocus(); + listItem.componentInstance.handleFocus(); fixture.detectChanges(); expect(listItemEl.nativeElement.classList).toContain('mc-focused'); - listItem.componentInstance._handleBlur(); + listItem.componentInstance.handleBlur(); fixture.detectChanges(); expect(listItemEl.nativeElement.classList).not.toContain('mc-list-item-focus'); }); diff --git a/packages/mosaic/list/list.component.ts b/packages/mosaic/list/list.component.ts index d52196d72..78f37bf95 100644 --- a/packages/mosaic/list/list.component.ts +++ b/packages/mosaic/list/list.component.ts @@ -38,8 +38,8 @@ export class McListItemBase {} selector: 'mc-list-item, a[mc-list-item]', host: { class: 'mc-list-item', - '(focus)': '_handleFocus()', - '(blur)': '_handleBlur()' + '(focus)': 'handleFocus()', + '(blur)': 'handleBlur()' }, templateUrl: './list-item.html', encapsulation: ViewEncapsulation.None, @@ -47,27 +47,27 @@ export class McListItemBase {} changeDetection: ChangeDetectionStrategy.OnPush }) export class McListItem extends McListItemBase implements AfterContentInit { - @ContentChildren(McLine) _lines: QueryList; + @ContentChildren(McLine) lines: QueryList; - private _lineSetter: McLineSetter; + private lineSetter: McLineSetter; constructor(private _element: ElementRef) { super(); } ngAfterContentInit() { - this._lineSetter = new McLineSetter(this._lines, this._element); + this.lineSetter = new McLineSetter(this.lines, this._element); } - _handleFocus() { + handleFocus() { this._element.nativeElement.classList.add('mc-focused'); } - _handleBlur() { + handleBlur() { this._element.nativeElement.classList.remove('mc-focused'); } - _getHostElement(): HTMLElement { + getHostElement(): HTMLElement { return this._element.nativeElement; } } diff --git a/packages/mosaic/popover/popover.spec.ts b/packages/mosaic/popover/popover.spec.ts index 7facecfbb..21dd3c0a4 100644 --- a/packages/mosaic/popover/popover.spec.ts +++ b/packages/mosaic/popover/popover.spec.ts @@ -46,7 +46,6 @@ describe('McPopover', () => { it('mcPopoverTrigger = hover', fakeAsync(() => { const expectedValue = '_TEST1'; const triggerElement = component.test1.nativeElement; - console.log(overlayContainerElement.textContent, 123123); expect(overlayContainerElement.textContent).not.toEqual(expectedValue); @@ -83,7 +82,6 @@ describe('McPopover', () => { componentFixture.detectChanges(); tick(); componentFixture.detectChanges(); - console.log(overlayContainerElement.textContent); expect(overlayContainerElement.textContent).not.toEqual(expectedValue); }));