lightning-base-components 1.21.1-alpha → 1.21.3-alpha

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

@@ -0,0 +1,241 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+import ModalAllMulti from 'modal/allmulti';
+
+// this form is loosely based on SLDS form element blueprint, Compound Variant
+// https://www.lightningdesignsystem.com/components/form-element/#Compound
+// + uses sizing utils: https://www.lightningdesignsystem.com/utilities/sizing/
+
+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/demoallformhoriz/demoallformhoriz.css

@@ -0,0 +1,5 @@
+/* imports for Native Shadow support */
+/* supports common HTML elements */
+@import 'lightning/sldsCommon';
+/* supports form elements and form layout */
+@import 'lightning/sldsFormElementUtils';

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

@@ -0,0 +1,165 @@
+<template>
+    <lightning-modal-header label={heading}>
+        <p>Utilize <a href="https://www.lightningdesignsystem.com/components/form-element/#Horizontal" target="_blank">SLDS form element horizontal variant</a></p>
+    </lightning-modal-header>
+    <lightning-modal-body>
+        <div class="slds-form" role="list">
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-textarea
+                        id="form-element-id-01"
+                        label="Descriptive Label 1"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                        required
+                    ></lightning-textarea>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-textarea
+                        id="form-element-id-02"
+                        label="Descriptive Label 2"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                        required
+                    ></lightning-textarea>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-03"
+                        label="Descriptive Label 3"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                        required
+                    ></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-04"
+                        label="Descriptive Label 4"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                        required
+                    ></lightning-input>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-05"
+                        label="Descriptive Label 5"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                    ></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-06"
+                        label="Descriptive Label 6"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                    ></lightning-input>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-07"
+                        label="Descriptive Label 7"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                    ></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-08"
+                        label="Descriptive Label 8"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                    ></lightning-input>
+                </div>
+            </div>
+            <div class="slds-form__row">
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-09"
+                        label="Descriptive Label 9"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                    ></lightning-input>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <lightning-input
+                        id="form-element-id-10"
+                        label="Descriptive Label 10"
+                        value=""
+                        placeholder="Placeholder text…"
+                        variant="label-inline"
+                    ></lightning-input>
+                </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/demoallformhoriz/demoallformhoriz.js

@@ -0,0 +1,241 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+import ModalAllMulti from 'modal/allmulti';
+
+// this form is loosely based on SLDS form element blueprint, Horizontal Variant
+// https://www.lightningdesignsystem.com/components/form-element/#Horizontal
+// sizing utils not in use: https://www.lightningdesignsystem.com/utilities/sizing/
+
+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.css

@@ -0,0 +1 @@
+@import 'lightning/sldsCommon';

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

@@ -0,0 +1,5 @@
+@import 'lightning/sldsCommon';
+
+:host([data-render-mode="shadow"]) lightning-modal-footer lightning-button:not(:first-child) {
+    margin-left: var(--sds-g-spacing-2, 0.5rem);
+}

package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js

@@ -131,6 +131,11 @@ const SELECTORS = {
     'multi-modals': BUTTON_MODAL_MULTI,
 };
 
+// private attributes on modal components
+const DATA_VARIANT_HEADLESS_ATTRIBUTE = 'data-variant-headless';
+const DATA_VARIANT_FOOTLESS_ATTRIBUTE = 'data-variant-footless';
+const DATA_SIZE_ATTRIBUTE = 'data-size';
+
 // modal type to size api value mapping
 const NAME_TO_SIZE = {
     all: MODAL_SIZE_FULL,
@@ -284,6 +289,9 @@ module.exports = {
     MODAL_RANGE,
     OVERLAY_RANGE,
     SPEC_TO_TABS_TO_CLOSE_BTN,
+    DATA_VARIANT_FOOTLESS_ATTRIBUTE,
+    DATA_VARIANT_HEADLESS_ATTRIBUTE,
+    DATA_SIZE_ATTRIBUTE,
     SCREEN_SIZE,
     ARIA_LABELLEDBY,
     ARIA_LABEL,