@ni/ok-components 0.4.4 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +11 -11
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4 -4
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +72 -66
- package/dist/custom-elements.md +16 -16
- package/dist/esm/all-components.d.ts +1 -1
- package/dist/esm/all-components.js +1 -1
- package/dist/esm/all-components.js.map +1 -1
- package/dist/esm/ts/all-ts.d.ts +1 -0
- package/dist/esm/ts/all-ts.js +2 -0
- package/dist/esm/ts/all-ts.js.map +1 -0
- package/dist/esm/{icon-dynamic → ts/icon-dynamic}/index.d.ts +6 -6
- package/dist/esm/{icon-dynamic → ts/icon-dynamic}/index.js +13 -13
- package/dist/esm/ts/icon-dynamic/index.js.map +1 -0
- package/dist/esm/{icon-dynamic → ts/icon-dynamic}/styles.js +2 -2
- package/dist/esm/ts/icon-dynamic/styles.js.map +1 -0
- package/dist/esm/ts/icon-dynamic/template.d.ts +2 -0
- package/dist/esm/ts/icon-dynamic/template.js.map +1 -0
- package/package.json +1 -1
- package/dist/esm/icon-dynamic/index.js.map +0 -1
- package/dist/esm/icon-dynamic/styles.js.map +0 -1
- package/dist/esm/icon-dynamic/template.d.ts +0 -2
- package/dist/esm/icon-dynamic/template.js.map +0 -1
- /package/dist/esm/{icon-dynamic → ts/icon-dynamic}/styles.d.ts +0 -0
- /package/dist/esm/{icon-dynamic → ts/icon-dynamic}/template.js +0 -0
|
@@ -99833,21 +99833,21 @@ focus outline in that case.
|
|
|
99833
99833
|
/**
|
|
99834
99834
|
* Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:
|
|
99835
99835
|
* ```
|
|
99836
|
-
* customElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');
|
|
99836
|
+
* customElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-icon-dynamic-awesome', '<img data uri or arbitrary url>');
|
|
99837
99837
|
* ```
|
|
99838
99838
|
* After calling successfully, the icon can be used like any other icon:
|
|
99839
99839
|
* ```
|
|
99840
|
-
* <ok-icon-dynamic-awesome></ok-icon-dynamic-awesome>
|
|
99841
|
-
* <nimble-mapping-icon icon="ok-icon-dynamic-awesome"></nimble-mapping-icon>
|
|
99840
|
+
* <ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>
|
|
99841
|
+
* <nimble-mapping-icon icon="ok-ts-icon-dynamic-awesome"></nimble-mapping-icon>
|
|
99842
99842
|
* ```
|
|
99843
99843
|
*/
|
|
99844
|
-
class
|
|
99844
|
+
class TsIconDynamic extends Icon {
|
|
99845
99845
|
constructor(/** @internal */ url) {
|
|
99846
99846
|
super();
|
|
99847
99847
|
this.url = url;
|
|
99848
99848
|
}
|
|
99849
99849
|
static registerIconDynamic(tagName, url) {
|
|
99850
|
-
const tagPrefix = 'ok-icon-dynamic-';
|
|
99850
|
+
const tagPrefix = 'ok-ts-icon-dynamic-';
|
|
99851
99851
|
if (!tagName.startsWith(tagPrefix)) {
|
|
99852
99852
|
throw new Error(`Icon tag name must start with '${tagPrefix}', provided name: ${tagName}`);
|
|
99853
99853
|
}
|
|
@@ -99855,17 +99855,17 @@ focus outline in that case.
|
|
|
99855
99855
|
if (!/^[a-z][a-z]+$/.test(name)) {
|
|
99856
99856
|
throw new Error(`Icon name must be lowercase [a-z] and at least two characters long, provided name: ${name}`);
|
|
99857
99857
|
}
|
|
99858
|
-
const iconClassName = `
|
|
99858
|
+
const iconClassName = `TsIconDynamic${name.charAt(0).toUpperCase() + name.slice(1)}`;
|
|
99859
99859
|
const iconClassContainer = {
|
|
99860
99860
|
// Class name for expression should come object literal assignment, helpful for stack traces, etc.
|
|
99861
|
-
[iconClassName]: class extends
|
|
99861
|
+
[iconClassName]: class extends TsIconDynamic {
|
|
99862
99862
|
constructor() {
|
|
99863
99863
|
super(url);
|
|
99864
99864
|
}
|
|
99865
99865
|
}
|
|
99866
99866
|
};
|
|
99867
99867
|
const iconClass = iconClassContainer[iconClassName];
|
|
99868
|
-
const baseName = `icon-dynamic-${name}`;
|
|
99868
|
+
const baseName = `ts-icon-dynamic-${name}`;
|
|
99869
99869
|
const composedIcon = iconClass.compose({
|
|
99870
99870
|
baseName,
|
|
99871
99871
|
template,
|
|
@@ -99874,12 +99874,12 @@ focus outline in that case.
|
|
|
99874
99874
|
DesignSystem.getOrCreate().withPrefix('ok').register(composedIcon());
|
|
99875
99875
|
}
|
|
99876
99876
|
}
|
|
99877
|
-
const
|
|
99878
|
-
baseName: 'icon-dynamic',
|
|
99877
|
+
const okTsIconDynamic = TsIconDynamic.compose({
|
|
99878
|
+
baseName: 'ts-icon-dynamic',
|
|
99879
99879
|
template: html `<template></template>`,
|
|
99880
99880
|
styles: css `${display('none')}`
|
|
99881
99881
|
});
|
|
99882
|
-
DesignSystem.getOrCreate().withPrefix('ok').register(
|
|
99882
|
+
DesignSystem.getOrCreate().withPrefix('ok').register(okTsIconDynamic());
|
|
99883
99883
|
|
|
99884
99884
|
})();
|
|
99885
99885
|
//# sourceMappingURL=all-components-bundle.js.map
|