lightning-base-components 1.13.6-alpha → 1.14.1-alpha

package/src/lightning/datatable/datatable.html

@@ -1,237 +0,0 @@
-<template>
-    <span aria-live="polite">
-        <span class={computedAriaLiveClassForNavMode}>{ariaLiveNavigationModeText}</span>
-        <span class={computedAriaLiveClassForActionMode}>{ariaLiveActionModeText}</span>
-    </span>
-    <div lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
-    <div class="dt-outer-container" style="height: 100%; position: relative;">
-    <lightning-primitive-datatable-iedit-panel
-        data-iedit-panel="true"
-        visible={state.inlineEdit.isPanelVisible}
-        row-key-value={state.inlineEdit.rowKeyValue}
-        col-key-value={state.inlineEdit.colKeyValue}
-        edited-value={state.inlineEdit.editedValue}
-        column-def={state.inlineEdit.columnDef}
-        is-mass-edit-enabled={state.inlineEdit.massEditEnabled}
-        number-of-selected-rows={state.inlineEdit.massEditSelectedRows}
-        resolved-type-attributes={state.inlineEdit.resolvedTypeAttributes}
-        onieditfinished={handleInlineEditFinish}
-        onmasscheckboxchange={handleMassCheckboxChange}
-    ></lightning-primitive-datatable-iedit-panel>
-    <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={scrollerXStyles}>
-        <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerStyle}>
-            <table class={computedTableClass} role={computedTableRole} style={computedTableStyle}
-                onkeydown={handleTableKeydown}
-                onclick={handleCellClick}
-                onfocusin={handleTableFocusIn}
-                onfocusout={handleTableFocusOut}
-                aria-label={ariaLabel}
-                aria-labelledby={ariaLabelledBy}
-                aria-rowcount={ariaRowCount}>
-                <template if:false={hasValidKeyField}>
-                    <!-- empty since keyField wasn't provided -->
-                </template>
-                <template if:true={hasValidKeyField}>
-                <thead class={computedTableHeaderClass}>
-                <tr class="slds-line-height_reset"
-                    onprivateresizestart={handleResizeStart}
-                    onprivateresizeend={handleResizeEnd}>
-                    <template for:each={state.columns} for:item="def" for:index="colIndex">
-                        <th style={def.style}
-                            scope="col"
-                            tabindex={def.tabIndex}
-                            aria-label={def.ariaLabel}
-                            aria-sort={def.sortAriaLabel}
-                            key={def.colKeyValue}>
-
-                            <template if:true={def.fixedWidth}>
-                                <lightning-primitive-header-factory
-                                    style={def.style}
-                                    def={def}
-                                    dt-context-id={privateDatatableId}
-                                    key={def.colKeyValue}
-                                    row-key-value="HEADER"
-                                    col-key-value={def.colKeyValue}
-                                    has-focus={def.hasFocus}
-                                    column-width={def.columnWidth}
-                                    col-index={colIndex}
-                                    sortable={def.sortable}
-                                    sorted={def.sorted}
-                                    sorted-direction={def.sortedDirection}
-                                    show-checkbox={showSelectAllCheckbox}
-                                    actions={def.actions}>
-                                </lightning-primitive-header-factory>
-                            </template>
-                            <template if:false={def.fixedWidth}>
-                                <lightning-primitive-header-factory
-                                    style={def.style}
-                                    def={def}
-                                    dt-context-id={privateDatatableId}
-                                    key={def.colKeyValue}
-                                    row-key-value="HEADER"
-                                    col-key-value={def.colKeyValue}
-                                    col-index={colIndex}
-                                    resizable={hasResizebleColumns}
-                                    sortable={def.sortable}
-                                    sorted={def.sorted}
-                                    sorted-direction={def.sortedDirection}
-                                    has-focus={def.hasFocus}
-                                    column-width={def.columnWidth}
-                                    resizestep={state.resizeStep}
-                                    actions={def.actions}>
-                                </lightning-primitive-header-factory>
-                            </template>
-                        </th>
-                    </template>
-                </tr>
-                </thead>
-                <tbody style={computedTbodyStyle}>
-                    <template for:each={renderedRows} for:item="row" for:index="rowIndex">
-                        <tr class={row.classnames}
-                            onkeydown={handleTrRowKeyDown}
-                            key={row.key}
-                            data-row-key-value={row.key}
-                            aria-selected={row.ariaSelected}
-                            aria-level={row.level}
-                            aria-expanded={row.isExpanded}
-                            aria-setsize={row.setSize}
-                            aria-posinset={row.posInSet}
-                            tabindex={row.tabIndex}>
-                            <template for:each={row.cells} for:item="cell">
-                                <template if:true={cell.isCheckbox}>
-                                    <td class={cell.class} role="gridcell" tabindex={cell.tabIndex} data-label={cell.dataLabel} key={cell.colKeyValue}>
-                                        <lightning-primitive-cell-checkbox
-                                            dt-context-id={privateDatatableId}
-                                            has-focus={cell.hasFocus}
-                                            data-label={cell.dataLabel}
-                                            key={cell.key}
-                                            row-key-value={row.key}
-                                            col-key-value={cell.colKeyValue}
-                                            row-index={rowIndex}
-                                            type={row.inputType}
-                                            is-selected={row.isSelected}
-                                            is-disabled={row.isDisabled}
-                                            column-header-id={computedCheckboxColumnHeaderId}>
-                                        </lightning-primitive-cell-checkbox>
-                                    </td>
-                                </template>
-                                <template if:true={cell.isDataTypeScope}>
-                                    <th class={cell.class}
-                                        style={cell.paddingStyle}
-                                        aria-selected={cell.ariaSelected}
-                                        aria-readonly={cell.ariaReadOnly}
-                                        scope="row"
-                                        tabindex={cell.tabIndex}
-                                        data-label={cell.dataLabel}
-                                        key={cell.colKeyValue}>
-                                        <lightning-primitive-cell-factory
-                                            types={privateTypes}
-                                            aria-selected={cell.ariaSelected}
-                                            data-label={cell.dataLabel}
-                                            alignment={cell.alignment}
-                                            has-error={cell.hasError}
-                                            has-focus={cell.hasFocus}
-                                            column-label={cell.dataLabel}
-                                            column-type={cell.columnType}
-                                            column-sub-type={cell.columnSubType}
-                                            wrap-text={cell.wrapText}
-                                            wrap-text-max-lines={cell.wrapTextMaxLines}
-                                            key={cell.columnType}
-                                            row-key-value={row.key}
-                                            col-key-value={cell.colKeyValue}
-                                            value={cell.value}
-                                            icon-name={cell.iconName}
-                                            icon-label={cell.iconLabel}
-                                            icon-position={cell.iconPosition}
-                                            icon-alternative-text={cell.iconAlternativeText}
-                                            editable={cell.editable}
-                                            display-read-only-icon={cell.displayReadOnlyIcon}
-                                            type-attribute-0={cell.typeAttribute0}
-                                            type-attribute-1={cell.typeAttribute1}
-                                            type-attribute-2={cell.typeAttribute2}
-                                            type-attribute-3={cell.typeAttribute3}
-                                            type-attribute-4={cell.typeAttribute4}
-                                            type-attribute-5={cell.typeAttribute5}
-                                            type-attribute-6={cell.typeAttribute6}
-                                            type-attribute-7={cell.typeAttribute7}
-                                            type-attribute-8={cell.typeAttribute8}
-                                            type-attribute-9={cell.typeAttribute9}
-                                            type-attribute-10={cell.typeAttribute10}
-                                            type-attribute-21={cell.typeAttribute21}
-                                            type-attribute-22={cell.typeAttribute22}>
-                                        </lightning-primitive-cell-factory>
-                                    </th>
-                                </template>
-                                <template if:true={cell.isDataType}>
-                                    <td
-                                        class={cell.class}
-                                        style={cell.paddingStyle}
-                                        aria-selected={cell.ariaSelected}
-                                        aria-readonly={cell.ariaReadOnly}
-                                        role="gridcell"
-                                        tabindex={cell.tabIndex}
-                                        data-label={cell.dataLabel}
-                                        key={cell.colKeyValue}>
-                                        <lightning-primitive-cell-factory
-                                            types={privateTypes}
-                                            aria-selected={cell.ariaSelected}
-                                            role="gridcell"
-                                            data-label={cell.dataLabel}
-                                            alignment={cell.alignment}
-                                            has-focus={cell.hasFocus}
-                                            has-error={cell.hasError}
-                                            column-label={cell.dataLabel}
-                                            column-type={cell.columnType}
-                                            column-sub-type={cell.columnSubType}
-                                            wrap-text={cell.wrapText}
-                                            wrap-text-max-lines={cell.wrapTextMaxLines}
-                                            key={cell.columnType}
-                                            row-key-value={row.key}
-                                            col-key-value={cell.colKeyValue}
-                                            value={cell.value}
-                                            icon-name={cell.iconName}
-                                            icon-label={cell.iconLabel}
-                                            icon-position={cell.iconPosition}
-                                            icon-alternative-text={cell.iconAlternativeText}
-                                            editable={cell.editable}
-                                            display-read-only-icon={cell.displayReadOnlyIcon}
-                                            type-attribute-0={cell.typeAttribute0}
-                                            type-attribute-1={cell.typeAttribute1}
-                                            type-attribute-2={cell.typeAttribute2}
-                                            type-attribute-3={cell.typeAttribute3}
-                                            type-attribute-4={cell.typeAttribute4}
-                                            type-attribute-5={cell.typeAttribute5}
-                                            type-attribute-6={cell.typeAttribute6}
-                                            type-attribute-7={cell.typeAttribute7}
-                                            type-attribute-8={cell.typeAttribute8}
-                                            type-attribute-9={cell.typeAttribute9}
-                                            type-attribute-10={cell.typeAttribute10}
-                                            type-attribute-21={cell.typeAttribute21}
-                                            type-attribute-22={cell.typeAttribute22}>
-                                        </lightning-primitive-cell-factory>
-                                    </td>
-                                </template>
-                            </template>
-                        </tr>
-                    </template>
-                    <template if:true={isLoading}>
-                        <tr>
-                            <td colspan={numberOfColumns} class="slds-is-relative">
-                                <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
-                            </td>
-                        </tr>
-                    </template>
-                </tbody>
-                </template>
-            </table>
-        </div>
-    </div>
-    <template if:true={showStatusBar}>
-        <lightning-primitive-datatable-status-bar
-            error={tableError}
-            onprivatesave={handleInlineEditSave}
-            onprivatecancel={handleInlineEditCancel}
-        ></lightning-primitive-datatable-status-bar>
-    </template>
-    </div>
-</template>

package/src/lightning/datatable/keys.js

@@ -1,32 +0,0 @@
-/**
- * It creates a row key generator based on the keyField passed by the consumer
- * if the keyField does not point to a value row object passed in computeUniqueRowKey
- * it fallback to a generated key using indexes
- *
- * @param {String} keyField  - keyField provided by the consumer
- * @returns {*} - Object with a computeUniqueRowKey method
- */
-export const createRowKeysGenerator = function (keyField) {
-    let index = 0;
-    return {
-        computeUniqueRowKey(row) {
-            if (row[keyField]) {
-                return row[keyField];
-            }
-            return `row-${index++}`;
-        },
-    };
-};
-
-/**
- * It generate a unique column key value.
- *
- * @param {object} columnMetadata - the object for an specific column metadata
- * @param {int} index - optionally, the index of the column.
- * @returns {string} It generate the column key value based on the column field name and type.
- */
-export const generateColKeyValue = function (columnMetadata, index) {
-    const prefix =
-        columnMetadata.columnKey || columnMetadata.fieldName || index;
-    return `${prefix}-${columnMetadata.type}-${index}`;
-};

package/src/lightning/utilsPrivate/contentMutation.js

@@ -1,273 +0,0 @@
-import { guid } from './guid';
-import { smartSetAttribute } from './smartSetAttribute';
-
-const CONTENT_SEPARATOR = '\n';
-
-/**
-<template>
-    <span lwc:dom="manual" class="visually-hidden"></span>
-    <input>
-</template>
-
-class Foo extends LightningElement {
-    constructor() {
-        super();
-        this.ariaObserver = new ContentMutation(this);
-    }
-
-    @track ariaLabeledbyValue = '';
-
-    @api
-    get ariaLabeledby() {
-        return this.ariaLabeledbyValue; // whatever they set, is what they get back.
-    }
-    set ariaLabeledby(refs) {
-        this.ariaLabeledbyValue = refs;
-        this.ariaObserver.link('input', 'aria-labeledby', refs, 'span.visually-hidden');
-    }
-
-    renderedCallback() {
-        this.ariaObserver.sync();
-    }
-}
-**/
-
-function getAttr(elm, attr) {
-    if (elm.tagName.match(/lightning/i)) {
-        return elm[attr];
-    }
-    return elm.getAttribute(attr);
-}
-
-function extractElements(root, selector) {
-    if (typeof selector !== 'string' || selector === '') {
-        return [];
-    }
-    return [].slice.call(root.querySelectorAll(selector));
-}
-
-function extractContent(elements) {
-    return elements
-        .map((element) => element.textContent)
-        .filter((text) => text.length)
-        .join(CONTENT_SEPARATOR);
-}
-
-function splitIds(ids) {
-    return (ids + '').trim().split(/\s+/);
-}
-
-function hashIds(ids) {
-    return (ids + '')
-        .trim()
-        .split(/\s+/)
-        .reduce((r, v) => {
-            r[v] = 1;
-            return r;
-        }, {});
-}
-
-// this method should check each individual id from computedIds
-// against the existing value of the attrName on elm, and dupe
-// them, and add the new ones.
-function addAriaRefWhenNeeded(elm, attrName, computedIds) {
-    const newIds = splitIds(computedIds);
-    const oldIds = getAttr(elm, attrName) || '';
-    const oldIdsHash = hashIds(oldIds);
-    const suffix = [];
-    for (let i = 0; i < newIds.length; i += 1) {
-        if (!oldIdsHash[newIds[i]]) {
-            suffix.push(newIds[i]);
-        }
-    }
-
-    if (suffix.length !== 0) {
-        smartSetAttribute(
-            elm,
-            attrName,
-            oldIds + (oldIds.length === 0 ? '' : ' ') + suffix.join(' ')
-        );
-    }
-}
-
-// this method should check each individual id from computedIds
-// against the existing value of the attrName on elm, and remove
-// them when possible in preparation for some new values.
-function removeAriaRefWhenPossible(elm, attrName, computedIds) {
-    const newIds = splitIds(computedIds);
-    const oldIds = getAttr(elm, attrName) || '';
-    const oldIdsHash = hashIds(oldIds);
-    const newValues = [];
-    for (let i = 0; i < newIds.length; i += 1) {
-        if (!oldIdsHash[newIds[i]]) {
-            newValues.push(newIds[i]);
-        }
-    }
-    smartSetAttribute(elm, attrName, newValues.join(' '));
-}
-
-export class ContentMutation {
-    constructor(component) {
-        this.component = component;
-        this.template = component.template;
-        this.isNative = this.template.constructor
-            .toString()
-            .match(/\[native code\]/);
-        this.state = {};
-        this.liveIds = {};
-        this.guid = guid();
-    }
-
-    connectLiveIdRef(refs, callback) {
-        const selector = (refs + '')
-            .trim()
-            .split(/\s+/)
-            .map((ref) => `[id*="${ref}"]`)
-            .join(',');
-        const liveId = { selector, callback };
-        this.liveIds[refs] = liveId;
-    }
-
-    link(innerSelector, attrName, ids, placeholderContainerSelector) {
-        let attrState = this.state[attrName];
-        if (attrState) {
-            // note: we don't support linking to a different innerSelector,
-            // attrName, or placeholderContainerSelector
-            if (!this.isNative) {
-                const elm = this.template.querySelector(innerSelector);
-                if (elm) {
-                    // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attrName, attrState.ids);
-                }
-                attrState.ids = ids;
-            }
-        } else {
-            attrState = this.state[attrName] = {
-                ids,
-                innerSelector,
-                placeholderContainerSelector,
-            };
-        }
-        if (this.isNative) {
-            attrState.outerSelector = (ids + '')
-                .trim()
-                .split(/\s+/)
-                .map((ref) => `#${ref}`)
-                .join(',');
-            attrState.placeholder = document.createElement('span');
-            attrState.placeholder.id = `auto-link-${attrName}-${this.guid}`;
-        }
-        if (this.component.isConnected) {
-            this.privateUpdate(attrName);
-        }
-    }
-
-    sync() {
-        if (!this.component.isConnected) {
-            throw new Error(
-                `Invalid sync invocation. It can only be invoked during renderedCallback().`
-            );
-        }
-        if (this.isNative && !this.mo) {
-            this.privateConnect();
-        }
-        for (const attrName in this.state) {
-            if (Object.prototype.hasOwnProperty.call(this.state, attrName)) {
-                this.privateUpdate(attrName);
-            }
-        }
-
-        // live idRef feature is a no-op in native
-        if (!this.isNative) {
-            this.privateUpdateLiveIds();
-        }
-    }
-
-    privateExtractIds(elements) {
-        return elements
-            .map((el) => {
-                return el.getAttribute('id');
-            })
-            .join(' ');
-    }
-
-    privateUpdateLiveIds() {
-        const root = this.template.host.getRootNode();
-
-        // if not connected do nothing
-        if (!root) {
-            return;
-        }
-        for (const liveId in this.liveIds) {
-            if (Object.prototype.hasOwnProperty.call(this.liveIds, liveId)) {
-                const thisId = this.liveIds[liveId];
-                if (!thisId.elements) {
-                    // element refs are cached
-                    thisId.elements = Array.prototype.slice.call(
-                        root.querySelectorAll(thisId.selector)
-                    );
-                }
-                const newIds = this.privateExtractIds(thisId.elements);
-                // only fire calback if the value changed
-                if (newIds !== thisId.ids) {
-                    thisId.callback(newIds);
-                    thisId.ids = newIds;
-                }
-            }
-        }
-    }
-
-    privateUpdate(attrName) {
-        const { innerSelector } = this.state[attrName];
-        const elm = this.template.querySelector(innerSelector);
-        if (!elm) {
-            return; // nothing to update
-        }
-        let computedIds;
-        if (this.isNative) {
-            const {
-                outerSelector,
-                content,
-                placeholder,
-                placeholderContainerSelector,
-            } = this.state[attrName];
-            const newContent = extractContent(
-                extractElements(this.root, outerSelector)
-            );
-            if (content !== newContent) {
-                this.state[attrName].content = placeholder.textContent =
-                    newContent;
-            }
-            if (!placeholder.parentNode) {
-                // inserting the placeholder once
-                const container = this.template.querySelector(
-                    placeholderContainerSelector
-                );
-                if (container) {
-                    container.appendChild(placeholder);
-                }
-            }
-            computedIds = placeholder.id;
-        } else {
-            computedIds = this.state[attrName].ids;
-        }
-        addAriaRefWhenNeeded(elm, attrName, computedIds);
-    }
-
-    privateConnect() {
-        // caching root ref
-        this.root = this.template.host.getRootNode();
-        // creating the observer once
-        const mo = new MutationObserver(() => {
-            if (!this.component.isConnected) {
-                return; // do nothing when the template is not connected
-            }
-            this.sync();
-        });
-        mo.observe(this.root, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-}