diff --git a/src/lib/expansion/_expansion-theme.scss b/src/lib/expansion/_expansion-theme.scss index 2ed9552afdc4..0181df45aa90 100644 --- a/src/lib/expansion/_expansion-theme.scss +++ b/src/lib/expansion/_expansion-theme.scss @@ -14,10 +14,11 @@ border-top-color: mat-color($foreground, divider); } - .mat-expansion-panel-header:focus, + .mat-expansion-panel-header:focus, .mat-expansion-panel-header:hover { background: mat-color($background, hover); } + .mat-expansion-panel-header-title { color: mat-color($foreground, text); } @@ -29,4 +30,4 @@ .mat-expansion-indicator::after { color: mat-color($foreground, secondary-text); } -} \ No newline at end of file +} diff --git a/src/lib/expansion/accordion-item.ts b/src/lib/expansion/accordion-item.ts index db2ce5261d54..107f799c2377 100644 --- a/src/lib/expansion/accordion-item.ts +++ b/src/lib/expansion/accordion-item.ts @@ -27,15 +27,15 @@ let nextId = 0; */ @Injectable() export class AccordionItem implements OnDestroy { - /** Event emitted every time the MdAccordianChild is closed. */ + /** Event emitted every time the MdAccordionChild is closed. */ @Output() closed = new EventEmitter(); - /** Event emitted every time the MdAccordianChild is opened. */ + /** Event emitted every time the MdAccordionChild is opened. */ @Output() opened = new EventEmitter(); - /** Event emitted when the MdAccordianChild is destroyed. */ + /** Event emitted when the MdAccordionChild is destroyed. */ @Output() destroyed = new EventEmitter(); - /** The unique MdAccordianChild id. */ + /** The unique MdAccordionChild id. */ readonly id = `cdk-accordion-child-${nextId++}`; - /** Whether the MdAccordianChild is expanded. */ + /** Whether the MdAccordionChild is expanded. */ @Input() get expanded(): boolean { return this._expanded; } set expanded(expanded: boolean) { // Only emit events and update the internal value if the value changes. @@ -44,10 +44,10 @@ export class AccordionItem implements OnDestroy { if (expanded) { this.opened.emit(); /** - * In the unique selection dispatcher, the id parameter is the id of the CdkAccordonItem, + * In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem, * the name value is the id of the accordion. */ - let accordionId = this.accordion ? this.accordion.id : this.id; + const accordionId = this.accordion ? this.accordion.id : this.id; this._expansionDispatcher.notify(this.id, accordionId); } else { this.closed.emit(); @@ -66,14 +66,14 @@ export class AccordionItem implements OnDestroy { constructor(@Optional() public accordion: CdkAccordion, private _changeDetectorRef: ChangeDetectorRef, protected _expansionDispatcher: UniqueSelectionDispatcher) { - this._removeUniqueSelectionListener = - _expansionDispatcher.listen((id: string, accordionId: string) => { - if (this.accordion && !this.accordion.multi && - this.accordion.id === accordionId && this.id !== id) { - this.expanded = false; - } - }); - } + this._removeUniqueSelectionListener = + _expansionDispatcher.listen((id: string, accordionId: string) => { + if (this.accordion && !this.accordion.multi && + this.accordion.id === accordionId && this.id !== id) { + this.expanded = false; + } + }); + } /** Emits an event for the accordion item being destroyed. */ ngOnDestroy() { diff --git a/src/lib/expansion/accordion.spec.ts b/src/lib/expansion/accordion.spec.ts index 09e198eac768..f29dd5e5ab5e 100644 --- a/src/lib/expansion/accordion.spec.ts +++ b/src/lib/expansion/accordion.spec.ts @@ -20,8 +20,8 @@ describe('CdkAccordion', () => { })); it('should ensure only one item is expanded at a time', () => { - let fixture = TestBed.createComponent(SetOfItems); - let items = fixture.debugElement.queryAll(By.css('.mat-expansion-panel')); + const fixture = TestBed.createComponent(SetOfItems); + const items = fixture.debugElement.queryAll(By.css('.mat-expansion-panel')); fixture.componentInstance.firstPanelExpanded = true; fixture.detectChanges(); @@ -35,8 +35,8 @@ describe('CdkAccordion', () => { }); it('should allow multiple items to be expanded simultaneously', () => { - let fixture = TestBed.createComponent(SetOfItems); - let panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel')); + const fixture = TestBed.createComponent(SetOfItems); + const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel')); fixture.componentInstance.multi = true; fixture.componentInstance.firstPanelExpanded = true; diff --git a/src/lib/expansion/expansion-panel-header.html b/src/lib/expansion/expansion-panel-header.html index 564a957bf803..4394f4b5742d 100644 --- a/src/lib/expansion/expansion-panel-header.html +++ b/src/lib/expansion/expansion-panel-header.html @@ -3,5 +3,5 @@ - \ No newline at end of file + diff --git a/src/lib/expansion/expansion-panel-header.scss b/src/lib/expansion/expansion-panel-header.scss index d88885d34396..6a2dab8e9b20 100644 --- a/src/lib/expansion/expansion-panel-header.scss +++ b/src/lib/expansion/expansion-panel-header.scss @@ -14,7 +14,7 @@ $mat-expansion-panel-header-height-expanded: 64px; line-height: $mat-expansion-panel-header-height-expanded; } - &:focus, + &:focus, &:hover { outline: none; } @@ -46,7 +46,7 @@ $mat-expansion-panel-header-height-expanded: 64px; margin-right: 16px; } -/** +/** * Creates the expansion indicator arrow. Done using ::after rather than having * additional nodes in the template. */ diff --git a/src/lib/expansion/expansion-panel.html b/src/lib/expansion/expansion-panel.html index 25422ebc6f70..751e5176a0ab 100644 --- a/src/lib/expansion/expansion-panel.html +++ b/src/lib/expansion/expansion-panel.html @@ -5,4 +5,4 @@ - \ No newline at end of file + diff --git a/src/lib/expansion/expansion-panel.scss b/src/lib/expansion/expansion-panel.scss index 0a258ad43037..75b188395d48 100644 --- a/src/lib/expansion/expansion-panel.scss +++ b/src/lib/expansion/expansion-panel.scss @@ -30,4 +30,4 @@ button.mat-button { margin-left: 8px; } -} \ No newline at end of file +} diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts index abb7495c16e0..160fc96fca73 100644 --- a/src/lib/expansion/expansion.spec.ts +++ b/src/lib/expansion/expansion.spec.ts @@ -19,7 +19,7 @@ describe('MdExpansionPanel', () => { TestBed.compileComponents(); })); - it('should expanded and collapse the panel', () => { + it('should expand and collapse the panel', () => { const fixture = TestBed.createComponent(PanelWithContent); const contentEl = fixture.debugElement.query(By.css('.mat-expansion-panel-content')); const headerEl = fixture.debugElement.query(By.css('.mat-expansion-panel-header'));