@xplortech/apollo-core 1.0.0-beta.18 → 1.0.0-beta.3

package/dist/stories/select.stories.js

@@ -34,43 +34,43 @@ export default {
     },
   },
 };
-const script = (choices, { id }) => `
+const choices = [
+  {
+    groupName: 'Group 1',
+    options: [
+      {
+        label: 'Choice 1',
+      },
+      {
+        label: 'Choice 2',
+      },
+      {
+        label: 'Choice 3',
+      },
+    ],
+  },
+  {
+    groupName: 'Group 2',
+    options: [
+      {
+        label: 'Choice 4',
+      },
+      {
+        label: 'Choice 5',
+      },
+      {
+        label: 'Choice 6',
+      },
+    ],
+  },
+];
+const script = ({ id }) => `
     (function() {
         const select = document.getElementById("${id}");
         select.choices = ${JSON.stringify(choices)};
     })();
 `;
 export const Select = ({ label, description, disabled, error, errorMessage, mode, truncate, }) => {
-  const choices = [
-    {
-      groupName: 'Group 1',
-      options: [
-        {
-          label: 'Choice 1',
-        },
-        {
-          label: 'Choice 2',
-        },
-        {
-          label: 'Choice 3',
-        },
-      ],
-    },
-    {
-      groupName: 'Group 2',
-      options: [
-        {
-          label: 'Choice 4',
-        },
-        {
-          label: 'Choice 5',
-        },
-        {
-          label: 'Choice 6',
-        },
-      ],
-    },
-  ];
   const id = uuid();
   let attrs = ` id=${id}`;
   if (label)
@@ -92,7 +92,7 @@ export const Select = ({ label, description, disabled, error, errorMessage, mode
                 </xpl-select>
             <div>
         <div>
-    <script>${script(choices, { id })}</script>`;
+    <script>${script({ id })}</script>`;
 };
 Select.parameters = {
   layout: 'centered',
@@ -117,80 +117,3 @@ Select.args = {
   mode: 'single',
   truncate: true,
 };
-export const SelectWValues = ({ label, description, disabled, error, errorMessage, mode, truncate, }) => {
-  const choices = [
-    {
-      label: 'Choice 1',
-      value: 'choice-1',
-    },
-    {
-      label: 'Choice 2',
-      value: 'choice-2',
-    },
-    {
-      label: 'Choice 3',
-      value: 'choice-3',
-    },
-    {
-      label: 'Choice 4',
-      value: 'choice-4',
-    },
-    {
-      label: 'Choice 5',
-      value: 'choice-5',
-    },
-    {
-      label: 'Choice 6',
-      value: 'choice-6',
-    },
-  ];
-  const id = uuid();
-  let attrs = ` id=${id}`;
-  if (label)
-    attrs += ` label="${label}"`;
-  if (description)
-    attrs += ` description="${description}"`;
-  if (mode !== 'single')
-    attrs += ` mode="${mode}"`;
-  if (disabled)
-    attrs += ` disabled`;
-  if (error)
-    attrs += ` error${errorMessage ? '="' + errorMessage + '"' : ''}`;
-  if (mode === 'multi' && !truncate)
-    attrs += ` truncate="false"`;
-  return `
-        <div style="width:75vw">
-            <div style="position: relative; min-width: 200px; width: 100%">
-                <xpl-select${attrs} placeholder="Choose ${mode === 'multi' ? 'Multiple' : 'One'}">
-                </xpl-select>
-            <div>
-        <div>
-    <script>${script(choices, { id })}</script>`;
-};
-SelectWValues.parameters = {
-  layout: 'centered',
-  'web-component': {
-    render: Select,
-  },
-  html: {
-    render() {
-      // let className = "xpl-badge";
-      // if (dot) className += " xpl-badge--dot";
-      // if (variant !== "default") className += " xpl-badge--" + variant;
-      // return `<div class="${className}">${text}</div>`;
-    },
-  },
-  actions: {
-    handles: ['selectChange'],
-  },
-};
-SelectWValues.args = {
-  label: 'Select',
-  description: 'Lorem ipsum dolor sit amet',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  mode: 'single',
-  truncate: true,
-};
-//# sourceMappingURL=select.stories.js.map

package/dist/stories/table.stories.js

@@ -5,16 +5,9 @@ export default {
     freeze: { control: { type: 'boolean' } },
     multiselect: { control: { type: 'boolean' } },
     striped: { control: { type: 'boolean' } },
-    columns: { control: { type: 'array' } },
-    data: { control: { type: 'array' } },
-  },
-  parameters: {
-    actions: {
-      handles: ['tableSelect'],
-    },
   },
 };
-const columnsDefault = [
+const columns = [
   'Name',
   'Total Days Played',
   'Average Days Played',
@@ -22,29 +15,21 @@ const columnsDefault = [
   'Individual Immunity Wins',
   'Votes Against',
 ];
-const dataDefault = [
+const data = [
   ['Boston Rob Mariano', '152', '30.4', 'S4, S8, S20, S22, S40', '9', '24'],
   ['Parvati Shallow', '149', '37.25', 'S13, S16, S20', '4', '17'],
   ['Ozzy Lusth', '128', '32.0', 'S13, S16, S23, S34', '7', '34'],
   ['Cirie Fields', '121', '30.25', 'S12, S16, S20, S34', '2', '9'],
   ['Tyson Apostol', '116.5', '29.1', 'S18, S20, S27, S40', '4', '22'],
 ];
-const selectedValuesDefault = [
-  'boston-rob-mariano',
-  'parvati-shallow',
-  'ozzy-lusth',
-  'cirie-fields',
-  'tyson-apostol',
-];
-const script = ({ columns, data, id, selectedValues }) => `
+const script = ({ id }) => `
     (function() {
         const table = document.getElementById("${id}");
         table.columns = ${JSON.stringify(columns)};
         table.data = ${JSON.stringify(data)};
-        table.selectedValues = ${JSON.stringify(selectedValues)};
     })();
 `;
-export const Table = ({ columns, data, freeze, multiselect, selectedValues, striped, }) => {
+export const Table = ({ freeze, multiselect, striped }) => {
   const id = uuid();
   let attrs = '';
   if (freeze)
@@ -53,7 +38,9 @@ export const Table = ({ columns, data, freeze, multiselect, selectedValues, stri
     attrs += ' multiselect';
   if (striped)
     attrs += ' striped';
-  return `<div style="max-width: 600px;"><xpl-table id="${id}"${attrs}></xpl-table></div><script>${script({ id, columns, data, selectedValues })}</script>`;
+  return `<div style="max-width: 600px;"><xpl-table id="${id}"${attrs}></xpl-table></div><script>${script({
+    id,
+  })}</script>`;
 };
 Table.parameters = {
   layout: 'centered',
@@ -117,8 +104,4 @@ Table.args = {
   freeze: true,
   multiselect: false,
   striped: false,
-  columns: columnsDefault,
-  data: dataDefault,
-  selectedValues: selectedValuesDefault,
 };
-//# sourceMappingURL=table.stories.js.map

package/dist/stories/tabs.stories.js

@@ -22,4 +22,3 @@ export const Tabs = () =>
     </nav>
   </div>`;
 */
-//# sourceMappingURL=tabs.stories.js.map

package/dist/stories/toggle.stories.js

@@ -82,4 +82,3 @@ Toggle.args = {
   description: 'Lorem ipsum dolor sit amet',
   disabled: false,
 };
-//# sourceMappingURL=toggle.stories.js.map

package/dist/stories/utility-bar.stories.js

@@ -21,7 +21,12 @@ const Story = ({ mainSlot, asideSlot }) => `
         </xpl-utility-bar>
     </div>
 `;
-const setMainSlot = () => `<li><xpl-icon icon="three-bars" size="30"></xpl-icon></li>`;
+// This is a temporary hack to include a fontawesome icon as an example in this story. Icons will eventually be their own apollo component (or pure fontawesome).
+// When that happens we should update this story to use the component instead of the following svg.
+const bars = `
+    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
+`;
+const setMainSlot = () => `<li>${bars}</li>`;
 const setAsideSlot = (isMobile) => `
     <li>
         <xpl-button
@@ -87,4 +92,3 @@ UtilityBarDesktop.args = {
 UtilityBarDesktop.parameters = Object.assign({}, globalParams);
 UtilityBarDesktop.storyName = 'Desktop';
 // END: Story for Utility Bar on Desktop
-//# sourceMappingURL=utility-bar.stories.js.map

package/dist/types/Users/{roc/Sites → fernandogelin/Projects/apollo-admin/packages}/apollo/.stencil/stories/application-shell.stories.d.ts

@@ -23,33 +23,25 @@ declare const _default: {
         type: string;
       };
     };
-    isNavOpenAtStartup: {
-      options: boolean[];
-      control: {
-        type: string;
-      };
-    };
   };
 };
 export default _default;
 interface ApplicationShellProps {
-  contentSize: string;
-  isNavOpenAtStartup: boolean;
   navWidth: string;
   showSecondaryNav: boolean;
   showUtilityBar: boolean;
+  contentSize: string;
 }
 export declare const ApplicationShell: {
-  ({ contentSize, isNavOpenAtStartup, navWidth, showSecondaryNav, showUtilityBar, }: ApplicationShellProps): string;
+  ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }: ApplicationShellProps): string;
   parameters: {
     layout: string;
     'web-component': {
-      render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, isNavOpenAtStartup, }: {
+      render: ({ navWidth, showSecondaryNav, showUtilityBar, contentSize, }: {
         navWidth: any;
         showSecondaryNav: any;
         showUtilityBar: any;
         contentSize: any;
-        isNavOpenAtStartup: any;
       }) => string;
     };
     html: {
@@ -62,10 +54,9 @@ export declare const ApplicationShell: {
     };
   };
   args: {
-    contentSize: string;
-    isNavOpenAtStartup: boolean;
     navWidth: string;
-    showSecondaryNav: boolean;
     showUtilityBar: boolean;
+    showSecondaryNav: boolean;
+    contentSize: string;
   };
 };

package/dist/types/Users/{roc/Sites → fernandogelin/Projects/apollo-admin/packages}/apollo/.stencil/stories/dropdown.stories.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Simple: {
-  ({ closeOnSelect, isOpen: open, mode, selectOnFocus, options, }: Components.XplDropdown): string;
+  ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }: Components.XplDropdown): string;
   parameters: {
     layout: string;
     'web-component': {
@@ -24,22 +24,6 @@ export declare const Simple: {
     isOpen: boolean;
     mode: string;
     selectOnFocus: boolean;
-    options: ({
-      label: string;
-      value: string;
-      isSelected?: undefined;
-      isDisabled?: undefined;
-    } | {
-      label: string;
-      value: string;
-      isSelected: boolean;
-      isDisabled?: undefined;
-    } | {
-      label: string;
-      value: string;
-      isDisabled: boolean;
-      isSelected?: undefined;
-    })[];
   };
 };
 export declare const SimpleWithChildren: {

package/dist/types/Users/fernandogelin/Projects/apollo-admin/packages/apollo/.stencil/stories/select.stories.d.ts

@@ -0,0 +1,74 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    label: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    description: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    disabled: {
+      type: {
+        name: string;
+      };
+    };
+    error: {
+      type: {
+        name: string;
+      };
+    };
+    errorMessage: {
+      type: {
+        name: string;
+        required: boolean;
+      };
+    };
+    mode: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    truncate: {
+      type: {
+        name: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Select: {
+  ({ label, description, disabled, error, errorMessage, mode, truncate, }: {
+    label: any;
+    description: any;
+    disabled: any;
+    error: any;
+    errorMessage: any;
+    mode: any;
+    truncate: any;
+  }): string;
+  parameters: {
+    layout: string;
+    'web-component': {
+      render: any;
+    };
+    html: {
+      render(): void;
+    };
+  };
+  args: {
+    label: string;
+    description: string;
+    disabled: boolean;
+    error: boolean;
+    errorMessage: string;
+    mode: string;
+    truncate: boolean;
+  };
+};

package/dist/types/Users/{roc/Sites → fernandogelin/Projects/apollo-admin/packages}/apollo/.stencil/stories/table.stories.d.ts

@@ -16,31 +16,13 @@ declare const _default: {
         type: string;
       };
     };
-    columns: {
-      control: {
-        type: string;
-      };
-    };
-    data: {
-      control: {
-        type: string;
-      };
-    };
-  };
-  parameters: {
-    actions: {
-      handles: string[];
-    };
   };
 };
 export default _default;
 export declare const Table: {
-  ({ columns, data, freeze, multiselect, selectedValues, striped, }: {
-    columns: any;
-    data: any;
+  ({ freeze, multiselect, striped }: {
     freeze: any;
     multiselect: any;
-    selectedValues: any;
     striped: any;
   }): string;
   parameters: {
@@ -63,8 +45,5 @@ export declare const Table: {
     freeze: boolean;
     multiselect: boolean;
     striped: boolean;
-    columns: string[];
-    data: string[][];
-    selectedValues: string[];
   };
 };

package/dist/types/components/xpl-application-shell/xpl-application-shell.d.ts

@@ -13,17 +13,12 @@ export declare class XplApplicationShell {
    */
   navWidth: string;
   /**
-   * @property {boolean} - * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
-   */
-  isNavOpenAtStartup: boolean;
-  /**
-   * @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.
+   * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
    */
   navOpen: boolean;
   navToggleHandler(): void;
   navWithHandler(event: any): void;
   onWindowResize(): void;
   connectedCallback(): void;
-  componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/xpl-choicelist/choice.d.ts

@@ -1,6 +1,6 @@
-export interface Choice {
-  checked?: boolean;
-  children?: Choice[];
-  description?: string;
-  label?: string;
+interface Choice {
+    checked?: boolean;
+    children?: Choice[];
+    description?: string;
+    label?: string;
 }

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

@@ -1,9 +1,8 @@
-import { Choice } from './choice';
 export declare class XplChoicelist {
   /**
    * An array of choices to be displayed in the list.
    * Each choice should be an object with keys:
-   * - `checked` [boolean] - whether to pre-check or not
+   * - `checked` [boolean] - whether to precheck or not
    * - `children` [Choice[]] - an array of child choices (recursive)
    * - `description` [string]
    * - `label` [string]

package/dist/types/components/xpl-dropdown/dropdownoption.d.ts

@@ -1,11 +1,12 @@
-export interface DropdownOption {
-  label: string;
-  value?: string;
-  isSelected?: boolean;
-  isDisabled?: boolean;
+interface DropdownOption {
+    label: string;
+    isSelected?: boolean;
+    isDisabled?: boolean;
 }
-export type DropdownItem = Partial<DropdownOption & DropdownOptionGroup>;
-export interface DropdownOptionGroup {
-  groupName: string;
-  options: DropdownItem[];
+
+type DropdownItem = Partial<DropdownOption & DropdownOptionGroup>;
+
+interface DropdownOptionGroup {
+    groupName: string;
+    options: DropdownItem[];
 }

package/dist/types/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.d.ts

@@ -1,4 +1,3 @@
-import type { DropdownOptionGroup } from '../dropdownoption';
 export declare class XplDropdownGroup {
   /** text to display as heading */
   groupName: string;

package/dist/types/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.d.ts

@@ -1,14 +1,8 @@
 export declare class XplDropdownOption {
   /** whether option is disabled */
   isDisabled?: boolean;
-  /**
-   * text to display for option
-   */
+  /** text to display for option */
   label: string;
-  /**
-   * The selected options value to be submitted with the form, should this option be selected.
-   */
-  value?: string;
   /** whether option is selected */
   isSelected?: boolean;
   hostElement: HTMLXplDropdownOptionElement;

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

@@ -1,5 +1,3 @@
-import type { DropdownItem } from './dropdownoption';
-import type { XplDropdownOption } from './xpl-dropdown-option/xpl-dropdown-option';
 export declare class XplDropdown {
   /** text to display as heading */
   isOpen: boolean;
@@ -19,15 +17,15 @@ export declare class XplDropdown {
    * @param {Object} options - component
    */
   /** call back function invoked when a selection is made */
-  update?: (e: any, { component }: {
-    component: XplDropdown;
+  update?: (e: Event, { component: XplDropdown }: {
+    component: any;
   }) => void;
   hostElement: HTMLXplDropdownElement;
   /**
-   * called on dropdown option click and keydown events to update isSelected states
+   * called on dropdown option click and keydown events  to update isSelected states
    */
-  handleSelect(e: any, { component }: {
-    component: XplDropdownOption;
+  handleSelect(e: Event, { component }: {
+    component: any;
   }): Promise<void>;
   private handleClickOutside;
   componentWillLoad(): void;

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

@@ -1,3 +1,5 @@
+import '../../../font-awesome/fontawesome';
+import '../../../font-awesome/regular';
 export declare class XplInput {
   /**
    * Because `id` is a reserved HTMLElement attribute,

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

@@ -1,16 +1,20 @@
-export interface ListItem {
-  avatar?: string;
-  avatars?: string[];
-  badges?: string[] | {
-    dot?: boolean;
-    text: string;
-    variant?: string;
-  }[];
-  href?: string;
-  title: string;
-  metadata?: string[] | {
-    icon: string;
-    text: string;
-  }[];
-  subtext?: string;
+interface ListItem {
+    avatar?: string;
+    avatars?: string[];
+    badges?:
+        | string[]
+        | {
+              dot?: boolean;
+              text: string;
+              variant?: string;
+          }[];
+    href?: string;
+    title: string;
+    metadata?:
+        | string[]
+        | {
+              icon: string;
+              text: string;
+          }[];
+    subtext?: string;
 }

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

@@ -1,4 +1,5 @@
-import type { ListItem } from './listitem';
+import '../../../font-awesome/fontawesome';
+import '../../../font-awesome/regular';
 export declare class XplList {
   /**
    * `items` should be an array of objects with the following signature:
@@ -13,7 +14,7 @@ export declare class XplList {
    *   href?: string;          // A URL, if this list item is meant to link somewhere.
    *   title: string;          // The text to be displayed for the list item.
    *   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed
-   *     icon: string;         // Apollo icons) to be displayed as metadata below the title.
+   *     icon: string;         // Font Awesome icons) to be displayed as metadata below the title.
    *     text: string;
    *   }[];
    *   subtext?: string;       // Subtext to be displayed on the right.

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

@@ -0,0 +1,3 @@
+interface SelectChoice extends DropdownItem {
+    value?: string;
+}