lightning-base-components 1.18.6-alpha → 1.18.7-alpha

package/src/lightning/spinner/spinner.js

@@ -1,7 +1,6 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
+import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_VARIANT = 'base';
@@ -9,9 +8,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays an animated spinner.
  */
-export default class LightningSpinner extends LightningShadowBaseClass {
-    static validationOptOut = ['class'];
-
+export default class LightningSpinner extends LightningElement {
     /**
      * The alternative text used to describe the reason for the wait and need for a spinner.
      * @type {string}
@@ -61,12 +58,9 @@ export default class LightningSpinner extends LightningShadowBaseClass {
     _altText = '';
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-spinner_container');
-        if (isCSR) {
-            this.template.addEventListener('mousewheel', this.stopScrolling);
-            this.template.addEventListener('touchmove', this.stopScrolling);
-        }
+        this.template.addEventListener('mousewheel', this.stopScrolling);
+        this.template.addEventListener('touchmove', this.stopScrolling);
     }
 
     renderedCallback() {

package/src/lightning/tabBar/tabBar.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './tab-bar.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './tab-bar.slds.css'; */

package/src/lightning/tabBar/tabBar.js

@@ -3,8 +3,7 @@ import labelOverflowMoreAlternativeText from '@salesforce/label/LightningTabs.ov
 import labelOverflowMoreTitle from '@salesforce/label/LightningTabs.overflowMoreTitle';
 import labelErrorStateAlternativeText from '@salesforce/label/LightningTabs.errorStateAlternativeText';
 
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { reflectAttribute } from 'lightning/utilsPrivate';
 import { calculateOverflow } from 'lightning/overflowLibrary';
@@ -22,7 +21,7 @@ const i18n = {
 const RECOMPUTE_OVERFLOW_THRESHOLD_PX = 30;
 const TARGET_SELECTION_NAME_SUFFIX = 'Tab';
 
-export default class LightningTabBar extends LightningShadowBaseClass {
+export default class LightningTabBar extends LightningElement {
     @api disableOverflow = false;
 
     @track _allTabs = [];
@@ -37,7 +36,6 @@ export default class LightningTabBar extends LightningShadowBaseClass {
     _selectedTab;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (this.overflowSupported) {
             this._queueOverflow();

package/src/lightning/timepicker/timepicker.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './timepicker.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/timepicker/timepicker.js

@@ -4,8 +4,7 @@ import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeO
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { track, api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { getTimeToHighlight } from './utils';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -41,7 +40,7 @@ const TIME_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningTimePicker extends LightningShadowBaseClass {
+export default class LightningTimePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -277,7 +276,6 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
     }
 

package/src/lightning/toast/__docs__/toast.md

@@ -10,7 +10,7 @@ The function also creates a single page-level toast container if one does not ex
 ```javascript
 // c/myComponent.js
 import { LightningElement } from 'lwc';
-import { Toast } from 'lightning/toast';
+import  Toast from 'lightning/toast';
 
 export default class MyComponent extends LightningElement {
     ...
@@ -100,4 +100,4 @@ If no `mode` is provided, the default `mode` will be determined by the value of
 
 `LightningToast` is implemented to be responsive according to the screen resolution. For smaller screen or mobile environments, the toast's **icon** and **description** (i.e. text stored in `message`, and `messageLinks`) will **not be shown** due to the screen's width limitation (see [Toast blueprint screen variants](https://www.lightningdesignsystem.com/guidelines/messaging/components/toasts/#flavor-variants-screen).
 
-The best practice where small screen and mobile environments are the primary use case is to only provide links in the toast's title (ie `label` and `labelLinks`) in order to have links visible and interactive.
+The best practice where small screen and mobile environments are the primary use case is to only provide links in the toast's title (ie `label` and `labelLinks`) in order to have links visible and interactive.

package/src/lightning/toast/toast.css

@@ -1,4 +1,4 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './toast.slds.css';
 @import './icon.slds.css';
 @import './button-icon.slds.css';
@@ -6,7 +6,7 @@
 @import 'lightning/sldsUtilsThemes';
 @import 'lightning/sldsUtilsMargin';
 @import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsGrid'; */
 
 .fix-notify_toast_animation,
 :host([data-render-mode="shadow"]) .fix-notify_toast_animation {

package/src/lightning/toast/toast.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     makeAbsoluteUrl,
     normalizeString,
@@ -46,7 +45,7 @@ const MIN_BROWSER_WIDTH = 480;
 /**
  * A notification element used to convey a label.
  */
-export default class Toast extends LightningShadowBaseClass {
+export default class Toast extends LightningElement {
     static [instanceName] = 'lightning-toast';
     static [properties] = [
         'variant',
@@ -533,7 +532,6 @@ export default class Toast extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.registerWithContainer();
         this.determineSmallerScreen();
         this.determineSmallFormFactor();

package/src/lightning/toastContainer/toastContainer.css

@@ -1,7 +1,7 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './toast.slds.css';
 @import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsGrid'; */
 
 .top,
 :host([data-render-mode="shadow"]) .top {

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -1,2 +1,3 @@
-@import 'lightning/sldsCommon';
-@import './vertical-navigation.slds.css';
+/* sldsCommon missed earlier - check on review */
+/* @import 'lightning/sldsCommon'; */
+/* @import './vertical-navigation.slds.css'; */

package/src/lightning/verticalNavigation/verticalNavigation.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     assert,
@@ -18,7 +17,7 @@ const ALLOWED_CHILDREN = [
  * A vertical list of links that either take the user to another page or parts of the page the user is in.
  * @slot default Placeholder for lightning-vertical-navigation-section and lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigation extends LightningShadowBaseClass {
+export default class LightningVerticalNavigation extends LightningElement {
     @track _compact;
     @track _shaded;
     @track _selectedItem;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.css

@@ -1,5 +1,6 @@
-@import 'lightning/sldsCommon';
-@import './vertical-navigation-section.slds.css';
+/* sldsCommon missed earlier - check on review
+@import 'lightning/sldsCommon'; */
+/* @import './vertical-navigation-section.slds.css'; */
 
 div[role="list"] {
     list-style: none;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.js

@@ -1,8 +1,7 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { guid, isHeadingLevelValid } from 'lightning/utilsPrivate';
 
-export default class LightningVerticalNavigationSection extends LightningShadowBaseClass {
+export default class LightningVerticalNavigationSection extends LightningElement {
     headingId = guid();
 
     @track _label;

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.css

@@ -1,6 +0,0 @@
-      .slds-box {
-        padding: 1rem;
-        margin: 0;
-        border-radius: .25rem;
-        border: 1px solid lightgrey;
-      }

package/src/lightning/inputUtils/utils.js

@@ -1,18 +0,0 @@
-export function isEmptyString(s) {
-    return (
-        s === undefined ||
-        s === null ||
-        (typeof s === 'string' && s.trim() === '')
-    );
-}
-
-export function isEmptyObject(obj) {
-    if (obj === undefined || obj === null || typeof obj !== 'object') {
-        return false;
-    }
-    // eslint-disable-next-line guard-for-in
-    for (const name in obj) {
-        return false;
-    }
-    return true;
-}

package/src/lightning/primitiveInputCheckbox/form-element.slds.css

@@ -1,281 +0,0 @@
-
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-  @supports (--styling-hooks: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
-      border: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    /* FORM ELEMENT: BASE */
-    :host([data-render-mode="shadow"]) .slds-form-element {
-        position: relative;
-        min-width: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        hyphens: auto;
-        display: inline-block;
-        color: var(--sds-g-color-neutral-base-30, #444444);
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
-        margin: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
-        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
-        display: inline-block;
-        position: relative;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        vertical-align: top;
-        line-height: var(--sds-g-font-lineheight-1, 1);
-        z-index: 1;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper {
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        display: block;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
-        flex-basis: 0%;
-        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
-        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__legend {
-        font-weight: var(--sds-g-font-weight-7, 700);
-        float: left;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__addon {
-        display: inline-block;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
-        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        align-self: center;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-word;
-        display: inline-block;
-        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-        font-weight: var(--sds-g-font-weight-4, 400);
-        color: var(--sds-g-color-neutral-base-10, #181818);
-        width: 100%;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
-        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
-        vertical-align: bottom;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-required {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: STACKED */
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
-        display: block;
-    }
-
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
-
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1);
-    } */
-
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    } */
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
-        padding: 0;
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
-        padding-inline-start: 0;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
-        width: 100%;
-        flex-basis: 100%;
-        clear: left;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
-        float: none;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: INLINE */
-
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
-        display: block;
-    }
-
-    /*
-    we have to combine with slds class here to avoid duplication
-    of this rule in child elements who import this stylesheet
-    in lighting-input this slds class is synonymous with the variant
-    */
-
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
-        padding: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
-
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
-        width: 100%;
-        flex-basis: 100%;
-    }
-
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
-        padding: var(--sds-g-spacing-1);
-    } */
-
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
-        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
-    }
-
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
-          float: left;
-          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
-          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
-          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
-          margin-block-end: 0;
-          position: relative;
-          z-index: 1;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
-          float: left;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
-          margin-inline-start: 33%;
-          clear: none; /* Reset clear: left when switching to horizontal form layout */
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
-          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
-            width: auto;
-            max-width: 100%;
-            -ms-flex-preferred-size: auto;
-            flex-basis: auto;
-            float: none;
-            position: relative;
-            padding-inline-start: 0;
-            margin-block-end: 0;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
-          margin-inline-start: 33%;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
-            clear: none;
-        }
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: COMPOUND */
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
-      display: flex;
-      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
-      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
-      padding-top: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
-      padding-left: var(--sds-g-spacing-1, 0.25rem);
-      padding-right: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
-      align-items: flex-end;
-    }
-}

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.css

@@ -1,3 +0,0 @@
-@import 'lightning/sldsCommon';
-@import './input-checkbox.slds.css';
-@import './form-element.slds.css';

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.html

@@ -1,48 +0,0 @@
-<template>
-    <template if:false={isStandardVariant}>
-        <label for="checkbox" part="label-container" class="slds-checkbox__label">
-            <template if:true={required}>
-                <abbr class="slds-required" title={labelRequired}>*</abbr>
-            </template>
-            <span class={computedLabelClass}>{label}</span>
-        </label>
-        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
-    </template>
-    <div class="slds-form-element__control slds-grow">
-        <span part="input-checkbox" class={computedCheckboxClass}>
-            <template if:true={isStandardVariant}>
-                <template if:true={required}>
-                    <abbr class="slds-required" title={labelRequired}>*</abbr>
-                </template>
-            </template>
-            <input
-                type="checkbox"
-                part="checkbox"
-                id="checkbox"
-                aria-label={ariaLabel}
-                aria-invalid={ariaInvalid}
-                accesskey={accessKey}
-                onblur={handleBlur}
-                onfocus={handleFocus}
-                onchange={handleChange}
-                onclick={handleClick}
-                name={name}
-                required={required}
-                readonly={readOnly}
-                disabled={disabled}>
-            <template if:false={isStandardVariant}>
-                <span part="indicator" class="slds-checkbox_faux"></span>
-            </template>
-            <template if:true={isStandardVariant}>
-                <label for="checkbox" part="label-container" class="slds-checkbox__label">
-                    <span part="indicator" class="slds-checkbox_faux"></span>
-                    <span part="label" class={computedLabelClass}>{label}</span>
-                </label>
-                <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
-            </template>
-        </span>
-    </div>
-    <template if:true={helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{helpMessage}</div>
-    </template>
-</template>