lightning-base-components 1.18.2-alpha → 1.18.3-alpha

package/src/lightning/input/input-text.slds.css

@@ -1,398 +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 */
-
-/* The Input Control Container holds the `start` and `end` slot contents, as well as the input control itself */
-
-:host([data-render-mode="shadow"]) [part~='input-container'] {
-  display: flex;
-  align-items: center;
-  position: relative;
-  min-height: var(--sds-c-inputtext-sizing-height);
-  padding-inline-end: var(--sds-c-inputtext-spacing-inline-end, var(--sds-c-inputtext-spacing-inline));
-  padding-inline-start: var(--sds-c-inputtext-spacing-inline-start, var(--sds-c-inputtext-spacing-inline));
-  background-color: var(--sds-c-inputtext-color-background, var(--sds-g-color-neutral-base-1));
-  border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
-  border-style: solid;
-  border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
-  border-radius: var(--sds-c-inputtext-radius-border);
-  box-shadow: var(--sds-c-inputtext-shadow);
-}
-
-/* The Input element (in markup) */
-
-:host([data-render-mode="shadow"]) [part~='input'] {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  font-size: var(--sds-c-inputtext-font-size);
-  color: var(--sds-c-inputtext-text-color);
-  line-height: 1;
-  border: none;
-  background: transparent;
-}
-
-/* Placeholder Text */
-
-:host([data-render-mode="shadow"]) [part~='input']::placeholder {
-  color: var(--sds-c-inputtext-text-color-placeholder);
-  font-style: var(--sds-c-inputtext-font-style-placeholder);
-}
-
-/* Focus State */
-
-:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
-  --sds-c-inputtext-color-border: var(
-    --sds-c-inputtext-color-border-focus,
-    var(--sds-g-color-palette-blue-50, #0176d3)
-  );
-  --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3));
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-focus);
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-focus);
-}
-
-:host([data-render-mode="shadow"]) [part~='input']:focus {
-  outline: none;
-}
-
-/* Invalid state */
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-invalid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-invalid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-invalid);
-}
-
-/* Valid State */
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-valid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-valid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-valid);
-}
-
-/* Readonly State */
-
-:host([data-render-mode="shadow"][readonly]) [part~='input-container'] {
-  --sds-c-inputtext-sizing-border: var(--sds-c-inputtext-sizing-border-readonly);
-  --sds-c-inputtext-spacing-inline-start: var(
-    --sds-c-inputtext-spacing-inline-start-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-  --sds-c-inputtext-spacing-inline-end: var(
-    --sds-c-inputtext-spacing-inline-end-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-}
-
-/* Disabled State */
-
-:host([data-render-mode="shadow"][disabled]) [part~='input-container'] {
-  --sds-c-inputtext-text-color: #3e3e3c; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-background: #ecebea; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-border: #c9c7c5; /* TODO: Replace with Global Styling Hook Fallback */
-}
-
-@supports (--styling-hooks: '') {
-   /**
-   * Input Text
-   */
-    :host([data-render-mode="shadow"]) [part~='input-text'] {
-        /* Host reassignments to composed slds-icon */
-        --slds-c-icon-color-foreground: var(
-            --slds-c-inputtext-icon-color-foreground,
-            var(--sds-g-color-neutral-base-50, #747474)
-        );
-        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
-        --sds-c-inputtext-sizing-height: var(
-            --slds-c-inputtext-sizing-height,
-            var(--sds-g-sizing-9, 2rem)
-        );
-        --sds-c-inputtext-color-background: var(
-            --slds-c-inputtext-color-background,
-            var(--sds-g-color-neutral-base-100, #ffffff)
-        );
-        --sds-c-inputtext-color-background-focus: var(
-            --slds-c-inputtext-color-background-focus,
-            var(--sds-g-color-neutral-base-100, #ffffff)
-        );
-        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
-        --sds-c-inputtext-font-size: var(
-            --slds-c-inputtext-font-size,
-            var(--sds-g-font-scale-neg-2, 0.8125rem)
-        );
-        --sds-c-inputtext-text-color-placeholder: var(
-            --slds-c-inputtext-text-color-placeholder,
-            var(--sds-g-color-neutral-base-50, #747474)
-        );
-        --sds-c-inputtext-color-border: var(
-            --slds-c-inputtext-color-border,
-            var(--sds-g-color-neutral-base-80, #c9c9c9)
-        );
-        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
-        --sds-c-inputtext-radius-border: var(
-            --slds-c-inputtext-radius-border,
-            var(--sds-g-radius-border-2, 0.25rem)
-        );
-
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-    }
-
-   /**
-   * Input Container
-   */
-    :host([data-render-mode="shadow"]) [part~='input-container'] {
-        flex: 1 0 100%;
-        align-items: stretch;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
-        border: none;
-        display: inline-block;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
-        min-height: calc(1.875rem + (1px * 2));
-        margin: 0;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part~='input-container'][type~='range']:active {
-        --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
-        --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
-        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-
-        outline: 0;
-        border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
-        border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
-    }
-
-   /**
-   * Input
-   */
-    :host([data-render-mode="shadow"]) [part~='input'] {
-        padding-inline-start: var(
-            --slds-c-inputtext-spacing-inline-start,
-            var(--sds-g-spacing-3, 0.75rem));
-        padding-inline-end: var(
-            --slds-c-inputtext-spacing-inline-end,
-            var(--sds-g-spacing-4, 1rem));
-        height: unset;
-        font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
-    }
-
-   /**
-   * Focus / active State
-   */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
-      --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
-      --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
-      --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-
-      outline: 0;
-    }
-
-   /**
-   * Read Only State
-   */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
-        --sds-c-inputtext-spacing-inline-start-readonly: 0;
-        --sds-c-inputtext-color-border-focus: transparent;
-        --slds-c-inputtext-color-border: transparent;
-        --slds-c-inputtext-color-background: transparent;
-        --slds-c-inputtext-color-background-focus: transparent;
-    }
-
-    /**
-   * Invalid State
-   *
-   * Does not use --sds-c-inputtext-color-border-invalid due to this hook being
-   * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
-   * uses :host([invalid]).
-   */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
-        --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
-            var(--sds-g-color-error-base-50, #ea001e);
-        --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
-        --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /**
-   * Invalid State - Focus
-   *
-   * The following styling hooks are included in SDS and need to be reassigned
-   * here to prevent a bug with the focus state border and box-shadow
-   */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
-      --sds-c-inputtext-shadow:
-        var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
-        0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
-      --sds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /**
-   * Disabled State
-   *
-   * Both parts form the visible form control.
-   */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
-        cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
-        --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
-        --sds-c-inputtext-text-color: var(--sds-g-color-neutral-base-50, #747474);
-    }
-
-    /**
-   * Label
-   *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
-   */
-    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        color: var(
-            --slds-c-inputtext-label-color,
-            var(--sds-g-color-neutral-base-30, #444444)
-        );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--sds-g-font-scale-neg-3, 0.75rem)
-        );
-        margin-block-end: var(--sds-g-sizing-1, 0.125rem);
-
-        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-        display: inline-flex;
-    }
-
-    /**
-   * Start
-   *
-   * Only expects an SLDS icon. We assign the SLDS Icon Styling Hook here
-   * so we don't add spacing to other icons composed in the component, e.g.,
-   * the icon in the inline help text.
-   */
-    :host([data-render-mode="shadow"]) [part~='start'] {
-        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-
-    /**
-   * Label Inline Variant
-   *
-   * Note: all the 33% values you see are remnants of legacy SLDS. We need to
-   * keep this implementation intact so visual output is the same when used
-   * in a form that has non-shadow components. Attempting to refactor to a
-   * modern solution like flex is proving tricky due to the presence of the
-   * optional inline-help and the input needing to have exactly 33% of spacing
-   * from the inline-start.
-   *
-   * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
-   */
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
-            display: block;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
-            float: left;
-
-            /* TODO: Get rid of these magic numbers */
-            max-width: calc(33% - 1.125rem);
-            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
-            margin-inline-start: 33%;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
-            float: left;
-            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        }
-    }
-
-    :host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
-        left: var(--sds-g-spacing-3, 0.75rem);
-        fill: var(--slds-g-color-neutral-base-50, #747474);
-    }
-    
-    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
-        background-color: transparent;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--sds-g-color-brand-base-30, #014486);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
-        width: 0.875rem;
-        height: 0.875rem;
-        position: absolute;
-        top: 50%;
-        margin-top: -0.4375rem;
-        line-height: 1;
-        border: 0;
-        z-index: 2;
-    }
-
-    /**
-   * Has Icon Left
-   */
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_left {
-        inset-inline-start: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    /**
-   * Has Icon Right
-   */
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_right {
-        inset-inline-end: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    /**
-   * Has Icon Left & Right
-   */
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
-    }
-   
-  /**
- * 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/input/normalize.js

@@ -1,6 +0,0 @@
-export function normalizeInput(value) {
-    if (typeof value === 'number' || typeof value === 'string') {
-        return String(value);
-    }
-    return '';
-}

package/src/lightning/input/selection.js

@@ -1,131 +0,0 @@
-import { isSafari, isIE11, timeout } from 'lightning/utilsPrivate';
-
-/**
- * Purges the selection cache to the DOM.
- * @param input {HTMLInputElement}
- * @param cache {InputSelectionCache}
- */
-function restoreCacheToInput(input, cache) {
-    input.setSelectionRange(
-        cache._selectionStartCached,
-        cache._selectionEndCached
-    );
-
-    cache.clearCache();
-}
-
-/**
- * This class provides a way to cache text selection in input fields.
- */
-export class InputSelectionCache {
-    /**
-     * Cached value for selectionStart
-     * @type {number|null}
-     */
-    _selectionStartCached = null;
-
-    /**
-     * Cached value for selectionEnd
-     * @type {number|null}
-     */
-    _selectionEndCached = null;
-
-    /**
-     * Updates the cached values.
-     * @param {number} start The start of the selected range
-     * @param {number} end The end of the selected range
-     * @private
-     */
-    _cacheSelectionRange(start, end) {
-        if (typeof start === 'number' && typeof end === 'number') {
-            this._selectionStartCached = start;
-            this._selectionEndCached = end;
-        }
-    }
-
-    /**
-     * Clears our cached selection.
-     */
-    clearCache() {
-        this._selectionStartCached = null;
-        this._selectionEndCached = null;
-    }
-
-    /**
-     * True, if the DOM element has selection.
-     * @param input {HTMLInputElement} The DOM element to operate on
-     */
-    hasSelection(input) {
-        return (
-            input.selectionStart !== null &&
-            // If the start and end are the same, that's not selection, it's just the cursor position.
-            input.selectionStart !== input.selectionEnd
-        );
-    }
-
-    /**
-     * True, if selection has been cached.
-     */
-    isCached() {
-        return (
-            this._selectionStartCached !== null &&
-            this._selectionEndCached !== null
-        );
-    }
-
-    /**
-     * Cache the current text selection for this input field.
-     * We ignore selection range of (0,0) because that indicates no selection and we don't want to restore it later.
-     * @param input {HTMLInputElement} The DOM element to operate on
-     */
-    preserve(input) {
-        if (!this.hasSelection(input) && this.isCached()) {
-            // We already have cached selection but we're asking to preserve no selection,
-            // so we must NOT overwrite our cache with no selection or we can't restore the previously selected text.
-            // This happens if the browser doesn't preserve text selection automatically in the input.
-            return;
-        }
-
-        // Only update cache if there is selection.
-        if (this.hasSelection(input)) {
-            this._cacheSelectionRange(input.selectionStart, input.selectionEnd);
-        }
-    }
-
-    /**
-     * Restore cached selection. This may happen async, so a promise is returned.
-     * @param input {HTMLInputElement} The DOM element to operate on
-     * @returns {Promise} A promise to be resolved when the selection is restored.
-     *  If the cache was empty, the promise is resolved immediately as a no-op.
-     */
-    restore(input) {
-        // Bail early if we don't have a cached selection.
-        if (!this.isCached()) {
-            return Promise.resolve();
-        }
-
-        // @W-7962838 - Safari has a browser bug where setting the selection on inputs
-        // as you focus them keeps it from scrolling into view in certain conditions.
-        // This can be worked around by setting the text selection in a new call stack immediately after the focus.
-        // https://bugs.webkit.org/show_bug.cgi?id=217350
-        if (isSafari) {
-            return timeout(0).then(() => {
-                // running async, so revalidate our inputs
-                if (this.isCached() && input) {
-                    restoreCacheToInput(input, this);
-                }
-            });
-        }
-
-        // W-6176985: IE11 input when set value, will move cursor to beginning.
-        // This fix is only for input type=number on IE11, and force the cursor to the end.
-        if (isIE11) {
-            const length = input.value.length;
-            input.setSelectionRange(length, length);
-            return Promise.resolve();
-        }
-
-        restoreCacheToInput(input, this);
-        return Promise.resolve();
-    }
-}