lightning-base-components 1.16.6-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": [
@@ -1493,6 +1523,7 @@
   },
   "iconUtils": {},
   "industriesActionPlanApi": {},
+  "industriesActionablelistApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
   "industriesDecisionMatrixDesignerApi": {},
@@ -1509,6 +1540,7 @@
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
+  "industriesSalesExcellenceApi": {},
   "industriesServiceExcellenceApi": {},
   "industriesSustainabilityBeiApi": {},
   "industriesSustainabilityDgfApi": {},
@@ -2244,6 +2276,9 @@
       {
         "name": "required"
       },
+      {
+        "name": "selectedTargetApiName"
+      },
       {
         "name": "textInfo"
       },
@@ -3215,6 +3250,7 @@
       }
     ]
   },
+  "serviceAutomationServiceCatalogApi": {},
   "serviceCloudVoiceToolkitApi": {
     "minVersion": "52.0",
     "slotNames": [],
@@ -3224,6 +3260,7 @@
       }
     ]
   },
+  "showToastEvent": {},
   "sitesApi": {},
   "slider": {
     "minVersion": "41.0",
@@ -3505,6 +3542,18 @@
       "message"
     ],
     "properties": [
+      {
+        "name": "label"
+      },
+      {
+        "name": "labelLinks"
+      },
+      {
+        "name": "message"
+      },
+      {
+        "name": "messageLinks"
+      },
       {
         "name": "mode"
       },
@@ -3513,6 +3562,25 @@
       }
     ]
   },
+  "toastContainer": {
+    "slotNames": [],
+    "properties": [
+      {
+        "name": "containerPosition"
+      },
+      {
+        "name": "maxToasts"
+      },
+      {
+        "name": "toastPosition"
+      }
+    ],
+    "methods": [
+      {
+        "name": "close"
+      }
+    ]
+  },
   "tree": {
     "minVersion": "41.0",
     "slotNames": [],
@@ -3590,6 +3658,7 @@
   },
   "uiAssistantPlatformApi": {},
   "uiDuplicatesApi": {},
+  "uiEnablementApi": {},
   "uiGraphQLApi": {
     "minVersion": "57.0"
   },
@@ -3639,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,9 +1,7 @@
 {
     "name": "lightning-base-components",
-    "version": "1.16.6-alpha",
-    "engines": {
-        "node": ">=14.18.2"
-    },
+    "version": "1.16.8-alpha",
+    "license": "MIT",
     "files": [
         "external",
         "scopedImports",
@@ -11,6 +9,9 @@
         "src/lightning/*/!(__container__|__integration__|__perf__|__raptorMocks__|__test__|__tests__)",
         "package.json"
     ],
+    "engines": {
+        "node": ">=14.18.2"
+    },
     "lwc": {
         "mapNamespaceFromPath": true,
         "modules": [
@@ -265,6 +266,10 @@
                 "name": "@salesforce/label/LightningRichTextEditor.fontSize",
                 "path": "scopedImports/@salesforce-label-LightningRichTextEditor.fontSize.js"
             },
+            {
+                "name": "@salesforce/label/LightningRichTextEditor.linkInputTitle",
+                "path": "scopedImports/@salesforce-label-LightningRichTextEditor.linkInputTitle.js"
+            },
             {
                 "name": "@salesforce/label/LightningRichTextEditor.linkInput",
                 "path": "scopedImports/@salesforce-label-LightningRichTextEditor.linkInput.js"
@@ -1061,6 +1066,26 @@
                 "name": "@salesforce/label/LightningToast.errorLabel",
                 "path": "scopedImports/@salesforce-label-LightningToast.errorLabel.js"
             },
+            {
+                "name": "@salesforce/label/LightningToast.missingToastLabel",
+                "path": "scopedImports/@salesforce-label-LightningToast.missingToastLabel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningToastContainer.missingToastProperty",
+                "path": "scopedImports/@salesforce-label-LightningToastContainer.missingToastProperty.js"
+            },
+            {
+                "name": "@salesforce/label/LightningToastContainer.missingToastConfig",
+                "path": "scopedImports/@salesforce-label-LightningToastContainer.missingToastConfig.js"
+            },
+            {
+                "name": "@salesforce/label/Global_Entity.created_by",
+                "path": "scopedImports/@salesforce-label-Global_Entity.created_by.js"
+            },
+            {
+                "name": "@salesforce/label/Global_Entity.last_modified_by",
+                "path": "scopedImports/@salesforce-label-Global_Entity.last_modified_by.js"
+            },
             {
                 "name": "@salesforce/i18n/lang",
                 "path": "scopedImports/@salesforce-i18n-lang.js"
@@ -1220,6 +1245,7 @@
             "lightning/alert",
             "lightning/avatar",
             "lightning/badge",
+            "lightning/barcodeScanner",
             "lightning/baseFormattedText",
             "lightning/breadcrumb",
             "lightning/breadcrumbs",
@@ -1325,6 +1351,5 @@
             "lightning/verticalNavigationOverflow",
             "lightning/verticalNavigationSection"
         ]
-    },
-    "license": "MIT"
+    }
 }

package/scopedImports/@salesforce-label-Global_Entity.created_by.js

@@ -0,0 +1 @@
+export default 'Created By';

package/scopedImports/@salesforce-label-Global_Entity.last_modified_by.js

@@ -0,0 +1 @@
+export default 'Last Modified By';

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/scopedImports/@salesforce-label-LightningRichTextEditor.linkInputTitle.js

@@ -0,0 +1 @@
+export default 'Link Title';

package/scopedImports/@salesforce-label-LightningToast.missingToastLabel.js

@@ -0,0 +1 @@
+export default 'Provide at least the "label" property to show the toast.';

package/scopedImports/@salesforce-label-LightningToastContainer.missingToastConfig.js

@@ -0,0 +1 @@
+export default 'Unable to show toast, missing toast config.';

package/scopedImports/@salesforce-label-LightningToastContainer.missingToastProperty.js

@@ -0,0 +1 @@
+export default 'Unable to show toast, missing toast property\'s "{0}".';

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>