Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(material-experimental): MDC-based version of dialog
- Loading branch information
1 parent
3d2ecc0
commit d137848
Showing
49 changed files
with
3,552 additions
and
182 deletions.
There are no files selected for viewing
Validating CODEOWNERS rules …
This file contains 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 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 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 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 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 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,29 @@ | ||
| load("//tools:defaults.bzl", "ng_module", "sass_binary") | ||
|
|
||
| package(default_visibility = ["//visibility:public"]) | ||
|
|
||
| ng_module( | ||
| name = "mdc-dialog", | ||
| srcs = glob(["**/*.ts"]), | ||
| assets = [ | ||
| "mdc-dialog-demo.html", | ||
| ":mdc_dialog_demo_scss", | ||
| ], | ||
| deps = [ | ||
| "//src/material-experimental/mdc-dialog", | ||
| "//src/material/button", | ||
| "//src/material/card", | ||
| "//src/material/checkbox", | ||
| "//src/material/form-field", | ||
| "//src/material/input", | ||
| "//src/material/select", | ||
| "@npm//@angular/router", | ||
| ], | ||
| ) | ||
|
|
||
| sass_binary( | ||
| name = "mdc_dialog_demo_scss", | ||
| src = "mdc-dialog-demo.scss", | ||
| include_paths = ["external/npm/node_modules"], | ||
| deps = ["//src/material-experimental/mdc-dialog:mdc_dialog_scss_lib"], | ||
| ) |
This file contains 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,36 @@ | ||
| /** | ||
| * @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 {FormsModule} from '@angular/forms'; | ||
| import {MatDialogModule} from '@angular/material-experimental/mdc-dialog'; | ||
| import {MatButtonModule} from '@angular/material/button'; | ||
| import {MatCardModule} from '@angular/material/card'; | ||
| import {MatCheckboxModule} from '@angular/material/checkbox'; | ||
| import {MatFormFieldModule} from '@angular/material/form-field'; | ||
| import {MatInputModule} from '@angular/material/input'; | ||
| import {MatSelectModule} from '@angular/material/select'; | ||
| import {RouterModule} from '@angular/router'; | ||
| import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './mdc-dialog-demo'; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| FormsModule, | ||
| MatButtonModule, | ||
| MatCardModule, | ||
| MatCheckboxModule, | ||
| MatDialogModule, | ||
| MatFormFieldModule, | ||
| MatInputModule, | ||
| MatSelectModule, | ||
| RouterModule.forChild([{path: '', component: DialogDemo}]), | ||
| ], | ||
| declarations: [ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog], | ||
| }) | ||
| export class MdcDialogDemoModule { | ||
| } |
This file contains 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,137 @@ | ||
| <h1>Dialog demo</h1> | ||
|
|
||
| <button mat-raised-button color="primary" (click)="openJazz()" class="demo-dialog-button"> | ||
| Open dialog | ||
| </button> | ||
| <button mat-raised-button color="accent" (click)="openContentElement()" class="demo-dialog-button"> | ||
| Open dialog with content elements | ||
| </button> | ||
| <button mat-raised-button color="accent" (click)="openTemplate()" class="demo-dialog-button"> | ||
| Open dialog with template content | ||
| </button> | ||
|
|
||
| <p> | ||
| <mat-checkbox [(ngModel)]="enableLegacyPadding">Enable legacy padding</mat-checkbox> | ||
| </p> | ||
|
|
||
| <mat-card class="demo-dialog-card"> | ||
| <mat-card-content> | ||
| <h2>Dialog dimensions</h2> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Width</mat-label> | ||
| <input matInput [(ngModel)]="config.width"> | ||
| </mat-form-field> | ||
| <mat-form-field> | ||
| <mat-label>Height</mat-label> | ||
| <input matInput [(ngModel)]="config.height"> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Min width</mat-label> | ||
| <input matInput [(ngModel)]="config.minWidth"> | ||
| </mat-form-field> | ||
| <mat-form-field> | ||
| <mat-label>Min height</mat-label> | ||
| <input matInput [(ngModel)]="config.minHeight"> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Max width</mat-label> | ||
| <input matInput [(ngModel)]="config.maxWidth"> | ||
| </mat-form-field> | ||
| <mat-form-field> | ||
| <mat-label>Max height</mat-label> | ||
| <input matInput [(ngModel)]="config.maxHeight"> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <h2>Dialog position</h2> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Top</mat-label> | ||
| <input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''"> | ||
| </mat-form-field> | ||
| <mat-form-field> | ||
| <mat-label>Bottom</mat-label> | ||
| <input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''"> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Left</mat-label> | ||
| <input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''"> | ||
| </mat-form-field> | ||
| <mat-form-field> | ||
| <mat-label>Right</mat-label> | ||
| <input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''"> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <h2>Dialog backdrop</h2> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Backdrop class</mat-label> | ||
| <input matInput [(ngModel)]="config.backdropClass"> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <mat-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</mat-checkbox> | ||
|
|
||
| <h2>Other options</h2> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Button alignment</mat-label> | ||
| <mat-select [(ngModel)]="actionsAlignment"> | ||
| <mat-option>Start</mat-option> | ||
| <mat-option value="end">End</mat-option> | ||
| <mat-option value="center">Center</mat-option> | ||
| </mat-select> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <p> | ||
| <mat-form-field> | ||
| <mat-label>Dialog message</mat-label> | ||
| <input matInput [(ngModel)]="config.data.message"> | ||
| </mat-form-field> | ||
| </p> | ||
|
|
||
| <p> | ||
| <mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox> | ||
| </p> | ||
| </mat-card-content> | ||
| </mat-card> | ||
|
|
||
| <p>Last afterClosed result: {{lastAfterClosedResult}}</p> | ||
| <p>Last beforeClose result: {{lastBeforeCloseResult}}</p> | ||
|
|
||
| <ng-template let-data let-dialogRef="dialogRef"> | ||
| I'm a template dialog. I've been opened {{numTemplateOpens}} times! | ||
|
|
||
| <p>It's Jazz!</p> | ||
|
|
||
| <mat-form-field> | ||
| <mat-label>How much?</mat-label> | ||
| <input matInput #howMuch> | ||
| </mat-form-field> | ||
|
|
||
| <p> {{ data.message }} </p> | ||
| <button type="button" (click)="dialogRef.close(howMuch.value)" class="demo-dialog-button" | ||
| cdkFocusInitial> | ||
| Close dialog | ||
| </button> | ||
| <button (click)="dialogRef.updateSize('500px', '500px').updatePosition({top: '25px', left: '25px'});" | ||
| class="demo-dialog-button"> | ||
| Change dimensions | ||
| </button> | ||
| </ng-template> |
This file contains 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,19 @@ | ||
| @import '../../material-experimental/mdc-dialog/dialog-legacy-padding'; | ||
|
|
||
| .demo-dialog-card { | ||
| max-width: 405px; | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| .demo-dialog-button { | ||
| margin-right: 8px; | ||
|
|
||
| [dir='rtl'] & { | ||
| margin-left: 8px; | ||
| margin-right: 0; | ||
| } | ||
| } | ||
|
|
||
| .demo-dialog-legacy-padding { | ||
| @include mat-mdc-dialog-legacy-padding(); | ||
| } |
Oops, something went wrong.