@scania/tegel 0.0.34 → 0.0.52

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

@@ -14,19 +14,20 @@ declare const _default: {
     };
   };
   argTypes: {
-    enableMultiselect: {
+    modeVariant: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
       table: {
         defaultValue: {
-          summary: boolean;
+          summary: string;
         };
       };
     };
-    verticalDivider: {
+    compactDesign: {
       name: string;
       description: string;
       control: {
@@ -38,7 +39,7 @@ declare const _default: {
         };
       };
     };
-    compactDesign: {
+    responsiveDesign: {
       name: string;
       description: string;
       control: {
@@ -50,20 +51,19 @@ declare const _default: {
         };
       };
     };
-    modeVariant: {
+    enableMultiselect: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      options: string[];
       table: {
         defaultValue: {
-          summary: string;
+          summary: boolean;
         };
       };
     };
-    responsiveDesign: {
+    verticalDivider: {
       name: string;
       description: string;
       control: {
@@ -81,20 +81,63 @@ declare const _default: {
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
+    };
+    column1Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column2Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column3Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column4Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
       };
     };
   };
   args: {
     modeVariant: string;
     compactDesign: boolean;
-    verticalDivider: boolean;
     responsiveDesign: boolean;
-    noMinWidth: boolean;
     enableMultiselect: boolean;
+    verticalDivider: boolean;
+    noMinWidth: boolean;
+    column1Width: string;
+    column2Width: string;
+    column3Width: string;
+    column4Width: string;
   };
 };
 export default _default;

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

@@ -14,15 +14,16 @@ declare const _default: {
     };
   };
   argTypes: {
-    verticalDivider: {
+    modeVariant: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
       table: {
         defaultValue: {
-          summary: boolean;
+          summary: string;
         };
       };
     };
@@ -38,20 +39,19 @@ declare const _default: {
         };
       };
     };
-    modeVariant: {
+    responsiveDesign: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      options: string[];
       table: {
         defaultValue: {
-          summary: string;
+          summary: boolean;
         };
       };
     };
-    responsiveDesign: {
+    rowsPerPageControl: {
       name: string;
       description: string;
       control: {
@@ -59,11 +59,11 @@ declare const _default: {
       };
       table: {
         defaultValue: {
-          summary: boolean;
+          summary: number;
         };
       };
     };
-    noMinWidth: {
+    verticalDivider: {
       name: string;
       description: string;
       control: {
@@ -71,30 +71,73 @@ declare const _default: {
       };
       table: {
         defaultValue: {
-          summary: string;
+          summary: boolean;
         };
       };
     };
-    rowsPerPageControl: {
+    noMinWidth: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: number;
-        };
+    };
+    column1Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column2Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column3Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+    };
+    column4Width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: boolean;
       };
     };
   };
   args: {
     modeVariant: string;
     compactDesign: boolean;
-    verticalDivider: boolean;
     responsiveDesign: boolean;
     rowsPerPageControl: number;
+    verticalDivider: boolean;
     noMinWidth: boolean;
+    column1Width: string;
+    column2Width: string;
+    column3Width: string;
+    column4Width: string;
   };
 };
 export default _default;

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

@@ -14,12 +14,18 @@ declare const _default: {
     };
   };
   argTypes: {
-    verticalDivider: {
+    modeVariant: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
     compactDesign: {
       name: string;
@@ -27,26 +33,83 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
-    modeVariant: {
+    responsiveDesign: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      options: string[];
       table: {
         defaultValue: {
-          summary: string;
+          summary: boolean;
         };
       };
     };
-    responsiveDesign: {
+    column1sortable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    column2sortable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    column3sortable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    column4sortable: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    verticalDivider: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
     noMinWidth: {
       name: string;
@@ -55,45 +118,65 @@ declare const _default: {
         type: string;
       };
     };
-    column1sortable: {
+    column1Width: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
     };
-    column2sortable: {
+    column2Width: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
     };
-    column3sortable: {
+    column3Width: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
     };
-    column4sortable: {
+    column4Width: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
     };
   };
   args: {
     modeVariant: string;
-    verticalDivider: boolean;
     compactDesign: boolean;
     responsiveDesign: boolean;
     column1sortable: boolean;
     column2sortable: boolean;
     column3sortable: boolean;
     column4sortable: boolean;
+    verticalDivider: boolean;
     noMinWidth: boolean;
+    column1Width: string;
+    column2Width: string;
+    column3Width: string;
+    column4Width: string;
   };
 };
 export default _default;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { TablePropsChangedEvent } from '../table/table';
+import { InternalSddsTablePropChange } from '../table/table';
 export declare class TableFooter {
   /** Enable pagination and show pagination controls  */
   enablePagination: boolean;
@@ -30,18 +30,18 @@ export declare class TableFooter {
   tableId: string;
   host: HTMLElement;
   tableEl: HTMLSddsTableElement;
-  /** Event that footer sends out in order to receive other necessary information from other subcomponents */
-  enablePaginationEvent: EventEmitter<any>;
-  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
+  /** @internal Event that footer sends out in order to receive other necessary information from other subcomponents */
+  internalSddsEnablePagination: EventEmitter<any>;
+  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>): void;
   connectedCallback(): void;
   componentWillLoad(): void;
   paginationPrev: (event: any) => void;
   paginationNext: (event: any) => void;
   paginationInputChange(event: any): void;
-  runPaginationEventListener(event: CustomEvent<any>): void;
+  sddsPaginationListener(event: CustomEvent<any>): void;
   runPagination: () => void;
-  /** Event to send current page value back to sdds-table-body component */
-  currentPageValueEvent: EventEmitter<any>;
+  /** Event to send current page value back to sdds-table-body component, can also be listened to in order to implement custom pagination logic. */
+  sddsPageChange: EventEmitter<any>;
   sendPaginationValue(value: any): void;
   clientPaginationPrev: (event: any) => void;
   clientPaginationNext: (event: any) => void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { TablePropsChangedEvent } from '../table/table';
+import { InternalSddsTablePropChange } from '../table/table';
 export declare class TableHeaderRow {
   enableMultiselect: boolean;
   enableExpandableRows: boolean;
@@ -13,11 +13,11 @@ export declare class TableHeaderRow {
   tableId: string;
   host: HTMLElement;
   tableEl: HTMLSddsTableElement;
-  /** Send status of main checkbox in header to the parent, sdds-table component */
-  mainCheckboxSelectedEvent: EventEmitter<any>;
-  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
-  updateMainCheckboxEventListener(event: CustomEvent<any>): void;
-  singleRowExpandedEventListener(event: CustomEvent<any>): void;
+  /** @internal Send status of main checkbox in header to the parent, sdds-table component */
+  internalSddsMainCheckboxSelect: EventEmitter<any>;
+  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>): void;
+  internalSddsMainCheckboxChangeListener(event: CustomEvent<any>): void;
+  internalSddsRowExpandedListener(event: CustomEvent<any>): void;
   bodyExpandClicked(): void;
   connectedCallback(): void;
   componentWillLoad(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { TablePropsChangedEvent } from '../table/table';
+import { InternalSddsTablePropChange } from '../table/table';
 export declare class TableHeaderCell {
   /** Value of column key, usually comes from JSON, needed for sorting */
   columnKey: string;
@@ -24,16 +24,15 @@ export declare class TableHeaderCell {
   enableExpandableRows: boolean;
   host: HTMLElement;
   tableEl: HTMLSddsTableElement;
-  /** Sends unique table identifier,column key and sorting direction to the sdds-table-body component */
-  sortColumnDataEvent: EventEmitter<any>;
-  /** Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell */
-  textAlignEvent: EventEmitter<any>;
-  /** Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell */
-  headCellHoverEvent: EventEmitter<any>;
-  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
-  sortingSwitcherEventListener(event: CustomEvent<any>): void;
+  /** Sends unique table identifier,column key and sorting direction to the sdds-table-body component, can also be listened to in order to implement custom sorting logic. */
+  sddsSortChange: EventEmitter<any>;
+  /** @internal Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell */
+  internalSddsTextAlign: 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 */
+  internalSddsHover: EventEmitter<any>;
+  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>): void;
+  internalSddsSortingChangeListener(event: CustomEvent<any>): void;
   updateOptionsContent(event: CustomEvent<any>): void;
-  enableMultiselectEventListener(event: CustomEvent<any>): void;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentWillRender(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { TablePropsChangedEvent } from '../table/table';
+import { InternalSddsTablePropChange } from '../table/table';
 export declare class TableToolbar {
   /** Adds title to the data-table */
   tableTitle: string;
@@ -12,9 +12,9 @@ export declare class TableToolbar {
   tableId: string;
   host: HTMLElement;
   tableEl: HTMLSddsTableElement;
-  /** Used for sending users input to main parent <sdds-table> component */
-  tableFilteringTerm: EventEmitter<any>;
-  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>): void;
+  /** Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic. */
+  sddsFilter: EventEmitter<any>;
+  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>): void;
   connectedCallback(): void;
   componentWillLoad(): void;
   searchFunction(event: any): void;

package/dist/types/components/datetime/datetime.d.ts

@@ -11,10 +11,10 @@ export declare class Datetime {
   /** Set input in disabled state */
   disabled: boolean;
   /** Size of the input */
-  size: 'sm' | 'md' | '';
-  /** With setting */
+  size: 'sm' | 'md' | 'lg';
+  /** Resets min width rule */
   noMinWidth: boolean;
-  /** Set the variant of the the datetime component. */
+  /** Set the variant of the datetime component. */
   modeVariant: 'primary' | 'secondary';
   /** Name property */
   name: string;
@@ -29,7 +29,11 @@ export declare class Datetime {
   /** Listen to the focus state of the input */
   focusInput: boolean;
   /** Change event for the datetime */
-  customChange: EventEmitter;
+  sddsChange: EventEmitter;
+  /** Blur event for the datetime */
+  sddsBlur: EventEmitter<FocusEvent>;
+  /** Focus event for the datetime */
+  sddsFocus: EventEmitter<FocusEvent>;
   getDefaultValue: () => string;
   componentWillLoad(): void;
   handleFocusIn(): void;
@@ -37,6 +41,8 @@ export declare class Datetime {
   handleInput(e: any): void;
   handleChange(e: Event): void;
   /** Set the input as focus when clicking the whole datetime with suffix/prefix */
-  handleFocusClick(): void;
+  handleFocusClick(e: any): void;
+  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  handleBlur(e: any): void;
   render(): any;
 }