lightning-base-components 1.16.7-alpha → 1.16.8-alpha

package/metadata/raptor.json

@@ -96,6 +96,36 @@
       }
     ]
   },
+  "barcodeScanner": {
+    "minVersion": "57.0",
+    "slotNames": [],
+    "properties": [
+      {
+        "name": "disabled"
+      },
+      {
+        "name": "disabledAlternativeText"
+      },
+      {
+        "name": "disabledIconSrc"
+      },
+      {
+        "name": "enableContinuousScan"
+      },
+      {
+        "name": "enabledAlternativeText"
+      },
+      {
+        "name": "enabledIconSrc"
+      },
+      {
+        "name": "iconSize"
+      },
+      {
+        "name": "scannerOptions"
+      }
+    ]
+  },
   "baseFormattedText": {
     "slotNames": [],
     "properties": [
@@ -2246,6 +2276,9 @@
       {
         "name": "required"
       },
+      {
+        "name": "selectedTargetApiName"
+      },
       {
         "name": "textInfo"
       },
@@ -3217,6 +3250,7 @@
       }
     ]
   },
+  "serviceAutomationServiceCatalogApi": {},
   "serviceCloudVoiceToolkitApi": {
     "minVersion": "52.0",
     "slotNames": [],
@@ -3624,6 +3658,7 @@
   },
   "uiAssistantPlatformApi": {},
   "uiDuplicatesApi": {},
+  "uiEnablementApi": {},
   "uiGraphQLApi": {
     "minVersion": "57.0"
   },
@@ -3673,8 +3708,10 @@
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},
+  "unstable_uiEnablementApi": {},
   "unstable_uiGraphQLApi": {},
   "unstable_uiLayoutApi": {},
+  "unstable_uiLearningContentPlatformApi": {},
   "unstable_uiListApi": {},
   "unstable_uiListsApi": {},
   "unstable_uiLookupsApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.16.7-alpha",
+    "version": "1.16.8-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1245,6 +1245,7 @@
             "lightning/alert",
             "lightning/avatar",
             "lightning/badge",
+            "lightning/barcodeScanner",
             "lightning/baseFormattedText",
             "lightning/breadcrumb",
             "lightning/breadcrumbs",

package/scopedImports/@salesforce-label-LightningForm.editErrorHelp.js

@@ -1 +1 @@
-export default 'Errors';
+export default 'Review the errors on this page';

package/scopedImports/@salesforce-label-LightningForm.errorPopoverHeading.js

@@ -1 +1 @@
-export default 'Errors';
+export default 'We hit a snag.';

package/scopedImports/@salesforce-label-LightningForm.saveFieldErrorSummary.js

@@ -1 +1 @@
-export default 'Page Errors';
+export default 'Review the following fields';

package/scopedImports/@salesforce-label-LightningLookup.messageWhenMissingInformation.js

@@ -1 +1 @@
-export default 'The lookup field cannot be edited because of missing information.';
+export default 'This lookup field requires more data. Your Salesforce admin can help with that.';

package/src/lightning/alert/__examples__disabled/basic/basic.css

@@ -2,6 +2,6 @@
     margin: 0.5rem;
     border-radius: 0.5rem;
     background: #FFF;
-    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
 }

package/src/lightning/barcodeScanner/__docs__/barcodeScanner.md

@@ -0,0 +1,122 @@
+The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_barcodescanner_in_a_lightning_component) in the Lightning Web Components Developer Guide.
+
+```html
+<template>
+  <lightning-barcode-scanner> </lightning-barcode-scanner>
+</template>
+```
+
+To disable the barcode scanner, set the `disabled` attribute. The barcode scanner is enabled by default.
+
+```html
+<template>
+  <lightning-barcode-scanner disabled> </lightning-barcode-scanner>
+</template>
+```
+
+#### Scanning Modes
+
+Barcode scanning supports both single scan and continuous scan. A single scan component automatically closes after one successful scan, while a continuous scan component remains open. The `lightning-barcode-scanner` component is single scan by default.
+
+To enable continuous scanning, set the `enable-continuous-scan` attribute.
+
+```html
+<template>
+  <lightning-barcode-scanner enable-continuous-scan>
+  </lightning-barcode-scanner>
+</template>
+```
+
+#### Scanner Options
+
+The BarcodeScanner API for `lightning-barcode-scanner` supports various scanner options. For the list of barcode scanner option properties, see [BarcodeScannerOptions](docs/component-library/documentation/en/lwc/lwc.reference_lightning_barcodescanner_data_types) in the Lightning Web Components Developer Guide.
+
+You can configure various scanner options for a scanning session. For example, if you want your component to support only a specific set of barcode types, specify the types as a list in the `barcodeTypes` property. If you want to modify the size of the scanner camera view, specify the size in the `scannerSize` property. In this example, the barcode scanner supports only the specified types `CODE_128`,`EAN_13`, and `QR`, and will ignore the other types, and the barcode scanner camera view is changed to `LARGE`.
+
+```html
+<template>
+  <lightning-barcode-scanner scanner-options={myScannerOptions}>
+  </lightning-barcode-scanner>
+</template>
+```
+
+```javascript
+const myScannerOptions = {
+  barcodeTypes: ["CODE_128", "QR", "EAN_13"],
+  scannerSize: "LARGE",
+};
+```
+
+#### Icons
+
+To specify an icon size for the barcode scanner component, set the `icon-size` attribute. By default, the `icon-size` is medium.
+
+```html
+<template>
+  <lightning-barcode-scanner icon-size="large"> </lightning-barcode-scanner>
+</template>
+```
+
+To set custom assistive technology text for the component icon in its enabled and disabled state, set the `enabled-alternative-text` and `disabled-alternative-text` attributes.
+
+```html
+<template>
+  <lightning-barcode-scanner
+    enabled-alternative-text="Alt text for the enabled icon"
+    disabled-alternative-text="Alt text for the disabled icon"
+  >
+  </lightning-barcode-scanner>
+</template>
+```
+
+You can also create a custom icon for the component by specifying images and alternative texts to use in the component's enabled and disabled states.
+
+To use a custom image for the barcode scanner icon, set the `enabled-icon-src` and `disabled-icon-src` attributes to image paths in the `staticResource` folder. This example uses custom image for the component's icon enabled and disabled states.
+
+```html
+<template>
+  <lightning-barcode-scanner
+    enabled-icon-src="path/to/staticResource/enabled_image"
+    enabled-alternative-text="Alt text for the custom enabled icon"
+    disabled-icon-src="path/to/staticResource/disabled_image"
+    disabled-alternative-text="Alt text for the custom disabled icon"
+  >
+  </lightning-barcode-scanner>
+</template>
+```
+
+#### Custom Events
+
+The `lightning-barcode-scanner` component supports two events, `scan` and `error`.
+
+The `scan` event is triggered by a successful scan on a single scan component or by successfully closing the scanner window on a  multiple scan component. It returns this parameter.
+
+| Parameter       | Type | Description                           |
+| --------------- | ---- | ------------------------------------- |
+| scannedBarcodes | list | Returns an array of scanned barcodes. |
+
+The `scan` event has these properties.
+
+| Property   | Value | Description                                                                                                          |
+| ---------- | ----- | -------------------------------------------------------------------------------------------------------------------- |
+| bubbles    | false | This event does not bubble.                                                                                          |
+| cancelable | true  | This event can be canceled. You can call `preventDefault()` on this event to prevent firing the click event. |
+| composed   | false | This event does not propagate outside the template in which it was dispatched.                                               |
+
+The `errors` event is triggered if there is an error during the scan. The event contains the error details. It returns this parameter.
+
+| Parameter | Type   | Description                |
+| --------- | ------ | -------------------------- |
+| error     | object | Returns the error details. |
+
+The `errors` event has these properties.
+
+| Property   | Value | Description                                                                                                          |
+| ---------- | ----- | -------------------------------------------------------------------------------------------------------------------- |
+| bubbles    | false | This event does not bubble.                                                                                          |
+| cancelable | true  | This event can be canceled. You can call `preventDefault()` on this event to prevent firing the click event. |
+| composed   | false | This event does not propagate outside the template in which it was dispatched.                                               |
+
+#### Source Code
+
+`lightning-barcode-scanner` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/barcodeScanner/barcodeScanner.html

@@ -0,0 +1,39 @@
+<template>
+    <template if:true={_scannerAvailable}>
+        <button
+                class={computedButtonClass}
+                title={computedEnabledTitle}
+                type="button"
+                ontouchstart={scan}
+                onmousedown={onmousedown}
+                onclick={scan}>
+            <template if:true={enabledIconSrcAvailable}>
+                <img
+                    aria-hidden="true"
+                    src={enabledIconSrc}
+                    focusable="false"/>
+            </template>
+            <template if:false={enabledIconSrcAvailable}>
+                <lightning-icon size={computedSize} icon-name="action:scan_enabled">
+                </lightning-icon>
+            </template>
+        </button>
+    </template>
+    <template if:false={_scannerAvailable}>
+        <button
+                class={computedButtonClass}
+                title={computedDisabledTitle}
+                type="button">
+            <template if:true={disabledIconSrcAvailable}>
+                <img
+                    aria-hidden="true"
+                    src={disabledIconSrc}
+                    focusable="false"/>
+            </template>
+            <template if:false={disabledIconSrcAvailable}>
+                <lightning-icon size={computedSize} icon-name="action:scan_disabled">
+                </lightning-icon>
+            </template>
+        </button>
+    </template>
+</template>

package/src/lightning/barcodeScanner/barcodeScanner.js

@@ -0,0 +1,224 @@
+import { LightningElement, api } from 'lwc';
+import { classSet } from 'lightning/utils';
+import { getBarcodeScanner } from 'lightning/mobileCapabilities';
+import { normalizeString as normalize } from 'lightning/utilsPrivate';
+
+const DEFAULT_SIZE = 'medium';
+const SCANNER_ENABLED = 'Scanner enabled';
+const SCANNER_DISABLED = 'Scanner disabled';
+
+export default class BarcodeScanner extends LightningElement {
+    /**
+     * An object representing configuration details for a barcode scanning session.
+     * @type {list}
+     */
+    @api scannerOptions = {
+        // include all supported barcode types
+        barcodeTypes: [
+            'code128',
+            'code39',
+            'code93',
+            'datamatrix',
+            'ean13',
+            'ean8',
+            'itf',
+            'upca',
+            'upce',
+            'pdf417',
+            'qr',
+        ],
+    };
+    /**
+     * Enables continuous scanning when set to `true`.
+     * @default false
+     * @type {boolean}
+     */
+    @api enableContinuousScan = false;
+    /**
+     * The URL of a custom image for the enabled icon.
+     * @default action:scan_enabled
+     * @type {string}
+     */
+    @api enabledIconSrc = '';
+    /**
+     * The URL of a custom image for the disabled icon.
+     * @default action:scan_disabled
+     * @type {string}
+     */
+    @api disabledIconSrc = '';
+    /**
+     * The size of the barcode scanner icon. Supported  values are `small`, `medium`, and `large`.
+     * @default medium
+     * @type {string}
+     */
+    @api iconSize = DEFAULT_SIZE;
+    /**
+     * Assistive technology text to describe the enabled barcode scanner icon.
+     * @default Scanner enabled
+     * @type {string}
+     */
+    @api enabledAlternativeText = SCANNER_ENABLED;
+    /**
+     * Assistive technology text to describe the disabled barcode scanner icon.
+     * @default Scanner disabled
+     * @type {string}
+     */
+    @api disabledAlternativeText = SCANNER_DISABLED;
+    /**
+     * Disables the barcode scanner button when set to `true`.
+     * @default false
+     * @type {boolean}
+     */
+    @api disabled = false;
+    _scannerAvailable = false;
+    _scannedBarcodes = null;
+    _sessionScanner;
+    _error = '';
+    _hasErrors = false;
+    _userDismissedErrorCode = 'USER_DISMISSED';
+
+    //  If user passes the disabled = true, then scannerAvailable will become false and the disabled scanner icon will be rendered
+    connectedCallback() {
+        const sessionScanner = getBarcodeScanner();
+        if (this.disabled) {
+            this._scannerAvailable = false;
+        } else if (sessionScanner !== null) {
+            this._sessionScanner = sessionScanner;
+            this._scannerAvailable = sessionScanner.isAvailable();
+        }
+    }
+    isScannerAvailable() {
+        return this._scannerAvailable;
+    }
+    //  Returns the valid size attribute available
+    normalizedSize() {
+        return normalize(this.iconSize, {
+            fallbackValue: DEFAULT_SIZE,
+            validValues: ['xx-small', 'x-small', 'small', 'medium', 'large'],
+        });
+    }
+    onmousedown(e) {
+        e.preventDefault();
+    }
+    scan() {
+        this.startScanner();
+    }
+    //  Returns the computed slds button classes as per the passed in size by the user
+    get computedButtonClass() {
+        const classes = classSet('slds-button');
+        classes.add('slds-button_icon');
+        const size = this.normalizedSize();
+        switch (size) {
+            case 'small':
+                classes.add('slds-button_icon-small');
+                break;
+            case 'x-small':
+                classes.add('slds-button_icon-x-small');
+                break;
+            case 'xx-small':
+                classes.add('slds-button_icon-xx-small');
+                break;
+            case 'large':
+            case 'medium':
+            default:
+        }
+        return classes.toString();
+    }
+    /*  This is the heart of the component. It handles the scanning process.
+    If enableContinuousScan attribute is false, then it will scan the barcode single time
+    If true, it will keep scanning the barcodes continuously */
+    startScanner() {
+        this._scannedBarcodes = new Set();
+        this._hasErrors = false;
+        const sessionScanner = this._sessionScanner;
+        if (sessionScanner != null && sessionScanner.isAvailable()) {
+            sessionScanner
+                .beginCapture(this.scannerOptions)
+                .then((result) => {
+                    this.processScannedBarcode(result);
+                    if (this.enableContinuousScan) {
+                        this.continueScanning();
+                    } else {
+                        this.dispatchBarcodes();
+                        sessionScanner.endCapture();
+                    }
+                })
+                .catch((error) => {
+                    this.handleError(error);
+                });
+        }
+    }
+    /* The barcode scanner throws an error on event of manually closing the scanner.
+    If error comes because of internal error then error msg will be shown as a toast msg to the user.
+    On manual closing, barcodes will be sent to the parent component.   */
+    handleError(error) {
+        if (error.code !== this._userDismissedErrorCode) {
+            this.dispatchError(error);
+        } else {
+            this.dispatchBarcodes();
+        }
+        this._sessionScanner.endCapture();
+    }
+    //  This method will be called if continuous scanning is enabled to perform the continuous scans
+    continueScanning() {
+        // BarcodeScanner.isAvailable() returns false after endCapture() is called on it
+        this._sessionScanner
+            .resumeCapture()
+            .then((scannedBarcode) => {
+                this.processScannedBarcode(scannedBarcode);
+                this.continueScanning();
+            })
+            .catch((error) => {
+                this.handleError(error);
+            });
+    }
+    //  This method keeps track of the barcodes scanned in a set
+    processScannedBarcode(result) {
+        // Do something with the barcode scan value: Either raise event or process here.
+        const scannedBarcode = result.value;
+        // If user mistakenly scans a product multiple times, then only the first scan will be considered, rest will be rejected here.
+        if (this._scannedBarcodes.has(scannedBarcode)) {
+            return;
+        }
+        this._scannedBarcodes.add(scannedBarcode);
+    }
+    //  When the scanning is finished, this method is called to throw an event 'scan' with scanned barcode values in the detail attribute
+    dispatchBarcodes() {
+        const scannedBarcodes = [...this._scannedBarcodes];
+        const detail = {
+            scannedBarcodes,
+        };
+        const scanEvent = new CustomEvent('scan', {
+            cancelable: true,
+            detail,
+        });
+        this.dispatchEvent(scanEvent);
+    }
+    /*  When there is any error while scanning the barcodes or any other error, this method will be called.
+    This method will then throw an event 'errors', which contains the error details */
+    dispatchError(error) {
+        const detail = {
+            error,
+        };
+        const errorEvent = new CustomEvent('errors', {
+            cancelable: true,
+            detail,
+        });
+        this.dispatchEvent(errorEvent);
+    }
+    get computedSize() {
+        return this.normalizedSize();
+    }
+    get computedEnabledTitle() {
+        return this.enabledAlternativeText || '';
+    }
+    get computedDisabledTitle() {
+        return this.disabledAlternativeText || '';
+    }
+    get enabledIconSrcAvailable() {
+        return this.enabledIconSrc !== '';
+    }
+    get disabledIconSrcAvailable() {
+        return this.disabledIconSrc !== '';
+    }
+}

package/src/lightning/barcodeScanner/barcodeScanner.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+    <minApiVersion>57.0</minApiVersion>
+    <support>GA</support>
+</LightningComponentBundle>

package/src/lightning/breadcrumbs/breadcrumbs.css

@@ -1,6 +1,7 @@
 :host {
     display: block;
 }
+
 div.slds-breadcrumb {
     list-style: none;
 }

package/src/lightning/button/__examples__/accesskey/accesskey.css

@@ -2,7 +2,7 @@ kbd {
     background-color: #eee;
     border-radius: 3px;
     border: 1px solid #b4b4b4;
-    box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 0 0 rgba(255,255,255,.7) inset;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 2px 0 0 rgb(255 255 255 / 70%) inset;
     color: #333;
     display: inline-block;
     font-family: consolas,"Liberation Mono",courier,monospace;

package/src/lightning/button/__examples__/inverse/inverse.css

@@ -1,3 +1,3 @@
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/button/button.slds.css

@@ -167,6 +167,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
 
+    /* Border radius - shared */
+    --sds-c-button-radius-border-startstart: var(
+      --slds-c-button-neutral-radius-border-startstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endstart: var(
+      --slds-c-button-radius-border-endstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-startend: var(
+      --slds-c-button-radius-border-startend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endend: var(
+      --slds-c-button-radius-border-endend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
+      )
+    );
+
     /* Background color */
     --sds-c-button-color-background: var(
       --slds-c-button-neutral-color-background,

package/src/lightning/buttonGroup/__examples__/inverse/inverse.css

@@ -1,3 +1,3 @@
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonIcon/__examples__/basic/basic.css

@@ -1,3 +1,3 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }

package/src/lightning/buttonIcon/__examples__/inverse/inverse.css

@@ -1,3 +1,3 @@
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonIcon/buttonIcon.js

@@ -2,7 +2,7 @@ import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
-import { Tooltip } from 'lightning/tooltipLibrary';
+import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './buttonIcon.html';
 
@@ -109,16 +109,11 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
 
     // remove-next-line-for-c-namespace
     set tooltip(value) {
+        this.tooltipValue = value;
         if (this._tooltip) {
             this._tooltip.value = value;
-        } else if (value) {
-            // Note that because the tooltip target is a child element it may not be present in the
-            // dom during initial rendering.
-            this._tooltip = new Tooltip(value, {
-                root: this,
-                target: () => this.template.querySelector('button'),
-            });
-            this._tooltip.initialize();
+        } else if (value && this.rendered) {
+            this.createTooltip(value);
         }
     }
 
@@ -136,6 +131,23 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
 
     // remove-next-line-for-c-namespace
     _tooltip = null;
+    tooltipValue = null;
+    tooltipType = TooltipType.Info;
+    rendered = false;
+
+    /**
+     * Generate a tooltip with the specified value and current tooltip type
+     *
+     * @param {*} value - The plain text string for the tooltip
+     */
+    createTooltip(value) {
+        this._tooltip = new Tooltip(value, {
+            root: this,
+            target: () => this.template.querySelector('button'),
+            type: this.tooltipType,
+        });
+        this._tooltip.initialize();
+    }
 
     // this is there because raptor currently doesnt support inheritance
     render() {
@@ -296,6 +308,17 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     connectedCallback() {
         this._connected = true;
+        this.dispatchEvent(
+            new CustomEvent('privatebuttoniconregister', {
+                cancelable: true,
+                bubbles: true,
+                detail: {
+                    setTooltipType: (tooltipType) => {
+                        this.tooltipType = tooltipType;
+                    },
+                },
+            })
+        );
     }
 
     renderedCallback() {
@@ -303,13 +326,14 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         super.renderedCallback();
 
         // remove-next-line-for-c-namespace
-        if (this._tooltip && !this._tooltip.initialized) {
-            this._tooltip.initialize();
+        if (this.tooltipValue) {
+            this.createTooltip(this.tooltipValue);
         }
 
         // button inherits from primitiveButton, button.css not working in this case.
         // change host style to disable pointer event.
         this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
+        this.rendered = true;
     }
 
     disconnectedCallback() {