u2ui 1.0.1 → 1.4.5

package/el/ico/ico.css

@@ -1,111 +1,123 @@
-html {
-    --u2-ico-font:'Segoe UI Symbol', 'Noto Emoji', sans-serif; /* noto on linux? */
-    /* --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg'; */
-}
-
-u2-ico {
-    font-weight: normal;
-    font-style: normal;
-    line-height: 1;
-    --line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    overflow-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    -webkit-font-smoothing: antialiased; /* all WebKit browsers. */
-    text-rendering: optimizeLegibility; /* Safari and Chrome. */
-    -moz-osx-font-smoothing: grayscale; /* Firefox. */
-    font-feature-settings: 'liga'; /* IE only? */
-    font-family: var(--u2-ico-font) !important;
-
-    fill:currentColor; /* for svg, dont use `u2-ico > svg { fill:currentColor }` because it can have the attribute fill="none" */
-
-    /* ok? */
-    xdisplay: inline-block; /* inline-flex has an other baseline? */
-    text-align:center;
-    vertical-align:middle;
-    --size: 1.5rem; /* 24px Preferred icon size, material-icons */
-    font-size: var(--size);
-    /* overflow:hidden
-    + prevents layout-shift on font load.
-    - But baseline gets to the box instead of the text.
-    - Some Icons on some Fonts may get cuted!
-    */
-}
-u2-ico:not([hidden]) { display: inline-block; }
-u2-ico[icon]:empty:before { /* todo if supported: :where([icon]::before) { */
-    content:attr(icon);
-}
-
-
-
-/* inline */
-u2-ico[inline] {
-    overflow:visible;
-    --size:1.2em;
-    /*
-    best option?:
-    centering using font-relative units
-    1ex support: good
-    1cap support: only firefox
-    https://codepen.io/kizu/pen/dyeXPJP?editors=1100
-    */
-    vertical-align: -11%;
-    /* display: contents; todo? */
-    /* margin:auto;  todo: dont stretch if its a flex-item? */
-}
-
-/* direct svg and js-loaded */
-u2-ico > svg {
-    vertical-align:bottom;
-    height:1em;
-    width:auto;
-    min-width:1em;
-    overflow:visible;
-    margin:auto;
-}
-u2-ico path[fill]:not([fill=none]) { fill:currentColor; }
-u2-ico path[stroke]:not([stroke=none]) { stroke: currentColor; }
-
-
-/* dir-variant */
-u2-ico[state] {
-    &::before {
-        display:none;
-    }
-    &[state="loading"] {
-        xvisibility:hidden;
-        overflow: clip;
-        width:1em;
-    }
-    &[state="fail"] {
-        font-size: 0.8em;
-        width: auto;
-        ::before {
-            display:block;
-        }
-    }
-}
-u2-ico:empty:not([icon])::before {
-    content: '⚠️';
-}
-
-/*
-u2-ico[state]:not([state=loaded]) {
-    overflow:clip;
-    width: 1em;
-    height: 1em;
-}
-u2-ico[state]:before {
-    display:none;
-}
-u2-ico[state=fail]:before {
-    display:block;
-}
-u2-ico[state="fail"]:is([state="fail"]) {
-    font-size: 0.8em;
-    overflow: visible;
-    width: auto;
-}
+html {
+    --u2-ico-font:'Segoe UI Symbol', 'Noto Emoji', sans-serif; /* noto on linux? */
+    --u2-ico-dir-material: 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg';
+    --u2-ico-dir-material-host: var(--u2-ico-dir-material);
+}
+:host { /* If used in a shadow host, inherit Material or define a new one. */
+    --u2-ico-dir-material: var(--u2-ico-dir-material-host, 'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg');
+}
+u2-ico {
+    --size: 1.5rem; /* 24px Preferred icon size, material-icons */
+    font-size: var(--size);
+    line-height: 1;
+    --line-height: 1;
+
+    /* ok? */
+    text-align:center;
+    vertical-align:middle;
+    /* overflow:hidden
+    + prevents layout-shift on font load.
+    - But baseline gets to the box instead of the text.
+    - Some Icons on some Fonts may get cuted!
+    */
+
+    /* svg */
+    fill:currentColor; /* for svg, dont use `u2-ico > svg { fill:currentColor }` because it can have the attribute fill="none" */
+
+    /* icon-fonts */
+    font-weight: normal;
+    font-style: normal;
+    text-transform: none;
+    letter-spacing: normal;
+    overflow-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased; /* all WebKit browsers. */
+    text-rendering: optimizeLegibility; /* Safari and Chrome. */
+    -moz-osx-font-smoothing: grayscale; /* Firefox. */
+    font-feature-settings: 'liga'; /* IE only? */
+    font-family: var(--u2-ico-font) !important;
+
+    /* utf-8 */
+    font-variant-emoji: text;       /* chrome-131, ff-141 */
+
+}
+u2-ico:not([hidden]) { display: inline-block; }
+u2-ico[icon]:empty:before { /* todo if supported: :where([icon]::before) { */
+    content:attr(icon);
+}
+
+
+
+/* inline */
+u2-ico[inline] {
+    overflow:visible;
+    --size:1.2em;
+    /*
+    best option?:
+    centering using font-relative units
+    1ex support: good
+    1cap support: only firefox
+    https://codepen.io/kizu/pen/dyeXPJP?editors=1100
+    */
+    vertical-align: -11%;
+    /* display: contents; todo? */
+    /* margin:auto;  todo: dont stretch if its a flex-item? */
+}
+
+/* SVG */
+u2-ico > svg {
+    vertical-align:bottom;
+    height:1em;
+    width:auto;
+    min-width:1em;
+    overflow:visible;
+    margin:auto;
+}
+u2-ico [fill]:not([fill=none]) { fill:currentColor; }
+u2-ico [stroke]:not([stroke=none]) { stroke: currentColor; }
+/* zzz, was:
+u2-ico path[fill]:not([fill=none]) { fill:currentColor; }
+u2-ico path[stroke]:not([stroke=none]) { stroke: currentColor; }
+*/
+
+
+/* SVG load (dir-variant) */
+u2-ico[state] {
+    &::before {
+        display:none;
+    }
+    &[state="loading"] {
+        overflow: clip;
+        width:1em;
+    }
+    &[state="fail"] {
+        font-size: 0.8em;
+        width: auto;
+        ::before {
+            display:block;
+        }
+    }
+}
+u2-ico:empty:not([icon])::before {
+    content: '⚠️';
+}
+
+/*
+u2-ico[state]:not([state=loaded]) {
+    overflow:clip;
+    width: 1em;
+    height: 1em;
+}
+u2-ico[state]:before {
+    display:none;
+}
+u2-ico[state=fail]:before {
+    display:block;
+}
+u2-ico[state="fail"]:is([state="fail"]) {
+    font-size: 0.8em;
+    overflow: visible;
+    width: auto;
+}
 */

package/el/ico/ico.js

@@ -1,189 +1,163 @@
-// icons from directory
-// [u2-ico] {
-//     --u2-ico-dir:'https://cdn.jsdelivr.net/npm/teenyicons@0.4.1/outline/x-{icon-name}.svg';
-// }
-
-
-/*
-const observeStyle = (
-	target,
-	property,
-	callback,
-	initialValue = ''
-) => {
-	let frameId, value
-	const css = getComputedStyle(target)
-	const observer = () => {
-		frameId = requestAnimationFrame(observer)
-		value = css.getPropertyValue(property).trim()
-		if (value !== initialValue) {
-			callback(initialValue = value);
-		}
-	}
-	observer()
-	return () => cancelAnimationFrame(frameId)
-}
-*/
-
-const uIco = class extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-
-        // observeStyle(this, '--u2-ico-dir', dir => {
-        //     this._handleIcon();
-        // });
-
-        if (this.firstElementChild) return; // skip if not text-only
-        if (!this.hasAttribute('icon')) {
-            const inner = this.textContent.trim();
-            if (inner) {
-                this.setAttribute('icon', inner);
-                this.setAttribute('aria-label', inner);
-            }
-        }
-        this._handleIcon();
-    }
-
-    static observedAttributes = ['icon'];
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        if (name === 'icon') {
-            setTimeout(() => this._handleIcon(),20); // wait for css to be applied
-        }
-    }
-    _handleIcon() {
-        // fetch svg if --ui-ico-directory is set
-        let icoDir = getComputedStyle(this).getPropertyValue('--u2-ico-dir').trim();
-        if (icoDir && this.hasAttribute('icon')) {
-            const dir = icoDir.slice(1, -1);
-            const name = this.getAttribute('icon');
-            const path = dirTemplateToUrl(dir, name);
-
-            requestAnimationFrame(()=>{
-                this.setAttribute('state','loading')
-            });
-
-            const pathStr = path.toString();
-            if (this._lastLoading === pathStr) return; // prevent multiple requests
-            this._lastLoading = pathStr;
-
-            loadSvgString(path).then(svg=>{
-                // if (path.origin !== location.origin) {} todo: sanitize svg
-
-                svg = svg.replace(/<!--.*?-->/gs, ''); // remove comments
-                svg = svg.replace(/<!DOCTYPE.*?>/gs, ''); // remove doctype
-                svg = svg.replace(/<\?xml.*?\?>/gs, ''); // remove xml header
-
-                requestAnimationFrame(()=>{
-                    this.innerHTML = svg; // requestAnimationFrame??
-                    this.querySelectorAll('[id]').forEach(el=>el.removeAttribute('id')); // remove ids
-                    const svgEl = this.firstElementChild;
-                    svgEl.removeAttribute('xmlns');
-                    svgEl.removeAttribute('xmlns:xlink');
-                    svgEl.removeAttribute('version');
-                    svgEl.setAttribute('aria-hidden', 'true');
-                    this.setAttribute('state','loaded');
-    
-                });
-
-                // // store to combine
-                // queueMicrotask(()=>{
-                //     const store = localStorage.getItem('u2-ico-used');
-                //     const icons = store ? JSON.parse(store) : {};
-                //     icons[icoDir] ??= {};
-                //     icons[icoDir][name] = this.innerHTML.trim();
-                //     localStorage.setItem('u2-ico-used', JSON.stringify(icons));
-                // });
-
-            }).catch(err=>{
-                console.error(err, this);
-                this.setAttribute('state','fail');
-            });
-        }
-    }
-        
-
-}
-
-// //combine svgs
-// setTimeout(function(){
-//     const store = localStorage.getItem('u2-ico-used');
-//     if (!store) return;
-//     const icons = JSON.parse(store);
-//     for (const [dir, names] of Object.entries(icons)) {
-//         console.log(`instead of loading from ${dir}, you can generate a local file with to following content and load it like /myFile.txt#{icon}:`);
-//         let content = '<svg><defs>\n\n';
-//         for (let [name, svg] of Object.entries(names)) {
-//             svg = svg.replace(/<svg /, `<svg id="${name}" `);
-//             content += `${svg}\n\n`;
-//         }
-//         content += '\n\n</defs></svg>';
-//         console.log(content);
-//     }
-// },199)
-
-function dirTemplateToUrl(dir, name) {
-    let [prefix, firstWord, between='', nextWord, suffix] = dir.split(/{(icon)([^n]*)?(name)?}/i);
-    if (!suffix) suffix = prefix.includes('#') ? '' : '.svg';
-    if (!nextWord) between = '-'; // if just: {icon}
-
-    // icon naming convertion
-    let fileName = name;
-    const upperFirst = firstWord?.[0] === 'I';
-    const upperWords = nextWord?.[0] === 'N';
-    if (upperFirst) fileName = fileName.replace(/^([a-z])/, g => g[0].toUpperCase()); // first upper
-    if (upperWords) fileName = fileName.replace(/-([a-z])/g, g => g[1].toUpperCase()); // camel-case
-    if (between !== '-') fileName = fileName.replace(/-/g, between);
-
-    return new URL(prefix + fileName + suffix, location.href);
-}
-
-async function loadSvgString(url) {
-    const hash = url.hash.substring(1);
-
-    // internal element
-    if (url.origin === location.origin && url.pathname === location.pathname) { // svg on the same document
-        if (hash) {
-            const element = document.getElementById(hash);
-            if (element) {
-                return element.outerHTML;
-            } else {
-                throw new Error("Element with id " + hash + " not found in the document");
-            }
-        }
-    }
-
-    const svg = await loadCached(url);
-    // temporary cache svg
-    
-    // external element
-    if (hash) { // todo, cache the svgDoc?
-        const parser = new DOMParser();
-        const svgDoc = parser.parseFromString(svg, "image/svg+xml");
-        const element = svgDoc.getElementById(hash);
-        if (element) {
-            return element.outerHTML;
-        } else {
-            throw new Error("Element with id " + hash + " not found in the document");
-        }
-    }
-
-    // external document
-    return svg;
-}
-
-const cachedRequests = {};
-
-async function loadCached(url) {
-    if (cachedRequests[url]) return cachedRequests[url];
-    cachedRequests[url] = fetch(url, {cache: "force-cache"}).then(res => {
-        if (!res.ok) throw new Error(`Failed to fetch icon ${url}: ${res.status} ${res.statusText}`);
-        return res.text();
-    });
-    return cachedRequests[url];
-}
-
-
-customElements.define('u2-ico', uIco);
+// icons from directory
+// [u2-ico] {
+//     --u2-ico-dir:'https://cdn.jsdelivr.net/npm/teenyicons@0.4.1/outline/x-{icon-name}.svg';
+// }
+
+
+/*
+const observeStyle = (
+	target,
+	property,
+	callback,
+	initialValue = ''
+) => {
+	let frameId, value
+	const css = getComputedStyle(target)
+	const observer = () => {
+		frameId = requestAnimationFrame(observer)
+		value = css.getPropertyValue(property).trim()
+		if (value !== initialValue) {
+			callback(initialValue = value);
+		}
+	}
+	observer()
+	return () => cancelAnimationFrame(frameId)
+}
+*/
+
+export default class U2Ico extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+
+        // observeStyle(this, '--u2-ico-dir', dir => {
+        //     this._handleIcon();
+        // });
+
+        if (this.firstElementChild) return; // skip if not text-only
+        if (!this.hasAttribute('icon')) {
+            const inner = this.textContent.trim();
+            if (inner) {
+                this.setAttribute('icon', inner);
+                this.ariaLabel = inner;
+            }
+        }
+        this._handleIcon();
+    }
+
+    static observedAttributes = ['icon'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'icon') {
+            setTimeout(() => this._handleIcon(),20); // wait for css to be applied
+        }
+    }
+    _handleIcon() {
+        // fetch svg if --ui-ico-directory is set
+        let icoDir = getComputedStyle(this).getPropertyValue('--u2-ico-dir').trim();
+        if (icoDir && this.hasAttribute('icon')) {
+            const dir = icoDir.slice(1, -1);
+            const name = this.getAttribute('icon');
+            const path = dirTemplateToUrl(dir, name);
+
+            requestAnimationFrame(()=>{
+                this.setAttribute('state','loading')
+            });
+
+            const pathStr = path.toString();
+            if (this._lastLoading === pathStr) return; // prevent multiple requests
+            this._lastLoading = pathStr;
+
+            loadSvgString(path).then(svg=>{
+                // if (path.origin !== location.origin) {} todo: sanitize svg
+
+                svg = svg.replace(/<!--.*?-->/gs, ''); // remove comments
+                svg = svg.replace(/<!DOCTYPE.*?>/gs, ''); // remove doctype
+                svg = svg.replace(/<\?xml.*?\?>/gs, ''); // remove xml header
+
+                requestAnimationFrame(()=>{
+                    this.innerHTML = svg; // requestAnimationFrame??
+                    this.querySelectorAll('[id]').forEach(el=>el.removeAttribute('id')); // remove ids
+                    const svgEl = this.firstElementChild;
+                    if (!svgEl.hasAttribute('viewBox')) { // SF Symbol
+                        const width = parseFloat(svgEl.getAttribute('width')) ?? 24;
+                        const height = parseFloat(svgEl.getAttribute('height')) ?? 24;
+                        svgEl.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+                    }
+                    ['xmlns','xmlns:xlink','version','class','width','height'].forEach(attr=>svgEl.removeAttribute(attr)); // remove width, height ok?
+                    svgEl.ariaHidden = true;
+                    this.setAttribute('state','loaded');
+                    this.dispatchEvent(new CustomEvent('u2-ico-loaded', {bubbles: true, composed: true}));
+                });
+
+            }).catch(err=>{
+                console.error(err, this);
+                this.setAttribute('state','fail');
+            });
+        }
+    }
+
+}
+
+function dirTemplateToUrl(dir, name) {
+    let [prefix, firstWord, between='', nextWord, suffix] = dir.split(/{(icon)([^n]*)?(name)?}/i);
+    suffix ||= prefix.includes('#') ? '' : '.svg';
+    if (!nextWord) between = '-'; // if just: {icon}
+
+    // icon naming convertion
+    let fileName = name;
+    const upperFirst = firstWord?.[0] === 'I';
+    const upperWords = nextWord?.[0] === 'N';
+    if (upperFirst) fileName = fileName.replace(/^([a-z])/, g => g[0].toUpperCase()); // first upper
+    if (upperWords) fileName = fileName.replace(/-([a-z])/g, g => g[1].toUpperCase()); // camel-case
+    if (between !== '-') fileName = fileName.replace(/-/g, between);
+
+    return new URL(prefix + fileName + suffix, location.href);
+}
+
+async function loadSvgString(url) {
+    const hash = url.hash.substring(1);
+
+    // internal element
+    if (url.origin === location.origin && url.pathname === location.pathname) { // svg on the same document
+        if (hash) {
+            const element = document.getElementById(hash);
+            if (element) {
+                return element.outerHTML;
+            } else {
+                throw new Error("Element with id " + hash + " not found in the document");
+            }
+        }
+    }
+
+    const svg = await loadCached(url);
+    // temporary cache svg
+    
+    // external element
+    if (hash) { // todo, cache the svgDoc?
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svg, "image/svg+xml");
+        const element = svgDoc.getElementById(hash);
+        if (element) {
+            return element.outerHTML;
+        } else {
+            throw new Error("Element with id " + hash + " not found in the document");
+        }
+    }
+
+    // external document
+    return svg;
+}
+
+const cachedRequests = {};
+
+async function loadCached(url) {
+    return cachedRequests[url] ??= fetch(url, {cache: "force-cache"}).then(res => {
+        if (!res.ok) throw new Error(`Failed to fetch icon ${url}: ${res.status} ${res.statusText}`);
+        return res.text();
+    });
+}
+
+
+customElements.define('u2-ico', U2Ico);