lightning-base-components 1.17.3-alpha → 1.17.6-alpha

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

@@ -3,7 +3,7 @@
         <button
             onclick={handleDemoModal}
             aria-haspopup="modal"
-        >Open the Modal</button> 
+        >Open Modal form, size=medium</button>
         <p>Result: <code>{demoResult}</code></p>
     </div>
 </template>

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

@@ -7,7 +7,7 @@ export default class ModalAllForm extends LightningElement {
     handleDemoModal() {
         ModalDemoAllForm.open({
             // LightningModal
-            size: 'small',
+            size: 'medium',
             // this becomes 'label'
             heading: 'Edit Contact Information',
             description: 'Edit the contact information for Sales Opportunities',

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

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

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

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

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

@@ -0,0 +1,49 @@
+import { LightningElement } from 'lwc';
+import ModalDemoAllFormFull from 'modal/demoallformfull';
+
+export default class ModalAllForm extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemoAllFormFull.open({
+            // LightningModal
+            size: 'full',
+            // this becomes 'label'
+            heading: 'Edit Contact Information',
+            description: 'Edit the contact information for Sales Opportunities',
+            // ModalDemo
+            options: [
+                {
+                    id: 1,
+                    variant: 'neutral',
+                    label: 'Close',
+                    triggerCancel: true,
+                },
+                {
+                    id: 2,
+                    variant: 'neutral',
+                    label: 'Disable Close Button',
+                    toggleDisableClose: true,
+                },
+                {
+                    id: 3,
+                    variant: 'neutral',
+                    label: 'Open Next Modal',
+                    triggerSecondModal: true,
+                },
+                {
+                    id: 4,
+                    variant: 'brand',
+                    label: 'Save Data',
+                    triggerSubmit: true,
+                },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = JSON.stringify(result);
+            }
+        });
+    }
+}

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

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

package/src/lightning/modal/__examples__disabled/demoallformfull/demoallformfull.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/demoallformfull/demoallformfull.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/modalBase/modalBase.css

@@ -13,4 +13,4 @@
 /* Required for z-index */
 .fix-slds-backdrop {
     z-index: unset;
-}
+}

package/src/lightning/modalBase/modalBase.html

@@ -38,9 +38,9 @@
                     data-container
                 >
                     <lightning-button-icon
-                        class="slds-modal__close"
+                        class={computedCloseButtonCssClass}
                         icon-name="utility:close"
-                        variant="bare-inverse"
+                        variant={computedCloseButtonVariant}
                         alternative-text={closeButtonAltText}
                         onclick={handleCloseClick}
                         size="large"