lightning-base-components 1.19.8-alpha → 1.19.9-alpha

package/src/lightning/datatable/__examples__/basic/basic.html

@@ -1,9 +0,0 @@
-<template>
-    <div style="height: 300px;">
-        <lightning-datatable
-                key-field="id"
-                data={data}
-                columns={columns}>
-        </lightning-datatable>
-    </div>
-</template>

package/src/lightning/datatable/__examples__/basic/basic.js

@@ -1,20 +0,0 @@
-import { LightningElement } from 'lwc';
-import generateData from './generateData';
-
-const columns = [
-    { label: 'Label', fieldName: 'name' },
-    { label: 'Website', fieldName: 'website', type: 'url' },
-    { label: 'Phone', fieldName: 'phone', type: 'phone' },
-    { label: 'Balance', fieldName: 'amount', type: 'currency' },
-    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
-];
-
-export default class BasicDatatable extends LightningElement {
-    data = [];
-    columns = columns;
-
-    connectedCallback() {
-        const data = generateData({ amountOfRecords: 100 });
-        this.data = data;
-    }
-}

package/src/lightning/datatable/__examples__/basic/generateData.js

@@ -1,13 +0,0 @@
-export default function generateData({ amountOfRecords }) {
-    return [...Array(amountOfRecords)].map((_, index) => {
-        return {
-            name: `Name (${index})`,
-            website: 'www.salesforce.com',
-            amount: Math.floor(Math.random() * 100),
-            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
-            closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
-            ),
-        };
-    });
-}

package/src/lightning/datatable/__examples__/sorting/sorting.html

@@ -1,12 +0,0 @@
-<template>
-    <lightning-datatable
-            key-field="id"
-            columns={columns}
-            data={data}
-            hide-checkbox-column
-            default-sort-direction={defaultSortDirection}
-            sorted-direction={sortDirection}
-            sorted-by={sortedBy}
-            onsort={onHandleSort}>
-    </lightning-datatable>
-</template>

package/src/lightning/datatable/__examples__/sorting/sorting.js

@@ -1,60 +0,0 @@
-import { LightningElement } from 'lwc';
-
-const data = [
-    { id: 1, name: 'Billy Simonns', age: 40, email: 'billy@test.com' },
-    { id: 2, name: 'Kelsey Denesik', age: 35, email: 'kelsey@test.com' },
-    { id: 3, name: 'Kyle Ruecker', age: 50, email: 'kyle@test.com' },
-    {
-        id: 4,
-        name: 'Krystina Kerluke',
-        age: 37,
-        email: 'krystina@test.com',
-    },
-];
-
-const columns = [
-    { label: 'Name', fieldName: 'name' },
-    {
-        label: 'Age',
-        fieldName: 'age',
-        type: 'number',
-        sortable: true,
-        cellAttributes: { alignment: 'left' },
-    },
-    { label: 'Email', fieldName: 'email', type: 'email' },
-];
-
-export default class DemoApp extends LightningElement {
-    data = data;
-    columns = columns;
-    defaultSortDirection = 'asc';
-    sortDirection = 'asc';
-    sortedBy;
-
-    // Used to sort the 'Age' column
-    sortBy(field, reverse, primer) {
-        const key = primer
-            ? function (x) {
-                  return primer(x[field]);
-              }
-            : function (x) {
-                  return x[field];
-              };
-
-        return function (a, b) {
-            a = key(a);
-            b = key(b);
-            return reverse * ((a > b) - (b > a));
-        };
-    }
-
-    onHandleSort(event) {
-        const { fieldName: sortedBy, sortDirection } = event.detail;
-        const cloneData = [...this.data];
-
-        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
-        this.data = cloneData;
-        this.sortDirection = sortDirection;
-        this.sortedBy = sortedBy;
-    }
-}

package/src/lightning/datatable/__examples__/withInfiniteLoading/generateDataWithDelay.js

@@ -1,18 +0,0 @@
-// eslint-disable-next-line @lwc/lwc/no-async-await
-export default async function generateData({ amountOfRecords }) {
-    // Adding fake delay
-    // eslint-disable-next-line @lwc/lwc/no-async-operation
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    return [...Array(amountOfRecords)].map((_, index) => {
-        return {
-            name: `Name (${index})`,
-            website: 'www.salesforce.com',
-            amount: Math.floor(Math.random() * 100),
-            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
-            closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
-            ),
-        };
-    });
-}

package/src/lightning/datatable/__examples__/withInfiniteLoading/withInfiniteLoading.html

@@ -1,13 +0,0 @@
-<template>
-    <p>Total Rows: {data.length}</p>
-    <div style="height: 300px;">
-        <lightning-datatable
-            key-field="id"
-            data={data}
-            columns={columns}
-            enable-infinite-loading
-            onloadmore={handleLoadMore}>
-        </lightning-datatable>
-    </div>
-    <p>{loadMoreStatus}</p>
-</template>

package/src/lightning/datatable/__examples__/withInfiniteLoading/withInfiniteLoading.js

@@ -1,42 +0,0 @@
-import { LightningElement } from 'lwc';
-import generateDataWithDelay from './generateDataWithDelay';
-
-const columns = [
-    { label: 'Label', fieldName: 'name' },
-    { label: 'Website', fieldName: 'website', type: 'url' },
-    { label: 'Phone', fieldName: 'phone', type: 'phone' },
-    { label: 'Balance', fieldName: 'amount', type: 'currency' },
-    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
-];
-
-export default class DatatableWithInfiniteLoading extends LightningElement {
-    data = [];
-    columns = columns;
-    loadMoreStatus;
-    totalNumberOfRows = 250;
-
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        const data = await generateDataWithDelay({ amountOfRecords: 100 });
-        this.data = data;
-    }
-
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async handleLoadMore(event) {
-        const datatable = event.target;
-        //Displays a spinner to signal that data is being loaded
-        datatable.isLoading = true;
-        //Displays "Loading" text when more data is being loaded
-        this.loadMoreStatus = 'Loading';
-
-        const newData = await generateDataWithDelay({ amountOfRecords: 50 });
-        if (this.data.length >= this.totalNumberOfRows) {
-            datatable.enableInfiniteLoading = false;
-            this.loadMoreStatus = 'No more data to load';
-        } else {
-            this.data = this.data.concat(newData);
-            this.loadMoreStatus = '';
-        }
-        datatable.isLoading = false;
-    }
-}

package/src/lightning/datatable/__examples__/withInlineEdit/generateData.js

@@ -1,13 +0,0 @@
-export default function generateData({ amountOfRecords }) {
-    return [...Array(amountOfRecords)].map((_, index) => {
-        return {
-            name: `Name (${index})`,
-            website: 'www.salesforce.com',
-            amount: Math.floor(Math.random() * 100),
-            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
-            closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
-            ),
-        };
-    });
-}

package/src/lightning/datatable/__examples__/withInlineEdit/withInlineEdit.html

@@ -1,12 +0,0 @@
-<template>
-    <div style="height: 300px;">
-        <lightning-datatable
-                key-field="id"
-                data={data}
-                show-row-number-column
-                row-number-offset={rowOffset}
-                suppress-bottom-bar
-                columns={columns}>
-        </lightning-datatable>
-    </div>
-</template>

package/src/lightning/datatable/__examples__/withInlineEdit/withInlineEdit.js

@@ -1,20 +0,0 @@
-import { LightningElement } from 'lwc';
-import generateData from './generateData';
-
-const columns = [
-    { label: 'Label', fieldName: 'name', editable: true },
-    { label: 'Website', fieldName: 'website', type: 'url', editable: true },
-    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: true },
-    { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: true },
-    { label: 'Balance', fieldName: 'amount', type: 'currency', editable: true },
-];
-
-export default class DatatableWithInlineEdit extends LightningElement {
-    data = [];
-    columns = columns;
-    rowOffset = 0;
-
-    connectedCallback() {
-        this.data = generateData({ amountOfRecords: 100 });
-    }
-}

package/src/lightning/datatable/__examples__/withRowActions/generateData.js

@@ -1,13 +0,0 @@
-export default function generateData({ amountOfRecords }) {
-    return [...Array(amountOfRecords)].map((_, index) => {
-        return {
-            name: `Name (${index})`,
-            website: 'www.salesforce.com',
-            amount: Math.floor(Math.random() * 100),
-            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
-            closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
-            ),
-        };
-    });
-}

package/src/lightning/datatable/__examples__/withRowActions/withRowActions.html

@@ -1,25 +0,0 @@
-<template>
-    <div style="height: 300px;">
-        <lightning-datatable
-                key-field="id"
-                data={data}
-                columns={columns}
-                onrowaction={handleRowAction}>
-        </lightning-datatable>
-    </div>
-    <div class="slds-m-around--medium" style="width: 30rem;">
-        <article class="slds-tile">
-            <h3 class="slds-tile__title slds-truncate" title="Record details"><a href="javascript:void(0);">Record details</a></h3>
-            <div class="slds-tile__detail">
-                <dl class="slds-list_horizontal slds-wrap">
-                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Name">Name:</dt>
-                    <dd class="slds-item_detail slds-truncate">{record.name}</dd>
-                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Balance">Balance:</dt>
-                    <dd class="slds-item_detail slds-truncate">
-                        <lightning-formatted-number value={record.amount} format-style="currency"></lightning-formatted-number>
-                    </dd>
-                </dl>
-            </div>
-        </article>
-    </div>
-</template>

package/src/lightning/datatable/__examples__/withRowActions/withRowActions.js

@@ -1,69 +0,0 @@
-import { LightningElement } from 'lwc';
-import generateData from './generateData';
-
-const actions = [
-    { label: 'Show details', name: 'show_details' },
-    { label: 'Delete', name: 'delete' },
-];
-
-const columns = [
-    { label: 'Name', fieldName: 'name' },
-    { label: 'Website', fieldName: 'website', type: 'url' },
-    { label: 'Phone', fieldName: 'phone', type: 'phone' },
-    { label: 'Balance', fieldName: 'amount', type: 'currency' },
-    { label: 'Close At', fieldName: 'closeAt', type: 'date' },
-    {
-        type: 'action',
-        typeAttributes: { rowActions: actions },
-    },
-];
-
-export default class DatatableWithRowActions extends LightningElement {
-    data = [];
-    columns = columns;
-    record = {};
-
-    connectedCallback() {
-        this.data = generateData({ amountOfRecords: 100 });
-    }
-
-    handleRowAction(event) {
-        const actionName = event.detail.action.name;
-        const row = event.detail.row;
-        switch (actionName) {
-            case 'delete':
-                this.deleteRow(row);
-                break;
-            case 'show_details':
-                this.showRowDetails(row);
-                break;
-            default:
-        }
-    }
-
-    deleteRow(row) {
-        const { id } = row;
-        const index = this.findRowIndexById(id);
-        if (index !== -1) {
-            this.data = this.data
-                .slice(0, index)
-                .concat(this.data.slice(index + 1));
-        }
-    }
-
-    findRowIndexById(id) {
-        let ret = -1;
-        this.data.some((row, index) => {
-            if (row.id === id) {
-                ret = index;
-                return true;
-            }
-            return false;
-        });
-        return ret;
-    }
-
-    showRowDetails(row) {
-        this.record = row;
-    }
-}

package/src/lightning/datatable/__examples__/withRowNumbers/generateData.js

@@ -1,13 +0,0 @@
-export default function generateData({ amountOfRecords }) {
-    return [...Array(amountOfRecords)].map((_, index) => {
-        return {
-            name: `Name (${index})`,
-            website: 'www.salesforce.com',
-            amount: Math.floor(Math.random() * 100),
-            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
-            closeAt: new Date(
-                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
-            ),
-        };
-    });
-}

package/src/lightning/datatable/__examples__/withRowNumbers/withRowNumbers.html

@@ -1,18 +0,0 @@
-<template>
-    <div style="height: 300px;">
-        <lightning-datatable
-                key-field="id"
-                data={data}
-                show-row-number-column
-                row-number-offset={rowOffset}
-                hide-checkbox-column
-                columns={columns}>
-        </lightning-datatable>
-    </div>
-    <div class="slds-m-around--medium">
-        <lightning-button
-                label="Increase row offset"
-                onclick={increaseRowOffset}>
-        </lightning-button>
-    </div>
-</template>

package/src/lightning/datatable/__examples__/withRowNumbers/withRowNumbers.js

@@ -1,24 +0,0 @@
-import { LightningElement } from 'lwc';
-import generateData from './generateData';
-
-const columns = [
-    { label: 'Label', fieldName: 'name' },
-    { label: 'Website', fieldName: 'website', type: 'url' },
-    { label: 'Phone', fieldName: 'phone', type: 'phone' },
-    { label: 'Balance', fieldName: 'amount', type: 'currency' },
-    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
-];
-
-export default class BasicDatatable extends LightningElement {
-    data = [];
-    columns = columns;
-    rowOffset = 0;
-
-    connectedCallback() {
-        this.data = generateData({ amountOfRecords: 100 });
-    }
-
-    increaseRowOffset() {
-        this.rowOffset += 100;
-    }
-}

package/src/lightning/datatable/__requirements__/column_widths_requirements.md

@@ -1,119 +0,0 @@
-Datatable provides two modes for computing widths to be allocated to the columns when datatable is rendered and rerendered
-when various variables change. These modes are controlled by the api columnWidthsMode - which can take values `fixed` or `auto`, `fixed` being the default mode.
-Refer the below specifications for each mode and what each mode does in various scenarios:
-
-## FIXED WIDTHS MODE
-
-### INITIAL RENDER
-
--   should size the columns based on the defined column widths when the column definitions are passed
-    and the columns have fixed or initialWidths defined in them using `fixedWidth` or `initialWidth` attribute.
-
--   should size the columns by giving equal widths for all the columns when the column definitions have no defined widths (fixedWidth or initialWidth)
-    and no data is set yet.
-    Width is calculated by taking total available width for datatable and dividing equally amongst the columns. Columns widths
-    for certain types like Row Number, Selection column, Action column are controlled by the component and are fixed.
-
--   should use same column widths as set currently when data is set at a later point and column definitions are already available.
-
-### SUBSEQUENT RENDERS
-
--   should adjust column widths and distribute widths according to first two rules when column definitions are changed. Change in
-    column definitions could be either change in number of columns or update in certain column(s). User needs to pass a new reference
-    of columns with changes for them to take effect.
-
--   should use same column widths as set currently when the data is changed. Change in data could be either new data passed or data removed
-    or change in existing data.
-
--   should adjust column widths as per first two rules when the row number offset defined by `rowNumberOffset` attribute is changed.
-
--   should adjust column widths as per first two rules when the browser window is resized.
-
--   should adjust column widths as per first two rules when the container containing the datatable changes in width.
-
--   should use new resized width for a column when a column is manually resized and the rest of the columns should maintain their widths
-    (i.e) the table shouldnt fill container space if column width is reduced and table should show scrollbar if column width is increased manually.
-    Manually resized columns will get same fixed width henceforth.
-    Manual resizing can be done either using -
-
-*   using mouse
-*   using keyboard by pressing enter in the header cell, then tabbing to reach the resizer and pressing left or right arrow keys
-*   on a touchscreen device - tap on the desired column resizer area, move to desired width and then release
-
--   should adjust column widths to fill the container space as per first two rules with the exception of manually-resized columns
-    when the container is resized due to browser resize or container width changes.
-
-## AUTO WIDTHS MODE
-
-### INITIAL RENDER
-
--   should size the columns based on the defined column widths when the column definitions are passed
-    and the columns have fixed or initialWidths defined in them using `fixedWidth` or `initialWidth` attribute.
-
--   should set widths of columns based on the visual width distribution of the column labels when the column definitions are passed but no data is set yet.
-    If a column has too long label, the width is clamped by the `maxColumnWidth` attribute set on the datatable which is 1000px by default. If a column gets
-    too small in width, the width is clamped to `minColumnWidth` attribute set on the datatable which is 50px by default.
-    With visual width distribution of labels in columns, columns which would take wide space if table was rendered with no width constraints, will get more width
-    as compared to columns which would take less space given their labels.
-
--   should size columns based on the column labels and defined widths when some columns have fixed or initialWidths defined and some dont and no data is set yet.
-
--   should set widths of columns based on the visual width distribution of the data in columns when the column definitions are already set and data is now set.
-    With visual width distribution of data in columns, columns which would take wide space if table was rendered with no width constraints, will get more width
-    as compared to columns which would take less space given the data in the columns. Same rules apply w.r.t to clamping to maxColumnWidth or minColumnWidth
-    when width would exceed maxColumnWidth or when width would be less than minColumnWidth resp. If a column with long content has wrapText set to true,
-    that column should take less space than it would have taken if there was no wrapText. It should be given width taking into consideration the visual distribution
-    of this column taking into account text wrapped lines.
-
-### SUBSEQUENT RENDERS
-
--   should trigger auto-resize of column widths with new ratios of data in columns when the data is changed (same number of rows)
-
--   should not trigger resize of column widths at all when new data is passed or data is removed (different number of rows).
-    The columns should continue to use their set widths.
-
--   should trigger auto-resize of column widths with new ratios when column definitions are changed. Change in
-    column definitions could be either change in number of columns or update in certain column(s). User needs to pass a new reference
-    of columns with changes for them to take effect.
-
--   should keep the width ratios and adjust column widths to fit new screen size when the browser window is resized.
-
--   should keep the width ratios and adjust column widths to fit new container size when the container containing the datatable changes in width.
-
--   should adjust column widths with new ratios when the row number offset defined by `rowNumberOffset` attribute is changed.
-
--   should use new resized width for a column when a column is manually resized and the rest of the columns should maintain their widths
-    (i.e) the table shouldnt fill container space if column width is reduced and table should show scrollbar if column width is increased manually.
-    Manually resized columns will get same fixed width henceforth.
-    Manual resizing can be done either using -
-
-*   using mouse
-*   using keyboard by pressing enter in the header cell, then tabbing to reach the resizer and pressing left or right arrow keys
-*   on a touchscreen device - tap on the desired column resizer area, move to desired width and then release
-
--   should adjust column widths to fill the container space as per existing width ratios with the exception of manually-resized columns
-    when the container is resized due to browser resize or container width changes after manual resize of a column.
-
-## Open questions
-
--   TODO - Change from using width values stored in tracked variable to setting widths directly in dom
-
--   TODO - When to fire resize event in cases above should be agreed upon and documented - Done
-
-### IMPLEMENTATION DETAILS
-
--   Datatable instantiates columnWidthManager
-
--   columnWidthManager listens to all the parameters that widthManager should care about and sets flag if resizingIsNeeded
-    after rendering is done.
-
--   columnWidthManager also keep a track of if the width resizing strategy should recalculate width ratios.
-
--   During renderedCallback, columnWidthManager adjustColumnsSize is called which then checks the flag to see if resizing is needed
-    and calls appropriate strategy to adjust columns size.
-
--   In case of autoWidthStrategy setting columns triggers resize computation and a rerender (since widths are changed in tracked var)
-    and then setting data triggers rerender, another resize and another rerender for widths.
-
--   In case of fixedWidthStrategy setting columns triggers resize computation and a rerender (since widths are changed in tracked var)
-    but setting data doesnt trigger rerender for widths.

package/src/lightning/datatable/__requirements__/requirements.md

@@ -1,2 +0,0 @@
--   Column Widths Resizing Requirements
-    > For Specification regarding how datatable calculates column widths Refer _column_widths_requirements.md_

package/src/lightning/datatable/templates/div/div.css

@@ -1,57 +0,0 @@
-/** Styles that aren't available from SLDS **/
-
-.cell {
-    display: inline-block;
-    padding: .25rem .5rem;
-    white-space: nowrap;
-}
-
-.column-header {
-    color: #514f4d;
-    padding: .25rem .5rem;
-    font-weight: 700;
-    line-height: normal;
-}
-
-.table-header {
-    height: 0;
-}
-
-/* Row borders */
-[data-row-key-value] {
-    border-top: 1px solid #dddbda;
-}
-
-.slds-table_header-fixed [data-row-key-value]:first-child {
-    border-top: 0;
-}
-
-/* Required for row numbers */
-[role="row"] {
-    counter-increment: row-number;
-}
-
-/* Move column header row to left;
-   TODO: See if there a better way */
-[role="grid"] > [role="rowgroup"]:nth-child(1) {
-    margin-left: -0.5rem;
-}
-
-[role="columnheader"] {
-    outline: none;
-}
-
-[role="row"]:hover {
-    background-color: var(--sds-c-color-background, #f3f2f2);
-}
-
-[role="row"].slds-is-selected {
-    background-color: var(--sds-c-color-background-dark, #ecebea);
-}
-
-[role="rowheader"].slds-has-focus,
-[role="rowheader"]:focus {
-    box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
-    box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
-    outline: 0;
-}