lightning-base-components 1.18.3-alpha → 1.18.4-alpha

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

@@ -0,0 +1,281 @@
+
+/* 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

@@ -0,0 +1,62 @@
+
+@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

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

package/src/lightning/primitiveInputFile/primitiveInputFile.html

@@ -0,0 +1,45 @@
+<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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,103 @@
+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;
+    }
+}