From 52267b26f2da5b9289d276c7e90d6b33f5842b33 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 30 Jan 2025 10:34:11 +0100 Subject: [PATCH] build: reformat docs site code Currently Prettier will complain for any docs site file we change since it was never reformatted. These changes update the formatting. --- material.angular.io/.eslintrc.json | 58 ++------- material.angular.io/BUILD.bazel | 62 +++++---- material.angular.io/e2e/protractor.conf.js | 22 ++-- material.angular.io/e2e/src/app.e2e-spec.ts | 8 +- material.angular.io/e2e/src/app.po.ts | 5 +- material.angular.io/e2e/tsconfig.json | 6 +- material.angular.io/karma-custom-launchers.js | 15 +-- material.angular.io/karma.conf.js | 6 +- material.angular.io/scenes/BUILD.bazel | 6 +- .../scenes/e2e/protractor.conf.js | 28 ++-- material.angular.io/scenes/e2e/screenshot.ts | 10 +- material.angular.io/scenes/e2e/src/app.po.ts | 2 +- material.angular.io/scenes/e2e/tsconfig.json | 6 +- material.angular.io/scenes/karma.conf.js | 11 +- .../scenes/src/app/app-routes.ts | 17 +-- .../scenes/src/app/app.component.ts | 4 +- .../src/app/scene-viewer/scene-viewer.ts | 10 +- .../scenes/autocomplete/autocomplete-scene.ts | 9 +- .../src/app/scenes/badge/badge-scene.ts | 2 +- .../scenes/bottom-sheet/bottom-sheet-scene.ts | 3 +- .../src/app/scenes/button/button-scene.ts | 5 +- .../scenes/src/app/scenes/card/card-scene.ts | 1 - .../src/app/scenes/checkbox/checkbox-scene.ts | 2 +- .../src/app/scenes/chips/chips-scene.ts | 2 +- .../scenes/src/app/scenes/core/core-scene.ts | 2 +- .../app/scenes/datepicker/datepicker-scene.ts | 3 +- .../src/app/scenes/dialog/dialog-scene.ts | 3 +- .../src/app/scenes/divider/divider-scene.ts | 2 +- .../app/scenes/expansion/expansion-scene.ts | 2 +- .../app/scenes/form-field/form-field-scene.ts | 6 +- .../scenes/src/app/scenes/icon/icon-scene.ts | 2 +- .../src/app/scenes/input/input-scene.ts | 2 +- .../scenes/src/app/scenes/list/list-scene.ts | 2 +- .../scenes/src/app/scenes/menu/menu-scene.ts | 2 +- .../app/scenes/paginator/paginator-scene.ts | 3 +- .../scenes/placeholder/placeholder-scene.ts | 2 +- .../scenes/progress-bar/progress-bar-scene.ts | 3 +- .../progress-spinner-scene.ts | 3 +- .../src/app/scenes/radio/radio-scene.ts | 2 +- .../src/app/scenes/ripples/ripples-scene.ts | 6 +- .../src/app/scenes/select/select-scene.ts | 2 +- .../src/app/scenes/sidenav/sidenav-scene.ts | 2 +- .../scenes/slide-toggle/slide-toggle-scene.ts | 3 +- .../src/app/scenes/slider/slider-scene.ts | 4 +- .../app/scenes/snack-bar/snack-bar-scene.ts | 1 - .../scenes/src/app/scenes/sort/sort-scene.ts | 2 +- .../src/app/scenes/stepper/stepper-scene.ts | 2 +- .../src/app/scenes/table/table-scene.ts | 2 +- .../scenes/src/app/scenes/tabs/tabs-scene.ts | 2 +- .../app/scenes/timepicker/timepicker-scene.ts | 3 +- .../src/app/scenes/toolbar/toolbar-scene.ts | 2 +- .../src/app/scenes/tooltip/tooltip-scene.ts | 6 +- .../scenes/src/app/scenes/tree/tree-scene.ts | 10 +- .../src/environments/environment.prod.ts | 2 +- .../scenes/src/environments/environment.ts | 2 +- material.angular.io/scenes/src/main.ts | 10 +- material.angular.io/scenes/src/polyfills.ts | 3 +- material.angular.io/scenes/src/test.ts | 4 +- material.angular.io/scenes/tsconfig.app.json | 9 +- material.angular.io/scenes/tsconfig.spec.json | 15 +-- material.angular.io/src/app/index.ts | 1 - .../src/app/material-docs-app.ts | 4 +- .../component-category-list.spec.ts | 9 +- .../component-category-list.ts | 20 +-- .../component-page-header.spec.ts | 1 - .../component-page-header.ts | 2 +- .../component-sidenav-can-load-guard.ts | 4 +- .../component-sidenav.spec.ts | 9 +- .../component-sidenav/component-sidenav.ts | 117 ++++++++--------- .../component-viewer/component-styling.ts | 11 +- .../component-viewer/component-viewer.spec.ts | 18 +-- .../component-viewer/component-viewer.ts | 122 ++++++++---------- .../app/pages/component-viewer/token-table.ts | 10 +- .../app/pages/guide-list/guide-list.spec.ts | 6 +- .../src/app/pages/guide-list/guide-list.ts | 7 +- .../pages/guide-viewer/guide-viewer.spec.ts | 10 +- .../app/pages/guide-viewer/guide-viewer.ts | 26 ++-- .../src/app/pages/homepage/homepage.ts | 3 +- .../src/app/pages/not-found/not-found.ts | 2 +- material.angular.io/src/app/routes.ts | 14 +- .../src/app/shared/analytics/analytics.ts | 7 +- .../src/app/shared/carousel/carousel.spec.ts | 10 +- .../src/app/shared/carousel/carousel.ts | 4 +- .../app/shared/cookie-popup/cookie-popup.ts | 2 +- .../shared/doc-viewer/deprecated-tooltip.ts | 18 +-- .../shared/doc-viewer/doc-viewer-module.ts | 7 +- .../app/shared/doc-viewer/doc-viewer.spec.ts | 9 +- .../src/app/shared/doc-viewer/doc-viewer.ts | 70 +++++----- .../src/app/shared/doc-viewer/header-link.ts | 4 +- .../documentation-items.ts | 37 +++--- .../app/shared/example-viewer/code-snippet.ts | 10 +- .../shared/example-viewer/example-viewer.ts | 14 +- .../src/app/shared/footer/footer.ts | 2 +- .../shared/guide-items/guide-items.spec.ts | 1 - .../src/app/shared/guide-items/guide-items.ts | 17 ++- .../src/app/shared/navbar/navbar.ts | 3 +- .../navigation-focus.service.ts | 41 +++--- .../navigation-focus/navigation-focus.spec.ts | 35 +++-- .../navigation-focus/navigation-focus.ts | 6 +- .../shared/stack-blitz/stack-blitz-button.ts | 23 ++-- .../stack-blitz/stack-blitz-writer.spec.ts | 17 +-- .../shared/stack-blitz/stack-blitz-writer.ts | 30 +++-- .../style-manager/style-manager.spec.ts | 11 +- .../app/shared/style-manager/style-manager.ts | 1 - .../src/app/shared/support/support.spec.ts | 2 +- .../src/app/shared/support/support.ts | 5 +- .../src/app/shared/svg-viewer/svg-viewer.ts | 5 +- .../table-of-contents.spec.ts | 15 +-- .../table-of-contents/table-of-contents.ts | 70 +++++----- .../app/shared/theme-picker/theme-picker.ts | 17 ++- .../theme-storage/theme-storage.spec.ts | 5 +- .../theme-storage/theme-storage.ts | 5 +- .../shared/version-picker/version-picker.ts | 6 +- .../src/app/testing/testing-module.ts | 5 +- .../src/assets/stack-blitz/angular.json | 20 +-- .../src/assets/stack-blitz/karma.conf.js | 13 +- .../src/assets/stack-blitz/src/main.ts | 6 +- .../src/assets/stack-blitz/src/test.ts | 9 +- .../src/assets/stack-blitz/tsconfig.app.json | 8 +- .../src/assets/stack-blitz/tsconfig.json | 5 +- .../src/assets/stack-blitz/tsconfig.spec.json | 13 +- material.angular.io/src/main.ts | 20 +-- material.angular.io/src/polyfills.ts | 3 +- .../tools/optimize-scene-screenshots.js | 6 +- material.angular.io/tsconfig.app.json | 9 +- material.angular.io/tsconfig.spec.json | 15 +-- 126 files changed, 638 insertions(+), 830 deletions(-) diff --git a/material.angular.io/.eslintrc.json b/material.angular.io/.eslintrc.json index ac195bb30e20..53064e82a2e5 100644 --- a/material.angular.io/.eslintrc.json +++ b/material.angular.io/.eslintrc.json @@ -1,24 +1,12 @@ { "root": true, - "ignorePatterns": [ - "*.d.ts", - "src/assets/stack-blitz/**/*.ts" - ], + "ignorePatterns": ["*.d.ts", "src/assets/stack-blitz/**/*.ts"], "overrides": [ { - "files": [ - "*.ts" - ], - "plugins": [ - "@stylistic", - "@typescript-eslint", - "ban" - ], + "files": ["*.ts"], + "plugins": ["@stylistic", "@typescript-eslint", "ban"], "parserOptions": { - "project": [ - "tsconfig.json", - "e2e/tsconfig.json" - ], + "project": ["tsconfig.json", "e2e/tsconfig.json"], "createDefaultProgram": true }, "extends": [ @@ -53,28 +41,11 @@ "allowTemplateLiterals": true } ], - "@stylistic/semi": [ - "error" - ], - "arrow-parens": [ - "off", - "always" - ], - "brace-style": [ - "error", - "1tbs" - ], + "@stylistic/semi": ["error"], + "arrow-parens": ["off", "always"], + "brace-style": ["error", "1tbs"], "import/order": "off", - "linebreak-style": [ - "error", - "unix" - ], - "max-len": [ - "error", - { - "code": 100 - } - ], + "linebreak-style": ["error", "unix"], "ban/ban": [ "error", { @@ -90,10 +61,7 @@ "name": "xdescribe" }, { - "name": [ - "Object", - "assign" - ], + "name": ["Object", "assign"], "message": "Use the spread operator instead." } ], @@ -107,12 +75,8 @@ } }, { - "files": [ - "*.html" - ], - "extends": [ - "plugin:@angular-eslint/template/recommended" - ], + "files": ["*.html"], + "extends": ["plugin:@angular-eslint/template/recommended"], "rules": { "@angular-eslint/template/accessibility-alt-text": "error", "@angular-eslint/template/accessibility-elements-content": "error", diff --git a/material.angular.io/BUILD.bazel b/material.angular.io/BUILD.bazel index c7a12d00a617..97c50244a31f 100644 --- a/material.angular.io/BUILD.bazel +++ b/material.angular.io/BUILD.bazel @@ -12,56 +12,54 @@ npm_link_all_packages(name = "node_modules") copy_to_bin( name = "ng-base-config", srcs = [ - "angular.json", - "tsconfig.json", - "package.json", + "angular.json", + "package.json", + "tsconfig.json", ], ) # Test config files copy_to_bin( - name = "ng-base-test-config", - srcs = [ - "karma-custom-launchers.js", - ], + name = "ng-base-test-config", + srcs = [ + "karma-custom-launchers.js", + ], ) # Lint config files copy_to_bin( - name = "ng-base-lint-config", - srcs = [ - ".eslintrc.json", - ], + name = "ng-base-lint-config", + srcs = [ + ".eslintrc.json", + ], ) - # The main application ng_app( name = "app", project_name = "material-angular-io", deps = [ - "//:node_modules/@angular/components-examples", - "//:node_modules/@stackblitz/sdk", - "//:node_modules/path-normalize", - "//:node_modules/moment", + "//:node_modules/@angular/components-examples", + "//:node_modules/@stackblitz/sdk", + "//:node_modules/moment", + "//:node_modules/path-normalize", ], ) - js_test( - name = "audit", - entry_point = "tools/audit-docs.js", - args = [ - "$(location //:build.production)", - ], - data = [ - "tools/lighthouse-audit.mjs", - "//:build.production", - "//:node_modules/lighthouse", - "//:node_modules/lighthouse-logger", - "//:node_modules/puppeteer", - "//:node_modules/shelljs", - "//:node_modules/light-server", - ], - tags = ["audit"], + name = "audit", + args = [ + "$(location //:build.production)", + ], + data = [ + "tools/lighthouse-audit.mjs", + "//:build.production", + "//:node_modules/light-server", + "//:node_modules/lighthouse", + "//:node_modules/lighthouse-logger", + "//:node_modules/puppeteer", + "//:node_modules/shelljs", + ], + entry_point = "tools/audit-docs.js", + tags = ["audit"], ) diff --git a/material.angular.io/e2e/protractor.conf.js b/material.angular.io/e2e/protractor.conf.js index e55b5e92f9e8..933e382d79e7 100644 --- a/material.angular.io/e2e/protractor.conf.js +++ b/material.angular.io/e2e/protractor.conf.js @@ -8,10 +8,10 @@ const path = require('path'); // TODO(bazel): drop non-bazel const isBazel = !!process.env['TEST_TARGET']; if (isBazel) { - // Resolve CHROME_BIN and CHROMEDRIVER_BIN from relative paths to absolute paths within the - // runfiles tree so that subprocesses spawned in a different working directory can still find them. - process.env.CHROME_BIN = path.resolve(process.env.CHROME_BIN); - process.env.CHROMEDRIVER_BIN = path.resolve(process.env.CHROMEDRIVER_BIN); + // Resolve CHROME_BIN and CHROMEDRIVER_BIN from relative paths to absolute paths within the + // runfiles tree so that subprocesses spawned in a different working directory can still find them. + process.env.CHROME_BIN = path.resolve(process.env.CHROME_BIN); + process.env.CHROMEDRIVER_BIN = path.resolve(process.env.CHROMEDRIVER_BIN); } /** @@ -19,9 +19,7 @@ if (isBazel) { */ const config = { allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], + specs: ['./src/**/*.e2e-spec.ts'], chromeDriver: process.env.CHROMEDRIVER_BIN, capabilities: { 'browserName': 'chrome', @@ -37,7 +35,7 @@ const config = { '--hide-scrollbars', '--mute-audio', ], - } + }, }, directConnect: true, baseUrl: 'http://localhost:4200/', @@ -45,16 +43,16 @@ const config = { jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, - print: function() {} + print: function () {}, }, onPrepare() { if (!isBazel) { require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') + project: require('path').join(__dirname, './tsconfig.json'), }); } jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}})); - } + }, }; if (isBazel) { @@ -70,7 +68,7 @@ if (process.env['TRAVIS']) { 'tunnel-identifier': process.env['TRAVIS_JOB_NUMBER'], 'build': process.env['TRAVIS_JOB_NUMBER'], - 'name': 'Material Docs E2E' + 'name': 'Material Docs E2E', }; } diff --git a/material.angular.io/e2e/src/app.e2e-spec.ts b/material.angular.io/e2e/src/app.e2e-spec.ts index 00643a7e5eea..9f9fa0406ace 100644 --- a/material.angular.io/e2e/src/app.e2e-spec.ts +++ b/material.angular.io/e2e/src/app.e2e-spec.ts @@ -16,8 +16,10 @@ describe('Material Docs App', () => { afterEach(async () => { // Assert that there are no errors emitted from the browser const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); + expect(logs).not.toContain( + jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry), + ); }); }); diff --git a/material.angular.io/e2e/src/app.po.ts b/material.angular.io/e2e/src/app.po.ts index a02501b1cade..803e6041e524 100644 --- a/material.angular.io/e2e/src/app.po.ts +++ b/material.angular.io/e2e/src/app.po.ts @@ -6,7 +6,8 @@ export class MaterialDocsAppPage { } getTitleText() { - return element(by.css('app-homepage header .docs-header-headline .mat-h1')) - .getText() as Promise; + return element( + by.css('app-homepage header .docs-header-headline .mat-h1'), + ).getText() as Promise; } } diff --git a/material.angular.io/e2e/tsconfig.json b/material.angular.io/e2e/tsconfig.json index 39b800f78961..677f30ff8ab5 100644 --- a/material.angular.io/e2e/tsconfig.json +++ b/material.angular.io/e2e/tsconfig.json @@ -4,10 +4,6 @@ "outDir": "../out-tsc/e2e", "module": "commonjs", "target": "es5", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] + "types": ["jasmine", "jasminewd2", "node"] } } diff --git a/material.angular.io/karma-custom-launchers.js b/material.angular.io/karma-custom-launchers.js index 198b2f1b42c3..cbe1090015c6 100644 --- a/material.angular.io/karma-custom-launchers.js +++ b/material.angular.io/karma-custom-launchers.js @@ -11,26 +11,19 @@ exports.customLaunchers = { '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', - '--mute-audio' + '--mute-audio', ], }, ChromeHeadlessLocal: { base: 'ChromeHeadless', - flags: [ - '--window-size=1024,768' - ] + flags: ['--window-size=1024,768'], }, ChromeHeadlessCI: { base: 'ChromeHeadless', - flags: [ - '--window-size=1024,768', - '--no-sandbox' - ] + flags: ['--window-size=1024,768', '--no-sandbox'], }, FirefoxHeadless: { base: 'Firefox', - flags: [ - '-headless' - ] + flags: ['-headless'], }, }; diff --git a/material.angular.io/karma.conf.js b/material.angular.io/karma.conf.js index 7bdfcd2b74f3..38a067b0095a 100644 --- a/material.angular.io/karma.conf.js +++ b/material.angular.io/karma.conf.js @@ -25,12 +25,12 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true + fixWebpackSourcePaths: true, }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -43,6 +43,6 @@ module.exports = function (config) { }); if (process.env['TRAVIS']) { - config.browsers = [isBazel ? 'ChromeHeadlessNoSandbox' : 'ChromeHeadlessCI', 'FirefoxHeadless'] + config.browsers = [isBazel ? 'ChromeHeadlessNoSandbox' : 'ChromeHeadlessCI', 'FirefoxHeadless']; } }; diff --git a/material.angular.io/scenes/BUILD.bazel b/material.angular.io/scenes/BUILD.bazel index aba0093bc1c6..53b4848a432b 100644 --- a/material.angular.io/scenes/BUILD.bazel +++ b/material.angular.io/scenes/BUILD.bazel @@ -6,8 +6,8 @@ package(default_visibility = ["//visibility:public"]) ng_app( name = "scenes", deps = [ - "//:node_modules/@angular/components-examples", - "//:node_modules/@stackblitz/sdk", - "//:node_modules/moment", + "//:node_modules/@angular/components-examples", + "//:node_modules/@stackblitz/sdk", + "//:node_modules/moment", ], ) diff --git a/material.angular.io/scenes/e2e/protractor.conf.js b/material.angular.io/scenes/e2e/protractor.conf.js index 4e4f468abb74..eea35e611f1d 100644 --- a/material.angular.io/scenes/e2e/protractor.conf.js +++ b/material.angular.io/scenes/e2e/protractor.conf.js @@ -2,17 +2,17 @@ // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts -const { StacktraceOption } = require('jasmine-spec-reporter/built/configuration'); -const { SpecReporter } = require('jasmine-spec-reporter'); +const {StacktraceOption} = require('jasmine-spec-reporter/built/configuration'); +const {SpecReporter} = require('jasmine-spec-reporter'); const path = require('path'); // TODO(bazel): drop non-bazel const isBazel = !!process.env['TEST_TARGET']; if (isBazel) { - // Resolve CHROME_BIN and CHROMEDRIVER_BIN from relative paths to absolute paths within the - // runfiles tree so that subprocesses spawned in a different working directory can still find them. - process.env.CHROME_BIN = path.resolve(process.env.CHROME_BIN); - process.env.CHROMEDRIVER_BIN = path.resolve(process.env.CHROMEDRIVER_BIN); + // Resolve CHROME_BIN and CHROMEDRIVER_BIN from relative paths to absolute paths within the + // runfiles tree so that subprocesses spawned in a different working directory can still find them. + process.env.CHROME_BIN = path.resolve(process.env.CHROME_BIN); + process.env.CHROMEDRIVER_BIN = path.resolve(process.env.CHROMEDRIVER_BIN); } /** @@ -20,9 +20,7 @@ if (isBazel) { */ const config = { allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], + specs: ['./src/**/*.e2e-spec.ts'], chromeDriver: process.env.CHROMEDRIVER_BIN, capabilities: { 'browserName': 'chrome', @@ -38,7 +36,7 @@ const config = { '--hide-scrollbars', '--mute-audio', ], - } + }, }, directConnect: true, baseUrl: 'http://localhost:4200/', @@ -46,16 +44,18 @@ const config = { jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, - print: function() {} + print: function () {}, }, onPrepare() { if (!isBazel) { require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') + project: require('path').join(__dirname, './tsconfig.json'), }); } - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: StacktraceOption.PRETTY } })); - } + jasmine + .getEnv() + .addReporter(new SpecReporter({spec: {displayStacktrace: StacktraceOption.PRETTY}})); + }, }; if (isBazel) { diff --git a/material.angular.io/scenes/e2e/screenshot.ts b/material.angular.io/scenes/e2e/screenshot.ts index 5a76d44423fd..d8c97707e1a6 100644 --- a/material.angular.io/scenes/e2e/screenshot.ts +++ b/material.angular.io/scenes/e2e/screenshot.ts @@ -4,15 +4,15 @@ import {by, element} from 'protractor'; const OUTPUT_DIR = path.join(__dirname, '..', '..', 'src', 'assets', 'screenshots'); - export class Screenshot { /** The filename used to store the screenshot. */ get filename(): string { - return this.id + return ( + this.id .toLowerCase() .replace(/\s/g, '_') - .replace(/[^/a-z0-9_-]+/g, '') - + '.scene.png'; + .replace(/[^/a-z0-9_-]+/g, '') + '.scene.png' + ); } /** The full path to the screenshot */ @@ -34,7 +34,7 @@ export class Screenshot { } if (fs.existsSync(OUTPUT_DIR)) { - fs.writeFileSync(this.fullPath, png, {encoding: 'base64' }); + fs.writeFileSync(this.fullPath, png, {encoding: 'base64'}); } } } diff --git a/material.angular.io/scenes/e2e/src/app.po.ts b/material.angular.io/scenes/e2e/src/app.po.ts index 1d7291c9d647..4ec5e5a46fbf 100644 --- a/material.angular.io/scenes/e2e/src/app.po.ts +++ b/material.angular.io/scenes/e2e/src/app.po.ts @@ -1,4 +1,4 @@ -import { browser } from 'protractor'; +import {browser} from 'protractor'; export class AppPage { async navigateTo(component: string): Promise { diff --git a/material.angular.io/scenes/e2e/tsconfig.json b/material.angular.io/scenes/e2e/tsconfig.json index 7328b23a9ebd..41eb1193dab9 100644 --- a/material.angular.io/scenes/e2e/tsconfig.json +++ b/material.angular.io/scenes/e2e/tsconfig.json @@ -4,10 +4,6 @@ "outDir": "../../../out-tsc/e2e", "module": "commonjs", "target": "es5", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] + "types": ["jasmine", "jasminewd2", "node"] } } diff --git a/material.angular.io/scenes/karma.conf.js b/material.angular.io/scenes/karma.conf.js index 4f63ca506034..fbad10db22c4 100644 --- a/material.angular.io/scenes/karma.conf.js +++ b/material.angular.io/scenes/karma.conf.js @@ -22,15 +22,15 @@ module.exports = function (config) { require('karma-firefox-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage/scenes'), reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true + fixWebpackSourcePaths: true, }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -40,11 +40,10 @@ module.exports = function (config) { browsers: [isBazel ? 'ChromeHeadlessNoSandbox' : 'ChromeHeadlessLocal'], singleRun: false, customLaunchers: customLaunchers, - restartOnFileChange: true + restartOnFileChange: true, }); - if (process.env['TRAVIS']) { - config.browsers = [isBazel ? 'ChromeHeadlessNoSandbox' : 'ChromeHeadlessCI', 'FirefoxHeadless'] + config.browsers = [isBazel ? 'ChromeHeadlessNoSandbox' : 'ChromeHeadlessCI', 'FirefoxHeadless']; } }; diff --git a/material.angular.io/scenes/src/app/app-routes.ts b/material.angular.io/scenes/src/app/app-routes.ts index fd060efc10ed..d11b086b4e7f 100644 --- a/material.angular.io/scenes/src/app/app-routes.ts +++ b/material.angular.io/scenes/src/app/app-routes.ts @@ -41,13 +41,13 @@ import {TreeScene} from './scenes/tree/tree-scene'; let hue = 0; type SceneViewerRoute = { - path: string, - component: ComponentType, + path: string; + component: ComponentType; data: { - scene: ComponentType, - scale?: number, - hueRotate?: number - } + scene: ComponentType; + scale?: number; + hueRotate?: number; + }; }; export const routes: SceneViewerRoute[] = [ @@ -75,7 +75,7 @@ export const routes: SceneViewerRoute[] = [ { path: 'progress-spinner', component: SceneViewer, - data: {scale: 1.3, scene: ProgressSpinnerScene} + data: {scale: 1.3, scene: ProgressSpinnerScene}, }, {path: 'radio', component: SceneViewer, data: {scene: RadioScene}}, {path: 'ripple', component: SceneViewer, data: {scene: RipplesScene}}, @@ -92,5 +92,6 @@ export const routes: SceneViewerRoute[] = [ {path: 'toolbar', component: SceneViewer, data: {scene: ToolbarScene}}, {path: 'tooltip', component: SceneViewer, data: {scene: TooltipScene}}, {path: 'tree', component: SceneViewer, data: {scene: TreeScene}}, -].sort((a, b) => (a.path > b.path) ? 1 : ((b.path > a.path) ? -1 : 0)) +] + .sort((a, b) => (a.path > b.path ? 1 : b.path > a.path ? -1 : 0)) .map((route: SceneViewerRoute) => ({...route, data: {...route.data, hueRotate: 15 * hue++}})); diff --git a/material.angular.io/scenes/src/app/app.component.ts b/material.angular.io/scenes/src/app/app.component.ts index da0935b22750..2340bfeaec77 100644 --- a/material.angular.io/scenes/src/app/app.component.ts +++ b/material.angular.io/scenes/src/app/app.component.ts @@ -6,6 +6,6 @@ import {RouterOutlet} from '@angular/router'; template: '', styleUrls: ['./app.component.scss'], standalone: true, - imports: [RouterOutlet] + imports: [RouterOutlet], }) -export class AppComponent { } +export class AppComponent {} diff --git a/material.angular.io/scenes/src/app/scene-viewer/scene-viewer.ts b/material.angular.io/scenes/src/app/scene-viewer/scene-viewer.ts index 0044f3a0f20d..cfcc7b8b9347 100644 --- a/material.angular.io/scenes/src/app/scene-viewer/scene-viewer.ts +++ b/material.angular.io/scenes/src/app/scene-viewer/scene-viewer.ts @@ -5,7 +5,7 @@ import { OnInit, ViewContainerRef, ViewEncapsulation, - viewChild + viewChild, } from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {DomSanitizer, SafeStyle} from '@angular/platform-browser'; @@ -43,10 +43,12 @@ export class SceneViewer implements OnInit { /** Component of scene to display */ @Input() component: any; - readonly scene = viewChild.required('scene', { read: ViewContainerRef }); + readonly scene = viewChild.required('scene', {read: ViewContainerRef}); - constructor(private route: ActivatedRoute, - private sanitizer: DomSanitizer) { + constructor( + private route: ActivatedRoute, + private sanitizer: DomSanitizer, + ) { this.hueRotation = this.route.snapshot.data['hueRotate']; this.component = this.route.snapshot.data['scene']; this.scale = this.route.snapshot.data['scale']; diff --git a/material.angular.io/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts b/material.angular.io/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts index ee5f1fa16e30..22d55ce1229d 100644 --- a/material.angular.io/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts @@ -1,15 +1,9 @@ -import { - AfterViewInit, - Component, - ViewEncapsulation, - viewChild -} from '@angular/core'; +import {AfterViewInit, Component, ViewEncapsulation, viewChild} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInput, MatInputModule} from '@angular/material/input'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-autocomplete-scene', @@ -33,4 +27,3 @@ export class AutocompleteScene implements AfterViewInit { this.input().focus(); } } - diff --git a/material.angular.io/scenes/src/app/scenes/badge/badge-scene.ts b/material.angular.io/scenes/src/app/scenes/badge/badge-scene.ts index 6b42b18dae8e..0d57c710c80d 100644 --- a/material.angular.io/scenes/src/app/scenes/badge/badge-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/badge/badge-scene.ts @@ -8,6 +8,6 @@ import {MatBadgeModule} from '@angular/material/badge'; templateUrl: './badge-scene.html', styleUrls: ['./badge-scene.scss'], standalone: true, - imports: [MatIconModule, MatBadgeModule] + imports: [MatIconModule, MatBadgeModule], }) export class BadgeScene {} diff --git a/material.angular.io/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.ts b/material.angular.io/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.ts index 906b1a719444..18eb3cac6d05 100644 --- a/material.angular.io/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.ts @@ -3,7 +3,6 @@ import {MatBottomSheet} from '@angular/material/bottom-sheet'; import {MatIconModule} from '@angular/material/icon'; import {MatListModule} from '@angular/material/list'; - @Component({ selector: 'app-bottom-sheet-scene', template: '', @@ -25,6 +24,6 @@ export class BottomSheetScene implements AfterViewInit { templateUrl: './bottom-sheet-scene.html', styleUrls: ['./bottom-sheet-scene.scss'], standalone: true, - imports: [MatListModule, MatIconModule] + imports: [MatListModule, MatIconModule], }) export class SampleBottomSheet {} diff --git a/material.angular.io/scenes/src/app/scenes/button/button-scene.ts b/material.angular.io/scenes/src/app/scenes/button/button-scene.ts index 0202cfd19964..78f6f41685ab 100644 --- a/material.angular.io/scenes/src/app/scenes/button/button-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/button/button-scene.ts @@ -8,7 +8,6 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: './button-scene.html', styleUrls: ['./button-scene.scss'], standalone: true, - imports: [MatButtonModule, MatIconModule] + imports: [MatButtonModule, MatIconModule], }) -export class ButtonScene { -} +export class ButtonScene {} diff --git a/material.angular.io/scenes/src/app/scenes/card/card-scene.ts b/material.angular.io/scenes/src/app/scenes/card/card-scene.ts index 8daa63d7d9ce..6b0bc6a8fa84 100644 --- a/material.angular.io/scenes/src/app/scenes/card/card-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/card/card-scene.ts @@ -1,7 +1,6 @@ import {Component} from '@angular/core'; import {MatCardModule} from '@angular/material/card'; - @Component({ selector: 'app-card-scene', templateUrl: './card-scene.html', diff --git a/material.angular.io/scenes/src/app/scenes/checkbox/checkbox-scene.ts b/material.angular.io/scenes/src/app/scenes/checkbox/checkbox-scene.ts index 384004017fe9..15ca57982c8b 100755 --- a/material.angular.io/scenes/src/app/scenes/checkbox/checkbox-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/checkbox/checkbox-scene.ts @@ -7,6 +7,6 @@ import {MatCheckboxModule} from '@angular/material/checkbox'; templateUrl: './checkbox-scene.html', styleUrls: ['./checkbox-scene.scss'], standalone: true, - imports: [MatCheckboxModule] + imports: [MatCheckboxModule], }) export class CheckboxScene {} diff --git a/material.angular.io/scenes/src/app/scenes/chips/chips-scene.ts b/material.angular.io/scenes/src/app/scenes/chips/chips-scene.ts index 274979a5bed0..9ab2f1283fe9 100644 --- a/material.angular.io/scenes/src/app/scenes/chips/chips-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/chips/chips-scene.ts @@ -7,6 +7,6 @@ import {MatChipsModule} from '@angular/material/chips'; templateUrl: './chips-scene.html', styleUrls: ['./chips-scene.scss'], standalone: true, - imports: [MatChipsModule] + imports: [MatChipsModule], }) export class ChipsScene {} diff --git a/material.angular.io/scenes/src/app/scenes/core/core-scene.ts b/material.angular.io/scenes/src/app/scenes/core/core-scene.ts index 8c64e58174cc..57768470f765 100644 --- a/material.angular.io/scenes/src/app/scenes/core/core-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/core/core-scene.ts @@ -7,6 +7,6 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: './core-scene.html', styleUrls: ['./core-scene.scss'], standalone: true, - imports: [MatIconModule] + imports: [MatIconModule], }) export class CoreScene {} diff --git a/material.angular.io/scenes/src/app/scenes/datepicker/datepicker-scene.ts b/material.angular.io/scenes/src/app/scenes/datepicker/datepicker-scene.ts index 5b8a63fc5c1a..1c81efd466bc 100644 --- a/material.angular.io/scenes/src/app/scenes/datepicker/datepicker-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/datepicker/datepicker-scene.ts @@ -1,14 +1,13 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatDatepickerModule} from '@angular/material/datepicker'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-datepicker-scene', templateUrl: './datepicker-scene.html', styleUrls: ['./datepicker-scene.scss'], standalone: true, - imports: [MatDatepickerModule] + imports: [MatDatepickerModule], }) export class DatepickerScene { minDate = new Date(2024, 3, 2); diff --git a/material.angular.io/scenes/src/app/scenes/dialog/dialog-scene.ts b/material.angular.io/scenes/src/app/scenes/dialog/dialog-scene.ts index b27fe4127bfb..5886ee1b5166 100644 --- a/material.angular.io/scenes/src/app/scenes/dialog/dialog-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/dialog/dialog-scene.ts @@ -6,7 +6,7 @@ import {MatDialog, MatDialogModule} from '@angular/material/dialog'; encapsulation: ViewEncapsulation.None, selector: 'app-dialog-scene', template: '', - standalone: true + standalone: true, }) export class DialogScene { constructor(public dialog: MatDialog) { @@ -18,7 +18,6 @@ export class DialogScene { } } - @Component({ selector: 'app-dialog-scene-example-dialog', template: ` diff --git a/material.angular.io/scenes/src/app/scenes/divider/divider-scene.ts b/material.angular.io/scenes/src/app/scenes/divider/divider-scene.ts index 54fa0c4b4c2d..8d93cd798b5d 100644 --- a/material.angular.io/scenes/src/app/scenes/divider/divider-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/divider/divider-scene.ts @@ -9,6 +9,6 @@ import {MatDividerModule} from '@angular/material/divider'; templateUrl: './divider-scene.html', styleUrls: ['./divider-scene.scss'], standalone: true, - imports: [MatListModule, MatIconModule, MatDividerModule] + imports: [MatListModule, MatIconModule, MatDividerModule], }) export class DividerScene {} diff --git a/material.angular.io/scenes/src/app/scenes/expansion/expansion-scene.ts b/material.angular.io/scenes/src/app/scenes/expansion/expansion-scene.ts index d4d39b709ff8..15a308b22c4a 100644 --- a/material.angular.io/scenes/src/app/scenes/expansion/expansion-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/expansion/expansion-scene.ts @@ -8,6 +8,6 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: './expansion-scene.html', styleUrls: ['./expansion-scene.scss'], standalone: true, - imports: [MatExpansionModule, MatIconModule] + imports: [MatExpansionModule, MatIconModule], }) export class ExpansionScene {} diff --git a/material.angular.io/scenes/src/app/scenes/form-field/form-field-scene.ts b/material.angular.io/scenes/src/app/scenes/form-field/form-field-scene.ts index a83ef0a19546..6ba94d2aa82f 100644 --- a/material.angular.io/scenes/src/app/scenes/form-field/form-field-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/form-field/form-field-scene.ts @@ -8,10 +8,6 @@ import {MatFormFieldModule} from '@angular/material/form-field'; selector: 'app-form-field-scene', templateUrl: './form-field-scene.html', standalone: true, - imports: [ - MatFormFieldModule, - MatInputModule, - MatIconModule, - ], + imports: [MatFormFieldModule, MatInputModule, MatIconModule], }) export class FormFieldScene {} diff --git a/material.angular.io/scenes/src/app/scenes/icon/icon-scene.ts b/material.angular.io/scenes/src/app/scenes/icon/icon-scene.ts index af4014ced2aa..4844c32ee2c1 100644 --- a/material.angular.io/scenes/src/app/scenes/icon/icon-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/icon/icon-scene.ts @@ -7,6 +7,6 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: './icon-scene.html', styleUrls: ['./icon-scene.scss'], standalone: true, - imports: [MatIconModule] + imports: [MatIconModule], }) export class IconScene {} diff --git a/material.angular.io/scenes/src/app/scenes/input/input-scene.ts b/material.angular.io/scenes/src/app/scenes/input/input-scene.ts index 34c4aeeb84ef..3f3f588583b0 100644 --- a/material.angular.io/scenes/src/app/scenes/input/input-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/input/input-scene.ts @@ -8,6 +8,6 @@ import {MatInputModule} from '@angular/material/input'; templateUrl: './input-scene.html', styleUrls: ['./input-scene.scss'], standalone: true, - imports: [MatFormFieldModule, MatInputModule] + imports: [MatFormFieldModule, MatInputModule], }) export class InputScene {} diff --git a/material.angular.io/scenes/src/app/scenes/list/list-scene.ts b/material.angular.io/scenes/src/app/scenes/list/list-scene.ts index 447a14377b52..306e1d9eb934 100644 --- a/material.angular.io/scenes/src/app/scenes/list/list-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/list/list-scene.ts @@ -8,6 +8,6 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: './list-scene.html', styleUrls: ['./list-scene.scss'], standalone: true, - imports: [MatListModule, MatIconModule] + imports: [MatListModule, MatIconModule], }) export class ListScene {} diff --git a/material.angular.io/scenes/src/app/scenes/menu/menu-scene.ts b/material.angular.io/scenes/src/app/scenes/menu/menu-scene.ts index 7b4267e7b4c0..7fa162d98eb9 100644 --- a/material.angular.io/scenes/src/app/scenes/menu/menu-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/menu/menu-scene.ts @@ -9,7 +9,7 @@ import {MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; templateUrl: './menu-scene.html', styleUrls: ['./menu-scene.scss'], standalone: true, - imports: [MatButtonModule, MatMenuModule, MatIconModule] + imports: [MatButtonModule, MatMenuModule, MatIconModule], }) export class MenuScene implements AfterViewInit { readonly trigger = viewChild.required('menuTrigger'); diff --git a/material.angular.io/scenes/src/app/scenes/paginator/paginator-scene.ts b/material.angular.io/scenes/src/app/scenes/paginator/paginator-scene.ts index a423548df484..d5c98bac822a 100644 --- a/material.angular.io/scenes/src/app/scenes/paginator/paginator-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/paginator/paginator-scene.ts @@ -1,13 +1,12 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatPaginatorModule} from '@angular/material/paginator'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-paginator-scene', templateUrl: './paginator-scene.html', styleUrls: ['./paginator-scene.scss'], standalone: true, - imports: [MatPaginatorModule] + imports: [MatPaginatorModule], }) export class PaginatorScene {} diff --git a/material.angular.io/scenes/src/app/scenes/placeholder/placeholder-scene.ts b/material.angular.io/scenes/src/app/scenes/placeholder/placeholder-scene.ts index 63721598e80c..197fd1748cba 100644 --- a/material.angular.io/scenes/src/app/scenes/placeholder/placeholder-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/placeholder/placeholder-scene.ts @@ -5,6 +5,6 @@ import {Component, ViewEncapsulation} from '@angular/core'; selector: 'app-button-toggle-scene', templateUrl: './placeholder-scene.html', styleUrls: ['./placeholder-scene.scss'], - standalone: true + standalone: true, }) export class PlaceHolderScene {} diff --git a/material.angular.io/scenes/src/app/scenes/progress-bar/progress-bar-scene.ts b/material.angular.io/scenes/src/app/scenes/progress-bar/progress-bar-scene.ts index 405405fe749f..3fcd92c05e69 100644 --- a/material.angular.io/scenes/src/app/scenes/progress-bar/progress-bar-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/progress-bar/progress-bar-scene.ts @@ -1,13 +1,12 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatProgressBarModule} from '@angular/material/progress-bar'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-progress-bar-scene', templateUrl: './progress-bar-scene.html', styleUrls: ['./progress-bar-scene.scss'], standalone: true, - imports: [MatProgressBarModule] + imports: [MatProgressBarModule], }) export class ProgressBarScene {} diff --git a/material.angular.io/scenes/src/app/scenes/progress-spinner/progress-spinner-scene.ts b/material.angular.io/scenes/src/app/scenes/progress-spinner/progress-spinner-scene.ts index 683fb2a6d007..9ef0c7195cd6 100644 --- a/material.angular.io/scenes/src/app/scenes/progress-spinner/progress-spinner-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/progress-spinner/progress-spinner-scene.ts @@ -1,13 +1,12 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-input-scene', templateUrl: './progress-spinner-scene.html', styleUrls: ['./progress-spinner-scene.scss'], standalone: true, - imports: [MatProgressSpinnerModule] + imports: [MatProgressSpinnerModule], }) export class ProgressSpinnerScene {} diff --git a/material.angular.io/scenes/src/app/scenes/radio/radio-scene.ts b/material.angular.io/scenes/src/app/scenes/radio/radio-scene.ts index 85b4fadc6a65..7ce1d302ef5f 100644 --- a/material.angular.io/scenes/src/app/scenes/radio/radio-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/radio/radio-scene.ts @@ -7,6 +7,6 @@ import {MatRadioModule} from '@angular/material/radio'; templateUrl: './radio-scene.html', styleUrls: ['./radio-scene.scss'], standalone: true, - imports: [MatRadioModule] + imports: [MatRadioModule], }) export class RadioScene {} diff --git a/material.angular.io/scenes/src/app/scenes/ripples/ripples-scene.ts b/material.angular.io/scenes/src/app/scenes/ripples/ripples-scene.ts index 946ef6ee6188..6e6575becdc5 100644 --- a/material.angular.io/scenes/src/app/scenes/ripples/ripples-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/ripples/ripples-scene.ts @@ -8,11 +8,11 @@ import {MatRipple, MatRippleModule} from '@angular/material/core'; templateUrl: './ripples-scene.html', styleUrls: ['./ripples-scene.scss'], standalone: true, - imports: [MatRippleModule, MatButtonModule] + imports: [MatRippleModule, MatButtonModule], }) export class RipplesScene implements AfterViewInit { - readonly buttonRipple = viewChild.required('button', { read: MatRipple }); - readonly wrapperRipple = viewChild.required('wrapper', { read: MatRipple }); + readonly buttonRipple = viewChild.required('button', {read: MatRipple}); + readonly wrapperRipple = viewChild.required('wrapper', {read: MatRipple}); ngAfterViewInit() { this.buttonRipple().launch(140, 100, { diff --git a/material.angular.io/scenes/src/app/scenes/select/select-scene.ts b/material.angular.io/scenes/src/app/scenes/select/select-scene.ts index 346eb104af49..646457561958 100644 --- a/material.angular.io/scenes/src/app/scenes/select/select-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/select/select-scene.ts @@ -9,7 +9,7 @@ import {MatOptionModule} from '@angular/material/core'; templateUrl: './select-scene.html', styleUrls: ['./select-scene.scss'], standalone: true, - imports: [MatFormFieldModule, MatSelectModule, MatOptionModule] + imports: [MatFormFieldModule, MatSelectModule, MatOptionModule], }) export class SelectScene implements AfterViewInit { readonly select = viewChild.required(MatSelect); diff --git a/material.angular.io/scenes/src/app/scenes/sidenav/sidenav-scene.ts b/material.angular.io/scenes/src/app/scenes/sidenav/sidenav-scene.ts index 6b4124feef60..2eb64d6e8d27 100644 --- a/material.angular.io/scenes/src/app/scenes/sidenav/sidenav-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/sidenav/sidenav-scene.ts @@ -9,6 +9,6 @@ import {MatListModule} from '@angular/material/list'; templateUrl: './sidenav-scene.html', styleUrls: ['./sidenav-scene.scss'], standalone: true, - imports: [MatSidenavModule, MatListModule, MatIconModule] + imports: [MatSidenavModule, MatListModule, MatIconModule], }) export class SidenavScene {} diff --git a/material.angular.io/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.ts b/material.angular.io/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.ts index 290387a2043f..f83d32d344c2 100644 --- a/material.angular.io/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.ts @@ -2,13 +2,12 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatIconModule} from '@angular/material/icon'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-slide-toggle-scene', templateUrl: './slide-toggle-scene.html', styleUrls: ['./slide-toggle-scene.scss'], standalone: true, - imports: [MatIconModule, MatSlideToggleModule] + imports: [MatIconModule, MatSlideToggleModule], }) export class SlideToggleScene {} diff --git a/material.angular.io/scenes/src/app/scenes/slider/slider-scene.ts b/material.angular.io/scenes/src/app/scenes/slider/slider-scene.ts index a822962b8587..999d7a335c4b 100644 --- a/material.angular.io/scenes/src/app/scenes/slider/slider-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/slider/slider-scene.ts @@ -2,17 +2,15 @@ import {AfterViewInit, Component, ViewEncapsulation} from '@angular/core'; import {MatIconModule} from '@angular/material/icon'; import {MatSliderModule} from '@angular/material/slider'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-slider-scene', templateUrl: './slider-scene.html', styleUrls: ['./slider-scene.scss'], standalone: true, - imports: [MatIconModule, MatSliderModule] + imports: [MatIconModule, MatSliderModule], }) export class SliderScene implements AfterViewInit { - ngAfterViewInit() { const volume = document.querySelector('mat-slider input'); (volume as any).focus(); diff --git a/material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.ts b/material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.ts index 2b9386adf190..4b09c06de058 100644 --- a/material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.ts @@ -1,7 +1,6 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatSnackBar} from '@angular/material/snack-bar'; - @Component({ selector: 'app-snack-bar-scene', template: '
', diff --git a/material.angular.io/scenes/src/app/scenes/sort/sort-scene.ts b/material.angular.io/scenes/src/app/scenes/sort/sort-scene.ts index 12c6a8c9114e..3b6d3680b4af 100644 --- a/material.angular.io/scenes/src/app/scenes/sort/sort-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/sort/sort-scene.ts @@ -15,7 +15,7 @@ export interface Dessert { templateUrl: './sort-scene.html', styleUrls: ['./sort-scene.scss'], standalone: true, - imports: [MatSortModule] + imports: [MatSortModule], }) export class SortScene { desserts: Dessert[] = [ diff --git a/material.angular.io/scenes/src/app/scenes/stepper/stepper-scene.ts b/material.angular.io/scenes/src/app/scenes/stepper/stepper-scene.ts index 648b55d6c4fc..875c439bdb79 100644 --- a/material.angular.io/scenes/src/app/scenes/stepper/stepper-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/stepper/stepper-scene.ts @@ -9,6 +9,6 @@ import {MatFormFieldModule} from '@angular/material/form-field'; templateUrl: './stepper-scene.html', styleUrls: ['./stepper-scene.scss'], standalone: true, - imports: [MatStepperModule, MatFormFieldModule, MatInputModule] + imports: [MatStepperModule, MatFormFieldModule, MatInputModule], }) export class StepperScene {} diff --git a/material.angular.io/scenes/src/app/scenes/table/table-scene.ts b/material.angular.io/scenes/src/app/scenes/table/table-scene.ts index 7ff9392d46a7..bbd97e2525f8 100644 --- a/material.angular.io/scenes/src/app/scenes/table/table-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/table/table-scene.ts @@ -21,7 +21,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ templateUrl: './table-scene.html', styleUrls: ['./table-scene.scss'], standalone: true, - imports: [MatCardModule, MatTableModule] + imports: [MatCardModule, MatTableModule], }) export class TableScene { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; diff --git a/material.angular.io/scenes/src/app/scenes/tabs/tabs-scene.ts b/material.angular.io/scenes/src/app/scenes/tabs/tabs-scene.ts index 26dcee9af2c9..6e317918d328 100644 --- a/material.angular.io/scenes/src/app/scenes/tabs/tabs-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/tabs/tabs-scene.ts @@ -6,6 +6,6 @@ import {MatTabsModule} from '@angular/material/tabs'; templateUrl: './tabs-scene.html', styleUrls: ['./tabs-scene.scss'], standalone: true, - imports: [MatTabsModule] + imports: [MatTabsModule], }) export class TabsScene {} diff --git a/material.angular.io/scenes/src/app/scenes/timepicker/timepicker-scene.ts b/material.angular.io/scenes/src/app/scenes/timepicker/timepicker-scene.ts index ded18214a14b..5fc584e88a83 100644 --- a/material.angular.io/scenes/src/app/scenes/timepicker/timepicker-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/timepicker/timepicker-scene.ts @@ -3,14 +3,13 @@ import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatTimepickerModule, MatTimepicker} from '@angular/material/timepicker'; - @Component({ encapsulation: ViewEncapsulation.None, selector: 'app-timepicker-scene', templateUrl: './timepicker-scene.html', styleUrls: ['./timepicker-scene.scss'], standalone: true, - imports: [MatTimepickerModule, MatFormFieldModule, MatInputModule] + imports: [MatTimepickerModule, MatFormFieldModule, MatInputModule], }) export class TimepickerScene implements AfterViewInit { value = new Date(2024, 0, 0, 0, 30, 0); diff --git a/material.angular.io/scenes/src/app/scenes/toolbar/toolbar-scene.ts b/material.angular.io/scenes/src/app/scenes/toolbar/toolbar-scene.ts index 7cd0a3bc77c6..0502b7be89a8 100644 --- a/material.angular.io/scenes/src/app/scenes/toolbar/toolbar-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/toolbar/toolbar-scene.ts @@ -8,6 +8,6 @@ import {MatToolbarModule} from '@angular/material/toolbar'; templateUrl: './toolbar-scene.html', styleUrls: ['./toolbar-scene.scss'], standalone: true, - imports: [MatToolbarModule, MatIconModule] + imports: [MatToolbarModule, MatIconModule], }) export class ToolbarScene {} diff --git a/material.angular.io/scenes/src/app/scenes/tooltip/tooltip-scene.ts b/material.angular.io/scenes/src/app/scenes/tooltip/tooltip-scene.ts index bf4eed61dac3..d2ca4e197c36 100644 --- a/material.angular.io/scenes/src/app/scenes/tooltip/tooltip-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/tooltip/tooltip-scene.ts @@ -9,11 +9,7 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: './tooltip-scene.html', styleUrls: ['./tooltip-scene.scss'], standalone: true, - imports: [ - MatButtonModule, - MatTooltipModule, - MatIconModule, - ], + imports: [MatButtonModule, MatTooltipModule, MatIconModule], }) export class TooltipScene implements AfterViewInit { readonly tooltip = viewChild.required(MatTooltip); diff --git a/material.angular.io/scenes/src/app/scenes/tree/tree-scene.ts b/material.angular.io/scenes/src/app/scenes/tree/tree-scene.ts index 1a4fd59cf25d..1372bc50b32c 100644 --- a/material.angular.io/scenes/src/app/scenes/tree/tree-scene.ts +++ b/material.angular.io/scenes/src/app/scenes/tree/tree-scene.ts @@ -36,23 +36,19 @@ interface FileFlatNode { templateUrl: './tree-scene.html', styleUrls: ['./tree-scene.scss'], standalone: true, - imports: [ - MatTreeModule, - MatIconModule, - MatButtonModule, - ], + imports: [MatTreeModule, MatIconModule, MatButtonModule], }) export class TreeScene { treeControl = new FlatTreeControl( node => node.level, - node => node.expandable + node => node.expandable, ); treeFlattener = new MatTreeFlattener( this._transformer, node => node.level, node => node.expandable, - node => node.children + node => node.children, ); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); diff --git a/material.angular.io/scenes/src/environments/environment.prod.ts b/material.angular.io/scenes/src/environments/environment.prod.ts index 3612073bc31c..c9669790be17 100644 --- a/material.angular.io/scenes/src/environments/environment.prod.ts +++ b/material.angular.io/scenes/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true, }; diff --git a/material.angular.io/scenes/src/environments/environment.ts b/material.angular.io/scenes/src/environments/environment.ts index 30d7bccb1989..31cb7855f144 100644 --- a/material.angular.io/scenes/src/environments/environment.ts +++ b/material.angular.io/scenes/src/environments/environment.ts @@ -3,7 +3,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, }; /* diff --git a/material.angular.io/scenes/src/main.ts b/material.angular.io/scenes/src/main.ts index c7fe4aa2707c..2eb8057d9d0e 100644 --- a/material.angular.io/scenes/src/main.ts +++ b/material.angular.io/scenes/src/main.ts @@ -13,16 +13,12 @@ import {provideRouter} from '@angular/router'; bootstrapApplication(AppComponent, { providers: [ - importProvidersFrom( - BrowserModule, - MatNativeDateModule, - NoopAnimationsModule, - ), + importProvidersFrom(BrowserModule, MatNativeDateModule, NoopAnimationsModule), { provide: OverlayContainer, useFactory: (doc: any, platform: Platform) => new SceneOverlayContainer(doc, platform), - deps: [DOCUMENT, Platform] + deps: [DOCUMENT, Platform], }, provideRouter(routes), - ] + ], }).catch(err => console.error(err)); diff --git a/material.angular.io/scenes/src/polyfills.ts b/material.angular.io/scenes/src/polyfills.ts index eb98194e4dba..7563149a0e62 100644 --- a/material.angular.io/scenes/src/polyfills.ts +++ b/material.angular.io/scenes/src/polyfills.ts @@ -58,8 +58,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js'; // Included with Angular CLI. - +import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS diff --git a/material.angular.io/scenes/src/test.ts b/material.angular.io/scenes/src/test.ts index bcc2186d9557..826f7f0d03fa 100644 --- a/material.angular.io/scenes/src/test.ts +++ b/material.angular.io/scenes/src/test.ts @@ -1,10 +1,10 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files import 'zone.js/testing'; -import { getTestBed } from '@angular/core/testing'; +import {getTestBed} from '@angular/core/testing'; import { BrowserDynamicTestingModule, - platformBrowserDynamicTesting + platformBrowserDynamicTesting, } from '@angular/platform-browser-dynamic/testing'; // First, initialize the Angular testing environment. diff --git a/material.angular.io/scenes/tsconfig.app.json b/material.angular.io/scenes/tsconfig.app.json index 5efcaa84b26c..2e8cbcc4aa6d 100644 --- a/material.angular.io/scenes/tsconfig.app.json +++ b/material.angular.io/scenes/tsconfig.app.json @@ -4,11 +4,6 @@ "outDir": "../../out-tsc/app", "types": [] }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] } diff --git a/material.angular.io/scenes/tsconfig.spec.json b/material.angular.io/scenes/tsconfig.spec.json index 836da120a6d6..50e52a04a0a1 100644 --- a/material.angular.io/scenes/tsconfig.spec.json +++ b/material.angular.io/scenes/tsconfig.spec.json @@ -2,17 +2,8 @@ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/spec", - "types": [ - "jasmine", - "node" - ] + "types": ["jasmine", "node"] }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] + "files": ["src/test.ts", "src/polyfills.ts"], + "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/material.angular.io/src/app/index.ts b/material.angular.io/src/app/index.ts index a595619f7f3b..ea7ac372be40 100644 --- a/material.angular.io/src/app/index.ts +++ b/material.angular.io/src/app/index.ts @@ -1,2 +1 @@ export * from './material-docs-app'; - diff --git a/material.angular.io/src/app/material-docs-app.ts b/material.angular.io/src/app/material-docs-app.ts index afd88e4e8800..7dfe75179983 100644 --- a/material.angular.io/src/app/material-docs-app.ts +++ b/material.angular.io/src/app/material-docs-app.ts @@ -29,7 +29,7 @@ export class MaterialDocsApp implements OnDestroy { .pipe( map(e => e.urlAfterRedirects), startWith(''), - pairwise() + pairwise(), ) .subscribe(([fromUrl, toUrl]) => { // We want to reset the scroll position on navigation except when navigating within @@ -38,7 +38,7 @@ export class MaterialDocsApp implements OnDestroy { resetScrollPosition(); } analytics.locationChanged(toUrl); - }) + }), ); } diff --git a/material.angular.io/src/app/pages/component-category-list/component-category-list.spec.ts b/material.angular.io/src/app/pages/component-category-list/component-category-list.spec.ts index 23375f3f05cd..243b0039958a 100644 --- a/material.angular.io/src/app/pages/component-category-list/component-category-list.spec.ts +++ b/material.angular.io/src/app/pages/component-category-list/component-category-list.spec.ts @@ -13,14 +13,12 @@ describe('ComponentCategoryList', () => { const fakeActivatedRoute = { snapshot: {}, - pathFromRoot: [{params}] + pathFromRoot: [{params}], }; TestBed.configureTestingModule({ imports: [ComponentCategoryListModule, DocsAppTestingModule], - providers: [ - {provide: ActivatedRoute, useValue: fakeActivatedRoute} - ] + providers: [{provide: ActivatedRoute, useValue: fakeActivatedRoute}], }).compileComponents(); })); @@ -37,8 +35,7 @@ describe('ComponentCategoryList', () => { const component = fixture.componentInstance; const components = component.docItems.getItems('components'); - const cards = fixture - .nativeElement.querySelectorAll('.docs-component-category-list-card'); + const cards = fixture.nativeElement.querySelectorAll('.docs-component-category-list-card'); expect(cards.length).toEqual(components.length); }); }); diff --git a/material.angular.io/src/app/pages/component-category-list/component-category-list.ts b/material.angular.io/src/app/pages/component-category-list/component-category-list.ts index 4030884a5046..581068532dda 100644 --- a/material.angular.io/src/app/pages/component-category-list/component-category-list.ts +++ b/material.angular.io/src/app/pages/component-category-list/component-category-list.ts @@ -5,10 +5,7 @@ import {ActivatedRoute, Params, RouterModule, RouterLink} from '@angular/router' import {MatRipple} from '@angular/material/core'; import {combineLatest, Observable, Subscription} from 'rxjs'; -import { - DocumentationItems, - SECTIONS -} from '../../shared/documentation-items/documentation-items'; +import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/documentation-items'; import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus'; import {ComponentPageTitle} from '../page-title/page-title'; @@ -18,22 +15,25 @@ import {ComponentPageTitle} from '../page-title/page-title'; templateUrl: './component-category-list.html', styleUrls: ['./component-category-list.scss'], standalone: true, - imports: [NavigationFocus, RouterLink, AsyncPipe, MatRipple] + imports: [NavigationFocus, RouterLink, AsyncPipe, MatRipple], }) export class ComponentCategoryList implements OnInit, OnDestroy { params: Observable | undefined; routeParamSubscription: Subscription = new Subscription(); _categoryListSummary: string | undefined; - constructor(public docItems: DocumentationItems, - public _componentPageTitle: ComponentPageTitle, - private _route: ActivatedRoute) {} + constructor( + public docItems: DocumentationItems, + public _componentPageTitle: ComponentPageTitle, + private _route: ActivatedRoute, + ) {} ngOnInit() { // Combine params from all of the path into a single object. this.params = combineLatest( this._route.pathFromRoot.map(route => route.params), - Object.assign); + Object.assign, + ); // title on topbar navigation this.routeParamSubscription = this.params.subscribe(params => { @@ -55,4 +55,4 @@ export class ComponentCategoryList implements OnInit, OnDestroy { imports: [MatCardModule, RouterModule, ComponentCategoryList], exports: [ComponentCategoryList], }) -export class ComponentCategoryListModule { } +export class ComponentCategoryListModule {} diff --git a/material.angular.io/src/app/pages/component-page-header/component-page-header.spec.ts b/material.angular.io/src/app/pages/component-page-header/component-page-header.spec.ts index 6911f62a5dad..fba5ad18ae95 100644 --- a/material.angular.io/src/app/pages/component-page-header/component-page-header.spec.ts +++ b/material.angular.io/src/app/pages/component-page-header/component-page-header.spec.ts @@ -2,7 +2,6 @@ import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; import {ComponentPageHeader} from './component-page-header'; import {DocsAppTestingModule} from '../../testing/testing-module'; - describe('ComponentPageHeader', () => { let fixture: ComponentFixture; diff --git a/material.angular.io/src/app/pages/component-page-header/component-page-header.ts b/material.angular.io/src/app/pages/component-page-header/component-page-header.ts index 94dcc34ca148..71d2297e8182 100644 --- a/material.angular.io/src/app/pages/component-page-header/component-page-header.ts +++ b/material.angular.io/src/app/pages/component-page-header/component-page-header.ts @@ -8,7 +8,7 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: './component-page-header.html', styleUrls: ['./component-page-header.scss'], standalone: true, - imports: [MatButtonModule, MatIconModule] + imports: [MatButtonModule, MatIconModule], }) export class ComponentPageHeader { @Output() toggleSidenav = new EventEmitter(); diff --git a/material.angular.io/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts b/material.angular.io/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts index 74d761a0c55a..3f3c222a6dff 100644 --- a/material.angular.io/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts +++ b/material.angular.io/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts @@ -7,14 +7,14 @@ import {SECTIONS} from '../../shared/documentation-items/documentation-items'; * items. */ @Injectable({providedIn: 'root'}) -export class CanActivateComponentSidenav { +export class CanActivateComponentSidenav { constructor(private router: Router) {} canActivate(route: ActivatedRouteSnapshot) { // Searches if the section defined in the base UrlSegment is a valid section from the // documentation items. If found, returns true to allow activation, otherwise blocks activation // and navigates to '/'. - if (Object.keys(SECTIONS).some((s => s.toLowerCase() === route.url[0].path.toLowerCase()))) { + if (Object.keys(SECTIONS).some(s => s.toLowerCase() === route.url[0].path.toLowerCase())) { return true; } diff --git a/material.angular.io/src/app/pages/component-sidenav/component-sidenav.spec.ts b/material.angular.io/src/app/pages/component-sidenav/component-sidenav.spec.ts index f0a6e2fa2c21..fbc1faa5eba6 100644 --- a/material.angular.io/src/app/pages/component-sidenav/component-sidenav.spec.ts +++ b/material.angular.io/src/app/pages/component-sidenav/component-sidenav.spec.ts @@ -23,7 +23,7 @@ describe('ComponentSidenav', () => { it('should close the sidenav on init', () => { // Spy on window.mediaMatch and return stub spyOn(window, 'matchMedia').and.returnValue({ - matches: true + matches: true, } as any); // TODO refactor this as none of these expectations are ever verified @@ -36,10 +36,9 @@ describe('ComponentSidenav', () => { it('should show a link for each item in doc items categories', () => { const totalItems = component.docItems.getItems('categories').length; - const totalLinks = fixture - .nativeElement - .querySelectorAll('.docs-component-viewer-sidenav li a') - .length; + const totalLinks = fixture.nativeElement.querySelectorAll( + '.docs-component-viewer-sidenav li a', + ).length; expect(totalLinks).toEqual(totalItems); }); }); diff --git a/material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts b/material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts index 4f483289874f..132410678283 100644 --- a/material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts +++ b/material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts @@ -7,7 +7,7 @@ import { ViewEncapsulation, forwardRef, input, - viewChild + viewChild, } from '@angular/core'; import {animate, state, style, transition, trigger} from '@angular/animations'; import {CdkAccordionModule} from '@angular/cdk/accordion'; @@ -24,24 +24,20 @@ import { Routes, RouterOutlet, RouterLinkActive, - RouterLink + RouterLink, } from '@angular/router'; import {combineLatest, Observable, Subscription} from 'rxjs'; import {map} from 'rxjs/operators'; import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module'; -import { - DocumentationItems -} from '../../shared/documentation-items/documentation-items'; +import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; import {Footer} from '../../shared/footer/footer'; -import { - NavigationFocusService -} from '../../shared/navigation-focus/navigation-focus.service'; +import {NavigationFocusService} from '../../shared/navigation-focus/navigation-focus.service'; import { ComponentCategoryList, - ComponentCategoryListModule + ComponentCategoryListModule, } from '../component-category-list/component-category-list'; import {ComponentPageHeader} from '../component-page-header/component-page-header'; import { @@ -49,7 +45,7 @@ import { ComponentExamples, ComponentOverview, ComponentViewer, - ComponentViewerModule + ComponentViewerModule, } from '../component-viewer/component-viewer'; import {ComponentStyling} from '../component-viewer/component-styling'; @@ -85,32 +81,38 @@ export class ComponentSidenav implements OnInit, OnDestroy { isScreenSmall: Observable; private subscriptions = new Subscription(); - constructor(public docItems: DocumentationItems, - private _route: ActivatedRoute, - private _navigationFocusService: NavigationFocusService, - zone: NgZone, - breakpoints: BreakpointObserver) { - this.isExtraScreenSmall = - breakpoints.observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`) - .pipe(map(breakpoint => breakpoint.matches)); - this.isScreenSmall = breakpoints.observe(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`) - .pipe(map(breakpoint => breakpoint.matches)); + constructor( + public docItems: DocumentationItems, + private _route: ActivatedRoute, + private _navigationFocusService: NavigationFocusService, + zone: NgZone, + breakpoints: BreakpointObserver, + ) { + this.isExtraScreenSmall = breakpoints + .observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`) + .pipe(map(breakpoint => breakpoint.matches)); + this.isScreenSmall = breakpoints + .observe(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`) + .pipe(map(breakpoint => breakpoint.matches)); } ngOnInit() { // Combine params from all of the path into a single object. this.params = combineLatest( - this._route.pathFromRoot.map(route => route.params), Object.assign); + this._route.pathFromRoot.map(route => route.params), + Object.assign, + ); this.subscriptions.add( - this._navigationFocusService.navigationEndEvents.pipe(map(() => this.isScreenSmall)) - .subscribe((shouldCloseSideNav) => { + this._navigationFocusService.navigationEndEvents + .pipe(map(() => this.isScreenSmall)) + .subscribe(shouldCloseSideNav => { const sidenav = this.sidenav(); if (shouldCloseSideNav && sidenav) { sidenav.close(); } - } - )); + }), + ); } ngOnDestroy() { @@ -127,18 +129,13 @@ export class ComponentSidenav implements OnInit, OnDestroy { templateUrl: './component-nav.html', animations: [ trigger('bodyExpansion', [ - state('collapsed', style({ height: '0px', display: 'none' })), - state('expanded', style({ height: '*', display: 'block' })), + state('collapsed', style({height: '0px', display: 'none'})), + state('expanded', style({height: '*', display: 'block'})), transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')), ]), ], standalone: true, - imports: [ - MatListModule, - RouterLinkActive, - RouterLink, - AsyncPipe, - ], + imports: [MatListModule, RouterLinkActive, RouterLink, AsyncPipe], }) export class ComponentNav { readonly params = input>(); @@ -147,32 +144,32 @@ export class ComponentNav { constructor(public docItems: DocumentationItems) {} } -const routes: Routes = [{ - path: '', - component: ComponentSidenav, - children: [ - {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'}, - {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'}, - { - path: 'categories', - children: [ - {path: '', component: ComponentCategoryList}, - ], - }, - { - path: ':id', - component: ComponentViewer, - children: [ - {path: '', redirectTo: 'overview', pathMatch: 'full'}, - {path: 'overview', component: ComponentOverview, pathMatch: 'full'}, - {path: 'api', component: ComponentApi, pathMatch: 'full'}, - {path: 'styling', component: ComponentStyling, pathMatch: 'full'}, - {path: 'examples', component: ComponentExamples, pathMatch: 'full'}, - ], - }, - {path: '**', redirectTo: '/404'} - ] -}]; +const routes: Routes = [ + { + path: '', + component: ComponentSidenav, + children: [ + {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'}, + {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'}, + { + path: 'categories', + children: [{path: '', component: ComponentCategoryList}], + }, + { + path: ':id', + component: ComponentViewer, + children: [ + {path: '', redirectTo: 'overview', pathMatch: 'full'}, + {path: 'overview', component: ComponentOverview, pathMatch: 'full'}, + {path: 'api', component: ComponentApi, pathMatch: 'full'}, + {path: 'styling', component: ComponentStyling, pathMatch: 'full'}, + {path: 'examples', component: ComponentExamples, pathMatch: 'full'}, + ], + }, + {path: '**', redirectTo: '/404'}, + ], + }, +]; @NgModule({ imports: [ @@ -187,7 +184,7 @@ const routes: Routes = [{ MatIconModule, RouterModule.forChild(routes), ComponentSidenav, - ComponentNav + ComponentNav, ], exports: [ComponentSidenav], }) diff --git a/material.angular.io/src/app/pages/component-viewer/component-styling.ts b/material.angular.io/src/app/pages/component-viewer/component-styling.ts index 5d27b1eb224d..287a1f16704a 100644 --- a/material.angular.io/src/app/pages/component-viewer/component-styling.ts +++ b/material.angular.io/src/app/pages/component-viewer/component-styling.ts @@ -47,11 +47,12 @@ export class ComponentStyling { private tokenService = inject(TokenService); private domSanitizer = inject(DomSanitizer); protected docItem = this.componentViewer.componentDocItem; - protected dataStream = - this.docItem.pipe(switchMap(item => this.tokenService.getTokenData(item))); + protected dataStream = this.docItem.pipe(switchMap(item => this.tokenService.getTokenData(item))); protected hasDataStream = this.dataStream.pipe( - map(data => data.themes.length > 0 && data.themes.some(d => d.tokens.length > 0))); + map(data => data.themes.length > 0 && data.themes.some(d => d.tokens.length > 0)), + ); - protected exampleStream = this.dataStream.pipe(map(data => data.example ? - this.domSanitizer.bypassSecurityTrustHtml(data.example) : null)); + protected exampleStream = this.dataStream.pipe( + map(data => (data.example ? this.domSanitizer.bypassSecurityTrustHtml(data.example) : null)), + ); } diff --git a/material.angular.io/src/app/pages/component-viewer/component-viewer.spec.ts b/material.angular.io/src/app/pages/component-viewer/component-viewer.spec.ts index 6fa2097f8870..7fac20e394da 100644 --- a/material.angular.io/src/app/pages/component-viewer/component-viewer.spec.ts +++ b/material.angular.io/src/app/pages/component-viewer/component-viewer.spec.ts @@ -15,9 +15,9 @@ const mockActivatedRoute = { snapshot: {}, fragment: observableOf({}), parent: { - params: observableOf({}) + params: observableOf({}), }, - params: observableOf({id: docItemsId}) + params: observableOf({id: docItemsId}), }; describe('ComponentViewer', () => { @@ -26,9 +26,7 @@ describe('ComponentViewer', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ComponentViewerModule, DocsAppTestingModule, TestExampleModule], - providers: [ - {provide: ActivatedRoute, useValue: mockActivatedRoute}, - ] + providers: [{provide: ActivatedRoute, useValue: mockActivatedRoute}], }).compileComponents(); })); @@ -48,15 +46,9 @@ describe('ComponentViewer', () => { }); }); - // Create a version of ExampleModule for testing with only one component so that we odn't have // to compile all of the examples for these tests. @NgModule({ - imports: [ - MatButtonModule, - MatIconModule, - NoopAnimationsModule, - ButtonOverviewExample, - ], + imports: [MatButtonModule, MatIconModule, NoopAnimationsModule, ButtonOverviewExample], }) -class TestExampleModule { } +class TestExampleModule {} diff --git a/material.angular.io/src/app/pages/component-viewer/component-viewer.ts b/material.angular.io/src/app/pages/component-viewer/component-viewer.ts index b19d6f61b809..445f6f1b9932 100644 --- a/material.angular.io/src/app/pages/component-viewer/component-viewer.ts +++ b/material.angular.io/src/app/pages/component-viewer/component-viewer.ts @@ -9,16 +9,17 @@ import { OnInit, ViewEncapsulation, viewChild, - viewChildren + viewChildren, } from '@angular/core'; import {MatTabsModule} from '@angular/material/tabs'; -import {ActivatedRoute, +import { + ActivatedRoute, Params, Router, RouterModule, RouterLinkActive, RouterLink, - RouterOutlet + RouterOutlet, } from '@angular/router'; import {combineLatest, Observable, ReplaySubject, Subject} from 'rxjs'; import {map, skip, takeUntil} from 'rxjs/operators'; @@ -31,20 +32,13 @@ import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus'; import {DocViewer} from '../../shared/doc-viewer/doc-viewer'; import {ExampleViewer} from '../../shared/example-viewer/example-viewer'; - @Component({ selector: 'app-component-viewer', templateUrl: './component-viewer.html', styleUrls: ['./component-viewer.scss'], encapsulation: ViewEncapsulation.None, standalone: true, - imports: [ - MatTabsModule, - NavigationFocus, - RouterLinkActive, - RouterLink, - RouterOutlet, - ], + imports: [MatTabsModule, NavigationFocus, RouterLinkActive, RouterLink, RouterOutlet], }) export class ComponentViewer implements OnDestroy { componentDocItem = new ReplaySubject(1); @@ -55,45 +49,47 @@ export class ComponentViewer implements OnDestroy { route: ActivatedRoute, private router: Router, public componentPageTitle: ComponentPageTitle, - readonly docItems: DocumentationItems) { + readonly docItems: DocumentationItems, + ) { const routeAndParentParams = [route.params]; if (route.parent) { routeAndParentParams.push(route.parent.params); } // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the // parent route for the section (material/cdk). - combineLatest(routeAndParentParams).pipe( - map((params: Params[]) => { - const id = params[0]['id']; - const section = params[1]['section']; - - return ({ - doc: docItems.getItemById(id, section), - section: section - }); - }, - takeUntil(this._destroyed)) - ).subscribe(({doc, section}) => { - if (!doc) { - this.router.navigate(['/' + section]); - return; - } - - this.componentDocItem.next(doc); - componentPageTitle.title = `${doc.name}`; - - if (doc.hasStyling) { - this.sections.add('styling'); - } else { - this.sections.delete('styling'); - } - - if (doc.examples && doc.examples.length) { - this.sections.add('examples'); - } else { - this.sections.delete('examples'); - } - }); + combineLatest(routeAndParentParams) + .pipe( + map((params: Params[]) => { + const id = params[0]['id']; + const section = params[1]['section']; + + return { + doc: docItems.getItemById(id, section), + section: section, + }; + }, takeUntil(this._destroyed)), + ) + .subscribe(({doc, section}) => { + if (!doc) { + this.router.navigate(['/' + section]); + return; + } + + this.componentDocItem.next(doc); + componentPageTitle.title = `${doc.name}`; + + if (doc.hasStyling) { + this.sections.add('styling'); + } else { + this.sections.delete('styling'); + } + + if (doc.examples && doc.examples.length) { + this.sections.add('examples'); + } else { + this.sections.delete('examples'); + } + }); } ngOnDestroy(): void { @@ -118,14 +114,14 @@ export class ComponentBaseView implements OnInit, OnDestroy { constructor( public componentViewer: ComponentViewer, breakpointObserver: BreakpointObserver, - private changeDetectorRef: ChangeDetectorRef) { - this.showToc = breakpointObserver.observe('(max-width: 1200px)') - .pipe( - map(result => { - this.changeDetectorRef.detectChanges(); - return !result.matches; - }) - ); + private changeDetectorRef: ChangeDetectorRef, + ) { + this.showToc = breakpointObserver.observe('(max-width: 1200px)').pipe( + map(result => { + this.changeDetectorRef.detectChanges(); + return !result.matches; + }), + ); } ngOnInit() { @@ -136,10 +132,7 @@ export class ComponentBaseView implements OnInit, OnDestroy { } }); - this.showToc.pipe( - skip(1), - takeUntil(this._destroyed) - ).subscribe(() => { + this.showToc.pipe(skip(1), takeUntil(this._destroyed)).subscribe(() => { if (this.tableOfContents()) { this.viewers().forEach(viewer => { viewer.contentRendered.emit(viewer._elementRef.nativeElement); @@ -167,11 +160,7 @@ export class ComponentBaseView implements OnInit, OnDestroy { templateUrl: './component-overview.html', encapsulation: ViewEncapsulation.None, standalone: true, - imports: [ - DocViewer, - TableOfContents, - AsyncPipe, - ], + imports: [DocViewer, TableOfContents, AsyncPipe], }) export class ComponentOverview extends ComponentBaseView { getOverviewDocumentUrl(doc: DocItem) { @@ -191,11 +180,7 @@ export class ComponentOverview extends ComponentBaseView { styleUrls: ['./component-api.scss'], encapsulation: ViewEncapsulation.None, standalone: true, - imports: [ - DocViewer, - TableOfContents, - AsyncPipe, - ], + imports: [DocViewer, TableOfContents, AsyncPipe], }) export class ComponentApi extends ComponentBaseView { getApiDocumentUrl(doc: DocItem) { @@ -209,10 +194,7 @@ export class ComponentApi extends ComponentBaseView { templateUrl: './component-examples.html', encapsulation: ViewEncapsulation.None, standalone: true, - imports: [ - ExampleViewer, - AsyncPipe, - ], + imports: [ExampleViewer, AsyncPipe], }) export class ComponentExamples extends ComponentBaseView {} diff --git a/material.angular.io/src/app/pages/component-viewer/token-table.ts b/material.angular.io/src/app/pages/component-viewer/token-table.ts index 7001074a61a8..49fd3f68006b 100644 --- a/material.angular.io/src/app/pages/component-viewer/token-table.ts +++ b/material.angular.io/src/app/pages/component-viewer/token-table.ts @@ -29,7 +29,7 @@ export interface Token { MatSelectModule, TokenName, TitleCasePipe, - ] + ], }) export class TokenTable { tokens = input.required(); @@ -41,9 +41,11 @@ export class TokenTable { const name = this.nameFilter().trim().toLowerCase(); const typeFilter = this.typeFilter(); - return this.tokens().filter(token => - (!name || token.overridesName.toLowerCase().includes(name)) && - (!typeFilter || token.type === typeFilter)); + return this.tokens().filter( + token => + (!name || token.overridesName.toLowerCase().includes(name)) && + (!typeFilter || token.type === typeFilter), + ); }); protected reset() { diff --git a/material.angular.io/src/app/pages/guide-list/guide-list.spec.ts b/material.angular.io/src/app/pages/guide-list/guide-list.spec.ts index a228f95745d7..1c72a40a27c0 100644 --- a/material.angular.io/src/app/pages/guide-list/guide-list.spec.ts +++ b/material.angular.io/src/app/pages/guide-list/guide-list.spec.ts @@ -2,7 +2,6 @@ import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; import {GuideList} from './guide-list'; import {DocsAppTestingModule} from '../../testing/testing-module'; - describe('GuideList', () => { let fixture: ComponentFixture; @@ -18,10 +17,7 @@ describe('GuideList', () => { fixture.detectChanges(); const totalItems = component.guideItems.getAllItems().length; - const totalLinks = fixture - .nativeElement - .querySelectorAll('.docs-guide-item') - .length; + const totalLinks = fixture.nativeElement.querySelectorAll('.docs-guide-item').length; expect(totalLinks).toEqual(totalItems); }); }); diff --git a/material.angular.io/src/app/pages/guide-list/guide-list.ts b/material.angular.io/src/app/pages/guide-list/guide-list.ts index a7b52101cfd8..1c81a4cc3422 100644 --- a/material.angular.io/src/app/pages/guide-list/guide-list.ts +++ b/material.angular.io/src/app/pages/guide-list/guide-list.ts @@ -12,12 +12,15 @@ import {MatRipple} from '@angular/material/core'; templateUrl: './guide-list.html', styleUrls: ['./guide-list.scss'], standalone: true, - imports: [NavigationFocus, RouterLink, MatCardModule, Footer, MatRipple] + imports: [NavigationFocus, RouterLink, MatCardModule, Footer, MatRipple], }) export class GuideList implements OnInit { @HostBinding('class.main-content') readonly mainContentClass = true; - constructor(public guideItems: GuideItems, public _componentPageTitle: ComponentPageTitle) {} + constructor( + public guideItems: GuideItems, + public _componentPageTitle: ComponentPageTitle, + ) {} ngOnInit(): void { this._componentPageTitle.title = 'Guides'; diff --git a/material.angular.io/src/app/pages/guide-viewer/guide-viewer.spec.ts b/material.angular.io/src/app/pages/guide-viewer/guide-viewer.spec.ts index a04726358fec..02536bf025ad 100644 --- a/material.angular.io/src/app/pages/guide-viewer/guide-viewer.spec.ts +++ b/material.angular.io/src/app/pages/guide-viewer/guide-viewer.spec.ts @@ -13,19 +13,16 @@ const mockActivatedRoute = { params: new Observable(observer => { observer.next({id: guideItemsId}); observer.complete(); - }) + }), }; - describe('GuideViewer', () => { let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [GuideViewerModule, DocsAppTestingModule], - providers: [ - {provide: ActivatedRoute, useValue: mockActivatedRoute}, - ] + providers: [{provide: ActivatedRoute, useValue: mockActivatedRoute}], }).compileComponents(); })); @@ -36,7 +33,6 @@ describe('GuideViewer', () => { it('should set the guide based off route params', () => { const component = fixture.componentInstance; fixture.detectChanges(); - expect(component.guide) - .toEqual(component.guideItems.getItemById(guideItemsId)); + expect(component.guide).toEqual(component.guideItems.getItemById(guideItemsId)); }); }); diff --git a/material.angular.io/src/app/pages/guide-viewer/guide-viewer.ts b/material.angular.io/src/app/pages/guide-viewer/guide-viewer.ts index f759e89d8049..899b3c252d08 100644 --- a/material.angular.io/src/app/pages/guide-viewer/guide-viewer.ts +++ b/material.angular.io/src/app/pages/guide-viewer/guide-viewer.ts @@ -15,21 +15,18 @@ import {DocViewer} from '../../shared/doc-viewer/doc-viewer'; templateUrl: './guide-viewer.html', styleUrls: ['./guide-viewer.scss'], standalone: true, - imports: [ - DocViewer, - NavigationFocus, - TableOfContents, - Footer, - ], + imports: [DocViewer, NavigationFocus, TableOfContents, Footer], }) export class GuideViewer implements OnInit { @HostBinding('class.main-content') readonly mainContentClass = true; guide: GuideItem | undefined; - constructor(_route: ActivatedRoute, - private _componentPageTitle: ComponentPageTitle, - private router: Router, - public guideItems: GuideItems) { + constructor( + _route: ActivatedRoute, + private _componentPageTitle: ComponentPageTitle, + private router: Router, + public guideItems: GuideItems, + ) { _route.params.subscribe(p => { const guideItem = guideItems.getItemById(p['id']); if (guideItem) { @@ -49,18 +46,13 @@ export class GuideViewer implements OnInit { } } -const routes: Routes = [ {path : '', component : GuideViewer} ]; +const routes: Routes = [{path: '', component: GuideViewer}]; // This module needs to include all of the modules required by the examples in the guides. // For example, the custom form-field guide requires the ReactiveFormsModule. // These imports may need to be updated when adding examples to new or existing guides. @NgModule({ - imports: [ - DocViewerModule, - ReactiveFormsModule, - RouterModule.forChild(routes), - GuideViewer, - ], + imports: [DocViewerModule, ReactiveFormsModule, RouterModule.forChild(routes), GuideViewer], exports: [GuideViewer], }) export class GuideViewerModule {} diff --git a/material.angular.io/src/app/pages/homepage/homepage.ts b/material.angular.io/src/app/pages/homepage/homepage.ts index 251fe2464e6a..41d90f951106 100644 --- a/material.angular.io/src/app/pages/homepage/homepage.ts +++ b/material.angular.io/src/app/pages/homepage/homepage.ts @@ -45,7 +45,8 @@ export class Homepage implements OnInit { constructor( public _componentPageTitle: ComponentPageTitle, public guideItems: GuideItems, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationsModule?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationsModule?: string, + ) { this.animationsDisabled = animationsModule === 'NoopAnimations'; } diff --git a/material.angular.io/src/app/pages/not-found/not-found.ts b/material.angular.io/src/app/pages/not-found/not-found.ts index c2fdac3b4ba7..a49fb49990b8 100644 --- a/material.angular.io/src/app/pages/not-found/not-found.ts +++ b/material.angular.io/src/app/pages/not-found/not-found.ts @@ -8,7 +8,7 @@ import {RouterLink} from '@angular/router'; templateUrl: './not-found.html', styleUrls: ['./not-found.scss'], standalone: true, - imports: [MatButtonModule, RouterLink, Footer] + imports: [MatButtonModule, RouterLink, Footer], }) export class NotFound { @HostBinding('class.main-content') readonly mainContentClass = true; diff --git a/material.angular.io/src/app/routes.ts b/material.angular.io/src/app/routes.ts index 73e79df4db8a..5e10b6400981 100644 --- a/material.angular.io/src/app/routes.ts +++ b/material.angular.io/src/app/routes.ts @@ -1,20 +1,18 @@ import {Routes} from '@angular/router'; -import { - CanActivateComponentSidenav -} from './pages/component-sidenav/component-sidenav-can-load-guard'; +import {CanActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard'; export const MATERIAL_DOCS_ROUTES: Routes = [ { path: '', pathMatch: 'full', - loadComponent: () => import('./pages/homepage').then(m => m.Homepage) + loadComponent: () => import('./pages/homepage').then(m => m.Homepage), }, {path: 'categories', redirectTo: '/components/categories'}, {path: 'cdk', pathMatch: 'full', redirectTo: '/cdk/categories'}, {path: 'components', pathMatch: 'full', redirectTo: '/components/categories'}, { path: 'guides', - loadComponent: () => import('./pages/guide-list').then(m => m.GuideList) + loadComponent: () => import('./pages/guide-list').then(m => m.GuideList), }, // Since https://github.com/angular/components/pull/9574, the cdk-table guide became the overview // document for the cdk table. To avoid any dead / broken links, we redirect to the new location. @@ -29,18 +27,18 @@ export const MATERIAL_DOCS_ROUTES: Routes = [ {path: 'guide/duplicate-theming-styles', redirectTo: '/guide/theming'}, { path: 'guide/:id', - loadChildren: () => import('./pages/guide-viewer').then(m => m.GuideViewerModule) + loadChildren: () => import('./pages/guide-viewer').then(m => m.GuideViewerModule), }, // Needs to be defined before `:section` so it gets picked first when redirecting a missing page. { path: '404', - loadComponent: () => import('./pages/not-found').then(m => m.NotFound) + loadComponent: () => import('./pages/not-found').then(m => m.NotFound), }, { path: ':section', canActivate: [CanActivateComponentSidenav], loadChildren: () => - import('./pages/component-sidenav/component-sidenav').then(m => m.ComponentSidenavModule) + import('./pages/component-sidenav/component-sidenav').then(m => m.ComponentSidenavModule), }, {path: '**', redirectTo: '/404'}, ]; diff --git a/material.angular.io/src/app/shared/analytics/analytics.ts b/material.angular.io/src/app/shared/analytics/analytics.ts index b31b1a2a5e3d..cbc27a2328e5 100644 --- a/material.angular.io/src/app/shared/analytics/analytics.ts +++ b/material.angular.io/src/app/shared/analytics/analytics.ts @@ -75,15 +75,14 @@ export class AnalyticsService { } private _installGlobalSiteTag() { - const url = - `https://www.googletagmanager.com/gtag/js?id=${environment.googleAnalyticsMaterialId}`; + const url = `https://www.googletagmanager.com/gtag/js?id=${environment.googleAnalyticsMaterialId}`; // Note: This cannot be an arrow function as `gtag.js` expects an actual `Arguments` // instance with e.g. `callee` to be set. Do not attempt to change this and keep this // as much as possible in sync with the tracking code snippet suggested by the Google // Analytics 4 web UI under `Data Streams`. window.dataLayer = window.dataLayer || []; - window.gtag = function() { + window.gtag = function () { window.dataLayer?.push(arguments); }; window.gtag('js', new Date()); @@ -106,7 +105,7 @@ export class AnalyticsService { private _installWindowErrorHandler() { window.addEventListener('error', event => - this.reportError(formatErrorEventForAnalytics(event), true) + this.reportError(formatErrorEventForAnalytics(event), true), ); } } diff --git a/material.angular.io/src/app/shared/carousel/carousel.spec.ts b/material.angular.io/src/app/shared/carousel/carousel.spec.ts index 4624690f62de..652d465ad940 100644 --- a/material.angular.io/src/app/shared/carousel/carousel.spec.ts +++ b/material.angular.io/src/app/shared/carousel/carousel.spec.ts @@ -3,12 +3,10 @@ import {waitForAsync, ComponentFixture, fakeAsync, flush, TestBed} from '@angula import {DocsAppTestingModule} from '../../testing/testing-module'; import {Carousel, CarouselItem} from './carousel'; - describe('HorizontalCarousel', () => { let fixture: ComponentFixture; let component: Carousel; - beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [DocsAppTestingModule, CarouselTestComponent], @@ -57,14 +55,16 @@ describe('HorizontalCarousel', () => {
} `, - styles: [` + styles: [ + ` .docs-carousel-item-container { display: flex; width: 250px; } - `], + `, + ], standalone: true, - imports: [Carousel, CarouselItem, DocsAppTestingModule] + imports: [Carousel, CarouselItem, DocsAppTestingModule], }) class CarouselTestComponent { @ViewChild(Carousel) carousel!: Carousel; diff --git a/material.angular.io/src/app/shared/carousel/carousel.ts b/material.angular.io/src/app/shared/carousel/carousel.ts index f64ae3be3819..b5443741995b 100644 --- a/material.angular.io/src/app/shared/carousel/carousel.ts +++ b/material.angular.io/src/app/shared/carousel/carousel.ts @@ -9,7 +9,7 @@ import { ViewEncapsulation, input, contentChildren, - viewChild + viewChild, } from '@angular/core'; import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y'; import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes'; @@ -41,7 +41,7 @@ export class CarouselItem implements FocusableOption { imports: [MatButtonModule, MatIconModule], }) export class Carousel implements AfterContentInit { - readonly ariaLabel = input(undefined, { alias: 'aria-label' }); + readonly ariaLabel = input(undefined, {alias: 'aria-label'}); readonly items = contentChildren(CarouselItem); readonly list = viewChild.required>('list'); @HostBinding('class.animations-disabled') readonly animationsDisabled: boolean; diff --git a/material.angular.io/src/app/shared/cookie-popup/cookie-popup.ts b/material.angular.io/src/app/shared/cookie-popup/cookie-popup.ts index fb9a437762d5..8c923b177d20 100644 --- a/material.angular.io/src/app/shared/cookie-popup/cookie-popup.ts +++ b/material.angular.io/src/app/shared/cookie-popup/cookie-popup.ts @@ -9,7 +9,7 @@ const STORAGE_KEY = 'docs-cookies'; styleUrls: ['./cookie-popup.scss'], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [MatButtonModule] + imports: [MatButtonModule], }) export class CookiePopup { /** Whether the user has accepted the cookie disclaimer. */ diff --git a/material.angular.io/src/app/shared/doc-viewer/deprecated-tooltip.ts b/material.angular.io/src/app/shared/doc-viewer/deprecated-tooltip.ts index 78cafe381e7a..1627c1c182ec 100644 --- a/material.angular.io/src/app/shared/doc-viewer/deprecated-tooltip.ts +++ b/material.angular.io/src/app/shared/doc-viewer/deprecated-tooltip.ts @@ -2,23 +2,23 @@ import {Component} from '@angular/core'; import {MatTooltipModule} from '@angular/material/tooltip'; /** - * This component is responsible for showing the + * This component is responsible for showing the * deprecated fields throughout API from material repo, - * + * * When deprecated docs content is generated like: - * - *
* Deprecated *
- * + * * It uses `title` attribute to show information regarding * deprecation and other information regarding deprecation - * isnt shown either. - * - * We are gonna use this component to show deprecation + * isnt shown either. + * + * We are gonna use this component to show deprecation * information using the `material/tooltip`, the information - * would contain when the field is being deprecated and what + * would contain when the field is being deprecated and what * are the alternatives to it which both are extracted from * `breaking-change` and `deprecated`. */ diff --git a/material.angular.io/src/app/shared/doc-viewer/doc-viewer-module.ts b/material.angular.io/src/app/shared/doc-viewer/doc-viewer-module.ts index 36f5a9addc3e..cd45e0083123 100644 --- a/material.angular.io/src/app/shared/doc-viewer/doc-viewer-module.ts +++ b/material.angular.io/src/app/shared/doc-viewer/doc-viewer-module.ts @@ -11,7 +11,6 @@ import {HeaderLink} from './header-link'; import {CodeSnippet} from '../example-viewer/code-snippet'; import {DeprecatedFieldComponent} from './deprecated-tooltip'; - // ExampleViewer is included in the DocViewerModule because they have a circular dependency. @NgModule({ imports: [ @@ -25,8 +24,8 @@ import {DeprecatedFieldComponent} from './deprecated-tooltip'; ExampleViewer, HeaderLink, CodeSnippet, - DeprecatedFieldComponent + DeprecatedFieldComponent, ], - exports: [DocViewer, ExampleViewer, HeaderLink, DeprecatedFieldComponent] + exports: [DocViewer, ExampleViewer, HeaderLink, DeprecatedFieldComponent], }) -export class DocViewerModule { } +export class DocViewerModule {} diff --git a/material.angular.io/src/app/shared/doc-viewer/doc-viewer.spec.ts b/material.angular.io/src/app/shared/doc-viewer/doc-viewer.spec.ts index 6878aca949fa..e8649b45bb29 100644 --- a/material.angular.io/src/app/shared/doc-viewer/doc-viewer.spec.ts +++ b/material.angular.io/src/app/shared/doc-viewer/doc-viewer.spec.ts @@ -142,10 +142,10 @@ describe('DocViewer', () => { http.expectOne(errorUrl).flush('Not found', {status: 404, statusText: 'Not found'}); - expect(docViewer).not.toBeNull(); expect(docViewer.nativeElement.innerHTML).toContain( - 'Failed to load document: http://material.angular.io/error-doc.html'); + 'Failed to load document: http://material.angular.io/error-doc.html', + ); expect(console.error).toHaveBeenCalledTimes(1); }); @@ -165,7 +165,7 @@ describe('DocViewer', () => { // and properties. expect(docViewer.children.length).toBe(5); - // it should have "Deprecated" as its inner text + // it should have "Deprecated" as its inner text const deprecatedSymbol = docViewer.children.shift()!; expect(deprecatedSymbol.nativeElement.innerText).toBe('Deprecated'); @@ -207,8 +207,7 @@ const FAKE_DOCS: {[key: string]: string} = { '
', 'http://material.angular.io/whole-snippet-example.html': '
', - 'http://material.angular.io/deprecated.html': - `
Deprecated
this._cache[url] = stream)); + return stream.pipe(tap(() => (this._cache[url] = stream))); } } @@ -55,7 +55,7 @@ class DocFetcher { } `, standalone: true, - imports: [PortalModule] + imports: [PortalModule], }) export class DocViewer implements OnDestroy { private _portalHosts: DomPortalOutlet[] = []; @@ -86,10 +86,12 @@ export class DocViewer implements OnDestroy { /** The document text. It should not be HTML encoded. */ textContent = ''; - private static initExampleViewer(exampleViewerComponent: ExampleViewer, - example: string, - file: string | null, - region: string | null) { + private static initExampleViewer( + exampleViewerComponent: ExampleViewer, + example: string, + file: string | null, + region: string | null, + ) { exampleViewerComponent.example = example; if (file) { // if the html div has field `file` then it should be in compact view to show the code @@ -106,25 +108,25 @@ export class DocViewer implements OnDestroy { // otherwise it is an embedded demo exampleViewerComponent.view = 'demo'; } - } - constructor(private _appRef: ApplicationRef, - private _componentFactoryResolver: ComponentFactoryResolver, - public _elementRef: ElementRef, - private _injector: Injector, - private _viewContainerRef: ViewContainerRef, - private _ngZone: NgZone, - private _domSanitizer: DomSanitizer, - private _docFetcher: DocFetcher) { - } + constructor( + private _appRef: ApplicationRef, + private _componentFactoryResolver: ComponentFactoryResolver, + public _elementRef: ElementRef, + private _injector: Injector, + private _viewContainerRef: ViewContainerRef, + private _ngZone: NgZone, + private _domSanitizer: DomSanitizer, + private _docFetcher: DocFetcher, + ) {} /** Fetch a document by URL. */ private _fetchDocument(url: string) { this._documentFetchSubscription?.unsubscribe(); this._documentFetchSubscription = this._docFetcher.fetchDocument(url).subscribe( document => this.updateDocument(document), - error => this.showError(url, error) + error => this.showError(url, error), ); } @@ -159,21 +161,23 @@ export class DocViewer implements OnDestroy { /** Show an error that occurred when fetching a document. */ private showError(url: string, error: HttpErrorResponse) { console.error(error); - this._elementRef.nativeElement.innerText = - `Failed to load document: ${url}. Error: ${error.statusText}`; + this._elementRef.nativeElement.innerText = `Failed to load document: ${url}. Error: ${error.statusText}`; } /** Instantiate a ExampleViewer for each example. */ private _loadComponents(componentName: string, componentClass: any) { - const exampleElements = - this._elementRef.nativeElement.querySelectorAll(`[${componentName}]`); + const exampleElements = this._elementRef.nativeElement.querySelectorAll(`[${componentName}]`); [...exampleElements].forEach((element: Element) => { const example = element.getAttribute(componentName); const region = element.getAttribute('region'); const file = element.getAttribute('file'); const portalHost = new DomPortalOutlet( - element, this._componentFactoryResolver, this._appRef, this._injector); + element, + this._componentFactoryResolver, + this._appRef, + this._injector, + ); const examplePortal = new ComponentPortal(componentClass, this._viewContainerRef); const exampleViewer = portalHost.attach(examplePortal); const exampleViewerComponent = exampleViewer.instance as ExampleViewer; @@ -195,18 +199,19 @@ export class DocViewer implements OnDestroy { } _createTooltipsForDeprecated() { - // all of the deprecated symbols end with `deprecated-marker` + // all of the deprecated symbols end with `deprecated-marker` // class name on their element. - // for example: - //
Deprecated
, + // for example: + //
Deprecated
, // these can vary for each deprecated symbols such for class, interface, // type alias, constants or properties: // .docs-api-class-interface-marker, docs-api-type-alias-deprecated-marker // .docs-api-constant-deprecated-marker, .some-more // so instead of manually writing each deprecated class, we just query // elements that ends with `deprecated-marker` in their class name. - const deprecatedElements = - this._elementRef.nativeElement.querySelectorAll(`[class$=deprecated-marker]`); + const deprecatedElements = this._elementRef.nativeElement.querySelectorAll( + `[class$=deprecated-marker]`, + ); [...deprecatedElements].forEach((element: Element) => { // the deprecation message, it will include alternative to deprecated item @@ -214,12 +219,15 @@ export class DocViewer implements OnDestroy { const deprecationTitle = element.getAttribute('deprecated-message'); const elementPortalOutlet = new DomPortalOutlet( - element, this._componentFactoryResolver, this._appRef, this._injector); + element, + this._componentFactoryResolver, + this._appRef, + this._injector, + ); const tooltipPortal = new ComponentPortal(DeprecatedFieldComponent, this._viewContainerRef); const tooltipOutlet = elementPortalOutlet.attach(tooltipPortal); - if (deprecationTitle) { tooltipOutlet.instance.message = deprecationTitle; } diff --git a/material.angular.io/src/app/shared/doc-viewer/header-link.ts b/material.angular.io/src/app/shared/doc-viewer/header-link.ts index 011c9a094292..e4bb47c1ce59 100644 --- a/material.angular.io/src/app/shared/doc-viewer/header-link.ts +++ b/material.angular.io/src/app/shared/doc-viewer/header-link.ts @@ -24,10 +24,9 @@ import {MatIconModule} from '@angular/material/icon'; `, standalone: true, - imports: [MatIconModule] + imports: [MatIconModule], }) export class HeaderLink { - /** * Id of the anchor element. Note that is uses "example" because we instantiate the * header link components through the ComponentPortal. @@ -44,5 +43,4 @@ export class HeaderLink { _getFragmentUrl(): string { return `${this._baseUrl}#${this.example}`; } - } diff --git a/material.angular.io/src/app/shared/documentation-items/documentation-items.ts b/material.angular.io/src/app/shared/documentation-items/documentation-items.ts index 38716682f947..e949d7af5792 100644 --- a/material.angular.io/src/app/shared/documentation-items/documentation-items.ts +++ b/material.angular.io/src/app/shared/documentation-items/documentation-items.ts @@ -42,21 +42,22 @@ export interface DocSection { const exampleNames = Object.keys(EXAMPLE_COMPONENTS); const CDK = 'cdk'; const COMPONENTS = 'components'; -export const SECTIONS: { [key: string]: DocSection } = { +export const SECTIONS: {[key: string]: DocSection} = { [COMPONENTS]: { name: 'Components', - summary: 'Angular Material offers a wide variety of UI components based on the Material Design specification' + summary: + 'Angular Material offers a wide variety of UI components based on the Material Design specification', }, [CDK]: { name: 'CDK', - summary: 'The Component Dev Kit (CDK) is a set of behavior primitives for building UI' + - ' components.' + summary: + 'The Component Dev Kit (CDK) is a set of behavior primitives for building UI' + + ' components.', }, }; - -const DOCS: { [key: string]: DocItem[] } = { +const DOCS: {[key: string]: DocItem[]} = { [COMPONENTS]: [ { id: 'autocomplete', @@ -91,7 +92,7 @@ const DOCS: { [key: string]: DocItem[] } = { summary: 'An interactive button with a range of presentation options.', exampleSpecs: { prefix: 'button-', - exclude: ['button-toggle-'] + exclude: ['button-toggle-'], }, additionalApiDocs: [{name: 'Testing', path: 'material-button-testing.html'}], }, @@ -263,7 +264,6 @@ const DOCS: { [key: string]: DocItem[] } = { summary: 'Allows the user to select one option from a group.', exampleSpecs: { prefix: 'radio-', - }, additionalApiDocs: [{name: 'Testing', path: 'material-radio-testing.html'}], }, @@ -502,7 +502,7 @@ const DOCS: { [key: string]: DocItem[] } = { { id: 'platform', name: 'Platform', - summary: 'Provides information about the user\'s platform.', + summary: "Provides information about the user's platform.", exampleSpecs: { prefix: 'cdk-platform-', }, @@ -551,12 +551,12 @@ const DOCS: { [key: string]: DocItem[] } = { additionalApiDocs: [ { name: 'Testbed', - path: 'cdk-testing-testbed.html' + path: 'cdk-testing-testbed.html', }, { name: 'Protractor', - path: 'cdk-testing-protractor.html' - } + path: 'cdk-testing-protractor.html', + }, ], }, { @@ -575,7 +575,7 @@ const DOCS: { [key: string]: DocItem[] } = { prefix: 'cdk-tree-', }, }, - ] + ], // TODO(jelbourn): re-add utilities and a11y as top-level categories once we can generate // their API docs with dgeni. Currently our setup doesn't generate API docs for constants // and standalone functions (much of the utilities) and we have no way of generating API @@ -588,7 +588,6 @@ const ALL_DOCS = [...ALL_COMPONENTS, ...ALL_CDK]; @Injectable({providedIn: 'root'}) export class DocumentationItems { - getItems(section: string): DocItem[] { if (section === COMPONENTS) { return ALL_COMPONENTS; @@ -609,9 +608,11 @@ function processDocs(packageName: string, docs: DocItem[]): DocItem[] { for (const doc of docs) { doc.packageName = packageName; doc.hasStyling ??= packageName === 'material'; - doc.examples = exampleNames.filter(key => - key.match(RegExp(`^${doc.exampleSpecs.prefix}`)) && - !doc.exampleSpecs.exclude?.some(excludeName => key.indexOf(excludeName) === 0)); + doc.examples = exampleNames.filter( + key => + key.match(RegExp(`^${doc.exampleSpecs.prefix}`)) && + !doc.exampleSpecs.exclude?.some(excludeName => key.indexOf(excludeName) === 0), + ); } return docs.sort((a, b) => a.name.localeCompare(b.name, 'en')); diff --git a/material.angular.io/src/app/shared/example-viewer/code-snippet.ts b/material.angular.io/src/app/shared/example-viewer/code-snippet.ts index 8cbe61ac36e6..ca2cb4f31658 100644 --- a/material.angular.io/src/app/shared/example-viewer/code-snippet.ts +++ b/material.angular.io/src/app/shared/example-viewer/code-snippet.ts @@ -1,10 +1,4 @@ -import { - ChangeDetectionStrategy, - Component, - forwardRef, - input, - viewChild -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, forwardRef, input, viewChild} from '@angular/core'; import {DocViewer} from '../doc-viewer/doc-viewer'; @Component({ @@ -13,7 +7,7 @@ import {DocViewer} from '../doc-viewer/doc-viewer'; styleUrls: ['./example-viewer.scss'], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [forwardRef(() => DocViewer)] + imports: [forwardRef(() => DocViewer)], }) export class CodeSnippet { readonly source = input(); diff --git a/material.angular.io/src/app/shared/example-viewer/example-viewer.ts b/material.angular.io/src/app/shared/example-viewer/example-viewer.ts index 686ff0422f6b..f6432ae29d51 100644 --- a/material.angular.io/src/app/shared/example-viewer/example-viewer.ts +++ b/material.angular.io/src/app/shared/example-viewer/example-viewer.ts @@ -1,12 +1,4 @@ -import { - Component, - ElementRef, - HostBinding, - Input, - OnInit, - Type, - viewChildren -} from '@angular/core'; +import {Component, ElementRef, HostBinding, Input, OnInit, Type, viewChildren} from '@angular/core'; import {MatSnackBar} from '@angular/material/snack-bar'; import {Clipboard} from '@angular/cdk/clipboard'; @@ -79,7 +71,7 @@ export class ExampleViewer implements OnInit { this.exampleData = EXAMPLE_COMPONENTS[exampleName]; this._generateExampleTabs(); this._loadExampleComponent().catch(error => - console.error(`Could not load example '${exampleName}': ${error}`) + console.error(`Could not load example '${exampleName}': ${error}`), ); } else { console.error(`Could not find example: ${exampleName}`); @@ -96,7 +88,7 @@ export class ExampleViewer implements OnInit { constructor( private readonly snackbar: MatSnackBar, private readonly clipboard: Clipboard, - private readonly elementRef: ElementRef + private readonly elementRef: ElementRef, ) {} ngOnInit() { diff --git a/material.angular.io/src/app/shared/footer/footer.ts b/material.angular.io/src/app/shared/footer/footer.ts index 1225bffb5121..929024998c33 100644 --- a/material.angular.io/src/app/shared/footer/footer.ts +++ b/material.angular.io/src/app/shared/footer/footer.ts @@ -6,7 +6,7 @@ import {AppLogo} from '../logo/logo'; templateUrl: './footer.html', styleUrls: ['./footer.scss'], imports: [AppLogo], - standalone: true + standalone: true, }) export class Footer { year = new Date().getFullYear(); diff --git a/material.angular.io/src/app/shared/guide-items/guide-items.spec.ts b/material.angular.io/src/app/shared/guide-items/guide-items.spec.ts index 50e23c8abce2..0f7328e76f97 100644 --- a/material.angular.io/src/app/shared/guide-items/guide-items.spec.ts +++ b/material.angular.io/src/app/shared/guide-items/guide-items.spec.ts @@ -1,7 +1,6 @@ import {TestBed, inject, waitForAsync} from '@angular/core/testing'; import {GuideItems} from './guide-items'; - describe('GuideItems', () => { let guideItems: GuideItems; diff --git a/material.angular.io/src/app/shared/guide-items/guide-items.ts b/material.angular.io/src/app/shared/guide-items/guide-items.ts index 3984ac0c095d..81e74ab01859 100644 --- a/material.angular.io/src/app/shared/guide-items/guide-items.ts +++ b/material.angular.io/src/app/shared/guide-items/guide-items.ts @@ -14,55 +14,54 @@ const GUIDES: GuideItem[] = [ id: 'getting-started', name: 'Getting started', document: '/docs-content/guides/getting-started.html', - overview: 'Add Angular Material to your project!' + overview: 'Add Angular Material to your project!', }, { id: 'schematics', name: 'Schematics', document: '/docs-content/guides/schematics.html', - overview: 'Use schematics to quickly generate views with Material Design components.' + overview: 'Use schematics to quickly generate views with Material Design components.', }, { id: 'theming', name: 'Theming Angular Material', document: '/docs-content/guides/theming.html', - overview: 'Customize your application with Angular Material\'s theming system.' + overview: "Customize your application with Angular Material's theming system.", }, { id: 'system-variables', name: 'System Variables', document: SystemVariables, - overview: 'Understand the system variables available to use in your application.' + overview: 'Understand the system variables available to use in your application.', }, { id: 'creating-a-custom-form-field-control', name: 'Custom form field control', document: '/docs-content/guides/creating-a-custom-form-field-control.html', - overview: 'Build a custom control that integrates with ``.' + overview: 'Build a custom control that integrates with ``.', }, { id: 'creating-a-custom-stepper-using-the-cdk-stepper', name: 'Custom stepper using the CdkStepper', document: '/docs-content/guides/creating-a-custom-stepper-using-the-cdk-stepper.html', - overview: 'Create a custom stepper components using Angular CDK.' + overview: 'Create a custom stepper components using Angular CDK.', }, { id: 'using-component-harnesses', name: 'Testing with component harnesses', document: '/docs-content/guides/using-component-harnesses.html', - overview: 'Write tests with component harnesses for convenience and meaningful results.' + overview: 'Write tests with component harnesses for convenience and meaningful results.', }, { id: 'material-2-theming', name: 'Theming Angular Material with Material 2', document: '/docs-content/guides/material-2.html', - overview: 'Customize your application with Angular Material\'s theming system.' + overview: "Customize your application with Angular Material's theming system.", }, ]; @Injectable({providedIn: 'root'}) export class GuideItems { - getAllItems(): GuideItem[] { return GUIDES; } diff --git a/material.angular.io/src/app/shared/navbar/navbar.ts b/material.angular.io/src/app/shared/navbar/navbar.ts index 6a2b477ab8d7..ce2238959157 100644 --- a/material.angular.io/src/app/shared/navbar/navbar.ts +++ b/material.angular.io/src/app/shared/navbar/navbar.ts @@ -34,7 +34,7 @@ export class NavBar implements OnDestroy { skipLinkHidden = true; constructor(private navigationFocusService: NavigationFocusService) { - setTimeout(() => this.skipLinkHref = this.navigationFocusService.getSkipLinkHref(), 100); + setTimeout(() => (this.skipLinkHref = this.navigationFocusService.getSkipLinkHref()), 100); } get sections() { @@ -49,4 +49,3 @@ export class NavBar implements OnDestroy { this.subscriptions.unsubscribe(); } } - diff --git a/material.angular.io/src/app/shared/navigation-focus/navigation-focus.service.ts b/material.angular.io/src/app/shared/navigation-focus/navigation-focus.service.ts index 63255d1e6188..b71cbe29411c 100644 --- a/material.angular.io/src/app/shared/navigation-focus/navigation-focus.service.ts +++ b/material.angular.io/src/app/shared/navigation-focus/navigation-focus.service.ts @@ -12,22 +12,26 @@ export class NavigationFocusService implements OnDestroy { private skipLinkFocusRequests: HTMLElement[] = []; private skipLinkHref: string | null | undefined; - readonly navigationEndEvents = this.router.events - .pipe(filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd)); + readonly navigationEndEvents = this.router.events.pipe( + filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd), + ); readonly softNavigations = this.navigationEndEvents.pipe(skip(1)); constructor(private router: Router) { - this.subscriptions.add(this.softNavigations.subscribe(() => { - // focus if url does not have fragment - if (!this.router.url.split('#')[1]) { - setTimeout(() => { - if (this.navigationFocusRequests.length) { - this.navigationFocusRequests[this.navigationFocusRequests.length - 1] - .focus({preventScroll: true}); - } - }, 100); - } - })); + this.subscriptions.add( + this.softNavigations.subscribe(() => { + // focus if url does not have fragment + if (!this.router.url.split('#')[1]) { + setTimeout(() => { + if (this.navigationFocusRequests.length) { + this.navigationFocusRequests[this.navigationFocusRequests.length - 1].focus({ + preventScroll: true, + }); + } + }, 100); + } + }), + ); } ngOnDestroy() { @@ -68,8 +72,13 @@ export class NavigationFocusService implements OnDestroy { const previousUrlMatch = previousUrl.match(componentViewExpression); const newUrlMatch = newUrl.match(componentViewExpression); - return previousUrl && newUrl && previousUrlMatch && newUrlMatch - && previousUrlMatch[0] === newUrlMatch[0] - && previousUrlMatch[1] === newUrlMatch[1]; + return ( + previousUrl && + newUrl && + previousUrlMatch && + newUrlMatch && + previousUrlMatch[0] === newUrlMatch[0] && + previousUrlMatch[1] === newUrlMatch[1] + ); } } diff --git a/material.angular.io/src/app/shared/navigation-focus/navigation-focus.spec.ts b/material.angular.io/src/app/shared/navigation-focus/navigation-focus.spec.ts index be66a9abfe2b..7b43472873b6 100644 --- a/material.angular.io/src/app/shared/navigation-focus/navigation-focus.spec.ts +++ b/material.angular.io/src/app/shared/navigation-focus/navigation-focus.spec.ts @@ -17,21 +17,20 @@ describe('Navigation focus service', () => { }; beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ - RouterTestingModule.withRoutes([ - {path: '', component: RouteTest}, - {path: 'cdk', component: RouteTest}, - {path: 'guides', component: RouteTest} - ]), - NavigationFocus - ], - providers: [NavigationFocusService], - declarations: [NavigationFocusTest, RouteTest], - }); - fixture = TestBed.createComponent(NavigationFocusTest); - } - ); + TestBed.configureTestingModule({ + imports: [ + RouterTestingModule.withRoutes([ + {path: '', component: RouteTest}, + {path: 'cdk', component: RouteTest}, + {path: 'guides', component: RouteTest}, + ]), + NavigationFocus, + ], + providers: [NavigationFocusService], + declarations: [NavigationFocusTest, RouteTest], + }); + fixture = TestBed.createComponent(NavigationFocusTest); + }); beforeEach(() => { zone = TestBed.inject(NgZone); @@ -131,13 +130,11 @@ describe('Navigation focus service', () => { `, standalone: false, }) -class NavigationFocusTest { -} +class NavigationFocusTest {} @Component({ selector: 'route-test', template: '', standalone: false, }) -class RouteTest { -} +class RouteTest {} diff --git a/material.angular.io/src/app/shared/navigation-focus/navigation-focus.ts b/material.angular.io/src/app/shared/navigation-focus/navigation-focus.ts index 9739a8ad567a..3fbcb0e38ff8 100644 --- a/material.angular.io/src/app/shared/navigation-focus/navigation-focus.ts +++ b/material.angular.io/src/app/shared/navigation-focus/navigation-focus.ts @@ -10,7 +10,10 @@ export class NavigationFocus implements OnDestroy { @HostBinding('tabindex') readonly tabindex = '-1'; @HostBinding('style.outline') readonly outline = 'none'; - constructor(private el: ElementRef, private navigationFocusService: NavigationFocusService) { + constructor( + private el: ElementRef, + private navigationFocusService: NavigationFocusService, + ) { if (!el.nativeElement.id) { el.nativeElement.id = `skip-link-target-${uid++}`; } @@ -23,4 +26,3 @@ export class NavigationFocus implements OnDestroy { this.navigationFocusService.relinquishSkipLinkFocus(this.el.nativeElement); } } - diff --git a/material.angular.io/src/app/shared/stack-blitz/stack-blitz-button.ts b/material.angular.io/src/app/shared/stack-blitz/stack-blitz-button.ts index 9e845cd3cb34..e9f2b1c143cb 100644 --- a/material.angular.io/src/app/shared/stack-blitz/stack-blitz-button.ts +++ b/material.angular.io/src/app/shared/stack-blitz/stack-blitz-button.ts @@ -10,11 +10,7 @@ import {MatSnackBar} from '@angular/material/snack-bar'; selector: 'stack-blitz-button', templateUrl: './stack-blitz-button.html', standalone: true, - imports: [ - MatButtonModule, - MatTooltipModule, - MatIconModule, - ], + imports: [MatButtonModule, MatTooltipModule, MatIconModule], }) export class StackBlitzButton { exampleData: ExampleData | undefined; @@ -43,22 +39,29 @@ export class StackBlitzButton { constructor( private stackBlitzWriter: StackBlitzWriter, private ngZone: NgZone, - private snackBar: MatSnackBar) {} + private snackBar: MatSnackBar, + ) {} openStackBlitz(): void { if (this._openStackBlitzFn) { this._openStackBlitzFn(); } else { - this.snackBar.open('StackBlitz is not ready yet. Please try again in a few seconds.', - undefined, {duration: 5000}); + this.snackBar.open( + 'StackBlitz is not ready yet. Please try again in a few seconds.', + undefined, + {duration: 5000}, + ); } } private _prepareStackBlitzForExample(exampleId: string, data: ExampleData): void { this.ngZone.runOutsideAngular(async () => { const isTest = exampleId.includes('harness'); - this._openStackBlitzFn = await this.stackBlitzWriter - .createStackBlitzForExample(exampleId, data, isTest); + this._openStackBlitzFn = await this.stackBlitzWriter.createStackBlitzForExample( + exampleId, + data, + isTest, + ); }); } } diff --git a/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.spec.ts b/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.spec.ts index b046d66fa5e8..b3a6d28496aa 100644 --- a/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.spec.ts +++ b/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.spec.ts @@ -10,8 +10,7 @@ const testExampleBasePath = `/docs-content/examples-source/cdk/my-comp/${testExa const FAKE_DOCS: {[key: string]: string} = { /* eslint-disable @typescript-eslint/naming-convention */ '/assets/stack-blitz/src/index.html': '', - '/assets/stack-blitz/src/main.ts': - `import {MaterialDocsExample} from './material-docs-example';`, + '/assets/stack-blitz/src/main.ts': `import {MaterialDocsExample} from './material-docs-example';`, /* eslint-enable @typescript-eslint/naming-convention */ [`${testExampleBasePath}/test.ts`]: 'ExampleComponent', [`${testExampleBasePath}/test.html`]: ``, @@ -32,7 +31,7 @@ describe('StackBlitzWriter', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], - providers: [StackBlitzWriter] + providers: [StackBlitzWriter], }).compileComponents(); })); @@ -76,7 +75,6 @@ describe('StackBlitzWriter', () => { `); - }); it('should set tags for example stackblitz', fakeAsync(() => { @@ -91,8 +89,10 @@ describe('StackBlitzWriter', () => { flushMicrotasks(); expect(openProjectSpy).toHaveBeenCalledTimes(1); - expect(openProjectSpy).toHaveBeenCalledWith(jasmine.objectContaining( - {tags: ['angular', 'material', 'cdk', 'web', 'example']}), jasmine.anything()); + expect(openProjectSpy).toHaveBeenCalledWith( + jasmine.objectContaining({tags: ['angular', 'material', 'cdk', 'web', 'example']}), + jasmine.anything(), + ); })); it('should read and transform template files properly', fakeAsync(() => { @@ -121,7 +121,8 @@ describe('StackBlitzWriter', () => { }); expect(openProjectSpy).toHaveBeenCalledTimes(1); - expect(openProjectSpy).toHaveBeenCalledWith( - jasmine.objectContaining({files: expectedFiles}), {openFile: 'src/app/test.ts'}); + expect(openProjectSpy).toHaveBeenCalledWith(jasmine.objectContaining({files: expectedFiles}), { + openFile: 'src/app/test.ts', + }); })); }); diff --git a/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts b/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts index fa59685e2047..6b77be2b5fff 100644 --- a/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts +++ b/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts @@ -62,13 +62,16 @@ type FileDictionary = {[path: string]: string}; export class StackBlitzWriter { private _fileCache = new Map>(); - constructor(private _http: HttpClient, private _ngZone: NgZone) {} + constructor( + private _http: HttpClient, + private _ngZone: NgZone, + ) {} /** Opens a StackBlitz for the specified example. */ createStackBlitzForExample( exampleId: string, data: ExampleData, - isTest: boolean + isTest: boolean, ): Promise<() => void> { // Run outside the zone since the creation doesn't interact with Angular // and the file requests can cause excessive change detections. @@ -107,7 +110,7 @@ export class StackBlitzWriter { template: PROJECT_TEMPLATE, tags: PROJECT_TAGS, }, - {openFile} + {openFile}, ); } @@ -118,22 +121,21 @@ export class StackBlitzWriter { private async _buildInMemoryFileDictionary( data: ExampleData, exampleId: string, - isTest: boolean + isTest: boolean, ): Promise { const result: FileDictionary = {}; const tasks: Promise[] = []; const liveExample = EXAMPLE_COMPONENTS[exampleId]; - const exampleBaseContentPath = - `${DOCS_CONTENT_PATH}/${liveExample.importPath}/${exampleId}/`; + const exampleBaseContentPath = `${DOCS_CONTENT_PATH}/${liveExample.importPath}/${exampleId}/`; for (const relativeFilePath of TEMPLATE_FILES) { tasks.push( this._loadFile(TEMPLATE_PATH + relativeFilePath) // Replace example placeholders in the template files. .then(content => - this._replaceExamplePlaceholders(data, relativeFilePath, content, isTest) + this._replaceExamplePlaceholders(data, relativeFilePath, content, isTest), ) - .then(content => (result[relativeFilePath] = content)) + .then(content => (result[relativeFilePath] = content)), ); } @@ -147,7 +149,7 @@ export class StackBlitzWriter { this._loadFile(exampleBaseContentPath + relativeFilePath) // Insert a copyright footer for all example files inserted into the project. .then(content => this._appendCopyright(relativeFilePath, content)) - .then(content => (result[targetPath] = content)) + .then(content => (result[targetPath] = content)), ); } @@ -182,7 +184,7 @@ export class StackBlitzWriter { data: ExampleData, fileName: string, fileContent: string, - isTest: boolean + isTest: boolean, ): string { // Replaces the version placeholder in the `index.html` and `package.json` file. // Technically we invalidate the `package-lock.json` file for the StackBlitz boilerplate @@ -201,8 +203,10 @@ export class StackBlitzWriter { .replace(/material-docs-example/g, data.selectorName) .replace(/\${title}/g, data.description); } else if (fileName === '.stackblitzrc') { - fileContent = fileContent.replace(/\${startCommand}/, - isTest ? 'npm run test' : 'npm run start'); + fileContent = fileContent.replace( + /\${startCommand}/, + isTest ? 'npm run test' : 'npm run start', + ); } else if (fileName === 'src/main.ts') { const mainComponentName = data.componentNames[0]; @@ -215,7 +219,7 @@ export class StackBlitzWriter { // will be replaced as `bootstrapApplication(ButtonDemo,` fileContent = fileContent.replace( /bootstrapApplication\(MaterialDocsExample,/g, - `bootstrapApplication(${mainComponentName},` + `bootstrapApplication(${mainComponentName},`, ); const dotIndex = data.indexFilename.lastIndexOf('.'); diff --git a/material.angular.io/src/app/shared/style-manager/style-manager.spec.ts b/material.angular.io/src/app/shared/style-manager/style-manager.spec.ts index d5b958a28322..31a4b4309ff6 100644 --- a/material.angular.io/src/app/shared/style-manager/style-manager.spec.ts +++ b/material.angular.io/src/app/shared/style-manager/style-manager.spec.ts @@ -2,14 +2,15 @@ import {HttpClientTestingModule} from '@angular/common/http/testing'; import {inject, TestBed} from '@angular/core/testing'; import {StyleManager} from './style-manager'; - describe('StyleManager', () => { let styleManager: StyleManager; - beforeEach(() => TestBed.configureTestingModule({ - imports: [HttpClientTestingModule], - providers: [StyleManager] - })); + beforeEach(() => + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [StyleManager], + }), + ); beforeEach(inject([StyleManager], (sm: StyleManager) => { styleManager = sm; diff --git a/material.angular.io/src/app/shared/style-manager/style-manager.ts b/material.angular.io/src/app/shared/style-manager/style-manager.ts index 0a6022725537..43590c63e39d 100644 --- a/material.angular.io/src/app/shared/style-manager/style-manager.ts +++ b/material.angular.io/src/app/shared/style-manager/style-manager.ts @@ -1,6 +1,5 @@ import {Injectable} from '@angular/core'; - /** * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be * removed or changed later. diff --git a/material.angular.io/src/app/shared/support/support.spec.ts b/material.angular.io/src/app/shared/support/support.spec.ts index 30d10a615053..7849384450f4 100644 --- a/material.angular.io/src/app/shared/support/support.spec.ts +++ b/material.angular.io/src/app/shared/support/support.spec.ts @@ -8,7 +8,7 @@ describe('HelpSupportComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [Support] + imports: [Support], }).compileComponents(); }); diff --git a/material.angular.io/src/app/shared/support/support.ts b/material.angular.io/src/app/shared/support/support.ts index 23eeb47bd91f..6275e0bfc000 100644 --- a/material.angular.io/src/app/shared/support/support.ts +++ b/material.angular.io/src/app/shared/support/support.ts @@ -6,7 +6,6 @@ import {AppLogo} from '../logo/logo'; templateUrl: './support.html', styleUrls: ['./support.scss'], standalone: true, - imports: [AppLogo] + imports: [AppLogo], }) -export class Support { -} +export class Support {} diff --git a/material.angular.io/src/app/shared/svg-viewer/svg-viewer.ts b/material.angular.io/src/app/shared/svg-viewer/svg-viewer.ts index df450fac7937..719f95cc550b 100644 --- a/material.angular.io/src/app/shared/svg-viewer/svg-viewer.ts +++ b/material.angular.io/src/app/shared/svg-viewer/svg-viewer.ts @@ -10,7 +10,10 @@ export class SvgViewer implements OnInit { @Input() src: string | undefined; @Input() scaleToContainer: boolean | undefined; - constructor(private elementRef: ElementRef, private http: HttpClient) { } + constructor( + private elementRef: ElementRef, + private http: HttpClient, + ) {} ngOnInit() { if (this.src) { diff --git a/material.angular.io/src/app/shared/table-of-contents/table-of-contents.spec.ts b/material.angular.io/src/app/shared/table-of-contents/table-of-contents.spec.ts index ac8b802c36b0..1a7c84d2b8a9 100644 --- a/material.angular.io/src/app/shared/table-of-contents/table-of-contents.spec.ts +++ b/material.angular.io/src/app/shared/table-of-contents/table-of-contents.spec.ts @@ -7,17 +7,14 @@ import {DocsAppTestingModule} from '../../testing/testing-module'; const mockActivatedRoute = { fragment: new Observable(observer => { observer.complete(); - }) + }), }; describe('TableOfContents', () => { - beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [DocsAppTestingModule], - providers: [ - {provide: ActivatedRoute, useValue: mockActivatedRoute}, - ] + providers: [{provide: ActivatedRoute, useValue: mockActivatedRoute}], }).compileComponents(); })); @@ -31,9 +28,7 @@ describe('TableOfContents', () => { }); it('should have no header', () => { - const header = fixture - .nativeElement - .querySelector('h2'); + const header = fixture.nativeElement.querySelector('h2'); expect(header).toBeNull(); }); @@ -44,8 +39,8 @@ describe('TableOfContents', () => { id: 'test', name: 'test', top: 0, - active: false - } + active: false, + }, ]; const header = fixture.nativeElement.querySelector('h2'); diff --git a/material.angular.io/src/app/shared/table-of-contents/table-of-contents.ts b/material.angular.io/src/app/shared/table-of-contents/table-of-contents.ts index 5a9c4d60e1eb..39dbac154055 100644 --- a/material.angular.io/src/app/shared/table-of-contents/table-of-contents.ts +++ b/material.angular.io/src/app/shared/table-of-contents/table-of-contents.ts @@ -7,7 +7,7 @@ import { OnInit, NgZone, ChangeDetectorRef, - input + input, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {ActivatedRoute, Router} from '@angular/router'; @@ -41,7 +41,7 @@ interface Link { selector: 'table-of-contents', styleUrls: ['./table-of-contents.scss'], templateUrl: './table-of-contents.html', - standalone: true + standalone: true, }) export class TableOfContents implements OnInit, AfterViewInit, OnDestroy { readonly container = input(); @@ -54,32 +54,36 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy { private _urlFragment = ''; private subscriptions = new Subscription(); - constructor(private _router: Router, - private _route: ActivatedRoute, - private _element: ElementRef, - private _navigationFocusService: NavigationFocusService, - @Inject(DOCUMENT) private _document: Document, - private _ngZone: NgZone, - private _changeDetectorRef: ChangeDetectorRef) { - - this.subscriptions.add(this._navigationFocusService.navigationEndEvents - .subscribe(() => { + constructor( + private _router: Router, + private _route: ActivatedRoute, + private _element: ElementRef, + private _navigationFocusService: NavigationFocusService, + @Inject(DOCUMENT) private _document: Document, + private _ngZone: NgZone, + private _changeDetectorRef: ChangeDetectorRef, + ) { + this.subscriptions.add( + this._navigationFocusService.navigationEndEvents.subscribe(() => { const rootUrl = _router.url.split('#')[0]; if (rootUrl !== this._rootUrl) { this._rootUrl = rootUrl; } - })); - - this.subscriptions.add(this._route.fragment.subscribe(fragment => { - if (fragment != null) { - this._urlFragment = fragment; - - const target = document.getElementById(this._urlFragment); - if (target) { - target.scrollIntoView(); + }), + ); + + this.subscriptions.add( + this._route.fragment.subscribe(fragment => { + if (fragment != null) { + this._urlFragment = fragment; + + const target = document.getElementById(this._urlFragment); + if (target) { + target.scrollIntoView(); + } } - } - })); + }), + ); } ngOnInit(): void { @@ -88,14 +92,16 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy { this._ngZone.runOutsideAngular(() => { Promise.resolve().then(() => { const container = this.container(); - this._scrollContainer = container ? - this._document.querySelector(container) as HTMLElement : - window; + this._scrollContainer = container + ? (this._document.querySelector(container) as HTMLElement) + : window; if (this._scrollContainer) { - this.subscriptions.add(fromEvent(this._scrollContainer, 'scroll').pipe( - debounceTime(10)) - .subscribe(() => this.onScroll())); + this.subscriptions.add( + fromEvent(this._scrollContainer, 'scroll') + .pipe(debounceTime(10)) + .subscribe(() => this.onScroll()), + ); } }); }); @@ -128,7 +134,7 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy { type: header.tagName.toLowerCase(), top: top, id: header.id, - active: false + active: false, }; }).filter(link => link.id); @@ -163,8 +169,8 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy { // anchor without also being scrolled passed the next link. const currentLink = this._links[i]; const nextLink = this._links[i + 1]; - const isActive = scrollOffset >= currentLink.top && - (!nextLink || nextLink.top >= scrollOffset); + const isActive = + scrollOffset >= currentLink.top && (!nextLink || nextLink.top >= scrollOffset); if (isActive !== currentLink.active) { currentLink.active = isActive; diff --git a/material.angular.io/src/app/shared/theme-picker/theme-picker.ts b/material.angular.io/src/app/shared/theme-picker/theme-picker.ts index 2f299e9d0917..231545847bb9 100644 --- a/material.angular.io/src/app/shared/theme-picker/theme-picker.ts +++ b/material.angular.io/src/app/shared/theme-picker/theme-picker.ts @@ -23,7 +23,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, - imports: [MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule] + imports: [MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule], }) export class ThemePicker implements OnInit, OnDestroy { private _queryParamSubscription = Subscription.EMPTY; @@ -58,10 +58,12 @@ export class ThemePicker implements OnInit, OnDestroy { }, ]; - constructor(public styleManager: StyleManager, - private _themeStorage: ThemeStorage, - private _activatedRoute: ActivatedRoute, - private liveAnnouncer: LiveAnnouncer) { + constructor( + public styleManager: StyleManager, + private _themeStorage: ThemeStorage, + private _activatedRoute: ActivatedRoute, + private liveAnnouncer: LiveAnnouncer, + ) { const themeName = this._themeStorage.getStoredThemeName(); if (themeName) { this.selectTheme(themeName); @@ -81,7 +83,7 @@ export class ThemePicker implements OnInit, OnDestroy { if (themeName) { this.selectTheme(themeName); } - }); + }); } ngOnDestroy() { @@ -89,7 +91,8 @@ export class ThemePicker implements OnInit, OnDestroy { } selectTheme(themeName: string) { - const theme = this.themes.find(currentTheme => currentTheme.name === themeName) || + const theme = + this.themes.find(currentTheme => currentTheme.name === themeName) || this.themes.find(currentTheme => currentTheme.isDefault)!; this.currentTheme = theme; diff --git a/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.spec.ts b/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.spec.ts index 30be7437a5dc..ec58bd2dca38 100644 --- a/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.spec.ts +++ b/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.spec.ts @@ -1,11 +1,10 @@ import {ThemeStorage, DocsSiteTheme} from './theme-storage'; - const testStorageKey = ThemeStorage.storageKey; const testTheme: DocsSiteTheme = { color: '#000000', background: '#ffffff', - name: 'test-theme' + name: 'test-theme', }; describe('ThemeStorage Service', () => { @@ -14,7 +13,7 @@ describe('ThemeStorage Service', () => { const secondTestTheme: DocsSiteTheme = { color: '#666666', background: '#333333', - name: 'other-test-theme' + name: 'other-test-theme', }; beforeEach(() => { diff --git a/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.ts b/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.ts index 930a5581ceaf..9c61d2fa8ff8 100644 --- a/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.ts +++ b/material.angular.io/src/app/shared/theme-picker/theme-storage/theme-storage.ts @@ -8,7 +8,6 @@ export interface DocsSiteTheme { isDefault?: boolean; } - @Injectable({providedIn: 'root'}) export class ThemeStorage { static storageKey = 'docs-theme-storage-current-name'; @@ -18,7 +17,7 @@ export class ThemeStorage { storeTheme(theme: DocsSiteTheme) { try { window.localStorage[ThemeStorage.storageKey] = theme.name; - } catch { } + } catch {} this.onThemeUpdate.emit(theme); } @@ -34,6 +33,6 @@ export class ThemeStorage { clearStorage() { try { window.localStorage.removeItem(ThemeStorage.storageKey); - } catch { } + } catch {} } } diff --git a/material.angular.io/src/app/shared/version-picker/version-picker.ts b/material.angular.io/src/app/shared/version-picker/version-picker.ts index f55a5436fa1c..5c09eaeee7b7 100644 --- a/material.angular.io/src/app/shared/version-picker/version-picker.ts +++ b/material.angular.io/src/app/shared/version-picker/version-picker.ts @@ -38,9 +38,9 @@ export class VersionPicker { onVersionChanged(version: VersionInfo) { if (!version.url.startsWith(window.location.origin)) { window.location.assign( - window.location.pathname ? - (version.url + window.location.pathname + window.location.hash) - : version.url + window.location.pathname + ? version.url + window.location.pathname + window.location.hash + : version.url, ); } } diff --git a/material.angular.io/src/app/testing/testing-module.ts b/material.angular.io/src/app/testing/testing-module.ts index 2f0b6be7b860..942837a1bb06 100644 --- a/material.angular.io/src/app/testing/testing-module.ts +++ b/material.angular.io/src/app/testing/testing-module.ts @@ -3,12 +3,9 @@ import {NgModule} from '@angular/core'; import {MATERIAL_SANITY_CHECKS} from '@angular/material/core'; import {RouterTestingModule} from '@angular/router/testing'; - @NgModule({ imports: [RouterTestingModule, HttpClientTestingModule], exports: [RouterTestingModule], - providers: [ - {provide: MATERIAL_SANITY_CHECKS, useValue: false}, - ], + providers: [{provide: MATERIAL_SANITY_CHECKS, useValue: false}], }) export class DocsAppTestingModule {} diff --git a/material.angular.io/src/assets/stack-blitz/angular.json b/material.angular.io/src/assets/stack-blitz/angular.json index d6295aa90957..17f8ee732968 100644 --- a/material.angular.io/src/assets/stack-blitz/angular.json +++ b/material.angular.io/src/assets/stack-blitz/angular.json @@ -29,12 +29,8 @@ "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": [ - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], + "assets": ["src/assets"], + "styles": ["src/styles.scss"], "stylePreprocessorOptions": { "includePaths": ["node_modules/"] }, @@ -99,17 +95,11 @@ "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", - "assets": [ - "src/assets" - ], + "assets": ["src/assets"], "stylePreprocessorOptions": { - "includePaths": [ - "node_modules/" - ] + "includePaths": ["node_modules/"] }, - "styles": [ - "src/styles.scss" - ], + "styles": ["src/styles.scss"], "scripts": [] } } diff --git a/material.angular.io/src/assets/stack-blitz/karma.conf.js b/material.angular.io/src/assets/stack-blitz/karma.conf.js index 2aaaf6bb857e..c82069f17d49 100644 --- a/material.angular.io/src/assets/stack-blitz/karma.conf.js +++ b/material.angular.io/src/assets/stack-blitz/karma.conf.js @@ -10,7 +10,7 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { jasmine: { @@ -19,18 +19,15 @@ module.exports = function (config) { // for example, you can disable the random execution with `random: false` // or set a specific seed with `seed: 4321` }, - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces + suppressAll: true, // removes the duplicated traces }, coverageReporter: { dir: require('path').join(__dirname, './coverage/example-app'), subdir: '.', - reporters: [ - { type: 'html' }, - { type: 'text-summary' } - ] + reporters: [{type: 'html'}, {type: 'text-summary'}], }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -39,6 +36,6 @@ module.exports = function (config) { autoWatch: true, browsers: ['Chrome'], singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/material.angular.io/src/assets/stack-blitz/src/main.ts b/material.angular.io/src/assets/stack-blitz/src/main.ts index 2ed89e930359..217a573d9bac 100644 --- a/material.angular.io/src/assets/stack-blitz/src/main.ts +++ b/material.angular.io/src/assets/stack-blitz/src/main.ts @@ -12,9 +12,5 @@ console.info('Angular CDK version', CDK_VERSION.full); console.info('Angular Material version', MAT_VERSION.full); bootstrapApplication(MaterialDocsExample, { - providers: [ - provideAnimations(), - provideHttpClient(), - importProvidersFrom(MatNativeDateModule) - ] + providers: [provideAnimations(), provideHttpClient(), importProvidersFrom(MatNativeDateModule)], }).catch(err => console.error(err)); diff --git a/material.angular.io/src/assets/stack-blitz/src/test.ts b/material.angular.io/src/assets/stack-blitz/src/test.ts index 0e1bfcd6b7e8..045eeb686d73 100644 --- a/material.angular.io/src/assets/stack-blitz/src/test.ts +++ b/material.angular.io/src/assets/stack-blitz/src/test.ts @@ -4,19 +4,16 @@ import 'zone.js/testing'; import {getTestBed} from '@angular/core/testing'; import { BrowserDynamicTestingModule, - platformBrowserDynamicTesting + platformBrowserDynamicTesting, } from '@angular/platform-browser-dynamic/testing'; // First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); +getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); // Then we find all the tests. const context = (import.meta as any).webpackContext('./', { recursive: true, - regExp: /\.spec\.ts$/ + regExp: /\.spec\.ts$/, }); // And load the modules. diff --git a/material.angular.io/src/assets/stack-blitz/tsconfig.app.json b/material.angular.io/src/assets/stack-blitz/tsconfig.app.json index 374cc9d294aa..84f1f992d275 100644 --- a/material.angular.io/src/assets/stack-blitz/tsconfig.app.json +++ b/material.angular.io/src/assets/stack-blitz/tsconfig.app.json @@ -5,10 +5,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "files": [ - "src/main.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] } diff --git a/material.angular.io/src/assets/stack-blitz/tsconfig.json b/material.angular.io/src/assets/stack-blitz/tsconfig.json index fe21199d0c15..be068ba9c780 100644 --- a/material.angular.io/src/assets/stack-blitz/tsconfig.json +++ b/material.angular.io/src/assets/stack-blitz/tsconfig.json @@ -12,10 +12,7 @@ "importHelpers": true, "target": "es2022", "module": "es2020", - "lib": [ - "es2020", - "dom" - ], + "lib": ["es2020", "dom"], // Strictness flags. Matching the settings applied in the Angular Components source // code, ensuring that examples do not break in StackBlitz with stricter settings. "noUnusedParameters": false, diff --git a/material.angular.io/src/assets/stack-blitz/tsconfig.spec.json b/material.angular.io/src/assets/stack-blitz/tsconfig.spec.json index 61c1bb357d33..f140ce15bf10 100644 --- a/material.angular.io/src/assets/stack-blitz/tsconfig.spec.json +++ b/material.angular.io/src/assets/stack-blitz/tsconfig.spec.json @@ -3,15 +3,8 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] + "types": ["jasmine"] }, - "files": [ - "src/test.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] + "files": ["src/test.ts"], + "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/material.angular.io/src/main.ts b/material.angular.io/src/main.ts index 35a94c10c7b4..b703599bbb96 100644 --- a/material.angular.io/src/main.ts +++ b/material.angular.io/src/main.ts @@ -13,22 +13,22 @@ import {LocationStrategy, PathLocationStrategy} from '@angular/common'; const prefersReducedMotion = typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion)').matches : false; - // Unregister all installed service workers and force reload the page if there was // an old service worker from a previous version of the docs. -unregisterServiceWorkers() - .then(hadServiceWorker => hadServiceWorker && location.reload()); +unregisterServiceWorkers().then(hadServiceWorker => hadServiceWorker && location.reload()); bootstrapApplication(MaterialDocsApp, { providers: [ prefersReducedMotion ? provideNoopAnimations() : provideAnimations(), {provide: LocationStrategy, useClass: PathLocationStrategy}, {provide: ErrorHandler, useClass: AnalyticsErrorReportHandler}, - provideRouter(MATERIAL_DOCS_ROUTES, withInMemoryScrolling({ - scrollPositionRestoration: 'enabled', - anchorScrolling: 'enabled' - })), + provideRouter( + MATERIAL_DOCS_ROUTES, + withInMemoryScrolling({ + scrollPositionRestoration: 'enabled', + anchorScrolling: 'enabled', + }), + ), provideHttpClient(), - ] -}) - .catch(err => console.error(err)); + ], +}).catch(err => console.error(err)); diff --git a/material.angular.io/src/polyfills.ts b/material.angular.io/src/polyfills.ts index af8644d1bcf9..9b436dd009b4 100644 --- a/material.angular.io/src/polyfills.ts +++ b/material.angular.io/src/polyfills.ts @@ -58,8 +58,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js'; // Included with Angular CLI. - +import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS diff --git a/material.angular.io/tools/optimize-scene-screenshots.js b/material.angular.io/tools/optimize-scene-screenshots.js index c5025e7a8923..8b8b6d020dd6 100644 --- a/material.angular.io/tools/optimize-scene-screenshots.js +++ b/material.angular.io/tools/optimize-scene-screenshots.js @@ -19,7 +19,7 @@ sh.set('-e'); imagemin(['src/assets/screenshots/*.png'], { destination: 'src/assets/screenshots', - plugins: [imageminPngquant({quality: [0.4, 0.6]})] + plugins: [imageminPngquant({quality: [0.4, 0.6]})], }) -.then(() => console.log('Optimization complete.')) -.catch(error => console.error); + .then(() => console.log('Optimization complete.')) + .catch(error => console.error); diff --git a/material.angular.io/tsconfig.app.json b/material.angular.io/tsconfig.app.json index f758d9820d53..29f5f5864eb6 100644 --- a/material.angular.io/tsconfig.app.json +++ b/material.angular.io/tsconfig.app.json @@ -4,11 +4,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "files": [ - "src/main.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] } diff --git a/material.angular.io/tsconfig.spec.json b/material.angular.io/tsconfig.spec.json index 6400fde7d544..430cf757cee7 100644 --- a/material.angular.io/tsconfig.spec.json +++ b/material.angular.io/tsconfig.spec.json @@ -2,17 +2,8 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", - "types": [ - "jasmine", - "node" - ] + "types": ["jasmine", "node"] }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] + "files": ["src/test.ts", "src/polyfills.ts"], + "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] }