Remove light card for generated mode

* clean up zha device card and usage

* group binding tile

* add cluster selection to group binding tile

* fix css class name

* fix filtering

* multiselect for clusters in group binding

* pass narrow to cluster table

* fix tables

* fix device page

* address remaing comments from previous PR

* fix bad cherry-pick

* css cleanup

* consistency

* use properties

* translations

* add confirmation dialog to remove button

* fix css

* review comments

* remove noise

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,11 +1,24 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: bug
+assignees: ""
+---
+
 <!-- READ THIS FIRST:
 - If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
 - Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
-- This is for bugs only. Feature and enhancement requests should go in our community forum: https://community.home-assistant.io/c/feature-requests
 - Provide as many details as possible. Do not delete any text from this template!
 -->
 
+**Checklist:**
+
+- [ ] I updated to the latest version available
+- [ ] I cleared the cache of my browser
+
 **Home Assistant release with the issue:**
+
 <!--
 - Frontend -> Developer tools -> Info
 - Or use this command: hass --version
@@ -14,22 +27,50 @@
 **Last working Home Assistant release (if known):**
 
 **UI (States or Lovelace UI?):**
+
 <!--
 - Frontend -> Developer tools -> Info
 -->
 
 **Browser and Operating System:**
+
 <!--
 Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
 -->
 
 **Description of problem:**
+
 <!--
-Explain what the issue is, and how things should look/behave. If possible provide a screenshot with a description.
+Explain what the issue is, and what is the current behaviour. If possible provide a screenshot with a description.
 -->
 
+**Expected behaviour:**
+
+<!--
+Explain how things should look/behave. If possible provide a screenshot with a description.
+-->
+
+**Relevant config:**
+
+<!--
+Give the config of both the integration that is used, the Lovelace config, scene, automation or otherwise relevant configuration.
+-->
+
+**Steps to reproduce this problem:**
+
+<!--
+Sum up all steps that are necessary to reproduce this bug.
+For example:
+1. Add a climate integration
+2. Navigate to Lovelace
+3. Click more info of the climate entity
+4. Set the hvac action to heat
+5. Set the temperature higher than the current temperature
+6. Set the hvac action to cool
+-->
 
 **Javascript errors shown in the web inspector (if applicable):**
+
 ```
 
 ```

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: feature request
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/lock.yml

@@ -0,0 +1,27 @@
+# Configuration for Lock Threads - https://github.com/dessant/lock-threads
+
+# Number of days of inactivity before a closed issue or pull request is locked
+daysUntilLock: 1
+
+# Skip issues and pull requests created before a given timestamp. Timestamp must
+# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
+skipCreatedBefore: 2020-01-01
+
+# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
+exemptLabels: []
+
+# Label to add before locking, such as `outdated`. Set to `false` to disable
+lockLabel: false
+
+# Comment to post before locking. Set to `false` to disable
+lockComment: false
+
+# Assign `resolved` as the reason for locking. Set to `false` to disable
+setLockReason: false
+
+# Limit to only `issues` or `pulls`
+only: pulls
+
+# Optionally, specify configuration settings just for `issues` or `pulls`
+issues:
+   daysUntilLock: 30

.travis.yml

@@ -8,19 +8,11 @@ install: yarn install
 script:
   - npm run build
   - hassio/script/build_hassio
+  # Because else eslint fails because hassio has cleaned that build
+  - ./node_modules/.bin/gulp gen-icons-app
   - npm run test
   # - xvfb-run wct --module-resolution=node --npm
   # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
-services:
-  - docker
-before_deploy:
-  - 'docker pull lokalise/lokalise-cli@sha256:2198814ebddfda56ee041a4b427521757dd57f75415ea9693696a64c550cef21'
-deploy:
-  provider: script
-  script: script/travis_deploy
-  'on':
-    branch: master
 dist: trusty
 addons:
   sauce_connect: true
-

README.md

@@ -2,9 +2,9 @@
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://home-assistant.io/demo/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
 
-- [View demo of the Polymer frontend](https://home-assistant.io/demo/)
+- [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)
 - [Frontend development instructions](https://developers.home-assistant.io/docs/en/frontend_index.html)
 
@@ -31,3 +31,5 @@ It is possible to compile the project and/or run commands in the development env
 ## License
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
+
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variation of devices.

azure-pipelines-translation.yml

@@ -0,0 +1,70 @@
+# https://dev.azure.com/home-assistant
+
+trigger:
+  batch: true
+  branches:
+    include:
+    - dev
+  paths:
+    include:
+    - translations/en.json
+pr: none
+schedules:
+  - cron: "30 0 * * *"
+    displayName: "translation update"
+    branches:
+      include:
+      - dev
+    always: true
+variables:
+- group: translation
+resources:
+  repositories:
+  - repository: azure
+    type: github
+    name: 'home-assistant/ci-azure'
+    endpoint: 'home-assistant'
+
+
+jobs:
+
+- job: 'Upload'
+  pool:
+    vmImage: 'ubuntu-latest'
+  steps:
+  - task: NodeTool@0
+    displayName: 'Use Node 12.x'
+    inputs:
+      versionSpec: '12.x'
+  - script: |
+      export LOKALISE_TOKEN="$(lokaliseToken)"
+      export AZURE_BRANCH="$(Build.SourceBranchName)"
+
+      ./script/translations_upload_base
+    displayName: 'Upload Translation'
+
+- job: 'Download'
+  dependsOn:
+  - 'Upload'
+  condition: or(eq(variables['Build.Reason'], 'Schedule'), eq(variables['Build.Reason'], 'Manual'))
+  pool:
+    vmImage: 'ubuntu-latest'
+  steps:
+  - task: NodeTool@0
+    displayName: 'Use Node 12.x'
+    inputs:
+      versionSpec: '12.x'
+  - template: templates/azp-step-git-init.yaml@azure
+  - script: |
+      export LOKALISE_TOKEN="$(lokaliseToken)"
+      export AZURE_BRANCH="$(Build.SourceBranchName)"
+
+      npm install
+      ./script/translations_download
+    displayName: 'Download Translation'
+  - script: |
+      git checkout dev
+      git add translation
+      git commit -am "[ci skip] Translation update"
+      git push
+    displayName: 'Update translation'

build-scripts/babel.js

@@ -0,0 +1,49 @@
+module.exports.babelLoaderConfig = ({ latestBuild }) => {
+  if (latestBuild === undefined) {
+    throw Error("latestBuild not defined for babel loader config");
+  }
+  return {
+    test: /\.m?js$|\.tsx?$/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: [
+          !latestBuild && [
+            require("@babel/preset-env").default,
+            { modules: false },
+          ],
+          [
+            require("@babel/preset-typescript").default,
+            {
+              jsxPragma: "h",
+            },
+          ],
+        ].filter(Boolean),
+        plugins: [
+          // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+          [
+            "@babel/plugin-proposal-object-rest-spread",
+            { loose: true, useBuiltIns: true },
+          ],
+          // Only support the syntax, Webpack will handle it.
+          "@babel/syntax-dynamic-import",
+          [
+            "@babel/transform-react-jsx",
+            {
+              pragma: "h",
+            },
+          ],
+          "@babel/plugin-proposal-optional-chaining",
+          [
+            require("@babel/plugin-proposal-decorators").default,
+            { decoratorsBeforeExport: true },
+          ],
+          [
+            require("@babel/plugin-proposal-class-properties").default,
+            { loose: true },
+          ],
+        ],
+      },
+    },
+  };
+};

build-scripts/env.js

@@ -0,0 +1,6 @@
+module.exports = {
+  isProdBuild: process.env.NODE_ENV === "production",
+  isStatsBuild: process.env.STATS === "1",
+  isTravis: process.env.TRAVIS === "true",
+  isNetlify: process.env.NETLIFY === "true",
+};

build-scripts/gulp/app.js

@@ -1,10 +1,13 @@
 // Run HA develop mode
 const gulp = require("gulp");
 
+const envVars = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons.js");
 require("./gather-static.js");
+require("./compress.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
@@ -18,7 +21,7 @@ gulp.task(
     "clean",
     gulp.parallel(
       "gen-service-worker-dev",
-      "gen-icons",
+      gulp.parallel("gen-icons-app", "gen-icons-mdi"),
       "gen-pages-dev",
       "gen-index-app-dev",
       gulp.series("create-test-translation", "build-translations")
@@ -35,13 +38,11 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static",
-    gulp.parallel(
-      "webpack-prod-app",
-      // Do not compress static files in CI, it's SLOW.
-      ...(process.env.CI === "true" ? [] : ["compress-static"])
-    ),
+    "webpack-prod-app",
+    ...// Don't compress running tests
+    (envVars.isTravis ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/cast.js

@@ -1,4 +1,3 @@
-// Run cast develop mode
 const gulp = require("gulp");
 
 require("./clean.js");
@@ -16,7 +15,12 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-cast",
-    gulp.parallel("gen-icons", "gen-index-cast-dev", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "gen-index-cast-dev",
+      "build-translations"
+    ),
     "copy-static-cast",
     "webpack-dev-server-cast"
   )
@@ -29,7 +33,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-cast",
-    gulp.parallel("gen-icons", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static-cast",
     "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/clean.js

@@ -9,15 +9,31 @@ gulp.task(
     return del([config.root, config.build_dir]);
   })
 );
+
 gulp.task(
   "clean-demo",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
     return del([config.demo_root, config.build_dir]);
   })
 );
+
 gulp.task(
   "clean-cast",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
     return del([config.cast_root, config.build_dir]);
   })
 );
+
+gulp.task(
+  "clean-hassio",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.hassio_root, config.build_dir]);
+  })
+);
+
+gulp.task(
+  "clean-gallery",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.gallery_root, config.build_dir]);
+  })
+);

build-scripts/gulp/compress.js

@@ -0,0 +1,38 @@
+// Tasks to compress
+
+const gulp = require("gulp");
+const zopfli = require("gulp-zopfli-green");
+const merge = require("merge-stream");
+const path = require("path");
+const paths = require("../paths");
+
+gulp.task("compress-app", function compressApp() {
+  const jsLatest = gulp
+    .src(path.resolve(paths.output, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.output));
+
+  const jsEs5 = gulp
+    .src(path.resolve(paths.output_es5, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.output_es5));
+
+  const polyfills = gulp
+    .src(path.resolve(paths.static, "polyfills/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(path.resolve(paths.static, "polyfills")));
+
+  const translations = gulp
+    .src(path.resolve(paths.static, "translations/*.json"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(path.resolve(paths.static, "translations")));
+
+  return merge(jsLatest, jsEs5, polyfills, translations);
+});
+
+gulp.task("compress-hassio", function compressApp() {
+  return gulp
+    .src(path.resolve(paths.hassio_root, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.hassio_root));
+});

build-scripts/gulp/demo.js

@@ -17,7 +17,8 @@ gulp.task(
     },
     "clean-demo",
     gulp.parallel(
-      "gen-icons",
+      "gen-icons-app",
+      "gen-icons-mdi",
       "gen-icons-demo",
       "gen-index-demo-dev",
       "build-translations"
@@ -34,7 +35,12 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-demo",
-    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "gen-icons-demo",
+      "build-translations"
+    ),
     "copy-static-demo",
     "webpack-prod-demo",
     "gen-index-demo-prod"

build-scripts/gulp/download_translations.js

@@ -14,7 +14,7 @@ function hasHtml(data) {
 function recursiveCheckHasHtml(file, data, errors, recKey) {
   Object.keys(data).forEach(function(key) {
     if (typeof data[key] === "object") {
-      nextRecKey = recKey ? `${recKey}.${key}` : key;
+      const nextRecKey = recKey ? `${recKey}.${key}` : key;
       recursiveCheckHasHtml(file, data[key], errors, nextRecKey);
     } else if (hasHtml(data[key])) {
       errors.push(`HTML found in ${file.path} at key ${recKey}.${key}`);
@@ -23,7 +23,7 @@ function recursiveCheckHasHtml(file, data, errors, recKey) {
 }
 
 function checkHtml() {
-  let errors = [];
+  const errors = [];
 
   return mapStream(function(file, cb) {
     const content = file.contents;

build-scripts/gulp/entry-html.js

@@ -11,12 +11,6 @@ const config = require("../paths.js");
 const templatePath = (tpl) =>
   path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
 
-const demoTemplatePath = (tpl) =>
-  path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`);
-
-const castTemplatePath = (tpl) =>
-  path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`);
-
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
 const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
@@ -25,10 +19,19 @@ const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
 };
 
 const renderDemoTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, demoTemplatePath);
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`)
+  );
 
 const renderCastTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, castTemplatePath);
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`)
+  );
+
+const renderGalleryTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.gallery_dir, "src/html/", `${tpl}.html.template`)
+  );
 
 const minifyHtml = (content) =>
   minify(content, {
@@ -209,8 +212,33 @@ gulp.task("gen-index-demo-prod", (done) => {
     es5Compatibility: es5Manifest["compatibility.js"],
     es5DemoJS: es5Manifest["main.js"],
   });
-  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+  const minified = minifyHtml(content);
 
   fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
   done();
 });
+
+gulp.task("gen-index-gallery-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: "./entrypoint.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-gallery-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.gallery_output,
+    "manifest.json"
+  ));
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: latestManifest["entrypoint.js"],
+  });
+  const minified = minifyHtml(content);
+
+  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), minified);
+  done();
+});

build-scripts/gulp/gallery.js

@@ -0,0 +1,38 @@
+// Run demo develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-gallery",
+    gulp.parallel("gen-icons-app", "gen-icons-app", "build-translations"),
+    "copy-static-gallery",
+    "gen-index-gallery-dev",
+    "webpack-dev-server-gallery"
+  )
+);
+
+gulp.task(
+  "build-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-gallery",
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    "copy-static-gallery",
+    "webpack-prod-gallery",
+    "gen-index-gallery-prod"
+  )
+);

build-scripts/gulp/gather-static.js

@@ -4,8 +4,6 @@ const gulp = require("gulp");
 const path = require("path");
 const cpx = require("cpx");
 const fs = require("fs-extra");
-const zopfli = require("gulp-zopfli-green");
-const merge = require("merge-stream");
 const paths = require("../paths");
 
 const npmPath = (...parts) =>
@@ -67,20 +65,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-function compressStatic(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  const polyfills = gulp
-    .src(staticPath("polyfills/*.js"))
-    .pipe(zopfli())
-    .pipe(gulp.dest(staticPath("polyfills")));
-  const translations = gulp
-    .src(staticPath("translations/*.json"))
-    .pipe(zopfli())
-    .pipe(gulp.dest(staticPath("translations")));
-
-  return merge(polyfills, translations);
-}
-
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
   const staticPath = genStaticPath(paths.static);
@@ -100,11 +84,12 @@ gulp.task("copy-static", (done) => {
   done();
 });
 
-gulp.task("compress-static", () => compressStatic(paths.static));
-
 gulp.task("copy-static-demo", (done) => {
   // Copy app static files
-  fs.copySync(polyPath("public"), paths.demo_root);
+  fs.copySync(
+    polyPath("public/static"),
+    path.resolve(paths.demo_root, "static")
+  );
   // Copy demo static files
   fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
 
@@ -126,3 +111,15 @@ gulp.task("copy-static-cast", (done) => {
   copyTranslations(paths.cast_static);
   done();
 });
+
+gulp.task("copy-static-gallery", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public/static"), paths.gallery_static);
+  // Copy gallery static files
+  fs.copySync(path.resolve(paths.gallery_dir, "public"), paths.gallery_root);
+
+  copyMapPanel(paths.gallery_static);
+  copyFonts(paths.gallery_static);
+  copyTranslations(paths.gallery_static);
+  done();
+});

build-scripts/gulp/gen-icons.js

@@ -57,18 +57,6 @@ function generateIconset(iconsetName, iconNames) {
   return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
 }
 
-// Generate the full MDI iconset
-function genMDIIcons() {
-  const meta = JSON.parse(
-    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
-  );
-  const iconNames = meta.map((iconInfo) => iconInfo.name);
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR);
-  }
-  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
-}
-
 // Helper function to map recursively over files in a folder and it's subfolders
 function mapFiles(startPath, filter, mapFunc) {
   const files = fs.readdirSync(startPath);
@@ -101,24 +89,27 @@ function findIcons(searchPath, iconsetName) {
   return icons;
 }
 
-function genHassIcons() {
+gulp.task("gen-icons-mdi", (done) => {
+  const meta = JSON.parse(
+    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
+  );
+  const iconNames = meta.map((iconInfo) => iconInfo.name);
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
+  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
+  done();
+});
+
+gulp.task("gen-icons-app", (done) => {
   const iconNames = findIcons("./src", "hass");
   BUILT_IN_PANEL_ICONS.forEach((name) => iconNames.add(name));
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR);
   }
   fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset("hass", iconNames));
-}
-
-gulp.task("gen-icons-mdi", (done) => {
-  genMDIIcons();
   done();
 });
-gulp.task("gen-icons-hass", (done) => {
-  genHassIcons();
-  done();
-});
-gulp.task("gen-icons", gulp.series("gen-icons-hass", "gen-icons-mdi"));
 
 gulp.task("gen-icons-demo", (done) => {
   const iconNames = findIcons(path.resolve(paths.demo_dir, "./src"), "hademo");
@@ -129,8 +120,21 @@ gulp.task("gen-icons-demo", (done) => {
   done();
 });
 
-module.exports = {
-  findIcons,
-  generateIconset,
-  genMDIIcons,
-};
+gulp.task("gen-icons-hassio", (done) => {
+  const iconNames = findIcons(
+    path.resolve(paths.hassio_dir, "./src"),
+    "hassio"
+  );
+  // Find hassio icons inside HA main repo.
+  for (const item of findIcons(
+    path.resolve(paths.polymer_dir, "./src"),
+    "hassio"
+  )) {
+    iconNames.add(item);
+  }
+  fs.writeFileSync(
+    path.resolve(paths.hassio_dir, "hassio-icons.html"),
+    generateIconset("hassio", iconNames)
+  );
+  done();
+});

build-scripts/gulp/hassio.js

@@ -0,0 +1,34 @@
+const gulp = require("gulp");
+
+const envVars = require("../env");
+
+require("./clean.js");
+require("./gen-icons.js");
+require("./webpack.js");
+require("./compress.js");
+
+gulp.task(
+  "develop-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-hassio",
+    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
+    "webpack-watch-hassio"
+  )
+);
+
+gulp.task(
+  "build-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-hassio",
+    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
+    "webpack-prod-hassio",
+    ...// Don't compress running tests
+    (envVars.isTravis ? [] : ["compress-hassio"])
+  )
+);

build-scripts/gulp/translations.js

@@ -45,11 +45,10 @@ function recursiveFlatten(prefix, data) {
   let output = {};
   Object.keys(data).forEach(function(key) {
     if (typeof data[key] === "object") {
-      output = Object.assign(
-        {},
-        output,
-        recursiveFlatten(prefix + key + ".", data[key])
-      );
+      output = {
+        ...output,
+        ...recursiveFlatten(prefix + key + ".", data[key]),
+      };
     } else {
       output[prefix + key] = data[key];
     }
@@ -99,18 +98,16 @@ function recursiveEmpty(data) {
  * @link https://docs.lokalise.co/article/KO5SZWLLsy-key-referencing
  */
 const re_key_reference = /\[%key:([^%]+)%\]/;
-function lokalise_transform(data, original) {
+function lokaliseTransform(data, original, file) {
   const output = {};
   Object.entries(data).forEach(([key, value]) => {
     if (value instanceof Object) {
-      output[key] = lokalise_transform(value, original);
+      output[key] = lokaliseTransform(value, original, file);
     } else {
       output[key] = value.replace(re_key_reference, (match, key) => {
         const replace = key.split("::").reduce((tr, k) => tr[k], original);
         if (typeof replace !== "string") {
-          throw Error(
-            `Invalid key placeholder ${key} in src/translations/en.json`
-          );
+          throw Error(`Invalid key placeholder ${key} in ${file.path}`);
         }
         return replace;
       });
@@ -183,7 +180,7 @@ gulp.task(
       .src("src/translations/en.json")
       .pipe(
         transform(function(data, file) {
-          return lokalise_transform(data, data);
+          return lokaliseTransform(data, data, file);
         })
       )
       .pipe(rename("translationMaster.json"))
@@ -198,6 +195,11 @@ gulp.task(
   gulp.series("build-master-translation", function() {
     return gulp
       .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
       .pipe(
         foreach(function(stream, file) {
           // For each language generate a merged json file. It begins with the master

build-scripts/gulp/webpack.js

@@ -1,6 +1,5 @@
 // Tasks to run webpack.
 const gulp = require("gulp");
-const path = require("path");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
 const log = require("fancy-log");
@@ -9,8 +8,33 @@ const {
   createAppConfig,
   createDemoConfig,
   createCastConfig,
+  createHassioConfig,
+  createGalleryConfig,
 } = require("../webpack");
 
+const bothBuilds = (createConfigFunc, params) => [
+  createConfigFunc({ ...params, latestBuild: true }),
+  createConfigFunc({ ...params, latestBuild: false }),
+];
+
+const runDevServer = ({
+  compiler,
+  contentBase,
+  port,
+  listenHost = "localhost",
+}) =>
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase,
+  }).listen(port, listenHost, function(err) {
+    if (err) {
+      throw err;
+    }
+    // Server listening
+    log("[webpack-dev-server]", `http://localhost:${port}`);
+  });
+
 const handler = (done) => (err, stats) => {
   if (err) {
     console.log(err.stack || err);
@@ -32,20 +56,11 @@ const handler = (done) => (err, stats) => {
 };
 
 gulp.task("webpack-watch-app", () => {
-  const compiler = webpack([
-    createAppConfig({
-      isProdBuild: false,
-      latestBuild: true,
-      isStatsBuild: false,
-    }),
-    createAppConfig({
-      isProdBuild: false,
-      latestBuild: false,
-      isStatsBuild: false,
-    }),
-  ]);
-  compiler.watch({}, handler());
   // we are not calling done, so this command will run forever
+  webpack(bothBuilds(createAppConfig, { isProdBuild: false })).watch(
+    {},
+    handler()
+  );
 });
 
 gulp.task(
@@ -53,47 +68,17 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        [
-          createAppConfig({
-            isProdBuild: true,
-            latestBuild: true,
-            isStatsBuild: false,
-          }),
-          createAppConfig({
-            isProdBuild: true,
-            latestBuild: false,
-            isStatsBuild: false,
-          }),
-        ],
+        bothBuilds(createAppConfig, { isProdBuild: true }),
         handler(resolve)
       )
     )
 );
 
 gulp.task("webpack-dev-server-demo", () => {
-  const compiler = webpack([
-    createDemoConfig({
-      isProdBuild: false,
-      latestBuild: false,
-      isStatsBuild: false,
-    }),
-    createDemoConfig({
-      isProdBuild: false,
-      latestBuild: true,
-      isStatsBuild: false,
-    }),
-  ]);
-
-  new WebpackDevServer(compiler, {
-    open: true,
-    watchContentBase: true,
-    contentBase: path.resolve(paths.demo_dir, "dist"),
-  }).listen(8090, "localhost", function(err) {
-    if (err) {
-      throw err;
-    }
-    // Server listening
-    log("[webpack-dev-server]", "http://localhost:8090");
+  runDevServer({
+    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
+    contentBase: paths.demo_root,
+    port: 8090,
   });
 });
 
@@ -102,51 +87,22 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        [
-          createDemoConfig({
-            isProdBuild: true,
-            latestBuild: false,
-            isStatsBuild: false,
-          }),
-          createDemoConfig({
-            isProdBuild: true,
-            latestBuild: true,
-            isStatsBuild: false,
-          }),
-        ],
+        bothBuilds(createDemoConfig, {
+          isProdBuild: true,
+        }),
         handler(resolve)
       )
     )
 );
 
 gulp.task("webpack-dev-server-cast", () => {
-  const compiler = webpack([
-    createCastConfig({
-      isProdBuild: false,
-      latestBuild: false,
-    }),
-    createCastConfig({
-      isProdBuild: false,
-      latestBuild: true,
-    }),
-  ]);
-
-  new WebpackDevServer(compiler, {
-    open: true,
-    watchContentBase: true,
-    contentBase: path.resolve(paths.cast_dir, "dist"),
-  }).listen(
-    8080,
+  runDevServer({
+    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
+    contentBase: paths.cast_root,
+    port: 8080,
     // Accessible from the network, because that's how Cast hits it.
-    "0.0.0.0",
-    function(err) {
-      if (err) {
-        throw err;
-      }
-      // Server listening
-      log("[webpack-dev-server]", "http://localhost:8080");
-    }
-  );
+    listenHost: "0.0.0.0",
+  });
 });
 
 gulp.task(
@@ -154,16 +110,59 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        [
-          createCastConfig({
-            isProdBuild: true,
-            latestBuild: false,
-          }),
-          createCastConfig({
-            isProdBuild: true,
-            latestBuild: true,
-          }),
-        ],
+        bothBuilds(createCastConfig, {
+          isProdBuild: true,
+        }),
+
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-watch-hassio", () => {
+  // we are not calling done, so this command will run forever
+  webpack(
+    createHassioConfig({
+      isProdBuild: false,
+      latestBuild: false,
+    })
+  ).watch({}, handler());
+});
+
+gulp.task(
+  "webpack-prod-hassio",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        createHassioConfig({
+          isProdBuild: true,
+          latestBuild: false,
+        }),
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-dev-server-gallery", () => {
+  runDevServer({
+    compiler: webpack(
+      createGalleryConfig({ latestBuild: true, isProdBuild: false })
+    ),
+    contentBase: paths.gallery_root,
+    port: 8100,
+  });
+});
+
+gulp.task(
+  "webpack-prod-gallery",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        createGalleryConfig({
+          isProdBuild: true,
+          latestBuild: true,
+        }),
+
         handler(resolve)
       )
     )

build-scripts/paths.js

@@ -20,4 +20,13 @@ module.exports = {
   cast_static: path.resolve(__dirname, "../cast/dist/static"),
   cast_output: path.resolve(__dirname, "../cast/dist/frontend_latest"),
   cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
+
+  gallery_dir: path.resolve(__dirname, "../gallery"),
+  gallery_root: path.resolve(__dirname, "../gallery/dist"),
+  gallery_output: path.resolve(__dirname, "../gallery/dist/frontend_latest"),
+  gallery_static: path.resolve(__dirname, "../gallery/dist/static"),
+
+  hassio_dir: path.resolve(__dirname, "../hassio"),
+  hassio_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_publicPath: "/api/hassio/app/",
 };

build-scripts/webpack.js

@@ -3,10 +3,9 @@ const fs = require("fs");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const WorkboxPlugin = require("workbox-webpack-plugin");
-const CompressionPlugin = require("compression-webpack-plugin");
-const zopfli = require("@gfx/zopfli");
 const ManifestPlugin = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
+const { babelLoaderConfig } = require("./babel.js");
 
 let version = fs
   .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
@@ -16,273 +15,246 @@ if (!version) {
 }
 version = version[0];
 
-const genMode = (isProdBuild) => (isProdBuild ? "production" : "development");
-const genDevTool = (isProdBuild) =>
-  isProdBuild ? "source-map" : "inline-cheap-module-source-map";
-const genFilename = (isProdBuild, dontHash = new Set()) => ({ chunk }) => {
-  if (!isProdBuild || dontHash.has(chunk.name)) {
-    return `${chunk.name}.js`;
-  }
-  return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
-};
-const genChunkFilename = (isProdBuild, isStatsBuild) =>
-  isProdBuild && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
-
-const resolve = {
-  extensions: [".ts", ".js", ".json", ".tsx"],
-  alias: {
-    react: "preact-compat",
-    "react-dom": "preact-compat",
-    // Not necessary unless you consume a module using `createClass`
-    "create-react-class": "preact-compat/lib/create-react-class",
-    // Not necessary unless you consume a module requiring `react-dom-factories`
-    "react-dom-factories": "preact-compat/lib/react-dom-factories",
-  },
-};
-
-const tsLoader = (latestBuild) => ({
-  test: /\.ts|tsx$/,
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: "ts-loader",
-      options: {
-        compilerOptions: latestBuild
-          ? { noEmit: false }
-          : { target: "es5", noEmit: false },
-      },
-    },
-  ],
-});
-const cssLoader = {
-  test: /\.css$/,
-  use: "raw-loader",
-};
-const htmlLoader = {
-  test: /\.(html)$/,
-  use: {
-    loader: "html-loader",
-    options: {
-      exportAsEs6Default: true,
-    },
-  },
-};
-
-const plugins = [
-  // Ignore moment.js locales
-  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-  // Color.js is bloated, it contains all color definitions for all material color sets.
-  new webpack.NormalModuleReplacementPlugin(
-    /@polymer\/paper-styles\/color\.js$/,
-    path.resolve(paths.polymer_dir, "src/util/empty.js")
-  ),
-  // Ignore roboto pointing at CDN. We use local font-roboto-local.
-  new webpack.NormalModuleReplacementPlugin(
-    /@polymer\/font-roboto\/roboto\.js$/,
-    path.resolve(paths.polymer_dir, "src/util/empty.js")
-  ),
-  // Ignore mwc icons pointing at CDN.
-  new webpack.NormalModuleReplacementPlugin(
-    /@material\/mwc-icon\/mwc-icon-font\.js$/,
-    path.resolve(paths.polymer_dir, "src/util/empty.js")
-  ),
-];
-
-const optimization = (latestBuild) => ({
-  minimizer: [
-    new TerserPlugin({
-      cache: true,
-      parallel: true,
-      extractComments: true,
-      sourceMap: true,
-      terserOptions: {
-        safari10: true,
-        ecma: latestBuild ? undefined : 5,
-      },
-    }),
-  ],
-});
-
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  const isCI = process.env.CI === "true";
-
-  // Create an object mapping browser urls to their paths during build
-  const translationMetadata = require("../build-translations/translationMetadata.json");
-  const workBoxTranslationsTemplatedURLs = {};
-  const englishFP = translationMetadata.translations.en.fingerprints;
-  Object.keys(englishFP).forEach((key) => {
-    workBoxTranslationsTemplatedURLs[
-      `/static/translations/${englishFP[key]}`
-    ] = `build-translations/output/${key}.json`;
-  });
-
-  const entry = {
-    app: "./src/entrypoints/app.ts",
-    authorize: "./src/entrypoints/authorize.ts",
-    onboarding: "./src/entrypoints/onboarding.ts",
-    core: "./src/entrypoints/core.ts",
-    compatibility: "./src/entrypoints/compatibility.ts",
-    "custom-panel": "./src/entrypoints/custom-panel.ts",
-    "hass-icons": "./src/entrypoints/hass-icons.ts",
-  };
-
+const createWebpackConfig = ({
+  entry,
+  outputRoot,
+  defineOverlay,
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+}) => {
   return {
-    mode: genMode(isProdBuild),
-    devtool: genDevTool(isProdBuild),
+    mode: isProdBuild ? "production" : "development",
+    devtool: isProdBuild ? "source-map" : "inline-cheap-module-source-map",
     entry,
     module: {
-      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+      rules: [
+        babelLoaderConfig({ latestBuild }),
+        {
+          test: /\.css$/,
+          use: "raw-loader",
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: "html-loader",
+            options: {
+              exportAsEs6Default: true,
+            },
+          },
+        },
+      ],
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          cache: true,
+          parallel: true,
+          extractComments: true,
+          sourceMap: true,
+          terserOptions: {
+            safari10: true,
+            ecma: latestBuild ? undefined : 5,
+          },
+        }),
+      ],
     },
-    optimization: optimization(latestBuild),
     plugins: [
       new ManifestPlugin(),
       new webpack.DefinePlugin({
-        __DEV__: JSON.stringify(!isProdBuild),
-        __DEMO__: false,
+        __DEV__: !isProdBuild,
         __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
         __VERSION__: JSON.stringify(version),
+        __DEMO__: false,
         __STATIC_PATH__: "/static/",
         "process.env.NODE_ENV": JSON.stringify(
           isProdBuild ? "production" : "development"
         ),
+        ...defineOverlay,
       }),
-      ...plugins,
-      isProdBuild &&
-        !isCI &&
-        !isStatsBuild &&
-        new CompressionPlugin({
-          cache: true,
-          exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
-          algorithm(input, compressionOptions, callback) {
-            return zopfli.gzip(input, compressionOptions, callback);
-          },
-        }),
-      latestBuild &&
-        new WorkboxPlugin.InjectManifest({
-          swSrc: "./src/entrypoints/service-worker-hass.js",
-          swDest: "service_worker.js",
-          importWorkboxFrom: "local",
-          include: [/\.js$/],
-          templatedURLs: {
-            ...workBoxTranslationsTemplatedURLs,
-            "/static/icons/favicon-192x192.png":
-              "public/icons/favicon-192x192.png",
-            "/static/fonts/roboto/Roboto-Light.woff2":
-              "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2",
-            "/static/fonts/roboto/Roboto-Medium.woff2":
-              "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2",
-            "/static/fonts/roboto/Roboto-Regular.woff2":
-              "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2",
-            "/static/fonts/roboto/Roboto-Bold.woff2":
-              "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2",
-          },
-        }),
+      // Ignore moment.js locales
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // Color.js is bloated, it contains all color definitions for all material color sets.
+      new webpack.NormalModuleReplacementPlugin(
+        /@polymer\/paper-styles\/color\.js$/,
+        path.resolve(paths.polymer_dir, "src/util/empty.js")
+      ),
+      // Ignore roboto pointing at CDN. We use local font-roboto-local.
+      new webpack.NormalModuleReplacementPlugin(
+        /@polymer\/font-roboto\/roboto\.js$/,
+        path.resolve(paths.polymer_dir, "src/util/empty.js")
+      ),
+      // Ignore mwc icons pointing at CDN.
+      new webpack.NormalModuleReplacementPlugin(
+        /@material\/mwc-icon\/mwc-icon-font\.js$/,
+        path.resolve(paths.polymer_dir, "src/util/empty.js")
+      ),
     ].filter(Boolean),
+    resolve: {
+      extensions: [".ts", ".js", ".json"],
+      alias: {
+        react: "preact-compat",
+        "react-dom": "preact-compat",
+        // Not necessary unless you consume a module using `createClass`
+        "create-react-class": "preact-compat/lib/create-react-class",
+        // Not necessary unless you consume a module requiring `react-dom-factories`
+        "react-dom-factories": "preact-compat/lib/react-dom-factories",
+      },
+    },
     output: {
-      filename: genFilename(isProdBuild),
-      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
-      path: latestBuild ? paths.output : paths.output_es5,
+      filename: ({ chunk }) => {
+        const dontHash = new Set();
+
+        if (!isProdBuild || dontHash.has(chunk.name)) {
+          return `${chunk.name}.js`;
+        }
+        return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
+      },
+      chunkFilename:
+        isProdBuild && !isStatsBuild
+          ? "chunk.[chunkhash].js"
+          : "[name].chunk.js",
+      path: path.resolve(
+        outputRoot,
+        latestBuild ? "frontend_latest" : "frontend_es5"
+      ),
       publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
       // For workerize loader
       globalObject: "self",
     },
-    resolve,
   };
 };
 
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  const config = createWebpackConfig({
+    entry: {
+      app: "./src/entrypoints/app.ts",
+      authorize: "./src/entrypoints/authorize.ts",
+      onboarding: "./src/entrypoints/onboarding.ts",
+      core: "./src/entrypoints/core.ts",
+      compatibility: "./src/entrypoints/compatibility.ts",
+      "custom-panel": "./src/entrypoints/custom-panel.ts",
+      "hass-icons": "./src/entrypoints/hass-icons.ts",
+    },
+    outputRoot: paths.root,
+    isProdBuild,
+    latestBuild,
+    isStatsBuild,
+  });
+
+  if (latestBuild) {
+    // Create an object mapping browser urls to their paths during build
+    const translationMetadata = require("../build-translations/translationMetadata.json");
+    const workBoxTranslationsTemplatedURLs = {};
+    const englishFP = translationMetadata.translations.en.fingerprints;
+    Object.keys(englishFP).forEach((key) => {
+      workBoxTranslationsTemplatedURLs[
+        `/static/translations/${englishFP[key]}`
+      ] = `build-translations/output/${key}.json`;
+    });
+
+    config.plugins.push(
+      new WorkboxPlugin.InjectManifest({
+        swSrc: "./src/entrypoints/service-worker-hass.js",
+        swDest: "service_worker.js",
+        importWorkboxFrom: "local",
+        include: [/\.js$/],
+        templatedURLs: {
+          ...workBoxTranslationsTemplatedURLs,
+          "/static/icons/favicon-192x192.png":
+            "public/icons/favicon-192x192.png",
+          "/static/fonts/roboto/Roboto-Light.woff2":
+            "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2",
+          "/static/fonts/roboto/Roboto-Medium.woff2":
+            "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2",
+          "/static/fonts/roboto/Roboto-Regular.woff2":
+            "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2",
+          "/static/fonts/roboto/Roboto-Bold.woff2":
+            "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2",
+        },
+      })
+    );
+  }
+
+  return config;
+};
+
 const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return {
-    mode: genMode(isProdBuild),
-    devtool: genDevTool(isProdBuild),
+  return createWebpackConfig({
     entry: {
-      main: "./demo/src/entrypoint.ts",
-      compatibility: "./src/entrypoints/compatibility.ts",
-    },
-    module: {
-      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
-    },
-    optimization: optimization(latestBuild),
-    plugins: [
-      new ManifestPlugin(),
-      new webpack.DefinePlugin({
-        __DEV__: !isProdBuild,
-        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify(`DEMO-${version}`),
-        __DEMO__: true,
-        __STATIC_PATH__: "/static/",
-        "process.env.NODE_ENV": JSON.stringify(
-          isProdBuild ? "production" : "development"
-        ),
-      }),
-      ...plugins,
-    ].filter(Boolean),
-    resolve,
-    output: {
-      filename: genFilename(isProdBuild),
-      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
-      path: path.resolve(
-        paths.demo_root,
-        latestBuild ? "frontend_latest" : "frontend_es5"
+      main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
+      compatibility: path.resolve(
+        paths.polymer_dir,
+        "src/entrypoints/compatibility.ts"
       ),
-      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
-      // For workerize loader
-      globalObject: "self",
     },
-  };
+    outputRoot: paths.demo_root,
+    defineOverlay: {
+      __VERSION__: JSON.stringify(`DEMO-${version}`),
+      __DEMO__: true,
+    },
+    isProdBuild,
+    latestBuild,
+    isStatsBuild,
+  });
 };
 
 const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  const isStatsBuild = false;
   const entry = {
-    launcher: "./cast/src/launcher/entrypoint.ts",
+    launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
   };
 
   if (latestBuild) {
-    entry.receiver = "./cast/src/receiver/entrypoint.ts";
+    entry.receiver = path.resolve(paths.cast_dir, "src/receiver/entrypoint.ts");
   }
 
-  return {
-    mode: genMode(isProdBuild),
-    devtool: genDevTool(isProdBuild),
+  return createWebpackConfig({
     entry,
-    module: {
-      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+    outputRoot: paths.cast_root,
+    isProdBuild,
+    latestBuild,
+  });
+};
+
+const createHassioConfig = ({ isProdBuild, latestBuild }) => {
+  if (latestBuild) {
+    throw new Error("Hass.io does not support latest build!");
+  }
+  const config = createWebpackConfig({
+    entry: {
+      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.js"),
     },
-    optimization: optimization(latestBuild),
-    plugins: [
-      new ManifestPlugin(),
-      new webpack.DefinePlugin({
-        __DEV__: !isProdBuild,
-        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify(version),
-        __DEMO__: false,
-        __STATIC_PATH__: "/static/",
-        "process.env.NODE_ENV": JSON.stringify(
-          isProdBuild ? "production" : "development"
-        ),
-      }),
-      ...plugins,
-    ].filter(Boolean),
-    resolve,
-    output: {
-      filename: genFilename(isProdBuild),
-      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
-      path: path.resolve(
-        paths.cast_root,
-        latestBuild ? "frontend_latest" : "frontend_es5"
-      ),
-      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
-      // For workerize loader
-      globalObject: "self",
+    outputRoot: "",
+    isProdBuild,
+    latestBuild,
+  });
+
+  config.output.path = paths.hassio_root;
+  config.output.publicPath = paths.hassio_publicPath;
+
+  return config;
+};
+
+const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
+  if (!latestBuild) {
+    throw new Error("Gallery only supports latest build!");
+  }
+  const config = createWebpackConfig({
+    entry: {
+      entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
     },
-  };
+    outputRoot: paths.gallery_root,
+    isProdBuild,
+    latestBuild,
+  });
+
+  return config;
 };
 
 module.exports = {
-  resolve,
-  plugins,
-  optimization,
   createAppConfig,
   createDemoConfig,
   createCastConfig,
+  createHassioConfig,
+  createGalleryConfig,
 };

cast/public/_headers

@@ -0,0 +1,20 @@
+/*
+  Cache-Control: public, max-age: 0, s-maxage=3600, must-revalidate
+  Content-Security-Policy: form-action https:
+  Feature-Policy: vibrate 'none'; geolocation 'none'; midi 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; vibrate 'none'; payment 'none'
+  Referrer-Policy: no-referrer-when-downgrade
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  X-XSS-Protection: 1; mode=block
+
+/images/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/manifest.json
+  Cache-Control: public, max-age: 3600, s-maxage=3600
+
+/frontend_es5/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/frontend_latest/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800

cast/src/receiver/layout/hc-lovelace.ts

@@ -8,7 +8,8 @@ import {
   property,
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
-import "../../../../src/panels/lovelace/hui-view";
+import "../../../../src/panels/lovelace/views/hui-view";
+import "../../../../src/panels/lovelace/views/hui-panel-view";
 import { HomeAssistant } from "../../../../src/types";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "./hc-launch-screen";
@@ -38,16 +39,24 @@ class HcLovelace extends LitElement {
       mode: "storage",
       language: "en",
       saveConfig: async () => undefined,
+      deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return html`
-      <hui-view
-        .hass=${this.hass}
-        .lovelace=${lovelace}
-        .index=${index}
-        columns="2"
-      ></hui-view>
-    `;
+    return this.lovelaceConfig.views[index].panel
+      ? html`
+          <hui-panel-view
+            .hass=${this.hass}
+            .config=${this.lovelaceConfig.views[index]}
+          ></hui-panel-view>
+        `
+      : html`
+          <hui-view
+            .hass=${this.hass}
+            .lovelace=${lovelace}
+            .index=${index}
+            columns="2"
+          ></hui-view>
+        `;
   }
 
   protected updated(changedProps) {
@@ -62,7 +71,9 @@ class HcLovelace extends LitElement {
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
+          (this.shadowRoot!.querySelector(
+            "hui-view, hui-panel-view"
+          ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
@@ -94,7 +105,7 @@ class HcLovelace extends LitElement {
         box-sizing: border-box;
         background: var(--primary-background-color);
       }
-      hui-view {
+      :host > * {
         flex: 1;
       }
     `;

cast/src/receiver/layout/hc-main.ts

@@ -137,14 +137,14 @@ export class HcMain extends HassElement {
         }),
       });
     } catch (err) {
-      this._error = err;
+      this._error = this._getErrorMessage(err);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
     } catch (err) {
-      this._error = err;
+      this._error = this._getErrorMessage(err);
       return;
     }
     if (this.hass) {
@@ -175,9 +175,9 @@ export class HcMain extends HassElement {
       } catch (err) {
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
-        const {
-          generateLovelaceConfigFromHass,
-        } = await import("../../../../src/panels/lovelace/common/generate-lovelace-config");
+        const { generateLovelaceConfigFromHass } = await import(
+          "../../../../src/panels/lovelace/common/generate-lovelace-config"
+        );
         this._handleNewLovelaceConfig(
           await generateLovelaceConfigFromHass(this.hass!)
         );
@@ -213,6 +213,23 @@ export class HcMain extends HassElement {
     });
   }
 
+  private _getErrorMessage(error: number): string {
+    switch (error) {
+      case 1:
+        return "Unable to connect to the Home Assistant websocket API.";
+      case 2:
+        return "The supplied authentication is invalid.";
+      case 3:
+        return "The connection to Home Assistant was lost.";
+      case 4:
+        return "Missing hassUrl. This is required.";
+      case 5:
+        return "Home Assistant needs to be served over https:// to use with Home Assistant Cast.";
+      default:
+        return "Unknown Error";
+    }
+  }
+
   private _breakFree() {
     const controls = document.body.querySelector("touch-controls");
     if (controls) {

cast/webpack.config.js

@@ -0,0 +1,11 @@
+const { createCastConfig } = require("../build-scripts/webpack.js");
+const { isProdBuild } = require("../build-scripts/env.js");
+
+// File just used for stats builds
+
+const latestBuild = true;
+
+module.exports = createCastConfig({
+  isProdBuild,
+  latestBuild,
+});

demo/public/_headers

@@ -0,0 +1,18 @@
+/*
+  Cache-Control: public, max-age: 0, s-maxage=3600, must-revalidate
+  Content-Security-Policy: form-action https:
+  Referrer-Policy: no-referrer-when-downgrade
+  X-Content-Type-Options: nosniff
+  X-XSS-Protection: 1; mode=block
+
+/api/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/assets/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/frontend_es5/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/frontend_latest/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800

demo/public/manifest.json

@@ -7,22 +7,26 @@
     {
       "src": "/static/icons/favicon-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-384x384.png",
       "sizes": "384x384",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-1024x1024.png",
       "sizes": "1024x1024",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     }
   ],
   "lang": "en-US",

demo/src/configs/arsaboo/entities.ts

@@ -115,10 +115,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "Abode Updates",
         icon: "hademo:security",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_boolean.tv": {
@@ -127,10 +123,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "TV",
         icon: "hademo:television",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_boolean.homeautomation": {
@@ -139,10 +131,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "Home Automation",
         icon: "hass:home-automation",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_boolean.tvtime": {
@@ -151,12 +139,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "TV Time",
         icon: "hademo:television-guide",
-        templates: {
-          icon:
-            "if (state === 'on') return 'hademo:television-classic'; return 'hademo:television-classic-off';\n",
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_select.livingroomharmony": {
@@ -235,6 +217,18 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         icon: "hademo:currency-usd",
       },
     },
+    "sensor.study_temp": {
+      entity_id: "sensor.study_temp",
+      state: "20.9",
+      attributes: {
+        unit_of_measurement: "°C",
+        device_class: "temperature",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.temperature_study"
+        ),
+        icon: "hademo:thermometer",
+      },
+    },
     "cover.garagedoor": {
       entity_id: "cover.garagedoor",
       state: "closed",
@@ -560,12 +554,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "off",
       attributes: {
         friendly_name: "Driveway Light",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-          icon:
-            "if (state === 'on') return 'hademo:lightbulb-on'; return 'hademo:lightbulb';\n",
-        },
       },
     },
     "switch.wemoporch": {
@@ -573,12 +561,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "off",
       attributes: {
         friendly_name: "Porch Lights",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-          icon:
-            "if (state === 'on') return 'hademo:lightbulb-on'; return 'hademo:lightbulb';\n",
-        },
       },
     },
   });

demo/src/configs/arsaboo/lovelace.ts

@@ -446,6 +446,11 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
             "script.tv_off",
           ],
         },
+        {
+          type: "sensor",
+          entity: "sensor.study_temp",
+          graph: "line",
+        },
         {
           type: "entities",
           title: "Doorbell",

demo/src/configs/jimpower/theme.ts

@@ -23,27 +23,24 @@ export const demoThemeJimpower = () => ({
   "paper-listbox-background-color": "#2E333A",
   "table-row-background-color": "#353840",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#434954",
   "secondary-text-color": "#5294E2",
   "google-red-500": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
   "google-green-500": "#39E949",
-  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "var(--primary-color)",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
   "paper-card-background-color": "#434954",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
   "paper-slider-secondary-color": "var(--secondary-background-color)",
   "paper-slider-pin-color": "var(--accent-color)",
   "paper-item-icon-active-color": "#F9C536",
   "accent-color": "#E45E65",
-  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
   "table-row-alternative-background-color": "#3E424B",
 });

demo/src/configs/kernehed/theme.ts

@@ -24,27 +24,24 @@ export const demoThemeKernehed = () => ({
   "paper-listbox-background-color": "#141414",
   "table-row-background-color": "#292929",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#292929",
   "secondary-text-color": "#b58e31",
   "google-red-500": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
   "google-green-500": "#2980b9",
-  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
   "paper-card-background-color": "#292929",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
   "paper-slider-secondary-color": "var(--secondary-background-color)",
   "paper-slider-pin-color": "var(--accent-color)",
   "paper-item-icon-active-color": "#b58e31",
   "accent-color": "#2980b9",
-  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
   "table-row-alternative-background-color": "#292929",
 });

demo/src/configs/teachingbirds/theme.ts

@@ -12,8 +12,7 @@ export const demoThemeTeachingbirds = () => ({
   "paper-slider-knob-color": "var(--primary-color)",
   "paper-listbox-color": "#FFFFFF",
   "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
-  "paper-toggle-button-checked-ink-color": "var(--dark-primary-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--primary-text-color)",
+  "switch-unchecked-track-color": "var(--primary-text-color)",
   "paper-card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
@@ -22,7 +21,7 @@ export const demoThemeTeachingbirds = () => ({
   "secondary-background-color": "#2b2b2b",
   "paper-slider-knob-start-color": "var(--primary-color)",
   "paper-item-icon-active-color": "#d8bf50",
-  "paper-toggle-button-checked-button-color": "var(--primary-color)",
+  "switch-checked-color": "var(--primary-color)",
   "secondary-text-color": "#389638",
   "disabled-text-color": "#545454",
   "paper-item-icon_-_color": "var(--primary-text-color)",

demo/src/custom-cards/card-modder.js

@@ -53,7 +53,7 @@ class CardModder extends LitElement {
     for (var k in this._config.style) {
       if (window.cardTools.hasTemplate(this._config.style[k]))
         this.templated.push(k);
-      this.card.style.setProperty(k, '');
+      this.card.style.setProperty(k, "");
       target.style.setProperty(
         k,
         window.cardTools.parseTemplate(this._config.style[k])

demo/src/custom-cards/card-tools.js

@@ -161,8 +161,8 @@ if (!window.cardTools) {
   };
 
   cardTools.longpress = (element) => {
-    customElements.whenDefined("long-press").then(() => {
-      const longpress = document.body.querySelector("long-press");
+    customElements.whenDefined("action-handler").then(() => {
+      const longpress = document.body.querySelector("action-handler");
       longpress.bind(element);
     });
     return element;

demo/src/custom-cards/ha-demo-card.ts

@@ -1,10 +1,4 @@
-import {
-  LitElement,
-  html,
-  CSSResult,
-  css,
-  PropertyDeclarations,
-} from "lit-element";
+import { LitElement, html, CSSResult, css, property } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
@@ -20,19 +14,11 @@ import {
 } from "../configs/demo-configs";
 
 export class HADemoCard extends LitElement implements LovelaceCard {
-  public lovelace?: Lovelace;
-  public hass!: MockHomeAssistant;
-  private _switching?: boolean;
+  @property() public lovelace?: Lovelace;
+  @property() public hass!: MockHomeAssistant;
+  @property() private _switching?: boolean;
   private _hidden = localStorage.hide_demo_card;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      lovelace: {},
-      hass: {},
-      _switching: {},
-    };
-  }
-
   public getCardSize() {
     return this._hidden ? 0 : 2;
   }

demo/src/entrypoint.ts

@@ -12,5 +12,7 @@ import "./resources/hademo-icons";
 
 /* polyfill for paper-dropdown */
 setTimeout(() => {
-  import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min");
+  import(
+    /* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"
+  );
 }, 1000);

demo/src/stubs/history.ts

@@ -65,74 +65,79 @@ const generateHistory = (state, deltas) => {
 const incrementalUnits = ["clients", "queries", "ads"];
 
 export const mockHistory = (mockHass: MockHomeAssistant) => {
-  mockHass.mockAPI(new RegExp("history/period/.+"), (
-    hass,
-    // @ts-ignore
-    method,
-    path,
-    // @ts-ignore
-    parameters
-  ) => {
-    const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
-    const entities = params.filter_entity_id.split(",");
+  mockHass.mockAPI(
+    new RegExp("history/period/.+"),
+    (
+      hass,
+      // @ts-ignore
+      method,
+      path,
+      // @ts-ignore
+      parameters
+    ) => {
+      const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
+      const entities = params.filter_entity_id.split(",");
 
-    const results: HassEntity[][] = [];
+      const results: HassEntity[][] = [];
 
-    for (const entityId of entities) {
-      const state = hass.states[entityId];
+      for (const entityId of entities) {
+        const state = hass.states[entityId];
 
-      if (!state) {
-        continue;
-      }
+        if (!state) {
+          continue;
+        }
 
-      if (!state.attributes.unit_of_measurement) {
-        results.push(generateHistory(state, [state.state]));
-        continue;
-      }
+        if (!state.attributes.unit_of_measurement) {
+          results.push(generateHistory(state, [state.state]));
+          continue;
+        }
 
-      const numberState = Number(state.state);
+        const numberState = Number(state.state);
 
-      if (isNaN(numberState)) {
-        // tslint:disable-next-line
-        console.log(
-          "Ignoring state with unparsable state but with a unit",
-          entityId,
-          state
+        if (isNaN(numberState)) {
+          // tslint:disable-next-line
+          console.log(
+            "Ignoring state with unparsable state but with a unit",
+            entityId,
+            state
+          );
+          continue;
+        }
+
+        const statesToGenerate = 15;
+        let genFunc;
+
+        if (incrementalUnits.includes(state.attributes.unit_of_measurement)) {
+          let initial = Math.floor(
+            numberState * 0.4 + numberState * Math.random() * 0.2
+          );
+          const diff = Math.max(
+            1,
+            Math.floor((numberState - initial) / statesToGenerate)
+          );
+          genFunc = () => {
+            initial += diff;
+            return Math.min(numberState, initial);
+          };
+        } else {
+          const diff = Math.floor(
+            numberState * (numberState > 80 ? 0.05 : 0.5)
+          );
+          genFunc = () =>
+            numberState - diff + Math.floor(Math.random() * 2 * diff);
+        }
+
+        results.push(
+          generateHistory(
+            {
+              entity_id: state.entity_id,
+              attributes: state.attributes,
+            },
+            Array.from({ length: statesToGenerate }, genFunc)
+          )
         );
-        continue;
       }
-
-      const statesToGenerate = 15;
-      let genFunc;
-
-      if (incrementalUnits.includes(state.attributes.unit_of_measurement)) {
-        let initial = Math.floor(
-          numberState * 0.4 + numberState * Math.random() * 0.2
-        );
-        const diff = Math.max(
-          1,
-          Math.floor((numberState - initial) / statesToGenerate)
-        );
-        genFunc = () => {
-          initial += diff;
-          return Math.min(numberState, initial);
-        };
-      } else {
-        const diff = Math.floor(numberState * (numberState > 80 ? 0.05 : 0.5));
-        genFunc = () =>
-          numberState - diff + Math.floor(Math.random() * 2 * diff);
-      }
-
-      results.push(
-        generateHistory(
-          {
-            entity_id: state.entity_id,
-            attributes: state.attributes,
-          },
-          Array.from({ length: statesToGenerate }, genFunc)
-        )
-      );
+      return results;
     }
-    return results;
-  });
+  );
 };

demo/src/stubs/lovelace.ts

@@ -12,9 +12,10 @@ export const mockLovelace = (
   localizePromise: Promise<LocalizeFunc>
 ) => {
   hass.mockWS("lovelace/config", () =>
-    Promise.all([selectedDemoConfig, localizePromise]).then(
-      ([config, localize]) => config.lovelace(localize)
-    )
+    Promise.all([
+      selectedDemoConfig,
+      localizePromise,
+    ]).then(([config, localize]) => config.lovelace(localize))
   );
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());

demo/src/stubs/translations.ts

@@ -97,7 +97,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
       "component.nest.config.abort.authorize_url_timeout":
         "Timeout generating authorize url.",
       "component.nest.config.abort.no_flows":
-        "You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/nest/).",
+        "You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/nest/).",
       "component.nest.config.error.internal_error":
         "Internal error validating code",
       "component.nest.config.error.invalid_code": "Invalid code",
@@ -199,7 +199,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
       "component.point.config.abort.external_setup":
         "Point successfully configured from another flow.",
       "component.point.config.abort.no_flows":
-        "You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/point/).",
+        "You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/point/).",
       "component.point.config.create_entry.default":
         "Successfully authenticated with Minut for your Point device(s)",
       "component.point.config.error.follow_link":

demo/webpack.config.js

@@ -1,10 +1,9 @@
 const { createDemoConfig } = require("../build-scripts/webpack.js");
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
-// This file exists because we haven't migrated the stats script yet
+// File just used for stats builds
 
-const isProdBuild = process.env.NODE_ENV === "production";
-const isStatsBuild = process.env.STATS === "1";
-const latestBuild = false;
+const latestBuild = true;
 
 module.exports = createDemoConfig({
   isProdBuild,

gallery/public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#2157BC">
-    <title>HAGallery</title>
-    <script src='./main.js' async></script>
-    <style>
-      body {
-        font-family: Roboto, Noto, sans-serif;
-        margin: 0;
-        padding: 0;
-      }
-    </style>
-  </head>
-  <body></body>
-</html>

gallery/script/build_gallery

@@ -4,14 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=dist
-
-rm -rf $OUTPUT_DIR
-
-cd ..
-./node_modules/.bin/gulp build-translations gen-icons
-cd gallery
-
-NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js
+./node_modules/.bin/gulp build-gallery

gallery/script/develop_gallery

@@ -4,10 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-cd ..
-./node_modules/.bin/gulp build-translations gen-icons
-cd gallery
-
-../node_modules/.bin/webpack-dev-server
+./node_modules/.bin/gulp develop-gallery

gallery/src/components/demo-card.js

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import JsYaml from "js-yaml";
+import { safeLoad } from "js-yaml";
 
 import { createCardElement } from "../../../src/panels/lovelace/common/create-card-element";
 
@@ -62,7 +62,7 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = createCardElement(JsYaml.safeLoad(config.config)[0]);
+    const el = createCardElement(safeLoad(config.config)[0]);
     el.hass = this.hass;
     card.appendChild(el);
   }

gallery/src/components/demo-cards.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-card";
+import "../../../src/components/ha-switch";
 
 class DemoCards extends PolymerElement {
   static get template() {
@@ -26,9 +26,9 @@ class DemoCards extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
-            >Show config</paper-toggle-button
-          >
+          <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            Show config
+          </ha-switch>
         </div>
       </app-toolbar>
       <div class="cards">
@@ -53,6 +53,10 @@ class DemoCards extends PolymerElement {
       },
     };
   }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
 }
 
 customElements.define("demo-cards", DemoCards);

gallery/src/components/demo-more-infos.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-more-info";
+import "../../../src/components/ha-switch";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {
@@ -26,9 +26,7 @@ class DemoMoreInfos extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
-            >Show entity</paper-toggle-button
-          >
+          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
         </div>
       </app-toolbar>
       <div class="cards">

gallery/src/data/demo_states.js

@@ -36,7 +36,7 @@ export default {
     attributes: {
       title: "Welcome Home!",
       message:
-        "Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available components](https://home-assistant.io/components/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` component.",
+        "Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available integrations](https://home-assistant.io/integrations/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` integration.",
     },
     last_changed: "2018-07-19T10:44:45.922241+00:00",
     last_updated: "2018-07-19T10:44:45.922241+00:00",

gallery/src/demos/demo-util-long-press.ts

@@ -2,7 +2,8 @@ import { html, LitElement, TemplateResult } from "lit-element";
 import "@material/mwc-button";
 
 import "../../../src/components/ha-card";
-import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
+import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
+import { ActionHandlerEvent } from "../../../src/data/lovelace";
 
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult | void {
@@ -12,9 +13,8 @@ export class DemoUtilLongPress extends LitElement {
         () => html`
           <ha-card>
             <mwc-button
-              @ha-click="${this._handleTap}"
-              @ha-hold="${this._handleHold}"
-              .longPress="${longPress()}"
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({})}
             >
               (long) press me!
             </mwc-button>
@@ -28,12 +28,8 @@ export class DemoUtilLongPress extends LitElement {
     `;
   }
 
-  private _handleTap(ev: Event) {
-    this._addValue(ev, "tap");
-  }
-
-  private _handleHold(ev: Event) {
-    this._addValue(ev, "hold");
+  private _handleAction(ev: ActionHandlerEvent) {
+    this._addValue(ev, ev.detail.action!);
   }
 
   private _addValue(ev: Event, value: string) {

gallery/src/html/index.html.template

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#2157BC" />
+    <title>HAGallery</title>
+
+    <script type="module" src="<%= latestGalleryJS %>"></script>
+    <style>
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>

gallery/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const webpackBase = require("../build-scripts/webpack.js");
+const { createGalleryConfig } = require("../build-scripts/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
@@ -8,71 +9,64 @@ const buildPath = path.resolve(__dirname, "dist");
 const publicPath = isProd ? "./" : "http://localhost:8080/";
 const latestBuild = true;
 
-module.exports = {
-  mode: isProd ? "production" : "development",
-  // Disabled in prod while we make Home Assistant able to serve the right files.
-  // Was source-map
-  devtool: isProd ? "none" : "inline-source-map",
-  entry: "./src/entrypoint.js",
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: "ts-loader",
+module.exports = createGalleryConfig({
+  latestBuild: true,
+});
+
+const bla = () => {
+  const oldExports = {
+    mode: isProd ? "production" : "development",
+    // Disabled in prod while we make Home Assistant able to serve the right files.
+    // Was source-map
+    devtool: isProd ? "none" : "inline-source-map",
+    entry: "./src/entrypoint.js",
+    module: {
+      rules: [
+        babelLoaderConfig({ latestBuild }),
+        {
+          test: /\.css$/,
+          use: "raw-loader",
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: "html-loader",
             options: {
-              compilerOptions: latestBuild
-                ? { noEmit: false }
-                : { target: "es5", noEmit: false },
+              exportAsEs6Default: true,
             },
           },
-        ],
-      },
-      {
-        test: /\.css$/,
-        use: "raw-loader",
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: "html-loader",
-          options: {
-            exportAsEs6Default: true,
-          },
         },
-      },
-    ],
-  },
-  optimization: webpackBase.optimization(latestBuild),
-  plugins: [
-    new CopyWebpackPlugin([
-      "public",
-      { from: "../public", to: "static" },
-      { from: "../build-translations/output", to: "static/translations" },
-      {
-        from: "../node_modules/leaflet/dist/leaflet.css",
-        to: "static/images/leaflet/",
-      },
-      {
-        from: "../node_modules/roboto-fontface/fonts/roboto/*.woff2",
-        to: "static/fonts/roboto/",
-      },
-      {
-        from: "../node_modules/leaflet/dist/images",
-        to: "static/images/leaflet/",
-      },
-    ]),
-  ].filter(Boolean),
-  resolve: webpackBase.resolve,
-  output: {
-    filename: "[name].js",
-    chunkFilename: chunkFilename,
-    path: buildPath,
-    publicPath,
-  },
-  devServer: {
-    contentBase: "./public",
-  },
+      ],
+    },
+    optimization: webpackBase.optimization(latestBuild),
+    plugins: [
+      new CopyWebpackPlugin([
+        "public",
+        { from: "../public", to: "static" },
+        { from: "../build-translations/output", to: "static/translations" },
+        {
+          from: "../node_modules/leaflet/dist/leaflet.css",
+          to: "static/images/leaflet/",
+        },
+        {
+          from: "../node_modules/roboto-fontface/fonts/roboto/*.woff2",
+          to: "static/fonts/roboto/",
+        },
+        {
+          from: "../node_modules/leaflet/dist/images",
+          to: "static/images/leaflet/",
+        },
+      ]),
+    ].filter(Boolean),
+    resolve: webpackBase.resolve,
+    output: {
+      filename: "[name].js",
+      chunkFilename: chunkFilename,
+      path: buildPath,
+      publicPath,
+    },
+    devServer: {
+      contentBase: "./public",
+    },
+  };
 };

hassio/config.js

@@ -3,6 +3,7 @@ const path = require("path");
 module.exports = {
   // Target directory for the build.
   buildDir: path.resolve(__dirname, "build"),
+  nodeDir: path.resolve(__dirname, "../node_modules"),
   // Path where the Hass.io frontend will be publicly available.
   publicPath: "/api/hassio/app",
 };

hassio/script/build_hassio

@@ -4,11 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=build
-
-rm -rf $OUTPUT_DIR
-
-node script/gen-icons.js
-NODE_ENV=production CI=false ../node_modules/.bin/webpack -p --config webpack.config.js
+./node_modules/.bin/gulp build-hassio

hassio/script/develop

@@ -4,11 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=build
-
-rm -rf $OUTPUT_DIR
-mkdir $OUTPUT_DIR
-node script/gen-icons.js
-../node_modules/.bin/webpack --watch --progress
+./node_modules/.bin/gulp develop-hassio

hassio/script/gen-icons.js

@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-const fs = require("fs");
-const {
-  findIcons,
-  generateIconset,
-  genMDIIcons,
-} = require("../../build-scripts/gulp/gen-icons.js");
-
-function genHassioIcons() {
-  const iconNames = findIcons("./src", "hassio");
-
-  for (const item of findIcons("../src", "hassio")) {
-    iconNames.add(item);
-  }
-
-  fs.writeFileSync("./hassio-icons.html", generateIconset("hassio", iconNames));
-}
-
-genMDIIcons();
-genHassioIcons();

hassio/src/addon-view/hassio-addon-audio.js

@@ -44,9 +44,7 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
               selected="{{selectedInput}}"
             >
               <template is="dom-repeat" items="[[inputDevices]]">
-                <paper-item device\$="[[item.device]]"
-                  >[[item.name]]</paper-item
-                >
+                <paper-item device$="[[item.device]]">[[item.name]]</paper-item>
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
@@ -57,9 +55,7 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
               selected="{{selectedOutput}}"
             >
               <template is="dom-repeat" items="[[outputDevices]]">
-                <paper-item device\$="[[item.device]]"
-                  >[[item.name]]</paper-item
-                >
+                <paper-item device$="[[item.device]]">[[item.name]]</paper-item>
               </template>
             </paper-listbox>
           </paper-dropdown-menu>

hassio/src/addon-view/hassio-addon-info.js

@@ -2,19 +2,19 @@ import "@polymer/iron-icon/iron-icon";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-tooltip/paper-tooltip";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/ha-label-badge";
 import "../../../src/components/ha-markdown";
 import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/ha-switch";
 import "../../../src/resources/ha-style";
+import "../components/hassio-card-content";
+
 import { EventsMixin } from "../../../src/mixins/events-mixin";
 import { navigate } from "../../../src/common/navigate";
-
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import "../components/hassio-card-content";
 
 const PERMIS_DESC = {
   rating: {
@@ -122,7 +122,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           width: 16px;
           color: var(--secondary-text-color);
         }
-        paper-toggle-button {
+        ha-switch {
           display: inline;
         }
         iron-icon.running {
@@ -348,44 +348,46 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           <template is="dom-if" if="[[addon.version]]">
             <div class="state">
               <div>Start on boot</div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="startOnBootToggled"
                 checked="[[computeStartOnBoot(addon.boot)]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
             <div class="state">
               <div>Auto update</div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="autoUpdateToggled"
                 checked="[[addon.auto_update]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
             <template is="dom-if" if="[[addon.ingress]]">
               <div class="state">
                 <div>Show in sidebar</div>
-                <paper-toggle-button
+                <ha-switch
                   on-change="panelToggled"
                   checked="[[addon.ingress_panel]]"
                   disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
-                ></paper-toggle-button>
+                ></ha-switch>
                 <template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
                   <span>This option requires Home Assistant 0.92 or later.</span>
                 </template>
               </div>
             </template>
-            <div class="state">
-              <div>
-                Protection mode
-                <span>
-                  <iron-icon icon="hassio:information"></iron-icon>
-                  <paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
-                </span>
+            <template is="dom-if" if="[[_computeUsesProtectedOptions(addon)]]">
+              <div class="state">
+                <div>
+                  Protection mode
+                  <span>
+                    <iron-icon icon="hassio:information"></iron-icon>
+                    <paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
+                  </span>
+                </div>
+                <ha-switch
+                  on-change="protectionToggled"
+                  checked="[[addon.protected]]"
+                ></ha-switch>
               </div>
-              <paper-toggle-button
-                on-change="protectionToggled"
-                checked="[[addon.protected]]"
-              ></paper-toggle-button>
-            </div>
+            </template>
           </template>
         </div>
         <div class="card-actions">
@@ -569,7 +571,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
   openChangelog() {
     this.hass
       .callApi("get", `hassio/addons/${this.addonSlug}/changelog`)
-      .then((resp) => resp, () => "Error getting changelog")
+      .then(
+        (resp) => resp,
+        () => "Error getting changelog"
+      )
       .then((content) => {
         showHassioMarkdownDialog(this, {
           title: "Changelog",
@@ -607,6 +612,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     return !addon.ingress || !this._computeHA92plus(hass);
   }
 
+  _computeUsesProtectedOptions(addon) {
+    return addon.docker_api || addon.full_access || addon.host_pid;
+  }
+
   _computeHA92plus(hass) {
     const [major, minor] = hass.config.version.split(".", 2);
     return Number(major) > 0 || (major === "0" && Number(minor) >= 92);

hassio/src/dashboard/hassio-dashboard.ts

@@ -8,26 +8,31 @@ import {
   customElement,
 } from "lit-element";
 import "./hassio-addons";
-import "./hassio-hass-update";
+import "./hassio-update";
 import { HomeAssistant } from "../../../src/types";
 import {
   HassioSupervisorInfo,
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
 } from "../../../src/data/hassio";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
   @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult | void {
     return html`
       <div class="content">
-        <hassio-hass-update
+        <hassio-update
           .hass=${this.hass}
           .hassInfo=${this.hassInfo}
-        ></hassio-hass-update>
+          .supervisorInfo=${this.supervisorInfo}
+          .hassOsInfo=${this.hassOsInfo}
+        ></hassio-update>
         <hassio-addons
           .hass=${this.hass}
           .addons=${this.supervisorInfo.addons}

hassio/src/dashboard/hassio-hass-update.js

@@ -1,96 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/components/buttons/ha-call-api-button";
-import "../components/hassio-card-content";
-import "../resources/hassio-style";
-
-class HassioHassUpdate extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="ha-style hassio-style">
-        paper-card {
-          display: block;
-          margin-bottom: 32px;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-top: 16px;
-        }
-        a {
-          color: var(--primary-color);
-        }
-      </style>
-      <template is="dom-if" if="[[computeUpdateAvailable(hassInfo)]]">
-        <div class="content">
-          <div class="card-group">
-            <paper-card heading="Update available! 🎉">
-              <div class="card-content">
-                Home Assistant [[hassInfo.last_version]] is available and you
-                are currently running Home Assistant [[hassInfo.version]].
-                <template is="dom-if" if="[[error]]">
-                  <div class="error">Error: [[error]]</div>
-                </template>
-              </div>
-              <div class="card-actions">
-                <ha-call-api-button
-                  hass="[[hass]]"
-                  path="hassio/homeassistant/update"
-                  >Update</ha-call-api-button
-                >
-                <a
-                  href="[[computeReleaseNotesUrl(hassInfo.version)]]"
-                  target="_blank"
-                >
-                  <mwc-button>Release notes</mwc-button>
-                </a>
-              </div>
-            </paper-card>
-          </div>
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      hassInfo: Object,
-      error: String,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
-  }
-
-  apiCalled(ev) {
-    if (ev.detail.success) {
-      this.errors = null;
-      return;
-    }
-
-    const response = ev.detail.response;
-
-    if (typeof response.body === "object") {
-      this.errors = response.body.message || "Unknown error";
-    } else {
-      this.errors = response.body;
-    }
-  }
-
-  computeUpdateAvailable(hassInfo) {
-    return hassInfo.version !== hassInfo.last_version;
-  }
-
-  computeReleaseNotesUrl(version) {
-    return `https://${
-      version.includes("b") ? "rc" : "www"
-    }.home-assistant.io/latest-release-notes/`;
-  }
-}
-
-customElements.define("hassio-hass-update", HassioHassUpdate);

hassio/src/dashboard/hassio-update.ts

@@ -0,0 +1,186 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+import "@polymer/iron-icon/iron-icon";
+
+import { HomeAssistant } from "../../../src/types";
+import {
+  HassioHomeAssistantInfo,
+  HassioHassOSInfo,
+  HassioSupervisorInfo,
+} from "../../../src/data/hassio";
+
+import { hassioStyle } from "../resources/hassio-style";
+
+import "@material/mwc-button";
+import "@polymer/paper-card/paper-card";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../components/hassio-card-content";
+
+@customElement("hassio-update")
+export class HassioUpdate extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public hassInfo: HassioHomeAssistantInfo;
+  @property() public hassOsInfo?: HassioHassOSInfo;
+  @property() public supervisorInfo: HassioSupervisorInfo;
+
+  @property() public error?: string;
+
+  protected render(): TemplateResult | void {
+    const updatesAvailable: number = [
+      this.hassInfo,
+      this.supervisorInfo,
+      this.hassOsInfo,
+    ].filter((value) => {
+      return !!value && value.version !== value.last_version;
+    }).length;
+
+    if (!updatesAvailable) {
+      return html``;
+    }
+
+    return html`
+      <div class="content">
+        ${this.error
+          ? html`
+              <div class="error">Error: ${this.error}</div>
+            `
+          : ""}
+        <div class="card-group">
+          <div class="title">
+            ${updatesAvailable > 1
+              ? "Updates Available 🎉"
+              : "Update Available 🎉"}
+          </div>
+          ${this._renderUpdateCard(
+            "Home Assistant",
+            this.hassInfo.version,
+            this.hassInfo.last_version,
+            "hassio/homeassistant/update",
+            `https://${
+              this.hassInfo.last_version.includes("b") ? "rc" : "www"
+            }.home-assistant.io/latest-release-notes/`,
+            "hassio:home-assistant"
+          )}
+          ${this._renderUpdateCard(
+            "Hass.io Supervisor",
+            this.supervisorInfo.version,
+            this.supervisorInfo.last_version,
+            "hassio/supervisor/update",
+            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.last_version}`
+          )}
+          ${this.hassOsInfo
+            ? this._renderUpdateCard(
+                "HassOS",
+                this.hassOsInfo.version,
+                this.hassOsInfo.version_latest,
+                "hassio/hassos/update",
+                `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
+              )
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderUpdateCard(
+    name: string,
+    curVersion: string,
+    lastVersion: string,
+    apiPath: string,
+    releaseNotesUrl: string,
+    icon?: string
+  ): TemplateResult {
+    if (lastVersion === curVersion) {
+      return html``;
+    }
+    return html`
+      <paper-card>
+        <div class="card-content">
+          ${icon
+            ? html`
+                <div class="icon">
+                  <iron-icon .icon="${icon}" />
+                </div>
+              `
+            : ""}
+          <div class="update-heading">${name} ${lastVersion}</div>
+          <div class="warning">
+            You are currently running version ${curVersion}
+          </div>
+        </div>
+        <div class="card-actions">
+          <a href="${releaseNotesUrl}" target="_blank">
+            <mwc-button>Release notes</mwc-button>
+          </a>
+          <ha-call-api-button
+            .hass=${this.hass}
+            .path=${apiPath}
+            @hass-api-called=${this._apiCalled}
+          >
+            Update
+          </ha-call-api-button>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  private _apiCalled(ev) {
+    if (ev.detail.success) {
+      this.error = "";
+      return;
+    }
+
+    const response = ev.detail.response;
+
+    typeof response.body === "object"
+      ? (this.error = response.body.message || "Unknown error")
+      : (this.error = response.body);
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      hassioStyle,
+      css`
+        :host {
+          width: 33%;
+        }
+        paper-card {
+          display: inline-block;
+          margin-bottom: 32px;
+        }
+        .icon {
+          --iron-icon-height: 48px;
+          --iron-icon-width: 48px;
+          float: right;
+          margin: 0 0 2px 10px;
+        }
+        .update-heading {
+          font-size: var(--paper-font-subhead_-_font-size);
+          font-weight: 500;
+          margin-bottom: 0.5em;
+        }
+        .warning {
+          color: var(--secondary-text-color);
+        }
+        .card-actions {
+          text-align: right;
+        }
+        .errors {
+          color: var(--google-red-500);
+          padding: 16px;
+        }
+        a {
+          text-decoration: none;
+        }
+      `,
+    ];
+  }
+}

hassio/src/dialogs/markdown/show-dialog-hassio-markdown.ts

@@ -12,7 +12,9 @@ export const showHassioMarkdownDialog = (
   fireEvent(element, "show-dialog", {
     dialogTag: "dialog-hassio-markdown",
     dialogImport: () =>
-      import(/* webpackChunkName: "dialog-hassio-markdown" */ "./dialog-hassio-markdown"),
+      import(
+        /* webpackChunkName: "dialog-hassio-markdown" */ "./dialog-hassio-markdown"
+      ),
     dialogParams,
   });
 };

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -3,6 +3,7 @@ import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -94,13 +95,23 @@ class HassioSnapshotDialog extends PolymerElement {
         .details {
           color: var(--secondary-text-color);
         }
-        .download {
-          color: var(--primary-color);
-        }
         .warning,
         .error {
           color: var(--google-red-500);
         }
+        .buttons {
+          display: flex;
+          flex-direction: column;
+        }
+        .buttons li {
+          list-style-type: none;
+        }
+        .buttons .icon {
+          margin-right: 16px;
+        }
+        .no-margin-top {
+          margin-top: 0;
+        }
       </style>
       <ha-paper-dialog
         id="dialog"
@@ -132,7 +143,7 @@ class HassioSnapshotDialog extends PolymerElement {
         </template>
         <template is="dom-if" if="[[_addons.length]]">
           <div>Add-ons:</div>
-          <paper-dialog-scrollable>
+          <paper-dialog-scrollable class="no-margin-top">
             <template is="dom-repeat" items="[[_addons]]" sort="_sortAddons">
               <paper-checkbox checked="{{item.checked}}">
                 [[item.name]] <span class="details">([[item.version]])</span>
@@ -151,28 +162,35 @@ class HassioSnapshotDialog extends PolymerElement {
         <template is="dom-if" if="[[error]]">
           <p class="error">Error: [[error]]</p>
         </template>
-        <div class="buttons">
-          <paper-icon-button
-            icon="hassio:delete"
-            on-click="_deleteClicked"
-            class="warning"
-            title="Delete snapshot"
-          ></paper-icon-button>
-          <paper-icon-button
-            on-click="_downloadClicked"
-            icon="hassio:download"
-            class="download"
-            title="Download snapshot"
-          ></paper-icon-button>
-          <mwc-button on-click="_partialRestoreClicked"
-            >Restore selected</mwc-button
-          >
+        <div>Actions:</div>
+        <ul class="buttons">
+          <li>
+            <mwc-button on-click="_downloadClicked">
+              <iron-icon icon="hassio:download" class="icon"></iron-icon>
+              Download Snapshot
+            </mwc-button>
+          </li>
+          <li>
+            <mwc-button on-click="_partialRestoreClicked">
+              <iron-icon icon="hassio:history" class="icon"> </iron-icon>
+              Restore Selected
+            </mwc-button>
+          </li>
           <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
-            <mwc-button on-click="_fullRestoreClicked"
-              >Wipe &amp; restore</mwc-button
-            >
+            <li>
+              <mwc-button on-click="_fullRestoreClicked">
+                <iron-icon icon="hassio:history" class="icon"> </iron-icon>
+                Wipe &amp; restore
+              </mwc-button>
+            </li>
           </template>
-        </div>
+          <li>
+            <mwc-button on-click="_deleteClicked">
+              <iron-icon icon="hassio:delete" class="icon warning"> </iron-icon>
+              <span class="warning">Delete Snapshot</span>
+            </mwc-button>
+          </li>
+        </ul>
       </ha-paper-dialog>
     `;
   }

hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot.ts

@@ -12,7 +12,9 @@ export const showHassioSnapshotDialog = (
   fireEvent(element, "show-dialog", {
     dialogTag: "dialog-hassio-snapshot",
     dialogImport: () =>
-      import(/* webpackChunkName: "dialog-hassio-snapshot" */ "./dialog-hassio-snapshot"),
+      import(
+        /* webpackChunkName: "dialog-hassio-snapshot" */ "./dialog-hassio-snapshot"
+      ),
     dialogParams,
   });
 };

hassio/src/hassio-main.ts

@@ -3,7 +3,7 @@ import { PolymerElement } from "@polymer/polymer";
 import "@polymer/paper-icon-button";
 
 import "../../src/resources/ha-style";
-import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
 import {
   HassRouterPage,
@@ -13,9 +13,11 @@ import { HomeAssistant } from "../../src/types";
 import {
   fetchHassioSupervisorInfo,
   fetchHassioHostInfo,
+  fetchHassioHassOsInfo,
   fetchHassioHomeAssistantInfo,
   HassioSupervisorInfo,
   HassioHostInfo,
+  HassioHassOSInfo,
   HassioHomeAssistantInfo,
   fetchHassioAddonInfo,
   createHassioSession,
@@ -25,6 +27,7 @@ import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./hassio-pages-with-tabs";
+import { navigate } from "../../src/common/navigate";
 
 // The register callback of the IronA11yKeysBehavior inside paper-icon-button
 // is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
@@ -54,18 +57,23 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       addon: {
         tag: "hassio-addon-view",
         load: () =>
-          import(/* webpackChunkName: "hassio-addon-view" */ "./addon-view/hassio-addon-view"),
+          import(
+            /* webpackChunkName: "hassio-addon-view" */ "./addon-view/hassio-addon-view"
+          ),
       },
       ingress: {
         tag: "hassio-ingress-view",
         load: () =>
-          import(/* webpackChunkName: "hassio-ingress-view" */ "./ingress-view/hassio-ingress-view"),
+          import(
+            /* webpackChunkName: "hassio-ingress-view" */ "./ingress-view/hassio-ingress-view"
+          ),
       },
     },
   };
 
   @property() private _supervisorInfo: HassioSupervisorInfo;
   @property() private _hostInfo: HassioHostInfo;
+  @property() private _hassOsInfo?: HassioHassOSInfo;
   @property() private _hassInfo: HassioHomeAssistantInfo;
 
   protected firstUpdated(changedProps: PropertyValues) {
@@ -113,6 +121,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
         supervisorInfo: this._supervisorInfo,
         hostInfo: this._hostInfo,
         hassInfo: this._hassInfo,
+        hassOsInfo: this._hassOsInfo,
         route,
       });
     } else {
@@ -121,6 +130,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       el.supervisorInfo = this._supervisorInfo;
       el.hostInfo = this._hostInfo;
       el.hassInfo = this._hassInfo;
+      el.hassOsInfo = this._hassOsInfo;
       el.route = route;
     }
   }
@@ -139,6 +149,10 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
     this._supervisorInfo = supervisorInfo;
     this._hostInfo = hostInfo;
     this._hassInfo = hassInfo;
+
+    if (this._hostInfo.features && this._hostInfo.features.includes("hassos")) {
+      this._hassOsInfo = await fetchHassioHassOsInfo(this.hass);
+    }
   }
 
   private async _redirectIngress(addonSlug: string) {
@@ -152,14 +166,20 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
         }),
       ]);
       if (!addon.ingress_url) {
-        throw new Error("Add-on does not support Ingress");
+        alert("Add-on does not support Ingress");
+        return;
+      }
+      if (addon.state !== "started") {
+        alert("Add-on is not running. Please start it first");
+        navigate(this, `/hassio/addon/${addon.slug}`, true);
+        return;
       }
       location.assign(addon.ingress_url);
       // await a promise that doesn't resolve, so we show the loading screen
       // while we load the next page.
       await new Promise(() => undefined);
     } catch (err) {
-      alert(`Unable to open ingress connection `);
+      alert("Unable to open ingress connection");
     }
   }
 

hassio/src/hassio-pages-with-tabs.ts

@@ -27,6 +27,7 @@ import {
   HassioSupervisorInfo,
   HassioHostInfo,
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
 } from "../../src/data/hassio";
 
 const HAS_REFRESH_BUTTON = ["store", "snapshots"];
@@ -39,6 +40,7 @@ class HassioPagesWithTabs extends LitElement {
   @property() public supervisorInfo!: HassioSupervisorInfo;
   @property() public hostInfo!: HassioHostInfo;
   @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult | void {
     const page = this._page;
@@ -79,6 +81,7 @@ class HassioPagesWithTabs extends LitElement {
           .supervisorInfo=${this.supervisorInfo}
           .hostInfo=${this.hostInfo}
           .hassInfo=${this.hassInfo}
+          .hassOsInfo=${this.hassOsInfo}
         ></hassio-tabs-router>
       </app-header-layout>
     `;

hassio/src/hassio-tabs-router.ts

@@ -15,6 +15,7 @@ import {
   HassioSupervisorInfo,
   HassioHostInfo,
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
 } from "../../src/data/hassio";
 
 @customElement("hassio-tabs-router")
@@ -23,6 +24,7 @@ class HassioTabsRouter extends HassRouterPage {
   @property() public supervisorInfo: HassioSupervisorInfo;
   @property() public hostInfo: HassioHostInfo;
   @property() public hassInfo: HassioHomeAssistantInfo;
+  @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected routerOptions: RouterOptions = {
     routes: {
@@ -49,12 +51,14 @@ class HassioTabsRouter extends HassRouterPage {
         supervisorInfo: this.supervisorInfo,
         hostInfo: this.hostInfo,
         hassInfo: this.hassInfo,
+        hassOsInfo: this.hassOsInfo,
       });
     } else {
       el.hass = this.hass;
       el.supervisorInfo = this.supervisorInfo;
       el.hostInfo = this.hostInfo;
       el.hassInfo = this.hassInfo;
+      el.hassOsInfo = this.hassOsInfo;
     }
   }
 }

hassio/src/system/hassio-host-info.js

@@ -107,7 +107,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
               >Import from USB</ha-call-api-button
             >
           </template>
-          <template is="dom-if" if="[[_computeUpdateAvailable(_hassOs)]]">
+          <template is="dom-if" if="[[_computeUpdateAvailable(hassOsInfo)]]">
             <ha-call-api-button hass="[[hass]]" path="hassio/hassos/update"
               >Update</ha-call-api-button
             >
@@ -120,12 +120,9 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
   static get properties() {
     return {
       hass: Object,
-      data: {
-        type: Object,
-        observer: "_dataChanged",
-      },
+      data: Object,
+      hassOsInfo: Object,
       errors: String,
-      _hassOs: Object,
     };
   }
 
@@ -149,16 +146,6 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
     }
   }
 
-  _dataChanged(data) {
-    if (data.features && data.features.includes("hassos")) {
-      this.hass.callApi("get", "hassio/hassos/info").then((resp) => {
-        this._hassOs = resp.data;
-      });
-    } else {
-      this._hassOs = {};
-    }
-  }
-
   _computeUpdateAvailable(data) {
     return data && data.version !== data.version_latest;
   }

hassio/src/system/hassio-system.js

@@ -30,6 +30,7 @@ class HassioSystem extends PolymerElement {
         <hassio-host-info
           hass="[[hass]]"
           data="[[hostInfo]]"
+          hass-os-info="[[hassOsInfo]]"
         ></hassio-host-info>
         <div class="title">System log</div>
         <hassio-supervisor-log hass="[[hass]]"></hassio-supervisor-log>
@@ -42,6 +43,7 @@ class HassioSystem extends PolymerElement {
       hass: Object,
       supervisorInfo: Object,
       hostInfo: Object,
+      hassOsInfo: Object,
     };
   }
 }

hassio/webpack.config.js

@@ -1,75 +1,11 @@
-const webpack = require("webpack");
-const CompressionPlugin = require("compression-webpack-plugin");
-const zopfli = require("@gfx/zopfli");
+const { createHassioConfig } = require("../build-scripts/webpack.js");
+const { isProdBuild } = require("../build-scripts/env.js");
 
-const config = require("./config.js");
-const webpackBase = require("../build-scripts/webpack.js");
+// File just used for stats builds
 
-const isProdBuild = process.env.NODE_ENV === "production";
-const isCI = process.env.CI === "true";
-const chunkFilename = isProdBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
 const latestBuild = false;
 
-module.exports = {
-  mode: isProdBuild ? "production" : "development",
-  devtool: isProdBuild ? "source-map" : "inline-source-map",
-  entry: {
-    entrypoint: "./src/entrypoint.js",
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: "ts-loader",
-            options: {
-              compilerOptions: latestBuild
-                ? { noEmit: false }
-                : { target: "es5", noEmit: false },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: "html-loader",
-          options: {
-            exportAsEs6Default: true,
-          },
-        },
-      },
-    ],
-  },
-  optimization: webpackBase.optimization(latestBuild),
-  plugins: [
-    new webpack.DefinePlugin({
-      __DEV__: JSON.stringify(!isProdBuild),
-      __DEMO__: false,
-      __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-      "process.env.NODE_ENV": JSON.stringify(
-        isProdBuild ? "production" : "development"
-      ),
-    }),
-    isProdBuild &&
-      !isCI &&
-      new CompressionPlugin({
-        cache: true,
-        exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
-        algorithm(input, compressionOptions, callback) {
-          return zopfli.gzip(input, compressionOptions, callback);
-        },
-      }),
-  ].filter(Boolean),
-  resolve: {
-    extensions: [".ts", ".js", ".json"],
-  },
-  output: {
-    filename: "[name].js",
-    chunkFilename,
-    path: config.buildDir,
-    publicPath: `${config.publicPath}/`,
-  },
-};
+module.exports = createHassioConfig({
+  isProdBuild,
+  latestBuild,
+});

mdc-data-table/CHANGELOG.md

@@ -1,32 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [3.1.1](https://github.com/material-components/material-components-web/compare/v3.1.0...v3.1.1) (2019-08-14)
-
-### Bug Fixes
-
-- **data-table:** Fixed alignment of header cell title for numer… ([#4963](https://github.com/material-components/material-components-web/issues/4963)) ([b6274a7](https://github.com/material-components/material-components-web/commit/b6274a7))
-
-# [4.0.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.1.0...v4.0.0-alpha.0) (2019-08-07)
-
-**Note:** Version bump only for package @material/data-table
-
-# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-22)
-
-### Features
-
-- **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
-
-# [3.1.0-alpha.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0-alpha.0) (2019-07-16)
-
-### Features
-
-- **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))
-
-# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-16)
-
-### Features
-
-- **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))

mdc-data-table/LICENSE

@@ -1,21 +0,0 @@
-The MIT License
-
-Copyright (c) 2014-2019 Google, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

mdc-data-table/README.md

@@ -1,411 +0,0 @@
-<!--docs:
-title: "Data Tables"
-layout: detail
-section: components
-excerpt: "Material Design-styled tables."
-iconId: data_table
-path: /catalog/data-tables/
--->
-
-# Data Table
-
-Data tables display information in a grid-like format of rows and columns. They organize information in a way that's
-easy to scan, so that users can look for patterns and insights.
-
-## Design & API Documentation
-
-<ul class="icon-list">
-  <li class="icon-list-item icon-list-item--spec">
-    <a href="https://material.io/go/design-data-tables">Material Design guidelines: Data tables</a>
-  </li>
-  <li class="icon-list-item icon-list-item--link">
-    <a href="https://material-components.github.io/material-components-web-catalog/#/component/data-table">Demo</a>
-  </li>
-</ul>
-
-## Installation
-
-```
-npm install @material/data-table
-```
-
-### Styles
-
-```scss
-@import "@material/checkbox/mdc-checkbox"; // Required only for data table with row selection.
-@import "@material/data-table/mdc-data-table";
-```
-
-> _NOTE_: Styles for any components you intend to include within data-table (e.g. Checkboxes, Buttons etc.) must be
-> imported.
-
-### JavaScript Instantiation
-
-```js
-import { MDCDataTable } from "@material/data-table";
-const dataTable = new MDCDataTable(document.querySelector(".mdc-data-table"));
-```
-
-> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
-
-> Instantiating `MDCDataTable` component is only required to add interactions for example, row selection.
-
-MDC Data Table component auto instantiates `MDCCheckbox` for header row checkbox and all row checkboxes. Make sure to set required class names to instantiate checkbox component. We suggest to use `layout` API when rows are added or removed from data table to register new checkbox components.
-
-## Basic Usage
-
-### HTML Structure
-
-```html
-<div class="mdc-data-table">
-  <table class="mdc-data-table__table" aria-label="Dessert calories">
-    <thead>
-      <tr class="mdc-data-table__header-row">
-        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-          Dessert
-        </th>
-        <th
-          class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
-          role="columnheader"
-          scope="col"
-        >
-          Carbs (g)
-        </th>
-        <th
-          class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
-          role="columnheader"
-          scope="col"
-        >
-          Protein (g)
-        </th>
-        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-          Comments
-        </th>
-      </tr>
-    </thead>
-    <tbody class="mdc-data-table__content">
-      <tr class="mdc-data-table__row">
-        <td class="mdc-data-table__cell">Frozen yogurt</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
-        <td class="mdc-data-table__cell">Super tasty</td>
-      </tr>
-      <tr class="mdc-data-table__row">
-        <td class="mdc-data-table__cell">Ice cream sandwich</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
-          4.33333333333
-        </td>
-        <td class="mdc-data-table__cell">I like ice cream more</td>
-      </tr>
-      <tr class="mdc-data-table__row">
-        <td class="mdc-data-table__cell">Eclair</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
-        <td class="mdc-data-table__cell">New filing flavor</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-```
-
-## Variants
-
-### Data table with row selection
-
-```html
-<div class="mdc-data-table">
-  <table class="mdc-data-table__table" aria-label="Dessert calories">
-    <thead>
-      <tr class="mdc-data-table__header-row">
-        <th
-          class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
-          role="columnheader"
-          scope="col"
-        >
-          <div
-            class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected"
-          >
-            <input
-              type="checkbox"
-              class="mdc-checkbox__native-control"
-              aria-label="Checkbox for header row selection"
-            />
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
-                <path
-                  class="mdc-checkbox__checkmark-path"
-                  fill="none"
-                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
-                />
-              </svg>
-              <div class="mdc-checkbox__mixedmark"></div>
-            </div>
-          </div>
-        </th>
-        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-          Status
-        </th>
-        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-          Signal name
-        </th>
-        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-          Severity
-        </th>
-        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-          Stage
-        </th>
-        <th
-          class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
-          role="columnheader"
-          scope="col"
-        >
-          Time
-        </th>
-        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-          Roles
-        </th>
-      </tr>
-    </thead>
-    <tbody class="mdc-data-table__content">
-      <tr data-row-id="u0" class="mdc-data-table__row">
-        <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
-          <div class="mdc-checkbox mdc-data-table__row-checkbox">
-            <input
-              type="checkbox"
-              class="mdc-checkbox__native-control"
-              aria-labelledby="u0"
-            />
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
-                <path
-                  class="mdc-checkbox__checkmark-path"
-                  fill="none"
-                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
-                />
-              </svg>
-              <div class="mdc-checkbox__mixedmark"></div>
-            </div>
-          </div>
-        </td>
-        <td class="mdc-data-table__cell">Online</td>
-        <td class="mdc-data-table__cell" id="u0">Arcus watch slowdown</td>
-        <td class="mdc-data-table__cell">Medium</td>
-        <td class="mdc-data-table__cell">Triaged</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
-        <td class="mdc-data-table__cell">Allison Brie</td>
-      </tr>
-      <tr
-        data-row-id="u1"
-        class="mdc-data-table__row mdc-data-table__row--selected"
-        aria-selected="true"
-      >
-        <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
-          <div
-            class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected"
-          >
-            <input
-              type="checkbox"
-              class="mdc-checkbox__native-control"
-              checked
-              aria-labelledby="u1"
-            />
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
-                <path
-                  class="mdc-checkbox__checkmark-path"
-                  fill="none"
-                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
-                />
-              </svg>
-              <div class="mdc-checkbox__mixedmark"></div>
-            </div>
-          </div>
-        </td>
-        <td class="mdc-data-table__cell">Offline</td>
-        <td class="mdc-data-table__cell" id="u1">
-          monarch: prod shared ares-managed-features-provider-heavy
-        </td>
-        <td class="mdc-data-table__cell">Huge</td>
-        <td class="mdc-data-table__cell">Triaged</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
-        <td class="mdc-data-table__cell">Brie Larson</td>
-      </tr>
-      <tr
-        data-row-id="u2"
-        class="mdc-data-table__row mdc-data-table__row--selected"
-        aria-selected="true"
-      >
-        <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
-          <div
-            class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected"
-          >
-            <input
-              type="checkbox"
-              class="mdc-checkbox__native-control"
-              checked
-              aria-labelledby="u2"
-            />
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
-                <path
-                  class="mdc-checkbox__checkmark-path"
-                  fill="none"
-                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
-                />
-              </svg>
-              <div class="mdc-checkbox__mixedmark"></div>
-            </div>
-          </div>
-        </td>
-        <td class="mdc-data-table__cell">Online</td>
-        <td class="mdc-data-table__cell" id="u2">
-          monarch: prod shared ares-managed-features-provider-heavy
-        </td>
-        <td class="mdc-data-table__cell">Minor</td>
-        <td class="mdc-data-table__cell">Not triaged</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
-        <td class="mdc-data-table__cell">Jeremy Lake</td>
-      </tr>
-      <tr data-row-id="u3" class="mdc-data-table__row">
-        <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
-          <div class="mdc-checkbox mdc-data-table__row-checkbox">
-            <input
-              type="checkbox"
-              class="mdc-checkbox__native-control"
-              aria-labelledby="u3"
-            />
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
-                <path
-                  class="mdc-checkbox__checkmark-path"
-                  fill="none"
-                  d="M1.73,12.91 8.1,19.28 22.79,4.59"
-                />
-              </svg>
-              <div class="mdc-checkbox__mixedmark"></div>
-            </div>
-          </div>
-        </td>
-        <td class="mdc-data-table__cell">Online</td>
-        <td class="mdc-data-table__cell" id="u3">Arcus watch slowdown</td>
-        <td class="mdc-data-table__cell">Negligible</td>
-        <td class="mdc-data-table__cell">Triaged</td>
-        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
-        <td class="mdc-data-table__cell">Angelina Cheng</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-```
-
-## Style Customization
-
-### CSS Classes
-
-| CSS Class                               | Description                                                                                                                                                    |
-| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mdc-data-table`                        | Mandatory. The root DOM element containing `table` and other supporting elements.                                                                              |
-| `mdc-data-table__table`                 | Mandatory. Table element. Added to `table` HTML tag.                                                                                                           |
-| `mdc-data-table__header-row`            | Mandatory. Table header row element. Added to `thead > tr` HTML tag.                                                                                           |
-| `mdc-data-table__header-cell`           | Mandatory. Table header cell element. Added to `thead > th > td` HTML tag.                                                                                     |
-| `mdc-data-table__header-cell--checkbox` | Optional. Table header cell element that contains `mdc-checkbox`. Added to `thead> th > td:first-child` HTML tag.                                              |
-| `mdc-data-table__header-cell--numeric`  | Optional. Table header cell element that maps to numeric cells. Added to `thead > th > td` HTML tag.                                                           |
-| `mdc-data-table__content`               | Mandatory. Table body element. Added to `tbody` HTML tag.                                                                                                      |
-| `mdc-data-table__row`                   | Mandatory. Table row element. Added to `tbody > tr` HTML tag.                                                                                                  |
-| `mdc-data-table__cell`                  | Mandatory. Table cell element. Added to `tbody > tr > td` HTML tag.                                                                                            |
-| `mdc-data-table__cell--numeric`         | Optional. Table cell element that contains numeric data. Added to `tbody > tr > td` HTML tag.                                                                  |
-| `mdc-data-table__cell--checkbox`        | Optional. Table cell element that contains `mdc-checkbox`. Added to `thead> th > td:first-child` HTML tag.                                                     |
-| `mdc-data-table__header-row-checkbox`   | Optional. Checkbox element rendered inside table header row element. Add this class name to `mdc-checkbox` element to override styles required for data-table. |
-| `mdc-data-table__row-checkbox`          | Optional. Checkbox element rendered inside table row element. Add this class name to `mdc-checkbox` element to override styles required for data-table.        |
-| `mdc-data-table__row--selected`         | Optional. Modifier class added to `mdc-data-table__row` when table row is selected.                                                                            |
-
-### Sass Mixins
-
-| Mixin                                                              | Description                                                                                                            |
-| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| `mdc-data-table-fill-color($color)`                                | Sets the background color of data-table surface.                                                                       |
-| `mdc-data-table-row-fill-color($color)`                            | Sets the background color of table row container.                                                                      |
-| `mdc-data-table-header-row-fill-color($color)`                     | Sets the background color of table header row container.                                                               |
-| `mdc-data-table-selected-row-fill-color($color)`                   | Sets the background color of selected row container.                                                                   |
-| `mdc-data-table-checked-icon-color($color)`                        | Sets the checked icon color.                                                                                           |
-| `mdc-data-table-divider-color($color)`                             | Sets the table rows divider color.                                                                                     |
-| `mdc-data-table-divider-size($size)`                               | Sets the table rows divider size.                                                                                      |
-| `mdc-data-table-row-hover-fill-color($color)`                      | Sets the background color of table row on hover.                                                                       |
-| `mdc-data-table-header-row-text-color($color)`                     | Sets the header row text color.                                                                                        |
-| `mdc-data-table-row-text-color($color)`                            | Sets the row text color.                                                                                               |
-| `mdc-data-table-shape-radius($radius)`                             | Sets the rounded shape with given radius size. `$radius` can be single radius or list radius values up to 4 list size. |
-| `mdc-data-table-stroke-size($size)`                                | Sets the border size of data-table.                                                                                    |
-| `mdc-data-table-stroke-color($color)`                              | Sets the border color of data-table.                                                                                   |
-| `mdc-data-table-header-row-height($height)`                        | Sets the header row height.                                                                                            |
-| `mdc-data-table-row-height($height)`                               | Sets row height.                                                                                                       |
-| `mdc-data-table-cell-padding($leading-padding, $trailing-padding)` | Sets leading & trailing padding for all cells.                                                                         |
-| `mdc-data-table-column-widths($width-list)`                        | Sets the custom widths for each table column.                                                                          |
-
-## Accessibility
-
-Please refer [WAI-ARIA Authoring Practices for table](https://www.w3.org/TR/wai-aria-practices-1.1/#table) for ARIA recommended role, states & properties required for table element.
-
-## Events
-
-Please use MDCDataTable's constants file to access these event constants.
-
-```ts
-const {events} from '@material/data-table/constants';
-// `events.ROW_SELECTION_CHANGED` to access event constant.
-```
-
-| Event constant          | Event name                   | Description                                              |
-| ----------------------- | ---------------------------- | -------------------------------------------------------- |
-| `ROW_SELECTION_CHANGED` | `MDCDataTable:changed`       | Event emitted when row checkbox is checked or unchecked. |
-| `SELECTED_ALL`          | `MDCDataTable:selectedAll`   | Event emitted when header row checkbox is checked.       |
-| `UNSELECTED_ALL`        | `MDCDataTable:unselectedAll` | Event emitted when header row checkbox is unchecked.     |
-
-## `MDCDataTable` Properties and Methods
-
-| Method Signature                               | Description                                                                                                                                             |
-| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `layout() => void`                             | Registers new row checkboxes, header row checkbox and updates the state of header row checkbox. Use this when rows are added / removed from data table. |
-| `getRows() => HTMLElement[]`                   | Returns array of row elements.                                                                                                                          |
-| `getSelectedRowIds() => Array<string \| null>` | Returns array of selected row ids.                                                                                                                      |
-| `setSelectedRowIds(rowIds: string[])`          | Sets selected row ids. Overwrites previously selected rows.                                                                                             |
-
-## Usage within Web Frameworks
-
-If you are using a JavaScript framework, such as React or Angular, you can create a Data Table for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
-
-### `MDCDataTableAdapter`
-
-| Method Signature                                                                      | Description                                                                                                                                                                                                                       |
-| ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `addClassAtRowIndex(rowIndex: number, cssClasses: string) => void`                    | Adds a class name to row element at given row index excluding header row.                                                                                                                                                         |
-| `getRowCount() => number`                                                             | Returns row count excluding header row.                                                                                                                                                                                           |
-| `getRowElements() => HTMLElement[]`                                                   | Returns array of row elements excluding header row.                                                                                                                                                                               |
-| `getRowIdAtIndex(rowIndex: number) => string \| null`                                 | Returns row id of row element at given row index based on `data-row-id` attribute on row element `tr`.                                                                                                                            |
-| `getRowIndexByChildElement(el: Element) => number`                                    | Returns index of row element that contains give child element.                                                                                                                                                                    |
-| `getSelectedRowCount() => number`                                                     | Returns selected row count.                                                                                                                                                                                                       |
-| `isCheckboxAtRowIndexChecked(rowIndex: number) => boolean;`                           | Returns True if row checkbox at given row index is checked.                                                                                                                                                                       |
-| `isHeaderRowCheckboxChecked() => boolean`                                             | Returns true if header row checkbox is checked.                                                                                                                                                                                   |
-| `isRowsSelectable() => boolean`                                                       | Returns true if table rows are selectable.                                                                                                                                                                                        |
-| `notifyRowSelectionChanged(data: MDCDataTableRowSelectionChangedEventDetail) => void` | Notifies when row selection is changed.                                                                                                                                                                                           |
-| `notifySelectedAll() => void`                                                         | Notifies when header row is checked.                                                                                                                                                                                              |
-| `notifyUnselectedAll() => void`                                                       | Notifies when header row is unchecked.                                                                                                                                                                                            |
-| `registerHeaderRowCheckbox() => Promise<void> \| void`                                | Initializes header row checkbox. Destroys previous header row checkbox instance if any. Can return Promise only if registering checkbox is asynchronous.                                                                          |
-| `registerRowCheckboxes() => Promise<void> \| void`                                    | Initializes all row checkboxes. Destroys all previous row checkbox instances if any. This is usually called when row checkboxes are added or removed from table. Can return Promise only if registering checkbox is asynchronous. |
-| `removeClassAtRowIndex(rowIndex: number, cssClasses: string) => void`                 | Removes class name from row element at give row index.                                                                                                                                                                            |
-| `setAttributeAtRowIndex(rowIndex: number, attr: string, value: string) => void`       | Sets attribute to row element at given row index.                                                                                                                                                                                 |
-| `setHeaderRowCheckboxChecked(checked: boolean) => void`                               | Sets header row checkbox checked or unchecked.                                                                                                                                                                                    |
-| `setHeaderRowCheckboxIndeterminate(indeterminate: boolean) => void`                   | Sets header row checkbox to indeterminate.                                                                                                                                                                                        |
-| `setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean) => void`            | Sets row checkbox to checked or unchecked at given row index.                                                                                                                                                                     |
-
-### `MDCDataTableFoundation`
-
-| Method Signature                                | Description                                                                                                                                                                                             |
-| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `layout() => void`                              | Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. Use this if registering checkbox is synchronous.                                            |
-| `layoutAsync() => Promise<void> \| void`        | Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. Use this only if `registerRowCheckboxes` and `registerHeaderRowCheckboxe` are asynchronous. |
-| `getRows() => HTMLElement[]`                    | Returns array of row elements.                                                                                                                                                                          |
-| `setSelectedRowIds(rowIds: string[]) => void`   | Sets selected row ids. Overwrites previously selected rows.                                                                                                                                             |
-| `getSelectedRowIds() => Array<string \| null>`  | Returns array of selected row ids.                                                                                                                                                                      |
-| `handleHeaderRowCheckboxChange() => void`       | Handles header row checkbox change event.                                                                                                                                                               |
-| `handleRowCheckboxChange(event: Event) => void` | Handles change event originated from row checkboxes.                                                                                                                                                    |

mdc-data-table/_mixins.scss

@@ -1,306 +0,0 @@
-//
-// Copyright 2019 Google Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-//
-
-@import "@material/animation/functions";
-@import "@material/elevation/mixins";
-@import "@material/feature-targeting/functions";
-@import "@material/feature-targeting/mixins";
-@import "@material/checkbox/mixins";
-@import "@material/rtl/mixins";
-@import "@material/shape/mixins";
-@import "@material/theme/mixins";
-@import "@material/theme/variables"; // for mdc-theme-prop-value.
-@import "@material/typography/mixins";
-@import "./variables";
-
-@mixin mdc-data-table-core-styles($query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-  $feat-typography: mdc-feature-create-target($query, typography);
-
-  // postcss-bem-linter: define data-table
-
-  .mdc-data-table__content {
-    @include mdc-typography(body2, $query: $query);
-  }
-
-  .mdc-data-table {
-    @include mdc-data-table-fill-color($mdc-data-table-fill-color, $query: $query);
-    @include mdc-data-table-shape-radius($mdc-data-table-shape-radius, $query: $query);
-    @include mdc-data-table-stroke-size($mdc-data-table-stroke-size, $query: $query);
-    @include mdc-data-table-stroke-color($mdc-data-table-stroke-color, $query: $query);
-
-    @at-root {
-      @include mdc-data-table-row-fill-color($mdc-data-table-row-fill-color, $query: $query);
-      @include mdc-data-table-header-row-fill-color($mdc-data-table-header-row-fill-color, $query: $query);
-      @include mdc-data-table-selected-row-fill-color($mdc-data-table-selected-row-fill-color, $query: $query);
-      @include mdc-data-table-divider-color($mdc-data-table-divider-color, $query: $query);
-      @include mdc-data-table-divider-size($mdc-data-table-divider-size, $query: $query);
-      @include mdc-data-table-row-hover-fill-color($mdc-data-table-row-hover-fill-color, $query: $query);
-      @include mdc-data-table-header-row-text-color($mdc-data-table-header-row-text-color, $query: $query);
-      @include mdc-data-table-row-text-color($mdc-data-table-row-text-color, $query: $query);
-      @include mdc-data-table-header-row-height($mdc-data-table-header-row-height, $query: $query);
-      @include mdc-data-table-row-height($mdc-data-table-row-height, $query: $query);
-      @include mdc-data-table-cell-padding(
-        $leading-padding: $mdc-data-table-cell-leading-padding,
-        $trailing-padding: $mdc-data-table-cell-trailing-padding,
-        $query: $query
-      );
-    }
-
-    @include mdc-feature-targets($feat-structure) {
-      display: inline-flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      overflow-x: auto;
-    }
-  }
-
-  .mdc-data-table__table {
-    @include mdc-feature-targets($feat-structure) {
-      width: 100%;
-      border: 0;
-      white-space: nowrap;
-      border-collapse: collapse;
-    }
-  }
-
-  .mdc-data-table__cell {
-    @include mdc-typography(body2, $query: $query);
-  }
-
-  .mdc-data-table__cell--numeric {
-    @include mdc-feature-targets($feat-structure) {
-      text-align: right;
-    }
-
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-rtl {
-        /* @noflip */
-        text-align: left;
-      }
-    }
-  }
-
-  .mdc-data-table__header-cell {
-    @include mdc-typography(subtitle2, $query: $query);
-
-    @include mdc-feature-targets($feat-structure) {
-      text-align: left;
-    }
-
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-rtl {
-        /* @noflip */
-        text-align: right;
-      }
-    }
-  }
-
-  .mdc-data-table__header-cell--numeric {
-    @include mdc-feature-targets($feat-structure) {
-      text-align: right;
-    }
-
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-rtl {
-        /* @noflip */
-        text-align: left;
-      }
-    }
-  }
-}
-
-@mixin mdc-data-table-fill-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  @include mdc-feature-targets($feat-color) {
-    @include mdc-theme-prop("background-color", $color);
-  }
-}
-
-@mixin mdc-data-table-header-row-fill-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  .mdc-data-table__header-row {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop("background-color", $color);
-    }
-  }
-}
-
-@mixin mdc-data-table-row-fill-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  .mdc-data-table__row {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop("background-color", $color);
-    }
-  }
-}
-
-@mixin mdc-data-table-selected-row-fill-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  .mdc-data-table__row--selected {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop("background-color", $color);
-    }
-  }
-}
-
-@mixin mdc-data-table-checked-icon-color($color, $query: mdc-feature-all()) {
-  .mdc-data-table__header-row-checkbox,
-  .mdc-data-table__row-checkbox {
-    @include mdc-checkbox-focus-indicator-color($color, $query: $query);
-    @include mdc-checkbox-container-colors($marked-stroke-color: $color, $marked-fill-color: $color, $query: $query);
-  }
-}
-
-@mixin mdc-data-table-divider-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  .mdc-data-table__row {
-    @include mdc-feature-targets($feat-color) {
-      border-top-color: $color;
-    }
-  }
-}
-
-@mixin mdc-data-table-divider-size($size, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  .mdc-data-table__row {
-    @include mdc-feature-targets($feat-structure) {
-      border-top-width: $size;
-      border-top-style: solid;
-    }
-  }
-}
-
-@mixin mdc-data-table-row-hover-fill-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop("background-color", $color);
-    }
-  }
-}
-
-@mixin mdc-data-table-header-row-text-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  .mdc-data-table__header-cell {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop("color", $color);
-    }
-  }
-}
-
-@mixin mdc-data-table-row-text-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  .mdc-data-table__cell {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop("color", $color);
-    }
-  }
-}
-
-@mixin mdc-data-table-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
-}
-
-@mixin mdc-data-table-stroke-size($size, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    border-width: $size;
-    border-style: solid;
-  }
-}
-
-@mixin mdc-data-table-stroke-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  @include mdc-feature-targets($feat-color) {
-    border-color: $color;
-  }
-}
-
-@mixin mdc-data-table-header-row-height($height, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  .mdc-data-table__header-row {
-    @include mdc-feature-targets($feat-structure) {
-      height: $height;
-    }
-  }
-}
-
-@mixin mdc-data-table-row-height($height, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  .mdc-data-table__row {
-    @include mdc-feature-targets($feat-structure) {
-      height: $height;
-    }
-  }
-}
-
-@mixin mdc-data-table-cell-padding(
-  $leading-padding: $mdc-data-table-cell-leading-padding,
-  $trailing-padding: $mdc-data-table-cell-trailing-padding,
-  $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  .mdc-data-table__cell,
-  .mdc-data-table__header-cell {
-    @include mdc-feature-targets($feat-structure) {
-      padding-right: $trailing-padding;
-      padding-left: $leading-padding;
-    }
-  }
-
-  .mdc-data-table__header-cell--checkbox,
-  .mdc-data-table__cell--checkbox {
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-rtl-reflexive-property(padding, $leading-padding, 0);
-    }
-  }
-}
-
-@mixin mdc-data-table-column-widths($width-list, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @for $i from 1 through length($width-list) {
-    .mdc-data-table__row > :nth-child(#{$i}) {
-      @include mdc-feature-targets($feat-structure) {
-        width: nth($width-list, $i);
-      }
-    }
-  }
-}
-
-@mixin mdc-data-table-theme-baseline($query: mdc-feature-all()) {
-  @include mdc-data-table-checked-icon-color($mdc-data-table-checked-icon-color, $query: $query);
-}

mdc-data-table/_variables.scss

@@ -1,46 +0,0 @@
-//
-// Copyright 2019 Google Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-//
-
-@import "@material/theme/functions";
-
-$mdc-data-table-fill-color: surface !default;
-$mdc-data-table-header-row-fill-color: inherit !default;
-$mdc-data-table-row-fill-color: inherit !default;
-$mdc-data-table-selected-row-fill-color: rgba(mdc-theme-prop-value(primary), .04) !default;
-
-$mdc-data-table-checked-icon-color: primary !default;
-$mdc-data-table-divider-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
-$mdc-data-table-divider-size: 1px !default;
-$mdc-data-table-row-hover-fill-color: rgba(mdc-theme-prop-value(on-surface), .04) !default;
-$mdc-data-table-checkbox-touch-dimension: 48px !default;
-
-$mdc-data-table-header-row-text-color: rgba(mdc-theme-prop-value(on-surface), .87) !default;
-$mdc-data-table-row-text-color: rgba(mdc-theme-prop-value(on-surface), .87) !default;
-
-$mdc-data-table-shape-radius: medium !default;
-$mdc-data-table-stroke-size: 1px !default;
-$mdc-data-table-stroke-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
-
-$mdc-data-table-row-height: 52px !default;
-$mdc-data-table-header-row-height: $mdc-data-table-row-height + 4px !default;
-$mdc-data-table-cell-leading-padding: 16px !default;
-$mdc-data-table-cell-trailing-padding: 16px !default;

mdc-data-table/adapter.d.ts

@@ -1,140 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-/**
- * Defines the shape of the adapter expected by the foundation.
- * Implement this adapter for your framework of choice to delegate updates to
- * the component in your framework of choice. See architecture documentation
- * for more details.
- * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
- */
-import { MDCDataTableRowSelectionChangedEventDetail } from "./types";
-export interface MDCDataTableAdapter {
-  /**
-   * Adds a class name to row element at given row index excluding header row.
-   *
-   * @param rowIndex Index of row element excluding header row.
-   * @param cssClasses CSS Class string to add.
-   */
-  addClassAtRowIndex(rowIndex: number, cssClasses: string): void;
-  /**
-   * @return Row count excluding header row.
-   */
-  getRowCount(): number;
-  /**
-   * @return Array of row elements excluding header row.
-   */
-  getRowElements(): Element[];
-  /**
-   * Returns row id of row element at given row index based on `data-row-id` attribute on row element `tr`.
-   *
-   * @param rowIndex Index of row element.
-   * @return Row id of row element, returns `null` in absence of `data-row-id` attribute on row element.
-   */
-  getRowIdAtIndex(rowIndex: number): string | null;
-  /**
-   * Returns index of row element that contains give child element. Returns -1 if element is not child of any row
-   * element.
-   *
-   * @param el Child element of row element.
-   * @return Index of row element.
-   */
-  getRowIndexByChildElement(el: Element): number;
-  /**
-   * @return Selected row count.
-   */
-  getSelectedRowCount(): number;
-  /**
-   * @param rowIndex Index of row element.
-   * @return True if row checkbox at given row index is checked.
-   */
-  isCheckboxAtRowIndexChecked(rowIndex: number): boolean;
-  /**
-   * @return True if header row checkbox is checked.
-   */
-  isHeaderRowCheckboxChecked(): boolean;
-  /**
-   * @return True if table rows are selectable.
-   */
-  isRowsSelectable(): boolean;
-  /**
-   * Notifies when row selection is changed.
-   *
-   * @param data Event detail data for row selection changed event.
-   */
-  notifyRowSelectionChanged(
-    data: MDCDataTableRowSelectionChangedEventDetail
-  ): void;
-  /**
-   * Notifies when header row is checked.
-   */
-  notifySelectedAll(): void;
-  /**
-   * Notifies when header row is unchecked.
-   */
-  notifyUnselectedAll(): void;
-  /**
-   * Initializes header row checkbox. Destroys previous header row checkbox instance if any.
-   * @return Can return Promise only if registering checkbox is asynchronous.
-   */
-  registerHeaderRowCheckbox(): Promise<void> | void;
-  /**
-   * Initializes all row checkboxes. Destroys previous row checkbox instances if any. This is usually called when row
-   * checkboxes are added or removed from table.
-   * @return Can return Promise only if registering checkbox is asynchronous.
-   */
-  registerRowCheckboxes(): Promise<void> | void;
-  /**
-   * Removes class name from row element at give row index.
-   *
-   * @param rowIndex Index of row element excluding header row element.
-   * @param cssClasses Class name string.
-   */
-  removeClassAtRowIndex(rowIndex: number, cssClasses: string): void;
-  /**
-   * Sets attribute to row element at given row index.
-   *
-   * @param rowIndex Index of row element excluding header row element.
-   * @param attr Name of attribute.
-   * @param value Value of attribute.
-   */
-  setAttributeAtRowIndex(rowIndex: number, attr: string, value: string): void;
-  /**
-   * Sets header row checkbox checked or unchecked.
-   *
-   * @param checked True to set header row checkbox checked.
-   */
-  setHeaderRowCheckboxChecked(checked: boolean): void;
-  /**
-   * Sets header row checkbox to indeterminate.
-   *
-   * @param indeterminate True to set header row checkbox indeterminate.
-   */
-  setHeaderRowCheckboxIndeterminate(indeterminate: boolean): void;
-  /**
-   * Sets row checkbox to checked or unchecked at given row index.
-   *
-   * @param rowIndex Index of row element excluding header row element.
-   * @param checked True to set checked.
-   */
-  setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean): void;
-}

mdc-data-table/adapter.js

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-//# sourceMappingURL=adapter.js.map

mdc-data-table/adapter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"adapter.js","sourceRoot":"","sources":["adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}

mdc-data-table/adapter.ts

@@ -1,161 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-/**
- * Defines the shape of the adapter expected by the foundation.
- * Implement this adapter for your framework of choice to delegate updates to
- * the component in your framework of choice. See architecture documentation
- * for more details.
- * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
- */
-
-import { MDCDataTableRowSelectionChangedEventDetail } from "./types";
-
-export interface MDCDataTableAdapter {
-  /**
-   * Adds a class name to row element at given row index excluding header row.
-   *
-   * @param rowIndex Index of row element excluding header row.
-   * @param cssClasses CSS Class string to add.
-   */
-  addClassAtRowIndex(rowIndex: number, cssClasses: string): void;
-
-  /**
-   * @return Row count excluding header row.
-   */
-  getRowCount(): number;
-
-  /**
-   * @return Array of row elements excluding header row.
-   */
-  getRowElements(): Element[];
-
-  /**
-   * Returns row id of row element at given row index based on `data-row-id` attribute on row element `tr`.
-   *
-   * @param rowIndex Index of row element.
-   * @return Row id of row element, returns `null` in absence of `data-row-id` attribute on row element.
-   */
-  getRowIdAtIndex(rowIndex: number): string | null;
-
-  /**
-   * Returns index of row element that contains give child element. Returns -1 if element is not child of any row
-   * element.
-   *
-   * @param el Child element of row element.
-   * @return Index of row element.
-   */
-  getRowIndexByChildElement(el: Element): number;
-
-  /**
-   * @return Selected row count.
-   */
-  getSelectedRowCount(): number;
-
-  /**
-   * @param rowIndex Index of row element.
-   * @return True if row checkbox at given row index is checked.
-   */
-  isCheckboxAtRowIndexChecked(rowIndex: number): boolean;
-
-  /**
-   * @return True if header row checkbox is checked.
-   */
-  isHeaderRowCheckboxChecked(): boolean;
-
-  /**
-   * @return True if table rows are selectable.
-   */
-  isRowsSelectable(): boolean;
-
-  /**
-   * Notifies when row selection is changed.
-   *
-   * @param data Event detail data for row selection changed event.
-   */
-  notifyRowSelectionChanged(
-    data: MDCDataTableRowSelectionChangedEventDetail
-  ): void;
-
-  /**
-   * Notifies when header row is checked.
-   */
-  notifySelectedAll(): void;
-
-  /**
-   * Notifies when header row is unchecked.
-   */
-  notifyUnselectedAll(): void;
-
-  /**
-   * Initializes header row checkbox. Destroys previous header row checkbox instance if any.
-   * @return Can return Promise only if registering checkbox is asynchronous.
-   */
-  registerHeaderRowCheckbox(): Promise<void> | void;
-
-  /**
-   * Initializes all row checkboxes. Destroys previous row checkbox instances if any. This is usually called when row
-   * checkboxes are added or removed from table.
-   * @return Can return Promise only if registering checkbox is asynchronous.
-   */
-  registerRowCheckboxes(): Promise<void> | void;
-
-  /**
-   * Removes class name from row element at give row index.
-   *
-   * @param rowIndex Index of row element excluding header row element.
-   * @param cssClasses Class name string.
-   */
-  removeClassAtRowIndex(rowIndex: number, cssClasses: string): void;
-
-  /**
-   * Sets attribute to row element at given row index.
-   *
-   * @param rowIndex Index of row element excluding header row element.
-   * @param attr Name of attribute.
-   * @param value Value of attribute.
-   */
-  setAttributeAtRowIndex(rowIndex: number, attr: string, value: string): void;
-
-  /**
-   * Sets header row checkbox checked or unchecked.
-   *
-   * @param checked True to set header row checkbox checked.
-   */
-  setHeaderRowCheckboxChecked(checked: boolean): void;
-
-  /**
-   * Sets header row checkbox to indeterminate.
-   *
-   * @param indeterminate True to set header row checkbox indeterminate.
-   */
-  setHeaderRowCheckboxIndeterminate(indeterminate: boolean): void;
-
-  /**
-   * Sets row checkbox to checked or unchecked at given row index.
-   *
-   * @param rowIndex Index of row element excluding header row element.
-   * @param checked True to set checked.
-   */
-  setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean): void;
-}

mdc-data-table/component.d.ts

@@ -1,58 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-import { MDCComponent } from "@material/base/component";
-import { MDCCheckboxFactory } from "@material/checkbox/component";
-import { MDCDataTableFoundation } from "./foundation";
-export declare class MDCDataTable extends MDCComponent<MDCDataTableFoundation> {
-  static attachTo(root: Element): MDCDataTable;
-  private headerRowCheckbox_;
-  private rowCheckboxList_;
-  private checkboxFactory_;
-  private headerRow_;
-  private content_;
-  private handleHeaderRowCheckboxChange_;
-  private handleRowCheckboxChange_;
-  initialize(checkboxFactory?: MDCCheckboxFactory): void;
-  initialSyncWithDOM(): void;
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   */
-  layout(): void;
-  /**
-   * @return Returns array of row elements.
-   */
-  getRows(): Element[];
-  /**
-   * @return Returns array of selected row ids.
-   */
-  getSelectedRowIds(): Array<string | null>;
-  /**
-   * Sets selected row ids. Overwrites previously selected rows.
-   * @param rowIds Array of row ids that needs to be selected.
-   */
-  setSelectedRowIds(rowIds: string[]): void;
-  destroy(): void;
-  getDefaultFoundation(): MDCDataTableFoundation;
-  private getRowByIndex_;
-  private getRowIdByIndex_;
-}

mdc-data-table/component.js

@@ -1,202 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-import * as tslib_1 from "tslib";
-import { MDCComponent } from "@material/base/component";
-import { MDCCheckbox } from "@material/checkbox/component";
-import { closest } from "@material/dom/ponyfill";
-import { cssClasses, events, strings } from "./constants";
-import { MDCDataTableFoundation } from "./foundation";
-var MDCDataTable = /** @class */ (function(_super) {
-  tslib_1.__extends(MDCDataTable, _super);
-  function MDCDataTable() {
-    return (_super !== null && _super.apply(this, arguments)) || this;
-  }
-  MDCDataTable.attachTo = function(root) {
-    return new MDCDataTable(root);
-  };
-  MDCDataTable.prototype.initialize = function(checkboxFactory) {
-    if (checkboxFactory === void 0) {
-      checkboxFactory = function(el) {
-        return new MDCCheckbox(el);
-      };
-    }
-    this.checkboxFactory_ = checkboxFactory;
-  };
-  MDCDataTable.prototype.initialSyncWithDOM = function() {
-    var _this = this;
-    this.headerRow_ = this.root_.querySelector("." + cssClasses.HEADER_ROW);
-    this.handleHeaderRowCheckboxChange_ = function() {
-      return _this.foundation_.handleHeaderRowCheckboxChange();
-    };
-    this.headerRow_.addEventListener(
-      "change",
-      this.handleHeaderRowCheckboxChange_
-    );
-    this.content_ = this.root_.querySelector("." + cssClasses.CONTENT);
-    this.handleRowCheckboxChange_ = function(event) {
-      return _this.foundation_.handleRowCheckboxChange(event);
-    };
-    this.content_.addEventListener("change", this.handleRowCheckboxChange_);
-    this.layout();
-  };
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   */
-  MDCDataTable.prototype.layout = function() {
-    this.foundation_.layout();
-  };
-  /**
-   * @return Returns array of row elements.
-   */
-  MDCDataTable.prototype.getRows = function() {
-    return this.foundation_.getRows();
-  };
-  /**
-   * @return Returns array of selected row ids.
-   */
-  MDCDataTable.prototype.getSelectedRowIds = function() {
-    return this.foundation_.getSelectedRowIds();
-  };
-  /**
-   * Sets selected row ids. Overwrites previously selected rows.
-   * @param rowIds Array of row ids that needs to be selected.
-   */
-  MDCDataTable.prototype.setSelectedRowIds = function(rowIds) {
-    this.foundation_.setSelectedRowIds(rowIds);
-  };
-  MDCDataTable.prototype.destroy = function() {
-    this.headerRow_.removeEventListener(
-      "change",
-      this.handleHeaderRowCheckboxChange_
-    );
-    this.content_.removeEventListener("change", this.handleRowCheckboxChange_);
-    this.headerRowCheckbox_.destroy();
-    this.rowCheckboxList_.forEach(function(checkbox) {
-      return checkbox.destroy();
-    });
-  };
-  MDCDataTable.prototype.getDefaultFoundation = function() {
-    var _this = this;
-    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-    var adapter = {
-      addClassAtRowIndex: function(rowIndex, className) {
-        return _this.getRows()[rowIndex].classList.add(className);
-      },
-      getRowCount: function() {
-        return _this.getRows().length;
-      },
-      getRowElements: function() {
-        return [].slice.call(
-          _this.root_.querySelectorAll(strings.ROW_SELECTOR)
-        );
-      },
-      getRowIdAtIndex: function(rowIndex) {
-        return _this.getRows()[rowIndex].getAttribute(strings.DATA_ROW_ID_ATTR);
-      },
-      getRowIndexByChildElement: function(el) {
-        return _this.getRows().indexOf(closest(el, strings.ROW_SELECTOR));
-      },
-      getSelectedRowCount: function() {
-        return _this.root_.querySelectorAll(strings.ROW_SELECTED_SELECTOR)
-          .length;
-      },
-      isCheckboxAtRowIndexChecked: function(rowIndex) {
-        return _this.rowCheckboxList_[rowIndex].checked;
-      },
-      isHeaderRowCheckboxChecked: function() {
-        return _this.headerRowCheckbox_.checked;
-      },
-      isRowsSelectable: function() {
-        return !!_this.root_.querySelector(strings.ROW_CHECKBOX_SELECTOR);
-      },
-      notifyRowSelectionChanged: function(data) {
-        _this.emit(
-          events.ROW_SELECTION_CHANGED,
-          {
-            row: _this.getRowByIndex_(data.rowIndex),
-            rowId: _this.getRowIdByIndex_(data.rowIndex),
-            rowIndex: data.rowIndex,
-            selected: data.selected,
-          },
-          /** shouldBubble */ true
-        );
-      },
-      notifySelectedAll: function() {
-        return _this.emit(events.SELECTED_ALL, {}, /** shouldBubble */ true);
-      },
-      notifyUnselectedAll: function() {
-        return _this.emit(events.UNSELECTED_ALL, {}, /** shouldBubble */ true);
-      },
-      registerHeaderRowCheckbox: function() {
-        if (_this.headerRowCheckbox_) {
-          _this.headerRowCheckbox_.destroy();
-        }
-        var checkboxEl = _this.root_.querySelector(
-          strings.HEADER_ROW_CHECKBOX_SELECTOR
-        );
-        _this.headerRowCheckbox_ = _this.checkboxFactory_(checkboxEl);
-      },
-      registerRowCheckboxes: function() {
-        if (_this.rowCheckboxList_) {
-          _this.rowCheckboxList_.forEach(function(checkbox) {
-            return checkbox.destroy();
-          });
-        }
-        _this.rowCheckboxList_ = [];
-        _this.getRows().forEach(function(rowEl) {
-          var checkbox = _this.checkboxFactory_(
-            rowEl.querySelector(strings.ROW_CHECKBOX_SELECTOR)
-          );
-          _this.rowCheckboxList_.push(checkbox);
-        });
-      },
-      removeClassAtRowIndex: function(rowIndex, className) {
-        _this.getRows()[rowIndex].classList.remove(className);
-      },
-      setAttributeAtRowIndex: function(rowIndex, attr, value) {
-        _this.getRows()[rowIndex].setAttribute(attr, value);
-      },
-      setHeaderRowCheckboxChecked: function(checked) {
-        _this.headerRowCheckbox_.checked = checked;
-      },
-      setHeaderRowCheckboxIndeterminate: function(indeterminate) {
-        _this.headerRowCheckbox_.indeterminate = indeterminate;
-      },
-      setRowCheckboxCheckedAtIndex: function(rowIndex, checked) {
-        _this.rowCheckboxList_[rowIndex].checked = checked;
-      },
-    };
-    return new MDCDataTableFoundation(adapter);
-  };
-  MDCDataTable.prototype.getRowByIndex_ = function(index) {
-    return this.getRows()[index];
-  };
-  MDCDataTable.prototype.getRowIdByIndex_ = function(index) {
-    return this.getRowByIndex_(index).getAttribute(strings.DATA_ROW_ID_ATTR);
-  };
-  return MDCDataTable;
-})(MDCComponent);
-export { MDCDataTable };
-//# sourceMappingURL=component.js.map

mdc-data-table/component.ts

@@ -1,209 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-import { MDCComponent } from "@material/base/component";
-import { SpecificEventListener } from "@material/base/types";
-import { MDCCheckbox, MDCCheckboxFactory } from "@material/checkbox/component";
-import { closest } from "@material/dom/ponyfill";
-import { MDCDataTableAdapter } from "./adapter";
-import { cssClasses, events, strings } from "./constants";
-import { MDCDataTableFoundation } from "./foundation";
-import { MDCDataTableRowSelectionChangedEventDetail } from "./types";
-
-export class MDCDataTable extends MDCComponent<MDCDataTableFoundation> {
-  static attachTo(root: Element): MDCDataTable {
-    return new MDCDataTable(root);
-  }
-
-  private headerRowCheckbox_!: MDCCheckbox;
-  private rowCheckboxList_!: MDCCheckbox[];
-  private checkboxFactory_!: MDCCheckboxFactory;
-  private headerRow_!: HTMLElement;
-  private content_!: HTMLElement;
-  private handleHeaderRowCheckboxChange_!: SpecificEventListener<"change">;
-  private handleRowCheckboxChange_!: SpecificEventListener<"change">;
-
-  initialize(
-    checkboxFactory: MDCCheckboxFactory = (el: Element) => new MDCCheckbox(el)
-  ) {
-    this.checkboxFactory_ = checkboxFactory;
-  }
-
-  initialSyncWithDOM() {
-    this.headerRow_ = this.root_.querySelector(
-      `.${cssClasses.HEADER_ROW}`
-    ) as HTMLElement;
-    this.handleHeaderRowCheckboxChange_ = () =>
-      this.foundation_.handleHeaderRowCheckboxChange();
-    this.headerRow_.addEventListener(
-      "change",
-      this.handleHeaderRowCheckboxChange_
-    );
-
-    this.content_ = this.root_.querySelector(
-      `.${cssClasses.CONTENT}`
-    ) as HTMLElement;
-    this.handleRowCheckboxChange_ = (event) =>
-      this.foundation_.handleRowCheckboxChange(event);
-    this.content_.addEventListener("change", this.handleRowCheckboxChange_);
-
-    this.layout();
-  }
-
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   */
-  layout() {
-    this.foundation_.layout();
-  }
-
-  /**
-   * @return Returns array of row elements.
-   */
-  getRows(): Element[] {
-    return this.foundation_.getRows();
-  }
-
-  /**
-   * @return Returns array of selected row ids.
-   */
-  getSelectedRowIds(): Array<string | null> {
-    return this.foundation_.getSelectedRowIds();
-  }
-
-  /**
-   * Sets selected row ids. Overwrites previously selected rows.
-   * @param rowIds Array of row ids that needs to be selected.
-   */
-  setSelectedRowIds(rowIds: string[]) {
-    this.foundation_.setSelectedRowIds(rowIds);
-  }
-
-  destroy() {
-    this.headerRow_.removeEventListener(
-      "change",
-      this.handleHeaderRowCheckboxChange_
-    );
-    this.content_.removeEventListener("change", this.handleRowCheckboxChange_);
-
-    this.headerRowCheckbox_.destroy();
-    this.rowCheckboxList_.forEach((checkbox) => checkbox.destroy());
-  }
-
-  getDefaultFoundation() {
-    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
-    const adapter: MDCDataTableAdapter = {
-      addClassAtRowIndex: (rowIndex: number, className: string) =>
-        this.getRows()[rowIndex].classList.add(className),
-      getRowCount: () => this.getRows().length,
-      getRowElements: () =>
-        [].slice.call(this.root_.querySelectorAll(strings.ROW_SELECTOR)),
-      getRowIdAtIndex: (rowIndex: number) =>
-        this.getRows()[rowIndex].getAttribute(strings.DATA_ROW_ID_ATTR),
-      getRowIndexByChildElement: (el: Element) => {
-        return this.getRows().indexOf(closest(
-          el,
-          strings.ROW_SELECTOR
-        ) as HTMLElement);
-      },
-      getSelectedRowCount: () =>
-        this.root_.querySelectorAll(strings.ROW_SELECTED_SELECTOR).length,
-      isCheckboxAtRowIndexChecked: (rowIndex: number) =>
-        this.rowCheckboxList_[rowIndex].checked,
-      isHeaderRowCheckboxChecked: () => this.headerRowCheckbox_.checked,
-      isRowsSelectable: () =>
-        !!this.root_.querySelector(strings.ROW_CHECKBOX_SELECTOR),
-      notifyRowSelectionChanged: (
-        data: MDCDataTableRowSelectionChangedEventDetail
-      ) => {
-        this.emit(
-          events.ROW_SELECTION_CHANGED,
-          {
-            row: this.getRowByIndex_(data.rowIndex),
-            rowId: this.getRowIdByIndex_(data.rowIndex),
-            rowIndex: data.rowIndex,
-            selected: data.selected,
-          },
-          /** shouldBubble */ true
-        );
-      },
-      notifySelectedAll: () =>
-        this.emit(events.SELECTED_ALL, {}, /** shouldBubble */ true),
-      notifyUnselectedAll: () =>
-        this.emit(events.UNSELECTED_ALL, {}, /** shouldBubble */ true),
-      registerHeaderRowCheckbox: () => {
-        if (this.headerRowCheckbox_) {
-          this.headerRowCheckbox_.destroy();
-        }
-
-        const checkboxEl = this.root_.querySelector(
-          strings.HEADER_ROW_CHECKBOX_SELECTOR
-        ) as HTMLElement;
-        this.headerRowCheckbox_ = this.checkboxFactory_(checkboxEl);
-      },
-      registerRowCheckboxes: () => {
-        if (this.rowCheckboxList_) {
-          this.rowCheckboxList_.forEach((checkbox) => checkbox.destroy());
-        }
-
-        this.rowCheckboxList_ = [];
-        this.getRows().forEach((rowEl) => {
-          const checkbox = this.checkboxFactory_(rowEl.querySelector(
-            strings.ROW_CHECKBOX_SELECTOR
-          ) as HTMLElement);
-          this.rowCheckboxList_.push(checkbox);
-        });
-      },
-      removeClassAtRowIndex: (rowIndex: number, className: string) => {
-        this.getRows()[rowIndex].classList.remove(className);
-      },
-      setAttributeAtRowIndex: (
-        rowIndex: number,
-        attr: string,
-        value: string
-      ) => {
-        this.getRows()[rowIndex].setAttribute(attr, value);
-      },
-      setHeaderRowCheckboxChecked: (checked: boolean) => {
-        this.headerRowCheckbox_.checked = checked;
-      },
-      setHeaderRowCheckboxIndeterminate: (indeterminate: boolean) => {
-        this.headerRowCheckbox_.indeterminate = indeterminate;
-      },
-      setRowCheckboxCheckedAtIndex: (rowIndex: number, checked: boolean) => {
-        this.rowCheckboxList_[rowIndex].checked = checked;
-      },
-    };
-    return new MDCDataTableFoundation(adapter);
-  }
-
-  private getRowByIndex_(index: number): Element {
-    return this.getRows()[index];
-  }
-
-  private getRowIdByIndex_(index: number): string | null {
-    return this.getRowByIndex_(index).getAttribute(strings.DATA_ROW_ID_ATTR);
-  }
-}

mdc-data-table/constants.d.ts

@@ -1,46 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-export declare const cssClasses: {
-  CELL: string;
-  CELL_NUMERIC: string;
-  CONTENT: string;
-  HEADER_ROW: string;
-  HEADER_ROW_CHECKBOX: string;
-  ROOT: string;
-  ROW: string;
-  ROW_CHECKBOX: string;
-  ROW_SELECTED: string;
-};
-export declare const strings: {
-  ARIA_SELECTED: string;
-  DATA_ROW_ID_ATTR: string;
-  HEADER_ROW_CHECKBOX_SELECTOR: string;
-  ROW_CHECKBOX_SELECTOR: string;
-  ROW_SELECTED_SELECTOR: string;
-  ROW_SELECTOR: string;
-};
-export declare const events: {
-  ROW_SELECTION_CHANGED: string;
-  SELECTED_ALL: string;
-  UNSELECTED_ALL: string;
-};

mdc-data-table/constants.js

@@ -1,47 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-export var cssClasses = {
-  CELL: "mdc-data-table__cell",
-  CELL_NUMERIC: "mdc-data-table__cell--numeric",
-  CONTENT: "mdc-data-table__content",
-  HEADER_ROW: "mdc-data-table__header-row",
-  HEADER_ROW_CHECKBOX: "mdc-data-table__header-row-checkbox",
-  ROOT: "mdc-data-table",
-  ROW: "mdc-data-table__row",
-  ROW_CHECKBOX: "mdc-data-table__row-checkbox",
-  ROW_SELECTED: "mdc-data-table__row--selected",
-};
-export var strings = {
-  ARIA_SELECTED: "aria-selected",
-  DATA_ROW_ID_ATTR: "data-row-id",
-  HEADER_ROW_CHECKBOX_SELECTOR: "." + cssClasses.HEADER_ROW_CHECKBOX,
-  ROW_CHECKBOX_SELECTOR: "." + cssClasses.ROW_CHECKBOX,
-  ROW_SELECTED_SELECTOR: "." + cssClasses.ROW_SELECTED,
-  ROW_SELECTOR: "." + cssClasses.ROW,
-};
-export var events = {
-  ROW_SELECTION_CHANGED: "MDCDataTable:rowSelectionChanged",
-  SELECTED_ALL: "MDCDataTable:selectedAll",
-  UNSELECTED_ALL: "MDCDataTable:unselectedAll",
-};
-//# sourceMappingURL=constants.js.map

mdc-data-table/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,IAAM,UAAU,GAAG;IACxB,IAAI,EAAE,sBAAsB;IAC5B,YAAY,EAAE,+BAA+B;IAC7C,OAAO,EAAE,yBAAyB;IAClC,UAAU,EAAE,4BAA4B;IACxC,mBAAmB,EAAE,qCAAqC;IAC1D,IAAI,EAAE,gBAAgB;IACtB,GAAG,EAAE,qBAAqB;IAC1B,YAAY,EAAE,8BAA8B;IAC5C,YAAY,EAAE,+BAA+B;CAC9C,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,aAAa,EAAE,eAAe;IAC9B,gBAAgB,EAAE,aAAa;IAC/B,4BAA4B,EAAE,MAAI,UAAU,CAAC,mBAAqB;IAClE,qBAAqB,EAAE,MAAI,UAAU,CAAC,YAAc;IACpD,qBAAqB,EAAE,MAAI,UAAU,CAAC,YAAc;IACpD,YAAY,EAAE,MAAI,UAAU,CAAC,GAAK;CACnC,CAAC;AAEF,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,qBAAqB,EAAE,kCAAkC;IACzD,YAAY,EAAE,0BAA0B;IACxC,cAAc,EAAE,4BAA4B;CAC7C,CAAC"}

mdc-data-table/constants.ts

@@ -1,49 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-export const cssClasses = {
-  CELL: "mdc-data-table__cell",
-  CELL_NUMERIC: "mdc-data-table__cell--numeric",
-  CONTENT: "mdc-data-table__content",
-  HEADER_ROW: "mdc-data-table__header-row",
-  HEADER_ROW_CHECKBOX: "mdc-data-table__header-row-checkbox",
-  ROOT: "mdc-data-table",
-  ROW: "mdc-data-table__row",
-  ROW_CHECKBOX: "mdc-data-table__row-checkbox",
-  ROW_SELECTED: "mdc-data-table__row--selected",
-};
-
-export const strings = {
-  ARIA_SELECTED: "aria-selected",
-  DATA_ROW_ID_ATTR: "data-row-id",
-  HEADER_ROW_CHECKBOX_SELECTOR: `.${cssClasses.HEADER_ROW_CHECKBOX}`,
-  ROW_CHECKBOX_SELECTOR: `.${cssClasses.ROW_CHECKBOX}`,
-  ROW_SELECTED_SELECTOR: `.${cssClasses.ROW_SELECTED}`,
-  ROW_SELECTOR: `.${cssClasses.ROW}`,
-};
-
-export const events = {
-  ROW_SELECTION_CHANGED: "MDCDataTable:rowSelectionChanged",
-  SELECTED_ALL: "MDCDataTable:selectedAll",
-  UNSELECTED_ALL: "MDCDataTable:unselectedAll",
-};

mdc-data-table/foundation.d.ts

@@ -1,69 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-import { MDCFoundation } from "@material/base/foundation";
-import { MDCDataTableAdapter } from "./adapter";
-export declare class MDCDataTableFoundation extends MDCFoundation<
-  MDCDataTableAdapter
-> {
-  static readonly defaultAdapter: MDCDataTableAdapter;
-  constructor(adapter?: Partial<MDCDataTableAdapter>);
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   * Use this if registering checkbox is synchronous.
-   */
-  layout(): void;
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   * Use this if registering checkbox is asynchronous.
-   */
-  layoutAsync(): Promise<void>;
-  /**
-   * @return Returns array of row elements.
-   */
-  getRows(): Element[];
-  /**
-   * Sets selected row ids. Overwrites previously selected rows.
-   * @param rowIds Array of row ids that needs to be selected.
-   */
-  setSelectedRowIds(rowIds: string[]): void;
-  /**
-   * @return Returns array of selected row ids.
-   */
-  getSelectedRowIds(): Array<string | null>;
-  /**
-   * Handles header row checkbox change event.
-   */
-  handleHeaderRowCheckboxChange(): void;
-  /**
-   * Handles change event originated from row checkboxes.
-   */
-  handleRowCheckboxChange(event: Event): void;
-  /**
-   * Updates header row checkbox state based on number of rows selected.
-   */
-  private setHeaderRowCheckboxState_;
-  /**
-   * Sets the attributes of row element based on selection state.
-   */
-  private selectRowAtIndex_;
-}

mdc-data-table/foundation.js

@@ -1,244 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-import * as tslib_1 from "tslib";
-import { MDCFoundation } from "@material/base/foundation";
-import { cssClasses, strings } from "./constants";
-var MDCDataTableFoundation = /** @class */ (function(_super) {
-  tslib_1.__extends(MDCDataTableFoundation, _super);
-  function MDCDataTableFoundation(adapter) {
-    return (
-      _super.call(
-        this,
-        tslib_1.__assign({}, MDCDataTableFoundation.defaultAdapter, adapter)
-      ) || this
-    );
-  }
-  Object.defineProperty(MDCDataTableFoundation, "defaultAdapter", {
-    get: function() {
-      return {
-        addClassAtRowIndex: function() {
-          return undefined;
-        },
-        getRowCount: function() {
-          return 0;
-        },
-        getRowElements: function() {
-          return [];
-        },
-        getRowIdAtIndex: function() {
-          return "";
-        },
-        getRowIndexByChildElement: function() {
-          return 0;
-        },
-        getSelectedRowCount: function() {
-          return 0;
-        },
-        isCheckboxAtRowIndexChecked: function() {
-          return false;
-        },
-        isHeaderRowCheckboxChecked: function() {
-          return false;
-        },
-        isRowsSelectable: function() {
-          return false;
-        },
-        notifyRowSelectionChanged: function() {
-          return undefined;
-        },
-        notifySelectedAll: function() {
-          return undefined;
-        },
-        notifyUnselectedAll: function() {
-          return undefined;
-        },
-        registerHeaderRowCheckbox: function() {
-          return undefined;
-        },
-        registerRowCheckboxes: function() {
-          return undefined;
-        },
-        removeClassAtRowIndex: function() {
-          return undefined;
-        },
-        setAttributeAtRowIndex: function() {
-          return undefined;
-        },
-        setHeaderRowCheckboxChecked: function() {
-          return undefined;
-        },
-        setHeaderRowCheckboxIndeterminate: function() {
-          return undefined;
-        },
-        setRowCheckboxCheckedAtIndex: function() {
-          return undefined;
-        },
-      };
-    },
-    enumerable: true,
-    configurable: true,
-  });
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   * Use this if registering checkbox is synchronous.
-   */
-  MDCDataTableFoundation.prototype.layout = function() {
-    if (this.adapter_.isRowsSelectable()) {
-      this.adapter_.registerHeaderRowCheckbox();
-      this.adapter_.registerRowCheckboxes();
-      this.setHeaderRowCheckboxState_();
-    }
-  };
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   * Use this if registering checkbox is asynchronous.
-   */
-  MDCDataTableFoundation.prototype.layoutAsync = function() {
-    return tslib_1.__awaiter(this, void 0, void 0, function() {
-      return tslib_1.__generator(this, function(_a) {
-        switch (_a.label) {
-          case 0:
-            if (!this.adapter_.isRowsSelectable()) return [3 /*break*/, 3];
-            return [4 /*yield*/, this.adapter_.registerHeaderRowCheckbox()];
-          case 1:
-            _a.sent();
-            return [4 /*yield*/, this.adapter_.registerRowCheckboxes()];
-          case 2:
-            _a.sent();
-            this.setHeaderRowCheckboxState_();
-            _a.label = 3;
-          case 3:
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
-  /**
-   * @return Returns array of row elements.
-   */
-  MDCDataTableFoundation.prototype.getRows = function() {
-    return this.adapter_.getRowElements();
-  };
-  /**
-   * Sets selected row ids. Overwrites previously selected rows.
-   * @param rowIds Array of row ids that needs to be selected.
-   */
-  MDCDataTableFoundation.prototype.setSelectedRowIds = function(rowIds) {
-    for (var rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
-      var rowId = this.adapter_.getRowIdAtIndex(rowIndex);
-      var isSelected = false;
-      if (rowId && rowIds.indexOf(rowId) >= 0) {
-        isSelected = true;
-      }
-      this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isSelected);
-      this.selectRowAtIndex_(rowIndex, isSelected);
-    }
-    this.setHeaderRowCheckboxState_();
-  };
-  /**
-   * @return Returns array of selected row ids.
-   */
-  MDCDataTableFoundation.prototype.getSelectedRowIds = function() {
-    var selectedRowIds = [];
-    for (var rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
-      if (this.adapter_.isCheckboxAtRowIndexChecked(rowIndex)) {
-        selectedRowIds.push(this.adapter_.getRowIdAtIndex(rowIndex));
-      }
-    }
-    return selectedRowIds;
-  };
-  /**
-   * Handles header row checkbox change event.
-   */
-  MDCDataTableFoundation.prototype.handleHeaderRowCheckboxChange = function() {
-    var isHeaderChecked = this.adapter_.isHeaderRowCheckboxChecked();
-    for (var rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
-      this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isHeaderChecked);
-      this.selectRowAtIndex_(rowIndex, isHeaderChecked);
-    }
-    if (isHeaderChecked) {
-      this.adapter_.notifySelectedAll();
-    } else {
-      this.adapter_.notifyUnselectedAll();
-    }
-  };
-  /**
-   * Handles change event originated from row checkboxes.
-   */
-  MDCDataTableFoundation.prototype.handleRowCheckboxChange = function(event) {
-    var rowIndex = this.adapter_.getRowIndexByChildElement(event.target);
-    if (rowIndex === -1) {
-      return;
-    }
-    var selected = this.adapter_.isCheckboxAtRowIndexChecked(rowIndex);
-    this.selectRowAtIndex_(rowIndex, selected);
-    this.setHeaderRowCheckboxState_();
-    var rowId = this.adapter_.getRowIdAtIndex(rowIndex);
-    this.adapter_.notifyRowSelectionChanged({
-      rowId: rowId,
-      rowIndex: rowIndex,
-      selected: selected,
-    });
-  };
-  /**
-   * Updates header row checkbox state based on number of rows selected.
-   */
-  MDCDataTableFoundation.prototype.setHeaderRowCheckboxState_ = function() {
-    if (this.adapter_.getSelectedRowCount() === this.adapter_.getRowCount()) {
-      this.adapter_.setHeaderRowCheckboxChecked(true);
-      this.adapter_.setHeaderRowCheckboxIndeterminate(false);
-    } else if (this.adapter_.getSelectedRowCount() === 0) {
-      this.adapter_.setHeaderRowCheckboxIndeterminate(false);
-      this.adapter_.setHeaderRowCheckboxChecked(false);
-    } else {
-      this.adapter_.setHeaderRowCheckboxIndeterminate(true);
-      this.adapter_.setHeaderRowCheckboxChecked(false);
-    }
-  };
-  /**
-   * Sets the attributes of row element based on selection state.
-   */
-  MDCDataTableFoundation.prototype.selectRowAtIndex_ = function(
-    rowIndex,
-    selected
-  ) {
-    if (selected) {
-      this.adapter_.addClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
-      this.adapter_.setAttributeAtRowIndex(
-        rowIndex,
-        strings.ARIA_SELECTED,
-        "true"
-      );
-    } else {
-      this.adapter_.removeClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
-      this.adapter_.setAttributeAtRowIndex(
-        rowIndex,
-        strings.ARIA_SELECTED,
-        "false"
-      );
-    }
-  };
-  return MDCDataTableFoundation;
-})(MDCFoundation);
-export { MDCDataTableFoundation };
-//# sourceMappingURL=foundation.js.map

mdc-data-table/foundation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"foundation.js","sourceRoot":"","sources":["foundation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,aAAa,CAAC;AAEhD;IAA4C,kDAAkC;IAyB5E,gCAAY,OAAsC;eAChD,uCAAU,sBAAsB,CAAC,cAAc,EAAK,OAAO,EAAE;IAC/D,CAAC;IA1BD,sBAAW,wCAAc;aAAzB;YACE,OAAO;gBACL,kBAAkB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACnC,WAAW,EAAE,cAAM,OAAA,CAAC,EAAD,CAAC;gBACpB,cAAc,EAAE,cAAM,OAAA,EAAE,EAAF,CAAE;gBACxB,eAAe,EAAE,cAAM,OAAA,EAAE,EAAF,CAAE;gBACzB,yBAAyB,EAAE,cAAM,OAAA,CAAC,EAAD,CAAC;gBAClC,mBAAmB,EAAE,cAAM,OAAA,CAAC,EAAD,CAAC;gBAC5B,2BAA2B,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;gBACxC,0BAA0B,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;gBACvC,gBAAgB,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;gBAC7B,yBAAyB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC1C,iBAAiB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAClC,mBAAmB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACpC,yBAAyB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC1C,qBAAqB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACtC,qBAAqB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACtC,sBAAsB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBACvC,2BAA2B,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC5C,iCAAiC,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAClD,4BAA4B,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;aAC9C,CAAC;QACJ,CAAC;;;OAAA;IAMD;;;OAGG;IACH,uCAAM,GAAN;QACE,IAAI,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,CAAC,yBAAyB,EAAE,CAAC;YAC1C,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YAEtC,IAAI,CAAC,0BAA0B,EAAE,CAAC;SACnC;IACH,CAAC;IAED;;;OAGG;IACG,4CAAW,GAAjB;;;;;6BACM,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAhC,wBAAgC;wBAClC,qBAAM,IAAI,CAAC,QAAQ,CAAC,yBAAyB,EAAE,EAAA;;wBAA/C,SAA+C,CAAC;wBAChD,qBAAM,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,EAAA;;wBAA3C,SAA2C,CAAC;wBAE5C,IAAI,CAAC,0BAA0B,EAAE,CAAC;;;;;;KAErC;IAED;;OAEG;IACH,wCAAO,GAAP;QACE,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;IACxC,CAAC;IAED;;;OAGG;IACH,kDAAiB,GAAjB,UAAkB,MAAgB;QAChC,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;YACzE,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YAEtD,IAAI,UAAU,GAAG,KAAK,CAAC;YACvB,IAAI,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;gBACvC,UAAU,GAAG,IAAI,CAAC;aACnB;YAED,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;YACjE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;SAC9C;QAED,IAAI,CAAC,0BAA0B,EAAE,CAAC;IACpC,CAAC;IAED;;OAEG;IACH,kDAAiB,GAAjB;QACE,IAAM,cAAc,GAAuB,EAAE,CAAC;QAC9C,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;YACzE,IAAI,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,QAAQ,CAAC,EAAE;gBACvD,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;aAC9D;SACF;QAED,OAAO,cAAc,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,8DAA6B,GAA7B;QACE,IAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,0BAA0B,EAAE,CAAC;QAEnE,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,EAAE;YACzE,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;YACtE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;SACnD;QAED,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC;SACnC;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC;SACrC;IACH,CAAC;IAED;;OAEG;IACH,wDAAuB,GAAvB,UAAwB,KAAY;QAClC,IAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,KAAK,CAAC,MAA0B,CAAC,CAAC;QAE3F,IAAI,QAAQ,KAAK,CAAC,CAAC,EAAE;YACnB,OAAO;SACR;QAED,IAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,QAAQ,CAAC,CAAC;QAErE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAElC,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,EAAC,KAAK,OAAA,EAAE,QAAQ,UAAA,EAAE,QAAQ,UAAA,EAAC,CAAC,CAAC;IACvE,CAAC;IAED;;OAEG;IACK,2DAA0B,GAAlC;QACE,IAAI,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE;YACvE,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,iCAAiC,CAAC,KAAK,CAAC,CAAC;SACxD;aAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,KAAK,CAAC,EAAE;YACpD,IAAI,CAAC,QAAQ,CAAC,iCAAiC,CAAC,KAAK,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;SAClD;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,iCAAiC,CAAC,IAAI,CAAC,CAAC;YACtD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;SAClD;IACH,CAAC;IAED;;OAEG;IACK,kDAAiB,GAAzB,UAA0B,QAAgB,EAAE,QAAiB;QAC3D,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;YACpE,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;SAC/E;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;YACvE,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;SAChF;IACH,CAAC;IACH,6BAAC;AAAD,CAAC,AAjKD,CAA4C,aAAa,GAiKxD"}

mdc-data-table/foundation.ts

@@ -1,199 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-import { MDCFoundation } from "@material/base/foundation";
-import { MDCDataTableAdapter } from "./adapter";
-import { cssClasses, strings } from "./constants";
-
-export class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {
-  static get defaultAdapter(): MDCDataTableAdapter {
-    return {
-      addClassAtRowIndex: () => undefined,
-      getRowCount: () => 0,
-      getRowElements: () => [],
-      getRowIdAtIndex: () => "",
-      getRowIndexByChildElement: () => 0,
-      getSelectedRowCount: () => 0,
-      isCheckboxAtRowIndexChecked: () => false,
-      isHeaderRowCheckboxChecked: () => false,
-      isRowsSelectable: () => false,
-      notifyRowSelectionChanged: () => undefined,
-      notifySelectedAll: () => undefined,
-      notifyUnselectedAll: () => undefined,
-      registerHeaderRowCheckbox: () => undefined,
-      registerRowCheckboxes: () => undefined,
-      removeClassAtRowIndex: () => undefined,
-      setAttributeAtRowIndex: () => undefined,
-      setHeaderRowCheckboxChecked: () => undefined,
-      setHeaderRowCheckboxIndeterminate: () => undefined,
-      setRowCheckboxCheckedAtIndex: () => undefined,
-    };
-  }
-
-  constructor(adapter?: Partial<MDCDataTableAdapter>) {
-    super({ ...MDCDataTableFoundation.defaultAdapter, ...adapter });
-  }
-
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   * Use this if registering checkbox is synchronous.
-   */
-  layout() {
-    if (this.adapter_.isRowsSelectable()) {
-      this.adapter_.registerHeaderRowCheckbox();
-      this.adapter_.registerRowCheckboxes();
-
-      this.setHeaderRowCheckboxState_();
-    }
-  }
-
-  /**
-   * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table.
-   * Use this if registering checkbox is asynchronous.
-   */
-  async layoutAsync(): Promise<void> {
-    if (this.adapter_.isRowsSelectable()) {
-      await this.adapter_.registerHeaderRowCheckbox();
-      await this.adapter_.registerRowCheckboxes();
-
-      this.setHeaderRowCheckboxState_();
-    }
-  }
-
-  /**
-   * @return Returns array of row elements.
-   */
-  getRows(): Element[] {
-    return this.adapter_.getRowElements();
-  }
-
-  /**
-   * Sets selected row ids. Overwrites previously selected rows.
-   * @param rowIds Array of row ids that needs to be selected.
-   */
-  setSelectedRowIds(rowIds: string[]) {
-    for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
-      const rowId = this.adapter_.getRowIdAtIndex(rowIndex);
-
-      let isSelected = false;
-      if (rowId && rowIds.indexOf(rowId) >= 0) {
-        isSelected = true;
-      }
-
-      this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isSelected);
-      this.selectRowAtIndex_(rowIndex, isSelected);
-    }
-
-    this.setHeaderRowCheckboxState_();
-  }
-
-  /**
-   * @return Returns array of selected row ids.
-   */
-  getSelectedRowIds(): Array<string | null> {
-    const selectedRowIds: Array<string | null> = [];
-    for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
-      if (this.adapter_.isCheckboxAtRowIndexChecked(rowIndex)) {
-        selectedRowIds.push(this.adapter_.getRowIdAtIndex(rowIndex));
-      }
-    }
-
-    return selectedRowIds;
-  }
-
-  /**
-   * Handles header row checkbox change event.
-   */
-  handleHeaderRowCheckboxChange() {
-    const isHeaderChecked = this.adapter_.isHeaderRowCheckboxChecked();
-
-    for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
-      this.adapter_.setRowCheckboxCheckedAtIndex(rowIndex, isHeaderChecked);
-      this.selectRowAtIndex_(rowIndex, isHeaderChecked);
-    }
-
-    if (isHeaderChecked) {
-      this.adapter_.notifySelectedAll();
-    } else {
-      this.adapter_.notifyUnselectedAll();
-    }
-  }
-
-  /**
-   * Handles change event originated from row checkboxes.
-   */
-  handleRowCheckboxChange(event: Event) {
-    const rowIndex = this.adapter_.getRowIndexByChildElement(
-      event.target as HTMLInputElement
-    );
-
-    if (rowIndex === -1) {
-      return;
-    }
-
-    const selected = this.adapter_.isCheckboxAtRowIndexChecked(rowIndex);
-
-    this.selectRowAtIndex_(rowIndex, selected);
-    this.setHeaderRowCheckboxState_();
-
-    const rowId = this.adapter_.getRowIdAtIndex(rowIndex);
-    this.adapter_.notifyRowSelectionChanged({ rowId, rowIndex, selected });
-  }
-
-  /**
-   * Updates header row checkbox state based on number of rows selected.
-   */
-  private setHeaderRowCheckboxState_() {
-    if (this.adapter_.getSelectedRowCount() === this.adapter_.getRowCount()) {
-      this.adapter_.setHeaderRowCheckboxChecked(true);
-      this.adapter_.setHeaderRowCheckboxIndeterminate(false);
-    } else if (this.adapter_.getSelectedRowCount() === 0) {
-      this.adapter_.setHeaderRowCheckboxIndeterminate(false);
-      this.adapter_.setHeaderRowCheckboxChecked(false);
-    } else {
-      this.adapter_.setHeaderRowCheckboxIndeterminate(true);
-      this.adapter_.setHeaderRowCheckboxChecked(false);
-    }
-  }
-
-  /**
-   * Sets the attributes of row element based on selection state.
-   */
-  private selectRowAtIndex_(rowIndex: number, selected: boolean) {
-    if (selected) {
-      this.adapter_.addClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
-      this.adapter_.setAttributeAtRowIndex(
-        rowIndex,
-        strings.ARIA_SELECTED,
-        "true"
-      );
-    } else {
-      this.adapter_.removeClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
-      this.adapter_.setAttributeAtRowIndex(
-        rowIndex,
-        strings.ARIA_SELECTED,
-        "false"
-      );
-    }
-  }
-}

mdc-data-table/index.d.ts

@@ -1,27 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-export * from "./adapter";
-export * from "./component";
-export * from "./foundation";
-export * from "./constants";
-export * from "./types";

mdc-data-table/index.js

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-export * from "./component";
-export * from "./foundation";
-export * from "./constants";
-//# sourceMappingURL=index.js.map

mdc-data-table/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}

mdc-data-table/index.ts

@@ -1,28 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-export * from "./adapter";
-export * from "./component";
-export * from "./foundation";
-export * from "./constants";
-export * from "./types";

mdc-data-table/mdc-data-table.scss

@@ -1,25 +0,0 @@
-//
-// Copyright 2019 Google Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-//
-
-@import "./mixins";
-@include mdc-data-table-core-styles;
-@include mdc-data-table-theme-baseline;

mdc-data-table/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "@material/data-table",
-  "version": "3.1.1",
-  "description": "The Material Components Web data table component",
-  "license": "MIT",
-  "keywords": [
-    "material components",
-    "material design",
-    "data table"
-  ],
-  "main": "dist/mdc.dataTable.js",
-  "module": "index.js",
-  "sideEffects": false,
-  "types": "dist/mdc.dataTable.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/material-components/material-components-web.git"
-  },
-  "dependencies": {
-    "@material/animation": "^3.1.0",
-    "@material/base": "^3.1.0",
-    "@material/checkbox": "^3.1.0",
-    "@material/dom": "^3.1.0",
-    "@material/elevation": "^3.1.0",
-    "@material/feature-targeting": "^3.1.0",
-    "@material/ripple": "^3.1.0",
-    "@material/rtl": "^3.1.0",
-    "@material/shape": "^3.1.0",
-    "@material/theme": "^3.1.0",
-    "@material/typography": "^3.1.0",
-    "tslib": "^1.10.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4a7d0aa41afb294e54c4aeae56558b1793416074"
-}

mdc-data-table/types.d.ts

@@ -1,27 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-export interface MDCDataTableRowSelectionChangedEventDetail {
-  rowIndex: number;
-  rowId: string | null;
-  selected: boolean;
-}

mdc-data-table/types.js

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-//# sourceMappingURL=types.js.map

mdc-data-table/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG"}