@ni/ok-components 0.2.7 → 0.2.9

package/dist/esm/all-components.d.ts

@@ -5,3 +5,4 @@
  */
 import '@ni/spright-components/dist/esm/all-components';
 import './button';
+import './icon-dynamic';

package/dist/esm/all-components.js

@@ -5,4 +5,5 @@
  */
 import '@ni/spright-components/dist/esm/all-components';
 import './button';
+import './icon-dynamic';
 //# sourceMappingURL=all-components.js.map

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,gDAAgD,CAAC;AAExD,OAAO,UAAU,CAAC","sourcesContent":["/**\n * Import of all the web components available in Nimble, Spright, and Ok.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/spright-components/dist/esm/all-components';\n\nimport './button';\n"]}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,gDAAgD,CAAC;AAExD,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC","sourcesContent":["/**\n * Import of all the web components available in Nimble, Spright, and Ok.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/spright-components/dist/esm/all-components';\n\nimport './button';\nimport './icon-dynamic';\n"]}

package/dist/esm/icon-dynamic/index.d.ts

@@ -0,0 +1,23 @@
+import { Icon } from '@ni/nimble-components/dist/esm/icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-icon-dynamic': IconDynamic;
+    }
+}
+/**
+ * Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:
+ * ```
+ * customElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');
+ * ```
+ * After calling successfully, the icon can be used like any other icon:
+ * ```
+ * <ok-icon-dynamic-awesome></ok-icon-dynamic-awesome>
+ * <nimble-mapping-icon icon="ok-icon-dynamic-awesome"></nimble-mapping-icon>
+ * ```
+ */
+export declare class IconDynamic extends Icon {
+    readonly url: string;
+    constructor(/** @internal */ url: string);
+    static registerIconDynamic(tagName: string, url: string): void;
+}
+export declare const iconDynamicTag = "ok-icon-dynamic";

package/dist/esm/icon-dynamic/index.js

@@ -0,0 +1,59 @@
+/* eslint-disable max-classes-per-file */
+import { DesignSystem } from '@ni/fast-foundation';
+import { html, css } from '@ni/fast-element';
+import { Icon } from '@ni/nimble-components/dist/esm/icon-base';
+import { styles } from './styles';
+import { template } from './template';
+import { display } from '../utilities/style/display';
+/**
+ * Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:
+ * ```
+ * customElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');
+ * ```
+ * After calling successfully, the icon can be used like any other icon:
+ * ```
+ * <ok-icon-dynamic-awesome></ok-icon-dynamic-awesome>
+ * <nimble-mapping-icon icon="ok-icon-dynamic-awesome"></nimble-mapping-icon>
+ * ```
+ */
+export class IconDynamic extends Icon {
+    constructor(/** @internal */ url) {
+        super();
+        this.url = url;
+    }
+    static registerIconDynamic(tagName, url) {
+        const tagPrefix = 'ok-icon-dynamic-';
+        if (!tagName.startsWith(tagPrefix)) {
+            throw new Error(`Icon tag name must start with '${tagPrefix}', provided name: ${tagName}`);
+        }
+        const name = tagName.substring(tagPrefix.length);
+        if (!/^[a-z][a-z]+$/.test(name)) {
+            throw new Error(`Icon name must be lowercase [a-z] and at least two characters long, provided name: ${name}`);
+        }
+        const iconClassName = `IconDynamic${name.charAt(0).toUpperCase() + name.slice(1)}`;
+        const iconClassContainer = {
+            // Class name for expression should come object literal assignment, helpful for stack traces, etc.
+            [iconClassName]: class extends IconDynamic {
+                constructor() {
+                    super(url);
+                }
+            }
+        };
+        const iconClass = iconClassContainer[iconClassName];
+        const baseName = `icon-dynamic-${name}`;
+        const composedIcon = iconClass.compose({
+            baseName,
+            template,
+            styles
+        });
+        DesignSystem.getOrCreate().withPrefix('ok').register(composedIcon());
+    }
+}
+const okIconDynamic = IconDynamic.compose({
+    baseName: 'icon-dynamic',
+    template: html `<template></template>`,
+    styles: css `${display('none')}`
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okIconDynamic());
+export const iconDynamicTag = 'ok-icon-dynamic';
+//# sourceMappingURL=index.js.map

package/dist/esm/icon-dynamic/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-dynamic/index.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAQrD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC,YAAmB,gBAAgB,CAAiB,GAAW;QAC3D,KAAK,EAAE,CAAC;QADwC,QAAG,GAAH,GAAG,CAAQ;IAE/D,CAAC;IAEM,MAAM,CAAC,mBAAmB,CAAC,OAAe,EAAE,GAAW;QAC1D,MAAM,SAAS,GAAG,kBAAkB,CAAC;QACrC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,kCAAkC,SAAS,qBAAqB,OAAO,EAAE,CAAC,CAAC;QAC/F,CAAC;QACD,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,sFAAsF,IAAI,EAAE,CAAC,CAAC;QAClH,CAAC;QACD,MAAM,aAAa,GAAG,cAAc,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACnF,MAAM,kBAAkB,GAAG;YACvB,kGAAkG;YAClG,CAAC,aAAa,CAAC,EAAE,KAAM,SAAQ,WAAW;gBACtC;oBACI,KAAK,CAAC,GAAG,CAAC,CAAC;gBACf,CAAC;aACJ;SACK,CAAC;QACX,MAAM,SAAS,GAAG,kBAAkB,CAAC,aAAa,CAAE,CAAC;QACrD,MAAM,QAAQ,GAAG,gBAAgB,IAAI,EAAE,CAAC;QACxC,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;YACnC,QAAQ;YACR,QAAQ;YACR,MAAM;SACT,CAAC,CAAC;QAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;IACzE,CAAC;CACJ;AAED,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,IAAI,CAAA,uBAAuB;IACrC,MAAM,EAAE,GAAG,CAAA,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE;CAClC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC","sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { DesignSystem } from '@ni/fast-foundation';\nimport { html, css } from '@ni/fast-element';\nimport { Icon } from '@ni/nimble-components/dist/esm/icon-base';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { display } from '../utilities/style/display';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-icon-dynamic': IconDynamic;\n    }\n}\n\n/**\n * Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n * ```\n * customElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n * ```\n * After calling successfully, the icon can be used like any other icon:\n * ```\n * <ok-icon-dynamic-awesome></ok-icon-dynamic-awesome>\n * <nimble-mapping-icon icon=\"ok-icon-dynamic-awesome\"></nimble-mapping-icon>\n * ```\n */\nexport class IconDynamic extends Icon {\n    public constructor(/** @internal */ public readonly url: string) {\n        super();\n    }\n\n    public static registerIconDynamic(tagName: string, url: string): void {\n        const tagPrefix = 'ok-icon-dynamic-';\n        if (!tagName.startsWith(tagPrefix)) {\n            throw new Error(`Icon tag name must start with '${tagPrefix}', provided name: ${tagName}`);\n        }\n        const name = tagName.substring(tagPrefix.length);\n        if (!/^[a-z][a-z]+$/.test(name)) {\n            throw new Error(`Icon name must be lowercase [a-z] and at least two characters long, provided name: ${name}`);\n        }\n        const iconClassName = `IconDynamic${name.charAt(0).toUpperCase() + name.slice(1)}`;\n        const iconClassContainer = {\n            // Class name for expression should come object literal assignment, helpful for stack traces, etc.\n            [iconClassName]: class extends IconDynamic {\n                constructor() {\n                    super(url);\n                }\n            }\n        } as const;\n        const iconClass = iconClassContainer[iconClassName]!;\n        const baseName = `icon-dynamic-${name}`;\n        const composedIcon = iconClass.compose({\n            baseName,\n            template,\n            styles\n        });\n\n        DesignSystem.getOrCreate().withPrefix('ok').register(composedIcon());\n    }\n}\n\nconst okIconDynamic = IconDynamic.compose({\n    baseName: 'icon-dynamic',\n    template: html`<template></template>`,\n    styles: css`${display('none')}`\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okIconDynamic());\nexport const iconDynamicTag = 'ok-icon-dynamic';\n"]}

package/dist/esm/icon-dynamic/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/icon-dynamic/styles.js

@@ -0,0 +1,20 @@
+import { css } from '@ni/fast-element';
+import { iconSize, } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
+import { userSelectNone } from '../utilities/style/user-select';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        align-items: center;
+        ${userSelectNone}
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/icon-dynamic/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-dynamic/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,GACX,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;UAIlB,cAAc;iBACP,QAAQ;kBACP,QAAQ;;;;;;;CAOzB,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    iconSize,\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../utilities/style/display';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        align-items: center;\n        ${userSelectNone}\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    img {\n        width: 100%;\n        height: 100%;\n    }\n`;\n"]}

package/dist/esm/icon-dynamic/template.d.ts

@@ -0,0 +1,2 @@
+import type { IconDynamic } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<IconDynamic, any>;

package/dist/esm/icon-dynamic/template.js

@@ -0,0 +1,3 @@
+import { html } from '@ni/fast-element';
+export const template = html `<img aria-hidden="true" src=${x => x.url}>`;
+//# sourceMappingURL=template.js.map

package/dist/esm/icon-dynamic/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/icon-dynamic/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa,+BAA+B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { IconDynamic } from '.';\n\nexport const template = html<IconDynamic>`<img aria-hidden=\"true\" src=${x => x.url}>`;\n"]}

package/dist/esm/utilities/style/user-select.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Set user-select: none in a way that works across all supported browsers.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+ */
+export declare const userSelectNone: import("@ni/fast-element").CSSDirective;

package/dist/esm/utilities/style/user-select.js

@@ -0,0 +1,10 @@
+import { cssPartial } from '@ni/fast-element';
+/**
+ * Set user-select: none in a way that works across all supported browsers.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+ */
+export const userSelectNone = cssPartial `
+    user-select: none;
+    -webkit-user-select: none;
+`;
+//# sourceMappingURL=user-select.js.map

package/dist/esm/utilities/style/user-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-select.js","sourceRoot":"","sources":["../../../../src/utilities/style/user-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAA;;;CAGvC,CAAC","sourcesContent":["import { cssPartial } from '@ni/fast-element';\n\n/**\n * Set user-select: none in a way that works across all supported browsers.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility\n */\nexport const userSelectNone = cssPartial`\n    user-select: none;\n    -webkit-user-select: none;\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "NI Ok Components",
   "scripts": {
     "build": "tsc -p ./tsconfig.json",
@@ -37,8 +37,8 @@
     "@ni/fast-element": "^10.1.0",
     "@ni/fast-foundation": "^10.1.5",
     "@ni/fast-web-utilities": "^10.0.0",
-    "@ni/nimble-components": "^35.2.2",
-    "@ni/spright-components": "^6.7.0",
+    "@ni/nimble-components": "^35.2.3",
+    "@ni/spright-components": "^6.7.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {