Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(combobox): add to dev-app (#20276)
Combobox dev app * build: Added required files to listbox directory. * build: added listbox option directive and renamed listbox directive files. * build: Added required files to listbox directory. * build: added listbox option directive and renamed listbox directive files. * build: Added required files to listbox directory. * build: added listbox option directive and renamed listbox directive files. * build: Added required files to listbox directory. * build: added listbox option directive and renamed listbox directive files. * feat(dev-app/listbox): added cdk listbox example to the dev-app. * fix(listbox): removed duplicate dep in dev-app build file. * fix(listbox): deleted unused files. * feat(combobox): added all basic features to combobox and combobox panel, and some tests. * fix(combobox): fixed import path for combobox panel. * refactor(combobox): changed names and made coerceOpenActionProperty simpler for this PR. * fix(combobox): updated syntax for casting. * refactor(combobox): changed casting syntax back. * fix(combobox): fixed trailing whitespace. * feat(combobox): added combobox to dev app. * refactor(combobox): removed commented out import and fixed the name of an input reference in the combobox spec. * fix(combobox): removed duplicate import. * nit(combobox): removed console logs. * refactor(combobox): removed unused panel test file. * refactor(combobox): used lightweight injection token for grabbing parent panel. * nit(combobox): formatted build file. * refactor(combobox): removed unused imports and fixed long line length. * refactor(combobox): reduced the functions of the panel directive and fixed indent sizes.
- Loading branch information
Showing
11 changed files
with
130 additions
and
4 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
load("//tools:defaults.bzl", "ng_module") | ||
|
||
package(default_visibility = ["//visibility:public"]) | ||
|
||
ng_module( | ||
name = "cdk-experimental-combobox", | ||
srcs = glob(["**/*.ts"]), | ||
assets = [ | ||
"cdk-combobox-demo.html", | ||
], | ||
deps = [ | ||
"//src/cdk-experimental/combobox", | ||
"@npm//@angular/router", | ||
], | ||
) |
24 changes: 24 additions & 0 deletions
24
src/dev-app/cdk-experimental-combobox/cdk-combobox-demo-module.ts
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,24 @@ | ||
/** | ||
* @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 {RouterModule} from '@angular/router'; | ||
import {CdkComboboxModule} from '@angular/cdk-experimental/combobox'; | ||
import {CdkComboboxDemo} from './cdk-combobox-demo'; | ||
import {PanelContent} from './panel-content'; | ||
|
||
@NgModule({ | ||
imports: [ | ||
CdkComboboxModule, | ||
CommonModule, | ||
RouterModule.forChild([{path: '', component: CdkComboboxDemo}]), | ||
], | ||
declarations: [CdkComboboxDemo, PanelContent], | ||
}) | ||
export class CdkComboboxDemoModule {} |
12 changes: 12 additions & 0 deletions
12
src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.html
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,12 @@ | ||
Toggle Combobox! | ||
<br> | ||
<button cdkCombobox class="example-combobox" [cdkComboboxTriggerFor]="panel" [openActions]="'toggle'"> | ||
No Value | ||
</button> | ||
|
||
<ng-template cdkComboboxPanel #panel="cdkComboboxPanel"> | ||
<div panelContent [parentPanel]="panel"> | ||
<input #input> | ||
<button (click)="panel.closePanel(input.value)">Apply</button> | ||
</div> | ||
</ng-template> |
15 changes: 15 additions & 0 deletions
15
src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.ts
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,15 @@ | ||
/** | ||
* @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} from '@angular/core'; | ||
|
||
@Component({ | ||
templateUrl: 'cdk-combobox-demo.html', | ||
}) | ||
export class CdkComboboxDemo { | ||
} |
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,46 @@ | ||
/** | ||
* @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 {Directive, Inject, InjectionToken, Input, OnInit, Optional} from '@angular/core'; | ||
import {AriaHasPopupValue, CdkComboboxPanel} from '@angular/cdk-experimental/combobox'; | ||
|
||
export const PANEL = new InjectionToken<CdkComboboxPanel>('CdkComboboxPanel'); | ||
|
||
let id = 0; | ||
|
||
@Directive({ | ||
selector: '[panelContent]', | ||
exportAs: 'panelContent', | ||
host: { | ||
'role': 'role', | ||
'[id]': 'dialogId' | ||
} | ||
}) | ||
export class PanelContent<V> implements OnInit { | ||
|
||
dialogId = `dialog-${id++}`; | ||
role = 'dialog'; | ||
|
||
@Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel; | ||
|
||
constructor( | ||
@Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel<V>, | ||
) { } | ||
|
||
ngOnInit() { | ||
this.registerWithPanel(); | ||
} | ||
|
||
registerWithPanel(): void { | ||
if (this._parentPanel === null || this._parentPanel === undefined) { | ||
this._explicitPanel._registerContent(this.dialogId, this.role as AriaHasPopupValue); | ||
} else { | ||
this._parentPanel._registerContent(this.dialogId, this.role as AriaHasPopupValue); | ||
} | ||
} | ||
} |
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