@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/Icon.js

@@ -2,10 +2,7 @@
 
 import CustomElement from '../core/CustomElement.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
-
-/** @type {Map<string, {path:string, viewBox:string}>} */
-const svgAliasMap = new Map();
-const unaliased = new Set();
+import { svgAliasMap, unaliased } from '../services/svgAlias.js';
 
 const documentLoadedStyleSheets = new Set();
 
@@ -13,10 +10,10 @@ const documentLoadedStyleSheets = new Set();
 
 // https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement
 
-/** @implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>} */
-export default class Icon extends CustomElement
-  .mixin(ThemableMixin)
+/** -implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>} */
+export default CustomElement
   .extend()
+  .mixin(ThemableMixin)
   .define({
     _img() { return /** @type {HTMLImageElement} */ (this.refs.img); },
   })
@@ -30,7 +27,7 @@ export default class Icon extends CustomElement
     decode() { return this._img.decode; },
   })
   .observe({
-    _slottedText: 'string',
+    icon: 'string',
     disabled: 'boolean',
     alt: 'string',
     src: 'string',
@@ -38,6 +35,7 @@ export default class Icon extends CustomElement
     svgPath: 'string',
     srcset: 'string',
     sizes: 'string',
+    variation: 'string',
     crossOrigin: { attr: 'crossorigin' },
     useMap: { attr: 'usemap' },
     isMap: { type: 'boolean', attr: 'ismap' },
@@ -48,21 +46,31 @@ export default class Icon extends CustomElement
     height: 'integer',
     forceFont: 'boolean',
     _linkLoaded: 'boolean',
-    viewBox: { attr: 'viewBox' },
+    viewBox: 'string',
     fontClass: { empty: 'material-symbols-outlined' },
     fontLibrary: { empty: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&display=block' },
+    _isConnected: 'boolean',
   })
   .observe({
     _svgAlias: {
       type: 'object',
-      get({ _slottedText }) {
-        if (!_slottedText) return null;
-        const result = svgAliasMap.get(_slottedText.trim().toLowerCase());
-        if (!result) {
-          unaliased.add(_slottedText);
-          console.warn(`Icon: No SVG alias for ${JSON.stringify([...unaliased])}`);
+      get({ icon, variation }) {
+        if (!icon) return null;
+        const iconName = icon.trim().toLowerCase();
+        const suffix = variation ? `#${variation}` : '';
+
+        const aliasName = `${iconName}${suffix}`;
+        if (svgAliasMap.has(aliasName)) {
+          return svgAliasMap.get(aliasName);
         }
-        return result;
+        unaliased.add(aliasName);
+
+        // Fallback to base version
+        if (suffix && svgAliasMap.has(iconName)) {
+          return svgAliasMap.get(iconName);
+        }
+
+        return null;
       },
     },
   })
@@ -75,10 +83,10 @@ export default class Icon extends CustomElement
     },
   })
   .observe({
-    _showSlot: {
+    _showFontIcon: {
       type: 'boolean',
-      get({ _slottedText, svg, _computedSVGPath, src }) {
-        return _slottedText && !svg && !_computedSVGPath && !src;
+      get({ icon, svg, _computedSVGPath, src }) {
+        return icon && !svg && !_computedSVGPath && !src;
       },
     },
   })
@@ -88,26 +96,25 @@ export default class Icon extends CustomElement
     },
 
   })
-  .html/* html */`
-    <link _if={_showSlot} id=link rel=stylesheet href={fontLibrary} />
-    <svg _if="{showSVG}" id="svg" viewBox="{_computedViewBox}">
-      <use id="use" _if="{svg}" href="{svg}" fill="currentColor"/>
-      <path id="path" _if="{_computedSVGPath}" d="{_computedSVGPath}"/>
+  .html`
+    <link mdw-if={_showFontIcon} id=link rel=stylesheet href={fontLibrary} />
+    <svg mdw-if="{showSVG}" id="svg" viewBox="{_computedViewBox}">
+      <use id="use" mdw-if="{svg}" href="{svg}" fill="currentColor"/>
+      <path id="path" mdw-if="{_computedSVGPath}" d="{_computedSVGPath}"/>
     </svg>
-    <img _if={src} id=img
+    <img mdw-if={src} id=img
       disabled={disabled}
       alt={alt} src={src} srcset={srcset} sizes={sizes}
       crossorigin={crossOrigin} usemap={useMap} ismap={isMap}
       referrerpolicy={referrerPolicy} decoding={decoding} loading={loading}
       width={width} height={height}
     />
-    <slot id=icon class={fontClass} hidden={!_showSlot} aria-hidden=true></slot>
+    <span id=icon class={fontClass} hidden={!_showFontIcon} aria-hidden=true>{icon}</span>
   `
   .css`
     /* https://material.io/design/iconography/system-icons.html */
 
     :host {
-      display: inline-block;
       vertical-align: -11.5%;
 
       block-size: 1em;
@@ -116,20 +123,25 @@ export default class Icon extends CustomElement
       -webkit-user-select: none;
       user-select: none;
 
-      font-variation-settings: 'FILL' 1;
+      line-height: 1;
+
+      font-variation-settings: 'FILL' 0;
 
       transition-duration: 200ms;
       /* stylelint-disable-next-line liberty/use-logical-spec -- Safari does not animate inline-size */
       transition-property: inline-size, width;
     }
 
+    :host([variation="fill"]) {
+      font-variation-settings: 'FILL' 1;
+    }
+
     :host(:is([color],[ink])) {
       color: rgb(var(--mdw-ink));
     }
 
     #icon {
       /* Clip bounds in case font is not ready */
-      display: block;
       overflow: clip;
 
       block-size: 1em;
@@ -149,8 +161,6 @@ export default class Icon extends CustomElement
     }
 
     #svg {
-      display: block;
-
       block-size: inherit;
       inline-size: inherit;
 
@@ -160,8 +170,6 @@ export default class Icon extends CustomElement
     }
 
     #img {
-      display: block;
-
       block-size: inherit;
       inline-size: inherit;
 
@@ -183,11 +191,6 @@ export default class Icon extends CustomElement
 
   `
   .childEvents({
-    icon: {
-      slotchange() {
-        this._slottedText = this.textContent;
-      },
-    },
     link: {
       /**
        * @param {{currentTarget: HTMLLinkElement}} event
@@ -199,52 +202,34 @@ export default class Icon extends CustomElement
           console.warn('Icon: parentNode is blank');
         }
         if (documentLoadedStyleSheets.has(href)) return;
-        console.debug('Icon: Checking if link also in document', href);
+        // console.debug('Icon: Checking if link also in document', href);
         for (const link of document.head.getElementsByTagName('link')) {
           if (link.href === href) {
-            console.debug(`Icon: Found ${href} in document.`);
+            // console.debug(`Icon: Found ${href} in document.`);
             documentLoadedStyleSheets.add(href);
             return;
           }
         }
-        console.debug(`Icon: Adding ${href} to document.`);
+        // console.debug(`Icon: Adding ${href} to document.`);
         document.head.append(currentTarget.cloneNode());
         documentLoadedStyleSheets.add(href);
       },
     },
-  }) {
-  static get svgAliasMap() { return svgAliasMap; }
-
-  static get svgUnaliased() { return unaliased; }
-
-  /**
-   * @param {string} name
-   * @param {string} path
-   * @param {string} [viewBox]
-   */
-  static addSVGAlias(name, path, viewBox = '0 0 24 24') {
-    name = name.toLowerCase();
-    if (path) {
-      svgAliasMap.set(name, { path, viewBox });
-    } else {
-      svgAliasMap.delete(name);
-    }
-  }
-
-  /**
-   * @param {number} [width]
-   * @param {number} [height]
-   */
-  constructor(width, height) {
-    super();
-
-    if (width != null) {
-      this.width = width;
-    }
-    if (height != null) {
-      this.height = height;
+  })
+  .extend((BaseClass) => class extends BaseClass {
+    /**
+     * @param {number} [width]
+     * @param {number} [height]
+     */
+    constructor(width, height) {
+      super();
+
+      if (width != null) {
+        this.width = width;
+      }
+      if (height != null) {
+        this.height = height;
+      }
     }
-  }
-}
-
-Icon.autoRegister('mdw-icon');
+  })
+  .autoRegister('mdw-icon');

package/components/IconButton.js

@@ -1,27 +1,38 @@
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
 import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 
 import Button from './Button.js';
 
+/* https://m3.material.io/components/icon-buttons/specs */
+
 export default Button
-  .mixin(TooltipTriggerMixin)
   .extend()
+  .mixin(TooltipTriggerMixin)
+  .set({
+    _allowedTypes: ['button', 'submit', 'reset', 'checkbox', 'file'],
+  })
   .observe({
     _ariaPressed: {
-      get({ type, checked }) {
+      get({ type, checked, indeterminate }) {
         if (type !== 'checkbox') return null;
-        return checked ? 'true' : 'false';
+        return indeterminate ? 'mixed' : (checked ? 'true' : 'false');
       },
     },
+    _isToggle({ type }) {
+      return type === 'checkbox';
+    },
+    autoTooltip: { empty: true },
   })
   .expressions({
-    isToggle({ type }) {
-      return type === 'checkbox';
+    iconVariation({ checked, outlined, _isToggle }) {
+      if (!checked && (_isToggle || outlined)) return null;
+      return 'filled';
     },
   })
   .childEvents({
     control: {
       keydown(event) {
-        if (event.key !== 'Enter') return;
+        if (event.key !== 'Enter' && event.key !== ' ') return;
         const input = /** @type {HTMLInputElement} */ (event.currentTarget);
         if (input.type !== 'checkbox') return;
         event.stopImmediatePropagation();
@@ -29,40 +40,46 @@ export default Button
         event.preventDefault();
         if (input.disabled) return;
 
-        // Simulate click
-        const clickEvent = new Event('click', { bubbles: true, cancelable: true, composed: true });
-        if (!input.dispatchEvent(clickEvent)) return;
-
-        // Toggle check and signal
-        input.checked = !input.checked;
-        input.dispatchEvent(new Event('change', { bubbles: true }));
+        input.click();
       },
     },
   })
-  .on({
-    composed() {
-      const { slot, shape, tooltipSlot, icon, label, surfaceTint, control, outline } = this.refs;
-      shape.classList.add('colored');
-      label.classList.add('colored');
-      for (const el of [shape, label, icon]) {
-        el.setAttribute('toggle', '{isToggle}');
-        el.setAttribute('selected', '{checked}');
-      }
-      slot.remove();
-      icon.removeAttribute('_if');
-      tooltipSlot.removeAttribute('name');
-
-      surfaceTint.remove();
-
-      control.setAttribute('aria-pressed', '{_ariaPressed}');
-      control.setAttribute('aria-labelledby', 'tooltip');
-
-      outline.setAttribute('selected', '{checked}');
+  .recompose(({ refs: { icon, control, outline } }) => {
+    icon.removeAttribute('mdw-if');
+
+    control.setAttribute('aria-pressed', '{_ariaPressed}');
+
+    outline.setAttribute('toggle', '{_isToggle}');
+    outline.setAttribute('selected', '{checked}');
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ checked, disabled, filled, outlined, _isToggle }) {
+        if (!_isToggle) return null;
+        if (disabled) return null;
+        if (outlined) {
+          if (checked) {
+            return {
+              backgroundColor: 'rgb(var(--mdw-bg))',
+            };
+          }
+          return {
+            color: 'rgb(var(--mdw-color__on-surface-variant))',
+          };
+        }
+        if (checked) return null; // All else uses checked state
+        if (filled == null) return null;
+        return {
+          backgroundColor: 'rgb(var(--mdw-color__surface-container-highest))',
+          color: filled === 'tonal'
+            ? 'rgb(var(--mdw-color__on-surface-variant))'
+            : 'rgb(var(--mdw-bg))',
+        };
+      },
     },
   })
   .css`
-    /* https://m3.material.io/components/icon-buttons/specs */
-
     :host {
       --mdw-shape__size: var(--mdw-shape__full);
       --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
@@ -70,11 +87,14 @@ export default Button
       align-items: center;
       justify-content: center;
 
-      padding: max(8px, calc(8px + (var(--mdw-density) * 2px)));
+      min-block-size: 1em;
+      min-inline-size: 1em;
 
-      background-color: transparent;
+      padding: max(8px, calc(8px + (var(--mdw-density) * 2px)));
 
       font-size: 24px;
+
+      transition-property: background-color, box-shadow;
     }
 
     :host(:where([type="checkbox"])) {
@@ -85,8 +105,6 @@ export default Button
     :host(:where([filled])) {
       --mdw-ink: var(--mdw-color__on-primary);
       --mdw-bg: var(--mdw-color__primary);
-      --mdw-surface__shadow__resting: none;
-      --mdw-surface__shadow__raised: none;
     }
 
     /** Tonal | Tonal Checked */
@@ -98,6 +116,7 @@ export default Button
     /** Outlined | Outlined Unchecked */
     :host(:where([outlined])) {
       --mdw-ink: var(--mdw-color__on-surface-variant);
+      background-color: transparent;
     }
 
     /** Outlined | Outlined Unchecked */
@@ -106,83 +125,23 @@ export default Button
       --mdw-ink: var(--mdw-color__inverse-on-surface);
     }
 
-    #label {
-      font-size: inherit;
-      letter-spacing: inherit;
-    }
-
-    #shape[toggle] {
-      background-color: transparent;
-    }
-
-    .colored[toggle] {
-      color: rgb(var(--mdw-color__on-surface-variant));
-    }
-
-    .colored[selected] {
-      /* background-color: rgb(var(--mdw-bg)); */
-      color: rgb(var(--mdw-ink));
-    }
-
-    #shape[filled][toggle] {
-      background-color: rgb(var(--mdw-color__surface-variant));
-    }
-
-    .colored[filled][toggle] {
-      color: rgb(var(--mdw-bg));
-    }
-
-    #shape[filled="tonal"][toggle] {
-      background-color: rgb(var(--mdw-color__surface-variant));
-    }
-
-    .colored[filled="tonal"][toggle] {
-      color: rgb(var(--mdw-color__on-surface-variant));
-    }
-
-    #shape[filled][selected] {
-      background-color: rgb(var(--mdw-bg));
-    }
-
-    .colored[filled][selected] {
-      color: rgb(var(--mdw-ink));
-    }
-
-    #shape[outlined] {
-      background-color: transparent;
-    }
-
-    .colored[outlined] {
-      color: inherit;
-    }
-
-    #shape[outlined][toggle] {
-      background-color: transparent;
-    }
-
-    .colored[outlined][toggle] {
-      color: rgb(var(--mdw-color__on-surface-variant));
-    }
-
-    #shape[outlined][selected] {
-      background-color: rgb(var(--mdw-bg));
-    }
-
-    .colored[outlined][selected] {
-      color: rgb(var(--mdw-ink));
-    }
+    #slot { display: none; }
 
     #icon {
+      pointer-events: none;
+
       font-size: inherit;
-      font-variation-settings: 'FILL' 1;
+
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      transition-property: color, inline-size, width;
     }
 
-    #icon[toggle] {
-      font-variation-settings: 'FILL' 0;
+    #state {
+      z-index:1;
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
+    #ripple-container {
+      z-index:2;
     }
 
     #outline[focused] {
@@ -190,26 +149,13 @@ export default Button
 
       color: inherit;
     }
-
-    #outline[selected] {
-      opacity: 0;
-    }
-
-    /** Disabled */
-    .colored[disabled] {
-      cursor: not-allowed;
-
-      color: rgba(var(--mdw-color__on-surface), 0.38);
-    }
-
-    #shape[disabled][filled],
-    #shape[disabled][outlined][selected] {
-      background-color: rgba(var(--mdw-color__on-surface), 0.12);
+    
+    #outline[focused][toggle] {
+      color: rgb(var(--mdw-color__outline));
     }
 
-    .colored[disabled][filled],
-    .colored[disabled][outlined][selected] {
-      color: rgba(var(--mdw-color__on-surface), 0.38);
+    #outline[selected]:not([disabled]) {
+      opacity: 0;
     }
 
   `