@xplortech/apollo-core 2.4.2 → 2.5.0

package/dist/esm/xpl-dynamic-table-cell.entry.js

@@ -21,9 +21,9 @@ const XplDynamicTableCell = class {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: 'c48652542dadaa98dbfe8c1ca51c5be67c279091', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: '639f0a42ea0189fb4c269de1b76c5491729f868c', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '3b6b21c64807f8e7dca3b18def3bb373a3778506' })));
+            } }, h("slot", { key: '29864a738aa7d5e9498195ce0d22bb8d78e39989' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/xpl-dynamic-table-row.entry.js

@@ -26,9 +26,9 @@ const XplDynamicTableRow = class {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '3f514b6ebd0c519329c1f88fd7a06681fd263c20', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: '4969ae6223aa4f6604d20e657d390d8ec43eb9bd', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'acfe30cd4d852f2787ac18376b8b491731a736d4' })));
+            } }, h("slot", { key: '244d34612847408ddb9e0d718b1e5916b7e24b2d' })));
     }
 };
 

package/dist/esm/xpl-dynamic-table.entry.js

@@ -54,7 +54,7 @@ const XplDynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: '56ec7b395ff5f4dc42970e042ca8771b6fc2095a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '38877bbaeaa319a9c876478f09dadf06248ab8ae', name: "header" }), h("slot", { key: '9c241ad399ac3e4e58a913d24174fe581bfab1bc', name: "body" })));
+        return (h("div", { key: 'f49634b51fd6fb49bcb75cc4247f683ff99d6b99', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'e5cd66e212a41ce26dfaccae634ab7ee22ba9910', name: "header" }), h("slot", { key: '07e1fbec46f08e46f728340291510992d21f71a4', name: "body" })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/xpl-grid-item.entry.js

@@ -14,7 +14,7 @@ const XplGridItem = class {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (h(Host, { key: 'e88447c2042c92809a00464c721ffccbe3f421f7', class: className }, h("slot", { key: 'ba97ddd92e967cc9c883bcd462a4303015015160' })));
+        return (h(Host, { key: '4a3a254b51eae0907baf74c383b0d2b60017b69b', class: className }, h("slot", { key: 'b23f50ff733b9f3009eda4a3569a28b0636e76f4' })));
     }
 };
 

package/dist/esm/xpl-grid.entry.js

@@ -26,7 +26,7 @@ const XplGrid = class {
         });
     }
     render() {
-        return h(Host, { key: 'ebca0f4cd2335a920d6e070a5ea8e6ca32e06fb2', class: "xpl-grid" });
+        return h(Host, { key: 'b7adecdd36342641869726ffa094578c1272dc1e', class: "xpl-grid" });
     }
     get container() { return getElement(this); }
 };

package/dist/types/components/xpl-data-card/xpl-data-card.d.ts

@@ -1,4 +1,3 @@
-import { IconName } from '../xpl-icon/xpl-icon';
 export declare class XplDataCard {
     el: HTMLXplDataCardElement;
     link?: boolean;
@@ -7,9 +6,9 @@ export declare class XplDataCard {
     shortStat?: string;
     variant?: 'primary' | 'secondary';
     leadingIcon?: boolean;
-    icon?: IconName;
+    icon?: string;
     smallStat?: string;
-    smallStatIcon?: IconName;
+    smallStatIcon?: string;
     detail?: string;
     smallStatVariant?: 'positive' | 'negative' | 'neutral';
     tooltipTextSmallStat?: string;

package/dist/types/components/xpl-dynamic-table/dynamic-table.stories.d.ts

@@ -37,5 +37,9 @@ export declare const DynamicTable: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-header-accordion/header-accordion.stories.d.ts

@@ -40,5 +40,9 @@ export declare const HeaderAccordion: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-icon/icon-types.d.ts

@@ -0,0 +1,2 @@
+import data from '@xplortech/apollo-icons/build/data.json';
+export type IconName = keyof typeof data;

package/dist/types/components/xpl-icon/xpl-icon.d.ts

@@ -1,7 +1,5 @@
-import data from '@xplortech/apollo-icons/build/data.json';
-export type IconName = keyof typeof data;
 export declare class XplIcon {
-    icon: IconName;
+    icon: string;
     size: number;
     backgroundColor?: string;
     render(): any;

package/dist/types/components/xpl-input/input.stories.d.ts

@@ -78,6 +78,10 @@ export declare const Input: {
         html: {
             render: any[];
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };
 export declare const Multiline: {

package/dist/types/components/xpl-list/list.stories.d.ts

@@ -59,5 +59,9 @@ export declare const List: {
         html: {
             render: void;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-progress/progress.stories.d.ts

@@ -30,5 +30,9 @@ export declare const Progress: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-radio/radio.stories.d.ts

@@ -75,5 +75,9 @@ export declare const Radio: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-select/select.stories.d.ts

@@ -121,6 +121,10 @@ export declare const Select: {
         html: {
             render: void;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };
 export declare const SelectWValues: {

package/dist/types/components/xpl-select/xpl-select.d.ts

@@ -1,10 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import data from '@xplortech/apollo-icons/build/data.json';
 import type { DropdownItem } from '../xpl-dropdown/dropdown-option';
-export type IconName = keyof typeof data;
 export declare class XplSelect {
     choices?: DropdownItem[];
-    selectIcon?: IconName;
+    selectIcon?: string;
     description?: string;
     disabled?: boolean;
     error?: string;

package/dist/types/components/xpl-slideout/slideout.stories.d.ts

@@ -111,4 +111,10 @@ export declare const Slideout: {
         tertiaryButtonText: string;
         variant: string;
     };
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
 };

package/dist/types/components/xpl-table/table.stories.d.ts

@@ -80,5 +80,9 @@ export declare const Table: {
         html: {
             render: string[];
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-table-header/table-header.stories.d.ts

@@ -99,5 +99,9 @@ export declare const TableHeader: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-table-header-cell/table-header-cell.stories.d.ts

@@ -51,5 +51,9 @@ export declare const TableHeaderCell: {
                 sortable: any;
             }) => string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-table-header-cell/xpl-table-header-cell.d.ts

@@ -1,8 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { IconName } from '../xpl-icon/xpl-icon';
 export declare class XplTableHeaderCell {
     el: HTMLXplTableHeaderCellElement;
-    icon?: IconName;
+    icon?: string;
     sortable?: boolean;
     label?: string;
     type: 'label' | 'checkbox' | 'icon';

package/dist/types/components/xpl-tabs/tabs.stories.d.ts

@@ -36,5 +36,9 @@ export declare const Tabs: {
         html: {
             render: string[];
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-toast/toast.stories.d.ts

@@ -58,5 +58,9 @@ export declare const Toast: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-toggle/toggle.stories.d.ts

@@ -63,5 +63,9 @@ export declare const Toggle: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-tooltip/tooltip.stories.d.ts

@@ -35,5 +35,9 @@ export declare const Tooltip: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components.d.ts

@@ -6,19 +6,13 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Choice } from "./components/xpl-choicelist/choice";
-import { IconName } from "./components/xpl-icon/xpl-icon";
 import { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
-import { IconName as IconName1 } from "./components/xpl-icon/xpl-icon";
 import { ListItem } from "./components/xpl-list/listitem";
 import { PopoverPosition } from "./components/xpl-popover/xpl-popover";
-import { IconName as IconName2 } from "./components/xpl-select/xpl-select";
 export { Choice } from "./components/xpl-choicelist/choice";
-export { IconName } from "./components/xpl-icon/xpl-icon";
 export { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
-export { IconName as IconName1 } from "./components/xpl-icon/xpl-icon";
 export { ListItem } from "./components/xpl-list/listitem";
 export { PopoverPosition } from "./components/xpl-popover/xpl-popover";
-export { IconName as IconName2 } from "./components/xpl-select/xpl-select";
 export namespace Components {
     interface XplAccordion {
         /**
@@ -308,9 +302,9 @@ export namespace Components {
          */
         "detail"?: string;
         /**
-          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * Whether to display the icon or not.
           * @default true
@@ -333,11 +327,11 @@ export namespace Components {
          */
         "smallStat"?: string;
         /**
-          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "smallStatIcon"?: IconName;
+        "smallStatIcon"?: string;
         /**
-          * set a variant that changes the color of the small stat based on the following rules:    If trend is positive and greater than 0.5% color is green and up-right arrow is used    If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
+          * set a variant that changes the color of the small stat based on the following rules:   If trend is positive and greater than 0.5% color is green and up-right arrow is used   If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
          */
         "smallStatVariant"?: 'positive' | 'negative' | 'neutral';
         /**
@@ -527,9 +521,10 @@ export namespace Components {
          */
         "backgroundColor"?: string;
         /**
-          * Name of icon
+          * Name of icon.
+          * @property {string}  See [available icons](./ICONS.md) for the complete list, or view the [Storybook icon gallery](?path=/story/components-icons--icons).
          */
-        "icon": IconName1;
+        "icon": string;
         /**
           * Size of icon
          */
@@ -1042,10 +1037,10 @@ export namespace Components {
          */
         "reset": () => Promise<void>;
         /**
-          * The icon to display in the select trigger button.
+          * The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
           * @default 'chevron-down'
          */
-        "selectIcon"?: IconName2;
+        "selectIcon"?: string;
         /**
           * The value(s) currently selected in the select component.
          */
@@ -1184,9 +1179,9 @@ export namespace Components {
     }
     interface XplTableHeaderCell {
         /**
-          * @property {IconName} - Icon to display in the cell
+          * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * @property {string} - Text to display in the cell
           * @default ''
@@ -2432,9 +2427,9 @@ declare namespace LocalJSX {
          */
         "detail"?: string;
         /**
-          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * Whether to display the icon or not.
           * @default true
@@ -2457,11 +2452,11 @@ declare namespace LocalJSX {
          */
         "smallStat"?: string;
         /**
-          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "smallStatIcon"?: IconName;
+        "smallStatIcon"?: string;
         /**
-          * set a variant that changes the color of the small stat based on the following rules:    If trend is positive and greater than 0.5% color is green and up-right arrow is used    If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
+          * set a variant that changes the color of the small stat based on the following rules:   If trend is positive and greater than 0.5% color is green and up-right arrow is used   If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
          */
         "smallStatVariant"?: 'positive' | 'negative' | 'neutral';
         /**
@@ -2655,9 +2650,10 @@ declare namespace LocalJSX {
          */
         "backgroundColor"?: string;
         /**
-          * Name of icon
+          * Name of icon.
+          * @property {string}  See [available icons](./ICONS.md) for the complete list, or view the [Storybook icon gallery](?path=/story/components-icons--icons).
          */
-        "icon"?: IconName1;
+        "icon": string;
         /**
           * Size of icon
          */
@@ -3259,10 +3255,10 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The icon to display in the select trigger button.
+          * The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
           * @default 'chevron-down'
          */
-        "selectIcon"?: IconName2;
+        "selectIcon"?: string;
         /**
           * The value(s) currently selected in the select component.
          */
@@ -3421,9 +3417,9 @@ declare namespace LocalJSX {
     }
     interface XplTableHeaderCell {
         /**
-          * @property {IconName} - Icon to display in the cell
+          * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * @property {string} - Text to display in the cell
           * @default ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-core",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/components.d.ts",
@@ -35,7 +35,8 @@
     "build:css": "cross-env NODE_ENV=production postcss src/style.css -o build/style.css && npm-run-all build-partial:css.*",
     "build-partial:css.react": "cp build/style.css ../apollo-react/css/apollo.css",
     "build-partial:css.storybook": "cp -r build/ .storybook/build",
-    "build:stencil": "stencil build --docs --prod && cp -r dist .storybook && cp -r loader .storybook && node .storybook/patch-stencil-sourcemaps.mjs",
+    "build:stencil": "node ../../scripts/generate-icon-docs.mjs && stencil build --docs --prod && cp -r dist .storybook && cp -r loader .storybook && node .storybook/patch-stencil-sourcemaps.mjs",
+    "postbuild": "node ../../scripts/copy-readmes-to-dist.mjs",
     "clean": "rm -rf dist/ loader/ storybook-static/ www/ build/ src/components/components.d.ts",
     "dev": "run-p dev:*",
     "dev:css": "postcss src/style.css -o build/style.css -w",
@@ -46,11 +47,13 @@
     "lint:html": "prettier --write src/**/*.html",
     "lint:js": "prettier --write *{.js,.json}",
     "format": "npm run lint:css -- --fix && npm run lint:ts -- --fix && npm run lint:js && npm run lint:html",
+    "generate:icons": "node ../../scripts/generate-icon-docs.mjs",
     "test": "stencil test --spec",
     "test.watch": "stencil test --spec --watch",
     "test.e2e": "stencil test --e2e --runInBand",
     "release": "release-it",
-    "storybook": "npm-run-all build:css build:stencil storybook:start",
+    "prestorybook": "npm run build",
+    "storybook": "npm run storybook:start",
     "storybook:start": "storybook dev -p 9009",
     "stencil-generate": "stencil generate"
   },
@@ -86,7 +89,7 @@
     "@vitest/coverage-v8": "^4.0.13",
     "@vueless/storybook-dark-mode": "^10.0.3",
     "@xplortech/apollo-foundation": "0.1.0",
-    "@xplortech/apollo-icons": "^0.2.2",
+    "@xplortech/apollo-icons": "^0.3.1",
     "auto-changelog": "^2.3.0",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",