lightning-base-components 1.18.5-alpha → 1.18.7-alpha

package/src/lightning/primitiveInputFile/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/primitiveInputFile/input-file.slds.css

@@ -1,62 +0,0 @@
-
-@supports (--styling-hooks: '') {
-
-  :host([data-render-mode="shadow"]) [part~="file-selector"] {
-    display: inline-flex;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-file-selector__dropzone {
-    padding: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    border: var(--sds-g-sizing-border-1, 1px) dashed var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--sds-g-radius-border-2, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-drag-over {
-    outline: 0;
-    border-color: var(--slds-g-color-brand-base-60, var(--sds-g-color-brand-base-50, #0176d3));
-    box-shadow: 0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
-    border-style: solid;
-  }
-
-  :host([data-render-mode="shadow"]) [part~='input']:focus ~ .slds-file-selector__body > .slds-file-selector__button {
-    box-shadow: 0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
-
-  }
-
-  :host([data-render-mode="shadow"]) [part~='input'][disabled] ~ .slds-file-selector__body {
-    color: var(--slds-g-color-neutral-base-10, var(--sds-g-color-palette-neutral-80, #c9c9c9));
-  }
-
-  :host([data-render-mode="shadow"]) [part~='input'][disabled] ~ .slds-file-selector__body > .slds-file-selector__button {
-    background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
-    border-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-100, #ffffff));
-    color: var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-100, #ffffff));
-  }
-
-  :host([data-render-mode="shadow"]) [part~='input'][disabled] ~ .slds-file-selector__body > .slds-file-selector__body-icon {
-    fill: currentColor;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-file-selector_files .slds-file-selector__body  {
-    display: flex;
-    align-items: center;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-file-selector_files .slds-file-selector__text {
-    margin-left: var(--sds-g-spacing-2, 0.5rem);
-    margin-right: var(--sds-g-spacing-3, 0.75rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-file-selector__button {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  /* TODO: Replace this with utility classes when available */
-  @media (max-width: 768px) {
-    :host([data-render-mode="shadow"]) .slds-medium-show {
-      display: none;
-    }
-  }
-}
-

package/src/lightning/primitiveInputFile/primitiveInputFile.css

@@ -1,5 +0,0 @@
-@import 'lightning/sldsCommon';
-@import './input-file.slds.css';
-@import './button.slds.css';
-@import './form-element.slds.css';
-

package/src/lightning/primitiveInputFile/primitiveInputFile.html

@@ -1,45 +0,0 @@
-<template>
-    <span id="form-label" class={labelClass} data-form-label>
-        <template if:true={required}>
-            <abbr class="slds-required" title={i18n.required}>*</abbr>
-        </template>
-        {label}
-    </span>
-    <div class="slds-form-element__control">
-        <div class="slds-file-selector slds-file-selector_files" ondrop={handleDropFiles} part="file-selector">
-            <lightning-primitive-file-droppable-zone multiple={multiple} disabled={disabled}>
-                <input type="file" id="input-file"
-                    aria-label={ariaLabel}
-                    aria-invalid={ariaInvalid}
-                    accesskey={accessKey}
-                    class="slds-file-selector__input slds-assistive-text"
-                    onblur={handleBlur}
-                    onfocus={handleFocus}
-                    onchange={handleChange}
-                    accept={accept}
-                    multiple={multiple}
-                    name={name}
-                    required={required}
-                    readonly={readOnly}
-                    disabled={disabled}
-                    part="input">
-                <label id="file-selector-label" data-file-selector-label for="input-file" aria-hidden="true"
-                    class="slds-file-selector__body">
-                    <!-- chose to use this span over a lightning-button to match the SLDS blueprint. this uses the part=button to
-                    get the styles from lightning-button to this span -->
-                    <span class="slds-file-selector__button slds-button slds-button_neutral" part="button">
-                        <lightning-primitive-icon icon-name="utility:upload" variant="bare" svg-class="slds-button__icon slds-button__icon_left">
-                        </lightning-primitive-icon>
-                        {i18n.inputFileButtonLabel}
-                    </span>
-                    <span class="slds-file-selector__text slds-medium-show">
-                        {i18n.inputFileBodyText}
-                    </span>
-                </label>
-            </lightning-primitive-file-droppable-zone>
-        </div>
-    </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>

package/src/lightning/primitiveInputFile/primitiveInputFile.js

@@ -1,111 +0,0 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { isNativeComponent, reflectAttribute } from 'lightning/utilsPrivate';
-import labelRequired from '@salesforce/label/LightningControl.required';
-import labelInputFileBodyText from '@salesforce/label/LightningInputFile.bodyText';
-import labelInputFileButtonLabel from '@salesforce/label/LightningInputFile.buttonLabel';
-
-const i18n = {
-    required: labelRequired,
-    inputFileBodyText: labelInputFileBodyText,
-    inputFileButtonLabel: labelInputFileButtonLabel,
-};
-
-export default class LightningPrimitiveInputFile extends LightningShadowBaseClass {
-    _files = null;
-    _helpMessage = '';
-
-    /************************* PUBLIC PROPERTIES *************************/
-
-    @api accept;
-    @api accessKey;
-    @api ariaInvalid;
-    @api disabled;
-    @api label;
-    @api labelClass;
-    @api multiple;
-    @api name;
-    @api readOnly;
-    @api required;
-    @api ariaLabel;
-
-    @api
-    get files() {
-        return this._files;
-    }
-
-    @api
-    get inputElement() {
-        return this.template.querySelector('input');
-    }
-
-    @api
-    get ariaDescribedByElements() {
-        return this.template.querySelector('[data-help-message]');
-    }
-
-    @api
-    get ariaLabelledByElements() {
-        return [
-            this.template.querySelector('[data-form-label]'),
-            this.template.querySelector('[data-file-selector-label]'),
-        ];
-    }
-
-    @api
-    get isNativeShadow() {
-        return this._isNativeShadow;
-    }
-
-    @api
-    get helpMessage() {
-        return this._helpMessage;
-    }
-    set helpMessage(message) {
-        this._helpMessage = message;
-        reflectAttribute(this, 'invalid', !!message);
-    }
-
-    /************************* PRIVATE GETTERS *************************/
-
-    get i18n() {
-        return i18n;
-    }
-
-    /************************** EVENT HANDLERS **************************/
-
-    handleDropFiles(event) {
-        this._files = event.dataTransfer && event.dataTransfer.files;
-        this.dispatchEvent(new CustomEvent('change'));
-        // drop doesn't trigger focus/blur, so use event
-        // to call reportValidity instead of interacting state
-        this.dispatchEvent(new CustomEvent('reportvalidity'));
-    }
-
-    handleBlur() {
-        this.dispatchEvent(new CustomEvent('blur'));
-    }
-
-    handleFocus() {
-        this.dispatchEvent(new CustomEvent('focus'));
-    }
-
-    handleChange() {
-        this._files = this.inputElement.files;
-        this.dispatchEvent(new CustomEvent('change'));
-    }
-
-    /************************** LIFECYCLE HOOKS **************************/
-
-    connectedCallback() {
-        super.connectedCallback();
-        this._isNativeShadow = isNativeComponent(this);
-        this.dispatchEvent(
-            new CustomEvent('privateprimitiveconnected', {
-                detail: {
-                    isNativeShadow: this.isNativeShadow,
-                },
-            })
-        );
-    }
-}

package/src/lightning/primitiveInputRadio/primitiveInputRadio.html

@@ -1,24 +0,0 @@
-<template>
-    <div class="slds-form-element__control">
-        <span class="slds-radio">
-            <input type="radio" id="radio"
-                aria-invalid={ariaInvalid}
-                accesskey={accessKey}
-                onblur={handleBlur}
-                onfocus={handleFocus}
-                onchange={handleChange}
-                name={name}
-                required={required}
-                readonly={readOnly}
-                disabled={disabled}
-                aria-label={ariaLabel}>
-            <label for="radio" class="slds-radio__label">
-                <span class="slds-radio_faux"></span>
-                <span class={computedLabelClass}>{label}</span>
-            </label>
-        </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>

package/src/lightning/primitiveInputRadio/primitiveInputRadio.js

@@ -1,103 +0,0 @@
-import { LightningElement, api } from 'lwc';
-import { classSet } from 'lightning/utils';
-import { VARIANT } from 'lightning/inputUtils';
-import { isNativeComponent } from 'lightning/utilsPrivate';
-
-export default class LightningPrimitiveInputRadio extends LightningElement {
-    @api variant;
-    @api ariaInvalid;
-    @api accessKey;
-    @api name;
-    @api required;
-    @api readOnly;
-    @api disabled;
-    @api label;
-    @api ariaLabel;
-    @api helpMessage;
-
-    @api
-    get checked() {
-        return this._checked;
-    }
-
-    /**
-     * Sets the checked state of the input and reflects the attribute if required.
-     */
-    set checked(value) {
-        this._setChecked(value);
-    }
-
-    @api
-    get ariaDescribedByElements() {
-        return this.template.querySelector('[data-help-message]');
-    }
-
-    @api
-    get isNativeShadow() {
-        return this._isNativeShadow;
-    }
-
-    @api
-    get inputElement() {
-        if (!this._cachedInputElement) {
-            let inputElement = this.template.querySelector('input');
-            this._cachedInputElement = inputElement;
-        }
-        return this._cachedInputElement;
-    }
-
-    get isLabelHidden() {
-        return this.variant === VARIANT.LABEL_HIDDEN;
-    }
-
-    get computedLabelClass() {
-        return classSet('slds-form-element__label')
-            .add({ 'slds-assistive-text': this.isLabelHidden })
-            .toString();
-    }
-
-    _setChecked(value) {
-        value = Boolean(value);
-        this._checked = value;
-        if (this.rendered && this.inputElement.checked !== this._checked) {
-            this.inputElement.checked = this._checked;
-        }
-    }
-
-    handleBlur() {
-        this.dispatchEvent(new CustomEvent('blur'));
-    }
-
-    handleFocus() {
-        this.dispatchEvent(new CustomEvent('focus'));
-    }
-
-    handleChange(event) {
-        this._setChecked(event.target.checked);
-
-        const changeEvent = new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                checked: event.target.checked,
-            },
-        });
-        this.dispatchEvent(changeEvent);
-    }
-
-    connectedCallback() {
-        this._isNativeShadow = isNativeComponent(this);
-    }
-
-    renderedCallback() {
-        if (!this.rendered) {
-            this.inputElement.checked = this.checked;
-        }
-        this.rendered = true;
-    }
-
-    disconnectedCallback() {
-        this._cachedInputElement = undefined;
-        this.rendered = false;
-    }
-}