@shortfuse/materialdesignweb 0.5.0 → 0.7.1-0

package/docs/pages/card.js

@@ -1,175 +0,0 @@
-import { 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.includes(name.slice('raise-'.length))) {
-          raiseOptions.push(name.slice('raise-'.length));
-        }
-      } else {
-        raiseOptions = raiseOptions.filter((o) => o !== name.slice('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.remove();
-      }
-      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.remove();
-      }
-      break;
-    case 'secondary-actions':
-      if (checked) {
-        if (!actionsElement.parentElement) {
-          sampleComponent.appendChild(actionsElement);
-        }
-      } else if (actionsElement.parentElement) {
-        actionsElement.remove();
-      }
-      break;
-    case 'close-action':
-      if (checked) {
-        if (!closeActionElement.parentElement) {
-          sampleComponent.insertBefore(closeActionElement, sampleComponent.getElementsByClassName('mdw-card__header')[0]);
-        }
-      } else if (closeActionElement.parentElement) {
-        closeActionElement.remove();
-      }
-      break;
-    case 'surface':
-      sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
-      if (!value.includes(' light')) {
-        sampleComponent.removeAttribute('mdw-light');
-      } else {
-        sampleComponent.setAttribute('mdw-light', '');
-      }
-      if (!value.includes(' dark')) {
-        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');
-  mediaElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__media')[0]);
-  actionsElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__actions')[0]);
-  primaryButtonElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__button')[0]);
-  closeActionElement = /** @type {HTMLElement} */ (sampleComponent.getElementsByClassName('mdw-card__end')[0]);
-  for (const el of document.querySelectorAll('input[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-}
-
-setupComponentOptions();
-setupPugButton();
-updateSampleCode();

package/docs/pages/chip.eta

@@ -1,122 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'chip'}) %>
-<div class="mdw-grid docs-chip" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h5 class="mdw-type" mdw-baseline-next="36">Chips are compact elements that represent an input, attribute, or action.</h5>
-    <p class="mdw-type">Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.</p>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content component-sample">
-      <div class="component-sample__container">
-        <div>
-          <p>Action
-            <div class="mdw-chip" mdw-type="action">
-              <div class="mdw-chip__item">
-                <div class="mdw-chip__input"></div>
-                <div class="mdw-chip__text">Send Message</div>
-              </div>
-              <div class="mdw-chip__item">
-                <div class="mdw-chip__input"></div>
-                <div class="mdw-chip__text">Call</div>
-              </div>
-            </div>
-          </p>
-          <p>Input</p>
-          <div class="mdw-chip" mdw-type="input">
-            <div class="mdw-chip__item">
-              <div class="mdw-chip__input"></div>
-              <div class="mdw-chip__text">Portland</div>
-              <div class="mdw-chip__thumbnail material-icons">place</div>
-              <div class="mdw-chip__remove material-icons">cancel</div>
-            </div>
-            <div class="mdw-chip__item">
-              <div class="mdw-chip__input"></div>
-              <div class="mdw-chip__text">Biking</div>
-              <div class="mdw-chip__thumbnail material-icons">directions_bike</div>
-              <div class="mdw-chip__remove material-icons">cancel</div>
-            </div>
-          </div>
-          <p>Choice</p>
-          <form class="mdw-chip mdw-theme" mdw-type="choice" mdw-ink="secondary">
-            <label class="mdw-chip__item">
-              <input class="mdw-chip__input" type="radio" name="sample" value="a" />
-              <div class="mdw-chip__text">Apple</div>
-            </label>
-            <label class="mdw-chip__item">
-              <input class="mdw-chip__input" type="radio" name="sample" value="b" />
-              <div class="mdw-chip__text">Banana</div>
-            </label>
-            <label class="mdw-chip__item">
-              <input class="mdw-chip__input" type="radio" name="sample" value="c" />
-              <div class="mdw-chip__text">Cranberry</div>
-            </label>
-            <label class="mdw-chip__item">
-              <input class="mdw-chip__input" type="radio" name="sample" value="d" />
-              <div class="mdw-chip__text">Dragon Fruit</div>
-            </label>
-          </form>
-          <p>Filter</p>
-          <div>
-            <div class="mdw-chip" mdw-type="filter">
-              <label class="mdw-chip__item">
-                <input class="mdw-chip__input" type="checkbox" />
-                <div class="mdw-chip__text">Elevator</div>
-                <div class="mdw-chip__checkmark material-icons">check</div>
-              </label>
-              <label class="mdw-chip__item">
-                <input class="mdw-chip__input" type="checkbox" />
-                <div class="mdw-chip__text">Washer/Dryer</div>
-                <div class="mdw-chip__checkmark material-icons">check</div>
-              </label>
-              <label class="mdw-chip__item">
-                <input class="mdw-chip__input" type="checkbox" />
-                <div class="mdw-chip__text">Fireplace</div>
-                <div class="mdw-chip__checkmark material-icons">check</div>
-              </label>
-              <label class="mdw-chip__item">
-                <input class="mdw-chip__input" type="checkbox" />
-                <div class="mdw-chip__text">Wheelchair access</div>
-                <div class="mdw-chip__checkmark material-icons">check</div>
-              </label>
-              <label class="mdw-chip__item">
-                <input class="mdw-chip__input" type="checkbox" />
-                <div class="mdw-chip__text">Dogs ok</div>
-                <div class="mdw-chip__checkmark material-icons">check</div>
-              </label>
-              <label class="mdw-chip__item">
-                <input class="mdw-chip__input" type="checkbox" />
-                <div class="mdw-chip__text">Cats ok</div>
-                <div class="mdw-chip__checkmark material-icons">check</div>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item demo-options" 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', checked:true, text:'Optional' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', text:'None' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Options</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'outlined', text:'Outlined' }}) %>
-    </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" mdw-border-ink></div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h6 class="mdw-type">Javascript Code</h6>
-    <div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h6 class="mdw-type">Samples</h6>
-  </div>
-</div>
-<script src="chip.min.js"></script>

package/docs/pages/chip.js

@@ -1,80 +0,0 @@
-import * as Chip from '../../components/chip/index.js';
-import { convertElementToCode } from '../_sample-utils.js';
-
-/** @type {Iterable<HTMLElement>} */
-let sampleComponents;
-
-/** @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
-  for (const element of sampleComponents) { Chip.detach(element); }
-
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  const sampleContainer = document.querySelector('.component-sample__container').firstElementChild;
-  htmlCodeElement.textContent = convertElementToCode(sampleContainer);
-
-  // Reattach JS if requested
-  if (useJS) {
-    for (const element of sampleComponents) { Chip.attach(element); }
-  }
-
-  const jsCodeElement = document.getElementsByClassName('component-js')[0];
-  jsCodeElement.textContent = 'mdw.Chip.attach(chipElement);';
-}
-
-/** @return {void} */
-function initializeSampleComponents() {
-  for (const element of document.querySelectorAll('.js .mdw-tab')) { Chip.attach(element); }
-  for (const formElement of document.getElementsByTagName('form')) {
-    formElement.reset();
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const inputElement = /** @type {HTMLInputElement} */ (event.currentTarget);
-  const { name, value, checked } = inputElement;
-
-  switch (name) {
-    case 'framework':
-      switch (value) {
-        case 'javascript':
-          break;
-        case 'css':
-          break;
-        default:
-      }
-      break;
-    case 'outlined': {
-      for (const el of sampleComponents) {
-        if (checked) {
-          el.setAttribute('mdw-outlined', '');
-        } else {
-          el.removeAttribute('mdw-outlined');
-        }
-      }
-      break;
-    }
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponents = document.querySelectorAll('.component-sample .mdw-chip');
-  for (const el of document.querySelectorAll('.demo-options input[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-}
-
-initializeSampleComponents();
-setupComponentOptions();
-updateSampleCode();

package/docs/pages/color.eta

@@ -1,143 +0,0 @@
-<% layout('../_partials/_header.eta', {page: 'color'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-columns="4" id="color-page-options">
-  <div class="mdw-grid__item" mdw-colspan="4">
-    <div class="mdw-grid__content mdw-theme" mdw-elevation="8">
-      <div id="color-sample-area">
-        <a class="demo-core-item mdw-overlay mdw-elevation mdw-ripple mdw-theme" id="sample-button" tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast">Enabled</a>
-        <a class="demo-core-item mdw-overlay mdw-elevation mdw-ripple mdw-theme" id="sample-button__selected" tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-selected="true">Selected</a>
-        <a class="demo-core-item mdw-overlay mdw-elevation mdw-ripple mdw-theme" id="sample-button__activated" tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-pressed="true">Activated</a>
-        <div style="margin:8px">
-          <p class="mdw-type"><span>Surface: </span><span class="mdw-theme" id="sample-surface" mdw-ink="medium"></span></p>
-          <p class="mdw-type"><span>Ink: </span><span class="mdw-theme" id="sample-ink" mdw-ink="medium"></span></p>
-        </div>
-        <div style="margin:8px">
-          <p class="mdw-type"><span>Text Contrast: </span><span class="mdw-theme" id="sample-contrast__text" mdw-ink="medium"></span><span> / 4.5</span></p>
-          <p class="mdw-type"><span>Selected Contrast: </span><span class="mdw-theme" id="sample-contrast__selected" mdw-ink="medium"></span><span> / 4.5</span></p>
-          <p class="mdw-type"><span>Activated Contrast: </span><span class="mdw-theme" id="sample-contrast__activated" mdw-ink="medium"></span><span> / 4.5</span></p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="2">
-    <div class="mdw-grid__content">
-      <div class="mdw-type" mdw-style="subtitle">Ink</div>
-      <div>
-        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
-          <select class="mdw-textfield__input" name="ink-color">
-            <option class="mdw-theme" mdw-surface="card" value="default">Default</option>
-            <option class="mdw-theme" mdw-surface="card" value="black">Black</option>
-            <option class="mdw-theme" mdw-surface="card" value="white">White</option>
-            <option class="mdw-theme" mdw-surface="card" value="primary">Primary</option>
-            <option class="mdw-theme" mdw-surface="card" value="secondary" selected>Secondary</option>
-            <option class="mdw-theme" mdw-surface="card" value="warn">Warn</option>
-            <option class="mdw-theme" mdw-surface="card" value="amber">Amber</option>
-            <option class="mdw-theme" mdw-surface="card" value="blue">Blue</option>
-            <option class="mdw-theme" mdw-surface="card" value="cyan">Cyan</option>
-            <option class="mdw-theme" mdw-surface="card" value="red">Red</option>
-            <option class="mdw-theme" mdw-surface="card" value="green">Green</option>
-            <option class="mdw-theme" mdw-surface="card" value="deeppurple">Deeppurple</option>
-            <option class="mdw-theme" mdw-surface="card" value="purple">Purple</option>
-            <option class="mdw-theme" mdw-surface="card" value="yellow">Yellow</option>
-            <option class="mdw-theme" mdw-surface="card" value="teal">Teal</option>
-          </select>
-          <div class="mdw-textfield__icon" mdw-dropdown></div>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Color</div>
-            </div>
-          </div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
-          <select class="mdw-textfield__input" name="ink-tone">
-            <option class="mdw-theme" mdw-surface="card" value="">Auto</option>
-            <option class="mdw-theme" mdw-surface="card" value="light">Light</option>
-            <option class="mdw-theme" mdw-surface="card" value="contrast" auto>Contrast</option>
-            <option class="mdw-theme" mdw-surface="card" value="A100">A100</option>
-            <option class="mdw-theme" mdw-surface="card" value="A200">A200</option>
-            <option class="mdw-theme" mdw-surface="card" value="A400">A400</option>
-            <option class="mdw-theme" mdw-surface="card" value="A700">A700</option>
-          </select>
-          <div class="mdw-textfield__icon" mdw-dropdown></div>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Tone</div>
-            </div>
-          </div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
-          <select class="mdw-textfield__input" name="ink-opacity">
-            <option class="mdw-theme" mdw-surface="card" value="" selected>Auto</option>
-            <option class="mdw-theme" mdw-surface="card" value="solid">Solid</option>
-            <option class="mdw-theme" mdw-surface="card" value="high">High</option>
-            <option class="mdw-theme" mdw-surface="card" value="medium">Medium</option>
-            <option class="mdw-theme" mdw-surface="card" value="inactive">Inactive</option>
-            <option class="mdw-theme" mdw-surface="card" value="divider">Divider</option>
-          </select>
-          <div class="mdw-textfield__icon" mdw-dropdown></div>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Opacity</div>
-            </div>
-          </div>
-        </label>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="2">
-    <div class="mdw-grid__content">
-      <div class="mdw-type" mdw-style="subtitle">Surface</div>
-      <div id="color-page-options">
-        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
-          <select class="mdw-textfield__input" name="surface-color">
-            <option class="mdw-theme" mdw-surface="card" value="card">Card</option>
-            <option class="mdw-theme" mdw-surface="card" value="binary" selected>Binary</option>
-            <option class="mdw-theme" mdw-surface="card" value="black">Black</option>
-            <option class="mdw-theme" mdw-surface="card" value="white">White</option>
-            <option class="mdw-theme" mdw-surface="card" value="background">Background</option>
-            <option class="mdw-theme" mdw-surface="card" value="primary">Primary</option>
-            <option class="mdw-theme" mdw-surface="card" value="secondary">Secondary</option>
-            <option class="mdw-theme" mdw-surface="card" value="warn">Warn</option>
-            <option class="mdw-theme" mdw-surface="card" value="amber">Amber</option>
-            <option class="mdw-theme" mdw-surface="card" value="blue">Blue</option>
-            <option class="mdw-theme" mdw-surface="card" value="cyan">Cyan</option>
-            <option class="mdw-theme" mdw-surface="card" value="red">Red</option>
-            <option class="mdw-theme" mdw-surface="card" value="green">Green</option>
-            <option class="mdw-theme" mdw-surface="card" value="deeppurple">Deeppurple</option>
-            <option class="mdw-theme" mdw-surface="card" value="purple">Purple</option>
-            <option class="mdw-theme" mdw-surface="card" value="yellow">Yellow</option>
-            <option class="mdw-theme" mdw-surface="card" value="teal">Teal</option>
-          </select>
-          <div class="mdw-textfield__icon" mdw-dropdown></div>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Color</div>
-            </div>
-          </div>
-        </label>
-        <label class="mdw-textfield mdw-theme" mdw-ink="secondary" mdw-outlined>
-          <select class="mdw-textfield__input" name="surface-tone">
-            <option class="mdw-theme" mdw-surface="card" value="" selected>Default</option>
-            <option class="mdw-theme" mdw-surface="card" value="alt">Alternate</option>
-            <option class="mdw-theme" mdw-surface="card" value="50">50</option>
-            <option class="mdw-theme" mdw-surface="card" value="100">100</option>
-            <option class="mdw-theme" mdw-surface="card" value="200">200</option>
-            <option class="mdw-theme" mdw-surface="card" value="300">300</option>
-            <option class="mdw-theme" mdw-surface="card" value="400">400</option>
-            <option class="mdw-theme" mdw-surface="card" value="500">500</option>
-            <option class="mdw-theme" mdw-surface="card" value="600">600</option>
-            <option class="mdw-theme" mdw-surface="card" value="700">700</option>
-            <option class="mdw-theme" mdw-surface="card" value="800">800</option>
-            <option class="mdw-theme" mdw-surface="card" value="900">900</option>
-          </select>
-          <div class="mdw-textfield__icon" mdw-dropdown></div>
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Tone</div>
-            </div>
-          </div>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
-<script src="color.min.js"></script>