lightning-base-components 1.16.3-alpha → 1.16.5-alpha

package/src/lightning/modal/__examples__disabled/demoall/demoall.js

@@ -0,0 +1,13 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class ModalDemoAll extends LightningModal {
+    @api header = 'Select an Option';
+    @api body = 'Select an option:';
+    @api options = [];
+
+    handleOptionClick(e) {
+        const { target } = e;
+        this.close(parseInt(target.dataset.id, 10));
+    }
+}

package/src/lightning/modal/__examples__disabled/demoallform/demoallform.css

@@ -0,0 +1,3 @@
+lightning-input .slds-checkbox_toggle .slds-checkbox_faux_container {
+    display: block !important;
+}

package/src/lightning/modal/__examples__disabled/demoallform/demoallform.html

@@ -0,0 +1,146 @@
+<template>
+    <lightning-modal-header label={heading}>
+        <p>Update your contact information by completing the form below.</p>
+    </lightning-modal-header>
+    <lightning-modal-body><div id="all-body">
+        <div class="slds-form slds-form_stacked" role="list">
+            <div class="slds-form__row">
+              <div class="slds-form__item" role="listitem">
+                <lightning-input onchange={handleTextInput} type="text" name="assignedTo" label="Assigned To" required></lightning-input>
+              </div>
+              <div class="slds-form__item" role="listitem">
+                <lightning-input onchange={handleTextInput} type="text" name="teamName" label="Team Name" required></lightning-input>
+              </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input type="toggle" label="Security Assessment Required?" name="input3" checked disabled></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-combobox
+                        name="progress"
+                        label="Status"
+                        value={statusValue}
+                        placeholder="Select Progress"
+                        options={statusOptions}
+                        onchange={handleChangeStatus}
+                    ></lightning-combobox>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input onchange={handleTextInput} type="text" name="personalSettings" label="Personalization Settings"></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input onchange={handleTextInput} type="number" name="slaSerialNum" label="SLA Serial Number"></lightning-input>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input onchange={handleDateInput} type="date" name="slaExpireDate" label="SLA Expiration Date" ></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input onchange={handleTimeInput} type="time" name="slaExpireTime" label="SLA Expiration Time" ></lightning-input>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input onchange={handleTextInput} type="text" name="location" label="Location"></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input onchange={handleTextInput} type="text" name="selectedLangs" label="Selected Languages"></lightning-input>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input-address
+                        address-label="Billing Address"
+                        street-label="Street"
+                        city-label="City"
+                        country-label="Country"
+                        province-label="Province"
+                        postal-code-label="PostalCode"
+                        street={addressBilling.street}
+                        city={addressBilling.city}
+                        country={addressBilling.country}
+                        province={addressBilling.province}
+                        postal-code={addressBilling.postalCode}
+                        country-options={getCountryOptsBilling}
+                        province-options={getProvinceOptsBilling}
+                        onchange={handleChangeBilling}
+                        field-level-help="Enter your billing address.  Where your credit card statements are sent."
+                    ></lightning-input-address>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input-address
+                        address-label="Shipping Address"
+                        street-label="Street"
+                        city-label="City"
+                        country-label="Country"
+                        province-label="Province"
+                        postal-code-label="PostalCode"
+                        street={addressShipping.street}
+                        city={addressShipping.city}
+                        country={addressShipping.country}
+                        province={addressShipping.province}
+                        postal-code={addressShipping.postalCode}
+                        field-level-help="Enter your shipping address. Where you receive packages."
+                        country-options={getCountryOptsShipping}
+                        province-options={getProvinceOptsShipping}
+                        onchange={handleChangeShipping}
+                    ></lightning-input-address>
+                </div>
+            </div>
+        </div>
+    </div></lightning-modal-body>
+    <lightning-modal-footer><div id="all-footer">
+        <template for:each={options} for:item="option">
+            <template if:true={option.triggerCancel}>
+                <lightning-button
+                    key={option.id}
+                    label={option.label}
+                    class="slds-button"
+                    data-focus={option.focusName}
+                    variant={option.variant}
+                    onclick={handleButtonCancel}
+                    data-id={option.id}
+                    disabled={disableClose}
+                ></lightning-button>
+            </template>
+            <template if:true={option.triggerSecondModal}>
+                <lightning-button
+                    key={option.id}
+                    label={option.label}
+                    class="slds-button"
+                    data-focus={option.focusName}
+                    variant={option.variant}
+                    onclick={handleButtonOpenSecondModal}
+                    data-id={option.id}
+                ></lightning-button>    
+            </template>
+            <template if:true={option.toggleDisableClose}>
+                <lightning-button
+                    key={option.id}
+                    label={computedDisableCloseLabel}
+                    class="slds-button"
+                    data-focus={option.focusName}
+                    variant={option.variant}
+                    onclick={handleButtonToggleDisableButton}
+                    data-id={option.id}
+                ></lightning-button>
+            </template>
+            <template if:true={option.triggerSubmit}>
+                <lightning-button
+                    key={option.id}
+                    label={option.label}
+                    class="slds-button"
+                    data-focus={option.focusName}
+                    variant={option.variant}
+                    onclick={handleButtonSubmit}
+                    data-id={option.id}
+                    disabled={disableClose}
+                ></lightning-button>
+            </template>
+        </template>
+    </div></lightning-modal-footer>
+</template>

package/src/lightning/modal/__examples__disabled/demoallform/demoallform.js

@@ -0,0 +1,240 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+import ModalAllMulti from 'modal/allmulti';
+
+// this form is loosely based on SLDS form blueprint, Stacked Alignment
+// https://www.lightningdesignsystem.com/components/form-element/#Stacked-Alignment
+
+export default class ModalForm extends LightningModal {
+    @api heading = '';
+    @api options = [];
+
+    buttonOptions = [
+        {
+            id: 1,
+            variant: 'neutral',
+            label: 'Close This Modal',
+            focusName: 'focus-footer-button-01',
+        },
+    ];
+
+    // toggle disable close button state
+    toggleCloseButtonLabel = {
+        label: 'Disable Close Button',
+        labelToggle: 'Enable Close Button',
+    };
+    computedDisableCloseLabel = this.toggleCloseButtonLabel.label;
+
+    // form fields
+    assignedTo = null;
+    teamName = null;
+    securityAssessReq = true;
+    statusValue = 'inProgress';
+    personalSettings = null;
+    slaSerialNum = null;
+    slaExpireDate = null;
+    slaExpireTime = null;
+    location = null;
+    selectedLangs = null;
+
+    addressBilling = {
+        street: '',
+        city: '',
+        province: '',
+        postalCode: '',
+        country: 'US',
+    };
+    addressShipping = {
+        street: '',
+        city: '',
+        province: '',
+        postalCode: '',
+        country: 'US',
+    };
+
+    openSecondModal() {
+        ModalAllMulti.open({
+            size: 'small',
+            heading: 'Second Modal w/ higher z-index',
+            description: 'A description of the second modal',
+            // ModalDemo
+            options: this.buttonOptions,
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = { action: 'dismissed' };
+            } else {
+                this.demoResult = result;
+            }
+        });
+    }
+
+    handleButtonOpenSecondModal() {
+        this.openSecondModal();
+    }
+
+    handleButtonToggleDisableButton() {
+        const newDisableCloseValue = !this.disableClose;
+        this.disableClose = newDisableCloseValue;
+        this.computedDisableCloseLabel = newDisableCloseValue
+            ? this.toggleCloseButtonLabel.labelToggle
+            : this.toggleCloseButtonLabel.label;
+    }
+
+    // handle events in the form
+    handleButtonSubmit() {
+        const data = this.compileData();
+        const dataAsString = JSON.stringify(data);
+        this.close(dataAsString);
+    }
+
+    handleButtonCancel() {
+        this.close({ action: 'cancel' });
+    }
+
+    handleTextInput(event) {
+        const { detail, target } = event;
+        const inputElem = target.shadowRoot.querySelector('input');
+        const inputName = inputElem.getAttribute('name');
+        if (inputName) {
+            this[inputName] = detail.value || '';
+        }
+    }
+
+    handleDateInput(event) {
+        const { detail, target } = event;
+        const pickerElem = target.shadowRoot.querySelector(
+            'lightning-datepicker'
+        );
+        const inputElem = pickerElem.shadowRoot.querySelector('input');
+        const inputName = inputElem.getAttribute('name');
+        if (inputName) {
+            this[inputName] = detail.value || '';
+        }
+    }
+
+    handleTimeInput(event) {
+        const { detail, target } = event;
+        const pickerElem = target.shadowRoot.querySelector(
+            'lightning-timepicker'
+        );
+        const comboBoxElem = pickerElem.shadowRoot.querySelector(
+            'lightning-base-combobox'
+        );
+        const inputElem = comboBoxElem.shadowRoot.querySelector('input');
+        const inputName = inputElem.getAttribute('name');
+        if (inputName) {
+            this[inputName] = detail.value || '';
+        }
+    }
+
+    handleChangeStatus(event) {
+        this.statusValue = event.detail.value;
+    }
+
+    handleChangeBilling(event) {
+        const { street, city, province, country, postalCode } = event.detail;
+        this.addressBilling = { street, city, province, country, postalCode };
+    }
+
+    handleChangeShipping(event) {
+        const { street, city, province, country, postalCode } = event.detail;
+        this.addressShipping = { street, city, province, country, postalCode };
+    }
+
+    get statusOptions() {
+        return [
+            { label: 'New', value: 'new' },
+            { label: 'In Progress', value: 'inProgress' },
+            { label: 'Finished', value: 'finished' },
+        ];
+    }
+
+    // these are by no means intended to be complete country or province lists
+    // only enough values to provide some examples to choose from
+    countryProvinceMap = {
+        US: [
+            { label: 'California', value: 'CA' },
+            { label: 'Texas', value: 'TX' },
+            { label: 'Washington', value: 'WA' },
+        ],
+        CN: [
+            { label: 'GuangDong', value: 'GD' },
+            { label: 'GuangXi', value: 'GX' },
+            { label: 'Sichuan', value: 'SC' },
+        ],
+        CA: [
+            { label: 'Alberta', value: 'AB' },
+            { label: 'British Columbia', value: 'BC' },
+            { label: 'Manitoba', value: 'MB' },
+            { label: 'New Brunswick', value: 'NB' },
+            { label: 'Newfoundland and Labrador', value: 'NL' },
+            { label: 'Nova Scotia', value: 'NS' },
+            { label: 'Ontario', value: 'ON' },
+            { label: 'Prince Edward Island', value: 'PE' },
+            { label: 'Quebec', value: 'QC' },
+            { label: 'Saskatchewan', value: 'SK' },
+        ],
+        SP: [
+            { label: 'Ávila', value: 'AV' },
+            { label: 'Burgos', value: 'BU' },
+            { label: 'Cantabria', value: 'S' },
+            { label: 'Goiás', value: 'GO' },
+            { label: 'Paraíba', value: 'PB' },
+            { label: 'Tyrol', value: 'TIR' },
+        ],
+    };
+
+    countryOptions = [
+        { label: 'United States', value: 'US' },
+        { label: 'China', value: 'CN' },
+        { label: 'Canada', value: 'CA' },
+        { label: 'Spain', value: 'SP' },
+    ];
+
+    get getProvinceOptsBilling() {
+        return this.countryProvinceMap[this.addressBilling.country];
+    }
+
+    get getProvinceOptsShipping() {
+        return this.countryProvinceMap[this.addressShipping.country];
+    }
+
+    get getCountryOptsBilling() {
+        return this.countryOptions;
+    }
+
+    get getCountryOptsShipping() {
+        return this.countryOptions;
+    }
+
+    compileData() {
+        const {
+            addressShipping,
+            addressBilling,
+            statusValue,
+            assignedTo,
+            teamName,
+            securityAssessReq,
+            personalSettings,
+            slaSerialNum,
+            slaExpireDate,
+            slaExpireTime,
+            location,
+            selectedLangs,
+        } = this;
+        return {
+            addressShipping,
+            addressBilling,
+            statusValue,
+            assignedTo,
+            teamName,
+            securityAssessReq,
+            personalSettings,
+            slaSerialNum,
+            slaExpireDate,
+            slaExpireTime,
+            location,
+            selectedLangs,
+        };
+    }
+}

package/src/lightning/modal/__examples__disabled/demofootless/demofootless.html

@@ -0,0 +1,17 @@
+<template>
+    <lightning-modal-header label={header}>
+        Here’s a tagline if you need it. It is allowed to extend across 
+        mulitple lines, so I’m making up content to show that to you.
+        It is allowed to have links but this one doesn't have any links.
+    </lightning-modal-header>
+    <lightning-modal-body>
+        <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis
+            aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
+        <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Link to <a href="https://salesforce.com" target="_blank">Salesforce.com</a>. Eiusmod et adipisicing culpa deserunt nostrud
+            ad veniam nulla aute est. Link to <a href="https://salesforce.com" target="_blank">Salesforce.com</a> Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
+        <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis
+            aute consequat ipsum magna exercitation reprehenderit magna. Link to <a href="https://salesforce.com" target="_blank">Salesforce.com</a>. Tempor cupidatat consequat elit dolor adipisicing.</p>
+        <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud
+            ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
+    </lightning-modal-body>
+</template>

package/src/lightning/modal/__examples__disabled/demofootless/demofootless.js

@@ -0,0 +1,11 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class ModalDemoFootless extends LightningModal {
+    @api header = 'Modal Demo Without Footer';
+
+    handleOptionClick(e) {
+        const { target } = e;
+        this.close(parseInt(target.dataset.id, 10));
+    }
+}

package/src/lightning/modal/__examples__disabled/demoheadless/demoheadless.html

@@ -0,0 +1,20 @@
+<template>
+    <lightning-modal-body>
+        <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis
+            aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
+          <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud
+            ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
+    </lightning-modal-body>
+    <lightning-modal-footer>
+        <template for:each={options} for:item="option">
+            <lightning-button
+                key={option.id}
+                label={option.label}
+                class="slds-button"
+                variant={option.variant}
+                onclick={handleOptionClick}
+                data-id={option.id}
+            ></lightning-button>
+        </template>
+    </lightning-modal-footer>
+</template>

package/src/lightning/modal/__examples__disabled/demoheadless/demoheadless.js

@@ -0,0 +1,12 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class ModalDemoHeadless extends LightningModal {
+    @api body = 'Select an option:';
+    @api options = [];
+
+    handleOptionClick(e) {
+        const { target } = e;
+        this.close(parseInt(target.dataset.id, 10));
+    }
+}

package/src/lightning/modal/__examples__disabled/footless/footless.css

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #FFF;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+}

package/src/lightning/modal/__examples__disabled/footless/footless.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="example">
+        <button
+            onclick={handleDemoModal}
+            aria-haspopup="modal"
+        >Open the Footless Modal</button> 
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+</template>

package/src/lightning/modal/__examples__disabled/footless/footless.js

@@ -0,0 +1,19 @@
+import { LightningElement } from 'lwc';
+import ModalDemoFootless from 'modal/demofootless';
+
+export default class ModalFootless extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemoFootless.open({
+            // LightningModal
+            size: 'small',
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = result;
+            }
+        });
+    }
+}

package/src/lightning/modal/__examples__disabled/headless/headless.css

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #FFF;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+}

package/src/lightning/modal/__examples__disabled/headless/headless.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="example">
+        <button
+            onclick={handleDemoModal}
+            aria-haspopup="modal"
+        >Open the Headless Modal</button> 
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+</template>

package/src/lightning/modal/__examples__disabled/headless/headless.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+import ModalDemoHeadless from 'modal/demoheadless';
+
+export default class ModalAllChildren extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemoHeadless.open({
+            // LightningModal
+            size: 'small',
+            label: 'Modal Header',
+            // ModalDemo
+            body: 'Select an option:',
+            options: [
+                { id: 1, variant: 'neutral', label: 'Option 1' },
+                { id: 2, variant: 'neutral', label: 'Option 2' },
+                { id: 3, variant: 'brand', label: 'Main Option' },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = result;
+            }
+        });
+    }
+}

package/src/lightning/modal/modal.html

@@ -0,0 +1,3 @@
+<template>
+    <!-- LightningModalBase -->
+</template>

package/src/lightning/modal/modal.js

@@ -0,0 +1,93 @@
+import { api } from 'lwc';
+import LightningOverlay from 'lightning/overlay';
+import { parent, instanceName, secure } from 'lightning/overlayUtils';
+import LightningModalBase from 'lightning/modalBase';
+import { normalizeBoolean } from 'lightning/utilsPrivate';
+
+/**
+ * Extend this component to create a message modal overlayed on the current app window.
+ */
+export default class LightningModal extends LightningOverlay {
+    static [parent] = LightningModalBase;
+    static [instanceName] = 'lightning-modal';
+
+    // private tracked state
+    _disableClose = false;
+
+    // public api
+    /**
+     * How much of the viewport width the modal uses. Supported values are small, medium, or large.
+     * @type {string}
+     * @default medium
+     */
+    @api size = 'medium';
+
+    /**
+     * Sets the modal's title and assistive device label.
+     * @type {string}
+     * @required true
+     * @default false
+     */
+    @api label = '';
+
+    /**
+     * Sets the modal's accessible description.
+     * @type {boolean}
+     * @default false
+     */
+    @api description = '';
+
+    /**
+     * Prevents closing the modal by normal means like the ESC key, the close button, or `.close()`.
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get disableClose() {
+        return this._disableClose;
+    }
+
+    set disableClose(value) {
+        const currentDisableClose = this._disableClose;
+        this._disableClose = normalizeBoolean(value);
+        // if there is a change, dispatch private event for modalBase
+        if (currentDisableClose !== this._disableClose) {
+            this.dispatchEvent(
+                new CustomEvent('privatedisableclosebutton', {
+                    detail: {
+                        disableClose: this._disableClose,
+                        [secure]: true,
+                    },
+                    bubbles: true,
+                })
+            );
+        }
+    }
+
+    @api
+    close(result) {
+        // Prevent close() private event until disableClose removed
+        if (!this.disableClose) {
+            const promise = new Promise((resolve) => {
+                this.dispatchEvent(
+                    new CustomEvent('privateclose', {
+                        detail: {
+                            resolve,
+                            [secure]: true,
+                        },
+                        bubbles: true,
+                    })
+                );
+            });
+            super.close(result, promise);
+        } else {
+            // Intentionally console error when devs have not disabled elements
+            // when disableClose has been set true
+            let errorMsg =
+                'LightningModal - Any interactions (buttons, processes, etc) that call modal.close() should be ';
+            errorMsg += '(a) disabled, while disableClose api set true, and ';
+            errorMsg += '(b) re-enabled, when disableClose set false';
+            console.error(errorMsg);
+        }
+    }
+}

package/src/lightning/modal/modal.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+    <minApiVersion>55.0</minApiVersion>
+    <support>GA</support>
+</LightningComponentBundle>