@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/Grid.js

@@ -0,0 +1,176 @@
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+
+import Box from './Box.js';
+
+export default Box
+  .extend()
+  .mixin(ResizeObserverMixin)
+  .observe({
+    grid: 'boolean',
+    columns: 'integer',
+    _autoColumns: {
+      type: 'integer',
+      empty: 4,
+    },
+    _lastInlineSize: 'float',
+  })
+  .observe({
+    _resizeObserverEnabled: {
+      type: 'boolean',
+      get({ columns }) {
+        // Only use resize observer if using grid, not explicit columns
+        // and CSS containers are not supported.
+        return !columns;
+      },
+    },
+    _computedColumns({ columns, _autoColumns }) {
+      if (columns) return columns;
+      if (_autoColumns) return _autoColumns;
+      return 4;
+    },
+  })
+  .overrides({
+    onResizeObserved(entry) {
+      const { contentBoxSize } = entry;
+      if (!contentBoxSize.length) return;
+      const [{ inlineSize }] = contentBoxSize;
+      this._lastInlineSize = inlineSize;
+    },
+  })
+  .on({
+    _lastInlineSizeChanged(oldValue, inlineSize) {
+      if (inlineSize >= 840) {
+        this._autoColumns = 12;
+      } else if (inlineSize >= 600) {
+        this._autoColumns = 8;
+      } else {
+        this._autoColumns = 4;
+      }
+    },
+    connected() {
+      this._lastInlineSize = this.clientWidth;
+    },
+  })
+  .expressions({
+    _isFlex({ block, grid }) {
+      return !block && !grid;
+    },
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ _computedColumns }) {
+        if ((_computedColumns || 4) === 4) return '';
+        return { gridTemplateColumns: `repeat(${_computedColumns},1fr)` };
+      },
+    },
+  })
+  .recompose(({ refs: { slot } }) => {
+    slot.setAttribute('grid', '{grid}');
+    slot.setAttribute('flex', '{_isFlex}');
+    slot.setAttribute('columns', '{_computedColumns}');
+  })
+  .css`
+    :host {
+      display: grid;
+      column-gap: 16px; /* Gutters */
+      grid-auto-flow: row;
+      grid-template-columns: repeat(1fr, 4);
+    }
+
+    :host([y="start"]) { align-items: flex-start; }
+    :host([y="end"]) { align-items: flex-end; }
+    :host([y="center"]) { align-items: center; }
+    :host([y="between"]) { align-items: space-between; }
+    :host([y="around"]) { align-items: space-around; }
+    :host([y="stretch"]) { align-items: stretch; }
+    :host([x="start"]) { justify-content: flex-start; }
+    :host([x="end"]) { justify-content: flex-end; }
+    :host([x="center"]) { justify-content: center; }
+    :host([x="between"]) { justify-content: space-between; }
+    :host([x="stretch"]) { justify-content: stretch; }
+
+    #slot {
+      --mdw-grid__columns: 4;
+      --mdw-grid__columns__4: 1;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="4"] {
+      --mdw-grid__columns: 4;
+      --mdw-grid__columns__4: 1;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="8"] {
+      --mdw-grid__columns: 8;
+      --mdw-grid__columns__4: 0;
+      --mdw-grid__columns__8: 1;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="12"] {
+      --mdw-grid__columns: 12;
+      --mdw-grid__columns__4: 0;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 1;
+    }
+
+    ::slotted(*) {
+      --mdw-grid__column-count: var(--mdw-grid__columns);
+      --mdw-grid__column-count__4: var(--mdw-grid__column-count);
+      --mdw-grid__column-count__8: var(--mdw-grid__column-count);
+      --mdw-grid__column-count__12: var(--mdw-grid__column-count);
+      grid-column: auto / span calc(
+        (min(var(--mdw-grid__column-count__4), 4) * var(--mdw-grid__columns__4))
+        + (min(var(--mdw-grid__column-count__8), 8) * var(--mdw-grid__columns__8))
+        + (min(var(--mdw-grid__column-count__12), 12) * var(--mdw-grid__columns__12))
+      );
+    }
+    ::slotted([col-span="1"]) { --mdw-grid__column-count: 1; }
+    ::slotted([col-span="2"]) { --mdw-grid__column-count: 2; }
+    ::slotted([col-span="3"]) { --mdw-grid__column-count: 3; }
+    ::slotted([col-span="4"]) { --mdw-grid__column-count: 4; }
+    ::slotted([col-span="5"]) { --mdw-grid__column-count: 5; }
+    ::slotted([col-span="6"]) { --mdw-grid__column-count: 6; }
+    ::slotted([col-span="7"]) { --mdw-grid__column-count: 7; }
+    ::slotted([col-span="8"]) { --mdw-grid__column-count: 8; }
+    ::slotted([col-span="9"]) { --mdw-grid__column-count: 9; }
+    ::slotted([col-span="10"]) { --mdw-grid__column-count: 10; }
+    ::slotted([col-span="11"]) { --mdw-grid__column-count: 11; }
+    ::slotted([col-span="12"]) { --mdw-grid__column-count: 12; }
+    
+    ::slotted([col-span="25%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns) / 4); }
+    ::slotted([col-span="50%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns) / 2); }
+    ::slotted([col-span="100%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns)); }
+
+    ::slotted([col-span-4="1"]) { --mdw-grid__column-count__4: 1; }
+    ::slotted([col-span-4="2"]) { --mdw-grid__column-count__4: 2; }
+    ::slotted([col-span-4="3"]) { --mdw-grid__column-count__4: 3; }
+    ::slotted([col-span-4="4"]) { --mdw-grid__column-count__4: 4; }
+    ::slotted([col-span-8="1"]) { --mdw-grid__column-count__8: 1; }
+    ::slotted([col-span-8="2"]) { --mdw-grid__column-count__8: 2; }
+    ::slotted([col-span-8="3"]) { --mdw-grid__column-count__8: 3; }
+    ::slotted([col-span-8="4"]) { --mdw-grid__column-count__8: 4; }
+    ::slotted([col-span-8="5"]) { --mdw-grid__column-count__8: 5; }
+    ::slotted([col-span-8="6"]) { --mdw-grid__column-count__8: 6; }
+    ::slotted([col-span-8="7"]) { --mdw-grid__column-count__8: 7; }
+    ::slotted([col-span-8="8"]) { --mdw-grid__column-count__8: 8; }
+    ::slotted([col-span-12="1"]) { --mdw-grid__column-count__12: 1; }
+    ::slotted([col-span-12="2"]) { --mdw-grid__column-count__12: 2; }
+    ::slotted([col-span-12="3"]) { --mdw-grid__column-count__12: 3; }
+    ::slotted([col-span-12="4"]) { --mdw-grid__column-count__12: 4; }
+    ::slotted([col-span-12="5"]) { --mdw-grid__column-count__12: 5; }
+    ::slotted([col-span-12="6"]) { --mdw-grid__column-count__12: 6; }
+    ::slotted([col-span-12="7"]) { --mdw-grid__column-count__12: 7; }
+    ::slotted([col-span-12="8"]) { --mdw-grid__column-count__12: 8; }
+    ::slotted([col-span-12="9"]) { --mdw-grid__column-count__12: 9; }
+    ::slotted([col-span-12="10"]) { --mdw-grid__column-count__12: 10; }
+    ::slotted([col-span-12="11"]) { --mdw-grid__column-count__12: 11; }
+    ::slotted([col-span-12="12"]) { --mdw-grid__column-count__12: 12; }
+
+  `
+  .autoRegister('mdw-grid');

package/components/Headline.js

@@ -1,32 +1,9 @@
-import ThemableMixin from '../mixins/ThemableMixin.js';
+import Display from './Display.js';
 
-import Box from './Box.js';
-
-export default Box
+export default Display
   .extend()
-  .mixin(ThemableMixin)
-  .observe({
-    ariaLevel: 'string',
-    size: {
-      type: 'string',
-      /** @type {'large'|'medium'|'small'} */
-      empty: 'large',
-    },
-  })
-  .expressions({
-    computeAriaLevel({ ariaLevel, size }) {
-      if (ariaLevel) return ariaLevel;
-      if (size === 'medium') return '2';
-      if (size === 'small') return '3';
-      return '1';
-    },
-  })
-  .on({
-    composed() {
-      const { slot } = this.refs;
-      slot.setAttribute('role', 'heading');
-      slot.setAttribute('aria-level', '{computeAriaLevel}');
-    },
+  .set({
+    _baseAriaLevel: 4,
   })
   .css`
     :host {
@@ -42,6 +19,6 @@ export default Box
     :host([size="small"]) {
       font: var(--mdw-typescale__headline-small__font);
       letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
-    }  
+    }
   `
   .autoRegister('mdw-headline');

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,8 +10,8 @@ const documentLoadedStyleSheets = new Set();
 
 // https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement
 
-/** @implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>} */
-export default class Icon extends CustomElement
+/** -implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>} */
+export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .define({
@@ -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' },
@@ -51,18 +49,28 @@ export default class Icon extends CustomElement
     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);
+        }
+        unaliased.add(aliasName);
+
+        // Fallback to base version
+        if (suffix && svgAliasMap.has(iconName)) {
+          return svgAliasMap.get(iconName);
         }
-        return result;
+
+        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;
       },
     },
   })
@@ -89,7 +97,7 @@ export default class Icon extends CustomElement
 
   })
   .html`
-    <link mdw-if={_showSlot} id=link rel=stylesheet href={fontLibrary} />
+    <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}"/>
@@ -101,13 +109,12 @@ export default class Icon extends CustomElement
       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');