@ni/ok-components 0.4.3 → 1.0.0

package/dist/custom-elements.json

@@ -10,44 +10,9 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A Ok demo component (not for production use)",
-          "name": "Button",
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@ni/fast-foundation"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "buttonTag",
-          "type": {
-            "text": "string"
-          },
-          "default": "'ok-button'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Button",
-          "declaration": {
-            "name": "Button",
-            "module": "src/button/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "buttonTag",
-          "declaration": {
-            "name": "buttonTag",
-            "module": "src/button/index.ts"
-          }
-        }
-      ]
+      "path": "src/ex/all-ex.ts",
+      "declarations": [],
+      "exports": []
     },
     {
       "kind": "javascript-module",
@@ -57,68 +22,47 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/icon-dynamic/index.ts",
+      "path": "src/ts/all-ts.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/ex/button/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter 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```",
-          "name": "IconDynamic",
-          "members": [
-            {
-              "kind": "method",
-              "name": "registerIconDynamic",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "tagName",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "url",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            }
-          ],
+          "description": "A Ok demo component (not for production use)",
+          "name": "ExButton",
           "superclass": {
-            "name": "Icon",
-            "package": "@ni/nimble-components/dist/esm/icon-base"
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
           }
         },
         {
           "kind": "variable",
-          "name": "iconDynamicTag",
+          "name": "exButtonTag",
           "type": {
             "text": "string"
           },
-          "default": "'ok-icon-dynamic'"
+          "default": "'ok-ex-button'"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "IconDynamic",
+          "name": "ExButton",
           "declaration": {
-            "name": "IconDynamic",
-            "module": "src/icon-dynamic/index.ts"
+            "name": "ExButton",
+            "module": "src/ex/button/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "iconDynamicTag",
+          "name": "exButtonTag",
           "declaration": {
-            "name": "iconDynamicTag",
-            "module": "src/icon-dynamic/index.ts"
+            "name": "exButtonTag",
+            "module": "src/ex/button/index.ts"
           }
         }
       ]
@@ -258,6 +202,74 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/ts/icon-dynamic/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter calling successfully, the icon can be used like any other icon:\n```\n<ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>\n<nimble-mapping-icon icon=\"ok-ts-icon-dynamic-awesome\"></nimble-mapping-icon>\n```",
+          "name": "TsIconDynamic",
+          "members": [
+            {
+              "kind": "method",
+              "name": "registerIconDynamic",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "Icon",
+            "package": "@ni/nimble-components/dist/esm/icon-base"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "tsIconDynamicTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-ts-icon-dynamic'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TsIconDynamic",
+          "declaration": {
+            "name": "TsIconDynamic",
+            "module": "src/ts/icon-dynamic/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tsIconDynamicTag",
+          "declaration": {
+            "name": "tsIconDynamicTag",
+            "module": "src/ts/icon-dynamic/index.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/custom-elements.md

@@ -1,4 +1,4 @@
-## class: `Button`
+## class: `ExButton`
 
 ### Superclass
 
@@ -8,22 +8,6 @@
 
 <hr/>
 
-## class: `IconDynamic`
-
-### Superclass
-
-| Name   | Module | Package                                  |
-| ------ | ------ | ---------------------------------------- |
-| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
-
-### Static Methods
-
-| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
-| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
-| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
-
-<hr/>
-
 ## class: `FvAccordionItem`
 
 ### Superclass
@@ -55,3 +39,19 @@
 | `appearance` | appearance |                |
 
 <hr/>
+
+## class: `TsIconDynamic`
+
+### Superclass
+
+| Name   | Module | Package                                  |
+| ------ | ------ | ---------------------------------------- |
+| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+
+### Static Methods
+
+| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
+| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
+| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
+
+<hr/>

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

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

package/dist/esm/all-components.js

@@ -5,6 +5,6 @@
  */
 import '@ni/spright-components/dist/esm/all-components';
 import './fv/all-fv';
-import './button';
-import './icon-dynamic';
+import './ex/all-ex';
+import './ts/all-ts';
 //# 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,aAAa,CAAC;AACrB,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 './fv/all-fv';\nimport './button';\nimport './icon-dynamic';\n"]}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,gDAAgD,CAAC;AAExD,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,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 './fv/all-fv';\nimport './ex/all-ex';\nimport './ts/all-ts';\n"]}

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

@@ -0,0 +1 @@
+import './button';

package/dist/esm/ex/all-ex.js

@@ -0,0 +1,2 @@
+import './button';
+//# sourceMappingURL=all-ex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"all-ex.js","sourceRoot":"","sources":["../../../src/ex/all-ex.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC","sourcesContent":["import './button';\n"]}

package/dist/esm/{button → ex/button}/index.d.ts

@@ -1,12 +1,12 @@
 import { FoundationElement } from '@ni/fast-foundation';
 declare global {
     interface HTMLElementTagNameMap {
-        'ok-button': Button;
+        'ok-ex-button': ExButton;
     }
 }
 /**
  * A Ok demo component (not for production use)
  */
-export declare class Button extends FoundationElement {
+export declare class ExButton extends FoundationElement {
 }
-export declare const buttonTag = "ok-button";
+export declare const exButtonTag = "ok-ex-button";

package/dist/esm/ex/button/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Ok demo component (not for production use)
+ */
+export class ExButton extends FoundationElement {
+}
+const okExButton = ExButton.compose({
+    baseName: 'ex-button',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okExButton());
+export const exButtonTag = 'ok-ex-button';
+//# sourceMappingURL=index.js.map

package/dist/esm/ex/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ex/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,iBAAiB;CAAG;AAElD,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IAChC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACnE,MAAM,CAAC,MAAM,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-ex-button': ExButton;\n    }\n}\n\n/**\n * A Ok demo component (not for production use)\n */\nexport class ExButton extends FoundationElement {}\n\nconst okExButton = ExButton.compose({\n    baseName: 'ex-button',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okExButton());\nexport const exButtonTag = 'ok-ex-button';\n"]}

package/dist/esm/{button → ex/button}/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@ni/fast-element';
 import { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
-import { display } from '../utilities/style/display';
+import { display } from '../../utilities/style/display';
 export const styles = css `
     ${display('inline-block')}
 

package/dist/esm/ex/button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/ex/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACxB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;4BAGD,gBAAgB;;;;;;;;6BAQf,qBAAqB;;;;gBAIlC,QAAQ;iBACP,aAAa;;;;iBAIb,qBAAqB;;CAErC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        border: 2px solid ${borderHoverColor};\n    }\n\n    :host(:hover) {\n        border-width: 4px;\n    }\n\n    :host([disabled]) {\n        border-color: rgba(${borderRgbPartialColor}, 0.2);\n    }\n\n    slot {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) slot {\n        color: ${bodyDisabledFontColor};\n    }\n`;\n"]}

package/dist/esm/ex/button/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/ex/button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA,eAAe,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\n\nexport const template = html`<slot></slot>`;\n"]}

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

@@ -0,0 +1 @@
+import './icon-dynamic';

package/dist/esm/ts/all-ts.js

@@ -0,0 +1,2 @@
+import './icon-dynamic';
+//# sourceMappingURL=all-ts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"all-ts.js","sourceRoot":"","sources":["../../../src/ts/all-ts.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC","sourcesContent":["import './icon-dynamic';\n"]}

package/dist/esm/{icon-dynamic → ts/icon-dynamic}/index.d.ts

@@ -1,23 +1,23 @@
 import { Icon } from '@ni/nimble-components/dist/esm/icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'ok-icon-dynamic': IconDynamic;
+        'ok-ts-icon-dynamic': TsIconDynamic;
     }
 }
 /**
  * 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>');
+ * customElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-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>
+ * <ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>
+ * <nimble-mapping-icon icon="ok-ts-icon-dynamic-awesome"></nimble-mapping-icon>
  * ```
  */
-export declare class IconDynamic extends Icon {
+export declare class TsIconDynamic extends Icon {
     readonly url: string;
     constructor(/** @internal */ url: string);
     static registerIconDynamic(tagName: string, url: string): void;
 }
-export declare const iconDynamicTag = "ok-icon-dynamic";
+export declare const tsIconDynamicTag = "ok-ts-icon-dynamic";

package/dist/esm/{icon-dynamic → ts/icon-dynamic}/index.js

@@ -4,25 +4,25 @@ 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';
+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>');
+ * customElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-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>
+ * <ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>
+ * <nimble-mapping-icon icon="ok-ts-icon-dynamic-awesome"></nimble-mapping-icon>
  * ```
  */
-export class IconDynamic extends Icon {
+export class TsIconDynamic extends Icon {
     constructor(/** @internal */ url) {
         super();
         this.url = url;
     }
     static registerIconDynamic(tagName, url) {
-        const tagPrefix = 'ok-icon-dynamic-';
+        const tagPrefix = 'ok-ts-icon-dynamic-';
         if (!tagName.startsWith(tagPrefix)) {
             throw new Error(`Icon tag name must start with '${tagPrefix}', provided name: ${tagName}`);
         }
@@ -30,17 +30,17 @@ export class IconDynamic extends Icon {
         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 iconClassName = `TsIconDynamic${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 {
+            [iconClassName]: class extends TsIconDynamic {
                 constructor() {
                     super(url);
                 }
             }
         };
         const iconClass = iconClassContainer[iconClassName];
-        const baseName = `icon-dynamic-${name}`;
+        const baseName = `ts-icon-dynamic-${name}`;
         const composedIcon = iconClass.compose({
             baseName,
             template,
@@ -49,11 +49,11 @@ export class IconDynamic extends Icon {
         DesignSystem.getOrCreate().withPrefix('ok').register(composedIcon());
     }
 }
-const okIconDynamic = IconDynamic.compose({
-    baseName: 'icon-dynamic',
+const okTsIconDynamic = TsIconDynamic.compose({
+    baseName: 'ts-icon-dynamic',
     template: html `<template></template>`,
     styles: css `${display('none')}`
 });
-DesignSystem.getOrCreate().withPrefix('ok').register(okIconDynamic());
-export const iconDynamicTag = 'ok-icon-dynamic';
+DesignSystem.getOrCreate().withPrefix('ok').register(okTsIconDynamic());
+export const tsIconDynamicTag = 'ok-ts-icon-dynamic';
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ts/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,+BAA+B,CAAC;AAQxD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAI;IACnC,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,qBAAqB,CAAC;QACxC,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,gBAAgB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACrF,MAAM,kBAAkB,GAAG;YACvB,kGAAkG;YAClG,CAAC,aAAa,CAAC,EAAE,KAAM,SAAQ,aAAa;gBACxC;oBACI,KAAK,CAAC,GAAG,CAAC,CAAC;gBACf,CAAC;aACJ;SACK,CAAC;QACX,MAAM,SAAS,GAAG,kBAAkB,CAAC,aAAa,CAAE,CAAC;QACrD,MAAM,QAAQ,GAAG,mBAAmB,IAAI,EAAE,CAAC;QAC3C,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,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,iBAAiB;IAC3B,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,eAAe,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,oBAAoB,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-ts-icon-dynamic': TsIconDynamic;\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-ts-icon-dynamic').registerIconDynamic('ok-ts-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-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>\n * <nimble-mapping-icon icon=\"ok-ts-icon-dynamic-awesome\"></nimble-mapping-icon>\n * ```\n */\nexport class TsIconDynamic 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-ts-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 = `TsIconDynamic${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 TsIconDynamic {\n                constructor() {\n                    super(url);\n                }\n            }\n        } as const;\n        const iconClass = iconClassContainer[iconClassName]!;\n        const baseName = `ts-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 okTsIconDynamic = TsIconDynamic.compose({\n    baseName: 'ts-icon-dynamic',\n    template: html`<template></template>`,\n    styles: css`${display('none')}`\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okTsIconDynamic());\nexport const tsIconDynamicTag = 'ok-ts-icon-dynamic';\n"]}

package/dist/esm/{icon-dynamic → ts/icon-dynamic}/styles.js

@@ -1,7 +1,7 @@
 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';
+import { display } from '../../utilities/style/display';
+import { userSelectNone } from '../../utilities/style/user-select';
 export const styles = css `
     ${display('inline-flex')}
 

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/ts/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,+BAA+B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,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/ts/icon-dynamic/template.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "0.4.3",
+  "version": "1.0.0",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",

package/dist/esm/button/index.js

@@ -1,16 +0,0 @@
-import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
-import { styles } from './styles';
-import { template } from './template';
-/**
- * A Ok demo component (not for production use)
- */
-export class Button extends FoundationElement {
-}
-const okButton = Button.compose({
-    baseName: 'button',
-    template,
-    styles
-});
-DesignSystem.getOrCreate().withPrefix('ok').register(okButton());
-export const buttonTag = 'ok-button';
-//# sourceMappingURL=index.js.map

package/dist/esm/button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,iBAAiB;CAAG;AAEhD,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;AACjE,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-button': Button;\n    }\n}\n\n/**\n * A Ok demo component (not for production use)\n */\nexport class Button extends FoundationElement {}\n\nconst okButton = Button.compose({\n    baseName: 'button',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okButton());\nexport const buttonTag = 'ok-button';\n"]}

package/dist/esm/button/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACxB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;4BAGD,gBAAgB;;;;;;;;6BAQf,qBAAqB;;;;gBAIlC,QAAQ;iBACP,aAAa;;;;iBAIb,qBAAqB;;CAErC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        border: 2px solid ${borderHoverColor};\n    }\n\n    :host(:hover) {\n        border-width: 4px;\n    }\n\n    :host([disabled]) {\n        border-color: rgba(${borderRgbPartialColor}, 0.2);\n    }\n\n    slot {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) slot {\n        color: ${bodyDisabledFontColor};\n    }\n`;\n"]}

package/dist/esm/button/template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA,eAAe,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\n\nexport const template = html`<slot></slot>`;\n"]}

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

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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"]}