lightning-base-components 1.19.8-alpha → 1.19.10-alpha

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

@@ -1,35 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class Basic extends LightningElement {
-    items = [
-        {
-            type: 'avatar',
-            href: 'https://www.salesforce.com',
-            label: 'Avatar Pill 1',
-            src: 'https://www.lightningdesignsystem.com/assets/images/avatar1.jpg',
-            fallbackIconName: 'standard:user',
-            variant: 'circle',
-            alternativeText: 'User avatar',
-            isLink: true,
-        },
-        {
-            type: 'avatar',
-            href: '',
-            label: 'Avatar Pill 2',
-            src: 'https://www.lightningdesignsystem.com/assets/images/avatar2.jpg',
-            fallbackIconName: 'standard:user',
-            variant: 'circle',
-            alternativeText: 'User avatar',
-        },
-        {
-            type: 'avatar',
-            href: 'https://www.google.com',
-            label: 'Avatar Pill 3',
-            src: 'https://www.lightningdesignsystem.com/assets/images/avatar3.jpg',
-            fallbackIconName: 'standard:user',
-            variant: 'circle',
-            alternativeText: 'User avatar',
-            isLink: true,
-        },
-    ];
-}

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

@@ -1,16 +0,0 @@
-<template>
-    <lightning-button label="Click to show a popup" onclick={openPopup}></lightning-button>
-
-    <lightning-popup aria-describedby="popup-body">
-        <div class="slds-popover">
-            <div id="popup-body" class="slds-popover__body">
-                <lightning-input label="An input"></lightning-input>
-                <div class="slds-m-top_small">
-                    <lightning-button variant="brand" label="Save" onclick={handleSave}></lightning-button>
-                    <lightning-button variant="brand" label="Cancel" onclick={handleCancel}></lightning-button>
-                </div>
-            </div>
-        </div>
-    </lightning-popup>
-
-</template>

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

@@ -1,30 +0,0 @@
-import { LightningElement, track } from 'lwc';
-
-export default class PopupExample extends LightningElement {
-    @track enteredText = '';
-
-    openPopup() {
-        const referenceElement =
-            this.template.querySelector('lightning-button');
-        // Show the popup relative to the button, left-aligns the top of the popup with the bottom of the button
-        this.popup.show(referenceElement, {
-            reference: { horizontal: 'left', vertical: 'bottom' },
-            popup: { horizontal: 'left', vertical: 'top' },
-        });
-    }
-
-    handleCancel() {
-        this.popup.close();
-    }
-
-    handleSave() {
-        const name = this.template.querySelector('lightning-input');
-        this.enteredText = name.value;
-
-        this.popup.close();
-    }
-
-    get popup() {
-        return this.template.querySelector('lightning-popup');
-    }
-}

package/src/lightning/popup/__examples__/walkthrough/walkthrough.html

@@ -1,33 +0,0 @@
-<template>
-    <lightning-button label="Click to show a popup" onclick={openPopup}></lightning-button>
-
-    <lightning-popup
-        aria-labelledby="popup-header"
-        aria-describedby="popup-body"
-        onautofocus={handleAutoFocus}
-        onalignmentupdate={handleAlignmentUpdate}>
-        <div class={popupClasses}>
-            <button onclick={closePopup}
-                class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse">
-                <lightning-icon icon-name="utility:close" size="xx-small"></lightning-icon>
-            </button>
-
-            <header id="popup-header" class="slds-popover__header">Manage your channels</header>
-
-            <div id="popup-body" class="slds-popover__body">
-                <p class="slds-p-bottom_medium slds-p-top_medium">This is the content of the body</p>
-
-                <lightning-input type="email" label="Email Address" placeholder="Email Address"
-                                 variant="label-hidden"></lightning-input>
-            </div>
-            <footer class="slds-popover__footer">
-                <div class="slds-grid slds-grid_vertical-align-center">
-                    <span class="slds-text-title">Step 2 of 4</span>
-                    <button class="slds-button slds-button_success slds-col_bump-left">Setup Email</button>
-                    <button class="slds-button slds-button_brand slds-col_bump-left">Next</button>
-                </div>
-            </footer>
-        </div>
-    </lightning-popup>
-
-</template>

package/src/lightning/popup/__examples__/walkthrough/walkthrough.js

@@ -1,37 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class PopupExample extends LightningElement {
-    openPopup() {
-        const referenceElement =
-            this.template.querySelector('lightning-button');
-        this.popup.show(referenceElement, {
-            reference: { horizontal: 'right', vertical: 'top' },
-            popup: { horizontal: 'left', vertical: 'top' },
-            // To accommodate the nubbin (arrow pointer)
-            padding: 1,
-            offset: 1.25,
-        });
-    }
-
-    handleAlignmentUpdate(event) {
-        this._alignment = event.target.alignment;
-    }
-
-    handleAutoFocus(event) {
-        // Don't focus on the first tabbable element
-        event.preventDefault();
-
-        // Focus on the input instead
-        this.template.querySelector('lightning-input').focus();
-    }
-
-    get popupClasses() {
-        const { horizontal, vertical } = this._alignment;
-        const nubbinClass = `slds-nubbin_${horizontal}-${vertical}`;
-        return `slds-popover slds-popover_walkthrough ${nubbinClass}`;
-    }
-
-    get popup() {
-        return this.template.querySelector('lightning-popup');
-    }
-}

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

@@ -1,106 +0,0 @@
--   A popup must have at least one focusable element inside
-
--   Popup should trap the focus (pressing Tab on the last element goes to the close button, and Shift-Tab on the close button goes to the last focusable element)
-
--   Pressing the Escape the key should close the popup and `close` event should be dispatched
-
--   Clicking out of the popup should close the popup and `clickout` (cancelable) event should be dispatched; if `clickout` event is not canceled the popup is closed and `close` event is dispatched
-
--   Clicking anywhere inside the popup (not on a focusable element) should not close the popup
-
--   User focus should be placed back on the element focused when the popover opened. If there were no focused elements prior, the popup should close without making any focus changes.
-
--   The content of the slot should only be present in the DOM when the popup is visible (which means it should not be in the dom before it's shown, and after it's closed).
-
--   It should be possible to re-open a closed popup
-
-**Methods**
-
--   `show(referenceElement, alignmentOptions)` when called should show the popup.
-
-    -   Should accept an optional `referenceElement` element which is used for alignment
-
-    -   Should not do auto-positioning when `referenceElement` is not specified (note: this is so that one can position the popup manually)
-
-    -   `alignmentOptions` allows the following structure:
-
-    ```
-     {
-        // vertical values are 'top', 'center' and 'bottom'
-        // horizontal values are 'left , 'center' and 'right'
-        reference: { vertical: 'bottom', horizontal: 'right' },
-        popup: { vertical: 'bottom', horizontal: 'left' },
-        // padding is a float number in rem unit
-        padding: 1,
-        // offset is a float number in rem unit
-        offset: 1,
-     }
-    ```
-
-    -   When `referenceElement` is specified, should accept an optional `alignmentOptions` object (map), which is used for setting preferred alignment between the `referenceElement` and the popup. Alignment options accept four properties - `reference`, `popup`, `padding` and `offset`. `reference` is a map made of `vertical` and `horizontal` attributes and it defines the preferred anchor point that the popup will stick to. `popup` defines the preferred point of the popup that will stick to the reference point of the element, valid values are the same as for the `reference`. Depending on the space available the popup alignment may change and `alignmentupdate` will fire. `padding` determines the space in 'rem' between the contacting edges of the reference element and popup, it could be used to create some distance between popup and the reference element and also to accommodate an arrow. `offset` represents the offset in 'rem' of the popup along the contacting edges, it could be used to accommodate an arrow.
-
-    ```
-     ┌──────────────────┐
-     │                  │
-     │     reference    │
-     │                  │
-     └────────♦─────────┘
-       ┌──────♦───────┐
-       │              │
-       │     popup    │
-       │              │
-       └──────────────┘
-    ```
-
-    Diamond represents the alignment points defined by `reference` and `popup` properties.
-
-    ```
-      {
-        reference: { vertical: 'bottom', horizontal: 'center' },
-        popup: { vertical: 'top', horizontal: 'center'
-      },
-    ```
-
-    -   Should not throw an error when `alignmentOptions` is not set. Not passing alignment options should be equivalent to passing the following options:
-
-        ```
-        {
-           reference: { vertical: 'bottom', horizontal: 'right' },
-           popup: { vertical: 'bottom', horizontal: 'left' },
-           padding: 0,
-           offset: 0,
-        }
-        ```
-
--   `close` when called should close the popup without dispatching any events. Auto-positioning should be stopped.
-
-**Properties**
-
--   `alignment` represents the alignment of the popup relative to the `referenceElement` (see `show` method), its structure is the same as for `alignmentOptions`'s `popup`. Default is:
-
-    ```
-     { vertical: 'bottom', horizontal: 'left' }
-    ```
-
-This property is updated before `alignmentupdate` event is dispatched.
-
-**Events**
-
--   `close` event is dispatched when the popup is opened and the user either:
-
-    -   presses Esc key while focus is inside the popup
-    -   clicks outside of the popup after the focus has been inside the popup
-
--   `autofocus` cancelable event is dispatched when the popup is about to place the focus on the first tabbable element; if the event is canceled the focus will not be placed
-
--   `returnfocus` cancelable event should be dispatched when the focus is returned to the element that had focus prior to popup showing; if the event is canceled the focus is not returned
-
--   `alignmentupdate` event should be dispatched whenever the alignment of the popup has been updated (for example the component flipped on the vertical or horizontal axis). It should also be dispatched on initial positioning of the popup.
-
--   `clickout` cancelable event should be dispatched when the user has clicked outside of the popup after the popup had the focus, the default behaviour is to close the popup; if the event is canceled the popup should not close
-
-**Positioning logic**
-
--   When a referenceElement is specified, the popup should be positioned based on the specified rules in the `alignmentOptions`.
-
--   When the content of the popup doesn't fit, it may be flipped on horizontal and/or vertical axes for better fit (describe positionLibrary logic here), `alignmentupdate` may be fired at that point with the new popup alignment.

package/src/lightning/positionLibrary/__docs__/positionLibrary.md

@@ -1,3 +0,0 @@
-Position Library playground can be used to test positon library for `helptext`, `button-menu`, `combobox` and `datepicker`.
-
-To use the playground, go to `ui-lightning-stubs/src/main/modules/demo/app/app.html` and add the tag `<positionLibrary-playground></positionLibrary-playground>` in the template.

package/src/lightning/positionLibrary/__examples__/components/components.html

@@ -1,41 +0,0 @@
-<template>
-    <template if:true={isHelpText}>
-        <lightning-helptext
-            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel orci porta non pulvinar neque."
-        ></lightning-helptext>
-    </template>
-
-    <template if:true={isButtonMenu}>
-        <lightning-button-menu alternative-text="Show menu">
-            <lightning-menu-item
-                value="MenuItemOne"
-                label="Menu Item One"
-            ></lightning-menu-item>
-            <lightning-menu-item
-                value="MenuItemTwo"
-                label="Menu Item Two"
-            ></lightning-menu-item>
-            <lightning-menu-item
-                value="MenuItemThree"
-                label="Menu Item Three"
-            ></lightning-menu-item>
-            <lightning-menu-item
-                value="MenuItemFour"
-                label="Menu Item Four"
-            ></lightning-menu-item>
-        </lightning-button-menu>
-    </template>
-
-    <template if:true={isComboBox}>
-        <lightning-combobox
-            name="progress"
-            label="Status"
-            placeholder="Select Progress"
-            options={comboBoxOptions}
-        ></lightning-combobox>
-    </template>
-
-    <template if:true={isDatePicker}>
-        <lightning-datepicker label="Select a date"></lightning-datepicker>
-    </template>
-</template>

package/src/lightning/positionLibrary/__examples__/components/components.js

@@ -1,29 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class PlaygroundCompoennts extends LightningElement {
-    @api component;
-
-    get isHelpText() {
-        return this.component === 'helpText';
-    }
-
-    get isButtonMenu() {
-        return this.component === 'button-menu';
-    }
-
-    get isComboBox() {
-        return this.component === 'combobox';
-    }
-
-    get isDatePicker() {
-        return this.component === 'datepicker';
-    }
-
-    get comboBoxOptions() {
-        return [
-            { label: 'New', value: 'new' },
-            { label: 'In Progress', value: 'inProgress' },
-            { label: 'Finished', value: 'finished' },
-        ];
-    }
-}

package/src/lightning/positionLibrary/__examples__/playground/playground.css

@@ -1,84 +0,0 @@
-.config {
-    background: white;
-    border-radius: 5px;
-    padding: 8px 15px 13px 15px;
-    position: fixed;
-    width: auto;
-    left: 10px;
-    right: 10px;
-}
-
-.config-bottom {
-    bottom: 130px;
-}
-
-.slds-col {
-    border-left: 1px solid #eef4ff;
-    border-right: 1px solid #eef4ff;
-}
-
-.container {
-    width: var(--containerWidth, 300px);
-    height: var(--containerHeight, 200px);
-    border: 3.5px solid #0176d3;
-}
-
-.container-text {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.container-placeholder {
-    background: transparent;
-    height: 1000px;
-    /* width: 50%;
-    margin: auto; */
-    word-wrap: break-word;
-}
-
-.top-left {
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-
-.top-right {
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.bottom-left {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-}
-
-.bottom-right {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-}
-
-.viewport-placeholder {
-    height: 200vh;
-    width: 50%;
-    background: transparent;
-}
-
-*::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 6px;
-}
-
-*::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.5);
-    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-}
-
-body {
-    overflow-y: auto;
-}

package/src/lightning/positionLibrary/__examples__/playground/playground.html

@@ -1,122 +0,0 @@
-<template>
-    <!-- Container -->
-    <div class={computedContainerClass}>
-        <p class="container-text">Container</p>
-
-        <template if:true={isUseShadowRootContainer}>
-            <positionLibrary-playground-shadow-scroll>
-                <positionLibrary-components
-                    component={selectedComponent}
-                    class={computedComponentClass}
-                ></positionLibrary-components>
-            </positionLibrary-playground-shadow-scroll>
-        </template>
-
-        <template if:false={isUseShadowRootContainer}>
-            <positionLibrary-components
-                component={selectedComponent}
-                class={computedComponentClass}
-            ></positionLibrary-components>
-        </template>
-
-        <template if:true={isContainerScroll}>
-            <div class="container-placeholder"></div>
-        </template>
-    </div>
-
-    <!-- Config panel -->
-    <div class={computedConfigClass}>
-        <div class="slds-text-heading_medium slds-m-bottom_x-small">
-            Configuration
-        </div>
-
-        <div class="slds-grid slds-gutters_small">
-            <div class="slds-col slds-size_1-of-5">
-                <lightning-combobox
-                    name="components"
-                    label="Select a component"
-                    placeholder="Please select"
-                    value={selectedComponent}
-                    options={componentOptions}
-                    onchange={handleComponentSelector}
-                >
-                </lightning-combobox>
-            </div>
-            <div class="slds-col slds-size_2-of-5">
-                <lightning-slider
-                    label="Container Width(px)"
-                    step="50"
-                    min="100"
-                    max="500"
-                    value={containerWidth}
-                    onchange={handleWidthSlider}
-                ></lightning-slider>
-                <lightning-slider
-                    label="Container Height(px)"
-                    step="50"
-                    min="100"
-                    max="500"
-                    value={containerHeight}
-                    onchange={handleHeightSlider}
-                ></lightning-slider>
-            </div>
-            <div class="slds-col slds-size_1-of-5">
-                <lightning-combobox
-                    name="containerPosition"
-                    label="Container Position"
-                    placeholder="Please select"
-                    value={containerPosition}
-                    options={positionOptions}
-                    onchange={handleContainerPosition}
-                >
-                </lightning-combobox>
-                <lightning-combobox
-                    name="componentPosition"
-                    label="Component Position"
-                    placeholder="Please select"
-                    value={componentPosition}
-                    options={positionOptions}
-                    onchange={handleComponentPosition}
-                >
-                </lightning-combobox>
-            </div>
-            <div class="slds-col slds-size_1-of-5">
-                <lightning-input
-                    type="toggle"
-                    name="container scrollbar"
-                    label="Container Scrollbar"
-                    message-toggle-active="Enabled"
-                    message-toggle-inactive="Disabled"
-                    checked={isContainerScroll}
-                    onchange={handleContainerScroll}
-                    disabled={isContainerScrollDisabled}
-                ></lightning-input>
-                <lightning-input
-                    type="toggle"
-                    name="viewport scrollbar"
-                    label="Viewport Scrollbar"
-                    message-toggle-active="Enabled"
-                    message-toggle-inactive="Disabled"
-                    checked={isViewportScroll}
-                    onchange={handleViewportScroll}
-                    class="slds-m-top_medium"
-                ></lightning-input>
-                <lightning-input
-                    type="toggle"
-                    name="ShadowRoot Container"
-                    label="ShadowRoot Container"
-                    message-toggle-active="Enabled"
-                    message-toggle-inactive="Disabled"
-                    checked={isUseShadowRootContainer}
-                    onchange={handleShadowContainer}
-                    class="slds-m-top_medium"
-                ></lightning-input>
-            </div>
-        </div>
-    </div>
-
-    <!-- Placeholder to enable scrollbar of viewport -->
-    <template if:true={isViewportScroll}>
-        <div class="viewport-placeholder"></div>
-    </template>
-</template>

package/src/lightning/positionLibrary/__examples__/playground/playground.js

@@ -1,103 +0,0 @@
-import { LightningElement } from 'lwc';
-import { classSet } from 'lightning/utils';
-
-export default class PositionLibraryPlayground extends LightningElement {
-    selectedComponent = 'helpText';
-    containerPosition = 'topLeft';
-    componentPosition = 'topLeft';
-
-    containerWidth = 300;
-    containerHeight = 200;
-
-    isContainerScroll = false;
-    isViewportScroll = false;
-    isUseShadowRootContainer = false;
-
-    componentOptions = [
-        { label: 'helpText', value: 'helpText' },
-        { label: 'button-menu', value: 'button-menu' },
-        { label: 'combobox', value: 'combobox' },
-        { label: 'datepicker', value: 'datepicker' },
-    ];
-
-    positionOptions = [
-        { label: 'top left', value: 'topLeft' },
-        { label: 'top right', value: 'topRight' },
-        { label: 'bottom left', value: 'bottomLeft' },
-        { label: 'bottom right', value: 'bottomRight' },
-    ];
-
-    handleComponentSelector(event) {
-        this.selectedComponent = event.detail.value;
-    }
-
-    handleContainerPosition(event) {
-        this.containerPosition = event.detail.value;
-    }
-
-    handleComponentPosition(event) {
-        this.componentPosition = event.detail.value;
-    }
-
-    get computedComponentClass() {
-        return classSet().add({
-            'top-left': this.componentPosition === 'topLeft',
-            'top-right': this.componentPosition === 'topRight',
-            'bottom-left': this.componentPosition === 'bottomLeft',
-            'bottom-right': this.componentPosition === 'bottomRight',
-        });
-    }
-
-    // container has style overflow-y:auto(slds-scrollable_y)
-    get computedContainerClass() {
-        const classnames = classSet('container slds-scrollable_y');
-
-        return classnames.add({
-            'top-left': this.containerPosition === 'topLeft',
-            'top-right': this.containerPosition === 'topRight',
-            'bottom-left': this.containerPosition === 'bottomLeft',
-            'bottom-right': this.containerPosition === 'bottomRight',
-        });
-    }
-
-    get computedConfigClass() {
-        const classnames = classSet('config');
-
-        return classnames.add({
-            'config-bottom':
-                this.containerPosition === 'topLeft' ||
-                this.containerPosition === 'topRight',
-        });
-    }
-
-    handleWidthSlider(event) {
-        this.containerWidth = event.detail.value;
-        const css = document.body.style;
-        css.setProperty('--containerWidth', `${this.containerWidth}px`);
-    }
-
-    handleHeightSlider(event) {
-        this.containerHeight = event.detail.value;
-        const css = document.body.style;
-        css.setProperty('--containerHeight', `${this.containerHeight}px`);
-    }
-
-    handleContainerScroll() {
-        this.isContainerScroll = !this.isContainerScroll;
-    }
-
-    handleViewportScroll() {
-        this.isViewportScroll = !this.isViewportScroll;
-    }
-
-    handleShadowContainer() {
-        this.isUseShadowRootContainer = !this.isUseShadowRootContainer;
-        if (this.isUseShadowRootContainer) {
-            this.isContainerScroll = false;
-        }
-    }
-
-    get isContainerScrollDisabled() {
-        return this.isUseShadowRootContainer === true;
-    }
-}

package/src/lightning/positionLibrary/__examples__/playgroundShadowScroll/playgroundShadowScroll.html

@@ -1,8 +0,0 @@
-<template>
-    <div
-        style="overflow: auto; width: 100%; height: 100%; background: #f3f2f2"
-        onprivatescrollablecontainer={handleScroll}
-    >
-        <slot></slot>
-    </div>
-</template>

package/src/lightning/positionLibrary/__examples__/playgroundShadowScroll/playgroundShadowScroll.js

@@ -1,9 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class PlaygroundShadowScroll extends LightningElement {
-    handleScroll(event) {
-        const { callback } = event.detail;
-        callback(event.composedPath());
-        event.stopPropagation();
-    }
-}