lightning-base-components 1.18.1-alpha → 1.18.2-alpha

package/src/lightning/accordion/__perf__DISABLED/accordion10Multiple25SectionEach.perf.js

@@ -1,57 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateAccordions, getSectionNames } from './accordion-perf-utils';
-
-const measureName = 'accordion-10-multiple-25-sections-each';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 10, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordions = generateAccordions({
-        numberOfAccordions: 10,
-        numberOfSectionsPerAccordion: 25,
-        allowMultipleSectionsOpen: true,
-    });
-
-    // we need to rewrite the open sections
-    for (let i = 0, n = accordions.length; i < n; i++) {
-        accordions[i].activeSectionName = getSectionNames({
-            ownerAccordionId: 'acc-' + i,
-            firstSectionId: 0,
-            sectionIdIncrement: 2,
-            maxSectionId: 25,
-        });
-    }
-
-    // lets store the new values for sections in the update
-    const openUpdates = [];
-
-    for (let i = 0, n = accordions.length; i < n; i++) {
-        openUpdates[i] = getSectionNames({
-            ownerAccordionId: 'acc-' + i,
-            firstSectionId: 1,
-            sectionIdIncrement: 2,
-            maxSectionId: 25,
-        });
-    }
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordions[i]);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open a section', (i) => {
-        elements[i].activeSectionName = openUpdates[i];
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/accordion10Simple25SectionEach.perf.js

@@ -1,37 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateAccordions } from './accordion-perf-utils';
-
-const measureName = 'accordion-10-single-25-sections-each';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 10, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordions = generateAccordions({
-        numberOfAccordions: 10,
-        numberOfSectionsPerAccordion: 25,
-        allowMultipleSectionsOpen: false,
-    });
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordions[i]);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open a section', (i) => {
-        // section 20 is always closed given that in the accordion i the open section is i,
-        // and we only have 10 accordions with 25 sections each
-        elements[i].activeSectionName = 'acc-' + i + '-section-20';
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/accordionMultiple50Section.perf.js

@@ -1,45 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateSections, getSectionNames } from './accordion-perf-utils';
-
-const measureName = 'accordion-1-multipleSection-50-sections';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 1, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordion = {
-        activeSectionName: getSectionNames({
-            ownerAccordionId: 'acc-1',
-            firstSectionId: 0,
-            sectionIdIncrement: 2,
-            maxSectionId: 50,
-        }),
-        allowMultipleSectionsOpen: true,
-        sections: generateSections(50, 'acc-1'),
-    };
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordion);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open/close a section', (i) => {
-        elements[i].activeSectionName = getSectionNames({
-            ownerAccordionId: 'acc-1',
-            firstSectionId: 1,
-            sectionIdIncrement: 2,
-            maxSectionId: 50,
-        });
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/accordionSimple50Section.perf.js

@@ -1,35 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateSections } from './accordion-perf-utils';
-
-const measureName = 'accordion-1-singleSection-50-sections';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 1, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordion = {
-        activeSectionName: 'acc-1-section-10', // section 10 is open
-        allowMultipleSectionsOpen: false,
-        sections: generateSections(50, 'acc-1'),
-    };
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordion);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open a section', (i) => {
-        elements[i].activeSectionName = 'acc-1-section-30';
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/container/container.html

@@ -1,15 +0,0 @@
-<template>
-    <lightning-accordion
-        active-section-name={activeSectionName}
-        allow-multiple-sections-open={allowMultipleSectionsOpen}
-        >
-        <template for:each={sections} for:item="section">
-            <lightning-accordion-section
-                key={section.name}
-                name={section.name}
-                label={section.label}>
-                <p>{section.content}</p>
-            </lightning-accordion-section>
-        </template>
-    </lightning-accordion>
-</template>

package/src/lightning/accordion/__perf__DISABLED/container/container.js

@@ -1,7 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class PerfAccordionContainer extends LightningElement {
-    @api activeSectionName;
-    @api sections = [];
-    @api allowMultipleSectionsOpen = false;
-}

package/src/lightning/positionLibrary/__component__/positionLibraryBounding.spec.js

@@ -1,319 +0,0 @@
-/*
- * THIS IS ONLY A SAMPLE TEST OF DEMO HOW TO RUN SAME TEST FROM WDIO
- * AS A KARMA TEST, SHOULD BE ALIGN TO ASYNC MODEL INSTEAD OF waitFor
- */
-import { createElement } from 'lwc';
-import Bounding from 'x/bounding';
-
-function createHtml(props = {}) {
-    const element = createElement('x-bounding', { is: Bounding });
-    Object.assign(element, props);
-    return element;
-}
-
-const FLIP_MAP = {
-    bottom: 'bottom',
-    'bottom-left': 'bottom-right',
-    'bottom-right': 'bottom-left',
-    left: 'right',
-    'left-bottom': 'right-bottom',
-    'left-top': 'right-bottom',
-    right: 'left',
-    'right-bottom': 'left-bottom',
-    'right-top': 'left-top',
-    top: 'top',
-    'top-left': 'top-right',
-    'top-right': 'top-left',
-};
-
-/**
- * Fixes @W-8235775.
- * Clean up the DOM, removing anything that isn't Jasmine related or script/css.
- * These tests are sensitive to the height of the DOM and fail if other stuff is too tall.
- *
- * TODO: Remove this cleanup when this can be done in a central location instead.
- */
-function cleanDom() {
-    const bodyNodes = Array.prototype.slice.call(
-        document.querySelectorAll('body > *')
-    );
-    const nodesToRemove = bodyNodes.filter(
-        (n) =>
-            n.tagName.toLowerCase() !== 'script' &&
-            n.tagName.toLowerCase() !== 'link' &&
-            n.className.indexOf('jasmine') !== 0
-    );
-    for (let i = 0; i < nodesToRemove.length; i++) {
-        document.body.removeChild(nodesToRemove[i]);
-    }
-
-    document.querySelectorAll('style').forEach((style) => style.remove());
-}
-
-function setup() {
-    cleanDom();
-
-    const element = createHtml();
-    document.body.appendChild(element);
-    return element;
-}
-
-function convertCasesToRtl(cases) {
-    const result = {};
-    Object.keys(cases).forEach((align) => {
-        result[align] = {};
-        Object.keys(cases[align]).forEach((pos) => {
-            const nubbinAlign = cases[align][pos];
-            result[align][pos] = FLIP_MAP[nubbinAlign];
-        });
-    });
-    return result;
-}
-
-/**
- * Waits for the bubble to be visible and have the correct positioning. If the wait condition is
- * not satisfied within the global Jasmine timeout interval (5000ms by default) the consuming test
- * will fail.
- * @param {Node} element test root node
- * @param {String} expected expected nubbin class
- */
-function waitForBubbleAlignment(element, expected) {
-    return new Promise((resolve) => {
-        function waitCondition() {
-            const bubble = element.querySelector('lightning-primitive-bubble');
-            if (bubble && bubble.visible) {
-                const overlay =
-                    bubble.shadowRoot.querySelector('[part="overlay"]');
-
-                const classList = overlay.getAttribute('class').split(' ');
-                const positioned = classList.indexOf(expected) > -1;
-                if (positioned) {
-                    resolve(positioned);
-                }
-            }
-
-            window.requestAnimationFrame(waitCondition);
-        }
-        waitCondition();
-    });
-}
-
-/**
- * The nubbin css class is used to determine the correctness of the bubble position.
- * @param {String} align alignment of the bubble
- * @param {String} pos name of target for the bubble
- * @param {String} nubbinAlign expected alignment for the nubbin
- */
-async function verifyBubbleAlignment(align, pos, nubbinAlign) {
-    // Set the bubble alignment for the test.
-    const element = document.querySelector('x-bounding');
-    const button = element.querySelector(`[data-align=${align}]`);
-    button.click();
-
-    // Show the bubble at the position being tested.
-    const show = element.querySelector(`[data-pos=${pos}]`);
-    show.click();
-
-    const expected = `slds-nubbin_${nubbinAlign}`;
-    const positioned = await waitForBubbleAlignment(element, expected);
-    expect(positioned).toBeTruthy();
-}
-
-/**
- * Dynamically creates test cases for all the combinations of alignments and positions specified in
- * the given map.
- * @param {Object} cases alignments with positions and their expected outcomes to test
- */
-function executeCases(cases) {
-    Object.keys(cases).forEach((align) => {
-        Object.keys(cases[align]).forEach((pos) => {
-            const nubbinAlign = cases[align][pos];
-            it(`should have bubble with nubbin alignment of ${nubbinAlign} relative to the ${pos} element when ${align} alignment is used`, async () => {
-                await verifyBubbleAlignment(align, pos, nubbinAlign);
-            });
-        });
-    });
-}
-
-/*
- * THIS IS ONLY A SAMPLE TEST OF DEMO HOW TO RUN SAME TEST FROM WDIO
- * AS A KARMA TEST, SHOULD BE ALIGN TO ASYNC MODEL INSTEAD OF waitFor
- */
-describe('Viewport Bounding', () => {
-    // We can reuse the same page instance for the tests so we only need to run setup once.
-    beforeAll(() => {
-        setup();
-    });
-    afterAll(() => {
-        const element = document.querySelector('x-bounding');
-        document.body.removeChild(element);
-        document.querySelectorAll('style').forEach((style) => style.remove());
-    });
-
-    // TODO: New cases will be added and some expected alignments will change when we add support
-    // for left-top, right-top, left-bottom, right-bottom alignments.
-    const cases = {
-        Bottom: {
-            leftTop: 'top-left',
-            top: 'top',
-            rightTop: 'top-right',
-            left: 'top-left',
-            center: 'top',
-            right: 'top-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom',
-            rightBottom: 'bottom-right',
-        },
-        BottomLeft: {
-            leftTop: 'top-left',
-            top: 'top-left',
-            rightTop: 'top-right',
-            left: 'top-left',
-            center: 'top-left',
-            right: 'top-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-left',
-            rightBottom: 'bottom-right',
-        },
-        BottomRight: {
-            leftTop: 'top-left',
-            top: 'top-right',
-            rightTop: 'top-right',
-            left: 'top-left',
-            center: 'top-right',
-            right: 'top-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-right',
-            rightBottom: 'bottom-right',
-        },
-        Left: {
-            leftTop: 'top-left', // left-top
-            top: 'top-right', // right-top
-            rightTop: 'top-right', // right-top
-            left: 'left',
-            center: 'right',
-            right: 'right',
-            leftBottom: 'bottom-left', // left-bottom
-            bottom: 'bottom-right', // right-bottom
-            rightBottom: 'bottom-right', // right-bottom
-        },
-        Right: {
-            leftTop: 'top-left', // left-top
-            top: 'top-left', // left-top
-            rightTop: 'top-right', // right-top
-            left: 'left',
-            center: 'left',
-            right: 'right',
-            leftBottom: 'bottom-left', // left-bottom
-            bottom: 'bottom-left', // left-bottom
-            rightBottom: 'bottom-right', // right-bottom
-        },
-        Top: {
-            leftTop: 'top-left',
-            top: 'top',
-            rightTop: 'top-right',
-            left: 'bottom-left',
-            center: 'bottom',
-            right: 'bottom-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom',
-            rightBottom: 'bottom-right',
-        },
-        TopLeft: {
-            leftTop: 'top-left',
-            top: 'top-left',
-            rightTop: 'top-right',
-            left: 'bottom-left',
-            center: 'bottom-left',
-            right: 'bottom-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-left',
-            rightBottom: 'bottom-right',
-        },
-        TopRight: {
-            leftTop: 'top-left',
-            top: 'top-right',
-            rightTop: 'top-right',
-            left: 'bottom-left',
-            center: 'bottom-right',
-            right: 'bottom-right',
-            leftBottom: 'bottom-left',
-            bottom: 'bottom-right',
-            rightBottom: 'bottom-right',
-        },
-    };
-
-    describe('LTR', () => {
-        executeCases(cases);
-    });
-
-    describe('RTL', () => {
-        beforeEach(() => {
-            document.dir = 'rtl';
-        });
-
-        executeCases(convertCasesToRtl(cases));
-
-        afterEach(() => {
-            document.dir = 'ltr';
-        });
-    });
-});
-
-describe('Element Bounding', () => {
-    // Same setup as viewport bounding but with element bounding enabled.
-    beforeAll(() => {
-        setup();
-        const element = document.querySelector('x-bounding');
-        element.querySelector('[name=elementBound]').click();
-    });
-
-    afterAll(() => {
-        const element = document.querySelector('x-bounding');
-        document.body.removeChild(element);
-        document.querySelectorAll('style').forEach((style) => style.remove());
-    });
-
-    describe('LTR', () => {
-        const cases = {
-            BottomLeft: {
-                left: 'top-left',
-                center: 'top-left',
-                right: 'top-right',
-            },
-            BottomRight: {
-                left: 'top-left',
-                center: 'top-left',
-                right: 'top-right',
-            },
-        };
-
-        executeCases(cases);
-    });
-
-    describe('RTL', () => {
-        beforeEach(() => {
-            document.dir = 'rtl';
-        });
-
-        // RTL flips the positions of the left and right elements.
-        const cases = {
-            BottomLeft: {
-                left: 'top-right',
-                center: 'top-right',
-                right: 'top-left',
-            },
-            BottomRight: {
-                left: 'top-right',
-                center: 'top-right',
-                right: 'top-left',
-            },
-        };
-
-        executeCases(cases);
-
-        afterEach(() => {
-            document.dir = 'ltr';
-        });
-    });
-});

package/src/lightning/positionLibrary/__component__/x/bounding/bounding.css

@@ -1,16 +0,0 @@
-/**
- * Makes element take up available space like slds-grid_frame but works with IE11.
- */
- .frame {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.bubble {
-    position: absolute;
-    width: 150px;
-    height: 150px;
-}

package/src/lightning/positionLibrary/__component__/x/bounding/bounding.html

@@ -1,36 +0,0 @@
-<template lwc:render-mode="light">
-    <div class="frame slds-grid slds-grid_vertical slds-p-around_large">
-        <div class="slds-col slds-grow-none">
-            <button data-align="Bottom" onclick={changeAlign}>B</button>
-            <button data-align="BottomLeft" onclick={changeAlign}>BL</button>
-            <button data-align="BottomRight" onclick={changeAlign}>BR</button>
-            <button data-align="Left" onclick={changeAlign}>L</button>
-            <button data-align="Right" onclick={changeAlign}>R</button>
-            <button data-align="Top" onclick={changeAlign}>T</button>
-            <button data-align="TopLeft" onclick={changeAlign}>TL</button>
-            <button data-align="TopRight" onclick={changeAlign}>TR</button>
-
-            <label for="elementBound" class="slds-p-left_large">Element Bound:</label>
-            <input type="checkbox" name="elementBound" class="slds-m-left_x-small" onclick={toggleElementBound}></input>
-
-            <span class="slds-p-left_large">Align: <span class="align">{align}</span></span>
-
-            <lightning-primitive-bubble class="bubble" content-id="test-bubble" content="Lightning Primitive Bubble"></lightning-primitive-bubble>
-        </div>
-        <div class="slds-col slds-grid slds-grid_align-spread slds-grid_vertical-align-start">
-            <lightning-button-icon class="slds-col" data-pos="leftTop" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="top" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="rightTop" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-        </div>
-        <div class="slds-col slds-col_bump-bottom slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
-            <lightning-button-icon class="slds-col" data-pos="left" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="center" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="right" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-        </div>
-        <div class="slds-col slds-grid slds-grid_align-spread slds-grid_vertical-align-end">
-            <lightning-button-icon class="slds-col" data-pos="leftBottom" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="bottom" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-            <lightning-button-icon class="slds-col" data-pos="rightBottom" icon-name="utility:settings" onclick={toggle}></lightning-button-icon>
-        </div>
-    </div>
-</template>