@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/button.js

@@ -1,224 +0,0 @@
-import * as Button from '../../components/button/index.js';
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
-import * as Overlay from '../../core/overlay/index.js';
-import * as Ripple from '../../core/ripple/index.js';
-import { convertElementToCode } from '../_sample-utils.js';
-
-/** @return {void} */
-function initializeSampleComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-button'), Button.attach);
-}
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/**
- * @param {string} name
- * @param {boolean} value
- * @return {void}
- */
-function toggleOverlayOption(name, value) {
-  const attr = sampleComponent.getAttribute('mdw-overlay-off') || '';
-  if (!attr) {
-    if (!value) {
-      return;
-    }
-    sampleComponent.setAttribute('mdw-overlay-off', name);
-    return;
-  }
-  if (value) {
-    if (attr.indexOf(name) !== -1) {
-      return;
-    }
-    sampleComponent.setAttribute('mdw-overlay-off', `${attr} ${name}`);
-    return;
-  }
-  if (attr.indexOf(name) === -1) {
-    return;
-  }
-  sampleComponent.setAttribute('mdw-overlay-off', attr.replace(name, '').trim());
-}
-
-/** @return {void} */
-function updateSampleCode() {
-  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
-  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
-  const useJS = jsRequired || jsOptional;
-
-  // Strip JS related elements and attributes
-  Button.detach(sampleComponent);
-
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
-    document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
-
-  // Reattach JS if requested
-  if (useJS) {
-    Button.attachCore(sampleComponent);
-    if (sampleComponent.classList.contains('mdw-ripple')) {
-      Ripple.attach(sampleComponent);
-    }
-    if (sampleComponent.classList.contains('mdw-overlay')) {
-      Overlay.attach(sampleComponent);
-    }
-  }
-
-  const jsCodeElement = document.getElementsByClassName('component-js')[0];
-  jsCodeElement.textContent = 'mdw.Button.attach(buttonElement);';
-}
-
-/** @return {void} */
-function setupPugButton() {
-  const pugButton = document.getElementById('usePug');
-  Button.attach(pugButton);
-  pugButton.addEventListener('click', () => {
-    if (pugButton.getAttribute('aria-pressed') === 'true') {
-      pugButton.setAttribute('aria-pressed', 'false');
-    } else {
-      pugButton.setAttribute('aria-pressed', 'true');
-    }
-    updateSampleCode();
-  });
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = event.target;
-  let newElement;
-  switch (name) {
-    case 'raised':
-      if (checked) {
-        sampleComponent.setAttribute('mdw-raised', '');
-      } else {
-        sampleComponent.removeAttribute('mdw-raised');
-      }
-      break;
-    case 'outline':
-      switch (value) {
-        case 'none':
-          sampleComponent.removeAttribute('mdw-border-ink');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-border-ink', value);
-      }
-      break;
-    case 'activated':
-      if (checked) {
-        sampleComponent.setAttribute('mdw-activated', '');
-      } else {
-        sampleComponent.removeAttribute('mdw-activated');
-      }
-      break;
-    case 'active':
-      if (checked) {
-        sampleComponent.setAttribute('mdw-active', '');
-      } else {
-        sampleComponent.removeAttribute('mdw-active');
-      }
-      break;
-    case 'toggle':
-      if (!value) {
-        sampleComponent.removeAttribute('aria-pressed');
-      } else {
-        sampleComponent.setAttribute('aria-pressed', value);
-      }
-      break;
-    case 'disabled':
-      if (checked) {
-        sampleComponent.setAttribute('aria-disabled', 'true');
-      } else {
-        sampleComponent.removeAttribute('aria-disabled');
-      }
-      break;
-    case 'icon':
-      if (checked) {
-        sampleComponent.setAttribute('mdw-icon', '');
-        sampleComponent.classList.add('material-icons');
-        setTextNode(sampleComponent, 'favorite');
-      } else {
-        sampleComponent.removeAttribute('mdw-icon');
-        sampleComponent.classList.remove('material-icons');
-        setTextNode(sampleComponent, 'Button');
-      }
-      break;
-    case 'ink':
-      switch (value) {
-        case 'default':
-          sampleComponent.removeAttribute('mdw-ink');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-ink', value);
-          break;
-      }
-      break;
-    case 'ripple':
-      if (checked) {
-        sampleComponent.classList.add('mdw-ripple');
-      } else {
-        sampleComponent.classList.remove('mdw-ripple');
-      }
-      break;
-    case 'overlay-hover':
-    case 'overlay-focus':
-    case 'overlay-activated':
-      toggleOverlayOption(name.replace('overlay-', ''), !checked);
-      break;
-    case 'surface':
-      switch (value) {
-        case 'none':
-          sampleComponent.removeAttribute('mdw-surface');
-          sampleComponent.removeAttribute('mdw-light');
-          sampleComponent.removeAttribute('mdw-dark');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
-          if (value.indexOf(' light') === -1) {
-            sampleComponent.removeAttribute('mdw-light');
-          } else {
-            sampleComponent.setAttribute('mdw-light', '');
-          }
-          if (value.indexOf(' dark') === -1) {
-            sampleComponent.removeAttribute('mdw-dark');
-          } else {
-            sampleComponent.setAttribute('mdw-dark', '');
-          }
-          if (value === 'none') {
-            sampleComponent.classList.remove('mdw-theme');
-          } else {
-            sampleComponent.classList.add('mdw-theme');
-          }
-          break;
-      }
-      break;
-    case 'htmltype':
-      newElement = document.createElement(value);
-      while (sampleComponent.firstChild) {
-        newElement.appendChild(sampleComponent.firstChild);
-      }
-      iterateArrayLike(sampleComponent.attributes, (attr) => {
-        newElement.attributes.setNamedItem(attr.cloneNode());
-      });
-      sampleComponent.parentElement.replaceChild(newElement, sampleComponent);
-      sampleComponent = newElement;
-      break;
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponent = document.querySelector('.component-sample .mdw-button');
-  Button.attach(sampleComponent);
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
-    el.addEventListener('change', onOptionChange);
-  });
-}
-
-initializeSampleComponents();
-setupComponentOptions();
-setupPugButton();
-updateSampleCode();

package/docs/pages/button.pug

@@ -1,121 +0,0 @@
-include ../../templates/index.pug
-include ../_mixins.pug
-
-mixin button-test
-  .display-flex.flex-wrap
-    +mdwButton Text
-    +mdwButton({ raised:true }) Contained
-    +mdwButton({ raised:true, disabled:true }) Disabled
-    +mdwButton({ borderInk:'default'}) Outlined
-  div(style="height:24px")
-  .display-flex.flex-wrap
-    +mdwButton({ ink:'primary' }) Text
-    +mdwButton({ ink:'primary', raised:true }) Contained
-    +mdwButton({ ink:'primary', raised:true, disabled:true }) Disabled
-    +mdwButton({ ink:'secondary' }) Secondary
-    +mdwButton({ ink:'secondary', borderInk:true }) Outlined
-  div(style="height:24px")
-  .display-flex.flex-wrap
-    +mdwButton({ surface:'primary 500', dark:true }) Text
-    +mdwButton({ surface:'primary 500', dark:true, raised:true }) Contained
-    +mdwButton({ surface:'primary 500', dark:true, raised:true, disabled:true }) Disabled
-    +mdwButton({ surface:'secondary 100', light:true, raised:true }) Outlined
-  div(style="height:24px")
-  .display-flex.flex-wrap
-    +mdwButton({ icon:true }).material-icons favorite
-    +mdwButton({ ink:"warn", dark:true, icon:true }).material-icons favorite
-    +mdwButton({ surface:"warn 500", dark:true, icon:true }).material-icons favorite
-    +mdwButton({ surface:"warn 500", dark:true, icon:true, raised:true }).material-icons favorite
-    +mdwButton({ surface:"warn 500", dark:true, icon:true, raised:true, disabled:true }).material-icons favorite
-    +mdwButton({ icon:true, disabled:true }).material-icons favorite
-
-+header("button")
-  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
-    .mdw-grid__item(mdw-colspan="100%")
-      .mdw-grid__content
-        h5.mdw-type(mdw-baseline-next="36") Buttons communicate the action that will occur when the user touches them.
-        p.mdw-type Material buttons trigger an ink reaction on press. They may display text, imagery, or both.
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .component-sample
-          .display-flex
-            a.mdw-button.mdw-theme(mdw-ink="secondary") Button
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .mdw-type(mdw-style="subtitle") Javascript
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) Required
-          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true}) Optional
-          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none'}) None
-        .mdw-type(mdw-style="subtitle") Overlay
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'overlay-hover', checked:true}) Hover
-          +mdwSelection({ink:'secondary', name:'overlay-focus', checked:true}) Focus
-          +mdwSelection({ink:'secondary', name:'overlay-activated', checked:true}) Activated
-        .mdw-type(mdw-style="subtitle") Options
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'icon'}) Icon
-          +mdwSelection({ink:'secondary', name:'raised'}) Raised
-          +mdwSelection({ink:'secondary', name:'ripple', checked:true}) Ripple
-          +mdwSelection({ink:'secondary', name:'disabled'}) Disabled
-        .mdw-type(mdw-style="subtitle") Outline
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'none', checked:true}) None
-          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'default'}) Default
-          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:''}) Ink
-        .mdw-type(mdw-style="subtitle") Activated Toggle
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'', checked:true}) None
-          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'false'}) Off
-          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'true'}) On
-        .mdw-type(mdw-style="subtitle") Ink
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'default'}) Default
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'primary'}) Primary
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'secondary', checked:true}) Secondary
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'warn contrast'}) Warn Contrast
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'purple'}) Purple
-        .mdw-type(mdw-style="subtitle") Surface
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'none', checked:true}) Default
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'primary 500 dark'}) Primary (Dark)
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light'}) Secondary (Light)
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'warn 200 light'}) Warn 200 (Light)
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'green 700 dark'}) Green 700 (Dark)
-        .mdw-type(mdw-style="subtitle") HTML Element Type
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'a', checked:true}) HTMLAnchorElement
-          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'button'}) HTMLButtonElement
-          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'div'}) HTMLDivElement
-    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        h6.mdw-type HTML Code
-        .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
-          +mdwButton({ icon:true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        h6.mdw-type Javascript Code
-        .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
-    .mdw-grid__item(mdw-colspan="100%")
-      .mdw-grid__content
-        h6.mdw-type Samples
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .render-fill.mdw-theme
-          +androidstatusbar('')
-          +appbar('', '', [], []) CSS Only
-          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
-            div
-              +button-test
-          +androidnavbar
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .render-fill.js.mdw-theme
-          +androidstatusbar('')
-          +appbar('', '', [], []) Javascript Version
-          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
-            div
-              +button-test
-          +androidnavbar
-  script(src='button.min.js')

package/docs/pages/card.eta

@@ -1,90 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'card'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h5 class="mdw-type" mdw-baseline-next="36">Cards contain content and actions about a single subject.</h5>
-    <p class="mdw-type" mdw-baseline-next="36">Cards are surfaces that display content and actions on a single topic.</p>
-    <p class="mdw-type">They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.</p>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content component-sample">
-      <div class="display-flex">
-        <div class="mdw-card mdw-theme" mdw-raised="focus-within" mdw-surface="card" mdw-border-ink>
-          <%~ includeFile(T, { button: { class:"mdw-card__button" }}) %>
-          <div class="mdw-card__start">
-            <div class="mdw-card__thumbnail material-icons" style="font-size:40px;">account_circle</div>
-          </div>
-          <div class="mdw-card__end" style="margin:8px 0;">
-            <%~ includeFile(T, { button: { class:"mdw-card__button", icon:true, text:'clear' }}) %>
-          </div>
-          <h6 class="mdw-card__header" mdw-two-line>Title goes here</h6>
-          <div class="mdw-card__subheader">Secondary text</div>
-          <div class="mdw-card__media" mdw-ratio="16:9"><img class="mdw-card__image" src="https://free-images.com/md/f673/sunset_sky_red_gold_0.jpg"></div>
-          <div class="mdw-card__supporting-text">Grayhound divisively hello coldly wonderfully marginally far upon excluding.</div>
-          <div class="mdw-card__actions">
-            <%~ includeFile(T, { button: {  ink:'secondary' , text:'Action 1' }}) %>
-            <%~ includeFile(T, { button: {  ink:'secondary' , text:'Action 2' }}) %>
-            <%~ includeFile(T, { button: { icon: true , class:'material-icons', text:'more_vert' }}) %>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="4">
-    <div class="mdw-type" mdw-style="subtitle">Javascript</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true, text:'Required' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', disabled:true, text:'Optional' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', checked:true, text:'None' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Elevation</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'0', text:'0dp' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'1', text:'1dp' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'8', text:'8dp' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Raise</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'raise-focus-within', value:'focus-within', checked:true, text:'On Focus Within' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'raise-hover', value:'hover', text:'On Hover' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Media Placement</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'none', text:'None' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'top', text:'Top' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'middle', checked:true, text:'Middle' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'bottom', text:'Bottom' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Media Ratio</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'none', text:'None' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'16:9', checked:true, text:'16:9' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'3:2', text:'3:2' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'4:3', text:'4:3' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'1:1', text:'1:1' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Actions</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'primary-action', checked:true, text:'Primary' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'secondary-actions', checked:true, text:'Secondary' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'close-action', checked:true, text:'Close' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Surface</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'card', text:'Card' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'primary dark', checked:true, text:'Primary (Dark)' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light', text:'Secondary 100 (Light)' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'warn 200 light', text:'Warn 200 (Light)' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'green 700 dark', text:'Green 700 (Dark)' }}) %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <h6 class="mdw-type">HTML Code</h6>
-    <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card">
-      <%~ includeFile(T, { button: {icon:true, ink:'secondary' , id:'usePug', attributes: {'aria-pressed':"false", 'mdw-overlay-off':"activated"}, text:'PUG' }}) %>
-    </div>
-  </div>
-</div>
-<script src="card.min.js"></script>

package/docs/pages/card.js

@@ -1,177 +0,0 @@
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
-import { convertElementToCode } from '../_sample-utils.js';
-
-/** @type {HTMLElement} */
-let sampleComponent;
-/** @type {HTMLElement} */
-let mediaElement;
-/** @type {HTMLElement} */
-let actionsElement;
-/** @type {HTMLElement} */
-let closeActionElement;
-/** @type {HTMLElement} */
-let primaryButtonElement;
-
-/** @return {void} */
-function updateSampleCode() {
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
-    document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
-}
-
-/** @return {void} */
-function setupPugButton() {
-  const pugButton = document.getElementById('usePug');
-  pugButton.addEventListener('click', () => {
-    if (pugButton.getAttribute('aria-pressed') === 'true') {
-      pugButton.setAttribute('aria-pressed', 'false');
-    } else {
-      pugButton.setAttribute('aria-pressed', 'true');
-    }
-    updateSampleCode();
-  });
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = /** @type {HTMLInputElement} */ (event.target);
-  let raiseOptions;
-  switch (name) {
-    case 'elevation':
-      sampleComponent.removeAttribute('mdw-elevation');
-      switch (value) {
-        case 'auto':
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-elevation', value);
-          break;
-      }
-      break;
-    case 'raise-focus-within':
-    case 'raise-hover':
-      raiseOptions = (sampleComponent.getAttribute('mdw-raised') || '').split(' ');
-      if (checked) {
-        if (raiseOptions.indexOf(name.substr('raise-'.length)) === -1) {
-          raiseOptions.push(name.substr('raise-'.length));
-        }
-      } else {
-        raiseOptions = raiseOptions.filter((o) => o !== name.substr('raise-'.length));
-      }
-      raiseOptions.sort();
-      if (raiseOptions.length) {
-        sampleComponent.setAttribute('mdw-raised', raiseOptions.join(' ').trim());
-      } else {
-        sampleComponent.removeAttribute('mdw-raised');
-      }
-      break;
-    case 'media-placement':
-      if (mediaElement.parentElement) {
-        mediaElement.parentElement.removeChild(mediaElement);
-      }
-      switch (value) {
-        default:
-        case 'none':
-          break;
-        case 'top':
-          sampleComponent.insertBefore(mediaElement, sampleComponent.getElementsByClassName('mdw-card__start')[0]);
-          break;
-        case 'middle':
-          sampleComponent.insertBefore(mediaElement, sampleComponent.getElementsByClassName('mdw-card__supporting-text')[0]);
-          break;
-        case 'bottom':
-          sampleComponent.appendChild(mediaElement);
-          break;
-      }
-      break;
-    case 'media-ratio':
-      switch (value) {
-        default:
-        case 'none':
-          mediaElement.removeAttribute('mdw-ratio');
-          break;
-        case '16:9':
-          mediaElement.setAttribute('mdw-ratio', '16:9');
-          break;
-        case '3:2':
-          mediaElement.setAttribute('mdw-ratio', '3:2');
-          break;
-        case '4:3':
-          mediaElement.setAttribute('mdw-ratio', '4:3');
-          break;
-        case '1:1':
-          mediaElement.setAttribute('mdw-ratio', '1:1');
-          break;
-      }
-      break;
-    case 'primary-action':
-      if (checked) {
-        if (!primaryButtonElement.parentElement) {
-          sampleComponent.insertBefore(primaryButtonElement, sampleComponent.firstChild);
-        }
-      } else if (primaryButtonElement.parentElement) {
-        primaryButtonElement.parentElement.removeChild(primaryButtonElement);
-      }
-      break;
-    case 'secondary-actions':
-      if (checked) {
-        if (!actionsElement.parentElement) {
-          sampleComponent.appendChild(actionsElement);
-        }
-      } else if (actionsElement.parentElement) {
-        actionsElement.parentElement.removeChild(actionsElement);
-      }
-      break;
-    case 'close-action':
-      if (checked) {
-        if (!closeActionElement.parentElement) {
-          sampleComponent.insertBefore(closeActionElement, sampleComponent.getElementsByClassName('mdw-card__header')[0]);
-        }
-      } else if (closeActionElement.parentElement) {
-        closeActionElement.parentElement.removeChild(closeActionElement);
-      }
-      break;
-    case 'surface':
-      sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
-      if (value.indexOf(' light') === -1) {
-        sampleComponent.removeAttribute('mdw-light');
-      } else {
-        sampleComponent.setAttribute('mdw-light', '');
-      }
-      if (value.indexOf(' dark') === -1) {
-        sampleComponent.removeAttribute('mdw-dark');
-      } else {
-        sampleComponent.setAttribute('mdw-dark', '');
-      }
-      if (value === 'card') {
-        sampleComponent.classList.remove('mdw-theme');
-      } else {
-        sampleComponent.classList.add('mdw-theme');
-      }
-      break;
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponent = document.querySelector('.component-sample .mdw-card');
-  /** @type {HTMLElement} */
-  mediaElement = (sampleComponent.getElementsByClassName('mdw-card__media')[0]);
-  /** @type {HTMLElement} */
-  actionsElement = (sampleComponent.getElementsByClassName('mdw-card__actions')[0]);
-  /** @type {HTMLElement} */
-  primaryButtonElement = (sampleComponent.getElementsByClassName('mdw-card__button')[0]);
-  /** @type {HTMLElement} */
-  closeActionElement = (sampleComponent.getElementsByClassName('mdw-card__end')[0]);
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
-    el.addEventListener('change', onOptionChange);
-  });
-}
-
-setupComponentOptions();
-setupPugButton();
-updateSampleCode();