@scania/tegel 0.0.8 → 0.0.10

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

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableFooter {
+  /** Enable pagination and show pagination controls  */
+  pagination: boolean;
+  /** Sets the default page number. */
+  defaultPage: number;
+  /** Sets the number of pages. */
+  pages: number;
+  /** @deprecated Used to set rows per page, this also enabled automatic pagination of the table. */
+  rowsPerPage: number;
+  /** <b>Client override</b> Used to set the number of columns, use as fallback if the automatic count of columns fail. */
+  cols: number;
+  /** State that memorize number of columns to display colSpan correctly - set from parent level */
+  columnsNumber: number;
+  /** Total number of pages, number of the rows divided with number of rows per page */
+  numberOfPages: number;
+  /** Temporarily disable pagination - due to search - set from parent level */
+  tempPaginationDisable: boolean;
+  compactDesign: boolean;
+  tableId: string;
+  host: HTMLElement;
+  private inputElement;
+  private tableEl;
+  /** Event to send current page value to tds-table-body component, can also be listened to in order to implement custom pagination logic. */
+  tdsPageChange: EventEmitter<{
+    tableId: string;
+    paginationValue: number;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  private previousPage;
+  private nextPage;
+  private paginationInputChange;
+  tdsPaginationListener(event: CustomEvent<any>): void;
+  runPagination: () => void;
+  render(): any;
+}

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

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableHeaderRow {
+  enableMultiselect: boolean;
+  enableExpandableRows: boolean;
+  mainCheckboxSelected: boolean;
+  mainExpendSelected: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  enableToolbarDesign: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** @internal Send status of the main checkbox in header to the parent, tds-table component */
+  internalTdsMainCheckboxSelect: EventEmitter<any>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  internalTdsMainCheckboxChangeListener(event: CustomEvent<any>): void;
+  internalTdsRowExpandedListener(event: CustomEvent<any>): void;
+  bodyExpandClicked(): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  headCheckBoxClicked(event: any): void;
+  render(): any;
+}

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

@@ -0,0 +1,68 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableHeaderCell {
+  /** The value of column key, usually comes from JSON, needed for sorting */
+  columnKey: string;
+  /** Text that displays in column cell */
+  columnTitle: string;
+  /** In case noMinWidth setting, user has to specify width value for each column, for example, "150px" */
+  customWidth: string;
+  /** If passed as prop, enables sorting on that column */
+  sortable: boolean;
+  /** Setting for text align, default is left, but user can pass "right" as string - useful for numeric values */
+  textAlign: string;
+  textAlignState: string;
+  sortingDirection: 'asc' | 'desc';
+  sortedByMyKey: boolean;
+  disableSortingBtn: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  enableMultiselect: boolean;
+  enableToolbarDesign: boolean;
+  tableId: string;
+  enableExpandableRows: boolean;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to in order to implement custom-sorting logic. */
+  tdsSortChange: EventEmitter<{
+    tableId: string;
+    columnKey: string;
+    sortingDirection: 'asc' | 'desc';
+  }>;
+  /** @internal Sends unique Table identifier, column key and sorting direction to the tds-table-body component,
+   * can also be listened to in order to implement custom-sorting logic. */
+  internalSortButtonClicked: EventEmitter<{
+    tableId: string;
+    key: string;
+  }>;
+  /** @internal Sends unique Table identifier, column key and sorting direction to the tds-table-body component,
+   *  can also be listened to in order to implement custom-sorting logic. */
+  internalTdsSortChange: EventEmitter<{
+    tableId: string;
+    columnKey: string;
+    sortingDirection: 'asc' | 'desc';
+  }>;
+  /** @internal Sends unique Table identifier,
+   * column key and text align value so the body cells with a same key take the same text alignment as header cell */
+  internalTdsTextAlign: EventEmitter<any>;
+  /** @internal Sends unique Table identifier,
+   * column key so the body cells with the same key change background when user hovers over header cell */
+  internalTdsHover: EventEmitter<{
+    tableId: string;
+    key: string;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  internalTdsSortingChangeListener(event: CustomEvent<any>): void;
+  updateOptionsContent(event: CustomEvent<{
+    tableId: string;
+    key: string;
+  }>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  sortButtonClick: () => void;
+  headerCellContent: () => any;
+  onHeadCellHover: (key: any) => void;
+  render(): any;
+}

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

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+/**
+ * @slot end  - Slot for the end (right side) of the Table Toolbar.
+ */
+export declare class TdsTableToolbar {
+  /** Adds title to the Table */
+  tableTitle: string;
+  /** Enables preview of searchbar */
+  enableFiltering: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Used for sending users' input to the main parent tds-table the component,
+   * can also be listened to in order to implement custom sorting logic. */
+  tdsFilterChange: EventEmitter<{
+    tableId: string;
+    query: string;
+  }>;
+  /** @internal Internal event to notify tds-table-body that a filter/search has been made. */
+  internalTdsFilter: EventEmitter<{
+    tableId: string;
+    query: string;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  searchFunction(event: any): void;
+  render(): any;
+}

package/dist/types/components/tabs/folder-tabs/folder-tab/folder-tab.d.ts

@@ -0,0 +1,11 @@
+export declare class TdsFolderTab {
+  /** Disables the Tab. */
+  disabled: boolean;
+  selected: boolean;
+  tabWidth: number;
+  /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
+  setTabWidth(width: number): Promise<void>;
+  /** @internal Method to set the tab as selected. Used by the <tds-folder-tabs> */
+  setSelected(selected: boolean): Promise<void>;
+  render(): any;
+}

package/dist/types/components/tabs/folder-tabs/folder-tabs.d.ts

@@ -1,12 +1,12 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class InlineTabs {
+export declare class TdsFolderTabs {
   host: HTMLElement;
-  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  /** Variant of the Tabs, primary= on white, secondary= on grey50 */
   modeVariant: 'primary' | 'secondary';
-  /** Sets the default selected tab. */
+  /** Sets the default selected Tab. */
   defaultSelectedIndex: number;
-  /** Sets the selected tab.
-   * If this is set all tab changes needs to be handled by the user. */
+  /** Sets the selected Tab.
+   * If this is set, all Tab changes need to be handled by the user. */
   selectedIndex: number;
   buttonWidth: number;
   showLeftScroll: boolean;
@@ -16,11 +16,11 @@ export declare class InlineTabs {
   private buttonsWidth;
   private scrollWidth;
   private children;
-  /** Event emitted when the selected tab is changed. */
-  sddsChange: EventEmitter<{
+  /** Event emitted when the selected Tab is changed. */
+  tdsChange: EventEmitter<{
     selectedTabIndex: number;
   }>;
-  /** Sets the passed tabindex as the selected tab. */
+  /** Sets the passed tabindex as the selected Tab. */
   selectTab(tabIndex: number): Promise<{
     selectedTabIndex: number;
   }>;

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

@@ -0,0 +1,69 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      'Folder Tabs': any;
+      'Folder Tabs item': any;
+    };
+    backgrounds: {
+      default: string;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    defaultSelectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    selectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+    backgrounds: {
+      table: {
+        disable: boolean;
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    defaultSelectedIndex: string;
+    selectedIndex: string;
+  };
+};
+export default _default;
+export declare const FolderTabs: any;

package/dist/types/components/tabs/inline-tabs/inline-tab/inline-tab.d.ts

@@ -0,0 +1,8 @@
+export declare class TdsInlineTab {
+  /** Disables the Tab. */
+  disabled: boolean;
+  selected: boolean;
+  /** @internal Method to set the Tab as selected. Used by the <tds-inline-tabs> */
+  setSelected(selected: boolean): Promise<void>;
+  render(): any;
+}

package/dist/types/components/tabs/inline-tabs/inline-tabs.d.ts

@@ -1,12 +1,12 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class InlineTabsFullbleed {
+export declare class TdsInlineTabs {
   host: HTMLElement;
-  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  /** Variant of the Tabs, primary= on white, secondary= on grey50 */
   modeVariant: 'primary' | 'secondary';
-  /** Sets the default selected tab. */
+  /** Sets the default selected Tab. */
   defaultSelectedIndex: number;
-  /** Sets the selected tab.
-   * If this is set all tab changes needs to be handled by the user. */
+  /** Sets the selected Tab.
+   * If this is set, all Tab changes need to be handled by the user. */
   selectedIndex: number;
   showLeftScroll: boolean;
   showRightScroll: boolean;
@@ -16,10 +16,10 @@ export declare class InlineTabsFullbleed {
   private buttonsWidth;
   private scrollWidth;
   private children;
-  sddsChange: EventEmitter<{
+  tdsChange: EventEmitter<{
     selectedTabIndex: number;
   }>;
-  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  /** Selects a Tab based on tabindex, will not select a disabled Tab. */
   selectTab(tabIndex: number): Promise<{
     selectedTabIndex: number;
   }>;

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

@@ -0,0 +1,61 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      'Inline tabs': any;
+      'Inline tab': any;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    defaultSelectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    selectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    defaultSelectedIndex: string;
+    selectedIndex: string;
+  };
+};
+export default _default;
+export declare const InlineTabs: any;

package/dist/types/components/tabs/navigation-tabs/navigation-tab/navigation-tab.d.ts

@@ -0,0 +1,8 @@
+export declare class TdsNavigationTab {
+  /** Disables the Tab. */
+  disabled: boolean;
+  selected: boolean;
+  /** @internal Method to set the Tab as selected. Used by the <tds-navigation-tabs> */
+  setSelected(selected: boolean): Promise<void>;
+  render(): any;
+}

package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts

@@ -1,13 +1,13 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class NavigationTabs {
-  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+export declare class TdsNavigationTabs {
+  host: HTMLElement;
+  /** Variant of the Tabs, primary= on white, secondary= on grey50 */
   modeVariant: 'primary' | 'secondary';
-  /** Sets the default selected tab. */
+  /** Sets the default selected Tab. */
   defaultSelectedIndex: number;
-  /** Sets the selected tab.
-   * If this is set all tab changes needs to be handled by the user. */
+  /** Sets the selected Tab.
+   * If this is set, all Tab changes need to be handled by the user. */
   selectedIndex: number;
-  host: HTMLElement;
   showLeftScroll: boolean;
   showRightScroll: boolean;
   private navWrapperElement;
@@ -15,12 +15,12 @@ export declare class NavigationTabs {
   private buttonsWidth;
   private scrollWidth;
   private children;
-  /** Sets the passed tabindex as the selected tab. */
+  /** Sets the passed tabindex as the selected Tab. */
   selectTab(tabIndex: number): Promise<{
     selectedTabIndex: number;
   }>;
-  /** Event emitted when the selected tab is changed. */
-  sddsChange: EventEmitter<{
+  /** Event emitted when the selected Tab is changed. */
+  tdsChange: EventEmitter<{
     selectedTabIndex: number;
   }>;
   scrollRight(): void;

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

@@ -0,0 +1,61 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      'Navigation Tabs': any;
+      'Navigation Tab': any;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    defaultSelectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    selectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    defaultSelectedIndex: string;
+    selectedIndex: string;
+  };
+};
+export default _default;
+export declare const NavigationTabs: any;

package/dist/types/components/text-field/text-field.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot prefix - Slot for the prefix in the Text Field
+ * @slot suffix - Slot for the suffix in the Text Field
+ */
+export declare class TdsTextField {
+  host: HTMLElement;
+  /** Text input for focus state */
+  textInput?: HTMLInputElement;
+  /** Which input type, text, password or similar */
+  type: 'text' | 'password';
+  /** Position of the label for the Text Field. */
+  labelPosition: 'inside' | 'outside' | 'no-label';
+  /** Label text */
+  label: string;
+  /** Helper text */
+  helper: string;
+  /** Placeholder text */
+  placeholder: string;
+  /** Value of the input text */
+  value: string;
+  /** Set input in disabled state */
+  disabled: boolean;
+  /** Set input in readonly state */
+  readOnly: boolean;
+  /** Size of the input */
+  size: 'sm' | 'md' | 'lg';
+  /** Mode variant of the Text Field */
+  modeVariant: 'primary' | 'secondary';
+  /** With setting */
+  noMinWidth: boolean;
+  /** Name property */
+  name: string;
+  /** Error state of input */
+  state: 'error' | 'success' | 'default';
+  /** Max length of input */
+  maxLength: number;
+  /** Autofocus for input */
+  autofocus: boolean;
+  /** Listen to the focus state of the input */
+  focusInput: any;
+  /** Change event for the Text Field */
+  tdsChange: EventEmitter;
+  handleChange(event: any): void;
+  /** Input event for the Text Field */
+  tdsInput: EventEmitter<InputEvent>;
+  handleInput(event: any): void;
+  /** Focus event for the Text Field */
+  tdsFocus: EventEmitter<FocusEvent>;
+  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+  handleFocus(event: any): void;
+  /** Blur event for the Text Field */
+  tdsBlur: EventEmitter<FocusEvent>;
+  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+  handleBlur(event: any): void;
+  render(): any;
+}