From 997a1ee7df2bd1f04396757d4f3aeb43547dba40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesu=CC=81s=20Rodri=CC=81guez?= Date: Wed, 26 Oct 2016 22:44:55 +0200 Subject: [PATCH] Update code to final --- public/docs/_examples/cb-a11y/e2e-spec.ts | 4 +- public/docs/_examples/cb-a11y/ts/a2docs.css | 412 +++++++++++++++++- .../cb-a11y/ts/app/a11y-index.component.ts | 5 +- .../_examples/cb-a11y/ts/app/app.component.ts | 11 +- .../_examples/cb-a11y/ts/app/app.module.ts | 47 ++ .../_examples/cb-a11y/ts/app/app.routes.ts | 27 -- .../_examples/cb-a11y/ts/app/app.routing.ts | 31 ++ .../a11y-component-roles.component.ts | 16 +- .../a11y-dev-tools-index.component.ts | 5 +- .../app/dev-tools/a11y-dev-tools.component.ts | 5 +- .../a11y-fails/a11y-fails.component.ts | 8 +- .../a11y-pass/a11y-pass.component.ts | 6 +- .../a11y-form-controls.component.ts | 43 +- .../a11y-input-wrapper.component.ts | 10 +- public/docs/_examples/cb-a11y/ts/app/main.ts | 14 +- .../a11y-error-demo.component.ts | 8 +- .../a11y-managing-focus.component.ts | 21 +- .../ts/app/services/a11y-helper.service.ts | 2 +- .../shared/a11y-custom-button.component.ts | 8 +- .../shared/a11y-custom-control.component.ts | 37 +- .../app/shared/a11y-value-helper.component.ts | 4 +- 21 files changed, 561 insertions(+), 163 deletions(-) create mode 100644 public/docs/_examples/cb-a11y/ts/app/app.module.ts delete mode 100644 public/docs/_examples/cb-a11y/ts/app/app.routes.ts create mode 100644 public/docs/_examples/cb-a11y/ts/app/app.routing.ts diff --git a/public/docs/_examples/cb-a11y/e2e-spec.ts b/public/docs/_examples/cb-a11y/e2e-spec.ts index c56223c928..67135782e5 100644 --- a/public/docs/_examples/cb-a11y/e2e-spec.ts +++ b/public/docs/_examples/cb-a11y/e2e-spec.ts @@ -1,5 +1,7 @@ -/// 'use strict'; + +import { browser, element, by } from 'protractor'; + declare module jasmine { interface Matchers { diff --git a/public/docs/_examples/cb-a11y/ts/a2docs.css b/public/docs/_examples/cb-a11y/ts/a2docs.css index f58ad962ca..d229d05fa4 100644 --- a/public/docs/_examples/cb-a11y/ts/a2docs.css +++ b/public/docs/_examples/cb-a11y/ts/a2docs.css @@ -17,7 +17,7 @@ body { font-family: "Roboto", Helvetica, Sans-Serif; font-size: 14px; line-height: 1.42857143; - color: #000000; + color: #212121; background-color: #fff; } input, @@ -775,6 +775,8 @@ hr { .container-fluid:after, .row:before, .row:after, +.dl-horizontal dd:before, +.dl-horizontal dd:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, @@ -788,6 +790,7 @@ hr { .container:after, .container-fluid:after, .row:after, +.dl-horizontal dd:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after { @@ -1036,6 +1039,362 @@ hr { display: none !important; } } +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small, +.h1 small, +.h2 small, +.h3 small, +.h4 small, +.h5 small, +.h6 small, +h1 .small, +h2 .small, +h3 .small, +h4 .small, +h5 .small, +h6 .small, +.h1 .small, +.h2 .small, +.h3 .small, +.h4 .small, +.h5 .small, +.h6 .small { + font-weight: normal; + line-height: 1; + color: #616161; +} +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} +h1 small, +.h1 small, +h2 small, +.h2 small, +h3 small, +.h3 small, +h1 .small, +.h1 .small, +h2 .small, +.h2 .small, +h3 .small, +.h3 .small { + font-size: 65%; +} +h4, +.h4, +h5, +.h5, +h6, +.h6 { + margin-top: 10px; + margin-bottom: 10px; +} +h4 small, +.h4 small, +h5 small, +.h5 small, +h6 small, +.h6 small, +h4 .small, +.h4 .small, +h5 .small, +.h5 .small, +h6 .small, +.h6 .small { + font-size: 75%; +} +h1, +.h1 { + font-size: 36px; +} +h2, +.h2 { + font-size: 30px; +} +h3, +.h3 { + font-size: 24px; +} +h4, +.h4 { + font-size: 18px; +} +h5, +.h5 { + font-size: 14px; +} +h6, +.h6 { + font-size: 12px; +} +p { + margin: 0 0 10px; +} +.lead { + margin-bottom: 20px; + font-size: 16px; + font-weight: 300; + line-height: 1.4; +} +@media (min-width: 768px) { + .lead { + font-size: 21px; + } +} +small, +.small { + font-size: 85%; +} +mark, +.mark { + background-color: #fcf8e3; + padding: .2em; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} +.text-nowrap { + white-space: nowrap; +} +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} +.text-muted { + color: #616161; +} +.text-primary { + color: #337ab7; +} +a.text-primary:hover, +a.text-primary:focus { + color: #286090; +} +.text-success { + color: #3c763d; +} +a.text-success:hover, +a.text-success:focus { + color: #2b542c; +} +.text-info { + color: #31708f; +} +a.text-info:hover, +a.text-info:focus { + color: #245269; +} +.text-warning { + color: #8a6d3b; +} +a.text-warning:hover, +a.text-warning:focus { + color: #66512c; +} +.text-danger { + color: #632827; +} +a.text-danger:hover, +a.text-danger:focus { + color: #3e1919; +} +.bg-primary { + color: #fff; + background-color: #337ab7; +} +a.bg-primary:hover, +a.bg-primary:focus { + background-color: #286090; +} +.bg-success { + background-color: #dff0d8; +} +a.bg-success:hover, +a.bg-success:focus { + background-color: #c1e2b3; +} +.bg-info { + background-color: #d9edf7; +} +a.bg-info:hover, +a.bg-info:focus { + background-color: #afd9ee; +} +.bg-warning { + background-color: #fcf8e3; +} +a.bg-warning:hover, +a.bg-warning:focus { + background-color: #f7ecb5; +} +.bg-danger { + background-color: #f2dede; +} +a.bg-danger:hover, +a.bg-danger:focus { + background-color: #e4b9b9; +} +.page-header { + padding-bottom: 9px; + margin: 40px 0 20px; + border-bottom: 1px solid #EEEEEE; +} +ul, +ol { + margin-top: 0; + margin-bottom: 10px; +} +ul ul, +ol ul, +ul ol, +ol ol { + margin-bottom: 0; +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +.list-inline { + padding-left: 0; + list-style: none; + margin-left: -5px; +} +.list-inline > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; +} +dl { + margin-top: 0; + margin-bottom: 20px; +} +dt, +dd { + line-height: 1.42857143; +} +dt { + font-weight: bold; +} +dd { + margin-left: 0; +} +@media (min-width: 768px) { + .dl-horizontal dt { + float: left; + width: 160px; + clear: left; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .dl-horizontal dd { + margin-left: 180px; + } +} +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #616161; +} +.initialism { + font-size: 90%; + text-transform: uppercase; +} +blockquote { + padding: 10px 20px; + margin: 0 0 20px; + font-size: 17.5px; + border-left: 5px solid #EEEEEE; +} +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} +blockquote footer, +blockquote small, +blockquote .small { + display: block; + font-size: 80%; + line-height: 1.42857143; + color: #616161; +} +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '\2014 \00A0'; +} +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #EEEEEE; + border-left: 0; + text-align: right; +} +.blockquote-reverse footer:before, +blockquote.pull-right footer:before, +.blockquote-reverse small:before, +blockquote.pull-right small:before, +.blockquote-reverse .small:before, +blockquote.pull-right .small:before { + content: ''; +} +.blockquote-reverse footer:after, +blockquote.pull-right footer:after, +.blockquote-reverse small:after, +blockquote.pull-right small:after, +.blockquote-reverse .small:after, +blockquote.pull-right .small:after { + content: '\00A0 \2014'; +} +address { + margin-bottom: 20px; + font-style: normal; + line-height: 1.42857143; +} fieldset { padding: 0; margin: 0; @@ -1093,7 +1452,7 @@ output { padding-top: 7px; font-size: 14px; line-height: 1.42857143; - color: #000000; + color: #212121; } .form-control { display: block; @@ -1102,7 +1461,7 @@ output { padding: 6px 12px; font-size: 14px; line-height: 1.42857143; - color: #000000; + color: #212121; background-color: #fff; background-image: none; border: 1px solid #ccc; @@ -1459,7 +1818,7 @@ select[multiple].input-lg { display: block; margin-top: 5px; margin-bottom: 10px; - color: #404040; + color: #616161; } @media (min-width: 768px) { .form-inline .form-group { @@ -2271,7 +2630,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { font-size: 14px; font-weight: normal; line-height: 1; - color: #000000; + color: #212121; text-align: center; background-color: #EEEEEE; border: 1px solid #ccc; @@ -3502,6 +3861,12 @@ h6, label { opacity: 0.87; } +label input { + opacity: 1; +} +input { + opacity: 0.87; +} .label-default { opacity: 0.87; } @@ -3511,6 +3876,11 @@ legend { button { opacity: 0.87; } +span, +p, +dl { + opacity: 0.87; +} h1 { color: #455A64; font-size: 50px; @@ -3536,13 +3906,16 @@ label, input, textarea, select { + color: #212121; font-size: 16px; font-weight: 400; line-height: 28px; margin-top: 15px; } span, -p { +p, +dl, +.doc-text { font-size: 16px; font-weight: 400; line-height: 28px; @@ -3552,6 +3925,9 @@ button.btn { font-weight: bold; line-height: 28px; } +.dl-horizontal dt { + text-align: left; +} .input-group-btn { padding-top: 15px; } @@ -3592,16 +3968,28 @@ label textarea, label select { font-weight: normal; } -.btn.btn-primary:hover, -.btn.btn-primary:focus { - color: #263238; +button.btn.disabled, +button.btn[disabled] { + color: #FFFFFF; + background-color: #000000; +} +.btn.btn-primary:not(.disabled):not([disabled]):hover, +.btn.btn-primary:not(.disabled):not([disabled]):focus { + color: #000000; background-color: #EEEEEE; } -.btn.btn-default:hover, -.btn.btn-default:focus { - color: #37474F; +.btn.btn-default:not(.disabled):not([disabled]):hover, +.btn.btn-default:not(.disabled):not([disabled]):focus { + color: #000000; background-color: #EEEEEE; } +button.btn.disabled:hover, +button.btn[disabled]:hover, +button.btn.disabled:focus, +button.btn[disabled]:focus { + color: #FFFFFF; + background-color: #000000; +} .close, .close:hover, .close:focus { diff --git a/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts b/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts index 9b22929469..72f4c800d7 100644 --- a/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts @@ -1,10 +1,9 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ + moduleId: module.id, selector: 'a11y-index', - templateUrl: './app/a11y-index.component.html', - directives: [ROUTER_DIRECTIVES] + templateUrl: 'a11y-index.component.html', }) export class A11yIndexComponent { } diff --git a/public/docs/_examples/cb-a11y/ts/app/app.component.ts b/public/docs/_examples/cb-a11y/ts/app/app.component.ts index f7deadfbae..e491b42b43 100644 --- a/public/docs/_examples/cb-a11y/ts/app/app.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/app.component.ts @@ -1,16 +1,9 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; -import { A11yHelperService } from './services/a11y-helper.service'; @Component({ + moduleId: module.id, selector: 'a11y-app', - templateUrl: 'app/app.component.html', - directives: [ - ROUTER_DIRECTIVES - ], - providers: [ - A11yHelperService - ] + templateUrl: 'app.component.html', }) export class AppComponent { } diff --git a/public/docs/_examples/cb-a11y/ts/app/app.module.ts b/public/docs/_examples/cb-a11y/ts/app/app.module.ts new file mode 100644 index 0000000000..42eb532968 --- /dev/null +++ b/public/docs/_examples/cb-a11y/ts/app/app.module.ts @@ -0,0 +1,47 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppRoutingModule } from './app.routing'; +import { AppComponent } from './app.component'; +import { A11yIndexComponent } from './a11y-index.component'; +import { A11yFormControlsComponent } from './form-controls/a11y-form-controls.component'; +import { A11yDevToolsComponent } from './dev-tools/a11y-dev-tools.component'; +import { A11yErrorDemoComponent } from './managing-focus/a11y-error-demo.component'; +import { A11yManagingFocusComponent } from './managing-focus/a11y-managing-focus.component'; +import { A11yComponentRolesComponent } from './component-roles/a11y-component-roles.component'; +import { A11yDevToolsIndexComponent } from './dev-tools/a11y-dev-tools-index.component'; +import { A11yPassComponent } from './dev-tools/a11y-pass/a11y-pass.component'; +import { A11yFailsComponent } from './dev-tools/a11y-fails/a11y-fails.component'; +import { A11yInputWrapperComponent } from './form-controls/a11y-input-wrapper.component'; +import { A11yCustomButtonComponent } from './shared/a11y-custom-button.component'; +import { A11yCustomControlComponent } from './shared/a11y-custom-control.component'; +import { A11yValueHelperComponent } from './shared/a11y-value-helper.component'; +import { A11yHelperService } from './services/a11y-helper.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + AppRoutingModule + ], + declarations: [ + AppComponent, + A11yIndexComponent, + A11yComponentRolesComponent, + A11yFailsComponent, + A11yPassComponent, + A11yDevToolsIndexComponent, + A11yDevToolsComponent, + A11yFormControlsComponent, + A11yInputWrapperComponent, + A11yErrorDemoComponent, + A11yManagingFocusComponent, + A11yCustomButtonComponent, + A11yCustomControlComponent, + A11yValueHelperComponent + ], + providers: [ A11yHelperService ], + bootstrap: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/cb-a11y/ts/app/app.routes.ts b/public/docs/_examples/cb-a11y/ts/app/app.routes.ts deleted file mode 100644 index b063c40416..0000000000 --- a/public/docs/_examples/cb-a11y/ts/app/app.routes.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { provideRouter, RouterConfig } from '@angular/router'; -import { A11yIndexComponent } from './a11y-index.component'; -import { A11yFormControlsComponent } from './form-controls/a11y-form-controls.component'; -import { A11yDevToolsComponent } from './dev-tools/a11y-dev-tools.component'; -import { A11yManagingFocusComponent } from './managing-focus/a11y-managing-focus.component'; -import { A11yComponentRolesComponent } from './component-roles/a11y-component-roles.component'; -import { A11yDevToolsIndexComponent } from './dev-tools/a11y-dev-tools-index.component'; -import { A11yPassComponent } from './dev-tools/a11y-pass/a11y-pass.component'; -import { A11yFailsComponent } from './dev-tools/a11y-fails/a11y-fails.component'; - -export const routes: RouterConfig = [ - {path: '', component: A11yIndexComponent}, - {path: 'form-controls', component: A11yFormControlsComponent}, - {path: 'managing-focus', component: A11yManagingFocusComponent}, - {path: 'component-roles', component: A11yComponentRolesComponent}, - { - path: 'dev-tools', component: A11yDevToolsComponent, children: [ - {path: '', component: A11yDevToolsIndexComponent}, - {path: 'fail-demo', component: A11yFailsComponent}, - {path: 'pass-demo', component: A11yPassComponent} - ] - } -]; - -export const APP_ROUTER_PROVIDERS = [ - provideRouter(routes) -]; diff --git a/public/docs/_examples/cb-a11y/ts/app/app.routing.ts b/public/docs/_examples/cb-a11y/ts/app/app.routing.ts new file mode 100644 index 0000000000..020a11f79d --- /dev/null +++ b/public/docs/_examples/cb-a11y/ts/app/app.routing.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { A11yIndexComponent } from './a11y-index.component'; +import { A11yFormControlsComponent } from './form-controls/a11y-form-controls.component'; +import { A11yDevToolsComponent } from './dev-tools/a11y-dev-tools.component'; +import { A11yManagingFocusComponent } from './managing-focus/a11y-managing-focus.component'; +import { A11yComponentRolesComponent } from './component-roles/a11y-component-roles.component'; +import { A11yDevToolsIndexComponent } from './dev-tools/a11y-dev-tools-index.component'; +import { A11yPassComponent } from './dev-tools/a11y-pass/a11y-pass.component'; +import { A11yFailsComponent } from './dev-tools/a11y-fails/a11y-fails.component'; + +@NgModule({ + imports: [ + RouterModule.forRoot([ + { path: '', component: A11yIndexComponent }, + { path: 'form-controls', component: A11yFormControlsComponent }, + { path: 'managing-focus', component: A11yManagingFocusComponent }, + { path: 'component-roles', component: A11yComponentRolesComponent }, + { + path: 'dev-tools', component: A11yDevToolsComponent, children: [ + { path: '', component: A11yDevToolsIndexComponent }, + { path: 'fail-demo', component: A11yFailsComponent }, + { path: 'pass-demo', component: A11yPassComponent } + ] + } + ]) + ], + exports: [RouterModule] +}) +export class AppRoutingModule {} diff --git a/public/docs/_examples/cb-a11y/ts/app/component-roles/a11y-component-roles.component.ts b/public/docs/_examples/cb-a11y/ts/app/component-roles/a11y-component-roles.component.ts index 59dac19ab4..a43936118d 100644 --- a/public/docs/_examples/cb-a11y/ts/app/component-roles/a11y-component-roles.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/component-roles/a11y-component-roles.component.ts @@ -1,21 +1,13 @@ import { Component } from '@angular/core'; -import { A11yCustomControlComponent } from '../shared/a11y-custom-control.component'; -import { A11yValueHelperComponent } from '../shared/a11y-value-helper.component'; -import { A11yCustomButtonComponent } from '../shared/a11y-custom-button.component'; @Component({ + moduleId: module.id, selector: 'a11y-component-roles', - templateUrl: './app/component-roles/a11y-component-roles.component.html', - directives: [ - A11yCustomControlComponent, - A11yValueHelperComponent, - A11yCustomButtonComponent - ] + templateUrl: 'a11y-component-roles.component.html', }) export class A11yComponentRolesComponent { - - inputDivModel: string = ''; - buttonClicks: number = 0; + inputDivModel = ''; + buttonClicks = 0; onClick(): void { this.buttonClicks++; diff --git a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools-index.component.ts b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools-index.component.ts index afc4932e4c..ade1f4ecf6 100644 --- a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools-index.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools-index.component.ts @@ -1,10 +1,9 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ + moduleId: module.id, selector: 'a11y-dev-tools-index', - templateUrl: './app/dev-tools/a11y-dev-tools-index.component.html', - directives: [ROUTER_DIRECTIVES] + templateUrl: 'a11y-dev-tools-index.component.html' }) export class A11yDevToolsIndexComponent { } diff --git a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools.component.ts b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools.component.ts index 359b7a0219..f900ef0e99 100644 --- a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-dev-tools.component.ts @@ -1,10 +1,9 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ + moduleId: module.id, selector: 'a11y-dev-tools', - templateUrl: './app/dev-tools/a11y-dev-tools.component.html', - directives: [ROUTER_DIRECTIVES] + templateUrl: 'a11y-dev-tools.component.html' }) export class A11yDevToolsComponent { } diff --git a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-fails/a11y-fails.component.ts b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-fails/a11y-fails.component.ts index e0740d4389..77efde7284 100644 --- a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-fails/a11y-fails.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-fails/a11y-fails.component.ts @@ -1,14 +1,15 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'a11y-fails', - templateUrl: './app/dev-tools/a11y-fails/a11y-fails.component.html', + templateUrl: 'a11y-fails.component.html', styles: [ ` input { font-weight: bold; } - + label { color: #808080; } @@ -16,10 +17,9 @@ import { Component } from '@angular/core'; ] }) export class A11yFailsComponent { - model: any = {}; - hideSuccessConfirmation: boolean = true; + hideSuccessConfirmation = true; submit(): void { this.hideSuccessConfirmation = false; diff --git a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-pass/a11y-pass.component.ts b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-pass/a11y-pass.component.ts index 94de2bd436..17659dbf68 100644 --- a/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-pass/a11y-pass.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/dev-tools/a11y-pass/a11y-pass.component.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'a11y-fails', - templateUrl: './app/dev-tools/a11y-pass/a11y-pass.component.html' + templateUrl: 'a11y-pass.component.html' }) export class A11yPassComponent { - model: any = {}; - hideSuccessConfirmation: boolean = true; + hideSuccessConfirmation = true; submit(messageElement: any): void { this.hideSuccessConfirmation = false; diff --git a/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-form-controls.component.ts b/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-form-controls.component.ts index 5e4e710d4a..f8071b9a9b 100644 --- a/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-form-controls.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-form-controls.component.ts @@ -1,24 +1,13 @@ import { Component, OnInit } from '@angular/core'; -import { CORE_DIRECTIVES } from '@angular/common'; -import { FORM_DIRECTIVES } from '@angular/forms'; + import { A11yHelperService } from '../services/a11y-helper.service'; -import { A11yInputWrapperComponent } from './a11y-input-wrapper.component'; -import { A11yValueHelperComponent } from '../shared/a11y-value-helper.component'; -import { A11yCustomControlComponent } from '../shared/a11y-custom-control.component'; @Component({ + moduleId: module.id, selector: 'a11y-form-controls', - templateUrl: './app/form-controls/a11y-form-controls.component.html', - directives: [ - CORE_DIRECTIVES, - FORM_DIRECTIVES, - A11yCustomControlComponent, - A11yInputWrapperComponent, - A11yValueHelperComponent - ] + templateUrl: 'a11y-form-controls.component.html' }) export class A11yFormControlsComponent implements OnInit { - checkBoxes: any; radioButtons: any; selectOptions: any; @@ -26,36 +15,36 @@ export class A11yFormControlsComponent implements OnInit { inputModel: string; inputExplicitModel: string; inputWrappedModel: string; - inputWrappedSaveModel: string = ''; - inputDivModel: string = ''; + inputWrappedSaveModel = ''; + inputDivModel = ''; textModel: string; - selectModel: string = 'Curiosity'; + selectModel = 'Curiosity'; searchModel: string; filterModel: string; - radioModel: string = 'TypeScript'; - checkboxModel: Array = ['Observables', 'Components']; + radioModel = 'TypeScript'; + checkboxModel = ['Observables', 'Components']; - constructor(private _a11yHelper: A11yHelperService) { + constructor(private a11yHelper: A11yHelperService) { } isChecked(item: string): boolean { - return this._a11yHelper.isStringInArray(this.checkboxModel, item); + return this.a11yHelper.isStringInArray(this.checkboxModel, item); } toggleCheckbox(item: string): void { - this._a11yHelper.toggleItemInArray(this.checkboxModel, item); + this.a11yHelper.toggleItemInArray(this.checkboxModel, item); } - onSave() { + onSave(): void { this.inputWrappedSaveModel = this.inputWrappedModel; } - ngOnInit() { - this.checkBoxes = this._a11yHelper.getCheckboxModel(); - this.radioButtons = this._a11yHelper.getRadiobuttonsModel(); - this.selectOptions = this._a11yHelper.getSelectOptions(); + ngOnInit(): void { + this.checkBoxes = this.a11yHelper.getCheckboxModel(); + this.radioButtons = this.a11yHelper.getRadiobuttonsModel(); + this.selectOptions = this.a11yHelper.getSelectOptions(); } updateSelect(value: string): void { diff --git a/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-input-wrapper.component.ts b/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-input-wrapper.component.ts index 5e87242433..4c612ff321 100644 --- a/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-input-wrapper.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-input-wrapper.component.ts @@ -2,15 +2,15 @@ import { Component, Output, EventEmitter } from '@angular/core'; // #docregion @Component({ + moduleId: module.id, selector: 'a11y-input-wrapper', - templateUrl: './app/form-controls/a11y-input-wrapper.component.html', - styleUrls: ['./app/form-controls/a11y-input-wrapper.component.css'] + templateUrl: 'a11y-input-wrapper.component.html', + styleUrls: ['a11y-input-wrapper.component.css'] }) export class A11yInputWrapperComponent { + @Output() onSave = new EventEmitter(); - @Output() onSave: EventEmitter = new EventEmitter(); - - save() { + save(): void { this.onSave.emit(null); } } diff --git a/public/docs/_examples/cb-a11y/ts/app/main.ts b/public/docs/_examples/cb-a11y/ts/app/main.ts index 01d3440aa4..6af7a5b2ae 100644 --- a/public/docs/_examples/cb-a11y/ts/app/main.ts +++ b/public/docs/_examples/cb-a11y/ts/app/main.ts @@ -1,11 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; -import { APP_ROUTER_PROVIDERS } from './app.routes'; -import { disableDeprecatedForms, provideForms } from '@angular/forms'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -bootstrap(AppComponent, [ - APP_ROUTER_PROVIDERS, - disableDeprecatedForms(), - provideForms() -]) - .catch(err => console.error(err)); +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-error-demo.component.ts b/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-error-demo.component.ts index de0e68b2b4..81517705f4 100644 --- a/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-error-demo.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-error-demo.component.ts @@ -2,14 +2,14 @@ import { Component } from '@angular/core'; // #docregion @Component({ + moduleId: module.id, selector: 'a11y-error-demo', - templateUrl: './app/managing-focus/a11y-error-demo.component.html' + templateUrl: 'a11y-error-demo.component.html' }) export class A11yErrorDemoComponent { + hideErrorConfirmation = true; - hideErrorConfirmation: boolean = true; - - setFocusOn(element: any) { + setFocusOn(element: any): void { this.hideErrorConfirmation = false; setTimeout(() => { element.focus(); diff --git a/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-managing-focus.component.ts b/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-managing-focus.component.ts index 2802299391..c2743f745f 100644 --- a/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-managing-focus.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/managing-focus/a11y-managing-focus.component.ts @@ -1,26 +1,17 @@ import { Component, OnInit } from '@angular/core'; + import { A11yHelperService } from '../services/a11y-helper.service'; -import { CORE_DIRECTIVES } from '@angular/common'; -import { A11yErrorDemoComponent } from './a11y-error-demo.component'; -import { A11yCustomButtonComponent } from '../shared/a11y-custom-button.component'; -import { A11yValueHelperComponent } from '../shared/a11y-value-helper.component'; @Component({ + moduleId: module.id, selector: 'a11y-managing-focus', - templateUrl: './app/managing-focus/a11y-managing-focus.component.html', - directives: [ - CORE_DIRECTIVES, - A11yCustomButtonComponent, - A11yValueHelperComponent, - A11yErrorDemoComponent - ] + templateUrl: 'a11y-managing-focus.component.html' }) export class A11yManagingFocusComponent implements OnInit { - countriesWorkedIn: Array; - buttonClicks: number = 0; + buttonClicks = 0; - constructor(private _a11yHelper: A11yHelperService) { + constructor(private a11yHelper: A11yHelperService) { } onClick(): void { @@ -32,7 +23,7 @@ export class A11yManagingFocusComponent implements OnInit { } ngOnInit(): void { - this.countriesWorkedIn = this._a11yHelper.getCountriesWorkedIn(); + this.countriesWorkedIn = this.a11yHelper.getCountriesWorkedIn(); } } diff --git a/public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts b/public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts index 185dc42fcb..a06e1dd307 100644 --- a/public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts +++ b/public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts @@ -89,7 +89,7 @@ export class A11yHelperService { .replace(new RegExp('
', 'g'), ''); } - guidPartial(s?: boolean) { + guidPartial(s?: boolean): string { let p = (Math.random().toString(16) + '000000000').substr(2, 8); return s ? '-' + p.substr(0, 4) + '-' + p.substr(4, 4) : p; } diff --git a/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-button.component.ts b/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-button.component.ts index 05973f18a9..c3ae9c2d89 100644 --- a/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-button.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-button.component.ts @@ -2,22 +2,22 @@ import { Component, EventEmitter, Output, HostBinding, HostListener } from '@ang // #docregion @Component({ + moduleId: module.id, selector: 'a11y-custom-button', - templateUrl: './app/shared/a11y-custom-button.component.html' + templateUrl: 'a11y-custom-button.component.html' }) export class A11yCustomButtonComponent { - @HostBinding('attr.role') role = 'button'; @HostBinding('attr.class') classes = 'btn btn-primary'; @HostBinding('attr.tabindex') tabIndex = '0'; - @Output() click: EventEmitter = new EventEmitter(); + @Output() click = new EventEmitter(); @HostListener('keydown.space') @HostListener('keydown.enter') - onKeyDown() { + onKeyDown(): void { this.click.emit(null); } diff --git a/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-control.component.ts b/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-control.component.ts index e6e97f342e..636a6e6f9f 100644 --- a/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-control.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/shared/a11y-custom-control.component.ts @@ -1,66 +1,67 @@ -import { Component, OnInit, Provider, forwardRef } from '@angular/core'; -import { A11yHelperService } from '../services/a11y-helper.service'; +import { Component, OnInit, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; +import { A11yHelperService } from '../services/a11y-helper.service'; + // #docregion const noop = () => { }; -const A11Y_CUSTOM_CONTROL_VALUE_ACCESSOR = new Provider( - NG_VALUE_ACCESSOR, { +const A11Y_CUSTOM_CONTROL_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => A11yCustomControlComponent), multi: true - }); + }; @Component({ + moduleId: module.id, selector: 'a11y-custom-control', - templateUrl: './app/shared/a11y-custom-control.component.html', - styleUrls: ['./app/shared/a11y-custom-control.component.css'], + templateUrl: 'a11y-custom-control.component.html', + styleUrls: ['a11y-custom-control.component.css'], providers: [A11Y_CUSTOM_CONTROL_VALUE_ACCESSOR] }) export class A11yCustomControlComponent implements OnInit, ControlValueAccessor { - uniqueId: string; - private innerValue: any = ''; - outerValue: string = ''; + private innerValue = ''; + outerValue = ''; private onTouchedCallback: () => void = noop; private onChangeCallback: (_: any) => void = noop; - constructor(private _a11yHelper: A11yHelperService) { + constructor(private a11yHelper: A11yHelperService) { } - onChange(event: any, value: string) { + onChange(event: any, value: string): void { if (event.keyCode === 13) { event.preventDefault(); } else { - this.innerValue = this._a11yHelper.removeHtmlStringBreaks(value); + this.innerValue = this.a11yHelper.removeHtmlStringBreaks(value); this.onChangeCallback(this.innerValue); } } - onBlur() { + onBlur(): void { this.onTouchedCallback(); } - writeValue(value: any) { + writeValue(value: any): void { if (value !== this.innerValue) { this.innerValue = value; this.outerValue = value; } } - registerOnChange(fn: any) { + registerOnChange(fn: any): void { this.onChangeCallback = fn; } - registerOnTouched(fn: any) { + registerOnTouched(fn: any): void { this.onTouchedCallback = fn; } ngOnInit(): void { - this.uniqueId = this._a11yHelper.generateUniqueIdString(); + this.uniqueId = this.a11yHelper.generateUniqueIdString(); } } diff --git a/public/docs/_examples/cb-a11y/ts/app/shared/a11y-value-helper.component.ts b/public/docs/_examples/cb-a11y/ts/app/shared/a11y-value-helper.component.ts index 238c1bec8f..462f8688a8 100644 --- a/public/docs/_examples/cb-a11y/ts/app/shared/a11y-value-helper.component.ts +++ b/public/docs/_examples/cb-a11y/ts/app/shared/a11y-value-helper.component.ts @@ -1,8 +1,9 @@ import { Component, Input } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'a11y-value-helper', - templateUrl: './app/shared/a11y-value-helper.component.html', + templateUrl: 'a11y-value-helper.component.html', styles: [` .value-label { position:relative; @@ -11,7 +12,6 @@ import { Component, Input } from '@angular/core'; `] }) export class A11yValueHelperComponent { - @Input() displayValue: any; }