Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/collapsible/snippets/collapsible.html b/node_modules/mdl-ext/src/collapsible/snippets/collapsible.html
new file mode 100644
index 0000000..f959654
--- /dev/null
+++ b/node_modules/mdl-ext/src/collapsible/snippets/collapsible.html
@@ -0,0 +1,237 @@
+<p>A collapsible is a component to mark expandable and collapsible regions.
+ It has states, roles, attributes and behavior in accordance with guidelines given in
+ <a href="https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions">
+ Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions
+ </a>.
+</p>
+<article>
+ <button class="mdlext-js-collapsible" style="padding: 8px;">
+ <span>Click to toggle (button)</span>
+ <i class="mdlext-aria-expanded-more-less"></i>
+ </button>
+ <div class="mdlext-collapsible-group"><p>A collapsible region #1.1</p></div>
+ <div class="mdlext-collapsible-group"><p>A collapsible region #1.2</p></div>
+ <div class="mdlext-collapsible-group"><p>A collapsible region #1.3</p></div>
+</article>
+
+<article style="margin-top: 16px;">
+ <div class="mdlext-js-collapsible mdlext-collapsible" style="padding: 8px;">
+ <span>Click to toggle (div)</span>
+ <i class="mdlext-aria-expanded-more-less"></i>
+ </div>
+ <div class="mdlext-collapsible-region"><p>A collapsible region #2.1</p></div>
+ <div class="mdlext-collapsible-region"><p>A collapsible region #2.2</p></div>
+ <div class="mdlext-collapsible-region"><p>A collapsible region #2.3</p></div>
+</article>
+
+
+<style>
+ .mdl-card.demo-card,
+ .mdl-card.welcome-card {
+ min-height: 0;
+ width: auto;
+ margin-top: 16px;
+ margin-bottom: 16px;
+ max-width: 640px;
+ }
+ .mdl-card.demo-card .mdl-card__media,
+ .mdl-card.welcome-card .mdl-card__media {
+ margin: 0;
+ text-align: center;
+ }
+ .mdl-card.demo-card .mdl-card__media > img,
+ .mdl-card.welcome-card .mdl-card__media > img {
+ max-width: 100%;
+ height: auto;
+ }
+ .mdl-card.demo-card .mdl-card__title,
+ .mdl-card.welcome-card .mdl-card__title {
+ /* Fix bug in _card.scss */
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ /* end fix */
+
+ padding-top: 0;
+ padding-bottom: 0;
+ min-height: 64px;
+ }
+ .mdl-card.demo-card .mdl-card__title:focus,
+ .mdl-card.welcome-card .mdl-card__title:focus {
+ /* Must focus ring must be inside title since mdl-card has overflow:hidden */
+ outline-offset: -4px;
+ }
+ .mdl-card.demo-card .mdl-card__title > *,
+ .mdl-card.welcome-card .mdl-card__title > * {
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ align-self: center;
+ }
+ .mdl-card.demo-card .mdl-card__supporting-text,
+ .mdl-card.welcome-card .mdl-card__supporting-text {
+ width: auto;
+ }
+ .mdl-card.demo-card .mdl-card__actions,
+ .mdl-card.welcome-card .mdl-card__actions {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ }
+ .welcome-card > .mdl-card__title {
+ color: #fff;
+ height: 176px;
+ background: url('./assets/welcome_card.jpg') top / cover;
+ }
+ .welcome-card > .mdl-card__title[aria-expanded='false'] {
+ height: 64px;
+ }
+ .welcome-card > .mdl-card__title .mdl-card__title-text {
+ -webkit-align-self: flex-end;
+ -ms-flex-item-align: end;
+ align-self: flex-end;
+ padding-bottom: 16px;
+ }
+ .welcome-card > .mdl-card__title[aria-expanded='false'] .mdl-card__title-text {
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ align-self: center;
+ padding-bottom: 0;
+ }
+ .welcome-card > .mdl-card__menu {
+ color: #fff;
+ }
+
+ table.info {
+ width: 100%
+ }
+ table.info th {
+ padding-right: 40px;
+ vertical-align: middle;
+ text-align: left;
+ width: 120px;
+ }
+</style>
+
+<div class="welcome-card mdl-card mdl-shadow--2dp">
+ <header class="mdl-card__title mdlext-js-collapsible mdlext-collapsible" aria-expanded="true">
+ <h2 class="mdl-card__title-text">A Collapsible Card</h2>
+ </header>
+ <section class="mdl-card__supporting-text mdlext-collapsible-group">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Mauris sagittis pellentesque lacus eleifend lacinia...
+ </section>
+ <footer class="mdl-card__actions mdl-card--border mdlext-collapsible-group">
+ <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ Get Started
+ </button>
+ </footer>
+ <div class="mdl-card__menu">
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">share</i>
+ </button>
+ </div>
+</div>
+
+
+<style>
+ .mdlext-collapsible-group .mdlext-js-collapsible,
+ .mdlext-collapsible-group .mdlext-collapsible-group {
+ margin-left: 16px;
+ }
+</style>
+
+<button class="mdlext-js-collapsible mdl-button mdl-button--colored mdl-button--raised">Click to toggle</button>
+<div class="mdlext-collapsible-group">
+ <p>A collapsible region</p>
+
+ <button class="mdlext-js-collapsible mdl-button mdl-button--accent mdl-button--raised">Click to toggle nested #1</button>
+ <div class="mdlext-collapsible-group">
+ <p>A nested collapsible region</p>
+
+ <button class="mdlext-js-collapsible mdl-button mdl-button--colored mdl-color--deep-orange-100 mdl-button--raised">Click to toggle nested #2</button>
+ <div class="mdlext-collapsible-group">
+ <p>Last region</p>
+ </div>
+ </div>
+</div>
+
+
+<div id="another-card" class="mdl-card demo-card mdl-shadow--2dp mdlext-dark-color-theme">
+ <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast mdlext-js-collapsible mdlext-collapsible">
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">view_headline</i>
+ </button>
+ <h2 class="mdl-card__title-text">Another collapsible card</h2>
+ <div class="mdl-layout-spacer"></div>
+ <i class="material-icons md-36 mdlext-aria-expanded-more-less"></i>
+ </header>
+ <figure class="mdl-card__media mdlext-collapsible-region">
+ <img src="./images/_DSC7535-2.jpg" alt="">
+ </figure>
+ <section style="margin-top:16px" class="mdl-card__supporting-text mdlext-collapsible-region">
+ <table class="info">
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">primary dark</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary mdl-color-text--primary-contrast">primary</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent mdl-color-text--accent-contrast">accent</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">primary dark, inverted</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary">primary, inverted</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent-contrast mdl-color-text--accent">accent, inverted</td>
+ </tr>
+ </table>
+ </section>
+
+ <div class="mdl-card__supporting-text mdlext-collapsible-region">
+ Card Supporting Text
+ </div>
+
+ <footer class="mdl-card__actions mdl-card--border">
+ <button id="read-more" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ Read more
+ </button>
+ <div class="mdl-layout-spacer"></div>
+ <button class="mdl-button mdl-button--icon"><i class="material-icons">radio</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ </footer>
+</div>
+
+
+
+<script>
+ (function() {
+ 'use strict';
+ window.addEventListener('load', function() {
+
+ document.querySelector('#read-more').addEventListener('click', function (e) {
+ var collapsible = document.querySelector('#another-card .mdlext-js-collapsible');
+ collapsible.MaterialExtCollapsible.expand();
+ });
+
+ document.querySelector('#another-card').addEventListener('toggle', function (e) {
+ console.log('Toggle action:', e.detail.action);
+ });
+
+ });
+
+ }());
+
+</script>