├── .circleci └── config.yml ├── .clang-format ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ ├── bug.md │ ├── config.yml │ └── docs.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── .jshintrc ├── .mailmap ├── .nvmrc ├── .vscode ├── README.md ├── extensions.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── SECURITY.md ├── config ├── .jshintrc ├── build.config.js ├── karma-circleci.conf.js ├── karma-docs.conf.js ├── karma-jenkins.conf.js ├── karma-sauce.conf.js ├── karma-travis.conf.js ├── karma.conf.js ├── ngModuleData.js └── sauce-browsers.json ├── docs ├── README.md ├── app │ ├── css │ │ ├── highlightjs-material.css │ │ ├── layout-demo.css │ │ └── style.css │ ├── favicon.ico │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ ├── icons │ │ └── avatar-icons.svg │ ├── img │ │ ├── 100-0.jpeg │ │ ├── 100-1.jpeg │ │ ├── 100-2.jpeg │ │ ├── 60.jpeg │ │ ├── angular.png │ │ ├── donut.jpg │ │ ├── icons │ │ │ ├── addShoppingCart.svg │ │ │ ├── android.svg │ │ │ ├── angular-logo.svg │ │ │ ├── baseline-share-24px.svg │ │ │ ├── bower-logo.svg │ │ │ ├── cake.svg │ │ │ ├── codepen-logo.svg │ │ │ ├── copy.svg │ │ │ ├── copy2.svg │ │ │ ├── facebook.svg │ │ │ ├── favorite.svg │ │ │ ├── github-icon.svg │ │ │ ├── hangout.svg │ │ │ ├── ic_access_time_24px.svg │ │ │ ├── ic_arrow_back_24px.svg │ │ │ ├── ic_arrow_up_24px.svg │ │ │ ├── ic_build_24px.svg │ │ │ ├── ic_card_giftcard_24px.svg │ │ │ ├── ic_chevron_right_24px.svg │ │ │ ├── ic_close_24px.svg │ │ │ ├── ic_code_24px.svg │ │ │ ├── ic_comment_24px.svg │ │ │ ├── ic_email_24px.svg │ │ │ ├── ic_euro_24px.svg │ │ │ ├── ic_insert_drive_file_24px.svg │ │ │ ├── ic_label_24px.svg │ │ │ ├── ic_launch_24px.svg │ │ │ ├── ic_menu_24px.svg │ │ │ ├── ic_more_vert_24px.svg │ │ │ ├── ic_ondemand_video_24px.svg │ │ │ ├── ic_people_24px.svg │ │ │ ├── ic_person_24px.svg │ │ │ ├── ic_phone_24px.svg │ │ │ ├── ic_photo_24px.svg │ │ │ ├── ic_place_24px.svg │ │ │ ├── ic_play_arrow_24px.svg │ │ │ ├── ic_play_circle_fill_24px.svg │ │ │ ├── ic_refresh_24px.svg │ │ │ ├── ic_school_24px.svg │ │ │ ├── ic_visibility_24px.svg │ │ │ ├── launch.svg │ │ │ ├── list_control_down.png │ │ │ ├── mail.svg │ │ │ ├── menu.svg │ │ │ ├── message.svg │ │ │ ├── more_vert.svg │ │ │ ├── npm-logo.svg │ │ │ ├── octicon-repo.svg │ │ │ ├── print.svg │ │ │ ├── separator.svg │ │ │ ├── sets │ │ │ │ ├── communication-icons.svg │ │ │ │ ├── core-icons.svg │ │ │ │ ├── device-icons.svg │ │ │ │ ├── social-icons.svg │ │ │ │ └── symbol-icons.svg │ │ │ ├── tabs-arrow.svg │ │ │ ├── toggle-arrow.svg │ │ │ ├── twitter.svg │ │ │ └── upload.svg │ │ ├── logo.svg │ │ ├── mangues.jpg │ │ └── washedout.png │ ├── js │ │ ├── anchor.js │ │ ├── app.js │ │ ├── codepen.js │ │ ├── css-api-table.js │ │ ├── demo.js │ │ ├── demoInclude.js │ │ ├── highlight-angular.js │ │ ├── highlight.pack.js │ │ ├── ngPanel.js │ │ ├── preload.js │ │ └── scripts.js │ ├── partials │ │ ├── contributors.tmpl.html │ │ ├── demo.tmpl.html │ │ ├── docs-demo.tmpl.html │ │ ├── getting-started.tmpl.html │ │ ├── home.tmpl.html │ │ ├── layout-alignment.tmpl.html │ │ ├── layout-children.tmpl.html │ │ ├── layout-container.tmpl.html │ │ ├── layout-introduction.tmpl.html │ │ ├── layout-options.tmpl.html │ │ ├── layout-tips.tmpl.html │ │ ├── license.tmpl.html │ │ ├── menu-link.tmpl.html │ │ ├── menu-toggle.tmpl.html │ │ └── view-source.tmpl.html │ └── svg-assets-cache.js ├── config │ ├── index.js │ ├── processors │ │ ├── buildConfig.js │ │ ├── componentsData.js │ │ ├── content.js │ │ └── indexPage.js │ └── template │ │ ├── build-config.js │ │ ├── constant-data.template.js │ │ ├── demo-index.template.html │ │ ├── index.template.html │ │ ├── ngdoc │ │ ├── api │ │ │ ├── api.template.html │ │ │ ├── componentGroup.template.html │ │ │ ├── directive.template.html │ │ │ ├── filter.template.html │ │ │ ├── function.template.html │ │ │ ├── input.template.html │ │ │ ├── module.template.html │ │ │ ├── object.template.html │ │ │ ├── provider.template.html │ │ │ ├── service.template.html │ │ │ └── type.template.html │ │ ├── base.template.html │ │ ├── content.template.html │ │ └── lib │ │ │ ├── events.template.html │ │ │ ├── macros.html │ │ │ ├── methods.template.html │ │ │ ├── params.template.html │ │ │ ├── properties.template.html │ │ │ ├── returns.template.html │ │ │ └── this.template.html │ │ ├── readme.template.html │ │ └── template.json ├── content │ ├── CSS │ │ ├── button.md │ │ ├── checkbox.md │ │ └── typography.md │ ├── Theming │ │ ├── 01_introduction.md │ │ ├── 02_declarative_syntax.md │ │ ├── 03_configuring_a_theme.md │ │ ├── 04_multiple_themes.md │ │ ├── 05_under_the_hood.md │ │ └── 06_browser_color.md │ ├── migration.md │ └── performance │ │ └── internet-explorer.md ├── guides │ ├── BUILD.md │ ├── CODEPEN.md │ ├── CODING.md │ ├── COMMIT_LEVELS.md │ ├── MERGE_REQUESTS.md │ ├── PULL_REQUESTS.md │ └── THEMES_IMPL_NOTES.md ├── gulpfile.js └── spec │ ├── codepen.spec.js │ └── demo.spec.js ├── gulp ├── .jshintrc ├── config.js ├── const.js ├── tasks │ ├── build-all-modules.js │ ├── build-contributors.js │ ├── build-demo.js │ ├── build-js.js │ ├── build-module-demo.js │ ├── build-scss.js │ ├── build.js │ ├── changelog.js │ ├── ddescribe-iit.js │ ├── default.js │ ├── docs.js │ ├── jshint.js │ ├── karma-fast.js │ ├── karma-sauce.js │ ├── karma-watch.js │ ├── karma.js │ ├── server.js │ ├── site.js │ ├── validate.js │ ├── watch-demo.js │ └── watch.js └── util.js ├── gulpfile.js ├── package-lock.json ├── package.json ├── release ├── release.js ├── scripts ├── bower-material-release.sh ├── build-asset-cache.sh ├── circleci │ ├── run-tests.sh │ └── update-snapshot-and-docs.sh ├── fetch-angular-version.sh ├── find-max-version.js ├── gulp-utils.js ├── sauce │ ├── setup-tunnel.sh │ ├── stop-tunnel.sh │ └── wait-tunnel.sh ├── snapshot-docs-site.sh ├── test-versions.sh ├── utils.inc └── write-presubmit-scheduler.js ├── src ├── components │ ├── autocomplete │ │ ├── autocomplete-theme.scss │ │ ├── autocomplete.js │ │ ├── autocomplete.scss │ │ ├── autocomplete.spec.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoCustomTemplate │ │ │ ├── img │ │ │ │ └── icons │ │ │ │ │ └── octicon-repo.svg │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.global.css │ │ ├── demoFloatingLabel │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoInsideDialog │ │ │ ├── dialog.tmpl.html │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoRepeatMode │ │ │ ├── img │ │ │ │ └── icons │ │ │ │ │ └── octicon-repo.svg │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.global.css │ │ └── js │ │ │ ├── autocompleteController.js │ │ │ ├── autocompleteDirective.js │ │ │ ├── autocompleteParentScopeDirective.js │ │ │ ├── highlightController.js │ │ │ └── highlightDirective.js │ ├── backdrop │ │ ├── backdrop-theme.scss │ │ ├── backdrop.js │ │ └── backdrop.scss │ ├── bottomSheet │ │ ├── bottom-sheet-theme.scss │ │ ├── bottom-sheet.js │ │ ├── bottom-sheet.scss │ │ ├── bottom-sheet.spec.js │ │ └── demoBasicUsage │ │ │ ├── bottom-sheet-grid-template.html │ │ │ ├── bottom-sheet-list-template.html │ │ │ ├── img │ │ │ └── icons │ │ │ │ ├── copy.svg │ │ │ │ ├── copy2.svg │ │ │ │ ├── facebook.svg │ │ │ │ ├── hangout.svg │ │ │ │ ├── mail.svg │ │ │ │ ├── message.svg │ │ │ │ ├── print.svg │ │ │ │ ├── share-arrow.svg │ │ │ │ ├── twitter.svg │ │ │ │ └── upload.svg │ │ │ ├── index.html │ │ │ ├── readme.html │ │ │ ├── script.js │ │ │ └── style.css │ ├── button │ │ ├── button-theme.scss │ │ ├── button.js │ │ ├── button.scss │ │ ├── button.spec.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ └── demoDense │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ ├── card │ │ ├── card-theme.scss │ │ ├── card.js │ │ ├── card.scss │ │ ├── card.spec.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoCardActionButtons │ │ │ ├── index.html │ │ │ └── script.js │ │ └── demoInCardActions │ │ │ ├── index.html │ │ │ └── script.js │ ├── checkbox │ │ ├── checkbox-theme.scss │ │ ├── checkbox.js │ │ ├── checkbox.scss │ │ ├── checkbox.spec.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoLabels │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoSelectAll │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ └── demoSyncing │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ ├── chips │ │ ├── chips-theme.scss │ │ ├── chips.js │ │ ├── chips.scss │ │ ├── chips.spec.js │ │ ├── contact-chips.spec.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── readme.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoContactChips │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoCustomInputs │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoCustomSeparatorKeys │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoStaticChips │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoValidation │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ └── js │ │ │ ├── chipController.js │ │ │ ├── chipDirective.js │ │ │ ├── chipRemoveDirective.js │ │ │ ├── chipTranscludeDirective.js │ │ │ ├── chipsController.js │ │ │ ├── chipsDirective.js │ │ │ ├── contactChipsController.js │ │ │ └── contactChipsDirective.js │ ├── colors │ │ ├── colors.js │ │ ├── colors.spec.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── regularCard.tmpl.html │ │ │ ├── script.js │ │ │ ├── style.css │ │ │ └── userCard.tmpl.html │ │ └── demoThemePicker │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ ├── style.css │ │ │ └── themePreview.tmpl.html │ ├── content │ │ ├── content-theme.scss │ │ ├── content.js │ │ ├── content.scss │ │ ├── content.spec.js │ │ └── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ ├── datepicker │ │ ├── calendar-theme.scss │ │ ├── calendar.scss │ │ ├── datePicker-theme.scss │ │ ├── datePicker.js │ │ ├── datePicker.scss │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoCalendar │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoMoment │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoMomentCustomFormat │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoNgModelOptionsTimezone │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoValidations │ │ │ ├── index.html │ │ │ └── script.js │ │ └── js │ │ │ ├── calendar.js │ │ │ ├── calendar.spec.js │ │ │ ├── calendarMonth.js │ │ │ ├── calendarMonthBody.js │ │ │ ├── calendarYear.js │ │ │ ├── calendarYearBody.js │ │ │ ├── dateLocale.spec.js │ │ │ ├── dateLocaleProvider.js │ │ │ ├── dateUtil.js │ │ │ ├── dateUtil.spec.js │ │ │ ├── datepickerDirective.js │ │ │ └── datepickerDirective.spec.js │ ├── dialog │ │ ├── demoBasicUsage │ │ │ ├── dialog1.tmpl.html │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ ├── style.css │ │ │ └── tabDialog.tmpl.html │ │ ├── demoOpenFromCloseTo │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoThemeInheritance │ │ │ ├── dialog1.tmpl.html │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── dialog-theme.scss │ │ ├── dialog.js │ │ ├── dialog.scss │ │ └── dialog.spec.js │ ├── divider │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── divider-theme.scss │ │ ├── divider.js │ │ └── divider.scss │ ├── fabActions │ │ ├── fabActions.js │ │ └── fabActions.spec.js │ ├── fabSpeedDial │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoMoreOptions │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── fabController.js │ │ ├── fabSpeedDial-theme.scss │ │ ├── fabSpeedDial.js │ │ ├── fabSpeedDial.scss │ │ └── fabSpeedDial.spec.js │ ├── fabToolbar │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── fabToolbar.js │ │ ├── fabToolbar.scss │ │ └── fabToolbar.spec.js │ ├── gridList │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── styles.css │ │ ├── demoDynamicTiles │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoResponsiveUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── grid-list.js │ │ ├── grid-list.scss │ │ └── grid-list.spec.js │ ├── icon │ │ ├── demoFontIconsWithClassnames │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoFontIconsWithLigatures │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoLoadSvgIconsFromUrl │ │ │ ├── img │ │ │ │ └── icons │ │ │ │ │ ├── addShoppingCart.svg │ │ │ │ │ ├── android.svg │ │ │ │ │ └── cake.svg │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoSvgIconSets │ │ │ ├── assets │ │ │ │ ├── cake.svg │ │ │ │ ├── core-icons.svg │ │ │ │ ├── social-icons.svg │ │ │ │ └── symbol-icons.svg │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoUsingTemplateRequest │ │ │ ├── assets │ │ │ │ ├── android.svg │ │ │ │ ├── cake.svg │ │ │ │ └── core-icons.svg │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── icon-theme.scss │ │ ├── icon.js │ │ ├── icon.scss │ │ ├── icon.spec.js │ │ └── js │ │ │ ├── iconDirective.js │ │ │ └── iconService.js │ ├── input │ │ ├── _input-variables.scss │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoErrors │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoErrorsAdvanced │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoIcons │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoInlineForm │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── input-animations.spec.js │ │ ├── input-theme.scss │ │ ├── input.js │ │ ├── input.scss │ │ └── input.spec.js │ ├── list │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoListControls │ │ │ ├── img │ │ │ │ ├── 100-0.jpeg │ │ │ │ ├── 100-1.jpeg │ │ │ │ └── 100-2.jpeg │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── list-theme.scss │ │ ├── list.js │ │ ├── list.scss │ │ └── list.spec.js │ ├── menu │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoCustomTrigger │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoMenuDensity │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoMenuPositionModes │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoMenuWidth │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── js │ │ │ ├── menuController.js │ │ │ ├── menuDirective.js │ │ │ └── menuServiceProvider.js │ │ ├── menu-theme.scss │ │ ├── menu.js │ │ ├── menu.scss │ │ └── menu.spec.js │ ├── menuBar │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoDynamicNestedMenus │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── js │ │ │ ├── menuBarController.js │ │ │ ├── menuBarDirective.js │ │ │ ├── menuDividerDirective.js │ │ │ ├── menuItemController.js │ │ │ └── menuItemDirective.js │ │ ├── menu-bar-theme.scss │ │ ├── menu-bar.js │ │ ├── menu-bar.scss │ │ └── menu-bar.spec.js │ ├── navBar │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── navBar-theme.scss │ │ ├── navBar.js │ │ ├── navBar.scss │ │ └── navBar.spec.js │ ├── panel │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── panel.tmpl.html │ │ │ ├── script.js │ │ │ └── style.global.css │ │ ├── demoGroups │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.global.css │ │ ├── demoPanelAnimations │ │ │ ├── index.html │ │ │ ├── panel.tmpl.html │ │ │ ├── script.js │ │ │ └── style.global.css │ │ ├── demoPanelProvider │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.global.css │ │ ├── demoReuse │ │ │ ├── index.html │ │ │ ├── panel.tmpl.html │ │ │ ├── script.js │ │ │ └── style.global.css │ │ ├── panel-theme.scss │ │ ├── panel.js │ │ ├── panel.scss │ │ └── panel.spec.js │ ├── progressCircular │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── js │ │ │ ├── progressCircularDirective.js │ │ │ └── progressCircularProvider.js │ │ ├── progress-circular-theme.scss │ │ ├── progress-circular.js │ │ ├── progress-circular.scss │ │ └── progress-circular.spec.js │ ├── progressLinear │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── progress-linear-theme.scss │ │ ├── progress-linear.js │ │ ├── progress-linear.scss │ │ └── progress-linear.spec.js │ ├── radioButton │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoMultiColumn │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── radio-button-theme.scss │ │ ├── radio-button.js │ │ ├── radio-button.scss │ │ └── radio-button.spec.js │ ├── select │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoOptionGroups │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoOptionsWithAsyncSearch │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoSelectHeader │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoSelectedText │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoTrackBy │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoValidations │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── select-theme.scss │ │ ├── select.js │ │ ├── select.scss │ │ └── select.spec.js │ ├── showHide │ │ ├── showHide.js │ │ └── showHide.spec.js │ ├── sidenav │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoCustomSidenav │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoDisableCloseEvents │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── sidenav-theme.scss │ │ ├── sidenav.js │ │ ├── sidenav.scss │ │ └── sidenav.spec.js │ ├── slider │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── demoVertical │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── slider-theme.scss │ │ ├── slider.js │ │ ├── slider.scss │ │ └── slider.spec.js │ ├── sticky │ │ ├── sticky.js │ │ ├── sticky.scss │ │ └── sticky.spec.js │ ├── subheader │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── subheader-theme.scss │ │ ├── subheader.js │ │ ├── subheader.scss │ │ └── subheader.spec.js │ ├── swipe │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── readme.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── swipe.js │ │ └── swipe.scss │ ├── switch │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── switch-theme.scss │ │ ├── switch.js │ │ ├── switch.scss │ │ └── switch.spec.js │ ├── tabs │ │ ├── demoCenterTabs │ │ │ ├── index.html │ │ │ ├── readme.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoDynamicHeight │ │ │ ├── index.html │ │ │ ├── readme.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoDynamicTabs │ │ │ ├── index.html │ │ │ ├── readme.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoStaticTabs │ │ │ ├── index.html │ │ │ ├── readme.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── js │ │ │ ├── tabDirective.js │ │ │ ├── tabItemDirective.js │ │ │ ├── tabLabelDirective.js │ │ │ ├── tabScroll.js │ │ │ ├── tabsController.js │ │ │ ├── tabsDirective.js │ │ │ ├── tabsDummyWrapperDirective.js │ │ │ └── tabsTemplateDirective.js │ │ ├── tabs-theme.scss │ │ ├── tabs.js │ │ ├── tabs.scss │ │ ├── tabs.spec.js │ │ ├── tabsPaginationService.js │ │ └── tabsPaginationService.spec.js │ ├── toast │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoCustomUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ ├── style.scss │ │ │ └── toast-template.html │ │ ├── toast-theme.scss │ │ ├── toast.js │ │ ├── toast.scss │ │ └── toast.spec.js │ ├── toolbar │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoInputsInToolbar │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.scss │ │ ├── demoScrollShrink │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── toolbar-theme.scss │ │ ├── toolbar.js │ │ ├── toolbar.scss │ │ └── toolbar.spec.js │ ├── tooltip │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── tooltip-theme.scss │ │ ├── tooltip.js │ │ ├── tooltip.scss │ │ └── tooltip.spec.js │ ├── truncate │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── style.scss │ │ ├── truncate.js │ │ ├── truncate.scss │ │ └── truncate.spec.js │ ├── virtualRepeat │ │ ├── demoDeferredLoading │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoHorizontalUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoInfiniteScroll │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoScrollTo │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── demoVerticalUsage │ │ │ ├── index.html │ │ │ ├── script.js │ │ │ └── style.css │ │ ├── virtual-repeater.js │ │ ├── virtual-repeater.scss │ │ └── virtual-repeater.spec.js │ └── whiteframe │ │ ├── demoBasicClassUsage │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ │ ├── demoDirectiveAttributeUsage │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ │ ├── demoDirectiveInterpolation │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ │ ├── whiteframe.js │ │ ├── whiteframe.scss │ │ └── whiteframe.spec.js └── core │ ├── core.js │ ├── core.spec.js │ ├── services │ ├── aria │ │ ├── aria.js │ │ └── aria.spec.js │ ├── compiler │ │ ├── compiler.js │ │ └── compiler.spec.js │ ├── gesture │ │ ├── gesture.js │ │ └── gesture.spec.js │ ├── interaction │ │ ├── interaction.js │ │ └── interaction.spec.js │ ├── interimElement │ │ ├── interimElement.js │ │ └── interimElement.spec.js │ ├── layout │ │ ├── ie_fixes.css │ │ ├── layout-attributes.scss │ │ ├── layout.js │ │ ├── layout.scss │ │ └── layout.spec.js │ ├── liveAnnouncer │ │ ├── live-announcer.js │ │ └── live-announcer.spec.js │ ├── meta │ │ ├── meta.js │ │ └── meta.spec.js │ ├── registry │ │ ├── componentRegistry.js │ │ └── componentRegistry.spec.js │ ├── ripple │ │ ├── button_ripple.js │ │ ├── button_ripple.spec.js │ │ ├── checkbox_ripple.js │ │ ├── checkbox_ripple.spec.js │ │ ├── list_ripple.js │ │ ├── list_ripple.spec.js │ │ ├── ripple.js │ │ ├── ripple.spec.js │ │ ├── tab_ripple.js │ │ └── tab_ripple.spec.js │ └── theming │ │ ├── theme.palette.js │ │ ├── theming.js │ │ └── theming.spec.js │ ├── style │ ├── _mixins.scss │ ├── _modules.scss │ ├── _variables.scss │ ├── core-theme.scss │ ├── layout.scss │ ├── structure.scss │ └── typography.scss │ └── util │ ├── animation │ ├── animate.js │ ├── animate.spec.js │ ├── animateCss.js │ └── animateCss.spec.js │ ├── autofocus.js │ ├── autofocus.spec.js │ ├── color.js │ ├── constant.js │ ├── iterator.js │ ├── iterator.spec.js │ ├── media.js │ ├── media.spec.js │ ├── prefixer.js │ ├── prefixer.spec.js │ ├── util.js │ └── util.spec.js ├── start-hook.sh ├── test ├── .jshintrc ├── angular-material-mocks.js └── angular-material-spec.js ├── updateVersionPicker.js └── watch-hook.sh /.clang-format: -------------------------------------------------------------------------------- 1 | Language: JavaScript 2 | BasedOnStyle: Google 3 | ColumnLimit: 100 4 | 5 | TabWidth: 2 6 | ContinuationIndentWidth: 4 7 | MaxEmptyLinesToKeep : 2 8 | 9 | AllowShortBlocksOnASingleLine: false 10 | AllowShortIfStatementsOnASingleLine: false 11 | AllowShortLoopsOnASingleLine: false 12 | AllowShortFunctionsOnASingleLine: Empty 13 | 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Ignore miscellaneous folders 2 | .github/ 3 | .idea/ 4 | node_modules/ 5 | dist/ 6 | tmp/ 7 | bower-material/ 8 | code.material.angularjs.org/ 9 | 10 | # Ignore certain project files 11 | src/core/services/compiler/compiler.spec.js 12 | docs/config/template/*.js 13 | docs/app/js/highlight.pack.js 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Report a bug in AngularJS Material 4 | labels: "type: bug, needs triage" 5 | --- 6 | 16 | ## AngularJS Material has reached end-of-life 17 | 18 | We are no longer accepting changes into this project as 19 | **AngularJS Material support has officially ended as of January 2022.** 20 | [See what ending support means](https://docs.angularjs.org/misc/version-support-status) 21 | and [read the end of life announcement](https://goo.gle/angularjs-end-of-life). Visit 22 | [material.angular.io](https://material.angular.io) for the actively supported Angular Material. 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: AngularJS Material on StackOverflow 4 | url: https://stackoverflow.com/unanswered/tagged/angularjs-material 5 | about: Please ask and answer questions about your app or usage here. 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Documentation 3 | about: Suggest an improvement to our documentation at material.angularjs.org 4 | labels: "type: docs, needs triage" 5 | --- 6 | 16 | # AngularJS Material has reached end-of-life 17 | 18 | We are no longer accepting changes into this project as 19 | **AngularJS Material support has officially ended as of January 2022.** 20 | [See what ending support means](https://docs.angularjs.org/misc/version-support-status) 21 | and [read the end of life announcement](https://goo.gle/angularjs-end-of-life). Visit 22 | [material.angular.io](https://material.angular.io) for the actively supported Angular Material. 23 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # AngularJS Material has reached end-of-life 2 | 3 | We are no longer accepting changes into this project as 4 | **AngularJS Material support has officially ended as of January 2022.** 5 | [See what ending support means](https://docs.angularjs.org/misc/version-support-status) 6 | and [read the end of life announcement](https://goo.gle/angularjs-end-of-life). Visit 7 | [material.angular.io](https://material.angular.io) for the actively supported Angular Material. 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | dist 5 | /.idea/ 6 | tmp/ 7 | bower-material/ 8 | code.material.angularjs.org/ 9 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "sub": true, 3 | "multistr": true, 4 | "-W018": true, 5 | "expr": true, 6 | "boss": true, 7 | "laxbreak": true, 8 | "predef": ["angular"] 9 | } 10 | -------------------------------------------------------------------------------- /.mailmap: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 14 2 | -------------------------------------------------------------------------------- /.vscode/README.md: -------------------------------------------------------------------------------- 1 | # Visual Studio Code Configuration 2 | 3 | This folder contains opt-out [Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings) 4 | and [Extension recommendations](https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions) 5 | that the Angular team recommends. 6 | 7 | ## Installation 8 | 9 | To use the configuration follow the steps below: 10 | 11 | - To show the recommended extensions, select "Extensions: Show recommended extensions" 12 |   in the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). 13 | - Install the recommended extensions of [extensions.json](extensions.json) 14 | - Restart the editor 15 | 16 | ## Editing `.vscode/settings.json` 17 | 18 | If you want to add additional configuration items, please note that any configuration you 19 | add here will be used by many users. 20 | 21 | Try to restrict these settings to things that help ease the development process and 22 | avoid altering the user workflow whenever possible. 23 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: firefox-devtools.vscode-firefox-debug 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "editorconfig.editorconfig", 8 | "dbaeumer.vscode-eslint", 9 | "christian-kohler.path-intellisense", 10 | "eg2.vscode-npm-script", 11 | "firefox-devtools.vscode-firefox-debug", 12 | "dbaeumer.jshint", 13 | "msjsdiag.debugger-for-chrome", 14 | "pkief.material-icon-theme" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /config/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "sub": true, 3 | "multistr": true, 4 | "-W018": true, 5 | "expr": true, 6 | "boss": true, 7 | "laxbreak": true, 8 | "esversion": 9, 9 | "predef": ["angular"] 10 | } 11 | -------------------------------------------------------------------------------- /config/build.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('../package.json'); 2 | 3 | module.exports = { 4 | ngVersion: '1.8.2', 5 | version: pkg.version, 6 | repository: pkg.repository.url 7 | .replace(/^git/,'https') 8 | .replace(/(\.git)?\/?$/,'') 9 | }; 10 | -------------------------------------------------------------------------------- /config/karma-circleci.conf.js: -------------------------------------------------------------------------------- 1 | const baseKarma = require('./karma.conf.js'); 2 | 3 | module.exports = function(config) { 4 | baseKarma(config); 5 | 6 | // Override defaults with custom CI settings 7 | config.set({ 8 | colors: false, 9 | singleRun: true, 10 | autoWatch: false, 11 | browsers: ['ChromeHeadlessNoSandbox', 'FirefoxHeadless'], 12 | customLaunchers: { 13 | ChromeHeadlessNoSandbox: { 14 | base: 'ChromeHeadless', 15 | flags: ['--no-sandbox'] 16 | }, 17 | FirefoxHeadless: { 18 | base: 'Firefox', 19 | flags: ['-headless'], 20 | }, 21 | }, 22 | plugins: [ 23 | require("karma-jasmine"), 24 | require("karma-chrome-launcher"), 25 | require('karma-firefox-launcher'), 26 | require('karma-junit-reporter') 27 | ], 28 | junitReporter: { 29 | outputDir: 'artifacts/junit/karma' 30 | }, 31 | client: { 32 | // Do not clear the context as this can cause reload failures with Jasmine 33 | clearContext: false 34 | } 35 | }); 36 | }; 37 | -------------------------------------------------------------------------------- /config/karma-jenkins.conf.js: -------------------------------------------------------------------------------- 1 | const baseKarma = require('./karma.conf.js'); 2 | 3 | module.exports = function(config) { 4 | baseKarma(config); 5 | 6 | // Override defaults with custom CI settings 7 | config.set({ 8 | colors: false, 9 | singleRun: true, 10 | autoWatch: false, 11 | logLevel: config.LOG_DEBUG, 12 | 13 | // Only launch one browser at a time since doing multiple can cause disconnects/issues 14 | concurrency: 1, 15 | 16 | browsers: ['Chrome'], 17 | 18 | client: { 19 | // Do not clear the context as this can cause reload failures with Jasmine 20 | clearContext: false 21 | } 22 | }); 23 | }; 24 | -------------------------------------------------------------------------------- /config/karma-travis.conf.js: -------------------------------------------------------------------------------- 1 | const baseKarma = require('./karma.conf.js'); 2 | 3 | module.exports = function(config) { 4 | baseKarma(config); 5 | 6 | // Override defaults with custom CI settings 7 | config.set({ 8 | colors: false, 9 | singleRun: true, 10 | autoWatch: false, 11 | 12 | browsers: ['ChromeHeadlessNoSandbox', 'FirefoxHeadless'], 13 | customLaunchers: { 14 | ChromeHeadlessNoSandbox: { 15 | base: 'ChromeHeadless', 16 | flags: ['--no-sandbox'] 17 | }, 18 | FirefoxHeadless: { 19 | base: 'Firefox', 20 | flags: ['-headless'], 21 | }, 22 | }, 23 | 24 | client: { 25 | // Do not clear the context as this can cause reload failures with Jasmine 26 | clearContext: false 27 | } 28 | }); 29 | }; 30 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | AngularJS Material Docs 2 | ------------- 3 | 4 | - [How to build the documentation](guides/BUILD.md#livedocs) 5 | -------------------------------------------------------------------------------- /docs/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/favicon.ico -------------------------------------------------------------------------------- /docs/app/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/fonts/icomoon.eot -------------------------------------------------------------------------------- /docs/app/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/fonts/icomoon.ttf -------------------------------------------------------------------------------- /docs/app/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/fonts/icomoon.woff -------------------------------------------------------------------------------- /docs/app/img/100-0.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/100-0.jpeg -------------------------------------------------------------------------------- /docs/app/img/100-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/100-1.jpeg -------------------------------------------------------------------------------- /docs/app/img/100-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/100-2.jpeg -------------------------------------------------------------------------------- /docs/app/img/60.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/60.jpeg -------------------------------------------------------------------------------- /docs/app/img/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/angular.png -------------------------------------------------------------------------------- /docs/app/img/donut.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/donut.jpg -------------------------------------------------------------------------------- /docs/app/img/icons/addShoppingCart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/android.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/baseline-share-24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/cake.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/app/img/icons/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/copy2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/favorite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/hangout.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_arrow_back_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_arrow_up_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_build_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_card_giftcard_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_chevron_right_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_close_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_code_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_comment_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_email_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_insert_drive_file_24px.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_label_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_launch_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_menu_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_more_vert_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_ondemand_video_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_person_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_phone_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_photo_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_place_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_play_arrow_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_play_circle_fill_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_refresh_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_school_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/ic_visibility_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/app/img/icons/launch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/list_control_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/icons/list_control_down.png -------------------------------------------------------------------------------- /docs/app/img/icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/message.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/more_vert.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/app/img/icons/npm-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/app/img/icons/octicon-repo.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /docs/app/img/icons/print.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/icons/separator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/app/img/icons/tabs-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/app/img/icons/toggle-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/app/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /docs/app/img/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/app/img/mangues.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/mangues.jpg -------------------------------------------------------------------------------- /docs/app/img/washedout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/img/washedout.png -------------------------------------------------------------------------------- /docs/app/js/preload.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/docs/app/js/preload.js -------------------------------------------------------------------------------- /docs/app/js/scripts.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | angular.module('docsApp') 3 | .factory('$demoAngularScripts', ['BUILDCONFIG', DemoAngularScripts]); 4 | 5 | function DemoAngularScripts(BUILDCONFIG) { 6 | var scripts = [ 7 | 'angular.js', 8 | 'angular-animate.min.js', 9 | 'angular-route.min.js', 10 | 'angular-aria.min.js', 11 | 'angular-messages.min.js' 12 | ]; 13 | 14 | return { 15 | all: allAngularScripts 16 | }; 17 | 18 | function allAngularScripts() { 19 | return scripts.map(fullPathToScript); 20 | } 21 | 22 | function fullPathToScript(script) { 23 | return "https://ajax.googleapis.com/ajax/libs/angularjs/" + BUILDCONFIG.ngVersion + "/" + script; 24 | } 25 | } 26 | })(); 27 | -------------------------------------------------------------------------------- /docs/app/partials/demo.tmpl.html: -------------------------------------------------------------------------------- 1 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /docs/app/partials/menu-link.tmpl.html: -------------------------------------------------------------------------------- 1 | 5 | {{section | humanizeDoc}} 6 | 8 | current page 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/app/partials/menu-toggle.tmpl.html: -------------------------------------------------------------------------------- 1 | 5 |
6 | {{section.name}} 7 | 8 | 12 |
13 | 14 | Toggle {{isOpen()? 'expanded' : 'collapsed'}} 15 | 16 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /docs/app/partials/view-source.tmpl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | {{file.viewType}} 8 | 9 | 10 | 11 | 12 |
13 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | Done 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/config/processors/content.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash'); 2 | 3 | module.exports = function contentProcessor() { 4 | return { 5 | $runAfter: ['paths-computed'], 6 | $runBefore: ['rendering-docs'], 7 | $process: function(docs) { 8 | const contentDocs = _(docs) 9 | .filter(function(doc) { 10 | return doc.docType === 'content'; 11 | }) 12 | .groupBy('area') 13 | .mapValues(function(areaDocs) { 14 | return _.map(areaDocs, function(areaDoc) { 15 | return { 16 | name: areaDoc.name, 17 | outputPath: areaDoc.outputPath, 18 | url: '/' + areaDoc.path, 19 | label: areaDoc.label || areaDoc.name 20 | }; 21 | }); 22 | }). 23 | value(); 24 | 25 | docs.push({ 26 | name: 'PAGES', 27 | template: 'constant-data.template.js', 28 | outputPath: 'js/content-data.js', 29 | items: contentDocs 30 | }); 31 | } 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /docs/config/processors/indexPage.js: -------------------------------------------------------------------------------- 1 | const buildConfig = require('../../../config/build.config'); 2 | 3 | module.exports = function indexPageProcessor() { 4 | return { 5 | $runAfter: ['componentsGenerateProcessor'], 6 | $runBefore: ['rendering-docs'], 7 | $process: process 8 | }; 9 | 10 | function process(docs) { 11 | docs.push({ 12 | template: 'index.template.html', 13 | outputPath: 'index.html', 14 | path: 'index.html', 15 | buildConfig: buildConfig 16 | }); 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /docs/config/template/build-config.js: -------------------------------------------------------------------------------- 1 | angular.module('docsApp').constant('BUILDCONFIG', {$ doc.buildConfig | json $}); 2 | -------------------------------------------------------------------------------- /docs/config/template/constant-data.template.js: -------------------------------------------------------------------------------- 1 | angular.module('docsApp').constant('{$ doc.name $}', {$ doc.items | json $}); 2 | -------------------------------------------------------------------------------- /docs/config/template/demo-index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= name %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | <% js.forEach(function(file) { %> 16 | 17 | <% }); %> 18 | <% css.forEach(function(file) { %> 19 | 20 | <% }); %> 21 | 22 | 23 | 24 | <%= index.contents %> 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/componentGroup.template.html: -------------------------------------------------------------------------------- 1 | {% block content %} 2 |

3 | {%- if doc.title -%} 4 | {$ doc.title $} 5 | {%- elif doc.module -%} 6 | {$ doc.groupType | title $} components in {$ doc.module | code $} 7 | {%- else -%} 8 | Pages 9 | {%- endif -%} 10 |

11 | 12 | {$ doc.description | marked $} 13 | 14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 | {% for page in doc.components %} 22 | 23 | 24 | 25 | 26 | {% endfor %} 27 |
NameDescription
{$ page.id | link(page.name, page) $}{$ page.description | firstParagraph | marked $}
28 |
29 |
30 | 31 | {% endblock %} 32 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/filter.template.html: -------------------------------------------------------------------------------- 1 | {% include "lib/macros.html" -%} 2 | {% extends "api/api.template.html" %} 3 | 4 | {% block additional %} 5 |

In HTML Template Binding

6 | {% if doc.usage %} 7 | {$ doc.usage | code $} 8 | {% else %} 9 | {% code -%} 10 | {{ {$ doc.name $}_expression | {$ doc.name $} 11 | {%- for param in doc.params %}{% if not loop.first %} : {$ param.name $}{% endif %}{% endfor -%} 12 | }} 13 | {%- endcode %} 14 | {% endif %} 15 | 16 |

In JavaScript

17 | {% code -%} 18 | {%- set sep = joiner(', ') -%} 19 | $filter('{$ doc.name $}')({% for param in doc.params %}{$ sep() $}{$ param.name $}{% endfor -%}) 20 | {%- endcode %} 21 | 22 | {% include "lib/params.template.html" %} 23 | {% include "lib/this.template.html" %} 24 | {% include "lib/returns.template.html" %} 25 | {% endblock %} 26 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/function.template.html: -------------------------------------------------------------------------------- 1 | {% extends "api/object.template.html" %} 2 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/input.template.html: -------------------------------------------------------------------------------- 1 | {% include "lib/macros.html" -%} 2 | {% extends "api/directive.template.html" %} 3 | 4 | {% block usage %} 5 | {% code %} 6 | 10 | {% endcode %} 11 | {% endblock %} 12 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/module.template.html: -------------------------------------------------------------------------------- 1 | {% extends "base.template.html" %} 2 | 3 | {% block content %} 4 |

5 | {% if doc.title %}{$ doc.title | marked $}{% else %}{$ doc.name | code $}{% endif %} 6 |

7 | 8 | {$ doc.description | marked $} 9 | 10 | {% endblock %} 11 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/object.template.html: -------------------------------------------------------------------------------- 1 | {% include "lib/macros.html" %} 2 | {% extends "api/api.template.html" %} 3 | 4 | {% block additional %} 5 | 6 | {% if doc.usage %} 7 |
8 |

Usage

9 | {$ doc.usage | marked $} 10 |
11 | {% endif %} 12 | 13 | {% if doc.params or doc.returns or doc.this or doc.kind == 'function' -%} 14 |
15 | {% include "lib/params.template.html" %} 16 | {% include "lib/this.template.html" %} 17 | {% include "lib/returns.template.html" %} 18 |
19 | {%- endif %} 20 | 21 | {% include "lib/methods.template.html" %} 22 | {% include "lib/events.template.html" %} 23 | {% include "lib/properties.template.html" %} 24 | 25 | {% endblock %} 26 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/provider.template.html: -------------------------------------------------------------------------------- 1 | {% extends "api/object.template.html" %} 2 | 3 | {% block related_components %} 4 | {% if doc.serviceDoc -%} 5 |
  • 6 | - {$ doc.serviceDoc.name $} 7 |
    • 8 | {%- endif %} 9 | {% endblock %} 10 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/service.template.html: -------------------------------------------------------------------------------- 1 | {% extends "api/object.template.html" %} 2 | 3 | {% block related_components %} 4 | {% if doc.providerDoc -%} 5 |
  • 6 | - {$ doc.providerDoc.name $} 7 |
    • 8 | {%- endif %} 9 | {% endblock %} 10 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/api/type.template.html: -------------------------------------------------------------------------------- 1 | {% extends "api/object.template.html" %} 2 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/base.template.html: -------------------------------------------------------------------------------- 1 |
    2 | {% block content %} 3 | {% endblock %} 4 |
    5 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/content.template.html: -------------------------------------------------------------------------------- 1 |
    2 | {% block content %} 3 | {$ doc.description | marked $} 4 | {% endblock %} 5 |
    6 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/lib/events.template.html: -------------------------------------------------------------------------------- 1 | {%- if doc.events %} 2 |
    3 |

    Events

    4 | 26 |
    27 | {% endif -%} 28 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/lib/methods.template.html: -------------------------------------------------------------------------------- 1 | {% import "./macros.html" as macros %} 2 | 3 | {%- if doc.methods %} 4 |
    5 |

    Methods

    6 |
    7 | 35 |
    36 | {%- endif -%} 37 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/lib/params.template.html: -------------------------------------------------------------------------------- 1 | {% import "./macros.html" as macros %} 2 | 3 | {%- if doc.params %} 4 |
    5 |

    6 | {% if doc.paramType %} 7 | {$ doc.paramType $} 8 | {% elif doc.docType == 'directive' %} 9 | Attributes 10 | {% else %} 11 | Arguments 12 | {% endif %} 13 |

    14 |
    15 | {$ macros.paramTable(doc.params) $} 16 |
    17 |
    18 | {%- endif -%} 19 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/lib/properties.template.html: -------------------------------------------------------------------------------- 1 | {% import "./macros.html" as macros %} 2 | 3 | {%- if doc.properties %} 4 |
    5 |

    Properties

    6 |
    7 | 35 |
    36 | {%- endif -%} 37 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/lib/returns.template.html: -------------------------------------------------------------------------------- 1 | {% import "./macros.html" as macros %} 2 | 3 | {% if doc.returns -%} 4 |
    5 | {$ macros.returnTable(doc.returns) $} 6 |
    7 | {%- endif %} 8 | -------------------------------------------------------------------------------- /docs/config/template/ngdoc/lib/this.template.html: -------------------------------------------------------------------------------- 1 |
    2 | {% if doc.this %} 3 |

    Method's {% code %}this{% endcode %}

    4 | {$ doc.this | marked $} 5 | {% endif %} 6 |
    7 | 8 | -------------------------------------------------------------------------------- /docs/config/template/template.json: -------------------------------------------------------------------------------- 1 | {$ doc.content | json $} 2 | -------------------------------------------------------------------------------- /gulp/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "sub": true, 3 | "multistr": true, 4 | "-W018": true, 5 | "expr": true, 6 | "boss": true, 7 | "laxbreak": true, 8 | "esversion": 9, 9 | "predef": ["angular"] 10 | } 11 | -------------------------------------------------------------------------------- /gulp/tasks/build-all-modules.js: -------------------------------------------------------------------------------- 1 | const BUILD_MODE = require('../const').BUILD_MODE; 2 | 3 | const gulp = require('gulp'); 4 | const path = require('path'); 5 | const through2 = require('through2'); 6 | const series = require('stream-series'); 7 | const util = require('../util'); 8 | 9 | exports.task = function() { 10 | const isRelease = process.argv.indexOf('--release') !== -1; 11 | return gulp.src(['src/core/', 'src/components/*']) 12 | .pipe(through2.obj(function(folder, enc, next) { 13 | const moduleId = folder.path.indexOf('components') > -1 14 | ? 'material.components.' + path.basename(folder.path) 15 | : 'material.' + path.basename(folder.path); 16 | const stream = isRelease ? 17 | series( 18 | util.buildModule(moduleId, { minify: true, useBower: BUILD_MODE.useBower }), 19 | util.buildModule(moduleId, {}) 20 | ) : util.buildModule(moduleId, {}); 21 | stream.on('end', function() { next(); }); 22 | })) 23 | .pipe(BUILD_MODE.transform()); 24 | }; 25 | -------------------------------------------------------------------------------- /gulp/tasks/build-demo.js: -------------------------------------------------------------------------------- 1 | const util = require('../util'); 2 | 3 | exports.dependencies = ['build', 'build-module-demo']; 4 | 5 | exports.task = function() { 6 | return util.buildModule(util.readModuleArg()); 7 | }; 8 | -------------------------------------------------------------------------------- /gulp/tasks/build-js.js: -------------------------------------------------------------------------------- 1 | const util = require('../util'); 2 | 3 | exports.task = function() { 4 | return util.buildJs(); 5 | }; 6 | -------------------------------------------------------------------------------- /gulp/tasks/build.js: -------------------------------------------------------------------------------- 1 | exports.dependencies = ['build-scss', 'build-js']; 2 | -------------------------------------------------------------------------------- /gulp/tasks/default.js: -------------------------------------------------------------------------------- 1 | exports.dependencies = ['build']; 2 | -------------------------------------------------------------------------------- /gulp/tasks/docs.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const connect = require('gulp-connect'); 3 | const constants = require('../const'); 4 | const IS_DEV = constants.IS_DEV; 5 | 6 | if (IS_DEV) { 7 | exports.dependencies = ['docs-js', 'docs-css', 'docs-demo-scripts']; 8 | } else { 9 | exports.dependencies = ['docs-js', 'docs-css', 'docs-demo-scripts', 'build-contributors']; 10 | } 11 | 12 | exports.task = function () { gulp.src('.').pipe(connect.reload()); }; 13 | -------------------------------------------------------------------------------- /gulp/tasks/jshint.js: -------------------------------------------------------------------------------- 1 | const config = require('../config'); 2 | const gulp = require('gulp'); 3 | const jshint = require('gulp-jshint'); 4 | 5 | exports.task = function() { 6 | return gulp.src(config.jsHintFiles) 7 | .pipe(jshint('.jshintrc')) 8 | .pipe(jshint.reporter('jshint-summary', { 9 | fileColCol: ',bold', 10 | positionCol: ',bold', 11 | codeCol: 'green,bold', 12 | reasonCol: 'cyan' 13 | })) 14 | .pipe(jshint.reporter('fail')); 15 | }; 16 | -------------------------------------------------------------------------------- /gulp/tasks/karma-sauce.js: -------------------------------------------------------------------------------- 1 | const ROOT = require('../const').ROOT; 2 | const karma = require('karma'); 3 | const parseConfig = karma.config.parseConfig; 4 | const Server = karma.Server; 5 | const karmaOptions = { 6 | logLevel: 'warn' 7 | }; 8 | 9 | exports.task = function(done) { 10 | parseConfig(ROOT + '/config/karma-sauce.conf.js', karmaOptions, { 11 | promiseConfig: true, 12 | throwErrors: true 13 | }).then(parsedKarmaConfig => { 14 | const server = new Server(parsedKarmaConfig, function(exitCode) { 15 | // Immediately exit the process if Karma reported errors, because due to 16 | // potential still running tunnel-browsers gulp won't exit properly. 17 | // eslint-disable-next-line no-process-exit 18 | exitCode === 0 ? done() : process.exit(exitCode); 19 | }); 20 | server.start(); 21 | }); 22 | }; 23 | -------------------------------------------------------------------------------- /gulp/tasks/server.js: -------------------------------------------------------------------------------- 1 | const connect = require('gulp-connect'); 2 | const LR_PORT = require('../const').LR_PORT; 3 | 4 | exports.task = function () { 5 | connect.server({ 6 | root: './', 7 | livereload: true, 8 | port: LR_PORT 9 | }); 10 | }; 11 | -------------------------------------------------------------------------------- /gulp/tasks/site.js: -------------------------------------------------------------------------------- 1 | const connect = require('gulp-connect'); 2 | const LR_PORT = require('../const').LR_PORT; 3 | 4 | exports.task = function () { 5 | connect.server({ 6 | root: './dist/docs', 7 | livereload: true, 8 | port: LR_PORT, 9 | 10 | // For any 404, respond with index.html. This enables html5Mode routing. 11 | // In a production environment, this would be done with much more 12 | // fine-grained URL rewriting rules. 13 | fallback: './dist/docs/index.html' 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /gulp/tasks/validate.js: -------------------------------------------------------------------------------- 1 | exports.dependencies = ['jshint', 'ddescribe-iit', 'karma']; 2 | -------------------------------------------------------------------------------- /gulp/tasks/watch-demo.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const gutil = require('gulp-util'); 3 | const util = require('../util'); 4 | 5 | exports.dependencies = ['build-demo']; 6 | 7 | exports.task = function () { 8 | const module = util.readModuleArg(); 9 | const name = module.split('.').pop(); 10 | const dir = "/dist/demos/" + name.trim(); 11 | gutil.log('\n', 12 | '-- Rebuilding', dir, 'when source files change...\n', 13 | '-- Navigate to', gutil.colors.green('"dist/demos/' + name + '/"'), 14 | 'in your browser to develop.' 15 | ); 16 | 17 | return gulp.watch('src/**/!(*.spec)', ['build-demo']); 18 | }; 19 | -------------------------------------------------------------------------------- /gulp/tasks/watch.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | 3 | exports.dependencies = ['docs']; 4 | 5 | exports.task = function() { 6 | gulp.watch(['docs/**/*', 'src/**/!(*.spec)'], ['docs']); 7 | }; 8 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const fs = require('fs'); 3 | 4 | // include docs gulpfile (should eventually be factored out) 5 | require('./docs/gulpfile'); 6 | 7 | // read in all files from gulp/tasks and create tasks for them 8 | fs.readdirSync('./gulp/tasks') 9 | .filter(function (filename) { 10 | return filename.match(/\.js$/i); 11 | }) 12 | .map(function (filename) { 13 | return { 14 | name: filename.substr(0, filename.length - 3), 15 | contents: require('./gulp/tasks/' + filename) 16 | }; 17 | }) 18 | .forEach(function (file) { 19 | gulp.task(file.name, file.contents.dependencies, file.contents.task); 20 | }); 21 | -------------------------------------------------------------------------------- /release: -------------------------------------------------------------------------------- 1 | node --harmony release.js 2 | -------------------------------------------------------------------------------- /scripts/build-asset-cache.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Intended to generate an object literal of SVG images 4 | # key - relative path to file. 5 | # value - contents of the SVG. 6 | # 7 | # See the following guide about the process to update the asset cache: 8 | # https://github.com/angular/material/blob/feature/edit-example-on-codepen/docs/guides/CODEPEN.md 9 | 10 | echo { 11 | for i in $(find docs/app/{img/icons,icons} -type f -name *.svg); do 12 | filename=`echo $i | sed "s/docs\/app\///"` 13 | contents=`cat $i | tr -d '\r\n'` 14 | echo -e \'$filename\' : \'$contents\', 15 | done 16 | echo } 17 | -------------------------------------------------------------------------------- /scripts/circleci/run-tests.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Enable tracing and Terminate the execution if anything fails in the pipeline. 4 | set -xe 5 | 6 | # Ensure that scripts will run from project dir. 7 | cd $(dirname ${0})/../.. 8 | 9 | # When Travis CI specifies an AngularJS version, try to install those for tests. 10 | if [[ -n "$NG_VERSION" ]]; then 11 | ./scripts/fetch-angular-version.sh "$NG_VERSION" 12 | fi 13 | 14 | # Run our check to make sure all tests will actually run 15 | npm run ddescribe-iit 16 | 17 | npm run test:ci 18 | -------------------------------------------------------------------------------- /scripts/circleci/update-snapshot-and-docs.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | ARG_DEFS=( 4 | "--sha=(.*)" 5 | ) 6 | 7 | git config --global user.email "ngmaterial@googlegroups.com" 8 | git config --global user.name "ngMaterial Bot" 9 | 10 | function init { 11 | # If --git-push-dryrun or --verbose are set, be sure to export them 12 | # so they are set in all the other scripts too 13 | export GIT_PUSH_DRYRUN=$GIT_PUSH_DRYRUN 14 | export VERBOSE=$VERBOSE 15 | } 16 | 17 | function run { 18 | cd ../../ 19 | 20 | NEW_VERSION="$(readJsonProp "package.json" "version")-master-$(echo $SHA | head -c 7)" 21 | 22 | ./scripts/bower-material-release.sh --version=$NEW_VERSION 23 | ./scripts/snapshot-docs-site.sh --version=$NEW_VERSION 24 | } 25 | 26 | source $(dirname $0)/../utils.inc 27 | -------------------------------------------------------------------------------- /scripts/sauce/setup-tunnel.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | SAUCE_BINARY_FILE="sc-4.4.6-linux.tar.gz" 4 | SAUCE_BINARY_DIR="/tmp/sauce" 5 | SAUCE_ACCESS_KEY=`echo $SAUCE_ACCESS_KEY | rev` 6 | 7 | echo "Installing Sauce Connector binaries..." 8 | 9 | mkdir -p $SAUCE_BINARY_DIR 10 | 11 | # Install the Sauce Connector binary 12 | wget https://saucelabs.com/downloads/$SAUCE_BINARY_FILE -O $SAUCE_BINARY_DIR/$SAUCE_BINARY_FILE 13 | tar -xzf $SAUCE_BINARY_DIR/$SAUCE_BINARY_FILE -C $SAUCE_BINARY_DIR --strip-components=1 14 | 15 | # Arguments to be applied to the Sauce Connector. 16 | CONNECT_ARGS="--readyfile $SAUCE_READY_FILE" 17 | 18 | # Apply the Travis Job Number to the tunnel 19 | if [ ! -z "$TRAVIS_JOB_NUMBER" ]; then 20 | CONNECT_ARGS="$CONNECT_ARGS --tunnel-identifier $TRAVIS_JOB_ID" 21 | fi 22 | 23 | echo "Starting Sauce Connector Tunnel" 24 | echo "- Username: $SAUCE_USERNAME" 25 | echo "- Arguments: $CONNECT_ARGS" 26 | 27 | # Starting the Sauce Tunnel. 28 | $SAUCE_BINARY_DIR/bin/sc -vv -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY $CONNECT_ARGS & 29 | -------------------------------------------------------------------------------- /scripts/sauce/stop-tunnel.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Closes all instances of any Sauce Connector and waits for them to finish. 4 | killall --wait sc -------------------------------------------------------------------------------- /scripts/sauce/wait-tunnel.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Wait for the tunnel to be ready. 4 | while [ ! -e $SAUCE_READY_FILE ]; do 5 | sleep 1; 6 | done 7 | 8 | echo "Sauce Tunnel is now ready" -------------------------------------------------------------------------------- /src/components/autocomplete/autocomplete.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.autocomplete 4 | */ 5 | /* 6 | * @see js folder for autocomplete implementation 7 | */ 8 | angular.module('material.components.autocomplete', [ 9 | 'material.core', 10 | 'material.components.icon', 11 | 'material.components.virtualRepeat' 12 | ]); 13 | -------------------------------------------------------------------------------- /src/components/autocomplete/demoCustomTemplate/img/icons/octicon-repo.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/autocomplete/demoCustomTemplate/style.global.css: -------------------------------------------------------------------------------- 1 | md-autocomplete#custom-template { 2 | width: 200px; 3 | } 4 | .autocomplete-custom-template .md-autocomplete-suggestion { 5 | border-bottom: 1px solid #ccc; 6 | height: auto; 7 | padding-top: 8px; 8 | padding-bottom: 8px; 9 | white-space: normal; 10 | } 11 | .autocomplete-custom-template .md-autocomplete-suggestion:last-child { 12 | border-bottom-width: 0; 13 | } 14 | .autocomplete-custom-template .item-title, 15 | .autocomplete-custom-template .item-metadata { 16 | display: block; 17 | line-height: 2; 18 | } 19 | .autocomplete-custom-template .item-title md-icon { 20 | height: 18px; 21 | width: 18px; 22 | } 23 | .custom-container { 24 | min-width: 300px !important; 25 | } 26 | -------------------------------------------------------------------------------- /src/components/autocomplete/demoInsideDialog/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | Click the button below to open the dialog with an autocomplete. 5 |

    6 | Open Dialog 7 |     8 |
    9 | -------------------------------------------------------------------------------- /src/components/autocomplete/demoRepeatMode/img/icons/octicon-repo.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/backdrop/backdrop-theme.scss: -------------------------------------------------------------------------------- 1 | md-backdrop { 2 | 3 | background-color: '{{background-900-0.0}}'; 4 | 5 | &.md-opaque.md-THEME_NAME-theme { 6 | background-color: '{{background-900-1.0}}'; 7 | } 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/components/bottomSheet/bottom-sheet-theme.scss: -------------------------------------------------------------------------------- 1 | md-bottom-sheet.md-THEME_NAME-theme { 2 | background-color: '{{background-color}}'; 3 | border-top-color: '{{background-hue-3}}'; 4 | 5 | &.md-list { 6 | md-list-item { 7 | color: '{{foreground-1}}'; 8 | } 9 | } 10 | 11 | .md-subheader { 12 | background-color: '{{background-color}}'; 13 | } 14 | 15 | .md-subheader { 16 | color: '{{foreground-1}}'; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |

    Since clickOutsideToClose = false, drag down or press ESC to close

    4 |
    5 |
    6 | 7 | 8 |
    9 | 10 | 11 |
    {{ item.name }}
    12 |     13 |
    14 |     15 |     16 |
    17 |     18 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/bottom-sheet-list-template.html: -------------------------------------------------------------------------------- 1 | 2 | Comment Actions 3 | 4 | 5 | 6 | 10 | 11 | {{ item.name }} 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/copy2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/hangout.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/message.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/print.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/share-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/img/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/index.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Usage

    3 |

    Bottom sheets can be displayed by clicking one of the buttons below. Once shown, it can be 4 | dismissed by either swiping down or clicking in the shaded area.

    5 |

    Actions

    6 |

    Use one of the following buttons to display a bottom sheet.

    7 |
    8 | Show as List 9 | Show as Grid 10 |
    11 | 12 |
    13 |
    14 | 15 | {{alert}} 16 | 17 |
    18 |
    19 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/readme.html: -------------------------------------------------------------------------------- 1 |

    This UX pattern is intended for mobile devices only, and may not make sense to use 2 | on responsive sites.

    3 | -------------------------------------------------------------------------------- /src/components/bottomSheet/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | .md-inline-list-icon-label { 2 | display: inline-block; 3 | padding-left: 10px; 4 | padding-right: 10px; 5 | margin-top: -10px; 6 | height: 24px; 7 | vertical-align: middle; 8 | } 9 | .md-grid-item-content { 10 | height: 90px; 11 | padding-top: 10px; 12 | } 13 | .md-grid-item-content md-icon { 14 | height: 48px; 15 | width: 48px; 16 | } 17 | .md-grid-text { 18 | padding-bottom: 5px; 19 | } 20 | md-list-item, md-list-item .md-list-item-inner { 21 | min-height: 48px; 22 | } 23 | h2 { 24 | line-height: 36px; 25 | padding-top: 10px; 26 | } 27 | .md-subheader .md-subheader-inner { 28 | padding: 0; 29 | } 30 | md-toast .md-toast-content { 31 | background-color: #B14141; 32 | } 33 | md-toast > * { 34 | font-weight: bolder; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/button/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('buttonsDemoBasic', ['ngMaterial']) 2 | .controller('AppCtrl', function($scope) { 3 | $scope.isDisabled = true; 4 | $scope.googleUrl = 'http://google.com'; 5 | }); 6 | -------------------------------------------------------------------------------- /src/components/button/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | border-radius: 3px; 3 | text-align: center; 4 | margin: 1em; 5 | position: relative !important; 6 | } 7 | section .md-button { 8 | margin-top: 16px; 9 | margin-bottom: 16px; 10 | } 11 | .label { 12 | position: absolute; 13 | bottom: 5px; 14 | left: 7px; 15 | font-size: 14px; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/button/demoDense/script.js: -------------------------------------------------------------------------------- 1 | angular.module('buttonsDemoDense', ['ngMaterial']) 2 | .controller('AppCtrl', function($scope) { 3 | $scope.isDisabled = true; 4 | $scope.googleUrl = 'http://google.com'; 5 | }); 6 | -------------------------------------------------------------------------------- /src/components/button/demoDense/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | text-align: center; 3 | margin: 8px; 4 | position: relative !important; 5 | } 6 | .label { 7 | position: absolute; 8 | bottom: 5px; 9 | left: 7px; 10 | font-size: 12px; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/card/card-theme.scss: -------------------------------------------------------------------------------- 1 | $card-border-radius: 2px !default; 2 | 3 | md-card.md-THEME_NAME-theme { 4 | color: '{{foreground-1}}'; 5 | background-color: '{{background-hue-1}}'; 6 | border-radius: $card-border-radius; 7 | 8 | .md-card-image { 9 | border-radius: $card-border-radius $card-border-radius 0 0; 10 | } 11 | 12 | md-card-header { 13 | md-card-avatar { 14 | md-icon { 15 | color: '{{background-color}}'; 16 | background-color: '{{foreground-3}}'; 17 | } 18 | } 19 | 20 | md-card-header-text { 21 | .md-subhead { 22 | color: '{{foreground-2}}' 23 | } 24 | } 25 | } 26 | 27 | md-card-title { 28 | md-card-title-text { 29 | &:not(:only-child) { 30 | .md-subhead { 31 | color: '{{foreground-2}}'; 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/card/card.spec.js: -------------------------------------------------------------------------------- 1 | describe('mdCard directive', function() { 2 | 3 | var $mdThemingMock = function() { $mdThemingMock.called = true; }; 4 | var $compile; 5 | var $rootScope; 6 | 7 | beforeEach(function() { 8 | module('material.components.card'); 9 | module(function($provide) { 10 | $provide.value('$mdTheming', $mdThemingMock); 11 | }); 12 | inject(function(_$compile_, _$rootScope_) { 13 | $compile = _$compile_; 14 | $rootScope = _$rootScope_; 15 | }); 16 | }); 17 | 18 | it('should be themable', function() { 19 | $compile('')($rootScope.$new()); 20 | expect($mdThemingMock.called).toBe(true); 21 | }); 22 | 23 | it('should have `._md` class indicator', function() { 24 | var element = $compile('')($rootScope.$new()); 25 | expect(element.hasClass('_md')).toBe(true); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /src/components/card/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('cardDemo1', ['ngMaterial']) 3 | 4 | .controller('AppCtrl', function($scope) { 5 | $scope.imagePath = 'img/washedout.png'; 6 | }) 7 | .config(function($mdThemingProvider) { 8 | $mdThemingProvider.theme('dark-grey').backgroundPalette('grey').dark(); 9 | $mdThemingProvider.theme('dark-orange').backgroundPalette('orange').dark(); 10 | $mdThemingProvider.theme('dark-purple').backgroundPalette('deep-purple').dark(); 11 | $mdThemingProvider.theme('dark-blue').backgroundPalette('blue').dark(); 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/card/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | .card-media { 2 | background-color: #999999; 3 | } -------------------------------------------------------------------------------- /src/components/card/demoCardActionButtons/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('cardDemo2', ['ngMaterial']) 3 | 4 | .controller('AppCtrl', function($scope) { 5 | $scope.imagePath = 'img/washedout.png'; 6 | }); 7 | -------------------------------------------------------------------------------- /src/components/card/demoInCardActions/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('cardDemo3', ['ngMaterial']) 3 | 4 | .config(['$mdIconProvider', function($mdIconProvider) { 5 | $mdIconProvider.icon('md-toggle-arrow', 'img/icons/toggle-arrow.svg', 48); 6 | }]) 7 | .controller('AppCtrl', function($scope) { 8 | $scope.imagePath = 'img/washedout.png'; 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/checkbox/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('checkboxDemo1', ['ngMaterial']) 3 | 4 | .controller('AppCtrl', function($scope) { 5 | 6 | $scope.data = {}; 7 | $scope.data.cb1 = true; 8 | $scope.data.cb2 = false; 9 | $scope.data.cb3 = false; 10 | $scope.data.cb4 = false; 11 | $scope.data.cb5 = false; 12 | 13 | }); 14 | -------------------------------------------------------------------------------- /src/components/checkbox/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | div.flex-xs { 2 | min-height:40px; 3 | } 4 | .checkboxDemo1 div { 5 | clear: both; 6 | } 7 | p { 8 | padding-left: 8px; 9 | } 10 | fieldset.standard { 11 | border-style: solid; 12 | border-width: 1px; 13 | } 14 | legend { 15 | color: #3F51B5; 16 | } 17 | .ipsum { 18 | color: saddlebrown; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/checkbox/demoLabels/script.js: -------------------------------------------------------------------------------- 1 | angular.module('checkboxDemo1', ['ngMaterial']) 2 | 3 | .controller('AppCtrl', function($scope) { 4 | $scope.data = {}; 5 | $scope.data.cb1 = true; 6 | $scope.data.cb2 = true; 7 | $scope.data.cb3 = false; 8 | $scope.data.cb4 = false; 9 | $scope.data.cb5 = false; 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/checkbox/demoLabels/style.css: -------------------------------------------------------------------------------- 1 | fieldset.standard { 2 | border: 1px solid; 3 | } 4 | legend { 5 | color: #3F51B5; 6 | } 7 | label { 8 | cursor: pointer; 9 | margin-right: 10px; 10 | user-select: none; 11 | height: 16px; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/checkbox/demoSelectAll/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 6 |
    7 | Using <md-checkbox> with the 'indeterminate' attribute 8 | 12 | Un-Select All 13 | 14 |
    15 | 16 | {{ item }} 17 | 18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/components/checkbox/demoSelectAll/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('checkboxDemo3', ['ngMaterial']) 3 | 4 | .controller('AppCtrl', function($scope) { 5 | $scope.items = [1,2,3,4,5]; 6 | $scope.selected = [1]; 7 | $scope.toggle = function (item, list) { 8 | var idx = list.indexOf(item); 9 | if (idx > -1) { 10 | list.splice(idx, 1); 11 | } 12 | else { 13 | list.push(item); 14 | } 15 | }; 16 | 17 | $scope.exists = function (item, list) { 18 | return list.indexOf(item) > -1; 19 | }; 20 | 21 | $scope.isIndeterminate = function() { 22 | return ($scope.selected.length !== 0 && 23 | $scope.selected.length !== $scope.items.length); 24 | }; 25 | 26 | $scope.isChecked = function() { 27 | return $scope.selected.length === $scope.items.length; 28 | }; 29 | 30 | $scope.toggleAll = function() { 31 | if ($scope.selected.length === $scope.items.length) { 32 | $scope.selected = []; 33 | } else if ($scope.selected.length === 0 || $scope.selected.length > 0) { 34 | $scope.selected = $scope.items.slice(0); 35 | } 36 | }; 37 | }); 38 | -------------------------------------------------------------------------------- /src/components/checkbox/demoSelectAll/style.css: -------------------------------------------------------------------------------- 1 | legend { 2 | color: #3F51B5; 3 | } 4 | fieldset { 5 | border-style: solid; 6 | border-width: 1px; 7 | } 8 | .demo-select-all-checkboxes { 9 | padding-left: 30px; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/checkbox/demoSyncing/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('checkboxDemo2', ['ngMaterial']) 3 | 4 | .controller('AppCtrl', function($scope) { 5 | 6 | $scope.items = [1,2,3,4,5]; 7 | $scope.selected = []; 8 | 9 | $scope.toggle = function (item, list) { 10 | var idx = list.indexOf(item); 11 | if (idx > -1) { 12 | list.splice(idx, 1); 13 | } 14 | else { 15 | list.push(item); 16 | } 17 | }; 18 | 19 | $scope.exists = function (item, list) { 20 | return list.indexOf(item) > -1; 21 | }; 22 | }); 23 | -------------------------------------------------------------------------------- /src/components/checkbox/demoSyncing/style.css: -------------------------------------------------------------------------------- 1 | .checkboxDemo1 div { 2 | clear: both; 3 | } 4 | legend { 5 | color: #3F51B5; 6 | } 7 | p { 8 | padding-left: 8px; 9 | } 10 | .info { 11 | padding-left: 13px; 12 | } 13 | div.standard { 14 | padding: 8px 8px 8px 15px; 15 | } 16 | fieldset.standard { 17 | border-style: solid; 18 | border-width: 1px; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/chips/chips.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.chips 4 | */ 5 | /* 6 | * @see js folder for chips implementation 7 | */ 8 | angular.module('material.components.chips', [ 9 | 'material.core', 10 | 'material.components.autocomplete' 11 | ]); 12 | -------------------------------------------------------------------------------- /src/components/chips/demoBasicUsage/readme.html: -------------------------------------------------------------------------------- 1 |

    2 | Note: Version 1.1.2 drastically improves keyboard and screen reader accessibility for the 3 | md-chips component. In order to achieve this, the behavior has changed to also select 4 | and highlight the newly appended chip for 300ms before re-focusing the text input. 5 |

    6 |

    7 | Please see the documentation for more information and for 8 | the new md-chip-append-delay option which allows you to customize this delay. 9 |

    10 | -------------------------------------------------------------------------------- /src/components/chips/demoCustomInputs/style.css: -------------------------------------------------------------------------------- 1 | md-content.autocomplete { 2 | min-height: 200px; 3 | } 4 | input[type=number] { 5 | width: 110px; 6 | } 7 | .veggie-option { 8 | float: left; 9 | width: 20%; 10 | box-sizing: border-box; 11 | padding: 0 8px; 12 | } 13 | .veggie-option .md-item-text { 14 | padding: 8px; 15 | border-radius: 3px; 16 | } 17 | .veggie-option .md-item-text h3, 18 | .veggie-option .md-item-text p { 19 | padding: 0; 20 | margin: 0; 21 | } -------------------------------------------------------------------------------- /src/components/chips/demoCustomSeparatorKeys/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular 4 | .module('chipsCustomSeparatorDemo', ['ngMaterial']) 5 | .controller('CustomSeparatorCtrl', DemoCtrl); 6 | 7 | function DemoCtrl ($mdConstant) { 8 | // Use common key codes found in $mdConstant.KEY_CODE... 9 | this.keys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]; 10 | this.tags = []; 11 | 12 | // Any key code can be used to create a custom separator 13 | var semicolon = 186; 14 | this.customKeys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA, semicolon]; 15 | this.contacts = ['test@example.com']; 16 | } 17 | })(); 18 | -------------------------------------------------------------------------------- /src/components/chips/demoCustomSeparatorKeys/style.scss: -------------------------------------------------------------------------------- 1 | h2 { 2 | margin-bottom: 0; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/chips/demoStaticChips/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    Display a set of items as chips.

    4 | 5 | 6 | Baseball 7 | Hockey 8 | Lacrosse 9 | 10 | {{ctrl.chipText}} 11 | 12 |

    13 | Static chips cannot be selected, removed or edited, and are not part of any model.
    14 | If no ng-model is provided, there are no input elements in md-chips. 15 |

    16 | 17 |     18 |
    19 | -------------------------------------------------------------------------------- /src/components/chips/demoStaticChips/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular 4 | .module('staticChipsDemo', ['ngMaterial']) 5 | .controller('DemoCtrl', DemoCtrl); 6 | 7 | function DemoCtrl ($timeout, $q) { 8 | this.chipText = 'Football'; 9 | } 10 | })(); 11 | -------------------------------------------------------------------------------- /src/components/chips/demoStaticChips/style.css: -------------------------------------------------------------------------------- 1 | p.note { 2 | font-size: 12px; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/chips/demoValidation/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular 4 | .module('chipsValidationDemo', ['ngMaterial', 'ngMessages']) 5 | .controller('ChipsValidationCtrl', ValidationCtrl); 6 | 7 | function ValidationCtrl ($log) { 8 | this.selectedFruit = []; 9 | this.selectedVegetables = []; 10 | this.onSubmit = function(form) { 11 | $log.log({fruits: form.fruits.$modelValue, vegetables: form.vegetables.$modelValue}); 12 | }; 13 | } 14 | })(); 15 | -------------------------------------------------------------------------------- /src/components/chips/demoValidation/style.scss: -------------------------------------------------------------------------------- 1 | .md-chips-messages { 2 | color: rgb(221,44,0); 3 | position: relative; 4 | order: 4; 5 | overflow: hidden; 6 | } 7 | 8 | .md-chips-messages [ng-message] { 9 | font-size: 12px; 10 | line-height: 14px; 11 | overflow: hidden; 12 | margin-top: 0; 13 | padding-top: 5px; 14 | } 15 | 16 | p.note { 17 | font-size: 12px; 18 | } 19 | -------------------------------------------------------------------------------- /src/components/chips/js/chipTranscludeDirective.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('material.components.chips') 3 | .directive('mdChipTransclude', MdChipTransclude); 4 | 5 | function MdChipTransclude ($compile) { 6 | return { 7 | restrict: 'EA', 8 | terminal: true, 9 | link: link, 10 | scope: false 11 | }; 12 | function link (scope, element, attr) { 13 | var ctrl = scope.$parent.$mdChipsCtrl, 14 | newScope = ctrl.parent.$new(false, ctrl.parent); 15 | newScope.$$replacedScope = scope; 16 | newScope.$chip = scope.$chip; 17 | newScope.$index = scope.$index; 18 | newScope.$mdChipsCtrl = ctrl; 19 | 20 | var newHtml = ctrl.$scope.$eval(attr.mdChipTransclude); 21 | 22 | element.html(newHtml); 23 | $compile(element.contents())(newScope); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/colors/demoBasicUsage/regularCard.tmpl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 | 6 |
    7 |     8 | 9 | {{name}} 10 | Ipsum lorem caveat emptor... 11 | 12 |     13 |     14 | -------------------------------------------------------------------------------- /src/components/colors/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('colorsDemo', ['ngMaterial']) 2 | .config(function ($mdThemingProvider, $mdIconProvider) { 3 | $mdThemingProvider.theme('forest') 4 | .primaryPalette('brown') 5 | .accentPalette('green'); 6 | 7 | $mdIconProvider 8 | .iconSet('social', 'img/icons/sets/social-icons.svg', 24); 9 | }) 10 | .directive('regularCard', function () { 11 | return { 12 | restrict: 'E', 13 | templateUrl: 'regularCard.tmpl.html', 14 | scope: { 15 | name: '@', 16 | } 17 | }; 18 | }) 19 | .directive('userCard', function () { 20 | return { 21 | restrict: 'E', 22 | templateUrl: 'userCard.tmpl.html', 23 | scope: { 24 | name: '@', 25 | theme: '@' 26 | }, 27 | controller: function ($scope) { 28 | $scope.theme = $scope.theme || 'default'; 29 | } 30 | }; 31 | }); 32 | -------------------------------------------------------------------------------- /src/components/colors/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | .card-media { 2 | margin-right: 16px; 3 | border-radius: 50%; 4 | overflow: hidden; 5 | } 6 | 7 | .md-subhead.description { 8 | color: rgba(255, 255, 255, 0.7); 9 | } 10 | 11 | .card-media md-icon { 12 | width: 40px; 13 | height: 40px; 14 | color: rgba(255, 255, 255, 0.87); 15 | } 16 | 17 | h4.card-title { 18 | margin: 24px 8px 0; 19 | } 20 | 21 | code.css { 22 | background-color: #fffcc2; 23 | } 24 | 25 | p.footnote code { 26 | font-size: 0.85em; 27 | } 28 | 29 | p.footnote { 30 | font-size: 0.85em; 31 | margin: 30px 8px; 32 | padding: 16px; 33 | background-color: rgba(205, 205, 205, 0.45); 34 | } 35 | -------------------------------------------------------------------------------- /src/components/colors/demoBasicUsage/userCard.tmpl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 | 6 |
    7 |     8 | 9 | {{name}} 10 | This card is colored according the {{theme}} theme 11 | 12 |     13 |     14 | -------------------------------------------------------------------------------- /src/components/colors/demoThemePicker/style.css: -------------------------------------------------------------------------------- 1 | .section { 2 | font-size: 12px; 3 | padding: 16px; 4 | font-weight: bold; 5 | } 6 | 7 | .line { 8 | padding: 16px; 9 | } 10 | 11 | .primary, .accent { 12 | margin: 4px 0; 13 | height: 120px; 14 | } 15 | 16 | [md-colors] { 17 | transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1); 18 | } 19 | 20 | p.footnote { 21 | font-size: 0.85em; 22 | margin: 30px 8px; 23 | padding: 16px; 24 | background-color: rgba(205, 205, 205, 0.45); 25 | } 26 | 27 | .componentTag { 28 | font-weight: bolder; 29 | font-size: 1.2em; 30 | padding-left: 10px; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/colors/demoThemePicker/themePreview.tmpl.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | Primary - {{primary}} 4 |
    5 | 500 6 | {{getColor(primary + '-500')}} 7 |
    8 |
    9 |
    10 | 700 11 | {{getColor(primary + '-700')}} 12 |
    13 |
    14 | 800 15 | {{getColor(primary + '-800')}} 16 |
    17 |
    18 | Accent - {{accent}} 19 |
    20 | A200 21 | {{getColor(accent + '-A200')}} 22 |
    23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/components/content/content-theme.scss: -------------------------------------------------------------------------------- 1 | md-content.md-THEME_NAME-theme { 2 | color: '{{foreground-1}}'; 3 | background-color: '{{background-default}}'; 4 | } 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/content/content.scss: -------------------------------------------------------------------------------- 1 | md-content { 2 | 3 | display: block; 4 | position: relative; 5 | overflow: auto; 6 | -webkit-overflow-scrolling: touch; 7 | 8 | &[md-scroll-y] { 9 | overflow-y: auto; 10 | overflow-x: hidden; 11 | } 12 | &[md-scroll-x] { 13 | overflow-x: auto; 14 | overflow-y: hidden; 15 | } 16 | &[md-scroll-xy] { 17 | } 18 | 19 | @media print { 20 | overflow: visible !important; 21 | } 22 | } 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/content/content.spec.js: -------------------------------------------------------------------------------- 1 | describe('mdContent directive', function() { 2 | 3 | beforeEach(module('material.components.content')); 4 | 5 | it('should have `._md` class indicator', inject(function($compile, $rootScope) { 6 | var element = $compile('')($rootScope.$new()); 7 | expect(element.hasClass('_md')).toBe(true); 8 | })); 9 | 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/content/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('contentDemo1', ['ngMaterial']) 3 | 4 | .controller('AppCtrl', function($scope) { 5 | 6 | }); 7 | -------------------------------------------------------------------------------- /src/components/content/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | div.demo-content { 2 | height: 450px; 3 | } 4 | div[ng-controller] { 5 | height:100%; 6 | padding-bottom: 15px; 7 | } 8 | md-content { 9 | padding: 24px; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/datepicker/datePicker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.datepicker 4 | * @description Module for the datepicker component. 5 | */ 6 | 7 | angular.module('material.components.datepicker', [ 8 | 'material.core', 9 | 'material.components.icon', 10 | 'material.components.virtualRepeat' 11 | ]); 12 | -------------------------------------------------------------------------------- /src/components/datepicker/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('datepickerBasicUsage', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function() { 2 | this.myDate = new Date(); 3 | this.isOpen = false; 4 | }); 5 | -------------------------------------------------------------------------------- /src/components/datepicker/demoCalendar/index.html: -------------------------------------------------------------------------------- 1 | 3 |
    4 | Start Date 5 | 6 |
    7 |
    8 | End Date 9 | 10 |
    11 |
    12 | Dates 13 |
    14 | 15 |
    {{ctrl.startDate | date:shortDate}}
    16 |
    17 |
    18 |
    {{ctrl.endDate | date:shortDate}}
    19 |
    20 |
    21 |     22 | -------------------------------------------------------------------------------- /src/components/datepicker/demoCalendar/script.js: -------------------------------------------------------------------------------- 1 | angular.module('calendarDemo', ['ngMaterial']).controller('AppCtrl', function() { 2 | this.startDate = new Date(); 3 | this.endDate = new Date(); 4 | this.endDate.setDate(this.endDate.getDate() + 5); 5 | }); 6 | -------------------------------------------------------------------------------- /src/components/datepicker/demoCalendar/style.scss: -------------------------------------------------------------------------------- 1 | /** Demo styles for mdCalendar. */ 2 | label { 3 | font-size: x-small; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/datepicker/demoMoment/index.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | Date: {{ctrl.myDate | date:shortDate}} 5 | 6 | -------------------------------------------------------------------------------- /src/components/datepicker/demoMoment/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular.module('datepickerMoment', ['ngMaterial']).config(function($mdDateLocaleProvider) { 5 | /** 6 | * @param date {Date} 7 | * @returns {string} string representation of the provided date 8 | */ 9 | $mdDateLocaleProvider.formatDate = function(date) { 10 | return date ? moment(date).format('L') : ''; 11 | }; 12 | 13 | /** 14 | * @param dateString {string} string that can be converted to a Date 15 | * @returns {Date} JavaScript Date object created from the provided dateString 16 | */ 17 | $mdDateLocaleProvider.parseDate = function(dateString) { 18 | var m = moment(dateString, 'L', true); 19 | return m.isValid() ? m.toDate() : new Date(NaN); 20 | }; 21 | }) 22 | .controller("AppCtrl", function($log) { 23 | this.myDate = new Date(); 24 | 25 | this.onDateChanged = function() { 26 | $log.log('Updated Date: ', this.myDate); 27 | }; 28 | }); 29 | })(); 30 | -------------------------------------------------------------------------------- /src/components/datepicker/demoMomentCustomFormat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | Date: {{ctrl.myDate | date:shortDate}} 5 | 6 | -------------------------------------------------------------------------------- /src/components/datepicker/demoNgModelOptionsTimezone/script.js: -------------------------------------------------------------------------------- 1 | angular.module('ngModelTimezoneUsage', ['ngMaterial', 'ngMessages']) 2 | .controller('AppCtrl', function() { 3 | this.datepickerDate = new Date(0); 4 | this.datepickerDate.setUTCFullYear(2020, 5, 19); 5 | 6 | this.calendarDate = new Date(0); 7 | this.calendarDate.setUTCFullYear(2020, 5, 19); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/datepicker/demoValidations/script.js: -------------------------------------------------------------------------------- 1 | angular.module('datepickerValidations', ['ngMaterial', 'ngMessages']) 2 | .controller('AppCtrl', function() { 3 | this.myDate = new Date(); 4 | 5 | this.minDate = new Date( 6 | this.myDate.getFullYear(), 7 | this.myDate.getMonth() - 2, 8 | this.myDate.getDate() 9 | ); 10 | 11 | this.maxDate = new Date( 12 | this.myDate.getFullYear(), 13 | this.myDate.getMonth() + 2, 14 | this.myDate.getDate() 15 | ); 16 | 17 | /** 18 | * @param {Date} date 19 | * @returns {boolean} 20 | */ 21 | this.onlyWeekendsPredicate = function(date) { 22 | var day = date.getDay(); 23 | return day === 0 || day === 6; 24 | }; 25 | 26 | /** 27 | * @param {Date} date 28 | * @returns {boolean} return false to disable all odd numbered months, true for even months 29 | */ 30 | this.evenMonthsPredicate = function(date) { 31 | return date.getMonth() % 2 !== 0; 32 | }; 33 | }); 34 | -------------------------------------------------------------------------------- /src/components/dialog/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | #popupContainer { 2 | position: relative; 3 | } 4 | .footer { 5 | width: 100%; 6 | text-align: center; 7 | margin-left: 20px; 8 | } 9 | .footer, .footer > code { 10 | font-size: 0.8em; 11 | margin-top: 50px; 12 | } 13 | button { 14 | width: 200px; 15 | } 16 | div#status { 17 | color: #c60008; 18 | } 19 | .dialog-demo-prerendered md-checkbox { 20 | margin-bottom: 0; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/dialog/demoThemeInheritance/index.html: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | We have an interval that changes the color of the button from red to blue themes, 4 | Open the dialog to see the theme being inherited to the dialog and any component inside 5 |

    6 | Open Dialog 7 |
    8 | -------------------------------------------------------------------------------- /src/components/dialog/demoThemeInheritance/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/dialog/dialog-theme.scss: -------------------------------------------------------------------------------- 1 | $dialog-border-radius: 4px !default; 2 | 3 | md-dialog.md-THEME_NAME-theme { 4 | border-radius: $dialog-border-radius; 5 | 6 | background-color: '{{background-hue-1}}'; 7 | color: '{{foreground-1}}'; 8 | 9 | 10 | &.md-content-overflow { 11 | md-dialog-actions { 12 | border-top-color: '{{foreground-4}}'; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/divider/divider-theme.scss: -------------------------------------------------------------------------------- 1 | md-divider.md-THEME_NAME-theme { 2 | border-color: '{{foreground-4}}'; 3 | } -------------------------------------------------------------------------------- /src/components/divider/divider.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.divider 4 | * @description Divider module! 5 | */ 6 | angular.module('material.components.divider', [ 7 | 'material.core' 8 | ]) 9 | .directive('mdDivider', MdDividerDirective); 10 | 11 | /** 12 | * @ngdoc directive 13 | * @name mdDivider 14 | * @module material.components.divider 15 | * @restrict E 16 | * 17 | * @description 18 | * Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content. 19 | * 20 | * @param {boolean=} md-inset Add this attribute to activate the inset divider style. 21 | * @usage 22 | * 23 | * 24 | * 25 | * 26 | * 27 | * 28 | */ 29 | function MdDividerDirective($mdTheming) { 30 | return { 31 | restrict: 'E', 32 | link: $mdTheming 33 | }; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/divider/divider.scss: -------------------------------------------------------------------------------- 1 | md-divider { 2 | display: block; 3 | border-top-width: 1px; 4 | border-top-style: solid; 5 | margin: 0; 6 | 7 | &[md-inset] { 8 | @include rtl-prop(margin-left, margin-right, $baseline-grid * 10, auto); 9 | } 10 | } 11 | 12 | @include when-layout-row(md-divider) { 13 | border-top-width: 0; 14 | border-right-width: 1px; 15 | border-right-style: solid; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/fabSpeedDial/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | angular.module('fabSpeedDialDemoBasicUsage', ['ngMaterial']) 5 | .controller('DemoCtrl', function() { 6 | this.topDirections = ['left', 'up']; 7 | this.bottomDirections = ['down', 'right']; 8 | 9 | this.isOpen = false; 10 | 11 | this.availableModes = ['md-fling', 'md-scale']; 12 | this.selectedMode = 'md-fling'; 13 | 14 | this.availableDirections = ['up', 'down', 'left', 'right']; 15 | this.selectedDirection = 'up'; 16 | }); 17 | })(); 18 | -------------------------------------------------------------------------------- /src/components/fabSpeedDial/demoBasicUsage/style.scss: -------------------------------------------------------------------------------- 1 | .text-capitalize { 2 | text-transform: capitalize; 3 | } 4 | p.note { 5 | font-size: 1.2rem; 6 | } 7 | .lock-size { 8 | min-width: 300px; 9 | min-height: 300px; 10 | width: 300px; 11 | height: 300px; 12 | margin-left: auto; 13 | margin-right: auto; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/fabSpeedDial/fabSpeedDial-theme.scss: -------------------------------------------------------------------------------- 1 | md-fab-speed-dial.md-THEME_NAME-theme { 2 | md-fab-trigger .md-fab.md-button[disabled] { 3 | background-color: '{{foreground-4}}'; 4 | } 5 | md-fab-actions .md-fab-action-item { 6 | .md-button.md-fab.md-raised.md-mini { 7 | &:hover, 8 | &.md-focused { 9 | background-color: '{{background-500}}'; 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/fabToolbar/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | angular.module('fabToolbarBasicUsageDemo', ['ngMaterial']) 5 | .controller('AppCtrl', function($scope) { 6 | $scope.isOpen = false; 7 | 8 | $scope.demo = { 9 | isOpen: false, 10 | count: 0, 11 | selectedDirection: 'left' 12 | }; 13 | }); 14 | })(); -------------------------------------------------------------------------------- /src/components/fabToolbar/demoBasicUsage/style.scss: -------------------------------------------------------------------------------- 1 | md-fab-toolbar { 2 | &.md-right { 3 | md-fab-trigger.align-with-text { 4 | // Make sure the FAB lines up with the text for the demo 5 | left: 7px; 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /src/components/gridList/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('gridListDemo1', ['ngMaterial']) 3 | .controller('AppCtrl', function($scope) {}); 4 | -------------------------------------------------------------------------------- /src/components/gridList/demoBasicUsage/styles.css: -------------------------------------------------------------------------------- 1 | md-grid-list { margin: 8px; } 2 | .gray { background: #f5f5f5; } 3 | .green { background: #b9f6ca; } 4 | .yellow { background: #ffff8d; } 5 | .blue { background: #84ffff; } 6 | .purple { background: #b388ff; } 7 | .red { background: #ff8a80; } 8 | -------------------------------------------------------------------------------- /src/components/gridList/demoDynamicTiles/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 6 | 7 | 13 | 14 |

    {{tile.title}}

     15 |     16 |     17 |
    18 | -------------------------------------------------------------------------------- /src/components/gridList/demoResponsiveUsage/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 7 | 14 | 15 | 16 | 17 |
    18 | -------------------------------------------------------------------------------- /src/components/gridList/grid-list.spec.js: -------------------------------------------------------------------------------- 1 | describe('md-grid-list', function() { 2 | 3 | // Need to mock the $mdMedia service as otherwise tests would fail on minified source through PhantomJS2 4 | var $mdMediaMock = function() {}; 5 | $mdMediaMock.getQuery = function() { 6 | return { 7 | addListener: angular.noop, 8 | removeListener: angular.noop 9 | }; 10 | }; 11 | $mdMediaMock.getResponsiveAttribute = function() { 12 | return []; 13 | }; 14 | $mdMediaMock.watchResponsiveAttributes = function () { 15 | return angular.noop; 16 | }; 17 | 18 | beforeEach(module(function($provide) { 19 | $provide.value('$mdMedia', $mdMediaMock); 20 | })); 21 | 22 | beforeEach(module('material.components.gridList')); 23 | 24 | it('should have `._md` class indicator', inject(function($compile, $rootScope) { 25 | var element = $compile('')($rootScope.$new()); 26 | expect(element.hasClass('_md')).toBe(true); 27 | })); 28 | 29 | }); 30 | -------------------------------------------------------------------------------- /src/components/icon/demoFontIconsWithLigatures/script.js: -------------------------------------------------------------------------------- 1 | 2 | angular 3 | .module('appDemoFontIconsWithLigatures', ['ngMaterial']) 4 | .controller('DemoCtrl', function($scope) { 5 | // Specify a list of font-icons with ligatures and color overrides 6 | var iconData = [ 7 | {name: 'accessibility' , color: "#777" }, 8 | {name: 'question_answer', color: "rgb(89, 226, 168)" }, 9 | {name: 'backup' , color: "#A00" }, 10 | {name: 'email' , color: "#00A" } 11 | ]; 12 | 13 | $scope.fonts = [].concat(iconData); 14 | 15 | // Create a set of sizes... 16 | $scope.sizes = [ 17 | {size:"md-18",padding:0}, 18 | {size:"md-24",padding:2}, 19 | {size:"md-36",padding:6}, 20 | {size:"md-48",padding:10} 21 | ]; 22 | 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/icon/demoLoadSvgIconsFromUrl/img/icons/addShoppingCart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/icon/demoLoadSvgIconsFromUrl/img/icons/android.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/icon/demoLoadSvgIconsFromUrl/img/icons/cake.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/icon/demoLoadSvgIconsFromUrl/style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | md-progress-circular { 6 | margin-bottom:20px; 7 | } 8 | 9 | md-icon { 10 | margin: 20px; 11 | margin-top: 0; 12 | width: 24px; 13 | height: 24px; 14 | } 15 | 16 | 17 | 18 | .demo-content { 19 | min-height: 210px; 20 | } 21 | 22 | 23 | .appDemoSvgIcons { 24 | padding:25px; 25 | } 26 | 27 | .s24 { 28 | width: 24px;height: 24px; 29 | color: #f00; 30 | } 31 | 32 | .s36 { 33 | width: 36px;height: 36px; 34 | color: #0f0; 35 | } 36 | 37 | .s48 { 38 | width: 48px;height: 48px; 39 | color: #00f; 40 | 41 | } 42 | -------------------------------------------------------------------------------- /src/components/icon/demoSvgIconSets/assets/cake.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/icon/demoSvgIconSets/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    Display an icon from a pre-registered set of icons:

    4 | 5 |

    6 | 7 | 8 | 9 | 10 | 11 |

    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/components/icon/demoSvgIconSets/script.js: -------------------------------------------------------------------------------- 1 | angular.module('appSvgIconSets', ['ngMaterial']) 2 | .controller('DemoCtrl', function($scope) {}) 3 | .config(function($mdIconProvider) { 4 | $mdIconProvider 5 | .iconSet('social', 'img/icons/sets/social-icons.svg', 24) 6 | .iconSet('symbol', 'img/icons/sets/symbol-icons.svg', 24) 7 | .defaultIconSet('img/icons/sets/core-icons.svg', 24); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/icon/demoSvgIconSets/style.css: -------------------------------------------------------------------------------- 1 | 2 | md-progress-circular { 3 | margin-bottom:20px; 4 | } 5 | 6 | md-icon { 7 | margin: 20px; 8 | margin-top: 0; 9 | width: 24px; 10 | height: 24px; 11 | } 12 | 13 | .demo-content { 14 | min-height: 210px; 15 | } 16 | 17 | .appSvgIconSets { 18 | padding:25px; 19 | } 20 | 21 | .s48 { 22 | width:48px; 23 | height:48px; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/icon/demoUsingTemplateRequest/assets/android.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/icon/demoUsingTemplateRequest/assets/cake.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/icon/demoUsingTemplateRequest/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | Pre-fetch and cache SVG icons using $templateRequest.
    5 | NOTE: Show the Source views for details... 6 |

    7 | 8 |

    9 | 10 | 11 | 12 | 13 |

    14 | 15 |
    16 | -------------------------------------------------------------------------------- /src/components/icon/demoUsingTemplateRequest/script.js: -------------------------------------------------------------------------------- 1 | angular.module('appUsingTemplateCache', ['ngMaterial']) 2 | .controller('DemoCtrl', function($scope) {}) 3 | .config(function($mdIconProvider) { 4 | // Register icon IDs with sources. Future $mdIcon( ) lookups 5 | // will load by url and retrieve the data via the $templateRequest 6 | $mdIconProvider 7 | .iconSet('core', 'img/icons/sets/core-icons.svg', 24) 8 | .icon('social:cake', 'img/icons/cake.svg', 24); 9 | }) 10 | .run(function($templateRequest) { 11 | var urls = [ 12 | 'img/icons/sets/core-icons.svg', 13 | 'img/icons/cake.svg', 14 | 'img/icons/android.svg' 15 | ]; 16 | 17 | // Pre-fetch icons sources by URL and cache in the $templateCache... 18 | // subsequent $templateRequest calls will look there first. 19 | angular.forEach(urls, function(url) { 20 | $templateRequest(url); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /src/components/icon/demoUsingTemplateRequest/style.css: -------------------------------------------------------------------------------- 1 | 2 | md-progress-circular { 3 | margin-bottom:20px; 4 | } 5 | 6 | md-icon { 7 | margin: 20px; 8 | margin-top: 0; 9 | width: 24px; 10 | height: 24px; 11 | } 12 | 13 | .demo-content { 14 | min-height: 210px; 15 | } 16 | 17 | .appUsingTemplateCache { 18 | padding:25px; 19 | } 20 | 21 | .note { 22 | font-size: 12px; 23 | display: block; 24 | margin-top: -2px; 25 | padding-left: 25px; 26 | color: rgb(127, 126, 126); 27 | } 28 | -------------------------------------------------------------------------------- /src/components/icon/icon-theme.scss: -------------------------------------------------------------------------------- 1 | md-icon.md-THEME_NAME-theme { 2 | color: '{{foreground-2}}'; 3 | 4 | &.md-primary { 5 | color: '{{primary-color}}'; 6 | } 7 | 8 | &.md-accent { 9 | color: '{{accent-color}}'; 10 | } 11 | 12 | &.md-warn { 13 | color: '{{warn-color}}'; 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /src/components/icon/icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.icon 4 | * @description 5 | * Icon 6 | */ 7 | angular.module('material.components.icon', ['material.core']); 8 | -------------------------------------------------------------------------------- /src/components/icon/icon.scss: -------------------------------------------------------------------------------- 1 | md-icon { 2 | margin: auto; 3 | background-repeat: no-repeat no-repeat; 4 | display: inline-block; 5 | vertical-align: middle; 6 | fill: currentColor; 7 | height: $icon-size; 8 | width: $icon-size; 9 | 10 | // The icons should not shrink on smaller viewports. 11 | min-height: $icon-size; 12 | min-width: $icon-size; 13 | 14 | svg { 15 | pointer-events: none; 16 | display: block; 17 | } 18 | 19 | &[md-font-icon] { 20 | line-height: $icon-size; 21 | width: auto; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/input/demoErrors/script.js: -------------------------------------------------------------------------------- 1 | angular.module('inputErrorsApp', ['ngMaterial', 'ngMessages']) 2 | 3 | .controller('AppCtrl', function($scope) { 4 | $scope.project = { 5 | description: 'Nuclear Missile Defense System', 6 | rate: 500, 7 | special: true 8 | }; 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/input/demoErrors/style.css: -------------------------------------------------------------------------------- 1 | .inputErrorsApp { min-height:48px; } 2 | 3 | 4 | md-input-container > p { 5 | font-size: 0.8em; 6 | text-align: left; 7 | width:100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/input/demoErrorsAdvanced/script.js: -------------------------------------------------------------------------------- 1 | angular.module('inputErrorsAdvancedApp', ['ngMaterial', 'ngMessages']) 2 | 3 | .controller('AppCtrl', function($scope) { 4 | $scope.showHints = true; 5 | 6 | $scope.user = { 7 | name: "", 8 | email: "", 9 | social: "123456789", 10 | phone: "N/A" 11 | }; 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/input/demoErrorsAdvanced/style.css: -------------------------------------------------------------------------------- 1 | .hint { 2 | /* Position the hint */ 3 | position: absolute; 4 | left: 2px; 5 | right: auto; 6 | bottom: 7px; 7 | 8 | /* Copy styles from ng-messages */ 9 | font-size: 12px; 10 | line-height: 14px; 11 | transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); 12 | 13 | /* Set our own color */ 14 | color: rgba(0, 0, 0, 0.54); 15 | } 16 | 17 | /* NOTE: Check the demo's HTML to see some additional RTL support CSS */ 18 | 19 | /* Setup animations similar to the ng-messages */ 20 | .hint.ng-hide, 21 | .hint.ng-enter, 22 | .hint.ng-leave.ng-leave-active { 23 | bottom: 26px; 24 | opacity: 0; 25 | } 26 | 27 | .hint.ng-leave, 28 | .hint.ng-enter.ng-enter-active { 29 | bottom: 7px; 30 | opacity: 1; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/input/demoIcons/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('inputIconDemo', ['ngMaterial', 'ngMessages']) 3 | .controller('DemoCtrl', function($scope) { 4 | $scope.user = { 5 | name: 'John Doe', 6 | email: '', 7 | phone: '', 8 | address: 'Mountain View, CA', 9 | donation: 19.99 10 | }; 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/input/demoIcons/style.scss: -------------------------------------------------------------------------------- 1 | .inputIconDemo { min-height: 48px; } 2 | md-input-container:not(.md-input-invalid) > md-icon.email { color: green; } 3 | md-input-container:not(.md-input-invalid) > md-icon.name { color: dodgerblue; } 4 | md-input-container.md-input-invalid > md-icon.email, 5 | md-input-container.md-input-invalid > md-icon.name { color: red; } 6 | /* 7 | .right-icon { 8 | position: absolute; 9 | top: 4px; 10 | right: 2px; 11 | left: auto; 12 | margin-top: 0; 13 | } 14 | */ -------------------------------------------------------------------------------- /src/components/input/demoInlineForm/script.js: -------------------------------------------------------------------------------- 1 | angular.module('inputInlineForm', ['ngMaterial', 'ngMessages']) 2 | .controller('DemoCtrl', function ($scope) { 3 | $scope.user = { 4 | title: 'Developer', 5 | email: 'ipsum@lorem.com', 6 | firstName: '', 7 | lastName: '', 8 | company: 'Google', 9 | address: '1600 Amphitheatre Pkwy', 10 | city: 'Mountain View', 11 | state: null, 12 | stateOfBirth: 'CA', 13 | description: 'Loves TypeScript 💖', 14 | postalCode: '94043', 15 | licenseAccepted: true, 16 | submissionDate: null, 17 | marketingOptIn: true 18 | }; 19 | 20 | $scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' + 21 | 'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' + 22 | 'WY').split(' ').map(function (state) { 23 | return {abbrev: state}; 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/components/input/demoInlineForm/style.scss: -------------------------------------------------------------------------------- 1 | .demo-inline-form-container { 2 | padding: 16px; 3 | 4 | .demo-radio-button-label { 5 | margin: 18px 16px; 6 | padding-top: 6px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/list/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | md-divider { 2 | margin-top: 10px; 3 | margin-bottom: 0; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/list/demoListControls/img/100-0.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/src/components/list/demoListControls/img/100-0.jpeg -------------------------------------------------------------------------------- /src/components/list/demoListControls/img/100-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/src/components/list/demoListControls/img/100-1.jpeg -------------------------------------------------------------------------------- /src/components/list/demoListControls/img/100-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/src/components/list/demoListControls/img/100-2.jpeg -------------------------------------------------------------------------------- /src/components/list/demoListControls/style.css: -------------------------------------------------------------------------------- 1 | md-divider { 2 | margin-top: 0; 3 | margin-bottom: 0; 4 | } 5 | md-list { 6 | padding-top: 0; 7 | } 8 | md-list-item > p, 9 | md-list-item > .md-list-item-inner > p, 10 | md-list-item .md-list-item-inner > p, 11 | md-list-item .md-list-item-inner > .md-list-item-inner > p { 12 | -webkit-user-select: none; /* Chrome all / Safari all */ 13 | -moz-user-select: none; /* Firefox all */ 14 | -ms-user-select: none; /* IE 10+ */ 15 | user-select: none; /* Likely future */ 16 | } 17 | -------------------------------------------------------------------------------- /src/components/list/list-theme.scss: -------------------------------------------------------------------------------- 1 | md-list.md-THEME_NAME-theme { 2 | md-list-item.md-2-line .md-list-item-text, 3 | md-list-item.md-3-line .md-list-item-text { 4 | h3, h4 { 5 | color: '{{foreground-1}}'; 6 | } 7 | p { 8 | color: '{{foreground-2}}'; 9 | } 10 | } 11 | .md-proxy-focus.md-focused div.md-no-style { 12 | background-color: '{{background-100}}'; 13 | } 14 | 15 | md-list-item .md-avatar-icon { 16 | background-color: '{{foreground-3}}'; 17 | color: '{{background-color}}'; 18 | } 19 | 20 | md-list-item > md-icon { 21 | color: '{{foreground-2}}'; 22 | 23 | &.md-highlight { 24 | color: '{{primary-color}}'; 25 | &.md-accent { 26 | color: '{{accent-color}}'; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/menu/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | .md-menu-demo { 2 | padding: 24px; 3 | } 4 | 5 | .menu-demo-container { 6 | min-height: 200px; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/menu/demoCustomTrigger/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    Custom triggers

    4 |

    5 | You can customize the events that open and close a menu by using the $mdMenu.open and 6 | $mdMenu.close methods. This is an example of triggering a menu on hover, instead of click. 7 |

    8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Option {{item}} 17 | 18 | 19 | 20 | 21 |
    22 |
    23 | -------------------------------------------------------------------------------- /src/components/menu/demoCustomTrigger/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('menuDemoCustomTrigger', ['ngMaterial']) 3 | .config(function($mdIconProvider) { 4 | $mdIconProvider 5 | .iconSet('call', 'img/icons/sets/communication-icons.svg', 24); 6 | }); 7 | -------------------------------------------------------------------------------- /src/components/menu/demoCustomTrigger/style.css: -------------------------------------------------------------------------------- 1 | .md-menu-demo { 2 | padding: 24px; 3 | } 4 | 5 | .menu-demo-container { 6 | min-height: 200px; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/menu/demoMenuDensity/script.js: -------------------------------------------------------------------------------- 1 | angular.module('menuDemoDensity', ['ngMaterial']).config(function($mdIconProvider) { 2 | $mdIconProvider 3 | .iconSet("call", 'img/icons/sets/communication-icons.svg', 24) 4 | .iconSet("social", 'img/icons/sets/social-icons.svg', 24); 5 | }).controller('DensityDemoCtrl', function($mdDialog) { 6 | var ctrl = this; 7 | ctrl.menuHref = "https://material.io/archive/guidelines/components/menus.html#menus-specs"; 8 | 9 | this.announceClick = function(index) { 10 | $mdDialog.show( 11 | $mdDialog.alert() 12 | .title('You clicked!') 13 | .textContent('You clicked the menu item at index ' + index) 14 | .ok('Nice') 15 | ); 16 | }; 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/menu/demoMenuDensity/style.css: -------------------------------------------------------------------------------- 1 | .md-menu-demo { 2 | padding: 24px; 3 | } 4 | .menu-demo-container { 5 | min-height: 200px; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/menu/demoMenuPositionModes/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('menuDemoPosition', ['ngMaterial']) 3 | .config(function($mdIconProvider) { 4 | $mdIconProvider 5 | .iconSet("call", 'img/icons/sets/communication-icons.svg', 24) 6 | .iconSet("social", 'img/icons/sets/social-icons.svg', 24); 7 | }) 8 | .controller('PositionDemoCtrl', function DemoCtrl($mdDialog) { 9 | var originatorEv; 10 | 11 | this.openMenu = function($mdMenu, ev) { 12 | originatorEv = ev; 13 | $mdMenu.open(ev); 14 | }; 15 | 16 | this.announceClick = function(index) { 17 | $mdDialog.show( 18 | $mdDialog.alert() 19 | .title('You clicked!') 20 | .textContent('You clicked the menu item at index ' + index) 21 | .ok('Nice') 22 | .targetEvent(originatorEv) 23 | ); 24 | originatorEv = null; 25 | }; 26 | }); 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/menu/demoMenuPositionModes/style.css: -------------------------------------------------------------------------------- 1 | .md-menu-demo { 2 | padding: 24px; 3 | } 4 | 5 | .menu-demo-container { 6 | min-height: 200px; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/menu/demoMenuWidth/script.js: -------------------------------------------------------------------------------- 1 | angular.module('menuDemoWidth', ['ngMaterial']).config(function($mdIconProvider) { 2 | $mdIconProvider 3 | .iconSet("call", 'img/icons/sets/communication-icons.svg', 24) 4 | .iconSet("social", 'img/icons/sets/social-icons.svg', 24); 5 | }).controller('WidthDemoCtrl', function($mdDialog) { 6 | var ctrl = this; 7 | ctrl.menuHref = "https://material.io/archive/guidelines/components/menus.html#menus-specs"; 8 | 9 | this.announceClick = function(index) { 10 | $mdDialog.show( 11 | $mdDialog.alert() 12 | .title('You clicked!') 13 | .textContent('You clicked the menu item at index ' + index) 14 | .ok('Nice') 15 | ); 16 | }; 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/menu/demoMenuWidth/style.css: -------------------------------------------------------------------------------- 1 | .md-menu-demo { 2 | padding: 24px; 3 | } 4 | 5 | .menu-demo-container { 6 | min-height: 200px; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/menu/menu-theme.scss: -------------------------------------------------------------------------------- 1 | md-menu-content.md-THEME_NAME-theme { 2 | background-color: '{{background-hue-1}}'; 3 | 4 | md-menu-item { 5 | color: '{{foreground-1}}'; 6 | 7 | md-icon { 8 | color: '{{foreground-2}}'; 9 | } 10 | 11 | .md-button[disabled] { 12 | color: '{{foreground-3}}'; 13 | 14 | md-icon { 15 | color: '{{foreground-3}}'; 16 | } 17 | } 18 | 19 | } 20 | 21 | md-menu-divider { 22 | background-color: '{{foreground-4}}'; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/menu/menu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.menu 4 | */ 5 | 6 | angular.module('material.components.menu', [ 7 | 'material.core', 8 | 'material.components.backdrop' 9 | ]); 10 | -------------------------------------------------------------------------------- /src/components/menuBar/demoBasicUsage/style.scss: -------------------------------------------------------------------------------- 1 | md-toolbar-filler { 2 | display: flex; 3 | } 4 | .page-container { 5 | padding: 32px; 6 | 7 | .page { 8 | margin: 0 auto; 9 | padding: 24px; 10 | max-width: 680px; 11 | box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); 12 | 13 | h1 { 14 | text-align: center; 15 | font-size: 1.8rem; 16 | margin-top: 0; 17 | font-weight: normal; 18 | } 19 | p { 20 | line-height: 1.6rem; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/menuBar/demoDynamicNestedMenus/style.scss: -------------------------------------------------------------------------------- 1 | md-toolbar-filler { 2 | display: flex; 3 | } 4 | .page-container { 5 | padding: 32px; 6 | 7 | .page { 8 | margin: 0 auto; 9 | padding: 24px; 10 | max-width: 680px; 11 | box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); 12 | 13 | h1 { 14 | text-align: center; 15 | font-size: 1.8rem; 16 | margin-top: 0; 17 | font-weight: normal; 18 | } 19 | p { 20 | line-height: 1.6rem; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/menuBar/js/menuDividerDirective.js: -------------------------------------------------------------------------------- 1 | 2 | angular 3 | .module('material.components.menuBar') 4 | .directive('mdMenuDivider', MenuDividerDirective); 5 | 6 | 7 | function MenuDividerDirective() { 8 | return { 9 | restrict: 'E', 10 | compile: function(templateEl, templateAttrs) { 11 | if (!templateAttrs.role) { 12 | templateEl[0].setAttribute('role', 'separator'); 13 | } 14 | } 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/menuBar/menu-bar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.menuBar 4 | */ 5 | 6 | angular.module('material.components.menuBar', [ 7 | 'material.core', 8 | 'material.components.icon', 9 | 'material.components.menu' 10 | ]); 11 | -------------------------------------------------------------------------------- /src/components/navBar/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | angular.module('navBarDemoBasicUsage', ['ngMaterial']) 5 | .controller('AppCtrl', AppCtrl); 6 | 7 | function AppCtrl($scope) { 8 | $scope.currentNavItem = 'page1'; 9 | 10 | $scope.goto = function(page) { 11 | $scope.status = "Goto " + page; 12 | }; 13 | } 14 | })(); 15 | -------------------------------------------------------------------------------- /src/components/navBar/demoBasicUsage/style.scss: -------------------------------------------------------------------------------- 1 | md-content { 2 | 3 | .ext-content { 4 | padding:50px; 5 | margin:20px; 6 | background-color: #FFF2E0; 7 | } 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/components/panel/demoBasicUsage/index.html: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | A panel can be used to create dialogs, menus, and other overlays. 4 |

    5 |

    Options

    6 |
    7 | Disable Parent Scroll 8 |
    9 | 10 |
    11 | 13 | Dialog 14 | 15 | 17 | Select Menu 18 | 19 | 20 |

    Your favorite dessert is: {{ ctrl.selected.favoriteDessert }}

    21 |
    22 |
    23 | -------------------------------------------------------------------------------- /src/components/panel/demoBasicUsage/panel.tmpl.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |

    Surprise!

    5 |
    6 |     7 | 8 |
    9 |

    10 | You hit the secret button. Here's a donut: 11 |

    12 | 13 |
    14 | Delicious donut 15 |
    16 |
    17 | 18 |
    19 | 20 | Close 21 | 22 |
    23 |
    24 | -------------------------------------------------------------------------------- /src/components/panel/demoPanelAnimations/panel.tmpl.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |

    Surprise!

    5 |
    6 |     7 | 8 |
    9 |

    10 | You hit the secret button. Here's a donut: 11 |

    12 | 13 |
    14 | Delicious donut 15 |
    16 |
    17 | 18 |
    19 | 20 | Close 21 | 22 |
    23 |
    24 | -------------------------------------------------------------------------------- /src/components/panel/demoPanelAnimations/style.global.css: -------------------------------------------------------------------------------- 1 | .demo-md-panel { 2 | min-height: 500px; 3 | } 4 | 5 | .demo-dialog-example { 6 | background: white; 7 | border-radius: 4px; 8 | box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 9 | 0 13px 19px 2px rgba(0, 0, 0, 0.14), 10 | 0 5px 24px 4px rgba(0, 0, 0, 0.12); 11 | width: 500px; 12 | } 13 | 14 | .demo-dialog-content { 15 | padding: 0 15px; 16 | width: 100%; 17 | } 18 | 19 | .demo-dialog-content img { 20 | height: 300px; 21 | margin: auto; 22 | } 23 | 24 | .demo-dialog-button { 25 | width: 100%; 26 | } 27 | 28 | .demo-dialog-custom-animation-open { 29 | opacity: 1; 30 | transition: all 1s linear, opacity 1ms; 31 | transform: rotate(390deg); 32 | } 33 | 34 | .demo-dialog-custom-animation-close { 35 | opacity: 0; 36 | transition: all 1s linear, opacity 1ms; 37 | transform: rotate(0deg); 38 | } 39 | -------------------------------------------------------------------------------- /src/components/panel/demoReuse/panel.tmpl.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |

    Surprise!

    5 |
    6 |     7 | 8 |
    9 |

    {{ctrl.text}}

    10 | 11 |
    12 | Delicious donut 13 |
    14 |
    15 | 16 |
    17 | 18 | Close 19 | 20 |
    21 |
    22 | -------------------------------------------------------------------------------- /src/components/panel/demoReuse/style.global.css: -------------------------------------------------------------------------------- 1 | .demo-dialog-content { 2 | padding: 0 15px; 3 | width: 100%; 4 | } 5 | 6 | .demo-dialog-content img { 7 | height: 300px; 8 | margin: auto; 9 | } 10 | 11 | .demo-dialog-button { 12 | width: 100%; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/panel/panel-theme.scss: -------------------------------------------------------------------------------- 1 | ._md-panel-backdrop.md-THEME_NAME-theme { 2 | background-color: '{{background-900-1.0}}'; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/progressCircular/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('progressCircularDemo1', ['ngMaterial'], function($mdThemingProvider) { 3 | $mdThemingProvider.theme('docs-dark', 'default') 4 | .primaryPalette('yellow') 5 | .dark(); 6 | }) 7 | .controller('AppCtrl', ['$interval', 8 | function($interval) { 9 | var self = this; 10 | 11 | self.activated = true; 12 | self.determinateValue = 30; 13 | 14 | // Iterate every 100ms, non-stop and increment 15 | // the Determinate loader. 16 | $interval(function() { 17 | 18 | self.determinateValue += 1; 19 | if (self.determinateValue > 100) { 20 | self.determinateValue = 30; 21 | } 22 | 23 | }, 100); 24 | } 25 | ]); 26 | -------------------------------------------------------------------------------- /src/components/progressCircular/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | } 4 | 5 | h4 { 6 | margin: 10px 0; 7 | } 8 | 9 | md-progress-circular { 10 | margin-bottom:20px; 11 | } 12 | 13 | 14 | #loaders > md-switch { 15 | margin:0; 16 | margin-left: 10px; 17 | margin-top: -10px; 18 | } 19 | 20 | #loaders > h5 { 21 | margin-top: 0; 22 | } 23 | 24 | #loaders > p { 25 | margin-right: 20px; 26 | margin-bottom: 24px; 27 | } 28 | 29 | 30 | p.small { 31 | font-size: 0.8em; 32 | margin-top: -18px; 33 | } 34 | 35 | 36 | hr { 37 | width: 100%; 38 | margin-top: 20px; 39 | border-color: rgba(221, 221, 177, 0.1); 40 | } 41 | 42 | p.small > code { 43 | font-size: 0.8em; 44 | } 45 | 46 | 47 | .visible { 48 | border-color: rgba(221, 221, 177, 0); 49 | } 50 | -------------------------------------------------------------------------------- /src/components/progressCircular/progress-circular-theme.scss: -------------------------------------------------------------------------------- 1 | md-progress-circular.md-THEME_NAME-theme { 2 | 3 | path { 4 | stroke: '{{primary-color}}'; 5 | } 6 | 7 | &.md-warn { 8 | path { 9 | stroke: '{{warn-color}}'; 10 | } 11 | } 12 | 13 | &.md-accent { 14 | path { 15 | stroke: '{{accent-color}}'; 16 | } 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/components/progressCircular/progress-circular.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.progressCircular 4 | * @description Module for a circular progressbar 5 | */ 6 | 7 | angular.module('material.components.progressCircular', ['material.core']); 8 | -------------------------------------------------------------------------------- /src/components/progressCircular/progress-circular.scss: -------------------------------------------------------------------------------- 1 | $progress-circular-indeterminate-duration: 1568.63ms !default; 2 | 3 | @keyframes indeterminate-rotate { 4 | 0% { transform: rotate(0deg); } 5 | 100% { transform: rotate(360deg); } 6 | } 7 | 8 | // Used to avoid unnecessary layout 9 | md-progress-circular { 10 | position: relative; 11 | display: block; 12 | 13 | @include rtl(transform, scale(1, 1), scale(-1, 1)); 14 | 15 | &._md-progress-circular-disabled { 16 | visibility: hidden; 17 | } 18 | 19 | &.md-mode-indeterminate svg { 20 | animation: indeterminate-rotate $progress-circular-indeterminate-duration linear infinite; 21 | } 22 | 23 | svg { 24 | position: absolute; 25 | overflow: visible; 26 | top: 0; 27 | left: 0; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/radioButton/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | } 4 | hr { 5 | margin-left: -20px; 6 | opacity: 0.3; 7 | } 8 | md-radio-group { 9 | width: 150px; 10 | } 11 | p:last-child { 12 | padding-bottom: 50px; 13 | } 14 | form { 15 | padding: 0 20px; 16 | } 17 | .radioValue { 18 | margin-left: 5px; 19 | color: #0f9d58; 20 | font-weight: bold; 21 | } 22 | md-icon { 23 | margin: 0 20px 20px; 24 | width: 128px; 25 | height: 128px; 26 | } 27 | .ipsum { 28 | color: saddlebrown; 29 | font-size: 0.9em; 30 | } 31 | .demo-description { 32 | margin-bottom: 0; 33 | } 34 | -------------------------------------------------------------------------------- /src/components/radioButton/demoMultiColumn/index.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Contact List

    3 | 4 | 5 | 6 |
    7 |
    8 | 9 |
    10 | {{person.title}} 11 |
    12 | 13 | {{person.fullName}} 14 | 15 |
    16 |
    17 |     18 | 19 | 20 |

    21 | {{ctrl.selectedUser()}} 22 |

    23 |
    24 | -------------------------------------------------------------------------------- /src/components/radioButton/demoMultiColumn/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('radioMultiColumnDemo', ['ngMaterial']) 3 | .controller('ContactController', function($scope, $filter) { 4 | var self = this; 5 | 6 | self.contacts = [{ 7 | 'id': 1, 8 | 'fullName': 'María Guadalupe', 9 | 'lastName': 'Guadalupe', 10 | 'title': "CEO, Found" 11 | }, { 12 | 'id': 2, 13 | 'fullName': 'Gabriel García Márquez', 14 | 'lastName': 'Márquez', 15 | 'title': "VP Sales & Marketing" 16 | }, { 17 | 'id': 3, 18 | 'fullName': 'Miguel de Cervantes', 19 | 'lastName': 'Cervantes', 20 | 'title': "Manager, Operations" 21 | }, { 22 | 'id': 4, 23 | 'fullName': 'Pacorro de Castel', 24 | 'lastName': 'Castel', 25 | 'title': "Security" 26 | }]; 27 | self.selectedId = 2; 28 | self.selectedUser = function() { 29 | return $filter('filter')(self.contacts, { id: self.selectedId })[0].lastName; 30 | }; 31 | }); 32 | -------------------------------------------------------------------------------- /src/components/radioButton/demoMultiColumn/style.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | margin: 16px; 3 | } 4 | .demo-checked { 5 | background-color: #ECFAFB; 6 | border-radius: 2px; 7 | } 8 | .demo-row { 9 | border-bottom: 1px dashed #ddd; 10 | } 11 | .demo-row:last-child { 12 | border-bottom: 0px dashed #ddd; 13 | } 14 | label { 15 | font-weight: bolder; 16 | } 17 | .demo-title { 18 | flex: 0 1 200px; 19 | } 20 | html[dir="rtl"] .demo-bidi { 21 | padding-right: 20px; 22 | padding-left: 0; 23 | } 24 | -------------------------------------------------------------------------------- /src/components/select/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular 4 | .module('selectDemoBasic', ['ngMaterial']) 5 | .controller('AppCtrl', function() { 6 | var ctrl = this; 7 | ctrl.userState = ''; 8 | ctrl.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' + 9 | 'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' + 10 | 'WY').split(' ').map(function (state) { return { abbrev: state }; }); 11 | }); 12 | })(); 13 | -------------------------------------------------------------------------------- /src/components/select/demoBasicUsage/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular/material/952c06705a7eddaa02fcbb2fd931e06740702404/src/components/select/demoBasicUsage/style.css -------------------------------------------------------------------------------- /src/components/select/demoOptionsWithAsyncSearch/index.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:

    3 |
    4 | 5 | {{user.name}} 6 | 7 |

    You have assigned the task to: {{ user ? user.name : 'No one yet' }}

    8 |
    9 |
    10 | -------------------------------------------------------------------------------- /src/components/select/demoOptionsWithAsyncSearch/script.js: -------------------------------------------------------------------------------- 1 | angular.module('selectDemoOptionsAsync', ['ngMaterial']) 2 | .controller('SelectAsyncController', function($timeout, $scope) { 3 | $scope.user = null; 4 | $scope.users = null; 5 | 6 | $scope.loadUsers = function() { 7 | 8 | // Use timeout to simulate a 650ms request. 9 | return $timeout(function() { 10 | 11 | $scope.users = $scope.users || [ 12 | { id: 1, name: 'Scooby Doo' }, 13 | { id: 2, name: 'Shaggy Rodgers' }, 14 | { id: 3, name: 'Fred Jones' }, 15 | { id: 4, name: 'Daphne Blake' }, 16 | { id: 5, name: 'Velma Dinkley' } 17 | ]; 18 | 19 | }, 650); 20 | }; 21 | }); 22 | -------------------------------------------------------------------------------- /src/components/select/demoSelectHeader/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular.module('selectDemoSelectHeader', ['ngMaterial']) 4 | .controller('SelectHeaderController', function ($scope, $element) { 5 | $scope.vegetables = ['Corn', 'Onions', 'Kale', 'Arugula', 'Peas', 'Zucchini']; 6 | $scope.searchTerm = ''; 7 | $scope.clearSearchTerm = function () { 8 | $scope.searchTerm = ''; 9 | }; 10 | // The md-select directive eats keydown events for some quick select 11 | // logic. Since we have a search input here, we don't need that logic. 12 | $element.find('input').on('keydown', function (ev) { 13 | ev.stopPropagation(); 14 | }); 15 | }); 16 | })(); 17 | -------------------------------------------------------------------------------- /src/components/select/demoSelectHeader/style.css: -------------------------------------------------------------------------------- 1 | /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */ 2 | .demo-header-searchbox { 3 | border: none; 4 | outline: none; 5 | height: 100%; 6 | width: 100%; 7 | padding: 0; 8 | } 9 | .demo-select-header { 10 | box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 11 | 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12); 12 | padding-left: 16px; 13 | height: 48px; 14 | cursor: pointer; 15 | position: relative; 16 | display: flex; 17 | width: auto; 18 | } 19 | md-content._md { 20 | max-height: 240px; 21 | } 22 | md-input-container { 23 | min-width: 112px; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/select/demoSelectedText/index.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Pick an item below

    3 |
    4 | 5 | 6 | 7 | 8 | Item {{item}} 9 | 10 | 11 | 12 |
    13 |
    14 | -------------------------------------------------------------------------------- /src/components/select/demoSelectedText/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('selectDemoSelectedText', ['ngMaterial']) 3 | .controller('SelectedTextController', function ($scope) { 4 | $scope.items = [1, 2, 3, 4, 5, 6, 7]; 5 | $scope.selectedItem = undefined; 6 | 7 | $scope.getSelectedText = function () { 8 | if ($scope.selectedItem !== undefined) { 9 | return "You have selected: Item " + $scope.selectedItem; 10 | } else { 11 | return "Please select an item"; 12 | } 13 | }; 14 | }); 15 | -------------------------------------------------------------------------------- /src/components/select/demoTrackBy/script.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | angular 4 | .module('selectDemoTrackBy', ['ngMaterial', 'ngMessages']) 5 | .controller('AppCtrl', function() { 6 | this.selectedItem = { 7 | id: '5a61e00', 8 | name: 'Bob', 9 | randomAddedProperty: 123 10 | }; 11 | 12 | this.items = [ 13 | { 14 | id: '5a61e00', 15 | name: 'Bob', 16 | }, 17 | { 18 | id: '5a61e01', 19 | name: 'Max', 20 | }, 21 | { 22 | id: '5a61e02', 23 | name: 'Alice', 24 | }, 25 | ]; 26 | }); 27 | })(); 28 | -------------------------------------------------------------------------------- /src/components/select/demoTrackBy/style.css: -------------------------------------------------------------------------------- 1 | code { 2 | display: block; 3 | padding: 8px; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/select/demoValidations/script.js: -------------------------------------------------------------------------------- 1 | angular.module('selectDemoValidation', ['ngMaterial', 'ngMessages']) 2 | .controller('AppCtrl', function($scope) { 3 | $scope.clearValue = function() { 4 | $scope.quest = undefined; 5 | $scope.favoriteColor = undefined; 6 | $scope.myForm.$setPristine(); 7 | }; 8 | $scope.save = function() { 9 | if ($scope.myForm.$valid) { 10 | $scope.myForm.$setSubmitted(); 11 | alert('Form was valid.'); 12 | } else { 13 | alert('Form was invalid!'); 14 | } 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/sidenav/demoCustomSidenav/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('customSidenavDemo', ['ngMaterial']) 3 | .controller('AppCtrl', function ($scope, $mdSidenav) { 4 | $scope.toggleLeft = buildToggler('left'); 5 | 6 | function buildToggler(componentId) { 7 | return function() { 8 | $mdSidenav(componentId).toggle(); 9 | }; 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/sidenav/demoDisableCloseEvents/script.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('disableCloseEventsSidenavDemo', ['ngMaterial']) 3 | .controller('AppCtrl', function ($scope, $mdSidenav) { 4 | $scope.toggleSidenav = buildToggler('closeEventsDisabled'); 5 | 6 | function buildToggler(componentId) { 7 | return function() { 8 | $mdSidenav(componentId).toggle(); 9 | }; 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/sidenav/sidenav-theme.scss: -------------------------------------------------------------------------------- 1 | md-sidenav.md-THEME_NAME-theme { 2 | &, md-content { 3 | background-color: '{{background-hue-1}}'; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/components/slider/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('sliderDemoBasic', ['ngMaterial']) 2 | .config(function ($mdIconProvider) { 3 | $mdIconProvider.iconSet('device', 'img/icons/sets/device-icons.svg', 24); 4 | }) 5 | .controller('AppCtrl', function ($scope) { 6 | $scope.color = { 7 | red: Math.floor(Math.random() * 255), 8 | green: Math.floor(Math.random() * 255), 9 | blue: Math.floor(Math.random() * 255) 10 | }; 11 | 12 | $scope.rating1 = 3; 13 | $scope.rating2 = 2; 14 | $scope.rating3 = 4; 15 | 16 | $scope.disabled1 = Math.floor(Math.random() * 100); 17 | $scope.disabled2 = 0; 18 | $scope.disabled3 = 70; 19 | 20 | $scope.invert = Math.floor(Math.random() * 100); 21 | 22 | $scope.isDisabled = true; 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/slider/demoVertical/script.js: -------------------------------------------------------------------------------- 1 | angular.module('sliderDemoVertical', ['ngMaterial']) 2 | .controller('AppCtrl', function($scope) { 3 | $scope.vol = Math.floor(Math.random() * 100); 4 | $scope.bass = 40; 5 | $scope.treble = 80; 6 | }); 7 | -------------------------------------------------------------------------------- /src/components/sticky/sticky.scss: -------------------------------------------------------------------------------- 1 | .md-sticky-clone { 2 | z-index: 2; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | position: absolute !important; 7 | 8 | transform: translate3d(-9999px,-9999px,0); 9 | 10 | &[sticky-state="active"] { 11 | transform: translate3d(0, 0, 0); 12 | &:not(.md-sticky-no-effect) .md-subheader-inner { 13 | animation: subheaderStickyHoverIn 0.3s ease-out both; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/subheader/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | 2 | .face { 3 | border-radius: 30px; 4 | border: 1px solid #ddd; 5 | width: 48px; 6 | margin: 16px; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/components/subheader/subheader-theme.scss: -------------------------------------------------------------------------------- 1 | .md-subheader.md-THEME_NAME-theme { 2 | color: '{{ foreground-2-0.54 }}'; 3 | background-color: '{{background-default}}'; 4 | 5 | &.md-primary { 6 | color: '{{primary-color}}' 7 | } 8 | &.md-accent { 9 | color: '{{accent-color}}' 10 | } 11 | &.md-warn { 12 | color: '{{warn-color}}' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/swipe/demoBasicUsage/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | Swipe me to the left 5 | 6 |
    7 | 8 |
    9 | Swipe me to the right 10 |
    11 |
    12 | 13 |
    14 |
    16 | Swipe me up 17 |
    18 | 19 |
    21 | Swipe me down 22 |
    23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/components/swipe/demoBasicUsage/readme.html: -------------------------------------------------------------------------------- 1 |

    This UX pattern is intended for mobile devices only, and 2 | may not make sense to use on responsive sites. To initiate a swipe 3 | gesture on a desktop, you must click, hold and drag either right, 4 | left, up or down

    5 | -------------------------------------------------------------------------------- /src/components/swipe/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | .demo-swipe { 2 | padding: 20px 10px; 3 | } 4 | 5 | .no-select { 6 | -webkit-touch-callout: none; 7 | -webkit-user-select: none; 8 | -khtml-user-select: none; 9 | -moz-user-select: none; 10 | -ms-user-select: none; 11 | user-select: none; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/swipe/swipe.scss: -------------------------------------------------------------------------------- 1 | [md-swipe-left], [md-swipe-right] { 2 | touch-action : pan-y; 3 | } 4 | 5 | [md-swipe-up], [md-swipe-down] { 6 | touch-action : pan-x; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/switch/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('switchDemo1', ['ngMaterial']) 2 | .controller('SwitchDemoCtrl', function($scope) { 3 | $scope.data = { 4 | cb1: true, 5 | cb4: true, 6 | cb5: false 7 | }; 8 | 9 | $scope.message = 'false'; 10 | 11 | $scope.onChange = function(cbState) { 12 | $scope.message = cbState; 13 | }; 14 | }); 15 | -------------------------------------------------------------------------------- /src/components/switch/demoBasicUsage/style.css: -------------------------------------------------------------------------------- 1 | .inset { 2 | padding-left: 25px; 3 | padding-top:25px; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/tabs/demoCenterTabs/readme.html: -------------------------------------------------------------------------------- 1 |

    This demo shows how you can horizontally center tabs and use the primary color as your tab background.

    2 | -------------------------------------------------------------------------------- /src/components/tabs/demoCenterTabs/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular.module('tabsDemoCenterTabs', ['ngMaterial']); 4 | })(); 5 | -------------------------------------------------------------------------------- /src/components/tabs/demoCenterTabs/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Style tab width to align with the MD spec: 3 | * https://material.io/archive/guidelines/components/tabs.html#tabs-specs 4 | */ 5 | md-tab-item { 6 | min-width: 72px; 7 | } 8 | @media (min-width: 960px) { 9 | md-tab-item { 10 | min-width: 160px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/tabs/demoDynamicHeight/readme.html: -------------------------------------------------------------------------------- 1 |

    2 | The Dynamic Height demo shows how tabs can be used to display content with varying heights. 3 |

    4 |
    5 |

    6 | Note: If you are using the Tabs component for page-level navigation, please take a look 7 | at the NavBar component instead. It has better support for navigation 8 | and can performantly handle tabs with larger, more rich content. 9 |

    10 |
    11 | -------------------------------------------------------------------------------- /src/components/tabs/demoDynamicHeight/script.js: -------------------------------------------------------------------------------- 1 | angular.module('tabsDemoDynamicHeight', ['ngMaterial']); -------------------------------------------------------------------------------- /src/components/tabs/demoDynamicHeight/style.scss: -------------------------------------------------------------------------------- 1 | md-content { 2 | h1:first-child { 3 | margin-top: 0; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/components/tabs/demoDynamicTabs/readme.html: -------------------------------------------------------------------------------- 1 |

    The Dynamic Tabs demo shows how internal tab views can be used.

    2 | -------------------------------------------------------------------------------- /src/components/tabs/demoDynamicTabs/style.scss: -------------------------------------------------------------------------------- 1 | md-content { 2 | h1:first-child { 3 | margin-top: 0; 4 | } 5 | md-tabs { 6 | .demo-tab { 7 | padding: 25px; 8 | text-align: center; 9 | 10 | &> div > div { 11 | padding: 25px; 12 | box-sizing: border-box; 13 | } 14 | } 15 | md-tab { 16 | &[disabled] { 17 | opacity: 0.5; 18 | } 19 | } 20 | } 21 | form { 22 | padding-top: 0; 23 | 24 | div[flex] { 25 | position: relative; 26 | 27 | h2.md-subhead { 28 | position: absolute; 29 | bottom: 0; 30 | left: 0; 31 | margin: 0; 32 | font-weight: 500; 33 | text-transform: uppercase; 34 | line-height: 35px; 35 | white-space: nowrap; 36 | } 37 | } 38 | md-button.add-tab { 39 | margin-right: 0; 40 | transform: translateY(5px); 41 | } 42 | md-input-container { 43 | padding-bottom: 0; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/tabs/demoStaticTabs/readme.html: -------------------------------------------------------------------------------- 1 |

    2 | The Static Tabs demo shows how to disable and bottom-align tabs. Additionally, it demonstrates 3 | the md-no-ink-bar-color class. 4 |

    5 | -------------------------------------------------------------------------------- /src/components/tabs/demoStaticTabs/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular 5 | .module('tabsDemoIconTabs', ['ngMaterial']) 6 | .config(function($mdIconProvider) { 7 | $mdIconProvider 8 | .iconSet('communication', 'img/icons/sets/communication-icons.svg') 9 | .icon('favorite', 'img/icons/favorite.svg'); 10 | }) 11 | .controller('AppCtrl', AppCtrl); 12 | 13 | function AppCtrl ($scope) { 14 | $scope.data = { 15 | selectedIndex: 0, 16 | secondLocked: true, 17 | secondLabel: "Item Two", 18 | bottom: false 19 | }; 20 | $scope.next = function() { 21 | $scope.data.selectedIndex = Math.min($scope.data.selectedIndex + 1, 2) ; 22 | }; 23 | $scope.previous = function() { 24 | $scope.data.selectedIndex = Math.max($scope.data.selectedIndex - 1, 0); 25 | }; 26 | } 27 | })(); 28 | -------------------------------------------------------------------------------- /src/components/tabs/demoStaticTabs/style.scss: -------------------------------------------------------------------------------- 1 | md-content { 2 | md-tabs { 3 | md-tab-content { 4 | padding: 25px; 5 | &:nth-child(1) { 6 | background-color: #cfd8dc; 7 | } 8 | &:nth-child(2) { 9 | background-color: #ffb74d; 10 | } 11 | &:nth-child(3) { 12 | background-color: #ffd54f; 13 | } 14 | &:nth-child(4) { 15 | background-color: #aed581; 16 | } 17 | &:nth-child(5) { 18 | background-color: #00897b; 19 | } 20 | } 21 | } 22 | } 23 | .after-tabs-area { 24 | > span { 25 | margin-top: 25px; 26 | padding-right: 15px; 27 | vertical-align: middle; 28 | line-height: 30px; 29 | height: 35px; 30 | } 31 | > md-checkbox { 32 | margin-top: 26px; 33 | margin-left: 0; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/tabs/js/tabItemDirective.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('material.components.tabs') 3 | .directive('mdTabItem', MdTabItem); 4 | 5 | function MdTabItem () { 6 | return { 7 | require: '^?mdTabs', 8 | link: function link (scope, element, attr, ctrl) { 9 | if (!ctrl) return; 10 | ctrl.attachRipple(scope, element); 11 | } 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/tabs/js/tabLabelDirective.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('material.components.tabs') 3 | .directive('mdTabLabel', MdTabLabel); 4 | 5 | function MdTabLabel () { 6 | return { terminal: true }; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/components/tabs/js/tabScroll.js: -------------------------------------------------------------------------------- 1 | angular.module('material.components.tabs') 2 | .directive('mdTabScroll', MdTabScroll); 3 | 4 | function MdTabScroll ($parse) { 5 | return { 6 | restrict: 'A', 7 | compile: function ($element, attr) { 8 | var fn = $parse(attr.mdTabScroll, null, true); 9 | return function ngEventHandler (scope, element) { 10 | element.on('wheel', function (event) { 11 | scope.$apply(function () { fn(scope, { $event: event }); }); 12 | }); 13 | }; 14 | } 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/tabs/tabs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc module 3 | * @name material.components.tabs 4 | * @description 5 | * 6 | * Tabs, created with the `` directive provide *tabbed* navigation with different styles. 7 | * The Tabs component consists of clickable tabs that are aligned horizontally side-by-side. 8 | * 9 | * Features include support for: 10 | * 11 | * - static or dynamic tabs, 12 | * - responsive designs, 13 | * - accessibility support (ARIA), 14 | * - tab pagination, 15 | * - external or internal tab content, 16 | * - focus indicators and arrow-key navigations, 17 | * - programmatic lookup and access to tab controllers, and 18 | * - dynamic transitions through different tab contents. 19 | * 20 | */ 21 | /* 22 | * @see js folder for tabs implementation 23 | */ 24 | angular.module('material.components.tabs', [ 25 | 'material.core', 26 | 'material.components.icon' 27 | ]); 28 | -------------------------------------------------------------------------------- /src/components/toast/demoBasicUsage/style.scss: -------------------------------------------------------------------------------- 1 | .spacer { 2 | width: 50px; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/toast/demoCustomUsage/index.html: -------------------------------------------------------------------------------- 1 |
    2 | Toast can have multiple actions: 3 | 4 | Show Custom Toast 5 | 6 |
    7 | -------------------------------------------------------------------------------- /src/components/toast/demoCustomUsage/style.scss: -------------------------------------------------------------------------------- 1 | #custom-toast-container { 2 | height: 300px; 3 | padding: 25px; 4 | 5 | .md-button.md-raised { 6 | padding-left: 10px; 7 | padding-right: 10px; 8 | } 9 | } 10 | .md-toast-text { 11 | flex: 1 0 88px; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/toast/demoCustomUsage/toast-template.html: -------------------------------------------------------------------------------- 1 | 2 | {{ctrl.toastMessage}} 3 | 4 | Press Escape to dismiss. Press Control-"{{ctrl.dialogKey}}" for 5 | 6 | 7 | More info 8 | 9 | 10 | Press Control-"{{ctrl.undoKey}}" to 11 | 12 | 13 | Undo 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/toast/toast-theme.scss: -------------------------------------------------------------------------------- 1 | md-toast.md-THEME_NAME-theme { 2 | 3 | .md-toast-content { 4 | background-color: #323232; 5 | color: '{{background-50}}'; 6 | 7 | .md-button { 8 | color: '{{background-50}}'; 9 | 10 | &.md-highlight { 11 | // By default the toast should use the accent color as the primary highlight color 12 | color: '{{accent-color}}'; 13 | 14 | &.md-primary { 15 | color: '{{primary-color}}'; 16 | } 17 | 18 | &.md-warn { 19 | color: '{{warn-color}}'; 20 | } 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/toolbar/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('toolbarDemoBasic', ['ngMaterial']) 2 | 3 | .controller('BasicDemoCtrl', function($scope) { 4 | 5 | }); 6 | -------------------------------------------------------------------------------- /src/components/toolbar/demoBasicUsage/style.scss: -------------------------------------------------------------------------------- 1 | md-toolbar { 2 | .md-button.md-icon-button { 3 | .favorite-icon { 4 | fill: #DE3641; // docs-red A100 5 | } 6 | } 7 | md-toolbar-filler { 8 | display: flex; 9 | background-color: #e0e0e0; // grey 200 10 | 11 | #filler-icon { 12 | fill: #4C9EF1; // docs-blue 300 - hue-1 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/toolbar/demoInputsInToolbar/script.js: -------------------------------------------------------------------------------- 1 | angular.module('inputsInToolbarDemo', ['ngMaterial']) 2 | .controller('DemoCtrl', function($scope) {}); 3 | -------------------------------------------------------------------------------- /src/components/toolbar/demoInputsInToolbar/style.scss: -------------------------------------------------------------------------------- 1 | md-toolbar { 2 | header { 3 | margin-top: 16px; 4 | 5 | >span { 6 | height: 58px; 7 | margin: 18px 0; 8 | } 9 | 10 | md-input-container { 11 | width: 160px; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/toolbar/demoScrollShrink/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |
    5 |

    6 | {{title}} 7 |

    8 |
    9 |     10 | 11 | 12 | 13 | 14 | 15 | 16 | {{item.who}} 17 | 18 |
    19 |

    {{item.what}}

    20 |

    {{item.who}}

    21 | 22 |

    23 | {{item.notes}} 24 |

    25 |
    26 | 27 |     28 | 29 |     30 | 31 |     32 | 33 |
    34 | -------------------------------------------------------------------------------- /src/components/toolbar/demoScrollShrink/script.js: -------------------------------------------------------------------------------- 1 | angular.module('toolbarDemo2', ['ngMaterial']) 2 | 3 | .controller('TitleController', function($scope) { 4 | $scope.title = 'My App Title'; 5 | }) 6 | .controller('AppCtrl', function($scope) { 7 | var imagePath = 'img/60.jpeg'; 8 | 9 | $scope.todos = []; 10 | for (var i = 0; i < 15; i++) { 11 | $scope.todos.push({ 12 | face: imagePath, 13 | what: "Brunch this weekend?", 14 | who: "Min Li Chan", 15 | notes: "I'll be in your neighborhood doing errands." 16 | }); 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/toolbar/demoScrollShrink/style.css: -------------------------------------------------------------------------------- 1 | .face { 2 | width: 48px; 3 | margin: 16px; 4 | border-radius: 48px; 5 | border: 1px solid #ddd; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/tooltip/demoBasicUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('tooltipDemo', ['ngMaterial']) 2 | .controller('AppCtrl', AppCtrl); 3 | 4 | function AppCtrl($scope) { 5 | $scope.demo = { 6 | showTooltip: false, 7 | tipDirection: 'bottom' 8 | }; 9 | 10 | $scope.demo.delayTooltip = undefined; 11 | $scope.$watch('demo.delayTooltip', function(val) { 12 | $scope.demo.delayTooltip = parseInt(val, 10) || 0; 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /src/components/tooltip/tooltip-theme.scss: -------------------------------------------------------------------------------- 1 | .md-panel.md-tooltip.md-THEME_NAME-theme { 2 | color: '{{background-700-contrast}}'; 3 | background-color: '{{background-700}}'; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/truncate/demoBasicUsage/style.scss: -------------------------------------------------------------------------------- 1 | #fake-app { 2 | position: relative; 3 | height: 400px; 4 | width: 400px; 5 | margin-left: auto; 6 | margin-right: auto; 7 | 8 | border: 1px solid #333; 9 | 10 | .sidebar { 11 | position: absolute; 12 | width: 50px; 13 | left: 0; 14 | top: 0; 15 | bottom: 0; 16 | 17 | background-color: #333; 18 | 19 | md-icon { 20 | display: block; 21 | color: #ddd; 22 | margin-top: 15px; 23 | } 24 | } 25 | 26 | .app-body { 27 | position: absolute; 28 | left: 50px; 29 | right: 100px; 30 | top: 0; 31 | bottom: 0; 32 | 33 | background-color: white; 34 | padding: 10px; 35 | overflow: auto; 36 | } 37 | 38 | .rightbar { 39 | position: absolute; 40 | width: 100px; 41 | right: 0; 42 | top: 0; 43 | bottom: 0; 44 | 45 | background: #ddd; 46 | padding: 10px; 47 | } 48 | } -------------------------------------------------------------------------------- /src/components/truncate/truncate.scss: -------------------------------------------------------------------------------- 1 | .md-truncate { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | 5 | // Default overflow is ellipsis 6 | text-overflow: ellipsis; 7 | 8 | // Allow override to use clipping 9 | &.md-clip { 10 | text-overflow: clip; 11 | } 12 | 13 | // This is a flex-specific hack that forces the element to only take up available space. 14 | &.flex { 15 | width: 0; 16 | } 17 | } -------------------------------------------------------------------------------- /src/components/truncate/truncate.spec.js: -------------------------------------------------------------------------------- 1 | describe('', function() { 2 | var $compile, $rootScope; 3 | 4 | beforeEach(module('material.components.truncate')); 5 | beforeEach(inject(function(_$compile_, _$rootScope_) { 6 | $compile = _$compile_; 7 | $rootScope = _$rootScope_; 8 | })); 9 | 10 | it('works as an element', function() { 11 | var el = setup('Test'); 12 | 13 | expect(el).toHaveClass('md-truncate'); 14 | }); 15 | 16 | it('works as an attribute', function() { 17 | var el = setup('

    Test

    '); 18 | 19 | expect(el).toHaveClass('md-truncate'); 20 | }); 21 | 22 | function setup(template) { 23 | var element = $compile(template)($rootScope); 24 | 25 | $rootScope.$digest(); 26 | 27 | return element; 28 | } 29 | }); -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoDeferredLoading/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | Display a list of 50,000 items that load on demand in a viewport of only 7 rows (height=40px). 5 |

    6 | This demo shows scroll and rendering performance gains when using md-virtual-repeat; 7 | achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to 8 | explicitly use md-virtual-repeat-container as a wrapping parent container. 9 |

    10 | To enable load-on-demand behavior, developers must pass in a custom instance of 11 | mdVirtualRepeatModel (see the example's source for more info). 12 |

    13 | 14 | 15 |
    17 | {{item}} 18 |
    19 |     20 |     21 | 22 |
    23 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoDeferredLoading/style.css: -------------------------------------------------------------------------------- 1 | #vertical-container { 2 | height: 292px; 3 | width: 100%; 4 | max-width: 400px; 5 | } 6 | 7 | .repeated-item { 8 | border-bottom: 1px solid #ddd; 9 | box-sizing: border-box; 10 | height: 40px; 11 | padding-top: 10px; 12 | } 13 | 14 | md-content { 15 | margin: 16px; 16 | } 17 | 18 | md-virtual-repeat-container { 19 | border: solid 1px grey; 20 | } 21 | 22 | .md-virtual-repeat-container .md-virtual-repeat-offsetter div { 23 | padding-left: 16px; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoHorizontalUsage/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | Display 1000 item in a virtual-list with viewport of only 16 columns (width=50px). 5 |

    6 | This demo shows scroll and rendering performance gains when using md-virtual-repeat; 7 | achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to 8 | explicitly use md-virtual-repeat-container as a wrapping parent container. 9 |

    10 | 11 | 12 |
    14 | {{item}} 15 |
    16 |     17 |     18 | 19 |
    20 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoHorizontalUsage/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular 5 | .module('virtualRepeatHorizontalDemo', ['ngMaterial']) 6 | .controller('AppCtrl', function() { 7 | this.items = []; 8 | for (var i = 0; i < 1000; i++) { 9 | this.items.push(i); 10 | } 11 | }); 12 | 13 | })(); 14 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoHorizontalUsage/style.css: -------------------------------------------------------------------------------- 1 | #horizontal-container { 2 | height: 100px; 3 | width: 100%; 4 | max-width: 830px; 5 | } 6 | 7 | .repeated-item { 8 | border-right: 1px solid #ddd; 9 | box-sizing: border-box; 10 | display: inline-block; 11 | height: 84px; 12 | padding-top: 35px; 13 | text-align: center; 14 | width: 50px; 15 | } 16 | 17 | md-content { 18 | margin: 16px; 19 | } 20 | 21 | md-virtual-repeat-container { 22 | border: solid 1px grey; 23 | } 24 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoInfiniteScroll/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | Display an infinitely growing list of items in a viewport of only 7 rows (height=40px). 5 |

    6 | This demo shows scroll and rendering performance gains when using md-virtual-repeat; 7 | achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to 8 | explicitly use md-virtual-repeat-container as a wrapping parent container. 9 |

    10 | To enable infinite scroll behavior, developers must pass in a custom instance of 11 | mdVirtualRepeatModel (see the example's source for more info). 12 |

    13 | 14 | 15 |
    17 | {{item}} 18 |
    19 |     20 |     21 | 22 |
    23 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoInfiniteScroll/style.css: -------------------------------------------------------------------------------- 1 | #vertical-container { 2 | height: 292px; 3 | width: 100%; 4 | max-width: 400px; 5 | } 6 | 7 | .repeated-item { 8 | border-bottom: 1px solid #ddd; 9 | box-sizing: border-box; 10 | height: 40px; 11 | padding-top: 10px; 12 | } 13 | 14 | md-content { 15 | margin: 16px; 16 | } 17 | 18 | md-virtual-repeat-container { 19 | border: solid 1px grey; 20 | } 21 | 22 | .md-virtual-repeat-container .md-virtual-repeat-offsetter div { 23 | padding-left: 16px; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoScrollTo/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | Use the md-top-index attribute to watch which item is at the top of the scroll 5 | container, and also to jump to a specific item. 6 |

    7 | 8 |
    9 | 10 | 11 | {{ year }} 12 | 13 | 14 | 15 | 16 |
    18 | {{item.text}} 19 |
    20 |     21 |
    22 | 23 |     24 |
    -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoScrollTo/style.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | width: 100%; 3 | max-width: 400px; 4 | } 5 | 6 | #vertical-container { 7 | height: 292px; 8 | width: 100%; 9 | max-width: 400px; 10 | } 11 | 12 | #vertical-container .repeated-item { 13 | border-bottom: 1px solid #ddd; 14 | box-sizing: border-box; 15 | height: 40px; 16 | padding-top: 10px; 17 | } 18 | 19 | #vertical-container .repeated-item.header { 20 | background-color: #106CC8; 21 | color: white; 22 | text-align: center; 23 | font-weight: bold; 24 | } 25 | 26 | #vertical-container md-content { 27 | margin: 16px; 28 | } 29 | 30 | md-virtual-repeat-container { 31 | border: solid 1px grey; 32 | } 33 | 34 | .md-virtual-repeat-container .md-virtual-repeat-offsetter div:not(.header) { 35 | padding-left: 16px; 36 | } 37 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoVerticalUsage/index.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |

    4 | Display 1000 item in a virtual-list with viewport of only 7 rows (height=40px). 5 |

    6 | This demo shows scroll and rendering performance gains when using md-virtual-repeat; 7 | achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to 8 | explicitly use md-virtual-repeat-container as a wrapping parent container. 9 |

    10 | 11 | 12 |
    14 | {{item}} 15 |
    16 |     17 |     18 | 19 |
    20 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoVerticalUsage/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular 5 | .module('virtualRepeatVerticalDemo', ['ngMaterial']) 6 | .controller('AppCtrl', function() { 7 | this.items = []; 8 | for (var i = 0; i < 1000; i++) { 9 | this.items.push(i); 10 | } 11 | }); 12 | 13 | })(); 14 | -------------------------------------------------------------------------------- /src/components/virtualRepeat/demoVerticalUsage/style.css: -------------------------------------------------------------------------------- 1 | #vertical-container { 2 | height: 292px; 3 | width: 100%; 4 | max-width: 400px; 5 | } 6 | 7 | .repeated-item { 8 | border-bottom: 1px solid #ddd; 9 | box-sizing: border-box; 10 | height: 40px; 11 | padding-top: 10px; 12 | } 13 | 14 | md-content { 15 | margin: 16px; 16 | } 17 | 18 | md-virtual-repeat-container { 19 | border: solid 1px grey; 20 | } 21 | 22 | .md-virtual-repeat-container .md-virtual-repeat-offsetter div { 23 | padding-left: 16px; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/whiteframe/demoBasicClassUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('whiteframeBasicUsage', ['ngMaterial']); 2 | -------------------------------------------------------------------------------- /src/components/whiteframe/demoBasicClassUsage/style.css: -------------------------------------------------------------------------------- 1 | md-whiteframe { 2 | margin: 30px; 3 | height: 100px; 4 | } 5 | 6 | /* For breakpoint `-xs` */ 7 | @media (max-width: 599px) { 8 | md-whiteframe { 9 | margin: 7px; 10 | height: 50px; 11 | } 12 | md-whiteframe > span { 13 | font-size: 0.4em; 14 | } 15 | } 16 | 17 | /* For breakpoint `-sm` */ 18 | @media (min-width: 600px ) and (max-width: 959px) { 19 | md-whiteframe { 20 | margin: 20px; 21 | height: 75px; 22 | } 23 | md-whiteframe > span { 24 | font-size: 0.6em; 25 | } 26 | } 27 | 28 | /* For breakpoint `-md` */ 29 | @media (min-width: 960px ) and (max-width: 1279px) { 30 | md-whiteframe { 31 | margin: 20px; 32 | height: 90px; 33 | } 34 | md-whiteframe > span { 35 | font-size: 0.9em; 36 | } 37 | } 38 | 39 | /* For breakpoint `-gt-md` */ 40 | @media (min-width: 1280px) { 41 | md-whiteframe { 42 | margin: 25px; 43 | height: 100px; 44 | } 45 | md-whiteframe > span { 46 | font-size: 1.0em; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/components/whiteframe/demoDirectiveAttributeUsage/script.js: -------------------------------------------------------------------------------- 1 | angular.module('whiteframeDirectiveUsage', ['ngMaterial']); 2 | -------------------------------------------------------------------------------- /src/components/whiteframe/demoDirectiveInterpolation/script.js: -------------------------------------------------------------------------------- 1 | angular.module('whiteframeDirectiveUsage', ['ngMaterial']) 2 | .controller('DemoCtrl', function($interval) { 3 | this.elevation = 1; 4 | this.showFrame = 3; 5 | 6 | this.nextElevation = function() { 7 | if (++this.elevation == 25) { 8 | this.elevation = 1; 9 | } 10 | }; 11 | 12 | $interval(this.nextElevation.bind(this), 500); 13 | 14 | this.toggleFrame = function() { 15 | this.showFrame = this.showFrame == 3 ? -1 : 3; 16 | }; 17 | }); 18 | -------------------------------------------------------------------------------- /src/core/core.spec.js: -------------------------------------------------------------------------------- 1 | describe('material.core', function() { 2 | 3 | describe("detect if ng-touch module is loaded", function() { 4 | beforeEach(module('ngTouch', 'material.core')); 5 | 6 | it('should find ngTouch $swipe instance', inject(function($injector) { 7 | // This is check in core.js#L22 8 | expect($injector.has('$swipe')).toBe(true); 9 | })); 10 | 11 | }); 12 | 13 | describe("if ng-touch module is NOT loaded", function() { 14 | beforeEach(module('material.core')); 15 | 16 | it('should find not find the ngTouch $swipe instance', inject(function($injector) { 17 | // This is check in core.js#L22 18 | expect($injector.has('$swipe')).toBe(false); 19 | })); 20 | 21 | }); 22 | 23 | it('should shim $q.resolve', inject(function($q) { 24 | expect(angular.isFunction($q.resolve)).toBe(true); 25 | expect($q.resolve).toBe($q.when); 26 | })); 27 | }); 28 | 29 | -------------------------------------------------------------------------------- /src/core/services/ripple/checkbox_ripple.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | /** 5 | * @ngdoc service 6 | * @name $mdCheckboxInkRipple 7 | * @module material.core 8 | * 9 | * @description 10 | * Provides ripple effects for md-checkbox. See $mdInkRipple service for all possible configuration options. 11 | * 12 | * @param {object=} scope Scope within the current context 13 | * @param {object=} element The element the ripple effect should be applied to 14 | * @param {object=} options (Optional) Configuration options to override the defaultripple configuration 15 | */ 16 | 17 | angular.module('material.core') 18 | .factory('$mdCheckboxInkRipple', MdCheckboxInkRipple); 19 | 20 | function MdCheckboxInkRipple($mdInkRipple) { 21 | return { 22 | attach: attach 23 | }; 24 | 25 | function attach(scope, element, options) { 26 | return $mdInkRipple.attach(scope, element, angular.extend({ 27 | center: true, 28 | dimBackground: false, 29 | fitRipple: true 30 | }, options)); 31 | } 32 | } 33 | })(); 34 | -------------------------------------------------------------------------------- /src/core/services/ripple/list_ripple.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | /** 5 | * @ngdoc service 6 | * @name $mdListInkRipple 7 | * @module material.core 8 | * 9 | * @description 10 | * Provides ripple effects for md-list. See $mdInkRipple service for all possible configuration options. 11 | * 12 | * @param {object=} scope Scope within the current context 13 | * @param {object=} element The element the ripple effect should be applied to 14 | * @param {object=} options (Optional) Configuration options to override the defaultripple configuration 15 | */ 16 | 17 | angular.module('material.core') 18 | .factory('$mdListInkRipple', MdListInkRipple); 19 | 20 | function MdListInkRipple($mdInkRipple) { 21 | return { 22 | attach: attach 23 | }; 24 | 25 | function attach(scope, element, options) { 26 | return $mdInkRipple.attach(scope, element, angular.extend({ 27 | center: false, 28 | dimBackground: true, 29 | outline: false, 30 | rippleSize: 'full' 31 | }, options)); 32 | } 33 | } 34 | })(); 35 | -------------------------------------------------------------------------------- /src/core/services/ripple/tab_ripple.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | /** 5 | * @ngdoc service 6 | * @name $mdTabInkRipple 7 | * @module material.core 8 | * 9 | * @description 10 | * Provides ripple effects for md-tabs. See $mdInkRipple service for all possible configuration options. 11 | * 12 | * @param {object=} scope Scope within the current context 13 | * @param {object=} element The element the ripple effect should be applied to 14 | * @param {object=} options (Optional) Configuration options to override the defaultripple configuration 15 | */ 16 | 17 | angular.module('material.core') 18 | .factory('$mdTabInkRipple', MdTabInkRipple); 19 | 20 | function MdTabInkRipple($mdInkRipple) { 21 | return { 22 | attach: attach 23 | }; 24 | 25 | function attach(scope, element, options) { 26 | return $mdInkRipple.attach(scope, element, angular.extend({ 27 | center: false, 28 | dimBackground: true, 29 | outline: false, 30 | rippleSize: 'full' 31 | }, options)); 32 | } 33 | } 34 | })(); 35 | -------------------------------------------------------------------------------- /src/core/style/_modules.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | -------------------------------------------------------------------------------- /src/core/style/core-theme.scss: -------------------------------------------------------------------------------- 1 | /* Only used with Theme processes */ 2 | 3 | html, body { 4 | &.md-THEME_NAME-theme { 5 | color: '{{foreground-1}}'; 6 | background-color: '{{background-color}}'; 7 | } 8 | } -------------------------------------------------------------------------------- /start-hook.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | cd "$(dirname "$0")" 4 | 5 | # 6 | # starts a hookshot server that will `git pull` whenever 7 | # GitHub pings us 8 | # 9 | # See: https://github.com/Coreh/hookshot 10 | # 11 | hookshot -p 9010 "git fetch && git reset --hard origin/master && npm install && rm -rf dist/ && gulp docs --release" 12 | -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "sub": true, 3 | "multistr": true, 4 | "-W018": true, 5 | "expr": true, 6 | "boss": true, 7 | "laxbreak": true, 8 | "esversion": 9, 9 | "predef": ["angular"] 10 | } 11 | -------------------------------------------------------------------------------- /watch-hook.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | cd "$(dirname "$0")" 4 | 5 | # 6 | # spawns the hook, and restarts it if it goes down 7 | # 8 | # See: https://github.com/nodejitsu/forever 9 | # 10 | forever start -c bash start-hook.sh 11 | --------------------------------------------------------------------------------