From 33174bb22a958fa3ef6483598cf0a1d6c62f155d Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Wed, 31 May 2017 17:00:00 -0700 Subject: [PATCH] sync chip --- src/demo-app/chips/chips-demo.html | 14 ++++--- src/demo-app/chips/chips-demo.scss | 6 ++- src/demo-app/chips/chips-demo.ts | 6 --- src/lib/chips/_chips-theme.scss | 35 +++++++++-------- src/lib/chips/chip-input.spec.ts | 9 +++-- src/lib/chips/chip-input.ts | 15 +++++++- src/lib/chips/chip-list.spec.ts | 61 ++++++++++-------------------- src/lib/chips/chip-list.ts | 23 ++++------- src/lib/chips/chip-remove.ts | 14 +++---- src/lib/chips/chip.spec.ts | 16 ++++---- src/lib/chips/chip.ts | 2 +- src/lib/chips/chips.scss | 35 ++++++++--------- 12 files changed, 108 insertions(+), 128 deletions(-) diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html index 46365832a4ed..668579b83d9c 100644 --- a/src/demo-app/chips/chips-demo.html +++ b/src/demo-app/chips/chips-demo.html @@ -44,18 +44,22 @@

Input Container

<md-input-container>.

- - + + {{person.name}} cancel - + + + + +

diff --git a/src/demo-app/chips/chips-demo.scss b/src/demo-app/chips/chips-demo.scss index 80a953ed8beb..66082bb19203 100644 --- a/src/demo-app/chips/chips-demo.scss +++ b/src/demo-app/chips/chips-demo.scss @@ -24,4 +24,8 @@ md-chip-list input { width: 150px; } -} \ No newline at end of file + + .mat-chip-remove.mat-icon { + font-size: 18px; + } +} diff --git a/src/demo-app/chips/chips-demo.ts b/src/demo-app/chips/chips-demo.ts index 76c4030d1889..2b68de3b771c 100644 --- a/src/demo-app/chips/chips-demo.ts +++ b/src/demo-app/chips/chips-demo.ts @@ -46,11 +46,6 @@ export class ChipsDemo { alert(message); } - add(input: HTMLInputElement): void { - if (input.value && input.value.trim() != '') { - this.people.push({ name: input.value.trim() }); - input.value = ''; -======= add(event: MdChipInputEvent): void { let input = event.input; let value = event.value; @@ -71,7 +66,6 @@ export class ChipsDemo { if (index >= 0) { this.people.splice(index, 1); ->>>>>>> feat(chips): Add remove functionality/styling. } } diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss index 196b8519232c..36203c6c1195 100644 --- a/src/lib/chips/_chips-theme.scss +++ b/src/lib/chips/_chips-theme.scss @@ -22,7 +22,7 @@ $mat-chip-line-height: 16px; // The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back // to standard background and foreground colors. - $unselected-background: if($is-dark-theme, #656565, #e0e0e0); + $unselected-background: if($is-dark-theme, mat-color($background, card), #e0e0e0); $unselected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-foreground); $selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080); @@ -46,10 +46,10 @@ $mat-chip-line-height: 16px; .mat-chip-remove { color: $unselected-foreground; opacity: 0.3; + } - &:hover { - opacity: 0.54; - } + .mat-chip-remove:hover { + opacity: 0.54; } } @@ -60,10 +60,10 @@ $mat-chip-line-height: 16px; .mat-chip-remove { color: $selected-foreground; opacity: 0.4; + } - &:hover { - opacity: 0.54; - } + .mat-chip-remove:hover { + opacity: 0.54; } &.mat-primary { @@ -79,17 +79,16 @@ $mat-chip-line-height: 16px; &.mat-warn { background-color: mat-color($warn); color: mat-color($warn, default-contrast); - background-color: mat-color($primary, 500); - color: mat-contrast($primary, 500); .mat-chip-remove { color: mat-contrast($primary, 500); opacity: 0.4; + } - &:hover { - opacity: 0.54; - } + .mat-chip-remove:hover { + opacity: 0.54; } + } &.mat-accent { @@ -99,10 +98,10 @@ $mat-chip-line-height: 16px; .mat-chip-remove { color: mat-contrast($accent, 500); opacity: 0.4; + } - &:hover { - opacity: 0.54; - } + .mat-chip-remove:hover { + opacity: 0.54; } } @@ -113,10 +112,10 @@ $mat-chip-line-height: 16px; .mat-chip-remove { color: mat-contrast($warn, 500); opacity: 0.4; + } - &:hover { - opacity: 0.54; - } + .mat-chip-remove:hover { + opacity: 0.54; } } } diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts index 78549d4fe608..401a7f025c45 100644 --- a/src/lib/chips/chip-input.spec.ts +++ b/src/lib/chips/chip-input.spec.ts @@ -4,7 +4,8 @@ import {Component, DebugElement} from '@angular/core'; import {MdChipInput, MdChipInputEvent} from './chip-input'; import {By} from '@angular/platform-browser'; import {Dir} from '../core/rtl/dir'; -import {FakeKeyboardEvent} from './chip-list.spec'; +import {createKeyboardEvent} from '../core/testing/event-objects'; + import {ENTER, COMMA} from '../core/keyboard/keycodes'; describe('MdChipInput', () => { @@ -42,7 +43,7 @@ describe('MdChipInput', () => { describe('basic behavior', () => { it('emits the (chipAdded) on enter keyup', () => { - let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any; + let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any; spyOn(testChipInput, 'add'); @@ -75,7 +76,7 @@ describe('MdChipInput', () => { describe('[separatorKeys]', () => { it('does not emit (chipAdded) when a non-separator key is pressed', () => { - let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any; + let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any; spyOn(testChipInput, 'add'); testChipInput.separatorKeys = [COMMA]; @@ -86,7 +87,7 @@ describe('MdChipInput', () => { }); it('emits (chipAdded) when a custom separator keys is pressed', () => { - let COMMA_EVENT = new FakeKeyboardEvent(COMMA, inputNativeElement) as any; + let COMMA_EVENT = createKeyboardEvent('keydown', COMMA, inputNativeElement) as any; spyOn(testChipInput, 'add'); testChipInput.separatorKeys = [COMMA]; diff --git a/src/lib/chips/chip-input.ts b/src/lib/chips/chip-input.ts index 9e4e30de9fd2..4a8a1d7f219e 100644 --- a/src/lib/chips/chip-input.ts +++ b/src/lib/chips/chip-input.ts @@ -1,5 +1,6 @@ import {Directive, Output, EventEmitter, Renderer, ElementRef, Input} from '@angular/core'; import {ENTER} from '../core/keyboard/keycodes'; +import {MdChipList} from './chip-list'; export interface MdChipInputEvent { input: HTMLInputElement; @@ -7,14 +8,26 @@ export interface MdChipInputEvent { } @Directive({ - selector: '[mdChipInput], [matChipInput]', + selector: 'input[mdChipList], input[matChipList]', host: { + 'class': 'mat-chip-input', '(keydown)': '_keydown($event)', '(blur)': '_blur()' } }) export class MdChipInput { + _chipList: MdChipList; + + /** Register input for chip list */ + @Input() + set mdChipList(value: MdChipList) { + if (value) { + this._chipList = value; + this._chipList.registerInput(this._inputElement); + } + } + /** * Whether or not the chipAdded event will be emitted when the input is blurred. * diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index c982ea4a23c6..399c183166e1 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -1,24 +1,15 @@ import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; import {Component, DebugElement, QueryList} from '@angular/core'; import {By} from '@angular/platform-browser'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {MdChip, MdChipList, MdChipsModule} from './index'; import {FocusKeyManager} from '../core/a11y/focus-key-manager'; -import {SPACE, LEFT_ARROW, RIGHT_ARROW, TAB} from '../core/keyboard/keycodes'; import {createKeyboardEvent} from '../core/testing/event-objects'; import {MdInputModule} from '../input/index'; -import {FakeEvent} from '../core/a11y/list-key-manager.spec'; -import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE} from '../core/keyboard/keycodes'; +import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, SPACE, TAB} from '../core/keyboard/keycodes'; import {Dir} from '../core/rtl/dir'; -export class FakeKeyboardEvent extends FakeEvent { - constructor(keyCode: number, protected target: HTMLElement) { - super(keyCode); - - this.target = target; - } -} - describe('MdChipList', () => { let fixture: ComponentFixture; let chipListDebugElement: DebugElement; @@ -32,9 +23,9 @@ describe('MdChipList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdChipsModule, MdInputModule], + imports: [MdChipsModule, MdInputModule, NoopAnimationsModule], declarations: [ - StaticChipList, StandardChipList, InputContainerChipList + StandardChipList, InputContainerChipList ], providers: [{ provide: Dir, useFactory: () => { @@ -103,10 +94,6 @@ describe('MdChipList', () => { expect(manager.activeItemIndex).toEqual(2); }); - let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip); - let array = chips.toArray(); - let lastIndex = array.length - 1; - let lastItem = array[lastIndex]; it('focuses the previous item', () => { let array = chips.toArray(); @@ -134,15 +121,11 @@ describe('MdChipList', () => { manager = chipListInstance._keyManager; })); - let RIGHT_EVENT = createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip); - let array = chips.toArray(); - let firstItem = array[0]; - it('LEFT ARROW focuses previous item', () => { let nativeChips = chipListNativeElement.querySelectorAll('md-chip'); let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement; - let LEFT_EVENT = new FakeKeyboardEvent(LEFT_ARROW, lastNativeChip) as any; + let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip); let array = chips.toArray(); let lastIndex = array.length - 1; let lastItem = array[lastIndex]; @@ -164,7 +147,7 @@ describe('MdChipList', () => { let firstNativeChip = nativeChips[0] as HTMLElement; let RIGHT_EVENT: KeyboardEvent = - new FakeKeyboardEvent(RIGHT_ARROW, firstNativeChip) as any; + createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip); let array = chips.toArray(); let firstItem = array[0]; @@ -189,17 +172,12 @@ describe('MdChipList', () => { manager = chipListInstance._keyManager; })); - let SPACE_EVENT = createKeyboardEvent('keydown', SPACE, firstNativeChip); - let firstChip: MdChip = chips.toArray()[0]; - it('RIGHT ARROW focuses previous item', () => { - fixture.detectChanges(); - let nativeChips = chipListNativeElement.querySelectorAll('md-chip'); let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement; let RIGHT_EVENT: KeyboardEvent = - new FakeKeyboardEvent(RIGHT_ARROW, lastNativeChip) as any; + createKeyboardEvent('keydown', RIGHT_ARROW, lastNativeChip); let array = chips.toArray(); let lastIndex = array.length - 1; let lastItem = array[lastIndex]; @@ -220,7 +198,8 @@ describe('MdChipList', () => { let nativeChips = chipListNativeElement.querySelectorAll('md-chip'); let firstNativeChip = nativeChips[0] as HTMLElement; - let LEFT_EVENT: KeyboardEvent = new FakeKeyboardEvent(LEFT_ARROW, firstNativeChip) as any; + let LEFT_EVENT: KeyboardEvent = + createKeyboardEvent('keydown', LEFT_ARROW, firstNativeChip); let array = chips.toArray(); let firstItem = array[0]; @@ -236,18 +215,17 @@ describe('MdChipList', () => { expect(manager.activeItemIndex).toEqual(1); }); - }); - - it('allow focus to escape when tabbing away', fakeAsync(() => { - chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB)); + it('allow focus to escape when tabbing away', fakeAsync(() => { + chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB)); - expect(chipListInstance._tabIndex) + expect(chipListInstance._tabIndex) .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.'); - tick(); + tick(); - expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0'); - })); + expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0'); + })); + }); }); }); @@ -271,7 +249,8 @@ describe('MdChipList', () => { it('DELETE focuses the last chip', () => { let nativeInput = chipListNativeElement.querySelector('input'); - let DELETE_EVENT: KeyboardEvent = new FakeKeyboardEvent(DELETE, nativeInput) as any; + let DELETE_EVENT: KeyboardEvent = + createKeyboardEvent('keydown', DELETE, nativeInput); // Focus the input nativeInput.focus(); @@ -287,7 +266,8 @@ describe('MdChipList', () => { it('BACKSPACE focuses the last chip', () => { let nativeInput = chipListNativeElement.querySelector('input'); - let BACKSPACE_EVENT: KeyboardEvent = new FakeKeyboardEvent(BACKSPACE, nativeInput) as any; + let BACKSPACE_EVENT: KeyboardEvent = + createKeyboardEvent('keydown', BACKSPACE, nativeInput); // Focus the input nativeInput.focus(); @@ -360,7 +340,6 @@ class StandardChipList { Chip 1 Chip 1 Chip 1 - diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 9297cd4e142c..9ff241197bed 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -8,17 +8,15 @@ import { ViewEncapsulation, OnDestroy, ElementRef, - QueryList, Renderer2, } from '@angular/core'; import {MdChip} from './chip'; import {FocusKeyManager} from '../core/a11y/focus-key-manager'; import {coerceBooleanProperty} from '../core/coercion/boolean-property'; -import {SPACE, LEFT_ARROW, RIGHT_ARROW, TAB} from '../core/keyboard/keycodes'; import {Subscription} from 'rxjs/Subscription'; import { - LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, UP_ARROW, DOWN_ARROW + LEFT_ARROW, RIGHT_ARROW, SPACE, BACKSPACE, DELETE, UP_ARROW, DOWN_ARROW } from '../core/keyboard/keycodes'; import {Dir} from '../core/rtl/dir'; @@ -42,8 +40,6 @@ import {Dir} from '../core/rtl/dir'; 'role': 'listbox', '[class.mat-chip-list]': 'true', - '[attr.tabindex]': '_tabIndex', - '(focus)': 'focus($event)', '(keydown)': '_keydown($event)' }, @@ -70,8 +66,8 @@ export class MdChipList implements AfterContentInit, OnDestroy { protected _inputElement: HTMLInputElement; - /** Whether or not the chip list is currently focusable via keyboard interaction. */ - _tabIndex = -1; + /** Tab index for the chip list. */ + _tabIndex = 0; /** The FocusKeyManager which handles focus. */ _keyManager: FocusKeyManager; @@ -79,10 +75,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { /** The chip components contained within this chip list. */ chips: QueryList; - /** Tab index for the chip list. */ - _tabIndex = 0; - - constructor(protected _renderer: Renderer, protected _elementRef: ElementRef, + constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef, protected _dir: Dir) { } @@ -143,9 +136,8 @@ export class MdChipList implements AfterContentInit, OnDestroy { /** * Programmatically focus the chip list. This in turn focuses the first non-disabled chip in this * chip list, or the input if available and there are 0 chips. - * - * TODO: ARIA says this should focus the first `selected` chip if any are selected. */ + // TODO: ARIA says this should focus the first `selected` chip if any are selected. focus(event?: Event) { if (this.chips.length > 0) { this._keyManager.setFirstItemActive(); @@ -174,7 +166,6 @@ export class MdChipList implements AfterContentInit, OnDestroy { let isNextKey = (code == (isRtl ? LEFT_ARROW : RIGHT_ARROW)); let isBackKey = (code == BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey); let isForwardKey = (code == DOWN_ARROW || isNextKey); - // If they are on an empty input and hit backspace/delete/left arrow, focus the last chip if (isInputEmpty && isBackKey) { this._keyManager.setLastItemActive(); @@ -210,7 +201,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { * * @param chips The list of chips to be subscribed. */ - protected _subscribeChips(chips: QueryList < MdChip >): void { + protected _subscribeChips(chips: QueryList): void { chips.forEach(chip => this._addChip(chip)); } @@ -265,7 +256,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { * one. */ protected _checkDestroyedFocus() { - let chipsArray = this.chips.toArray(); + let chipsArray = this.chips; let focusChip: MdChip; if (this._destroyedIndex != null && chipsArray.length > 0) { diff --git a/src/lib/chips/chip-remove.ts b/src/lib/chips/chip-remove.ts index 88c8283b5116..240502794110 100644 --- a/src/lib/chips/chip-remove.ts +++ b/src/lib/chips/chip-remove.ts @@ -1,6 +1,6 @@ -import {Directive, Renderer, ElementRef, OnInit, OnDestroy} from '@angular/core'; +import {Directive, Renderer2, ElementRef, OnInit, OnDestroy} from '@angular/core'; import {MdChip} from './chip'; -import {Subscription} from 'rxjs'; +import {Subscription} from 'rxjs/Subscription'; /** * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon @@ -16,9 +16,9 @@ import {Subscription} from 'rxjs'; * to properly center the icon within the chip. */ @Directive({ - selector: '[md-chip-remove], [mat-chip-remove], [mdChipRemove], [matChipRemove]', + selector: '[mdChipRemove], [matChipRemove]', host: { - '[class.mat-chip-remove]': 'true', + 'class': 'mat-chip-remove', '[class.mat-chip-remove-hidden]': '!_isVisible', '(click)': '_handleClick($event)' } @@ -31,11 +31,11 @@ export class MdChipRemove implements OnInit, OnDestroy { /** Subscription for our onRemoveChange Observable */ _onRemoveChangeSubscription: Subscription; - constructor(protected _renderer: Renderer, protected _elementRef: ElementRef, + constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef, protected _parentChip: MdChip) { if (this._parentChip) { - this._onRemoveChangeSubscription = this._parentChip.onRemovableChange$ - .subscribe((value: boolean) => { + this._onRemoveChangeSubscription = this._parentChip.onRemovableChange + .subscribe((value) => { this._updateParent(value); }); } diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index 018963bed51e..b80e647081e4 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -2,8 +2,8 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdChipList, MdChip, MdChipEvent, MdChipsModule} from './index'; -import {FakeEvent} from '../core/a11y/list-key-manager.spec'; import {SPACE, DELETE, BACKSPACE} from '../core/keyboard/keycodes'; +import {createKeyboardEvent} from '../core/testing/event-objects'; import {Dir} from '../core/rtl/dir'; describe('Chips', () => { @@ -141,8 +141,8 @@ describe('Chips', () => { fixture.detectChanges(); }); - it('SPACE selects/deselects the currently focused chip', () => { - const SPACE_EVENT: KeyboardEvent = new FakeEvent(SPACE) as KeyboardEvent; + it('should selects/deselects the currently focused chip on SPACE', () => { + const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent; const CHIP_EVENT: MdChipEvent = {chip: chipInstance}; spyOn(testComponent, 'chipSelect'); @@ -173,7 +173,7 @@ describe('Chips', () => { }); it('SPACE ignores selection', () => { - const SPACE_EVENT: KeyboardEvent = new FakeEvent(SPACE) as KeyboardEvent; + const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent; spyOn(testComponent, 'chipSelect'); @@ -193,7 +193,7 @@ describe('Chips', () => { }); it('DELETE emits the (remove) event', () => { - const DELETE_EVENT = new FakeEvent(DELETE) as KeyboardEvent; + const DELETE_EVENT = createKeyboardEvent('keydown', DELETE) as KeyboardEvent; spyOn(testComponent, 'chipRemove'); @@ -205,7 +205,7 @@ describe('Chips', () => { }); it('BACKSPACE emits the (remove) event', () => { - const BACKSPACE_EVENT = new FakeEvent(BACKSPACE) as KeyboardEvent; + const BACKSPACE_EVENT = createKeyboardEvent('keydown', BACKSPACE) as KeyboardEvent; spyOn(testComponent, 'chipRemove'); @@ -224,7 +224,7 @@ describe('Chips', () => { }); it('DELETE does not emit the (remove) event', () => { - const DELETE_EVENT = new FakeEvent(DELETE) as KeyboardEvent; + const DELETE_EVENT = createKeyboardEvent('keydown', DELETE) as KeyboardEvent; spyOn(testComponent, 'chipRemove'); @@ -236,7 +236,7 @@ describe('Chips', () => { }); it('BACKSPACE does not emit the (remove) event', () => { - const BACKSPACE_EVENT = new FakeEvent(BACKSPACE) as KeyboardEvent; + const BACKSPACE_EVENT = createKeyboardEvent('keydown', BACKSPACE) as KeyboardEvent; spyOn(testComponent, 'chipRemove'); diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 35e90ff0c430..78d6a1855983 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -61,7 +61,7 @@ export class MdChip implements Focusable, OnInit, OnDestroy { /** Emitted when the removable property changes. */ private _onRemovableChange = new EventEmitter(); - onRemovableChange$: Observable = this._onRemovableChange.asObservable(); + onRemovableChange: Observable = this._onRemovableChange.asObservable(); /** Emitted when the chip is focused. */ onFocus = new EventEmitter(); diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss index 1ed4a54d0dad..03fdd853b8b9 100644 --- a/src/lib/chips/chips.scss +++ b/src/lib/chips/chips.scss @@ -1,5 +1,6 @@ -$mat-chip-vertical-padding: 8px; -$mat-chip-horizontal-padding: 12px; +$mat-chip-font-size: 13px; +$mat-chip-line-height: 16px; +$mat-chip-border-width: 2px; $mat-chip-vertical-padding: 8px - $mat-chip-border-width; $mat-chip-horizontal-padding: 12px - $mat-chip-border-width; @@ -12,6 +13,7 @@ $mat-chip-remove-size: 24px; $mat-chip-remove-font-size: 18px; .mat-chip-list-wrapper { + display: flex; flex-direction: row; flex-wrap: wrap; @@ -58,6 +60,10 @@ $mat-chip-remove-font-size: 18px; } } +.mat-input-prefix .mat-chip-list-wrapper { + flex-wrap: nowrap; +} + .mat-chip:not(.mat-basic-chip) { display: inline-block; position: relative; @@ -66,15 +72,6 @@ $mat-chip-remove-font-size: 18px; border: $mat-chip-border-width solid transparent; border-radius: $mat-chip-horizontal-padding * 2; - // Apply a margin to adjacent sibling chips. - & + & { - margin: 0 0 0 $mat-chips-chip-margin; - - [dir='rtl'] & { - margin: 0 $mat-chips-chip-margin 0 0; - } - } - font-size: $mat-chip-font-size; line-height: $mat-chip-line-height; @@ -118,14 +115,12 @@ $mat-chip-remove-font-size: 18px; display: none; } -// Override a few styles when inside an mat-input-container -.mat-input-container .mat-chip-list-wrapper input { - width: auto; - height: 38px; - margin-left: 8px; -} +.mat-chip-input { + [dir='rtl'] & { + margin-right: 8px; + } -// Fix the label offset -.mat-input-container mat-chip-list ~ label.mat-empty { - transform: translateY(22px); + [dir='ltr'] & { + margin-left: 8px; + } }