@scania/tegel 1.40.0 → 1.41.0-beta.0

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -9,11 +9,8 @@ const relevantTableProps = [
  */
 export class TdsTableBodyCell {
     constructor() {
-        this.cellValue = undefined;
-        this.cellKey = undefined;
+        /** Disables internal padding. Useful when passing other components to cell. */
         this.disablePadding = false;
-        this.textAlign = undefined;
-        this.textAlignState = undefined;
         this.activeSorting = false;
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -119,8 +116,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Value that will be presented as text inside a cell"
                 },
-                "attribute": "cell-value",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-value"
             },
             "cellKey": {
                 "type": "any",
@@ -136,8 +135,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering"
                 },
-                "attribute": "cell-key",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-key"
             },
             "disablePadding": {
                 "type": "boolean",
@@ -153,8 +154,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Disables internal padding. Useful when passing other components to cell."
                 },
-                "attribute": "disable-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disable-padding",
                 "defaultValue": "false"
             },
             "textAlign": {
@@ -171,8 +174,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Setting for text align, default value \"left\". Other accepted values are \"left\", \"start\", \"right\", \"end\" or \"center\"."
                 },
-                "attribute": "text-align",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-align"
             }
         };
     }

package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableBodyInputWrapper {
     constructor() {
+        /** Controls if the edit icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -81,7 +82,7 @@ export class TdsTableBodyInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '1ebf0bf16490030ce20a99e1234e68d81430eaf8', class: {
+        return (h(Host, { key: '8030b00df873e3a242708a9b4fe88b4ad618d069', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -115,8 +116,10 @@ export class TdsTableBodyInputWrapper {
                     "tags": [],
                     "text": "Controls if the edit icon is shown"
                 },
-                "attribute": "show-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-icon",
                 "defaultValue": "true"
             }
         };

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -9,8 +9,11 @@ const relevantTableProps = [
  */
 export class TdsTableBodyRow {
     constructor() {
+        /** Marks the row as selected, used for multiselect table. */
         this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
         this.disabled = false;
+        /** Makes the row clickable and tabbable for accessibility purposes. */
         this.clickable = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
@@ -104,8 +107,10 @@ export class TdsTableBodyRow {
                     "tags": [],
                     "text": "Marks the row as selected, used for multiselect table."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "disabled": {
@@ -122,8 +127,10 @@ export class TdsTableBodyRow {
                     "tags": [],
                     "text": "Marks the row as disabled, used for multiselect table."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "clickable": {
@@ -140,8 +147,10 @@ export class TdsTableBodyRow {
                     "tags": [],
                     "text": "Makes the row clickable and tabbable for accessibility purposes."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "clickable",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -16,12 +16,19 @@ const relevantTableProps = [
  */
 export class TdsTableBodyRowExpandable {
     constructor() {
+        /** 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 */
         this.colSpan = null;
+        /** ID for the table row. Randomly generated if not specified. */
         this.rowId = generateUniqueId();
-        this.expanded = undefined;
+        /** Controls the overflow behavior of the expandable row content */
         this.overflow = 'auto';
+        /** Sets isExpanded state to true or false internally */
+        /** Enables auto-collapse of other expandable rows when one row is expanded */
         this.autoCollapse = false;
+        /** Aria label for the expand button, providing an accessible description */
         this.tdsAriaLabelExpandButton = '';
+        /** Sets isExpanded state to true or fals internally */
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -150,8 +157,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "In case that automatic count of columns does not work, user can manually set this one.\nTake in mind that expandable control is column too"
                 },
-                "attribute": "col-span",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "col-span",
                 "defaultValue": "null"
             },
             "rowId": {
@@ -168,8 +177,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "ID for the table row. Randomly generated if not specified."
                 },
-                "attribute": "row-id",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "row-id",
                 "defaultValue": "generateUniqueId()"
             },
             "expanded": {
@@ -186,8 +197,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Sets isExpanded state to true or false externally"
                 },
-                "attribute": "expanded",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded"
             },
             "overflow": {
                 "type": "string",
@@ -203,8 +216,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Controls the overflow behavior of the expandable row content"
                 },
-                "attribute": "overflow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "overflow",
                 "defaultValue": "'auto'"
             },
             "autoCollapse": {
@@ -221,8 +236,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Enables auto-collapse of other expandable rows when one row is expanded"
                 },
-                "attribute": "auto-collapse",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "auto-collapse",
                 "defaultValue": "false"
             },
             "tdsAriaLabelExpandButton": {
@@ -239,8 +256,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Aria label for the expand button, providing an accessible description"
                 },
-                "attribute": "tds-aria-label-expand-button",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "tds-aria-label-expand-button",
                 "defaultValue": "''"
             }
         };

package/dist/collection/components/table/table-footer/table-footer.js

@@ -8,6 +8,25 @@ function removeShakeAnimation(e) {
 }
 export class TdsTableFooter {
     constructor() {
+        /** Enable pagination and show pagination controls  */
+        this.pagination = false;
+        /** Sets the pagination number. */
+        this.paginationValue = 1;
+        /** Enable rows per page dropdown */
+        this.rowsperpage = true;
+        /** Set available rows per page values */
+        this.rowsPerPageValues = [10, 25, 50];
+        /** Sets the number of pages. */
+        this.pages = null;
+        /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
+        this.cols = null;
+        /** State that memorize number of columns to display colSpan correctly - set from parent level */
+        this.columnsNumber = 0;
+        /* Sets the footer to use compact design. */
+        this.compactDesign = false;
+        this.tableId = '';
+        this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -51,18 +70,6 @@ export class TdsTableFooter {
             this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
-        this.pagination = false;
-        this.paginationValue = 1;
-        this.rowsperpage = true;
-        this.rowsPerPageValues = [10, 25, 50];
-        this.pages = null;
-        this.cols = null;
-        this.columnsNumber = 0;
-        this.compactDesign = false;
-        this.lastCorrectValue = undefined;
-        this.tableId = '';
-        this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -162,8 +169,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Enable pagination and show pagination controls"
                 },
-                "attribute": "pagination",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pagination",
                 "defaultValue": "false"
             },
             "paginationValue": {
@@ -180,8 +189,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Sets the pagination number."
                 },
-                "attribute": "pagination-value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pagination-value",
                 "defaultValue": "1"
             },
             "rowsperpage": {
@@ -198,8 +209,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Enable rows per page dropdown"
                 },
-                "attribute": "rowsperpage",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "rowsperpage",
                 "defaultValue": "true"
             },
             "rowsPerPageValues": {
@@ -216,6 +229,8 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Set available rows per page values"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[10, 25, 50]"
             },
             "pages": {
@@ -232,8 +247,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Sets the number of pages."
                 },
-                "attribute": "pages",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pages",
                 "defaultValue": "null"
             },
             "cols": {
@@ -250,8 +267,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "<b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails."
                 },
-                "attribute": "cols",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "cols",
                 "defaultValue": "null"
             }
         };

package/dist/collection/components/table/table-header/table-header.js

@@ -11,9 +11,11 @@ const relevantTableProps = [
  */
 export class TdsTableHeaderRow {
     constructor() {
+        /** @deprecated Deprecated, use selected instead. */
         this.allSelected = false;
-        this.selected = undefined;
+        /** Prop for controlling the enabled/disabled state of the "All selected"-checkbox. */
         this.disabled = false;
+        /** Prop for controlling the indeterminate state of the "All selected"-checkbox. */
         this.indeterminate = false;
         this.multiselect = false;
         this.expandableRows = false;
@@ -119,8 +121,10 @@ export class TdsTableHeaderRow {
                         }],
                     "text": ""
                 },
-                "attribute": "all-selected",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "all-selected",
                 "defaultValue": "false"
             },
             "selected": {
@@ -137,8 +141,10 @@ export class TdsTableHeaderRow {
                     "tags": [],
                     "text": "Prop for controlling the checked/unchecked state of the \"All selected\"-checkbox."
                 },
-                "attribute": "selected",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected"
             },
             "disabled": {
                 "type": "boolean",
@@ -154,8 +160,10 @@ export class TdsTableHeaderRow {
                     "tags": [],
                     "text": "Prop for controlling the enabled/disabled state of the \"All selected\"-checkbox."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "indeterminate": {
@@ -172,8 +180,10 @@ export class TdsTableHeaderRow {
                     "tags": [],
                     "text": "Prop for controlling the indeterminate state of the \"All selected\"-checkbox."
                 },
-                "attribute": "indeterminate",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "indeterminate",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -11,6 +11,22 @@ const relevantTableProps = [
  */
 export class TdsTableHeaderCell {
     constructor() {
+        /** Enables sorting on that column */
+        this.sortable = false;
+        /** Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end". */
+        this.textAlign = 'left';
+        /** Disables internal padding. Useful when passing other components to cell. */
+        this.disablePadding = false;
+        /** Aria label for the sort button, providing an accessible description */
+        this.tdsAriaLabelSortButton = '';
+        this.sortedByMyKey = false;
+        this.verticalDividers = false;
+        this.compactDesign = false;
+        this.noMinWidth = false;
+        this.multiselect = false;
+        this.enableToolbarDesign = false;
+        this.tableId = '';
+        this.expandableRows = false;
         this.sortButtonClick = () => {
             if (this.sortingDirection !== 'asc' && this.sortingDirection !== 'desc') {
                 this.sortingDirection = 'asc';
@@ -44,23 +60,6 @@ export class TdsTableHeaderCell {
                 key,
             });
         };
-        this.cellKey = undefined;
-        this.cellValue = undefined;
-        this.customWidth = undefined;
-        this.sortable = false;
-        this.textAlign = 'left';
-        this.disablePadding = false;
-        this.tdsAriaLabelSortButton = '';
-        this.textAlignState = undefined;
-        this.sortingDirection = undefined;
-        this.sortedByMyKey = false;
-        this.verticalDividers = false;
-        this.compactDesign = false;
-        this.noMinWidth = false;
-        this.multiselect = false;
-        this.enableToolbarDesign = false;
-        this.tableId = '';
-        this.expandableRows = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -154,8 +153,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "The value of column key, usually comes from JSON, needed for sorting"
                 },
-                "attribute": "cell-key",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-key"
             },
             "cellValue": {
                 "type": "string",
@@ -171,8 +172,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Text that displays in column cell"
                 },
-                "attribute": "cell-value",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-value"
             },
             "customWidth": {
                 "type": "string",
@@ -188,8 +191,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "In case noMinWidth is set, the user has to specify the width value for each column."
                 },
-                "attribute": "custom-width",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-width"
             },
             "sortable": {
                 "type": "boolean",
@@ -205,8 +210,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Enables sorting on that column"
                 },
-                "attribute": "sortable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortable",
                 "defaultValue": "false"
             },
             "textAlign": {
@@ -223,8 +230,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Setting for text align, default is \"left\". Other accepted values are \"left\", \"start\", \"right\" or \"end\"."
                 },
-                "attribute": "text-align",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "text-align",
                 "defaultValue": "'left'"
             },
             "disablePadding": {
@@ -241,8 +250,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Disables internal padding. Useful when passing other components to cell."
                 },
-                "attribute": "disable-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disable-padding",
                 "defaultValue": "false"
             },
             "tdsAriaLabelSortButton": {
@@ -259,8 +270,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Aria label for the sort button, providing an accessible description"
                 },
-                "attribute": "tds-aria-label-sort-button",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "tds-aria-label-sort-button",
                 "defaultValue": "''"
             }
         };

package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableHeaderInputWrapper {
     constructor() {
+        /** Controls if the search icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -97,8 +98,10 @@ export class TdsTableHeaderInputWrapper {
                     "tags": [],
                     "text": "Controls if the search icon is shown"
                 },
-                "attribute": "show-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-icon",
                 "defaultValue": "true"
             },
             "compactDesign": {
@@ -115,8 +118,10 @@ export class TdsTableHeaderInputWrapper {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "compact-design",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "compact-design",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/table/table-toolbar/table-toolbar.js

@@ -11,8 +11,11 @@ const relevantTableProps = [
  */
 export class TdsTableToolbar {
     constructor() {
+        /** Adds title to the Table */
         this.tableTitle = '';
+        /** Enables preview of searchbar */
         this.filter = false;
+        /** Aria label for the search input, providing an accessible description */
         this.tdsSearchAriaLabel = '';
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -101,8 +104,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Adds title to the Table"
                 },
-                "attribute": "table-title",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "table-title",
                 "defaultValue": "''"
             },
             "filter": {
@@ -119,8 +124,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Enables preview of searchbar"
                 },
-                "attribute": "filter",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "filter",
                 "defaultValue": "false"
             },
             "tdsSearchAriaLabel": {
@@ -137,8 +144,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Aria label for the search input, providing an accessible description"
                 },
-                "attribute": "tds-search-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-search-aria-label",
                 "defaultValue": "''"
             }
         };

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -4,9 +4,9 @@ import { Host, h } from "@stencil/core";
  */
 export class TdsFolderTab {
     constructor() {
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
-        this.tabWidth = undefined;
     }
     /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
     async setTabWidth(width) {
@@ -68,8 +68,10 @@ export class TdsFolderTab {
                     "tags": [],
                     "text": "Disables the Tab."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };