feat(material-experimental): add MDC-based mat-option and mdc-core entry point #19557
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| load( | ||
| "//tools:defaults.bzl", | ||
| "ng_module", | ||
| "ng_test_library", | ||
| "ng_web_test_suite", | ||
| "sass_binary", | ||
| "sass_library", | ||
| ) | ||
|
|
||
| package(default_visibility = ["//visibility:public"]) | ||
|
|
||
| ng_module( | ||
| name = "mdc-core", | ||
| srcs = glob( | ||
| ["**/*.ts"], | ||
| exclude = ["**/*.spec.ts"], | ||
| ), | ||
| assets = [ | ||
| ":option/option.css", | ||
| ":option/optgroup.css", | ||
| ] + glob(["**/*.html"]), | ||
| module_name = "@angular/material-experimental/mdc-core", | ||
| deps = [ | ||
| "//src/material/core", | ||
| "@npm//@angular/common", | ||
| "@npm//@angular/core", | ||
| "@npm//rxjs", | ||
| ], | ||
| ) | ||
|
|
||
| sass_library( | ||
| name = "mdc_core_scss_lib", | ||
| srcs = glob(["**/_*.scss"]), | ||
| ) | ||
|
|
||
| sass_binary( | ||
| name = "option_scss", | ||
| src = "option/option.scss", | ||
| include_paths = [ | ||
| "external/npm/node_modules", | ||
| ], | ||
| deps = [ | ||
| "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib", | ||
| "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib", | ||
| ], | ||
| ) | ||
|
|
||
| sass_binary( | ||
| name = "optgroup_scss", | ||
| src = "option/optgroup.scss", | ||
| include_paths = [ | ||
| "external/npm/node_modules", | ||
| ], | ||
| deps = [ | ||
| "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib", | ||
| "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib", | ||
| ], | ||
| ) | ||
|
|
||
| ################# | ||
| # Test targets | ||
| ################# | ||
|
|
||
| ng_test_library( | ||
| name = "unit_test_sources", | ||
| srcs = glob( | ||
| ["**/*.spec.ts"], | ||
| ), | ||
| deps = [ | ||
| ":mdc-core", | ||
| "//src/cdk/keycodes", | ||
| "//src/cdk/testing/private", | ||
| "@npm//@angular/platform-browser", | ||
| ], | ||
| ) | ||
|
|
||
| ng_web_test_suite( | ||
| name = "unit_tests", | ||
| deps = [":unit_test_sources"], | ||
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| @import '../../material/core/theming/check-duplicate-styles'; | ||
| @import './option/option-theme'; | ||
| @import './option/optgroup-theme'; | ||
|
|
||
| // Mixin that renders all of the core styles that depend on the theme. | ||
| @mixin mat-mdc-core-theme($theme-or-color-config) { | ||
| $theme: _mat-legacy-get-theme($theme-or-color-config); | ||
| // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that | ||
| // there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then | ||
| // the imported themes (such as `mat-ripple-theme`) should not report again. | ||
| @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-core') { | ||
| @include mat-mdc-option-theme($theme); | ||
| @include mat-mdc-optgroup-theme($theme); | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| export * from './public-api'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| @import '@material/list/mixins.import'; | ||
| @import '@material/list/variables.import'; | ||
| @import '@material/theme/functions.import'; | ||
| @import '../../mdc-helpers/mdc-helpers'; | ||
| @import '../../../material/core/theming/check-duplicate-styles'; | ||
|
|
||
| @mixin mat-mdc-optgroup-color($config-or-theme) { | ||
| $config: mat-get-color-config($config-or-theme); | ||
|
|
||
| @include mat-using-mdc-theme($config) { | ||
| .mat-mdc-optgroup-label { | ||
| // Since this will usually be rendered in an overlay, | ||
| // we have explicitly set the default color. | ||
| @include mdc-theme-prop(color, text-primary-on-background); | ||
| @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color, | ||
| $query: $mat-theme-styles-query); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin mat-mdc-optgroup-typography($config-or-theme) { | ||
| $config: mat-get-typography-config($config-or-theme); | ||
| } | ||
|
|
||
| @mixin mat-mdc-optgroup-density($config-or-theme) { | ||
| $density-scale: mat-get-density-config($config-or-theme); | ||
| } | ||
|
|
||
| @mixin mat-mdc-optgroup-theme($theme-or-color-config) { | ||
| $theme: _mat-legacy-get-theme($theme-or-color-config); | ||
| @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-optgroup') { | ||
| $color: mat-get-color-config($theme); | ||
| $density: mat-get-density-config($theme); | ||
| $typography: mat-get-typography-config($theme); | ||
|
|
||
| @if $color != null { | ||
| @include mat-mdc-optgroup-color($color); | ||
| } | ||
| @if $density != null { | ||
| @include mat-mdc-optgroup-density($density); | ||
| } | ||
| @if $typography != null { | ||
| @include mat-mdc-optgroup-typography($typography); | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| @import '@material/list/mixins.import'; | ||
| @import '@material/list/variables.import'; | ||
| @import '@material/theme/functions.import'; | ||
| @import '../../mdc-helpers/mdc-helpers'; | ||
| @import '../../../material/core/theming/check-duplicate-styles'; | ||
|
|
||
| @mixin mat-mdc-option-color($config-or-theme) { | ||
| $config: mat-get-color-config($config-or-theme); | ||
|
|
||
| @include mat-using-mdc-theme($config) { | ||
| .mat-mdc-option { | ||
| // Since this will usually be rendered in an overlay, | ||
| // we have explicitly set the default color. | ||
| @include mdc-theme-prop(color, text-primary-on-background); | ||
| @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color, | ||
| $query: $mat-theme-styles-query); | ||
|
|
||
| &:hover:not(.mdc-list-item--disabled), | ||
| &:focus:not(.mdc-list-item--disabled), | ||
| &.mat-mdc-option-active, | ||
|
|
||
| // In multiple mode there is a checkbox to show that the option is selected. | ||
| &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) { | ||
| $color: $mdc-theme-on-surface; | ||
| background: rgba($color, mdc-states-opacity($color, hover)); | ||
| } | ||
| } | ||
|
|
||
| .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { | ||
| @include mdc-list-item-primary-text-ink-color(primary, $query: $mat-theme-styles-query); | ||
| } | ||
|
|
||
| .mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { | ||
| @include mdc-list-item-primary-text-ink-color(secondary, $query: $mat-theme-styles-query); | ||
| } | ||
|
|
||
| .mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { | ||
| @include mdc-list-item-primary-text-ink-color(error, $query: $mat-theme-styles-query); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin mat-mdc-option-typography($config-or-theme) { | ||
| $config: mat-get-typography-config($config-or-theme); | ||
| } | ||
|
|
||
| @mixin mat-mdc-option-density($config-or-theme) { | ||
| $density-scale: mat-get-density-config($config-or-theme); | ||
| } | ||
|
|
||
| @mixin mat-mdc-option-theme($theme-or-color-config) { | ||
| $theme: _mat-legacy-get-theme($theme-or-color-config); | ||
| @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-option') { | ||
| $color: mat-get-color-config($theme); | ||
| $density: mat-get-density-config($theme); | ||
| $typography: mat-get-typography-config($theme); | ||
|
|
||
| @if $color != null { | ||
| @include mat-mdc-option-color($color); | ||
| } | ||
| @if $density != null { | ||
| @include mat-mdc-option-density($density); | ||
| } | ||
| @if $typography != null { | ||
| @include mat-mdc-option-typography($typography); | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| import {NgModule} from '@angular/core'; | ||
| import {CommonModule} from '@angular/common'; | ||
| import {MatRippleModule, MatPseudoCheckboxModule} from '@angular/material/core'; | ||
| import {MatOption} from './option'; | ||
| import {MatOptgroup} from './optgroup'; | ||
|
|
||
|
|
||
| @NgModule({ | ||
| imports: [MatRippleModule, CommonModule, MatPseudoCheckboxModule], | ||
| exports: [MatOption, MatOptgroup], | ||
| declarations: [MatOption, MatOptgroup] | ||
| }) | ||
| export class MatOptionModule {} | ||
|
|
||
|
|
||
| export * from './option'; | ||
| export * from './optgroup'; | ||
| export { | ||
| MatOptionSelectionChange, | ||
| MatOptionParentComponent, | ||
| MAT_OPTION_PARENT_COMPONENT, | ||
| _countGroupLabelsBeforeOption, | ||
| _getOptionScrollPosition | ||
| } from '@angular/material/core'; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <label | ||
| class="mat-mdc-optgroup-label" | ||
| [class.mdc-list-item--disabled]="disabled" | ||
| [id]="_labelId"> | ||
| <span class="mdc-list-item__text">{{ label }} <ng-content></ng-content></span> | ||
| </label> | ||
|
|
||
| <ng-content select="mat-option, ng-container"></ng-content> | ||
|
There was a problem hiding this comment. Hmm, do we include There was a problem hiding this comment. That's what we have in the current version. It's there, because sometimes people wrap multiple options in an There was a problem hiding this comment. Yeah I figured, wish Angular could fix it somehow instead of us trying to work around it. It works in this case because we can pretty much assume we know where the user is trying to put the |
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @import '@material/list/mixins.import'; | ||
| @import '@material/list/variables.import'; | ||
| @import '../../mdc-helpers/mdc-helpers'; | ||
|
|
||
| .mat-mdc-optgroup-label { | ||
| @include mdc-list-item-base_; | ||
| @include mdc-list-list-item-padding-variant( | ||
| $mdc-list-textual-variant-config, $query: $mat-base-styles-query); | ||
| @include mdc-list-list-item-height-variant( | ||
| $mdc-list-textual-variant-config, $query: $mat-base-styles-query); | ||
| @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity, | ||
| $query: $mat-base-styles-query); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core'; | ||
| import {_MatOptgroupBase} from '@angular/material/core'; | ||
|
|
||
|
|
||
| /** | ||
| * Component that is used to group instances of `mat-option`. | ||
| */ | ||
| @Component({ | ||
| selector: 'mat-optgroup', | ||
| exportAs: 'matOptgroup', | ||
| templateUrl: 'optgroup.html', | ||
| encapsulation: ViewEncapsulation.None, | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| inputs: ['disabled'], | ||
| styleUrls: ['optgroup.css'], | ||
| host: { | ||
| 'class': 'mat-mdc-optgroup', | ||
| 'role': 'group', | ||
| '[attr.aria-disabled]': 'disabled.toString()', | ||
| '[attr.aria-labelledby]': '_labelId', | ||
| } | ||
| }) | ||
| export class MatOptgroup extends _MatOptgroupBase { | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <mat-pseudo-checkbox *ngIf="multiple" class="mat-mdc-option-pseudo-checkbox" | ||
| [state]="selected ? 'checked' : 'unchecked'" [disabled]="disabled"></mat-pseudo-checkbox> | ||
|
|
||
| <span class="mdc-list-item__text"><ng-content></ng-content></span> | ||
|
|
||
| <div class="mat-mdc-option-ripple" mat-ripple | ||
| [matRippleTrigger]="_getHostElement()" | ||
| [matRippleDisabled]="disabled || disableRipple"> | ||
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| @import '@material/list/mixins.import'; | ||
| @import '@material/list/variables.import'; | ||
| @import '../../mdc-helpers/mdc-helpers'; | ||
| @import '../../../material/core/style/vendor-prefixes'; | ||
| @import '../../../cdk/a11y/a11y'; | ||
|
|
||
| .mat-mdc-option { | ||
| // Note that we include this private mixin, because the public | ||
| // one adds a bunch of styles that we aren't using for the menu. | ||
|
There was a problem hiding this comment. For a follow-up: It might be good capturing things we actually need. If we come back to this in the future, we don't know what is actually needed / what the public mixin currently provides that we don't need. |
||
| @include mdc-list-item-base_; | ||
| @include mdc-list-list-item-padding-variant( | ||
| $mdc-list-textual-variant-config, $query: $mat-base-styles-query); | ||
| @include mdc-list-list-item-height-variant( | ||
| $mdc-list-textual-variant-config, $query: $mat-base-styles-query); | ||
| @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity, | ||
| $query: $mat-base-styles-query); | ||
| @include user-select(none); | ||
|
|
||
| &:not(.mdc-list-item--disabled) { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| // Note that we bump the padding here, rather than padding inside the | ||
| // group so that ripples still reach to the edges of the panel. | ||
| .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) { | ||
| padding-left: $mdc-list-side-padding * 2; | ||
|
|
||
| [dir='rtl'] & { | ||
| padding-left: $mdc-list-side-padding; | ||
| padding-right: $mdc-list-side-padding * 2; | ||
| } | ||
| } | ||
|
|
||
| .mat-pseudo-checkbox { | ||
| margin-right: $mdc-list-side-padding; | ||
|
|
||
| [dir='rtl'] & { | ||
| margin-right: 0; | ||
| margin-left: $mdc-list-side-padding; | ||
| } | ||
| } | ||
|
|
||
| // Increase specificity because ripple styles are part of the `mat-core` mixin and can | ||
| // potentially overwrite the absolute position of the container. | ||
| .mat-mdc-option-ripple { | ||
| @include mat-fill; | ||
|
|
||
| // Disable pointer events for the ripple container because the container will overlay the | ||
| // user content and we don't want to disable mouse events on the user content. | ||
| // Pointer events can be safely disabled because the ripple trigger element is the host element. | ||
| pointer-events: none; | ||
|
|
||
| // Prevents the ripple from completely covering the option in high contrast mode. | ||
| @include cdk-high-contrast(active, off) { | ||
| opacity: 0.5; | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do we need to re-export these internal things?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it's something we're reusing in
mat-selectandmat-autocomplete.