Skip to content

chore(select): use computed pseudocheckbox size for multi select during 2018 material spec update transition #13110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 14, 2018
Merged

chore(select): use computed pseudocheckbox size for multi select during 2018 material spec update transition #13110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion src/lib/select/select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,15 +117,17 @@ export const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
/** The height of the select items in `em` units. */
export const SELECT_ITEM_HEIGHT_EM = 3;

// TODO(josephperrott): Revert to a constant after 2018 spec updates are fully merged.
/**
* Distance between the panel edge and the option text in
* multi-selection mode.
*
* Calculated as:
* (SELECT_PANEL_PADDING_X * 1.5) + 20 = 44
* The padding is multiplied by 1.5 because the checkbox's margin is half the padding.
* The checkbox width is 20px.
*/
export const SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + 20;
export let SELECT_MULTIPLE_PANEL_PADDING_X = 0;

/**
* The select panel will only "fit" inside the viewport if it is positioned at
Expand Down Expand Up @@ -764,6 +766,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
*/
_onAttached(): void {
this.overlayDir.positionChange.pipe(take(1)).subscribe(() => {
this._setPseudoCheckboxPaddingSize();
this._changeDetectorRef.detectChanges();
this._calculateOverlayOffsetX();
this.panel.nativeElement.scrollTop = this._scrollTop;
Expand All @@ -775,6 +778,17 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
return this._parentFormField ? `mat-${this._parentFormField.color}` : '';
}

// TODO(josephperrott): Remove after 2018 spec updates are fully merged.
/** Sets the pseudo checkbox padding size based on the width of the pseudo checkbox. */
private _setPseudoCheckboxPaddingSize() {
if (!SELECT_MULTIPLE_PANEL_PADDING_X && this.multiple) {
const pseudoCheckbox = this.panel.nativeElement.querySelector('.mat-pseudo-checkbox');
if (pseudoCheckbox) {
SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + pseudoCheckbox.offsetWidth;
}
}
}

/** Whether the select has a value. */
get empty(): boolean {
return !this._selectionModel || this._selectionModel.isEmpty();
Expand Down