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

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 '';
-    }
-}

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

@@ -1,35 +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: '') {
-  :host([data-render-mode="shadow"]) [part~='color-picker'] {
-    position: relative;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__summary-label {
-    display: block;
-  }
-
-  :host([data-render-mode="shadow"]) [part~='input-text'] > *:first-child {
-    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) [part~='input-container'] {
-    flex: 0 0 var(--slds-c-inputcolor-input-sizing-width, 6rem);
-    margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
-  }
-
-  /**
-   * Label Inline Variant
-   */
-   @media (min-width: 48em) {
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
-      display: flex;
-    }
-    
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
-      margin-inline-start: 0%
-    }
-  }
-}

package/src/lightning/primitiveInputColor/primitiveInputColor.css

@@ -1,4 +0,0 @@
-@import 'lightning/sldsCommon';
-@import './form-element.slds.css';
-@import './input-text.slds.css';
-@import './input-color.slds.css';

package/src/lightning/primitiveInputColor/primitiveInputColor.html

@@ -1,50 +0,0 @@
-<template>
-    <div class="slds-color-picker" part="color-picker">
-        <div class="slds-form-element slds-color-picker__summary">
-            <template if:false={hasExternalLabel}>
-                <label class={computedColorLabelClass} for="color">
-                    <template if:true={required}>
-                        <abbr class="slds-required" title={required}>*</abbr>
-                    </template>
-                    {label}
-                </label>
-                <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
-            </template>
-            <div class="slds-form-element__control" part="input-text">
-                <lightning-primitive-colorpicker-button
-                    value={value}
-                    disabled={disabled}
-                    onblur={handleBlur}
-                    onfocus={handleFocus}
-                    onchange={handleColorChange}>
-                </lightning-primitive-colorpicker-button>
-                <!--
-                    Using <lightning-input type="text"> here would duplicate the label
-                    and change the input id/class, but we want to use the input-text and
-                    input-container parts since most of the CSS still applies here
-                -->
-                <div class="slds-color-picker__summary-input" part="input-container">
-                    <input type="text" id="color" class="slds-input slds-m-right_x-small"
-                        part="input"
-                        name={name}
-                        autocomplete={autocomplete}
-                        accesskey={accessKey}
-                        aria-label={ariaLabel}
-                        aria-invalid={ariaInvalid}
-                        disabled={disabled}
-                        minlength="4"
-                        maxlength="7"
-                        placeholder={placeholder}
-                        pattern={pattern}
-                        onblur={handleBlur}
-                        onfocus={handleFocus}
-                        onchange={handleChange}
-                        oninput={handleInput}>
-                </div>
-            </div>
-        </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>