@scania/tegel 0.0.1-beta

package/dist/types/components/card/card.stories.d.ts

@@ -0,0 +1,114 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    headline: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    subheadline: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    text: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    divider: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    footer: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    clickable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    image: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    imageTop: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    avatar: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+  };
+  args: {
+    headline: string;
+    subheadline: string;
+    text: string;
+    divider: boolean;
+    footer: string;
+    clickable: boolean;
+    image: boolean;
+    imageTop: boolean;
+    avatar: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;
+export declare const SupportText: any;
+export declare const Divider: any;
+export declare const Link: any;
+export declare const Button: any;
+export declare const Image: any;
+export declare const Avatar: any;

package/dist/types/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,39 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    checked: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    label: {
+      name: string;
+      description: string;
+      type: string;
+    };
+  };
+  args: {
+    disabled: boolean;
+    checked: boolean;
+    label: string;
+  };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/chips/chips.stories.d.ts

@@ -0,0 +1,81 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    placeholderText: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    icon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    iconType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    iconPosition: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    state: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    size: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+  };
+  args: {
+    placeholderText: string;
+    icon: boolean;
+    iconType: string;
+    iconPosition: string;
+    state: string;
+    size: string;
+  };
+};
+export default _default;
+export declare const Default: any;
+export declare const IconRight: any;
+export declare const IconLeft: any;
+export declare const Active: any;
+export declare const Small: any;

package/dist/types/components/data-table/native-table.stories.d.ts

@@ -0,0 +1,147 @@
+declare const _default: {
+  title: string;
+  argTypes: {
+    tableTitle: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    isCompact: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    dividers: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    onWhiteBG: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    responsiveTable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    noMinWidthArg: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    column1Width: {
+      name: string;
+      description: string;
+      type: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column2Width: {
+      name: string;
+      description: string;
+      type: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column3Width: {
+      name: string;
+      description: string;
+      type: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column4Width: {
+      name: string;
+      description: string;
+      type: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+  };
+  args: {
+    tableTitle: string;
+    isCompact: boolean;
+    dividers: boolean;
+    onWhiteBG: boolean;
+    noMinWidthArg: boolean;
+    responsiveTable: boolean;
+    column1Width: string;
+    column2Width: string;
+    column3Width: string;
+    column4Width: string;
+  };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components/data-table/table/table.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+declare type Props = {
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  enableMultiselect: boolean;
+  enableExpandableRows: boolean;
+  enableResponsive: boolean;
+};
+export declare type TablePropsChangedEvent = {
+  tableId: string;
+  changed: Array<keyof Props>;
+} & Partial<Props>;
+export declare class Table {
+  /** Enables style with vertical dividers between columns */
+  verticalDividers: boolean;
+  /** Enables style where data-table toolbar, rows and footer are less high */
+  compactDesign: boolean;
+  /** Enables to customise width on data-table columns */
+  noMinWidth: boolean;
+  /** Changes a colors of data data-table when used on white background */
+  whiteBackground: boolean;
+  /** Enables multiselect feature of data-table */
+  enableMultiselect: boolean;
+  /** Enables extended row feature of data-table */
+  enableExpandableRows: boolean;
+  /** Enables table to take 100% available width with equal spacing of columns */
+  enableResponsive: boolean;
+  /** ID used for internal table functionality and events, must be unique.
+   *
+   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.
+   */
+  tableId: string;
+  host: HTMLElement;
+  /** Broadcasts changes to the tables props */
+  tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;
+  emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]): void;
+  enableMultiselectChanged(newValue: boolean): void;
+  enableExpandableRowsChanged(newValue: boolean): void;
+  compactDesignChanged(newValue: boolean): void;
+  verticalDividersChanged(newValue: boolean): void;
+  noMinWidthChanged(newValue: boolean): void;
+  whiteBackgroundChanged(newValue: boolean): void;
+  render(): any;
+}
+export {};

package/dist/types/components/data-table/table-body/table-body.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { TablePropsChangedEvent } from '../table/table';
+export declare class TableBody {
+  /** Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term */
+  disableFilteringFunction: boolean;
+  /** Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting */
+  disableSortingFunction: boolean;
+  /** Prop to pass JSON string which enables automatic rendering of table rows and cells  */
+  bodyData: any;
+  /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */
+  enableDummyData: boolean;
+  dummyData: any;
+  host: HTMLElement;
+  rowsPerPage: number;
+  enableMultiselect: boolean;
+  enablePaginationTableBody: boolean;
+  enableExpandableRows: boolean;
+  innerBodyData: any[];
+  bodyDataManipulated: any[];
+  bodyDataOriginal: any[];
+  multiselectArray: any[];
+  multiselectArrayJSON: string;
+  mainCheckboxStatus: boolean;
+  columnsNumber: number;
+  disableAllSorting: boolean;
+  numberOfPages: number;
+  paginationValue: number;
+  tempPaginationDisable: boolean;
+  showNoResultsMessage: boolean;
+  tableId: string;
+  tableEl: HTMLSddsTableElement;
+  arrayDataWatcher(newValue: string): void;
+  /** Event that sends unique table identifier and enable/disable status for sorting functionality */
+  sortingSwitcherEvent: EventEmitter<any>;
+  /** Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */
+  updateBodyCheckboxesEvent: EventEmitter<any>;
+  /** Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used */
+  updateMainCheckboxEvent: EventEmitter<any>;
+  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
+  static compareValues(key: any, order?: string): (a: any, b: any) => number;
+  uncheckAll: () => void;
+  sortData(keyValue: any, sortingDirection: any): void;
+  updateOptionsContent(event: CustomEvent<any>): void;
+  selectedDataExporter: () => void;
+  headCheckboxListener(event: CustomEvent<any>): void;
+  bodyCheckBoxClicked: () => void;
+  bodyCheckboxListener(): void;
+  searchFunction(searchTerm: any): void;
+  tableFilteringTermListener(event: CustomEvent<any>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  render(): any;
+}

package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts

@@ -0,0 +1,24 @@
+import { TablePropsChangedEvent } from '../table/table';
+export declare class TableBodyCell {
+  /** Value that will be presented as text inside a cell */
+  cellValue: string | number;
+  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */
+  cellKey: any;
+  /** Disables internal padding. Useful when passing other components to cell. */
+  disablePadding: boolean;
+  textAlignState: string;
+  activeSorting: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLSddsTableElement;
+  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
+  headCellHoverEventListener(event: CustomEvent<any>): void;
+  textAlignEventListener(event: CustomEvent<any>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/data-table/table-body-row/table-body-row.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { TablePropsChangedEvent } from '../table/table';
+export declare class TableBodyRow {
+  enableMultiselect: boolean;
+  bodyCheckBoxStatus: boolean;
+  mainCheckBoxStatus: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLSddsTableElement;
+  bodyCheckBoxClicked(event: any): void;
+  bodyCheckBoxStatusUpdater(status: any): void;
+  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
+  /** Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */
+  bodyRowToTable: EventEmitter<boolean>;
+  /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */
+  runPaginationEvent: EventEmitter<string>;
+  headCheckboxListener(event: CustomEvent<any>): void;
+  updateBodyCheckboxesEventListener(event: CustomEvent<any>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { TablePropsChangedEvent } from '../table/table';
+export declare class TableBodyRowExpandable {
+  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */
+  colSpan: number;
+  isExpanded: boolean;
+  tableId: string;
+  columnsNumber: number;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  host: HTMLElement;
+  tableEl: HTMLSddsTableElement;
+  /** Sends out status of itw own expended status feature to table header component */
+  singleRowExpandedEvent: EventEmitter<any>;
+  /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */
+  runPaginationEvent: EventEmitter<string>;
+  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  sendValue(): void;
+  onChangeHandler(event: any): void;
+  render(): any;
+}

package/dist/types/components/data-table/table-component-basic.stories.d.ts

@@ -0,0 +1,100 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      'sdds-table': any;
+      'sdds-table-toolbar': any;
+      'sdds-header': any;
+      'sdds-header-cell': any;
+      'sdds-table-body': any;
+      'sdds-body-row': any;
+      'sdds-body-row-expandable': any;
+      'sdds-body-cell': any;
+      'sdds-table-footer': any;
+    };
+  };
+  argTypes: {
+    verticalDivider: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    compactDesign: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    onWhiteBackground: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    responsiveDesign: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    disablePadding: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    noMinWidth: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
+  args: {
+    compactDesign: boolean;
+    onWhiteBackground: boolean;
+    verticalDivider: boolean;
+    responsiveDesign: boolean;
+    disablePadding: boolean;
+    noMinWidth: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;