@openremote/or-icon 1.0.0 → 1.2.0-snapshot.20240512154942

package/README.md

@@ -1,24 +1,61 @@
+# @openremote/or-icon \<or-icon\>
 [![NPM Version][npm-image]][npm-url]
 [![Linux Build][travis-image]][travis-url]
 [![Test Coverage][coveralls-image]][coveralls-url]
 
-## Install
+Web Component for displaying an icon from a loaded iconset.
 
+## Install
 ```bash
-npm i -S @openremote/or-map
+npm i @openremote/or-icon
+yarn add @openremote/or-icon
 ```
 
 ## Usage
+For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
 
-TODO
+Icons are defined in iconsets, there are two iconsets provided by default and new ones can be created as required (see
+[demo-core](../../demo/demo-core)), The `mdi` iconset is quite large and it is possible to prevent loading of this
+when initialising the OpenRemote `Manager` via the `ManagerConfig`:
 
-## License
+* `mdi` - [Material Design Icons](https://materialdesignicons.com/)
+* `or` - OpenRemote icons (see [here](./or-iconset.ts))
+
+The default iconset is `mdi` but this can be changed by setting `OrIcon.DEFAULT_ICONSET`, to load an icon use the
+following HTML: 
+
+```$html
+<or-icon icon="mdi:access-point" />
+```
+
+If using the default iconset then the iconset prefix can be omitted:
+```$html
+<or-icon icon="access-point" />
+```
 
+Styling is done through CSS, the following CSS variables can be used:
+
+```$css
+--or-icon-fill (default: currentcolor)
+--or-icon-stroke (default: none)
+--or-icon-height (default: 24px)
+--or-icon-width (default: 24px)
+--or-icon-pointer-events (default: none)
+```
+
+When an iconset is added then any `or-icon` components in the DOM will be notified and refresh as required.
+
+## Supported Browsers
+The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
+Internet Explorer 11 is also supported.
+
+
+## License
 [GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
 
 [npm-image]: https://img.shields.io/npm/v/live-xxx.svg
-[npm-url]: https://npmjs.org/package/live-xxx
+[npm-url]: https://npmjs.org/package/@openremote/or-icon
 [travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
 [travis-url]: https://travis-ci.org/live-js/live-xxx
 [coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
-[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master
+[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master

package/lib/index.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, PropertyValues, TemplateResult } from "lit";
+import { AssetDescriptor } from "@openremote/model";
+import OrIconSet from "./or-icon-set";
+export { OrIconSet };
+export declare class IconSetAddedEvent extends CustomEvent<void> {
+    static readonly NAME = "or-iconset-added";
+    constructor();
+}
+declare global {
+    export interface HTMLElementEventMap {
+        [IconSetAddedEvent.NAME]: IconSetAddedEvent;
+    }
+}
+export interface IconSet {
+    getIconTemplate: (icon: string) => TemplateResult;
+    onAdd?: () => void;
+}
+export declare function createSvgIconSet(size: number, icons: {
+    [name: string]: string;
+}): IconSet;
+export declare function createMdiIconSet(managerUrl: string): IconSet;
+declare class ORIconSets {
+    private _icons;
+    private _defaultIconSet?;
+    addIconSet(name: string, iconSet: IconSet): void;
+    getIconSet(name: string): IconSet;
+    getIconTemplate(icon: string | undefined): TemplateResult;
+}
+export declare const IconSets: ORIconSets;
+export declare function getAssetDescriptorIconTemplate(descriptor: AssetDescriptor | undefined, fallbackColor?: string | undefined, fallbackIcon?: string | undefined, overrideColor?: string | undefined, overrideIcon?: string | undefined): TemplateResult;
+export declare class OrIcon extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    icon?: string;
+    protected _iconTemplate?: TemplateResult;
+    protected _handler: (evt: Event) => void;
+    protected render(): TemplateResult;
+    disconnectedCallback(): void;
+    protected shouldUpdate(changedProperties: PropertyValues): boolean;
+    protected _updateIcon(): void;
+}

package/lib/index.js

@@ -0,0 +1,49 @@
+var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,s=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,n);else for(var c=t.length-1;c>=0;c--)(r=t[c])&&(s=(i<3?r(s):i>3?r(e,o,s):r(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import{css,html,LitElement,unsafeCSS}from"lit";import{unsafeSVG}from"lit/directives/unsafe-svg.js";import{customElement,property,state}from"lit/decorators.js";import{AssetModelUtil}from"@openremote/model";import OrIconSet from"./or-icon-set";export{OrIconSet};const mdiFontStyle=require("@mdi/font/css/materialdesignicons.min.css");export class IconSetAddedEvent extends CustomEvent{constructor(){super(IconSetAddedEvent.NAME,{bubbles:!0,composed:!0})}}IconSetAddedEvent.NAME="or-iconset-added";export function createSvgIconSet(t,e){return{getIconTemplate:o=>{const n=e[o];return n?html`
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         viewBox="0 0 ${t} ${t}" preserveAspectRatio="xMidYMid meet" focusable="false">
+                        ${unsafeSVG(n.startsWith("<")?n:'<path xmlns="http://www.w3.org/2000/svg" d="'+n+'" />')}
+                    </svg>
+                `:html``},onAdd:void 0}}export function createMdiIconSet(t){return{getIconTemplate:t=>html`<span style="font-family: 'Material Design Icons';" class="mdi-${t}"></span>`,onAdd(){const e=document.createElement("style");e.id="mdiFontStyle",e.textContent='@font-face {\n  font-family: "Material Design Icons";\n  src: url("'+t+'/shared/fonts/Material Design Icons/fonts/materialdesignicons-webfont.eot");\n  src: url("'+t+'/shared/fonts/Material Design Icons/fonts/materialdesignicons-webfont.eot") format("embedded-opentype"), url("'+t+'/shared/fonts/Material Design Icons/fonts/materialdesignicons-webfont.woff2") format("woff2"), url("'+t+'/shared/fonts/Material Design Icons/fonts/materialdesignicons-webfont.woff") format("woff"), url("'+t+'/shared/fonts/Material Design Icons//fonts/materialdesignicons-webfont.ttf") format("truetype");\n  font-weight: normal;\n  font-style: normal;\n}',document.head.appendChild(e)}}}class ORIconSets{constructor(){this._icons={}}addIconSet(t,e){this._icons[t]=e,this._defaultIconSet||(this._defaultIconSet=e),e.onAdd&&e.onAdd(),window.dispatchEvent(new IconSetAddedEvent)}getIconSet(t){return this._icons[t]}getIconTemplate(t){if(!t)return html``;const e=(t||"").split(":"),o=e.pop(),n=e.pop();let r=this._defaultIconSet;return n&&(r=this.getIconSet(n)),o&&r?r.getIconTemplate(o):html``}}export const IconSets=new ORIconSets;export function getAssetDescriptorIconTemplate(t,e,o,n,r){const i=n||AssetModelUtil.getAssetDescriptorColour(t,e);let s=r||AssetModelUtil.getAssetDescriptorIcon(t,o);return s||(s=AssetModelUtil.getAssetDescriptorIcon("ThingAsset")),html`<or-icon style="--or-icon-fill: ${i?"#"+i:"unset"}" icon="${s}"></or-icon>`}let OrIcon=class extends LitElement{constructor(){super(...arguments),this._handler=t=>{this._updateIcon()}}static get styles(){return[css`
+                :host {    
+                    --internal-or-icon-width: var(--or-icon-width, 24px);
+                    --internal-or-icon-height: var(--or-icon-height, 24px);
+                    --internal-or-icon-fill: var(--or-icon-fill, currentColor);
+                    --internal-or-icon-stroke: var(--or-icon-fill, none);
+                    --internal-or-icon-stroke-width: var(--or-icon-stroke-width, 0);
+                
+                    display: inline-block;
+                    color: var(--internal-or-icon-fill);
+                    fill: var(--internal-or-icon-fill);
+                    stroke: var(--internal-or-icon-stroke);
+                    stroke-width: var(--internal-or-icon-stroke-width);
+                    vertical-align: text-bottom;
+                    font-weight: normal;
+                    font-style: normal;
+                    font-size: var(--internal-or-icon-width);
+                    line-height: 1;
+                    letter-spacing: normal;
+                    text-transform: none;
+                    white-space: nowrap;
+                    word-wrap: normal;
+                    direction: ltr;
+                    /* Support for all WebKit browsers. */
+                    -webkit-font-smoothing: antialiased;
+                    /* Support for Safari and Chrome. */
+                    text-rendering: optimizeLegibility;
+                    /* Support for Firefox. */
+                    -moz-osx-font-smoothing: grayscale;
+                    /* Support for IE. */
+                    font-feature-settings: 'liga';
+                }
+                
+                :host([hidden]) {
+                    display: none;
+                }
+                
+                svg {
+                    pointer-events: none;
+                    display: block;
+                    width: var(--internal-or-icon-width);
+                    height: var(--internal-or-icon-height);
+                }
+            `,css`${unsafeCSS(mdiFontStyle)}`]}render(){return this._iconTemplate||html``}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(IconSetAddedEvent.NAME,this._handler)}shouldUpdate(t){return t.has("icon")&&this._updateIcon(),!0}_updateIcon(){this._iconTemplate=void 0,window.removeEventListener(IconSetAddedEvent.NAME,this._handler),this._iconTemplate=IconSets.getIconTemplate(this.icon),this.icon&&!this._iconTemplate&&window.addEventListener(IconSetAddedEvent.NAME,this._handler)}};__decorate([property({type:String,reflect:!0})],OrIcon.prototype,"icon",void 0),__decorate([state()],OrIcon.prototype,"_iconTemplate",void 0),OrIcon=__decorate([customElement("or-icon")],OrIcon);export{OrIcon};

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/lib/or-icon-set.d.ts

@@ -0,0 +1,9 @@
+declare const orIconSet: {
+    size: number;
+    icons: {
+        logo: string;
+        "logo-plain": string;
+        marker: string;
+    };
+};
+export default orIconSet;

package/lib/or-icon-set.js

@@ -0,0 +1 @@
+const orIconSet={size:24,icons:{logo:'<path style=\'pointer-events: var(--or-icon-pointer-events, none);\' fill="#C4D600" d="m11.96125,23.85096c-6.56773,0 -11.90971,-5.34202 -11.90971,-11.90862l2.49411,0c0,5.19176 4.22389,9.41568 9.41561,9.41568c5.19053,0 9.41561,-4.22392 9.41561,-9.41568c0,-5.19176 -4.22389,-9.41568 -9.41561,-9.41568l0,-2.49413c6.56655,0 11.90971,5.34439 11.90971,11.9098c0,6.5666 -5.34316,11.90862 -11.90971,11.90862l0,0z" /><path fill="#4E9D2D" d="m10.25094,20.38647c-2.26848,-0.47231 -4.21822,-1.80199 -5.48741,-3.74009s-1.70892,-4.25777 -1.23545,-6.52625c0.47347,-2.26965 1.80315,-4.21822 3.74242,-5.48857c1.93926,-1.27035 4.25661,-1.70892 6.52625,-1.23545c4.68471,0.97719 7.70121,5.5828 6.72286,10.26635l-2.39994,-0.49907c0.70149,-3.36085 -1.4623,-6.66585 -4.82431,-7.36734c-1.62866,-0.33969 -3.29105,-0.02559 -4.68238,0.88645c-1.39134,0.91088 -2.34526,2.3092 -2.68495,3.93786c-0.33853,1.62633 -0.02443,3.28988 0.88645,4.68122c0.91088,1.39134 2.3092,2.34526 3.93786,2.68379l-0.50139,2.4011l0,0z"/><path fill="#1D5632"d="m12.03064,17.49616c-0.09524,0 -0.19048,-0.00116 -0.28457,-0.00465c-1.49833,-0.0755 -2.87818,-0.72942 -3.88636,-1.84097c-1.00818,-1.11271 -1.52156,-2.54948 -1.44722,-4.05013l2.44378,0.12196c-0.04181,0.84557 0.24856,1.65745 0.81769,2.28466c0.56681,0.62721 1.34733,0.99656 2.1929,1.03838c0.84208,0.03833 1.65629,-0.2474 2.2835,-0.81653c0.62837,-0.56797 0.99656,-1.34617 1.03954,-2.19174c0.08711,-1.74573 -1.26371,-3.23708 -3.00943,-3.3242l0.12196,-2.44378c3.09422,0.15332 5.4869,2.79455 5.33358,5.88877c-0.07434,1.49949 -0.72942,2.87818 -1.84097,3.8852c-1.04186,0.94313 -2.36945,1.45303 -3.7644,1.45303l0,0z"/>',"logo-plain":"m11.9925,23.91349c-6.58498,0 -11.94099,-5.35605 -11.94099,-11.9399l2.50066,0c0,5.20539 4.23498,9.44041 9.44033,9.44041c5.20416,0 9.44033,-4.23502 9.44033,-9.44041c0,-5.20539 -4.23498,-9.44041 -9.44033,-9.44041l0,-2.50068c6.5838,0 11.94099,5.35842 11.94099,11.94108c0,6.58385 -5.35719,11.9399 -11.94099,11.9399l0,0zm-1.80787,-3.27769c-2.31323,-0.48163 -4.30141,-1.83755 -5.59563,-3.81389s-1.74263,-4.34178 -1.25982,-6.65502c0.48281,-2.31443 1.83872,-4.30145 3.81623,-5.59686c1.97751,-1.29542 4.34056,-1.74264 6.65497,-1.25983c4.77711,0.99647 7.8531,5.69295 6.85545,10.46891l-2.44727,-0.50891c0.71532,-3.42716 -1.49114,-6.79738 -4.91946,-7.5127c-1.66078,-0.34639 -3.35596,-0.0261 -4.77474,0.90394c-1.41878,0.92886 -2.39152,2.35476 -2.73791,4.01555c-0.3452,1.65842 -0.02491,3.3548 0.90394,4.77359c0.92885,1.41879 2.35475,2.39154 4.01552,2.73675l-0.51128,2.44848l0,0zm1.81499,-2.92536c-0.09727,0 -0.19455,-0.00119 -0.29064,-0.00475c-1.53029,-0.07711 -2.93958,-0.74498 -3.96926,-1.88025c-1.02968,-1.13646 -1.55401,-2.60388 -1.47809,-4.13655l2.49591,0.12456c-0.04271,0.86361 0.25386,1.69282 0.83513,2.33341c0.5789,0.64059 1.37607,1.01783 2.23968,1.06053c0.86005,0.03915 1.69162,-0.25268 2.33221,-0.83395c0.64177,-0.58009 1.01782,-1.3749 1.06171,-2.23851c0.08897,-1.78298 -1.29066,-3.30616 -3.07362,-3.39513l0.12456,-2.49593c3.16022,0.15659 5.60394,2.85419 5.44735,6.01443c-0.07592,1.53149 -0.74498,2.9396 -1.88024,3.9681c-1.06408,0.96326 -2.41999,1.48403 -3.8447,1.48403l0,0z",marker:'<ellipse fill="#000" opacity="0.2" ry="1.5" rx="4" cy="22.5" cx="12" /><path style=\'pointer-events: var(--or-icon-pointer-events, none);\' d="m11.999999,0a8.437501,8.344057 0 0 1 8.437501,8.344057c0,6.500779 -5.798864,6.280799 -8.437501,14.412461c-2.638637,-8.131662 -8.437501,-7.911683 -8.437501,-14.412461a8.437501,8.344057 0 0 1 8.437501,-8.344057z" />'}};export default orIconSet;

package/lib/or-icon-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"or-icon-set.js","sourceRoot":"","sources":["../src/or-icon-set.ts"],"names":[],"mappings":"AACA,MAAM,SAAS,GAAG;IACd,IAAI,EAAE,EAAE;IACR,KAAK,EAAE;QACH,MAAM,EAAE,0lDAA0lD;QAClmD,YAAY,EAAE,+7CAA+7C;QAC78C,QAAQ,EAAE,kXAAkX;KAC/X;CACJ,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/mdi-font-copy.js

@@ -0,0 +1,17 @@
+// Script for copying @mdi/font files into dist dir
+var fs = require("fs");
+var path = require("path");
+
+if (!fs.existsSync("dist")) {
+    fs.mkdirSync("dist");
+}
+
+let fontDir = path.join(path.dirname(require.resolve("@mdi/font/package.json")), "fonts");
+let cssDir = path.join(path.dirname(require.resolve("@mdi/font/package.json")), "css");
+
+if (!fs.existsSync("dist/Material Design Icons")) {
+    fs.mkdirSync("dist/Material Design Icons", {recursive: true});
+}
+
+fs.cpSync(fontDir, "./dist/Material Design Icons/fonts", {recursive: true});
+fs.cpSync(cssDir, "./dist/Material Design Icons/css", {recursive: true});

package/mdi-iconset-generator.js

@@ -1,13 +1,21 @@
+// Script for collating mdi svg icons (@mdi/svg) into a single JSON file
 var fs = require('fs');
 var path = require("path");
 var xpath = require('xpath');
 var dom = require('xmldom').DOMParser;
 
+if (!fs.existsSync("src")){
+    fs.mkdirSync("src");
+}
+
 let mdiSvgDir = path.join(path.dirname(require.resolve("@mdi/svg/package.json")), "svg");
-let mdiStream = fs.createWriteStream("./src/mdi-icons.ts" ,{flags: "w+"});
-mdiStream.write("import {IconSetSvg} from \"./icon-set-svg\"; let mdi: IconSetSvg = new IconSetSvg(24, {");
+if (!fs.existsSync("dist")) {
+    fs.mkdirSync("dist");
+}
+let mdiStream = fs.createWriteStream("./dist/mdi-icons.json" ,{flags: "w+"});
+mdiStream.write("{\"size\":24,\"icons\":{");
 
-let files = fs.readdirSync(mdiSvgDir);
+let files = fs.readdirSync(mdiSvgDir).sort();
 
 for (let i=0; i<files.length; i++) {
 
@@ -19,9 +27,9 @@ for (let i=0; i<files.length; i++) {
     let pathAttrs = select("//svg:path/@d", svg);
     let pathData = pathAttrs[0].value;
     let name = file.substr(0, file.length-4);
-    if (!mdiStream.write("\"" + name + "\":\"" + pathData + "\"" + (i < files.length-1 ? "," : "")));
+    //name = name.replace(/-([\w])/g, function (g) { return g[1].toUpperCase(); });
+    mdiStream.write("\"" + name + "\":\"" + pathData + "\"" + (i < files.length-1 ? "," : ""));
 }
 
-mdiStream.write("});export default mdi;");
-
-mdiStream.close();
+mdiStream.write("}}");
+mdiStream.close();

package/package.json

@@ -1,28 +1,33 @@
 {
   "name": "@openremote/or-icon",
-  "version": "1.0.0",
-  "description": "Displays s vector or raster map",
-  "main": "dist/index.js",
-  "types": "src/index.ts",
+  "version": "1.2.0-snapshot.20240512154942",
+  "description": "Icon component for displaying an icon from an icon set",
+  "main": "dist/umd/index.bundle.js",
+  "module": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./*": "./lib/*.js"
+  },
+  "types": "lib/index.d.ts",
   "scripts": {
-    "build": "node mdi-iconset-generator.js && npx tsc -b",
-    "test": "echo \"No tests\" && exit 0"
+    "copyMdiFont": "node mdi-font-copy.js",
+    "build": "npx tsc -b",
+    "test": "echo \"No tests\" && exit 0",
+    "prepublishOnly": "npx webpack"
   },
   "author": "OpenRemote",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "lit-element": "^2.1.0"
+    "@mdi/font": "latest",
+    "lit": "^2.0.2"
   },
   "devDependencies": {
-    "xmldom": "^0.1.27",
-    "@mdi/svg": "^3.5.95",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "css-loader": "^2.0.0",
-    "style-loader": "^0.23.1",
-    "tslint": "^5.11.0",
-    "typescript": "^3.2.2",
-    "wct-browser-legacy": "^1.0.0",
-    "xpath": "^0.0.27"
+    "terser-webpack-plugin": "^5.2.5",
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
-
+}

package/dist/icon-set-svg.d.ts

@@ -1,11 +0,0 @@
-import { IconSet } from "./index";
-export declare class IconSetSvg implements IconSet {
-    icons: {
-        [icon: string]: string;
-    };
-    size: number;
-    constructor(size: number, icons: {
-        [icon: string]: string;
-    });
-    getIcon(icon: string): Element | undefined;
-}

package/dist/icon-set-svg.js

@@ -1,31 +0,0 @@
-export class IconSetSvg {
-    constructor(size, icons) {
-        this.size = size;
-        this.icons = icons;
-    }
-    getIcon(icon) {
-        if (!icon) {
-            return undefined;
-        }
-        if (!this.icons.hasOwnProperty(icon)) {
-            return undefined;
-        }
-        const iconData = this.icons[icon];
-        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svg.setAttribute("viewBox", "0 0 " + this.size + " " + this.size);
-        svg.style.cssText = "pointer-events: none; display: block; width: 100%; height: 100%;";
-        svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
-        svg.setAttribute("focusable", "false");
-        if (iconData.startsWith("<")) {
-            svg.innerHTML = iconData;
-        }
-        else {
-            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            path.setAttribute("d", iconData);
-            path.style.pointerEvents = "pointer-events: var(--or-icon-pointer-events, none);";
-            svg.appendChild(path);
-        }
-        return svg;
-    }
-}
-//# sourceMappingURL=icon-set-svg.js.map

package/dist/icon-set-svg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-set-svg.js","sourceRoot":"","sources":["../src/icon-set-svg.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,UAAU;IAInB,YAAY,IAAY,EAAE,KAAiC;QACvD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IAEM,OAAO,CAAC,IAAY;QACvB,IAAI,CAAC,IAAI,EAAE;YACP,OAAO,SAAS,CAAC;SACpB;QAED,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;YAClC,OAAO,SAAS,CAAC;SACpB;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;QAC1E,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAClE,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,kEAAkE,CAAC;QACvF,GAAG,CAAC,YAAY,CAAC,qBAAqB,EAAE,eAAe,CAAC,CAAC;QACzD,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;QACvC,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YAC1B,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC;SAC5B;aAAM;YACH,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;YAC5E,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,sDAAsD,CAAC;YAClF,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SACzB;QACD,OAAO,GAAG,CAAC;IACf,CAAC;CACJ"}

package/dist/index.d.ts

@@ -1,29 +0,0 @@
-import { LitElement, PropertyValues } from 'lit-element';
-export interface IconSets {
-    [name: string]: IconSet;
-}
-export interface IconSet {
-    getIcon(icon: string): Element | undefined;
-}
-export declare enum IconEvent {
-    ICONSET_ADDED = "or-icon-iconset-added"
-}
-declare class Icons {
-    private _icons;
-    addIconSet(name: string, iconset: IconSet): void;
-    getIconSet(name: string): IconSet;
-}
-export declare var IconSets: Icons;
-export declare class OrIcon extends LitElement {
-    static _DEFAULT_ICONSET: string;
-    static styles: import("lit-element").CSSResult;
-    icon?: string;
-    protected _iconElement?: Element;
-    protected _handler: (evt: Event) => void;
-    protected render(): import("lit-element").TemplateResult;
-    disconnectedCallback(): void;
-    protected shouldUpdate(changedProperties: PropertyValues): boolean;
-    protected _updateIcon(requestUpdate: boolean): void;
-    protected _onIconsetAdded(evt: Event): void;
-}
-export {};

package/dist/index.js

@@ -1,97 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var OrIcon_1;
-import { css, customElement, html, LitElement, property } from 'lit-element';
-import orIcons from "./or-icons";
-export var IconEvent;
-(function (IconEvent) {
-    IconEvent["ICONSET_ADDED"] = "or-icon-iconset-added";
-})(IconEvent || (IconEvent = {}));
-class Icons {
-    constructor() {
-        this._icons = {
-            or: orIcons
-        };
-    }
-    addIconSet(name, iconset) {
-        this._icons[name] = iconset;
-        window.dispatchEvent(new CustomEvent(IconEvent.ICONSET_ADDED));
-    }
-    getIconSet(name) {
-        return this._icons[name];
-    }
-}
-export var IconSets = new Icons();
-let OrIcon = OrIcon_1 = class OrIcon extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._handler = (evt) => {
-            this._onIconsetAdded(evt);
-        };
-    }
-    render() {
-        return html `
-      ${this._iconElement}
-    `;
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener(IconEvent.ICONSET_ADDED, this._handler);
-    }
-    shouldUpdate(changedProperties) {
-        if (changedProperties.has("icon")) {
-            this._updateIcon(false);
-        }
-        return true;
-    }
-    _updateIcon(requestUpdate) {
-        this._iconElement = undefined;
-        window.removeEventListener(IconEvent.ICONSET_ADDED, this._handler);
-        let parts = (this.icon || "").split(":");
-        let iconName = parts.pop();
-        let iconSetName = parts.pop() || OrIcon_1._DEFAULT_ICONSET;
-        if (!iconSetName || iconSetName === "" || !iconName || iconName === "") {
-            return;
-        }
-        let iconSet = IconSets.getIconSet(iconSetName);
-        if (!iconSet) {
-            window.addEventListener(IconEvent.ICONSET_ADDED, this._handler);
-            return;
-        }
-        this._iconElement = iconSet.getIcon(iconName);
-        if (requestUpdate) {
-            this.requestUpdate();
-        }
-    }
-    _onIconsetAdded(evt) {
-        this._updateIcon(true);
-    }
-};
-OrIcon._DEFAULT_ICONSET = "mdi";
-OrIcon.styles = css `
-        :host {
-            display: inline-block;
-            position: relative;
-            vertical-align: middle;
-            fill: var(--or-icon-fill-color, currentcolor);
-            stroke: var(--or-icon-stroke-color, none);
-            width: var(--or-icon-width, 24px);
-            height: var(--or-icon-height, 24px);
-        }
-        
-        :host([hidden]) {
-            display: none;
-        }
-    `;
-__decorate([
-    property({ type: String, reflect: true })
-], OrIcon.prototype, "icon", void 0);
-OrIcon = OrIcon_1 = __decorate([
-    customElement('or-icon')
-], OrIcon);
-export { OrIcon };
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/mdi-icons.d.ts

@@ -1,3 +0,0 @@
-import { IconSetSvg } from "./icon-set-svg";
-declare let mdi: IconSetSvg;
-export default mdi;