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

package/src/lightning/primitiveInputCheckboxButton/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/primitiveInputCheckboxButton/input-checkbox-button.slds.css

@@ -1,126 +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: '') {
-  /* Default State */
-  :host([data-render-mode="shadow"]) [part~="faux-button"] {
-    width: var(--sds-g-sizing-9, 2rem);
-    height: var(--sds-g-sizing-9, 2rem);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--sds-g-radius-border-2, 0.25rem);
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-inputcheckboxbutton-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    background-color: var(--slds-c-inputcheckboxbutton-color-background, var(--sds-g-color-brand-base-100, #ffffff));
-    cursor: pointer;
-    position: relative;
-  }
-
-  :host([data-render-mode="shadow"]) [part~="faux-button"]::before,:host([data-render-mode="shadow"]) 
-  [part~="faux-button"]::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: calc(var(--sds-g-sizing-9, 2rem) * 0.875 / 2);
-    width: calc(var(--sds-g-sizing-9, 2rem) * 0.125 / 2);
-    margin: auto;
-    background-color: var(--slds-c-inputcheckboxbutton-mark-color-foreground, var(--sds-g-color-brand-base-50, #0176d3));
-  }
-
-  :host([data-render-mode="shadow"]) [part~="faux-button"]::after {
-    height: calc(var(--sds-g-sizing-9, 2rem) * 0.125 / 2);
-    width: calc(var(--sds-g-sizing-9, 2rem) * 0.875 / 2);
-  }
-
-  :host([data-render-mode="shadow"]:focus-within) [part~="faux-button"] {
-    box-shadow: 0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
-    --slds-c-inputcheckboxbutton-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
-    --slds-c-inputcheckboxbutton-color-border-checked: var(--sds-g-color-brand-base-60, #1b96ff);
-  }
-
-  :host([data-render-mode="shadow"]) [part~="faux-button"]:hover {
-    --slds-c-inputcheckboxbutton-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-inputcheckboxbutton-color-background-checked: var(--sds-g-color-brand-base-30, #014486);
-  }
-
-  :host([data-render-mode="shadow"][disabled]) [part~="faux-button"] {
-    cursor: default;
-    --slds-c-inputcheckboxbutton-color-border: transparent;
-    --slds-c-inputcheckboxbutton-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-inputcheckboxbutton-mark-color-foreground: var(--sds-g-color-neutral-base-60, #939393);
-    --slds-c-inputcheckboxbutton-color-border-checked: transparent;
-    --slds-c-inputcheckboxbutton-color-background-checked: var(--sds-g-color-neutral-base-100, #ffffff);
-    --slds-c-inputcheckboxbutton-mark-color-foreground-checked: var(--sds-g-color-neutral-base-60, #939393);
-
-  }
-
-  /* Checked State */
-  :host([data-render-mode="shadow"][checked]) [part~="faux-button"] {
-    --slds-c-inputcheckboxbutton-color-border: var(--slds-c-inputcheckboxbutton-color-border-checked, transparent);
-    --slds-c-inputcheckboxbutton-color-background: var(--slds-c-inputcheckboxbutton-color-background-checked, var(--sds-g-color-brand-base-30, #014486));
-    --slds-c-inputcheckboxbutton-mark-color-foreground: var(--slds-c-inputcheckboxbutton-mark-color-foreground-checked, var(--sds-g-color-neutral-base-100, #ffffff));
-
-  }
-
-  :host([data-render-mode="shadow"][checked]) [part~="faux-button"]::before {
-    left: calc(var(--sds-g-sizing-9, 2rem) * 0.3125 / 2);
-    width: calc(var(--sds-g-sizing-9, 2rem) * 0.125 / 2);
-    height: calc(var(--sds-g-sizing-9, 2rem) / 2);
-    -webkit-transform: rotate(40deg);
-    transform: rotate(40deg);
-  }
-
-  :host([data-render-mode="shadow"][checked]) [part~="faux-button"]::after {
-    top: calc(var(--sds-g-sizing-9, 2rem) * 0.3125 / 2);
-    left: calc(var(--sds-g-sizing-9, 2rem) * -0.625 / 2);
-    width: calc(var(--sds-g-sizing-9, 2rem) * 0.5625 / 2);
-    height: calc(var(--sds-g-sizing-9, 2rem) * 0.125 / 2);
-    -webkit-transform: rotate(40deg);
-    transform: rotate(40deg);
-  }
-
-  /**
-   * Help Text
-   *
-   * Note: not to be confused with lightning-helptext. This is for the text
-   *       that goes below the input.
-   */
-  :host([data-render-mode="shadow"]) [part~='help-text'] {
-    font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    padding-block-start: 0.125rem;
-  }
-
-  /**
-   * Help Text's Invalid State – Part container is unique to SLDS
-   */
-  :host([data-render-mode="shadow"][invalid]) [part~='help-text'] {
-    color: var(--sds-g-color-error-base-50, #ea001e);
-  }
-}
-
-/**
-   * A temporarily baked-in utility class until SLDS gets a proper utility package.
-   *
-   * This is a hybrid patch between synthetic and native shadow. The ideal final
-   * outcome is the removal of this class and replacing the class with the SLDS
-   * utility package solution.
-   */
-
-:host([data-render-mode="shadow"]) .slds-assistive-text {
-  position: absolute !important;
-  margin: -1px !important;
-  border: 0 !important;
-  padding: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  clip: rect(0 0 0 0) !important;
-  text-transform: none !important;
-  white-space: nowrap !important;
-}

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.css

@@ -1,6 +0,0 @@
-@import 'lightning/sldsCommon';
-@import './input-checkbox-button.slds.css';
-
-.slds-checkbox_add-button {
-    display: flex;
-}

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.html

@@ -1,24 +0,0 @@
-<template>
-    <div class="slds-checkbox_add-button" part="input-checkbox-button">
-        <input type="checkbox" id="checkbox-button"
-            aria-label={ariaLabel}
-            aria-invalid={ariaInvalid}
-            accesskey={accessKey}
-            class="slds-assistive-text"
-            onblur={handleBlur}
-            onfocus={handleFocus}
-            onchange={handleChange}
-            onclick={handleClick}
-            name={name}
-            required={required}
-            readonly={readOnly}
-            disabled={disabled}
-            part="checkbox">
-        <label for="checkbox-button" class="slds-checkbox_faux" part="faux-button">
-            <span class="slds-assistive-text" part="label">{label}</span>
-        </label>
-    </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/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js

@@ -1,176 +0,0 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import {
-    reflectAttribute,
-    normalizeBoolean,
-    isNativeComponent,
-} from 'lightning/utilsPrivate';
-export default class LightningPrimitiveInputColor extends LightningShadowBaseClass {
-    @api ariaLabel;
-    @api ariaInvalid;
-    @api accessKey;
-    @api name;
-    @api required;
-    @api readOnly;
-    @api label;
-
-    _checked = false;
-    _disabled = false;
-    _helpMessage = '';
-
-    rendered = false;
-    initialValueSet = false;
-
-    /**
-     * If present, the checkbox is selected.
-     * @type {boolean}
-     * @default false
-     */
-    @api
-    get checked() {
-        // checkable inputs can be part of a named group, in that case there won't be a change event thrown and so
-        // the internal tracking _checked would be out of sync with the actual input value.
-        if (this.initialValueSet) {
-            return this.inputElement.checked;
-        }
-        return this._checked;
-    }
-
-    set checked(value) {
-        this._checked = normalizeBoolean(value);
-
-        if (this.rendered) {
-            this.inputElement.checked = this._checked;
-        }
-        reflectAttribute(this, 'checked', this.checked);
-    }
-
-    /**
-     * If present, the input field is disabled and users cannot interact with it.
-     * @type {boolean}
-     * @default false
-     */
-    @api
-    get disabled() {
-        return this._disabled;
-    }
-
-    set disabled(value) {
-        this._disabled = normalizeBoolean(value);
-        reflectAttribute(this, 'disabled', this.disabled);
-    }
-
-    @api
-    get helpMessage() {
-        return this._helpMessage;
-    }
-
-    set helpMessage(message) {
-        this._helpMessage = message;
-        reflectAttribute(this, 'invalid', !!message);
-    }
-
-    @api
-    get inputElement() {
-        if (!this.cachedInputElement) {
-            let inputElement = this.template.querySelector('input');
-            this.cachedInputElement = inputElement;
-        }
-        return this.cachedInputElement;
-    }
-
-    @api
-    get ariaDescribedByElements() {
-        return this.template.querySelector('[data-help-message]');
-    }
-
-    @api
-    get isNativeShadow() {
-        return this._isNativeShadow;
-    }
-
-    /********* COMPONENT CALLBACKS *********/
-
-    connectedCallback() {
-        super.connectedCallback();
-        this._isNativeShadow = isNativeComponent(this);
-    }
-
-    disconnectedCallback() {
-        this.cachedInputElement = undefined;
-        this.initialValueSet = false;
-        this.rendered = false;
-    }
-
-    renderedCallback() {
-        this.rendered = true;
-        if (!this.initialValueSet) {
-            this.inputElement.checked = this._checked;
-            this.initialValueSet = true;
-        }
-    }
-
-    /********* ACTION HANDLERS *********/
-
-    handleBlur() {
-        this.dispatchEvent(new CustomEvent('blur'));
-    }
-
-    handleFocus() {
-        this.dispatchEvent(new CustomEvent('focus'));
-    }
-
-    handleChange(event) {
-        event.stopPropagation();
-        this.dispatchCommitEvent();
-        this.dispatchChangeEvent();
-    }
-
-    handleClick() {
-        if (this.template.activeElement === null) {
-            this.template.querySelector("[type='checkbox']").focus();
-        }
-    }
-
-    /********* EVENT DISPATCHERS *********/
-
-    dispatchChangeEventWithDetail(detail) {
-        this.dispatchEvent(
-            new CustomEvent('change', {
-                composed: true,
-                detail,
-            })
-        );
-    }
-
-    dispatchChangeEvent() {
-        const detail = {};
-        this._checked = this.inputElement.checked;
-        reflectAttribute(this, 'checked', this._checked);
-        detail.checked = this._checked;
-        this.dispatchChangeEventWithDetail(detail);
-    }
-
-    dispatchCommitEvent() {
-        this.dispatchEvent(new CustomEvent('commit'));
-    }
-
-    /********* VALUE UPDATERS *********/
-
-    setInputValue(value) {
-        this.inputElement.value = value;
-    }
-
-    /********* HELPER METHODS *********/
-
-    /**
-     * TODO: lightning/inputUtils methods should be utilized in the second run of the input
-     *       breakdown initiative.
-     */
-    normalizeInput(value) {
-        if (typeof value === 'number' || typeof value === 'string') {
-            return String(value);
-        }
-        return '';
-    }
-}