├── .circleci └── config.yml ├── .github ├── stale.yml └── workflows │ └── build.yml ├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── CODE_OF_CONDUCT.md ├── LICENSE.txt ├── NOTICE.txt ├── README.md ├── bundle ├── CHANGELOG.md ├── LICENSE.txt ├── NOTICE.txt ├── karma.conf.ts ├── package-lock.json ├── package.json ├── src │ ├── components │ │ ├── abstract │ │ │ ├── abstract.mdc.input.ts │ │ │ ├── abstract.mdc.label.ts │ │ │ └── mixin.mdc.hasid.ts │ │ ├── button │ │ │ ├── mdc.button.directive.spec.ts │ │ │ └── mdc.button.directive.ts │ │ ├── card │ │ │ └── mdc.card.directive.ts │ │ ├── checkbox │ │ │ ├── mdc.checkbox.directive.spec.ts │ │ │ └── mdc.checkbox.directive.ts │ │ ├── chips │ │ │ ├── mdc.chip.directive.spec.ts │ │ │ └── mdc.chip.directive.ts │ │ ├── dialog │ │ │ ├── mdc.dialog.directive.spec.ts │ │ │ └── mdc.dialog.directive.ts │ │ ├── drawer │ │ │ ├── mdc.drawer.directive.spec.ts │ │ │ └── mdc.drawer.directive.ts │ │ ├── elevation │ │ │ ├── mdc.elevation.directive.spec.ts │ │ │ └── mdc.elevation.directive.ts │ │ ├── fab │ │ │ ├── mdc.fab.directive.spec.ts │ │ │ └── mdc.fab.directive.ts │ │ ├── floating-label │ │ │ └── mdc.floating-label.directive.ts │ │ ├── focus-trap │ │ │ ├── abstract.mdc.focus-trap.ts │ │ │ ├── mdc.focus-trap.directive.spec.ts │ │ │ └── mdc.focus-trap.directive.ts │ │ ├── form-field │ │ │ └── mdc.form-field.directive.ts │ │ ├── icon-button │ │ │ ├── abstract.mdc.icon.ts │ │ │ ├── mdc.icon-button.directive.spec.ts │ │ │ └── mdc.icon-button.directive.ts │ │ ├── linear-progress │ │ │ ├── mdc.linear-progress.directive.spec.ts │ │ │ └── mdc.linear-progress.directive.ts │ │ ├── list │ │ │ ├── mdc.list.directive.spec.ts │ │ │ └── mdc.list.directive.ts │ │ ├── menu-surface │ │ │ ├── mdc.menu-surface.directive.spec.ts │ │ │ └── mdc.menu-surface.directive.ts │ │ ├── menu │ │ │ ├── mdc.menu.directive.spec.ts │ │ │ └── mdc.menu.directive.ts │ │ ├── notched-outline │ │ │ └── mdc.notched-outline.directive.ts │ │ ├── radio │ │ │ ├── mdc.radio.directive.spec.ts │ │ │ └── mdc.radio.directive.ts │ │ ├── ripple │ │ │ ├── abstract.mdc.ripple.ts │ │ │ ├── mdc.ripple.directive.spec.ts │ │ │ └── mdc.ripple.directive.ts │ │ ├── select │ │ │ ├── mdc.select.directive.spec.ts │ │ │ └── mdc.select.directive.ts │ │ ├── slider │ │ │ ├── mdc.slider.directive.spec.ts │ │ │ └── mdc.slider.directive.ts │ │ ├── snackbar │ │ │ ├── mdc.snackbar.message.ts │ │ │ ├── mdc.snackbar.service.spec.ts │ │ │ └── mdc.snackbar.service.ts │ │ ├── switch │ │ │ ├── mdc.switch.directive.spec.ts │ │ │ └── mdc.switch.directive.ts │ │ ├── tab │ │ │ ├── mdc.tab.bar.directive.spec.ts │ │ │ ├── mdc.tab.bar.directive.ts │ │ │ ├── mdc.tab.directive.spec.ts │ │ │ ├── mdc.tab.directive.ts │ │ │ ├── mdc.tab.indicator.directive.spec.ts │ │ │ ├── mdc.tab.indicator.directive.ts │ │ │ ├── mdc.tab.router.directive.spec.ts │ │ │ ├── mdc.tab.router.directive.ts │ │ │ ├── mdc.tab.scroller.directive.spec.ts │ │ │ └── mdc.tab.scroller.directive.ts │ │ ├── text-field │ │ │ ├── mdc.text-field.directive.spec.ts │ │ │ └── mdc.text-field.directive.ts │ │ ├── top-app-bar │ │ │ ├── mdc.top-app-bar.directive.spec.ts │ │ │ └── mdc.top-app-bar.directive.ts │ │ └── utility │ │ │ ├── mdc.scrollbar-resize.directive.ts │ │ │ ├── mdc.standin.ts │ │ │ └── router.active.detector.ts │ ├── material.module.ts │ ├── material.ng.module.ts │ ├── material.ts │ ├── test.ts │ ├── testutils │ │ ├── page.test.ts │ │ └── util.ts │ └── utils │ │ ├── mdc.event.registry.ts │ │ ├── mixins.ts │ │ ├── thirdparty.announce.ts │ │ ├── value.utils.spec.ts │ │ └── value.utils.ts ├── tools │ └── dgeni │ │ ├── LICENSE.txt │ │ ├── common │ │ ├── decorators.ts │ │ └── normalize-method-parameters.ts │ │ ├── index.ts │ │ ├── processors │ │ ├── categorizer.ts │ │ ├── component-grouper.ts │ │ ├── docs-private-filter.ts │ │ └── extends-joiner.ts │ │ ├── templates │ │ ├── additional.template.html │ │ ├── class.template.html │ │ ├── common.template.html │ │ ├── componentGroup.template.html │ │ ├── directive.template.html │ │ ├── method-list.template.html │ │ ├── method.template.html │ │ ├── property-list.template.html │ │ ├── property.template.html │ │ └── service.template.html │ │ └── tsconfig.json ├── tsconfig-base.json ├── tsconfig-lib.json └── tsconfig.json ├── commitlint.config.js ├── docs └── migration │ └── migration-0-to-1.md ├── package-lock.json ├── package.json ├── site ├── .browserslistrc ├── .firebaserc ├── CHANGELOG.md ├── LICENSE.txt ├── NOTICE.txt ├── angular.json ├── firebase.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── prerender.conf.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── components.module.ts │ │ ├── components.routing.module.ts │ │ ├── components │ │ │ ├── app.ts │ │ │ ├── code.sample │ │ │ │ ├── code.sample.component.html │ │ │ │ ├── code.sample.component.ts │ │ │ │ └── index.ts │ │ │ ├── components.ts │ │ │ ├── directives.demo │ │ │ │ ├── abstract.demo.component.ts │ │ │ │ ├── button.directives.component.html │ │ │ │ ├── button.directives.component.ts │ │ │ │ ├── card.directives.component.html │ │ │ │ ├── card.directives.component.ts │ │ │ │ ├── checkbox.directives.component.html │ │ │ │ ├── checkbox.directives.component.ts │ │ │ │ ├── chips.directives.component.html │ │ │ │ ├── chips.directives.component.ts │ │ │ │ ├── dialog.directives.component.html │ │ │ │ ├── dialog.directives.component.ts │ │ │ │ ├── drawer.directives.component.html │ │ │ │ ├── drawer.directives.component.ts │ │ │ │ ├── elevation.directives.component.html │ │ │ │ ├── elevation.directives.component.ts │ │ │ │ ├── fab.directives.component.html │ │ │ │ ├── fab.directives.component.ts │ │ │ │ ├── focus-trap.directives.component.html │ │ │ │ ├── focus-trap.directives.component.ts │ │ │ │ ├── icon-button.directives.component.html │ │ │ │ ├── icon-button.directives.component.ts │ │ │ │ ├── icon-toggle.directives.component.html │ │ │ │ ├── icon-toggle.directives.component.ts │ │ │ │ ├── index.ts │ │ │ │ ├── linear-progress.directives.component.html │ │ │ │ ├── linear-progress.directives.component.ts │ │ │ │ ├── list.directives.component.html │ │ │ │ ├── list.directives.component.ts │ │ │ │ ├── menu-surface.directives.component.html │ │ │ │ ├── menu-surface.directives.component.ts │ │ │ │ ├── menu.directives.component.html │ │ │ │ ├── menu.directives.component.ts │ │ │ │ ├── radio.directives.component.html │ │ │ │ ├── radio.directives.component.ts │ │ │ │ ├── ripple.directives.component.html │ │ │ │ ├── ripple.directives.component.ts │ │ │ │ ├── select.directives.component.html │ │ │ │ ├── select.directives.component.ts │ │ │ │ ├── slider.directives.component.html │ │ │ │ ├── slider.directives.component.ts │ │ │ │ ├── snackbar.directives.component.html │ │ │ │ ├── snackbar.directives.component.ts │ │ │ │ ├── switch.directives.component.html │ │ │ │ ├── switch.directives.component.ts │ │ │ │ ├── tab.directives.component.html │ │ │ │ ├── tab.directives.component.ts │ │ │ │ ├── text-field.directives.component.html │ │ │ │ ├── text-field.directives.component.ts │ │ │ │ ├── top-app-bar.directives.component.html │ │ │ │ ├── top-app-bar.directives.component.ts │ │ │ │ ├── utility.directives.component.html │ │ │ │ └── utility.directives.component.ts │ │ │ ├── docs │ │ │ │ ├── docs.component.html │ │ │ │ ├── docs.component.ts │ │ │ │ ├── gettingstarted.component.html │ │ │ │ ├── gettingstarted.component.ts │ │ │ │ ├── guides.component.html │ │ │ │ ├── guides.component.ts │ │ │ │ ├── ie11.component.html │ │ │ │ ├── ie11.component.ts │ │ │ │ ├── index.component.html │ │ │ │ ├── index.component.ts │ │ │ │ └── index.ts │ │ │ ├── highlightjs │ │ │ │ └── highlightjs.directive.ts │ │ │ ├── notfound │ │ │ │ ├── index.ts │ │ │ │ ├── notfound.component.html │ │ │ │ └── notfound.component.ts │ │ │ ├── shared.ts │ │ │ ├── snippets │ │ │ │ ├── abstract.snippet.component.ts │ │ │ │ ├── directives │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── snippet.button.component.html │ │ │ │ │ ├── snippet.button.component.scss │ │ │ │ │ ├── snippet.button.component.ts │ │ │ │ │ ├── snippet.card.component.html │ │ │ │ │ ├── snippet.card.component.scss │ │ │ │ │ ├── snippet.card.component.ts │ │ │ │ │ ├── snippet.checkbox.component.html │ │ │ │ │ ├── snippet.checkbox.component.scss │ │ │ │ │ ├── snippet.checkbox.component.ts │ │ │ │ │ ├── snippet.chips.choice.component.html │ │ │ │ │ ├── snippet.chips.choice.component.ts │ │ │ │ │ ├── snippet.chips.component.html │ │ │ │ │ ├── snippet.chips.component.ts │ │ │ │ │ ├── snippet.chips.filter.component.html │ │ │ │ │ ├── snippet.chips.filter.component.ts │ │ │ │ │ ├── snippet.chips.input.component.html │ │ │ │ │ ├── snippet.chips.input.component.ts │ │ │ │ │ ├── snippet.dialog.component.html │ │ │ │ │ ├── snippet.dialog.component.ts │ │ │ │ │ ├── snippet.drawer.below.component.html │ │ │ │ │ ├── snippet.drawer.below.component.scss │ │ │ │ │ ├── snippet.drawer.below.component.ts │ │ │ │ │ ├── snippet.drawer.component.html │ │ │ │ │ ├── snippet.drawer.component.scss │ │ │ │ │ ├── snippet.drawer.component.ts │ │ │ │ │ ├── snippet.elevation.component.html │ │ │ │ │ ├── snippet.elevation.component.scss │ │ │ │ │ ├── snippet.elevation.component.ts │ │ │ │ │ ├── snippet.fab.component.html │ │ │ │ │ ├── snippet.fab.component.scss │ │ │ │ │ ├── snippet.fab.component.ts │ │ │ │ │ ├── snippet.focus-trap.component.html │ │ │ │ │ ├── snippet.focus-trap.component.scss │ │ │ │ │ ├── snippet.focus-trap.component.ts │ │ │ │ │ ├── snippet.icon-button.component.html │ │ │ │ │ ├── snippet.icon-button.component.scss │ │ │ │ │ ├── snippet.icon-button.component.ts │ │ │ │ │ ├── snippet.linear-progress.component.html │ │ │ │ │ ├── snippet.linear-progress.component.ts │ │ │ │ │ ├── snippet.list.component.html │ │ │ │ │ ├── snippet.list.component.scss │ │ │ │ │ ├── snippet.list.component.ts │ │ │ │ │ ├── snippet.list.twoline.component.html │ │ │ │ │ ├── snippet.list.twoline.component.scss │ │ │ │ │ ├── snippet.list.twoline.component.ts │ │ │ │ │ ├── snippet.menu.component.html │ │ │ │ │ ├── snippet.menu.component.scss │ │ │ │ │ ├── snippet.menu.component.ts │ │ │ │ │ ├── snippet.radio.component.html │ │ │ │ │ ├── snippet.radio.component.scss │ │ │ │ │ ├── snippet.radio.component.ts │ │ │ │ │ ├── snippet.ripple.component.html │ │ │ │ │ ├── snippet.ripple.component.scss │ │ │ │ │ ├── snippet.ripple.component.ts │ │ │ │ │ ├── snippet.select.component.html │ │ │ │ │ ├── snippet.select.component.scss │ │ │ │ │ ├── snippet.select.component.ts │ │ │ │ │ ├── snippet.slider.component.html │ │ │ │ │ ├── snippet.slider.component.ts │ │ │ │ │ ├── snippet.snackbar.component.html │ │ │ │ │ ├── snippet.snackbar.component.ts │ │ │ │ │ ├── snippet.switch.component.html │ │ │ │ │ ├── snippet.switch.component.ts │ │ │ │ │ ├── snippet.tab.icons.component.html │ │ │ │ │ ├── snippet.tab.icons.component.ts │ │ │ │ │ ├── snippet.tab.routing.component.html │ │ │ │ │ ├── snippet.tab.routing.component.ts │ │ │ │ │ ├── snippet.tab.routing.module.ts │ │ │ │ │ ├── snippet.tab.routing.page1.ts │ │ │ │ │ ├── snippet.tab.routing.page2.ts │ │ │ │ │ ├── snippet.tab.scroller.component.html │ │ │ │ │ ├── snippet.tab.scroller.component.ts │ │ │ │ │ ├── snippet.tab.simple.component.html │ │ │ │ │ ├── snippet.tab.simple.component.ts │ │ │ │ │ ├── snippet.text-field.component.html │ │ │ │ │ ├── snippet.text-field.component.ts │ │ │ │ │ ├── snippet.text-field.icon.component.html │ │ │ │ │ ├── snippet.text-field.icon.component.ts │ │ │ │ │ ├── snippet.text-field.textarea.component.html │ │ │ │ │ ├── snippet.text-field.textarea.component.ts │ │ │ │ │ ├── snippet.top-app-bar.component.html │ │ │ │ │ ├── snippet.top-app-bar.component.scss │ │ │ │ │ └── snippet.top-app-bar.component.ts │ │ │ │ └── index.ts │ │ │ └── theme │ │ │ │ ├── index.ts │ │ │ │ ├── theme.switcher.component.html │ │ │ │ └── theme.switcher.component.ts │ │ ├── messages.json │ │ ├── overview.component.html │ │ ├── overview.component.ts │ │ ├── services │ │ │ ├── index.ts │ │ │ └── theme.service.ts │ │ └── shared.module.ts │ ├── assets │ │ └── img │ │ │ ├── clipart │ │ │ ├── agnostic.png │ │ │ ├── rocket.png │ │ │ ├── shark.png │ │ │ ├── theming.png │ │ │ └── webdesign.png │ │ │ ├── logos │ │ │ ├── bloxmaterial.svg │ │ │ ├── github.svg │ │ │ └── twitter.svg │ │ │ ├── mdc-demos │ │ │ ├── 1-1.jpg │ │ │ ├── 16-9.jpg │ │ │ ├── animal1.svg │ │ │ ├── animal2.svg │ │ │ └── animal3.svg │ │ │ ├── mdc-icons │ │ │ ├── animation.svg │ │ │ ├── bottom_navigation.svg │ │ │ ├── bottom_sheet.svg │ │ │ ├── button.svg │ │ │ ├── card.svg │ │ │ ├── checkbox.svg │ │ │ ├── chip.svg │ │ │ ├── color.svg │ │ │ ├── component.svg │ │ │ ├── data_table.svg │ │ │ ├── dialog.svg │ │ │ ├── expansion_panel.svg │ │ │ ├── feature_highlight.svg │ │ │ ├── header.svg │ │ │ ├── list.svg │ │ │ ├── mdc-logo.svg │ │ │ ├── menu.svg │ │ │ ├── progress_activity.svg │ │ │ ├── progress_linear.svg │ │ │ ├── radio.svg │ │ │ ├── responsive_layout.svg │ │ │ ├── ripple.svg │ │ │ ├── shadow.svg │ │ │ ├── side_navigation.svg │ │ │ ├── slider.svg │ │ │ ├── snackbar.svg │ │ │ ├── stepper.svg │ │ │ ├── subheader.svg │ │ │ ├── switch.svg │ │ │ ├── tabs.svg │ │ │ ├── text-field.svg │ │ │ ├── theme.svg │ │ │ ├── toolbar.svg │ │ │ ├── tooltip.svg │ │ │ └── typography.svg │ │ │ ├── photos │ │ │ ├── bridge.jpg │ │ │ ├── crayons.jpg │ │ │ ├── marker.jpg │ │ │ ├── mobile.jpg │ │ │ ├── shark.jpg │ │ │ └── speed.jpg │ │ │ └── themes │ │ │ └── palette.svg │ ├── custom-typings.d.ts │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── env.debug.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── html │ │ └── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── public │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── manifest.json │ │ ├── mstile-144x144.png │ │ ├── mstile-150x150.png │ │ ├── mstile-310x150.png │ │ ├── mstile-310x310.png │ │ ├── mstile-70x70.png │ │ ├── robots.txt │ │ └── safari-pinned-tab.svg │ ├── runtime.ts │ ├── stackblitz.template │ │ ├── angular.json.template │ │ ├── src │ │ │ ├── app │ │ │ │ └── app.module.ts.template │ │ │ ├── index.html.template │ │ │ ├── main.ts.template │ │ │ ├── polyfills.ts.template │ │ │ └── styles.scss.template │ │ └── tsconfig.json.template │ ├── style │ │ ├── _app.scss │ │ ├── _base.scss │ │ ├── _code-sample.scss │ │ ├── _components-list.scss │ │ ├── _docs-api.scss │ │ ├── _home.scss │ │ ├── _mdc.scss │ │ ├── _mixins.scss │ │ ├── _page-footer.scss │ │ ├── _page-header.scss │ │ ├── _theme-colors.scss │ │ ├── _theme-switcher.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ ├── dark.scss │ │ ├── funky.scss │ │ └── highlight │ │ │ ├── _dark.scss │ │ │ └── _light.scss │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json └── tools ├── commit-release.js └── prepare-release.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.settings 2 | /node_modules/ 3 | /bundle/apidocs/ 4 | /bundle/build/ 5 | /bundle/coverage/ 6 | /bundle/dist/ 7 | /bundle/node_modules/ 8 | /site/build/ 9 | /site/dist/ 10 | /site/node_modules/ 11 | /site/.firebase/ 12 | /.project 13 | /tmp 14 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "bundle/node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /NOTICE.txt: -------------------------------------------------------------------------------- 1 | Blox.Src.Zone - Tools for Developers 2 | Copyright 2017 by Src.Zone (Amsterdam), 3 | https://blox.src.zone/ 4 | 5 | This product includes software developed by The.Src.Zone 6 | (http://the.src.zone/), licensed under the Apache 7 | License Version 2.0. 8 | 9 | This product includes software developed by third parties 10 | under different licenses. See bundle/NOTICE.txt and 11 | site/NOTICE.txt. -------------------------------------------------------------------------------- /bundle/NOTICE.txt: -------------------------------------------------------------------------------- 1 | Blox.Src.Zone - Tools for Developers 2 | Copyright 2017 by Src.Zone (Amsterdam), 3 | https://blox.src.zone/ 4 | 5 | This product includes software developed by The.Src.Zone 6 | (http://the.src.zone/), licensed under the Apache 7 | License Version 2.0. 8 | 9 | The announce utility used in mdcChipSet is derived from 10 | https://github.com/material-components/material-components-web/blob/master/packages/mdc-dom/announce.ts 11 | This code is Copyright 2020 by Google Inc, and licensed 12 | under the MIT-License. See src/utils/thirdparty.announce.ts 13 | 14 | Portions of the code in tools/dgeni are derived from 15 | https://github.com/angular/material2/tree/2.0.0-beta.12/tools/dgeni 16 | Those portions are Copyright 2017 Google LLC, and licensed 17 | under the MIT-License. See tools/dgeni/LICENSE.txt 18 | -------------------------------------------------------------------------------- /bundle/src/components/abstract/abstract.mdc.input.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef } from '@angular/core'; 2 | 3 | /** @docs-private */ 4 | export abstract class AbstractMdcInput { 5 | /** @internal */ 6 | abstract id: string | null; 7 | /** @internal */ 8 | abstract _elm: ElementRef; 9 | } 10 | -------------------------------------------------------------------------------- /bundle/src/components/abstract/abstract.mdc.label.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef } from '@angular/core'; 2 | 3 | /** @docs-private */ 4 | export abstract class AbstractMdcLabel { 5 | /** @internal */ 6 | abstract for: string | null; 7 | /** @internal */ 8 | abstract _elm: ElementRef; 9 | } 10 | -------------------------------------------------------------------------------- /bundle/src/components/focus-trap/abstract.mdc.focus-trap.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef } from '@angular/core'; 2 | 3 | /** @docs-private */ 4 | export interface FocusTrapHandle { 5 | readonly active: boolean; 6 | untrap(): void; 7 | } 8 | 9 | /** @docs-private */ 10 | export abstract class AbstractMdcFocusInitial { 11 | /** @internal */ readonly priority: number | null = null; 12 | /** @internal */ readonly _elm: ElementRef | null = null; 13 | } 14 | 15 | /** @docs-private */ 16 | export abstract class AbstractMdcFocusTrap { 17 | constructor() {} 18 | 19 | abstract trapFocus(): FocusTrapHandle; 20 | } 21 | -------------------------------------------------------------------------------- /bundle/src/components/icon-button/abstract.mdc.icon.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Inject, Renderer2 } from '@angular/core'; 2 | import { DOCUMENT } from '@angular/common'; 3 | import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple'; 4 | import { MdcEventRegistry } from '../../utils/mdc.event.registry'; 5 | 6 | /** @docs-private */ 7 | @Directive() 8 | export abstract class AbstractMdcIcon extends AbstractMdcRipple { 9 | constructor(public _elm: ElementRef, renderer: Renderer2, registry: MdcEventRegistry, @Inject(DOCUMENT) doc: any) { 10 | super(_elm, renderer, registry, doc as Document); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /bundle/src/components/snackbar/mdc.snackbar.message.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The interface accepted by MdcSnackbarService::show(). 3 | */ 4 | export interface MdcSnackbarMessage { 5 | /** 6 | * The text message to display 7 | */ 8 | message: string; 9 | /** 10 | * The text to display for the action button (optional, default is no action button). 11 | */ 12 | actionText?: string, 13 | /** 14 | * Action buttons with long texts should be positioned below the label instead of alongside it. 15 | * Set the stacked option to true to accomplish this. 16 | */ 17 | stacked?: boolean, 18 | /** 19 | * The amount of time in milliseconds to show the snackbar (optional, default is 5000ms). 20 | * Value must be between 4000 and 10000, or -1 to disable the timeout completely. 21 | */ 22 | timeout?: number, 23 | } 24 | -------------------------------------------------------------------------------- /bundle/src/material.ts: -------------------------------------------------------------------------------- 1 | // Just a dummy file: 2 | // The build/material.js flatflatModuleOutFile in our tsconfig.json has sourcemappings to 3 | // non-existent src/material.ts. This empty file prevents errors during the building 4 | // of sourcemaps for material.js. It's probably an angular ngc bug. Having an empty file 5 | // at the referenced location prevents having errors like: 6 | // {"errno":-4058,"code":"ENOENT","syscall":"open","path":"...\\material\\src\\material.ts"} 7 | // in our sourcemaps 8 | -------------------------------------------------------------------------------- /bundle/src/testutils/util.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Like spyOnAllFunctions, but that function has a bug in the current Jasmine, leading to exception 3 | * when trying it on a foundation class. 4 | */ 5 | export function spyOnAll(object: any) { 6 | let pointer = object; 7 | while (pointer) { 8 | for (const prop in pointer) { 9 | if (object[prop] && object[prop].and) 10 | // already spied on: 11 | continue; 12 | if (Object.prototype.hasOwnProperty.call(pointer, prop) && pointer[prop] instanceof Function) { 13 | const descriptor = Object.getOwnPropertyDescriptor(pointer, prop); 14 | if ((descriptor!.writable || descriptor!.set) && descriptor!.configurable) { 15 | spyOn(object, prop).and.callThrough(); 16 | } 17 | } 18 | } 19 | pointer = Object.getPrototypeOf(pointer); 20 | } 21 | return object; 22 | } 23 | -------------------------------------------------------------------------------- /bundle/src/utils/mixins.ts: -------------------------------------------------------------------------------- 1 | export function applyMixins(derivedCtor: any, baseCtors: any[]) { 2 | baseCtors.forEach(baseCtor => { 3 | Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => { 4 | Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name)!); 5 | }); 6 | }); 7 | } 8 | -------------------------------------------------------------------------------- /bundle/src/utils/value.utils.spec.ts: -------------------------------------------------------------------------------- 1 | import { asBoolean, asBooleanOrNull } from './value.utils'; 2 | 3 | describe('Value Utils', () => { 4 | it('asBoolean should return correct values', (() => { 5 | expect(asBoolean(null)).toBe(false); 6 | expect(asBoolean(undefined)).toBe(false); 7 | expect(asBoolean(false)).toBe(false); 8 | expect(asBoolean('false')).toBe(false); 9 | 10 | expect(asBoolean(true)).toBe(true); 11 | expect(asBoolean(0)).toBe(true); 12 | expect(asBoolean('0')).toBe(true); 13 | expect(asBoolean(1)).toBe(true); 14 | expect(asBoolean('')).toBe(true); 15 | expect(asBoolean({})).toBe(true); 16 | })); 17 | 18 | it('asBooleanOrNull should return correct values', (() => { 19 | expect(asBooleanOrNull(null)).toBeNull(); 20 | expect(asBooleanOrNull(undefined)).toBeUndefined(); 21 | 22 | expect(asBooleanOrNull(false)).toBe(false); 23 | expect(asBooleanOrNull('false')).toBe(false); 24 | 25 | expect(asBooleanOrNull(true)).toBe(true); 26 | expect(asBooleanOrNull(0)).toBe(true); 27 | expect(asBooleanOrNull('0')).toBe(true); 28 | expect(asBooleanOrNull(1)).toBe(true); 29 | expect(asBooleanOrNull('')).toBe(true); 30 | expect(asBooleanOrNull({})).toBe(true); 31 | })); 32 | }); 33 | -------------------------------------------------------------------------------- /bundle/src/utils/value.utils.ts: -------------------------------------------------------------------------------- 1 | export function asBoolean(value: any) { 2 | return value != null && `${value}` !== 'false'; 3 | } 4 | 5 | export function asBooleanOrNull(value: any) { 6 | if (value == null) 7 | return value; 8 | return `${value}` !== 'false'; 9 | } 10 | 11 | export function asNumberOrNull(value: any) { 12 | if (value == null) 13 | return value; 14 | return +value; 15 | } 16 | -------------------------------------------------------------------------------- /bundle/tools/dgeni/LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2017 Google LLC. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/additional.template.html: -------------------------------------------------------------------------------- 1 | {%- if doc.type === 'class' -%} 2 |

Class: {$ classdoc.name $}

3 | {%- else -%} 4 |

Interface: {$ classdoc.name $}

5 | {%- endif -%} 6 | {$ class(classdoc) $} -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/class.template.html: -------------------------------------------------------------------------------- 1 | {%- if class.directiveSelectors -%} 2 |

3 | Selector: 4 | {% for selector in class.directiveSelectors %} 5 | {$ selector $} 6 | {% endfor %} 7 | {%- if class.directiveExportAs -%} 8 |
9 | Exported as: 10 | {$ class.directiveExportAs $} 11 | {%- endif -%} 12 |

13 | {%- endif -%} 14 | 15 | {%- if class.description -%} 16 |
{$ class.description | marked | safe $}
17 | {%- endif -%} 18 | 19 | {%- if class.isDeprecated -%} 20 |
Deprecated
21 | {%- endif -%} 22 | 23 | {$ propertyList(class.properties) $} 24 | 25 | {$ methodList(class.methods) $} -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/common.template.html: -------------------------------------------------------------------------------- 1 | ## {$ doc.name $} ({$ doc.docType $}) 2 | -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/componentGroup.template.html: -------------------------------------------------------------------------------- 1 | {# Defines macros for reusable templates. #} 2 | {% macro method(method) -%} 3 | {% include 'method.template.html' %} 4 | {% endmacro %} 5 | 6 | {% macro property(property) -%} 7 | {% include 'property.template.html' %} 8 | {% endmacro %} 9 | 10 | {% macro methodList(methodList) -%} 11 | {% include 'method-list.template.html' %} 12 | {% endmacro %} 13 | 14 | {% macro propertyList(propertyList) -%} 15 | {% include 'property-list.template.html' %} 16 | {% endmacro %} 17 | 18 | {% macro class(class) -%} 19 | {% include 'class.template.html' %} 20 | {% endmacro %} 21 | 22 | {% macro directive(directive) -%} 23 | {% include 'directive.template.html' %} 24 | {% endmacro %} 25 | 26 | {% macro service(service) -%} 27 | {% include 'service.template.html' %} 28 | {% endmacro %} 29 | 30 | {% macro additional(classdoc) -%} 31 | {% include 'additional.template.html' %} 32 | {% endmacro %} 33 | 34 |

API

35 | {%- if doc.services.length -%} 36 | {% for s in doc.services %} 37 | {$ service(s) $} 38 | {% endfor %} 39 | {%- endif -%} 40 | 41 | {%- if doc.directives.length -%} 42 | {% for d in doc.directives %} 43 | {$ directive(d) $} 44 | {% endfor %} 45 | {%- endif -%} 46 | 47 | {%- if doc.additionalClasses.length -%} 48 | {% for cl in doc.additionalClasses %} 49 | {$ additional(cl) $} 50 | {% endfor %} 51 | {%- endif -%} 52 | -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/directive.template.html: -------------------------------------------------------------------------------- 1 |

Directive: {$ directive.name $}

2 | 3 | {$ class(directive) $} -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/method-list.template.html: -------------------------------------------------------------------------------- 1 | {%- if methodList.length -%} 2 |

Methods

3 | {% for m in methodList %} 4 | {$ method(m) $} 5 | {% endfor %} 6 | {%- endif -%} -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/property-list.template.html: -------------------------------------------------------------------------------- 1 | {%- if propertyList.length -%} 2 | 3 | 4 | 5 | 6 | 7 | {% for p in propertyList %} 8 | {$ property(p) $} 9 | {% endfor %} 10 |
PropertyDescription
11 | {%- endif -%} -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/property.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {%- if property.isDirectiveInput -%} 4 |
5 | {%- if property.directiveInputAlias -%} 6 | @Input({$ property.directiveInputAlias $}) 7 | {% else %} 8 | @Input() 9 | {%- endif -%} 10 |
11 | {%- endif -%} 12 | {%- if property.isDirectiveOutput -%} 13 |
14 | {%- if property.directiveOutputAlias -%} 15 | @Output({$ property.directiveOutputAlias $}) 16 | {% else %} 17 | @Output() 18 | {%- endif -%} 19 |
20 | {%- endif -%} 21 | {%- if property.isDeprecated -%} 22 |
Deprecated
23 | {%- endif -%} 24 | 25 |
26 | {$ property.name $} 27 |
28 | {$ property.type $} 29 | 30 | {$ property.description | marked | safe $} 31 | -------------------------------------------------------------------------------- /bundle/tools/dgeni/templates/service.template.html: -------------------------------------------------------------------------------- 1 |

Service: {$ service.name $}

2 | {$ class(service) $} -------------------------------------------------------------------------------- /bundle/tools/dgeni/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true, 4 | "noUnusedParameters": true, 5 | "lib": ["es2015", "dom", "es2016.array.include"], 6 | "module": "commonjs", 7 | "moduleResolution": "node", 8 | "outDir": "../../dist/tools/dgeni", 9 | "strictNullChecks": true, 10 | "noEmitOnError": true, 11 | "noImplicitAny": true, 12 | "target": "es5", 13 | "types": [ 14 | "node" 15 | ] 16 | }, 17 | "files": [ 18 | "index.ts" 19 | ] 20 | } -------------------------------------------------------------------------------- /bundle/tsconfig-base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "forceConsistentCasingInFileNames": true, 7 | "experimentalDecorators": true, 8 | "sourceMap": true, 9 | "noEmitHelpers": true, 10 | "importHelpers": true, 11 | "skipLibCheck": true, 12 | "declaration": true, 13 | "lib": [ 14 | "es2018", 15 | "dom" 16 | ], 17 | "typeRoots": [ 18 | "node_modules/@types" 19 | ] 20 | }, 21 | "compileOnSave": false, 22 | "buildOnSave": false 23 | } 24 | -------------------------------------------------------------------------------- /bundle/tsconfig-lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig-base.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "outDir": "AUTOGENERATED", 6 | "declarationDir": "AUTOGENERATED", 7 | "strict": true, 8 | "stripInternal": true, 9 | "inlineSourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": false 12 | }, 13 | "files": ["AUTOGENERATED"], 14 | "exclude": ["node_modules", "dist", "**/*.ngfactory.ts", "**/*.shim.ts", "**/*.spec.ts"], 15 | "angularCompilerOptions": { 16 | "enableIvy": false, 17 | "enableResourceInlining": true, 18 | "skipMetadataEmit" : false, 19 | "skipTemplateCodegen": true, 20 | "strictMetadataEmit": true, 21 | "strictInjectionParameters": true, 22 | "strictTemplates": true, 23 | "fullTemplateTypeCheck": true 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /bundle/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig-base.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "emitDecoratorMetadata": true 6 | }, 7 | "include": [ 8 | "node_modules/@types", 9 | "src/**/*.ts", 10 | "karma.conf.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | const { readdirSync, statSync } = require('fs'); 2 | const scopes = readdirSync('bundle/src/components'); 3 | 4 | module.exports = { 5 | rules: { 6 | 'body-leading-blank': [1, 'always'], 7 | 'scope-case': [2, 'always', 'lowerCase'], 8 | 'subject-empty': [2, 'never'], 9 | 'subject-full-stop': [2, 'never', '.'], 10 | 'type-case': [2, 'always', 'lowerCase'], 11 | 'type-empty': [2, 'never'], 12 | 'scope-enum': ctx => [2, 'always', scopes], 13 | 'type-enum': [ 14 | 2, 15 | 'always', 16 | [ 17 | 'build', 18 | 'ci', 19 | 'docs', 20 | 'feat', 21 | 'fix', 22 | 'perf', 23 | 'refactor', 24 | 'revert', 25 | 'style', 26 | 'test' 27 | ] 28 | ] 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "prepare-release": "node tools/prepare-release.js", 4 | "commit-release": "node tools/commit-release.js", 5 | "commitmsg": "commitlint -e" 6 | }, 7 | "devDependencies": { 8 | "@commitlint/cli": "^11.0.0", 9 | "conventional-changelog-angular": "^5.0.12", 10 | "conventional-changelog-cli": "^2.1.1", 11 | "conventional-recommended-bump": "^6.1.0", 12 | "husky": "^4.3.8", 13 | "shelljs": "^0.8.4", 14 | "simple-git": "^2.31.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /site/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | IE >= 11 -------------------------------------------------------------------------------- /site/.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "blox-36b2f" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /site/NOTICE.txt: -------------------------------------------------------------------------------- 1 | Blox.Src.Zone - Tools for Developers 2 | Copyright 2017 by Src.Zone (Amsterdam), 3 | https://blox.src.zone/ 4 | 5 | This product includes software developed by The.Src.Zone 6 | (http://the.src.zone/), licensed under the Apache 7 | License Version 2.0. 8 | 9 | The images in src/assets/img/mdc-icons, and 10 | src/assets/img/mdc-demos are developed by 11 | Google Inc. Copyright 2017 Google Inc. Licensed under 12 | the Apache License Version 2.0. 13 | 14 | Portions of the component descriptions are originally written 15 | by Google Inc. Copyright 2017 Google Inc. Licensed under 16 | the Apache License Version 2.0. 17 | -------------------------------------------------------------------------------- /site/firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "dist", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "cleanUrls": true, 10 | "trailingSlash": false, 11 | "headers": [ 12 | { 13 | "source": "**", 14 | "headers": [ 15 | {"key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains"}, 16 | {"key": "Referrer-Policy", "value": "same-origin"}, 17 | {"key": "X-Content-Type-Options", "value": "nosniff"}, 18 | {"key": "X-Frame-Options", "value": "SAMEORIGIN"}, 19 | {"key": "X-Xss-Protection", "value": "1; mode=block"}, 20 | {"key": "Cache-Control", "value": "max-age=3600,public,stale-while-revalidate=43200,proxy-revalidate"} 21 | ] 22 | }, 23 | { 24 | "source": "404.html", 25 | "headers": [ 26 | {"key": "Cache-Control", "value": "max-age=300,public,stale-while-revalidate=3600,proxy-revalidate"} 27 | ] 28 | }, 29 | { 30 | "regex": ".*[.\\][0-9a-f]{18,}\\..*", 31 | "headers": [ 32 | {"key": "Cache-Control", "value": "max-age=31536000,public,immutable"} 33 | ] 34 | } 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /site/prerender.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "dist", 3 | "template": "index.html", 4 | "seed": "/", 5 | "bootstrap": "blox-app", 6 | "transition": "ng-transition=blox-app", 7 | "port": 4000, 8 | "htmlSuffix": ".html", 9 | "directoryIndex": "index.html" 10 | } -------------------------------------------------------------------------------- /site/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule, PreloadAllModules } from '@angular/router'; 3 | import { 4 | IndexComponent, 5 | DocsComponent, 6 | GuidesComponent, 7 | GettingstartedComponent, 8 | IE11Component 9 | } from './components/app'; 10 | import { NotFoundComponent } from './components/shared'; 11 | 12 | const routes: Routes = [ 13 | {path: '', component: IndexComponent}, 14 | {path: 'guides', component: DocsComponent, children: [ 15 | {path: '', pathMatch: 'full', component: GuidesComponent}, 16 | {path: 'gettingstarted', component: GettingstartedComponent}, 17 | {path: 'ie11', component: IE11Component} 18 | ]}, 19 | {path: 'components', loadChildren: () => import(/* webpackChunkName: "comps" */'./components.module').then(m => m.ComponentsModule)}, 20 | {path: '**', component: NotFoundComponent} 21 | ]; 22 | 23 | @NgModule({ 24 | imports: [RouterModule.forRoot(routes, { 25 | scrollPositionRestoration: 'enabled', 26 | anchorScrolling: 'enabled', 27 | preloadingStrategy: PreloadAllModules, 28 | relativeLinkResolution: 'legacy' 29 | })], 30 | exports: [RouterModule] 31 | }) 32 | export class AppRoutingModule {} 33 | -------------------------------------------------------------------------------- /site/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(waitForAsync(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'site'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.componentInstance; 26 | expect(app.title).toEqual('site'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('site app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /site/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { LocationStrategy, PathLocationStrategy } from '@angular/common'; 4 | import { Angulartics2Module } from 'angulartics2'; 5 | import { InlineSVGModule } from 'ng-inline-svg'; 6 | import { HttpClientModule } from '@angular/common/http'; 7 | import { AppComponent } from './app.component'; 8 | import { AppRoutingModule } from './app-routing.module'; 9 | import { 10 | IndexComponent, 11 | DocsComponent, 12 | GuidesComponent, 13 | GettingstartedComponent, 14 | IE11Component, 15 | } from './components/app'; 16 | import { NotFoundComponent } from './components/shared'; 17 | import { SharedModule } from './shared.module'; 18 | 19 | @NgModule({ 20 | imports: [ 21 | BrowserModule.withServerTransition({appId: 'blox-app'}), 22 | AppRoutingModule, 23 | Angulartics2Module.forRoot(), 24 | SharedModule, 25 | InlineSVGModule.forRoot(), HttpClientModule 26 | ], 27 | declarations: [ 28 | AppComponent, 29 | 30 | IndexComponent, 31 | DocsComponent, 32 | GuidesComponent, 33 | GettingstartedComponent, 34 | IE11Component, 35 | 36 | NotFoundComponent, 37 | ], 38 | providers: [ 39 | {provide: LocationStrategy, useClass: PathLocationStrategy} 40 | ], 41 | bootstrap: [ AppComponent ] 42 | }) 43 | export class AppModule {} 44 | -------------------------------------------------------------------------------- /site/src/app/components/app.ts: -------------------------------------------------------------------------------- 1 | export * from './docs'; 2 | -------------------------------------------------------------------------------- /site/src/app/components/code.sample/index.ts: -------------------------------------------------------------------------------- 1 | export * from './code.sample.component'; 2 | -------------------------------------------------------------------------------- /site/src/app/components/components.ts: -------------------------------------------------------------------------------- 1 | export * from './directives.demo'; 2 | export * from './snippets'; 3 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/abstract.demo.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from "@angular/common"; 2 | import { AfterViewInit, Directive, Inject } from "@angular/core"; 3 | import { SafeHtml } from "@angular/platform-browser"; 4 | import { Router } from "@angular/router"; 5 | 6 | @Directive() 7 | export abstract class AbstractDemoComponent implements AfterViewInit { 8 | constructor(public apiDoc: SafeHtml, @Inject(DOCUMENT) private doc: Document, private router: Router) { 9 | } 10 | 11 | ngAfterViewInit() { 12 | // fix anchor links inside the apidocs parts, so that the angular router is used, 13 | // instead of a pull page (re)load for the linked page: 14 | this.doc.querySelector('div.blox-docs-api').querySelectorAll('a[href]').forEach(anchor => { 15 | const href = anchor.getAttribute('href'); 16 | if (href.startsWith('/')) { 17 | anchor.addEventListener('click', (e) => { 18 | this.router.navigateByUrl(href); 19 | e.preventDefault(); 20 | return false; 21 | }); 22 | } 23 | }); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/button.directives.component.html: -------------------------------------------------------------------------------- 1 |

Button

2 |

3 | The mdcButton directive creates a material designed button. 4 |

5 | 6 | Buttons & Anchors 7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/button.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-button-directives', 9 | templateUrl: './button.directives.component.html' 10 | }) 11 | export class ButtonDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/button.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'button'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/button.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/card.directives.component.html: -------------------------------------------------------------------------------- 1 |

Card

2 |

3 | The mdcCard creates a material designed card. 4 |

5 | 6 | Cards 7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/card.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-card-directives', 9 | templateUrl: './card.directives.component.html' 10 | }) 11 | export class CardDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/card.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'card'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/card.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/checkbox.directives.component.html: -------------------------------------------------------------------------------- 1 |

Checkbox

2 |

3 | The mdcCheckbox directive creates a material designed checkbox. 4 |

5 | 6 | Checkbox 7 | 8 | 9 | 10 |
-------------------------------------------------------------------------------- /site/src/app/components/directives.demo/checkbox.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-checkbox-directives', 9 | templateUrl: './checkbox.directives.component.html' 10 | }) 11 | export class CheckboxDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/checkbox.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'checkbox'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/checkbox.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/chips.directives.component.html: -------------------------------------------------------------------------------- 1 |

Chips

2 |

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. 3 |

4 | 5 | Action Chips 6 | 7 | 8 |
9 | 10 | Choice Chips 11 | 12 | 13 |
14 | 15 | Filter Chips 16 | 17 | 18 |
19 | 20 | Input Chips 21 | 22 | 23 | 24 |
-------------------------------------------------------------------------------- /site/src/app/components/directives.demo/chips.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-chips-directives', 9 | templateUrl: './chips.directives.component.html' 10 | }) 11 | export class ChipsDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/chip.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'chips'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/chips.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/dialog.directives.component.html: -------------------------------------------------------------------------------- 1 |

Dialog

2 |

3 | The mdcDialog directives can be used to create modal dialogs. 4 | Dialogs are typically used to inform users about tasks, and may require a user to take action or make 5 | a decision. 6 |

7 | 8 | Dialog 9 | 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/dialog.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-dialog-directives', 9 | templateUrl: './dialog.directives.component.html' 10 | }) 11 | export class DialogDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/dialog.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'dialog'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/dialog.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/drawer.directives.component.html: -------------------------------------------------------------------------------- 1 |

Drawers

2 |

3 | Different types of navigation drawers can be created with the mdcDrawer directive. 4 |

5 | 6 | Drawer 7 | 8 | 9 |
10 | 11 | Drawer below Toolbar 12 | 13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/drawer.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-drawer-directives', 9 | templateUrl: './drawer.directives.component.html' 10 | }) 11 | export class DrawerDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/side_navigation.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'drawer'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/drawer.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/elevation.directives.component.html: -------------------------------------------------------------------------------- 1 |

Elevation

2 |

3 | The mdcElevation directive is used to elevate elements above their surface. 4 | The value of the elevation determines the appearance and size of its shadow. 5 | The value should be between 0 (no elevation) and 24 (for 24 dp elevation). 6 |

7 | 8 | Elevation 9 | 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/elevation.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-elevation-directives', 9 | templateUrl: './elevation.directives.component.html' 10 | }) 11 | export class ElevationDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/shadow.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'elevation'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/elevation.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/fab.directives.component.html: -------------------------------------------------------------------------------- 1 |

Floating Action Button

2 |

3 | The mdcFab directive creates a material designed floating action button. 4 |

5 | 6 | Floating Action Buttons 7 | 8 | 9 | 10 |
-------------------------------------------------------------------------------- /site/src/app/components/directives.demo/fab.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-fab-directives', 9 | templateUrl: './fab.directives.component.html' 10 | }) 11 | export class FabDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/button.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'fab'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/fab.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/focus-trap.directives.component.html: -------------------------------------------------------------------------------- 1 |

Focus Trap

2 |

3 | The mdcFocusTrap directive makes it possible to trap focus inside 4 | a subtree of the DOM. An activated focus trap prevents users from interacting 5 | with elements outside the trapped area. This can be used to create an accessible 6 | experience for modal dialogs. Therefore mdcFocusTrap is typically 7 | used in combination with mdcDialog. 8 |

9 | 10 | Focus Trap 11 | 12 | 13 | 14 |
15 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/focus-trap.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-focus-trap-directives', 9 | templateUrl: './focus-trap.directives.component.html' 10 | }) 11 | export class FocusTrapDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/dialog.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'focus-trap'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/focus-trap.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/icon-button.directives.component.html: -------------------------------------------------------------------------------- 1 |

Icon Button

2 |

3 | The mdcIconButton directive creates a material designed icon buttons and toggle buttons. 4 |

5 | 6 | Icon Buttons 7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/icon-button.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-icon-button-directives', 9 | templateUrl: './icon-button.directives.component.html' 10 | }) 11 | export class IconButtonDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/component.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'icon-button'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/icon-button.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/icon-toggle.directives.component.html: -------------------------------------------------------------------------------- 1 |

Icon Toggle

2 |

3 | The mdcIconToggle directive creates a material designed icon toggle. 4 |

5 | 6 | Icon Toggles 7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/icon-toggle.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-icon-toggle-directives', 9 | templateUrl: './icon-toggle.directives.component.html' 10 | }) 11 | export class IconToggleDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/component.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'icon-toggle'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/icon-toggle.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/linear-progress.directives.component.html: -------------------------------------------------------------------------------- 1 |

Linear Progress

2 |

3 | The mdcLinearProgress directive creates a material designed linear progress indicator. 4 |

5 | 6 | 7 | Linear Progress 8 | 9 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/linear-progress.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-linear-progress-directives', 9 | templateUrl: './linear-progress.directives.component.html' 10 | }) 11 | export class LinearProgressDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/progress_linear.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'linear-progress'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/linear-progress.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/list.directives.component.html: -------------------------------------------------------------------------------- 1 |

List

2 |

3 | Directives for creating material designed lists and list-groups. 4 |

5 | 6 | Single Line List 7 | 8 | 9 |
10 | 11 | Two Line List 12 | 13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/list.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-list-directives', 9 | templateUrl: './list.directives.component.html' 10 | }) 11 | export class ListDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/list.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'list'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/list.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/menu-surface.directives.component.html: -------------------------------------------------------------------------------- 1 |

Menu Surface

2 |

Menu Surfaces (`mdcMenuSurface`) are reusable surfaces that appear above the content of the page 3 | when in view. They can be positioned adjacent to an element that triggers the activation (e.g. the 4 | provided `mdcMenuAnchor` directive).

5 |

Menu Surfaces are used by mdcMenu, and 6 | mdcSelectMenu. But they can also be used 7 | on their own.

8 | 9 |
10 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/menu-surface.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-menu-surface-directives', 9 | templateUrl: './menu-surface.directives.component.html' 10 | }) 11 | export class MenuSurfaceDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/menu.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'menu-surface'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/menu-surface.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/menu.directives.component.html: -------------------------------------------------------------------------------- 1 |

Menu

2 |

Directive for creating a material designed menu. 3 | The menu can either be positioned manually, or automatically, by anchoring it to an element.

4 |

Accessibility

5 |

6 | This directive will automatically apply proper accessibility attributes to the contained list, 7 | and its items:

8 | 14 | 15 | 16 | Menu 17 | 18 | 19 | 20 |
21 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/menu.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-menu-directives', 9 | templateUrl: './menu.directives.component.html' 10 | }) 11 | export class MenuDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/menu.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'menu'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/menu.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/radio.directives.component.html: -------------------------------------------------------------------------------- 1 |

Radio buttons

2 |

3 | The mdcRadio directive creates material designed radio buttons. 4 |

5 | 6 | Radio Button 7 | 8 | 9 | 10 |
-------------------------------------------------------------------------------- /site/src/app/components/directives.demo/radio.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-radio-directives', 9 | templateUrl: './radio.directives.component.html' 10 | }) 11 | export class RadioDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/radio.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'radio'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/radio.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/ripple.directives.component.html: -------------------------------------------------------------------------------- 1 |

Ripple

2 |

3 | The mdcRipple directive creates a configurable ripple surface. 4 |

5 | 6 | Ripple 7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/ripple.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-ripple-directives', 9 | templateUrl: './ripple.directives.component.html' 10 | }) 11 | export class RippleDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/ripple.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'ripple'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/ripple.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/select.directives.component.html: -------------------------------------------------------------------------------- 1 |

Select

2 |

Directive for creating a material designed select control menu.

3 |

As for all Blox Material directives: the controls can be used with or without the angular forms 4 | package.

5 | 6 |

Accessibility

7 |

8 | This directive will automatically apply proper accessibility attributes to the control, 9 | and its items

10 | 11 | 12 | Select Input 13 | 14 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/select.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-select-directives', 9 | templateUrl: './select.directives.component.html' 10 | }) 11 | export class SelectDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/menu.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'select'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/select.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/slider.directives.component.html: -------------------------------------------------------------------------------- 1 |

Slider

2 |

3 | The mdcSlider directive creates a material designed slider. 4 |

5 | 6 |

Accessibility

7 |

The directive adds various aria-* attributes based on the state 8 | of the slider. For full accessibility the slider should be given a meaningful 9 | label by setting the aria-label, or aria-labelledby 10 | attribute. 11 |

12 | 13 | 14 | Slider 15 | 16 | 17 | 18 |
19 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/slider.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-slider-directives', 9 | templateUrl: './slider.directives.component.html' 10 | }) 11 | export class SliderDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/slider.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'slider'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/slider.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/snackbar.directives.component.html: -------------------------------------------------------------------------------- 1 |

Snackbar

2 |

3 | Snackbars (sometimes called toasts) are transient messages, displayed at the bottom of the browser window. 4 | The snackbar functionality is exposed via the MdcSnackbarService. 5 | A snackbar has an optional action button. 6 |

7 | 8 | 9 | Snackbar Service 10 | 11 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/snackbar.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-snackbar-directives', 9 | templateUrl: './snackbar.directives.component.html' 10 | }) 11 | export class SnackbarDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/snackbar.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'snackbar'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/snackbar.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/switch.directives.component.html: -------------------------------------------------------------------------------- 1 |

Checkbox

2 |

3 | The mdcSwitch directive creates a material designed switch. 4 |

5 | 6 | Switch Input 7 | 8 | 9 | 10 |
-------------------------------------------------------------------------------- /site/src/app/components/directives.demo/switch.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-switch-directives', 9 | templateUrl: './switch.directives.component.html' 10 | }) 11 | export class SwitchDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/switch.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'switch'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/switch.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/tab.directives.component.html: -------------------------------------------------------------------------------- 1 |

Tabs

2 |

3 | Tabbed navigation components 4 |

5 | 6 | Tabs 7 | 8 | 9 |
10 | 11 | Tabs with Router 12 | 13 | 14 |
15 | 16 | Tabs with Icons 17 | 18 | 19 |
20 | 21 | Tab with Scroller 22 | 23 | 24 | 25 |
26 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/tab.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-tab-directives', 9 | templateUrl: './tab.directives.component.html' 10 | }) 11 | export class TabDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/tabs.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'tabs'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/tab.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/text-field.directives.component.html: -------------------------------------------------------------------------------- 1 |

Text Fields

2 |

The mdcTextField directive provides various types of text-fields. 3 | A text-field is composed of a label, input element, line, helper text, and possibly a leading or trailing icon.

4 | 5 | 6 | Text Fields 7 | 8 | 9 |
10 | 11 | 12 | Text Fields with Icons 13 | 14 | 15 |
16 | 17 | 18 | Text Areas 19 | 20 | 21 | 22 |
-------------------------------------------------------------------------------- /site/src/app/components/directives.demo/text-field.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-text-field-directives', 9 | templateUrl: './text-field.directives.component.html' 10 | }) 11 | export class TextFieldDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/text-field.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'text-field'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/text-field.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/top-app-bar.directives.component.html: -------------------------------------------------------------------------------- 1 |

Top App Bar

2 |

The mdcTopAppBar directive

3 | 4 | 5 | Top App Bar 6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/top-app-bar.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-top-app-bar-directives', 9 | templateUrl: './top-app-bar.directives.component.html' 10 | }) 11 | export class TopAppBarDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/toolbar.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'top-app-bar'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/top-app-bar.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/utility.directives.component.html: -------------------------------------------------------------------------------- 1 |

Utility

2 |

3 | The mdcScrollbarResize directive triggers window resize events when the document 4 | body changes width, due to a vertical scrollbar being added to (or removed from) the page. 5 | This solves problems with directives that base their layout or position on the width of the 6 | document body, and listen to resize events to update their layout. 7 |

8 |

9 | The layout of following Blox Material directives can be fixed with mdcScrollbarResize: 10 | mdcRipple,&ngsp; 11 | mdcSlider,&ngsp; 12 | mdcTabBar, and mdcTabBarScroller. 13 |

14 | 15 |
16 | -------------------------------------------------------------------------------- /site/src/app/components/directives.demo/utility.directives.component.ts: -------------------------------------------------------------------------------- 1 | import { DOCUMENT } from '@angular/common'; 2 | import { Component, Inject } from '@angular/core'; 3 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 4 | import { Router } from '@angular/router'; 5 | import { AbstractDemoComponent } from './abstract.demo.component'; 6 | 7 | @Component({ 8 | selector: 'blox-utility-directives', 9 | templateUrl: './utility.directives.component.html' 10 | }) 11 | export class UtilityDirectivesComponent extends AbstractDemoComponent { 12 | static DOC_SVG = require('!raw-loader!../../../assets/img/mdc-icons/feature_highlight.svg'); 13 | static DOC_TYPE = 'components'; 14 | static DOC_HREF = 'utility'; 15 | apiDoc: SafeHtml; 16 | 17 | constructor(sanitizer: DomSanitizer, @Inject(DOCUMENT) doc: Document, router: Router) { 18 | super( 19 | sanitizer.bypassSecurityTrustHtml(require('!raw-loader!../../../../../bundle/apidocs/utility.html').default), 20 | doc, 21 | router 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /site/src/app/components/docs/docs.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/app/components/docs/docs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'blox-docs', 5 | templateUrl: './docs.component.html' 6 | }) 7 | export class DocsComponent { 8 | constructor() { 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /site/src/app/components/docs/gettingstarted.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'blox-gettingstarted', 5 | templateUrl: './gettingstarted.component.html' 6 | }) 7 | export class GettingstartedComponent { 8 | static DOC_TYPE = 'guides'; 9 | static DOC_HREF = 'gettingStarted'; 10 | } 11 | -------------------------------------------------------------------------------- /site/src/app/components/docs/guides.component.html: -------------------------------------------------------------------------------- 1 |

Guides

2 |
3 | Getting Started 4 | Building for IE11 5 | Components 6 |
7 | -------------------------------------------------------------------------------- /site/src/app/components/docs/guides.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'blox-guides', 5 | templateUrl: './guides.component.html' 6 | }) 7 | export class GuidesComponent { 8 | static DOC_TYPE = 'docs'; 9 | static DOC_HREF = 'guides'; 10 | } 11 | -------------------------------------------------------------------------------- /site/src/app/components/docs/ie11.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'blox-ie11', 5 | templateUrl: './ie11.component.html' 6 | }) 7 | export class IE11Component { 8 | static DOC_TYPE = 'guides'; 9 | static DOC_HREF = 'ie11'; 10 | } 11 | -------------------------------------------------------------------------------- /site/src/app/components/docs/index.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'blox-index', 5 | templateUrl: './index.component.html' 6 | }) 7 | export class IndexComponent { 8 | } 9 | -------------------------------------------------------------------------------- /site/src/app/components/docs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './index.component'; 2 | export * from './docs.component'; 3 | export * from './guides.component'; 4 | export * from './gettingstarted.component'; 5 | export * from './ie11.component'; 6 | -------------------------------------------------------------------------------- /site/src/app/components/notfound/index.ts: -------------------------------------------------------------------------------- 1 | export * from './notfound.component'; -------------------------------------------------------------------------------- /site/src/app/components/notfound/notfound.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

Page Not Found

7 |

The requested page {{pageUrl}} does not exist. 8 | Maybe the sharks ate it?

9 |

10 | Return to the previous page or 11 | go back to the home page. 12 |

13 |
14 | Take Me Home 15 |
16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /site/src/app/components/notfound/notfound.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'error-404', 5 | templateUrl: './notfound.component.html' 6 | }) 7 | export class NotFoundComponent { 8 | static DOC_TYPE = 'errors'; 9 | static DOC_HREF = '404'; 10 | 11 | get pageUrl() { 12 | return document.location.href; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /site/src/app/components/shared.ts: -------------------------------------------------------------------------------- 1 | export * from './notfound'; 2 | export * from './highlightjs/highlightjs.directive'; 3 | export * from './code.sample'; 4 | export * from './theme'; 5 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.button.component.scss: -------------------------------------------------------------------------------- 1 | [mdcButton] { 2 | margin-right: 16px; 3 | margin-bottom: 16px; 4 | } -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetButtonComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-button', 12 | templateUrl: './snippet.button.component.html', 13 | styleUrls: ['./snippet.button.component.scss'] 14 | }) 15 | export class SnippetButtonComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | disabled = false; 17 | raised = false; 18 | unelevated = false; 19 | outlined = false; 20 | 21 | //snip:skip 22 | constructor() { 23 | super({ 24 | 'html': require('!raw-loader!./snippet.button.component.html'), 25 | 'scss': require('!raw-loader!./snippet.button.component.scss'), 26 | 'typescript': require('!raw-loader!./snippet.button.component.ts') 27 | }); 28 | } 29 | //snip:endskip 30 | } 31 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetCardComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-card', 12 | templateUrl: './snippet.card.component.html', 13 | styleUrls: ['./snippet.card.component.scss'] 14 | }) 15 | export class SnippetCardComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | rtl = false; 17 | outlined = true; 18 | //snip:skip 19 | constructor() { 20 | super({ 21 | 'html': require('!raw-loader!./snippet.card.component.html'), 22 | 'scss': require('!raw-loader!./snippet.card.component.scss'), 23 | 'typescript': require('!raw-loader!./snippet.card.component.ts') 24 | }, { 25 | '../../../../assets/img/mdc-demos/16-9.jpg': require('!file-loader!../../../../assets/img/mdc-demos/16-9.jpg').default, 26 | '../../../../assets/img/mdc-demos/1-1.jpg': require('!file-loader!../../../../assets/img/mdc-demos/1-1.jpg').default 27 | }); 28 | } 29 | //snip:endskip 30 | 31 | get dir() { 32 | return this.rtl ? "rtl" : null; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.checkbox.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 |
8 |
value: {{printableValue}}

9 | 10 | 11 | 12 | 13 | 14 |
15 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.checkbox.component.scss: -------------------------------------------------------------------------------- 1 | [mdcButton] { 2 | margin-right: 16px; 3 | margin-bottom: 16px; 4 | } -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.choice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
Extra Small
 6 |
7 |
8 |
9 |
10 |
Small
 11 |
12 |
13 |
14 |
15 |
Medium
 16 |
17 |
18 |
19 |
20 |
Large
 21 |
22 |
23 |
24 |
25 |
Extra Large
 26 |
27 |
28 |
29 |
30 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.choice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsChoiceComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-chips-choice', 12 | templateUrl: './snippet.chips.choice.component.html' 13 | }) 14 | export class SnippetChipsChoiceComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | //snip:skip 16 | constructor() { 17 | super({ 18 | 'html': require('!raw-loader!./snippet.chips.choice.component.html'), 19 | 'typescript': require('!raw-loader!./snippet.chips.choice.component.ts') 20 | }); 21 | } 22 | //snip:endskip 23 | } 24 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | wb_sunny 5 | 6 |
Turn lights on
7 | 8 |
9 |
10 | bookmark 11 | 12 |
Bookmark
13 | 14 |
15 |
16 | alarm 17 | 18 |
Set alarm
19 | 20 |
21 |
22 | directions 23 | 24 |
Get directions
25 | 26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-chips', 12 | templateUrl: './snippet.chips.component.html' 13 | }) 14 | export class SnippetChipsComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | //snip:skip 16 | constructor() { 17 | super({ 18 | 'html': require('!raw-loader!./snippet.chips.component.html'), 19 | 'typescript': require('!raw-loader!./snippet.chips.component.ts') 20 | }); 21 | } 22 | //snip:endskip 23 | } 24 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.filter.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | message 5 | 6 |
Messages
7 | 8 |
9 |
10 | notification_important 11 | 12 |
Notifications
13 | 14 |
15 |
16 | warning 17 | 18 |
Warnings
19 | 20 |
21 |
22 | error 23 | 24 |
Errors
25 | 26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.filter.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsFilterComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-chips-filter', 12 | templateUrl: './snippet.chips.filter.component.html' 13 | }) 14 | export class SnippetChipsFilterComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | //snip:skip 16 | constructor() { 17 | super({ 18 | 'html': require('!raw-loader!./snippet.chips.filter.component.html'), 19 | 'typescript': require('!raw-loader!./snippet.chips.filter.component.ts') 20 | }); 21 | } 22 | //snip:endskip 23 | } 24 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.input.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | face 5 | 6 | 7 |
{{chip.name}}
8 | 9 | 10 | 11 | cancel 12 | 13 |
14 |
15 |
16 |
17 | 18 | 19 |
20 | 21 |
22 |
23 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.chips.input.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsInputComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-chips-input', 12 | templateUrl: './snippet.chips.input.component.html' 13 | }) 14 | export class SnippetChipsInputComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | readonly chips = [ 16 | {name: 'claire'}, 17 | {name: 'pete'}, 18 | {name: 'anne'} 19 | ]; 20 | newChip: string; 21 | 22 | //snip:skip 23 | constructor() { 24 | super({ 25 | 'html': require('!raw-loader!./snippet.chips.input.component.html'), 26 | 'typescript': require('!raw-loader!./snippet.chips.input.component.ts') 27 | }); 28 | } 29 | //snip:endskip 30 | 31 | addChip() { 32 | if (this.newChip) { 33 | let value = this.newChip.trim(); 34 | if (value.length) 35 | this.chips.push({name: value}); 36 | } 37 | this.newChip = ''; 38 | } 39 | 40 | removeChip(index: number) { 41 | this.chips.splice(index, 1); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetDialogComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-dialog', 12 | templateUrl: './snippet.dialog.component.html' 13 | }) 14 | export class SnippetDialogComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ implements OnInit { 15 | items: string[] = []; 16 | //snip:skip 17 | constructor() { 18 | super({ 19 | 'html': require('!raw-loader!./snippet.dialog.component.html'), 20 | 'typescript': require('!raw-loader!./snippet.dialog.component.ts') 21 | }); 22 | } 23 | //snip:endskip 24 | 25 | ngOnInit() { 26 | for (let i = 0; i != 40; ++i) { 27 | this.items.push('Callisto'); 28 | this.items.push('Ganymede'); 29 | this.items.push('Luna'); 30 | this.items.push('Marimba'); 31 | this.items.push('Schwifty'); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.drawer.below.component.scss: -------------------------------------------------------------------------------- 1 | .blox-snippet-page { 2 | height: 400px; /* snippet-skip-line 3 | height: 100vh; 4 | snippet-skip-line */ 5 | } 6 | 7 | // Drawer and toolbar and main-content should sit next to each other: 8 | .blox-demo-content { 9 | display: flex; 10 | flex-direction: row; 11 | position: relative; 12 | } 13 | 14 | .blox-demo-main { 15 | box-sizing: border-box; 16 | height: 100%; 17 | padding-left: 16px; 18 | } 19 | 20 | //snip:skip 21 | // the default position is fixed, but in the demo we need to position the drawer/scrim 22 | // inside its parent, not fixed to the viewport: 23 | .mdc-drawer--modal {position: absolute;} 24 | // TODO IE 11: 25 | // - in IE11 the demo's have the scrim only visible over the viewport, 26 | // and position it wrong when you scroll the page. 27 | // - we can make the scrim position over the viewport for all browsers 28 | // if we set "position: absolute" on the scrim, but that requires some more tuning 29 | // for the drawer.below.component demo to behave nicely, and make the scrim fill 30 | // the entire viewport. 31 | //snip:endskip 32 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.drawer.below.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetDrawerBelowComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-drawer-below', 12 | templateUrl: './snippet.drawer.below.component.html', 13 | styleUrls: ['./snippet.drawer.below.component.scss'] 14 | }) 15 | export class SnippetDrawerBelowComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | open = false; 17 | drawerType: 'dismissible' | 'permanent' | 'modal' = 'dismissible'; 18 | header = true; 19 | //snip:skip 20 | constructor() { 21 | super({ 22 | 'html': require('!raw-loader!./snippet.drawer.below.component.html'), 23 | 'scss': require('!raw-loader!./snippet.drawer.below.component.scss'), 24 | 'typescript': require('!raw-loader!./snippet.drawer.below.component.ts') 25 | }, {}, 'typescript', {noBodyMargins: true}); 26 | } 27 | //snip:endskip 28 | 29 | toggleDrawer() { 30 | this.open = !this.open; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.drawer.component.scss: -------------------------------------------------------------------------------- 1 | // Place drawer and content side by side: 2 | .blox-snippet-page { 3 | display: flex; 4 | height: 400px; /* snippet-skip-line 5 | height: 100vh; 6 | snippet-skip-line */ 7 | } 8 | 9 | //snip:skip 10 | .mdc-drawer--modal { 11 | // the default position is fixed, but in the demo we need to position the drawer 12 | // inside its parent, not fixed to the viewport: 13 | position: absolute; 14 | } 15 | //snip:endskip 16 | 17 | // Stack toolbar and main on top of each other: 18 | .blox-demo-content { 19 | flex: auto; 20 | overflow: auto; 21 | position: relative; 22 | } 23 | 24 | .blox-demo-main { 25 | box-sizing: border-box; 26 | padding-left: 16px; 27 | } 28 | 29 | //snip:skip 30 | // TODO IE 11: 31 | // - in IE11 the demo's have the scrim is only visible on viewport, 32 | // and position it wrong when you scroll the page. 33 | // - we can make the scrim position over the viewport for all browsers 34 | // if we set "position: absolute" on the scrim, but that requires some more tuning 35 | // for the drawer.below.component demo to behave nicely, and make the scrim fill 36 | // the entire viewport. 37 | //snip:endskip 38 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.drawer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetDrawerComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-drawer', 12 | templateUrl: './snippet.drawer.component.html', 13 | styleUrls: ['./snippet.drawer.component.scss'] 14 | }) 15 | export class SnippetDrawerComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | open = false; 17 | drawerType: 'dismissible' | 'permanent' | 'modal' = 'dismissible'; 18 | header = true; 19 | //snip:skip 20 | constructor() { 21 | super({ 22 | 'html': require('!raw-loader!./snippet.drawer.component.html'), 23 | 'scss': require('!raw-loader!./snippet.drawer.component.scss'), 24 | 'typescript': require('!raw-loader!./snippet.drawer.component.ts') 25 | }, {}, 'typescript', {noBodyMargins: true}); 26 | } 27 | //snip:endskip 28 | 29 | toggleDrawer() { 30 | this.open = !this.open; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.elevation.component.html: -------------------------------------------------------------------------------- 1 |
2 |
Elevated {{elevation}}dp
3 |
4 |
6 |
7 |
8 | 9 |
10 | 11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.elevation.component.scss: -------------------------------------------------------------------------------- 1 | .blox-elevation-surface { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | margin: 32px; 6 | width: 200px; 7 | height: 100px; 8 | padding: 1rem; 9 | } -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.elevation.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetElevationComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-elevation', 12 | templateUrl: './snippet.elevation.component.html', 13 | styleUrls: ['./snippet.elevation.component.scss'] 14 | }) 15 | export class SnippetElevationComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | elevation = 4; 17 | animate = true; 18 | 19 | //snip:skip 20 | constructor() { 21 | super({ 22 | 'html': require('!raw-loader!./snippet.elevation.component.html'), 23 | 'scss': require('!raw-loader!./snippet.elevation.component.scss'), 24 | 'typescript': require('!raw-loader!./snippet.elevation.component.ts') 25 | }); 26 | } 27 | //snip:endskip 28 | } 29 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.fab.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 9 | 13 | 16 | 17 |
18 |
19 |
20 | 21 |
22 | 23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.fab.component.scss: -------------------------------------------------------------------------------- 1 | .mdc-fab { 2 | margin-right: 16px; 3 | margin-bottom: 16px; 4 | } 5 | .mdc-fab--extended { float: left; } 6 | section { clear: left; } 7 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.fab.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetFabComponent) }], 10 | //snip:endskip 11 | selector: 'blox-snippet-fab', 12 | templateUrl: './snippet.fab.component.html', 13 | styleUrls: ['./snippet.fab.component.scss'] 14 | }) 15 | export class SnippetFabComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | exit = false; 17 | //snip:skip 18 | constructor() { 19 | super({ 20 | 'html': require('!raw-loader!./snippet.fab.component.html'), 21 | 'scss': require('!raw-loader!./snippet.fab.component.scss'), 22 | 'typescript': require('!raw-loader!./snippet.fab.component.ts') 23 | }); 24 | } 25 | //snip:endskip 26 | } 27 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.focus-trap.component.html: -------------------------------------------------------------------------------- 1 |
2 |
4 |

5 | Input Focus is currently trapped inside this card. Test it by trying to move focus 6 | to elements outside the card. 7 |

8 |

9 | Input Focus is currently not trapped. You can focus any element on the page. 10 |

11 |
12 |
13 | 14 |
15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 |
27 |
28 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.focus-trap.component.scss: -------------------------------------------------------------------------------- 1 | .blox-focus-trap { 2 | padding: 32px; 3 | 4 | &.blox-focus-trap-active { 5 | position: fixed; 6 | z-index: 10; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%, -50%); 10 | } 11 | } 12 | 13 | .blox-focus-trap-overlay { 14 | display: none; 15 | 16 | &.blox-focus-trap-active { 17 | display: block; // (IE 11 doesn't support initial) 18 | position: fixed; 19 | z-index: 9; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | height: 100%; 24 | background: black; 25 | opacity: 0.8; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.icon-button.component.scss: -------------------------------------------------------------------------------- 1 | @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); 2 | .mdc-icon-button { 3 | display: inline-block; 4 | } -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.icon-button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetIconButtonComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-icon-button', 12 | templateUrl: './snippet.icon-button.component.html', 13 | styleUrls: ['./snippet.icon-button.component.scss'] 14 | }) 15 | export class SnippetIconButtonComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | disabled = false; 17 | favorite = false; 18 | like = true; 19 | closed = false; 20 | //snip:skip 21 | constructor() { 22 | super({ 23 | 'html': require('!raw-loader!./snippet.icon-button.component.html'), 24 | 'scss': require('!raw-loader!./snippet.icon-button.component.scss'), 25 | 'typescript': require('!raw-loader!./snippet.icon-button.component.ts') 26 | }); 27 | } 28 | //snip:endskip 29 | 30 | toggleAll() { 31 | this.favorite = !this.favorite; 32 | this.like = !this.like; 33 | this.closed = !this.closed; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.linear-progress.component.html: -------------------------------------------------------------------------------- 1 |
2 |
4 |

Customize progress:

5 |
6 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | 16 |
17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 | 30 |
31 |
32 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.linear-progress.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetLinearProgressComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-linear-progress', 12 | templateUrl: './snippet.linear-progress.component.html' 13 | }) 14 | export class SnippetLinearProgressComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | progress = 0; 16 | buffer = 0; 17 | closed = false; 18 | indeterminate = true; 19 | reversed = false; 20 | 21 | //snip:skip 22 | constructor() { 23 | super({ 24 | 'html': require('!raw-loader!./snippet.linear-progress.component.html'), 25 | 'typescript': require('!raw-loader!./snippet.linear-progress.component.ts') 26 | }); 27 | } 28 | //snip:endskip 29 | } 30 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.list.component.scss: -------------------------------------------------------------------------------- 1 | [mdcListGroup] { 2 | border: 1px solid rgba(0, 0, 0, 0.1); 3 | 4 | [mdcAvatarList] [mdcListItemGraphic] { 5 | background-color: rgba(0, 0, 0, .26); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.list.twoline.component.scss: -------------------------------------------------------------------------------- 1 | [mdcListGroup] { 2 | border: 1px solid rgba(0, 0, 0, 0.1); 3 | 4 | [mdcAvatarList] [mdcListItemGraphic] { 5 | background-color: rgba(0, 0, 0, .26); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.menu.component.scss: -------------------------------------------------------------------------------- 1 | .snippet-container { 2 | position: relative; 3 | height: 300px; 4 | flex: 1; 5 | } 6 | .mdc-menu-surface--anchor { 7 | position: absolute; 8 | } -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.radio.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 |
8 |
9 |
10 | 11 |
12 | 13 |
14 |
value: {{value}}

15 | 16 | 17 | 18 |
19 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.radio.component.scss: -------------------------------------------------------------------------------- 1 | [mdcButton] { 2 | margin-right: 16px; 3 | margin-bottom: 16px; 4 | } -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.radio.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetRadioComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-radio', 12 | templateUrl: './snippet.radio.component.html', 13 | styleUrls: ['./snippet.radio.component.scss'] 14 | }) 15 | export class SnippetRadioComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | alignEnd = false; 17 | disabled = false; 18 | value: string; 19 | 20 | //snip:skip 21 | constructor() { 22 | super({ 23 | 'html': require('!raw-loader!./snippet.radio.component.html'), 24 | 'scss': require('!raw-loader!./snippet.radio.component.scss'), 25 | 'typescript': require('!raw-loader!./snippet.radio.component.ts') 26 | }); 27 | } 28 | //snip:endskip 29 | 30 | toggleAlignEnd() { 31 | this.alignEnd = !this.alignEnd; 32 | } 33 | 34 | toggleDisabled() { 35 | this.disabled = !this.disabled; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.ripple.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Ripple - Interact with me! 4 |
5 | 6 |
7 | Unbounded Ripple - Interact with me! 8 |
9 | 10 |
11 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.ripple.component.scss: -------------------------------------------------------------------------------- 1 | .mdc-ripple-surface { 2 | float: left; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | margin: 32px; 7 | width: 200px; 8 | height: 100px; 9 | padding: 1rem; 10 | cursor: pointer; 11 | 12 | &[unbounded] { 13 | overflow: visible; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.ripple.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetRippleComponent) }], 10 | //snip:endskip 11 | selector: 'blox-snippet-ripple', 12 | templateUrl: './snippet.ripple.component.html', 13 | styleUrls: ['./snippet.ripple.component.scss'] 14 | }) 15 | export class SnippetRippleComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | //snip:skip 17 | constructor() { 18 | super({ 19 | 'html': require('!raw-loader!./snippet.ripple.component.html'), 20 | 'scss': require('!raw-loader!./snippet.ripple.component.scss'), 21 | 'typescript': require('!raw-loader!./snippet.ripple.component.ts') 22 | }); 23 | } 24 | //snip:endskip 25 | } 26 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.select.component.scss: -------------------------------------------------------------------------------- 1 | [mdcButton] { 2 | margin-right: 16px; 3 | margin-bottom: 16px; 4 | } -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.select.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetSelectComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-select', 12 | templateUrl: './snippet.select.component.html', 13 | styleUrls: ['./snippet.select.component.scss'] 14 | }) 15 | export class SnippetSelectComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | value: string; 17 | disabled = false; 18 | outlined = true; 19 | 20 | //snip:skip 21 | constructor() { 22 | super({ 23 | 'html': require('!raw-loader!./snippet.select.component.html'), 24 | 'scss': require('!raw-loader!./snippet.select.component.scss'), 25 | 'typescript': require('!raw-loader!./snippet.select.component.ts') 26 | }); 27 | } 28 | //snip:endskip 29 | 30 | clear() { 31 | this.value = null; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.slider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetSliderComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-slider', 12 | templateUrl: './snippet.slider.component.html' 13 | }) 14 | export class SnippetSliderComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | disabled = false; 16 | min = 0; 17 | max = 100; 18 | step = 0; 19 | discrete = false; 20 | markers = false; 21 | value = 0; 22 | 23 | //snip:skip 24 | constructor() { 25 | super({ 26 | 'html': require('!raw-loader!./snippet.slider.component.html'), 27 | 'typescript': require('!raw-loader!./snippet.slider.component.ts') 28 | }); 29 | } 30 | //snip:endskip 31 | } 32 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.snackbar.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |
7 |
8 | 9 | 10 |
11 |
12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 | 20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 |
28 |

Currently Showing: {{currentMessage}}

29 |

Last Action: {{lastAction}}

30 |
31 |
32 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.switch.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 |
8 | 9 |
10 |
11 |
12 | 13 |
14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.switch.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetSwitchComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-switch', 12 | templateUrl: './snippet.switch.component.html' 13 | }) 14 | export class SnippetSwitchComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | disabled = false; 16 | value = false; 17 | 18 | //snip:skip 19 | constructor() { 20 | super({ 21 | 'html': require('!raw-loader!./snippet.switch.component.html'), 22 | 'typescript': require('!raw-loader!./snippet.switch.component.ts') 23 | }); 24 | } 25 | //snip:endskip 26 | } 27 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.icons.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 |
8 |
9 | 26 |
{{tabs[active].content}}
27 |
28 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.icons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTabIconsComponent) }], 10 | //snip:endskip 11 | selector: 'blox-snippet-tab-icons', 12 | templateUrl: './snippet.tab.icons.component.html' 13 | }) 14 | export class SnippetTabIconsComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | showText = true; 16 | tabs = [ 17 | {name: 'Tab 1', content: 'First tab', icon: 'phone'}, 18 | {name: 'Tab Two', content: 'Second tab', icon: 'access_time'}, 19 | {name: 'Tab Three', content: 'Third tab', icon: 'near_me'}, 20 | {name: 'Tab Four', content: 'Fourth tab', icon: 'favorite'} 21 | ]; 22 | active = 0; 23 | 24 | //snip:skip 25 | constructor() { 26 | super({ 27 | 'html': require('!raw-loader!./snippet.tab.icons.component.html'), 28 | 'typescript': require('!raw-loader!./snippet.tab.icons.component.ts') 29 | }); 30 | } 31 | //snip:endskip 32 | 33 | activate(index: number) { 34 | this.active = index; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.routing.component.html: -------------------------------------------------------------------------------- 1 |
2 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.routing.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTabRoutingComponent) }], 10 | //snip:endskip 11 | selector: 'blox-snippet-tab-routing', 12 | templateUrl: './snippet.tab.routing.component.html' 13 | }) 14 | export class SnippetTabRoutingComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | //snip:skip 16 | constructor() { 17 | super({ 18 | 'html': require('!raw-loader!./snippet.tab.routing.component.html'), 19 | 'typescript': require('!raw-loader!./snippet.tab.routing.component.ts'), 20 | 'app.module.ts': require('!raw-loader!./snippet.tab.routing.module.ts'), 21 | 'page1.ts': require('!raw-loader!./snippet.tab.routing.page1.ts'), 22 | 'page2.ts': require('!raw-loader!./snippet.tab.routing.page2.ts') 23 | }); 24 | } 25 | //snip:endskip 26 | } 27 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.routing.page1.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'routed-page1', 5 | template: `
6 | This is Page 1 7 |
8 |
9 | Go to page 2 10 | ` 11 | }) 12 | export class Page1Component { 13 | } 14 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.routing.page2.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'routed-page2', 5 | template: `
6 | This is Page 2! 7 |
8 |
9 | Go to page 1 10 | ` 11 | }) 12 | export class Page2Component { 13 | } 14 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.scroller.component.html: -------------------------------------------------------------------------------- 1 |
2 | 18 |
{{tabs[active].content}}
19 |
20 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.scroller.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTabScrollerComponent) }], 10 | //snip:endskip 11 | selector: 'blox-snippet-tab-scroller', 12 | templateUrl: './snippet.tab.scroller.component.html' 13 | }) 14 | export class SnippetTabScrollerComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ implements OnInit{ 15 | tabs = []; 16 | active = 0; 17 | 18 | //snip:skip 19 | constructor() { 20 | super({ 21 | 'html': require('!raw-loader!./snippet.tab.scroller.component.html'), 22 | 'typescript': require('!raw-loader!./snippet.tab.scroller.component.ts') 23 | }); 24 | } 25 | //snip:endskip 26 | 27 | ngOnInit() { 28 | for (let i = 1; i <= 20; ++i) 29 | this.tabs.push({name: 'Tab ' + i, content: 'Content of tab ' + i}); 30 | } 31 | 32 | activate(index: number) { 33 | this.active = index; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.simple.component.html: -------------------------------------------------------------------------------- 1 |
2 | 18 |
{{tabs[active].content}}
19 |
20 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.tab.simple.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTabSimpleComponent) }], 10 | //snip:endskip 11 | selector: 'blox-snippet-tab-simple', 12 | templateUrl: './snippet.tab.simple.component.html' 13 | }) 14 | export class SnippetTabSimpleComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | tabs = [ 16 | { 17 | name: 'Tab 1', 18 | content: 'First tab' 19 | }, 20 | { 21 | name: 'Tab Two', 22 | content: 'Second tab' 23 | }, 24 | { 25 | name: 'Tab 3', 26 | content: 'Third tab' 27 | }, 28 | { 29 | name: 'Tab IV', 30 | content: 'Fourth tab' 31 | } 32 | ]; 33 | active = 0; 34 | 35 | //snip:skip 36 | constructor() { 37 | super({ 38 | 'html': require('!raw-loader!./snippet.tab.simple.component.html'), 39 | 'typescript': require('!raw-loader!./snippet.tab.simple.component.ts') 40 | }); 41 | } 42 | //snip:endskip 43 | 44 | activate(index: number) { 45 | this.active = index; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.text-field.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, SimpleChanges } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTextFieldComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-text-field', 12 | templateUrl: './snippet.text-field.component.html' 13 | }) 14 | export class SnippetTextFieldComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | outlined = false; 16 | rtl = false; 17 | disabled = false; 18 | required = false; 19 | persistent = false; 20 | field1: string; 21 | field2: string; 22 | 23 | //snip:skip 24 | constructor() { 25 | super({ 26 | 'html': require('!raw-loader!./snippet.text-field.component.html'), 27 | 'typescript': require('!raw-loader!./snippet.text-field.component.ts') 28 | }); 29 | } 30 | //snip:endskip 31 | 32 | get dir() { 33 | return this.rtl ? "rtl" : null; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.text-field.icon.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTextFieldIconComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-text-field-icon', 12 | templateUrl: './snippet.text-field.icon.component.html' 13 | }) 14 | export class SnippetTextFieldIconComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | outlined = false; 16 | disabled = false; 17 | required = false; 18 | persistent = false; 19 | field1: string; 20 | field2: string; 21 | 22 | //snip:skip 23 | constructor() { 24 | super({ 25 | 'html': require('!raw-loader!./snippet.text-field.icon.component.html'), 26 | 'typescript': require('!raw-loader!./snippet.text-field.icon.component.ts') 27 | }); 28 | } 29 | //snip:endskip 30 | 31 | clearField2() { 32 | this.field2 = null; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.text-field.textarea.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTextFieldTextareaComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-text-field-textarea', 12 | templateUrl: './snippet.text-field.textarea.component.html' 13 | }) 14 | export class SnippetTextFieldTextareaComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 15 | rtl = false; 16 | disabled = false; 17 | required = false; 18 | persistent = false; 19 | field1: string; 20 | 21 | //snip:skip 22 | constructor() { 23 | super({ 24 | 'html': require('!raw-loader!./snippet.text-field.textarea.component.html'), 25 | 'typescript': require('!raw-loader!./snippet.text-field.textarea.component.ts') 26 | }); 27 | } 28 | //snip:endskip 29 | 30 | get dir() { 31 | return this.rtl ? "rtl" : null; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.top-app-bar.component.scss: -------------------------------------------------------------------------------- 1 | .blox-snippet-page { 2 | height: 350px; /* snippet-skip-line 3 | height: 100vh; 4 | snippet-skip-line */ 5 | } 6 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/directives/snippet.top-app-bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | //snip:skip 3 | import { forwardRef } from '@angular/core'; 4 | import { AbstractSnippetComponent } from '../abstract.snippet.component'; 5 | //snip:endskip 6 | 7 | @Component({ 8 | //snip:skip 9 | providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetTopAppBarComponent)}], 10 | //snip:endskip 11 | selector: 'blox-snippet-top-app-bar', 12 | templateUrl: './snippet.top-app-bar.component.html', 13 | styleUrls: ['./snippet.top-app-bar.component.scss'] 14 | }) 15 | export class SnippetTopAppBarComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ { 16 | type: 'short' | 'fixed' | 'default' = 'default'; 17 | prominent = false; 18 | dense = false; 19 | 20 | 21 | //snip:skip 22 | constructor() { 23 | super({ 24 | 'html': require('!raw-loader!./snippet.top-app-bar.component.html'), 25 | 'scss': require('!raw-loader!./snippet.top-app-bar.component.scss'), // why? it's already in the default stylesheet... 26 | 'typescript': require('!raw-loader!./snippet.top-app-bar.component.ts') 27 | }, {}, 'typescript', {noBodyMargins: true}); 28 | } 29 | //snip:endskip 30 | } 31 | -------------------------------------------------------------------------------- /site/src/app/components/snippets/index.ts: -------------------------------------------------------------------------------- 1 | export * from './directives'; 2 | -------------------------------------------------------------------------------- /site/src/app/components/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from './theme.switcher.component'; 2 | -------------------------------------------------------------------------------- /site/src/app/components/theme/theme.switcher.component.html: -------------------------------------------------------------------------------- 1 |
2 | 6 |
7 | 16 |
17 |
18 | -------------------------------------------------------------------------------- /site/src/app/components/theme/theme.switcher.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 3 | import { Angulartics2 } from 'angulartics2'; 4 | import { first } from 'rxjs/operators'; 5 | import { ThemeService } from '../../services'; 6 | 7 | @Component({ 8 | selector: 'blox-theme-switcher', 9 | templateUrl: './theme.switcher.component.html' 10 | }) 11 | export class ThemeSwitcherComponent { 12 | static SVG = require('!raw-loader!../../../assets/img/themes/palette.svg').default; 13 | svg: SafeHtml; 14 | theme: string; 15 | themes: string[]; 16 | 17 | constructor(private themeService: ThemeService, private angulartics2: Angulartics2, private sanitizer: DomSanitizer) { 18 | this.themes = themeService.themes; 19 | themeService.theme$.pipe(first()).subscribe(theme => this.theme = theme); 20 | this.svg = this.sanitizer.bypassSecurityTrustHtml(ThemeSwitcherComponent.SVG); 21 | } 22 | 23 | getName(theme: string) { 24 | return this.themeService.getName(theme); 25 | } 26 | 27 | setTheme(theme: string) { 28 | this.theme = theme; 29 | this.themeService.theme = theme; 30 | this.angulartics2.eventTrack.next({ 31 | action: 'theme', 32 | properties: { 33 | category: 'switch', 34 | label: theme 35 | } 36 | }); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /site/src/app/overview.component.html: -------------------------------------------------------------------------------- 1 |

Components, Directives & Services

2 | 11 | -------------------------------------------------------------------------------- /site/src/app/overview.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { DomSanitizer } from '@angular/platform-browser'; 3 | import { MDC_DIRECTIVE_DOC_COMPONENTS } from './components/components'; 4 | 5 | const messages = require('./messages.json'); 6 | 7 | @Component({ 8 | selector: 'blox-overview', 9 | templateUrl: './overview.component.html' 10 | }) 11 | export class OverviewComponent { 12 | static DOC_TYPE = 'components'; 13 | static DOC_HREF = 'overview'; 14 | 15 | components: {title: string, description: string, img: any, href: string}[]; 16 | 17 | constructor(private sanitizer: DomSanitizer) { 18 | this.components = MDC_DIRECTIVE_DOC_COMPONENTS.map(c => ({ 19 | 'title': messages[c.DOC_TYPE + '.' + c.DOC_HREF + '.title'], 20 | 'description': messages[c.DOC_TYPE + '.' + c.DOC_HREF + '.description'], 21 | 'img': this.sanitizer.bypassSecurityTrustHtml(c.DOC_SVG.default), 22 | 'href': '/' + c.DOC_TYPE + '/' + c.DOC_HREF 23 | })) 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /site/src/app/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './theme.service'; 2 | -------------------------------------------------------------------------------- /site/src/app/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MaterialModule } from '@blox/material'; 4 | import { 5 | CodeSampleComponent, 6 | HighlightjsDirective, 7 | ThemeSwitcherComponent 8 | } from './components/shared'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | MaterialModule 14 | ], 15 | declarations: [ 16 | CodeSampleComponent, 17 | HighlightjsDirective, 18 | ThemeSwitcherComponent 19 | ], 20 | exports: [ 21 | CommonModule, 22 | MaterialModule, 23 | 24 | CodeSampleComponent, 25 | HighlightjsDirective, 26 | ThemeSwitcherComponent 27 | ] 28 | }) 29 | export class SharedModule {} 30 | -------------------------------------------------------------------------------- /site/src/assets/img/clipart/agnostic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/clipart/agnostic.png -------------------------------------------------------------------------------- /site/src/assets/img/clipart/rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/clipart/rocket.png -------------------------------------------------------------------------------- /site/src/assets/img/clipart/shark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/clipart/shark.png -------------------------------------------------------------------------------- /site/src/assets/img/clipart/theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/clipart/theming.png -------------------------------------------------------------------------------- /site/src/assets/img/clipart/webdesign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/clipart/webdesign.png -------------------------------------------------------------------------------- /site/src/assets/img/logos/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-demos/1-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/mdc-demos/1-1.jpg -------------------------------------------------------------------------------- /site/src/assets/img/mdc-demos/16-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/mdc-demos/16-9.jpg -------------------------------------------------------------------------------- /site/src/assets/img/mdc-demos/animal2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/animation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/bottom_navigation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/bottom_sheet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/button.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/card.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/checkbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/chip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/component.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/data_table.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/dialog.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/expansion_panel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/feature_highlight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/header.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/mdc-logo.svg: -------------------------------------------------------------------------------- 1 | Slice 1 -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/progress_activity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/progress_linear.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/radio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/responsive_layout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/ripple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/shadow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/side_navigation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/slider.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/snackbar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/stepper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/subheader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/switch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/tabs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/text-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/theme.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/toolbar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/tooltip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/assets/img/mdc-icons/typography.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /site/src/assets/img/photos/bridge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/photos/bridge.jpg -------------------------------------------------------------------------------- /site/src/assets/img/photos/crayons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/photos/crayons.jpg -------------------------------------------------------------------------------- /site/src/assets/img/photos/marker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/photos/marker.jpg -------------------------------------------------------------------------------- /site/src/assets/img/photos/mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/photos/mobile.jpg -------------------------------------------------------------------------------- /site/src/assets/img/photos/shark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/photos/shark.jpg -------------------------------------------------------------------------------- /site/src/assets/img/photos/speed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/assets/img/photos/speed.jpg -------------------------------------------------------------------------------- /site/src/custom-typings.d.ts: -------------------------------------------------------------------------------- 1 | // support NodeJS modules without type definitions 2 | interface WebpackRequire { 3 | (id: string): any; 4 | (paths: string[], callback: (...modules: any[]) => void): void; 5 | ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void; 6 | context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext; 7 | } 8 | 9 | interface WebpackContext extends WebpackRequire { 10 | keys(): string[]; 11 | } 12 | 13 | // Extend typings 14 | interface NodeRequire extends WebpackRequire {} 15 | 16 | declare var require: NodeRequire; 17 | // declare var process: NodeJS.Process; 18 | -------------------------------------------------------------------------------- /site/src/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /site/src/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('site app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /site/src/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /site/src/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /site/src/env.debug.ts: -------------------------------------------------------------------------------- 1 | /* 2 | + * In development mode, to ignore zone related error stack frames such as 3 | + * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 4 | + * import the following file, but please comment it out in production mode 5 | + * because it will have performance impact when throw error 6 | + */ 7 | import 'zone.js/dist/zone-error'; 8 | -------------------------------------------------------------------------------- /site/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /site/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /site/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } else { 10 | console.log('development mode'); 11 | } 12 | 13 | platformBrowserDynamic().bootstrapModule(AppModule) 14 | .catch(err => console.error(err)); 15 | -------------------------------------------------------------------------------- /site/src/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /site/src/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /site/src/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/apple-touch-icon.png -------------------------------------------------------------------------------- /site/src/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #212121 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /site/src/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/favicon-16x16.png -------------------------------------------------------------------------------- /site/src/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/favicon-32x32.png -------------------------------------------------------------------------------- /site/src/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/favicon.ico -------------------------------------------------------------------------------- /site/src/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blox Material", 3 | "short_name": "Blox Material", 4 | "start_url": "/", 5 | "icons": [ 6 | { 7 | "src": "/android-chrome-192x192.png", 8 | "sizes": "192x192", 9 | "type": "image/png" 10 | }, 11 | { 12 | "src": "/android-chrome-512x512.png", 13 | "sizes": "512x512", 14 | "type": "image/png" 15 | } 16 | ], 17 | "theme_color": "#ffffff", 18 | "background_color": "#212121", 19 | "display": "standalone" 20 | } -------------------------------------------------------------------------------- /site/src/public/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/mstile-144x144.png -------------------------------------------------------------------------------- /site/src/public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/mstile-150x150.png -------------------------------------------------------------------------------- /site/src/public/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/mstile-310x150.png -------------------------------------------------------------------------------- /site/src/public/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/mstile-310x310.png -------------------------------------------------------------------------------- /site/src/public/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/mstile-70x70.png -------------------------------------------------------------------------------- /site/src/public/robots.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/public/robots.txt -------------------------------------------------------------------------------- /site/src/public/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /site/src/runtime.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/src-zone/material/1ac874d30a9d8d7eeafc5b615a36132aa0eb005a/site/src/runtime.ts -------------------------------------------------------------------------------- /site/src/stackblitz.template/angular.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "demo": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/demo", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "aot": true, 26 | "assets": [ 27 | "src/assets" 28 | ], 29 | "styles": [ 30 | "src/styles.scss" 31 | ], 32 | "stylePreprocessorOptions": { 33 | "includePaths": [ 34 | "node_modules" 35 | ] 36 | }, 37 | "scripts": [] 38 | } 39 | }, 40 | "serve": { 41 | "builder": "@angular-devkit/build-angular:dev-server", 42 | "options": { 43 | "browserTarget": "demo:build" 44 | } 45 | } 46 | } 47 | } 48 | }, 49 | "defaultProject": "demo" 50 | } 51 | -------------------------------------------------------------------------------- /site/src/stackblitz.template/src/app/app.module.ts.template: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { MaterialModule } from '@blox/material'; 5 | 6 | import { ${mainComponent} } from './${mainImport}'; 7 | 8 | @NgModule({ 9 | imports: [ BrowserModule, FormsModule, MaterialModule ], 10 | declarations: [ ${mainComponent} ], 11 | bootstrap: [ ${mainComponent} ] 12 | }) 13 | export class AppModule { } 14 | -------------------------------------------------------------------------------- /site/src/stackblitz.template/src/index.html.template: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ${appTitle} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | <${mainElement}> 14 | 15 | 16 | -------------------------------------------------------------------------------- /site/src/stackblitz.template/src/main.ts.template: -------------------------------------------------------------------------------- 1 | import './polyfills.ts'; 2 | import { enableProdMode } from '@angular/core'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | 5 | import { AppModule } from './app/app.module'; 6 | 7 | platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { 8 | // Ensure Angular destroys itself on hot reloads. 9 | if (window['ngRef']) { 10 | window['ngRef'].destroy(); 11 | } 12 | window['ngRef'] = ref; 13 | // Otherwise, log the boot error 14 | }).catch(err => console.error(err)); 15 | -------------------------------------------------------------------------------- /site/src/stackblitz.template/src/styles.scss.template: -------------------------------------------------------------------------------- 1 | /* Stackblitz currently doesn't support the way material-components scss 2 | source files import each other. Therefore we just import the full css 3 | for this demo: */ 4 | @import "~material-components-web/dist/material-components-web.css"; 5 | /* and we apply the roboto font to the body: */ 6 | body { 7 | font-family: Roboto, sans-serif; 8 | font-family: var(--mdc-typography-font-family, Roboto, sans-serif); 9 | } 10 | -------------------------------------------------------------------------------- /site/src/stackblitz.template/tsconfig.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | }, 22 | "angularCompilerOptions": { 23 | "enableIvy": false, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true 26 | } 27 | } -------------------------------------------------------------------------------- /site/src/style/_app.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @use "sass:map"; 4 | @forward "variables"; 5 | @use "variables"; 6 | @use "@material/theme" with ( 7 | $primary: variables.$mdc-theme-primary, 8 | $secondary: variables.$mdc-theme-secondary, 9 | $background: variables.$mdc-theme-background, 10 | $surface: variables.$mdc-theme-background, 11 | $on-primary: variables.$mdc-on-primary, 12 | $on-secondary: variables.$mdc-on-secondary, 13 | $on-surface: variables.$mdc-on-surface, 14 | $error: variables.$mdc-theme-error 15 | ); 16 | @use "@material/typography" with ( 17 | $font-weight-values: variables.$mdc-font-weight-values, 18 | // mdc makes smaller headlines bolder than larger ones, undo that: 19 | $styles-headline6: (font-weight: map.get(variables.$mdc-font-weight-values, regular)) 20 | ); 21 | 22 | @use "base"; 23 | @use "page-header"; 24 | @use "page-footer"; 25 | @use "home"; 26 | @use "code-sample"; 27 | @use "components-list"; 28 | @use "docs-api"; 29 | @use "theme-switcher.scss"; 30 | 31 | // workaround for missing opacity from disabled select items 32 | // TODO this can probably be removed after upgrade to MCW > 7.0, 33 | // as it seems related to select using old structure of lists, 34 | // missing span.mdc-select__menu: 35 | .mdc-select__menu .mdc-list-item.mdc-list-item--disabled {opacity: 0.38;} 36 | -------------------------------------------------------------------------------- /site/src/style/_components-list.scss: -------------------------------------------------------------------------------- 1 | @use "@material/theme"; 2 | @use "@material/ripple/_index.scss" as ripple; 3 | @use "variables"; 4 | @use "neat"; 5 | 6 | nav.blox-component-list { 7 | a svg { 8 | fill: variables.$mdc-theme-primary; 9 | stroke: none; 10 | } 11 | } -------------------------------------------------------------------------------- /site/src/style/_mdc.scss: -------------------------------------------------------------------------------- 1 | @use "@material/button/mdc-button"; 2 | @use "@material/card/mdc-card"; 3 | @use "@material/checkbox/mdc-checkbox"; 4 | @use "@material/chips/mdc-chips"; 5 | @use "@material/dialog/mdc-dialog"; 6 | @use "@material/drawer/mdc-drawer"; 7 | @use "@material/elevation/mdc-elevation"; 8 | @use "@material/fab/mdc-fab"; 9 | @use "@material/floating-label/mdc-floating-label"; 10 | @use "@material/form-field/mdc-form-field"; 11 | @use "@material/icon-button/mdc-icon-button"; 12 | @use "@material/linear-progress/mdc-linear-progress"; 13 | @use "@material/line-ripple/mdc-line-ripple"; 14 | @use "@material/list/mdc-list"; 15 | @use "@material/menu/mdc-menu"; 16 | @use "@material/menu-surface/mdc-menu-surface"; 17 | @use "@material/notched-outline/mdc-notched-outline"; 18 | @use "@material/radio/mdc-radio"; 19 | @use "@material/ripple/mdc-ripple"; 20 | @use "@material/select/mdc-select"; 21 | @use "@material/shape"; 22 | @use "@material/slider/mdc-slider"; 23 | @use "@material/snackbar/mdc-snackbar"; 24 | @use "@material/switch/mdc-switch"; 25 | @use "@material/textfield/mdc-text-field"; 26 | @use "@material/tab-bar/mdc-tab-bar"; 27 | @use "@material/tab-scroller/mdc-tab-scroller"; 28 | @use "@material/tab-indicator/mdc-tab-indicator"; 29 | @use "@material/tab/mdc-tab"; 30 | @use "@material/top-app-bar/mdc-top-app-bar"; 31 | @use "@material/touch-target/mdc-touch-target"; 32 | @use "@material/typography/mdc-typography"; 33 | -------------------------------------------------------------------------------- /site/src/style/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | 3 | // container mixin for responsive page margins: 4 | @mixin blox-container { 5 | margin: 0 auto; 6 | max-width: variables.$container-max-width; 7 | width: variables.$container-s-width; 8 | @media only screen and (min-width: variables.$media-m-min-width) { 9 | width: variables.$container-m-width; 10 | } 11 | @media only screen and (min-width: variables.$media-l-min-width) { 12 | width: variables.$container-l-width; 13 | } 14 | @media only screen and (min-width: variables.$media-xl-min-width) { 15 | width: variables.$container-xl-width; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /site/src/style/_page-footer.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | @use "@material/typography"; 3 | @use "@material/button"; 4 | 5 | footer.blox-footer { 6 | @include typography.typography(caption); 7 | text-align: center; 8 | background: variables.$toned-bg-color; 9 | padding-top: 12px; 10 | 11 | .mdc-button { 12 | @include button.filled-accessible(variables.$toned-bg-color); 13 | margin: 8px 16px; 14 | font-weight: 400; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /site/src/style/_theme-colors.scss: -------------------------------------------------------------------------------- 1 | // definition of some of the important colors for the themes, so that they can also be used outside the theme, 2 | // for creating a theme-switcher component with color pallette. 3 | // the individual themes read the values from this map, but may also define other colors. 4 | $colors: ( 5 | dark: ( 6 | primary: #62c8f3, 7 | secondary: #00e871, 8 | surface: #212121, 9 | on-primary: #000, 10 | on-secondary: #000, 11 | on-surface: #fff, 12 | footer-surface: #1a1a1a 13 | ), 14 | funky: ( 15 | primary: #ba6b6c, 16 | secondary: #459493, 17 | surface: #f5f5f5, 18 | on-primary: #fff, 19 | on-secondary: #000, 20 | on-surface: #000, 21 | footer-surface: #e8e8e8 22 | ) 23 | ) -------------------------------------------------------------------------------- /site/src/style/_theme-switcher.scss: -------------------------------------------------------------------------------- 1 | @use "theme-colors"; 2 | @use "sass:map"; 3 | @use "sass:color"; 4 | 5 | .blox-theme-thumb-svg { 6 | width: 24px; 7 | @each $theme in map.keys(theme-colors.$colors) { 8 | &.theme-thumb-#{$theme} { 9 | $map: map.get(theme-colors.$colors, $theme); 10 | .th-footer-d { fill: color.adjust(map.get($map, footer-surface), $lightness: -5%); } 11 | .th-footer-l { fill: color.adjust(map.get($map, footer-surface), $lightness: +5%); } 12 | .th-secondary-d { fill: color.adjust(map.get($map, secondary), $lightness: -5%); } 13 | .th-secondary-l { fill: color.adjust(map.get($map, secondary), $lightness: +5%); } 14 | .th-primary-d { fill: color.adjust(map.get($map, primary), $lightness: -5%); } 15 | .th-primary-l { fill: color.adjust(map.get($map, primary), $lightness: +5%); } 16 | .th-surface-d { fill: color.adjust(map.get($map, surface), $lightness: -5%); } 17 | .th-surface-l { fill: color.adjust(map.get($map, surface), $lightness: +5%); } 18 | .th-on-surface { fill: map.get($map, on-surface); } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /site/src/style/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "@material/typography/_index.scss" as typography; 2 | 3 | body { @include typography.base; } 4 | h1 { @include typography.typography(headline5); } 5 | h2 { @include typography.typography(headline6); } 6 | h3 { @include typography.typography(subtitle1); } 7 | h4 { @include typography.typography(subtitle2); } 8 | p, blockquote { 9 | @include typography.typography(body2); 10 | &.blox-strong { 11 | @include typography.typography(body1); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /site/src/style/dark.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "theme-colors"; 3 | $theme: map.get(theme-colors.$colors, dark); 4 | @use "app.scss" with ( 5 | $top-bar-fill-color: map.get($theme, surface), 6 | $mdc-theme-primary: map.get($theme, primary), 7 | $mdc-theme-secondary: map.get($theme, secondary), 8 | $mdc-theme-background: map.get($theme, surface), 9 | $mdc-on-primary: map.get($theme, on-primary), 10 | $mdc-on-secondary: map.get($theme, on-secondary), 11 | $mdc-on-surface: map.get($theme, on-surface), 12 | $toned-bg-color: map.get($theme, footer-surface) 13 | ); 14 | @use "variables"; 15 | @use "@material/checkbox/_index.scss" as checkbox; 16 | @use "@material/icon-button/_index.scss" as icon-button; 17 | @use "@material/tab-indicator/_index.scss" as tab-indicator; 18 | @use "@material/tab/_index.scss" as tab; 19 | 20 | @include checkbox.ink-color(#000); 21 | .mdc-icon-button { @include icon-button.disabled-ink-color(text-disabled-on-dark); } 22 | .mdc-tab { 23 | @include tab.ink-color(text-secondary-on-background); 24 | @include tab.active-text-label-color(secondary); 25 | @include tab.active-icon-color(secondary); 26 | &:hover { 27 | @include tab.ink-color(on-surface); 28 | } 29 | .mdc-tab-indicator { 30 | @include tab-indicator.underline-color(secondary); 31 | } 32 | } 33 | .mdc-button.blox-button-attract { 34 | font-weight: map.get(variables.$mdc-font-weight-original-values, medium); 35 | } 36 | 37 | @import "highlight/dark"; 38 | -------------------------------------------------------------------------------- /site/src/style/highlight/_light.scss: -------------------------------------------------------------------------------- 1 | // based on default style from highlight.js 2 | 3 | .hljs { 4 | display: block; 5 | overflow-x: auto; 6 | padding: 0.5em; 7 | background: #F0F0F0; 8 | } 9 | 10 | .hljs, 11 | .hljs-subst { 12 | color: #444; 13 | } 14 | 15 | .hljs-comment { 16 | color: #888888; 17 | } 18 | 19 | .hljs-keyword, 20 | .hljs-attribute, 21 | .hljs-selector-tag, 22 | .hljs-meta-keyword, 23 | .hljs-doctag, 24 | .hljs-name { 25 | font-weight: bold; 26 | } 27 | 28 | .hljs-type, 29 | .hljs-string, 30 | .hljs-number, 31 | .hljs-selector-id, 32 | .hljs-selector-class, 33 | .hljs-quote, 34 | .hljs-template-tag, 35 | .hljs-deletion { 36 | color: #880000; 37 | } 38 | 39 | .hljs-title, 40 | .hljs-section { 41 | color: #880000; 42 | font-weight: bold; 43 | } 44 | 45 | .hljs-regexp, 46 | .hljs-symbol, 47 | .hljs-variable, 48 | .hljs-template-variable, 49 | .hljs-link, 50 | .hljs-selector-attr, 51 | .hljs-selector-pseudo { 52 | color: #BC6060; 53 | } 54 | 55 | .hljs-literal { 56 | color: #78A960; 57 | } 58 | 59 | .hljs-built_in, 60 | .hljs-bullet, 61 | .hljs-code, 62 | .hljs-addition { 63 | color: #397300; 64 | } 65 | 66 | .hljs-meta { 67 | color: #1f7199; 68 | } 69 | 70 | .hljs-meta-string { 71 | color: #4d99bf; 72 | } 73 | 74 | .hljs-emphasis { 75 | font-style: italic; 76 | } 77 | 78 | .hljs-strong { 79 | font-weight: bold; 80 | } 81 | -------------------------------------------------------------------------------- /site/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /site/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } -------------------------------------------------------------------------------- /site/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./node_modules", 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "sourceMap": true, 8 | "declaration": false, 9 | "downlevelIteration": true, 10 | "experimentalDecorators": true, 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "module": "es2020", 15 | "lib": [ 16 | "es2018", 17 | "dom" 18 | ], 19 | "paths": { 20 | "@blox/material": ["../../bundle/dist"] 21 | }, 22 | "typeRoots": [ 23 | "node_modules/@types" 24 | ] 25 | }, 26 | "angularCompilerOptions": { 27 | "fullTemplateTypeCheck": true, 28 | "strictInjectionParameters": true, 29 | "strictInputAccessModifiers": true, 30 | "strictTemplates": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /site/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------