lightning-base-components 1.27.5-alpha → 1.28.3-alpha

package/src/lightning/inputUtils/validity.ts

@@ -1,445 +0,0 @@
-import labelBadInput from '@salesforce/label/LightningErrorMessage.validityBadInput';
-import labelBadNumericInput from '@salesforce/label/LightningErrorMessage.validityBadNumericInput';
-import labelBadEmailInput from '@salesforce/label/LightningErrorMessage.validityBadEmailInput';
-import labelPatternMismatch from '@salesforce/label/LightningErrorMessage.validityPatternMismatch';
-import labelRangeOverflow from '@salesforce/label/LightningErrorMessage.validityRangeOverflow';
-import labelRangeUnderflow from '@salesforce/label/LightningErrorMessage.validityRangeUnderflow';
-import labelStepMismatch from '@salesforce/label/LightningErrorMessage.validityStepMismatch';
-import labelTooLong from '@salesforce/label/LightningErrorMessage.validityTooLong';
-import labelTooShort from '@salesforce/label/LightningErrorMessage.validityTooShort';
-import labelTypeMismatch from '@salesforce/label/LightningErrorMessage.validityTypeMismatch';
-import labelValueMissing from '@salesforce/label/LightningErrorMessage.validityValueMissing';
-import labelSelectAtleastOneValue from '@salesforce/label/LightningErrorMessage.validitySelectAtleastOne';
-import { assert, reflectAttribute } from 'lightning/utilsPrivate';
-
-function getConstraintsSortedByPriority(): string[] {
-    return [
-        'customError',
-        'badInput',
-        'badNumericInput',
-        'patternMismatch',
-        'rangeOverflow',
-        'rangeUnderflow',
-        'stepMismatch',
-        'tooLong',
-        'tooShort',
-        'badEmailInput',
-        'typeMismatch',
-        'valueMissing',
-        'selectAtleastOneValue',
-    ];
-}
-
-interface DefaultLabels {
-    badInput: string;
-    customError: string;
-    badNumericInput: string;
-    badEmailInput: string;
-    patternMismatch: string;
-    rangeOverflow: string;
-    rangeUnderflow: string;
-    stepMismatch: string;
-    tooLong: string;
-    tooShort: string;
-    typeMismatch: string;
-    valueMissing: string;
-    selectAtleastOneValue: string;
-}
-
-const defaultLabels: DefaultLabels = {
-    badInput: labelBadInput,
-    customError: labelBadInput,
-    badNumericInput: labelBadNumericInput,
-    badEmailInput: labelBadEmailInput,
-    patternMismatch: labelPatternMismatch,
-    rangeOverflow: labelRangeOverflow,
-    rangeUnderflow: labelRangeUnderflow,
-    stepMismatch: labelStepMismatch,
-    tooLong: labelTooLong,
-    tooShort: labelTooShort,
-    typeMismatch: labelTypeMismatch,
-    valueMissing: labelValueMissing,
-    selectAtleastOneValue: labelSelectAtleastOneValue,
-};
-
-function resolveBestMatch(validity: ValidityState): string | undefined {
-    let validityState: string | undefined;
-    if (validity && validity.valid === false) {
-        validityState = 'badInput';
-        getConstraintsSortedByPriority().some((stateName) => {
-            if (validity[stateName] === true) {
-                validityState = stateName;
-                return true;
-            }
-            return false;
-        });
-    }
-    return validityState;
-}
-
-function computeConstraint(
-    valueProvider: Record<string, any>,
-    constraint: string
-): boolean {
-    const provider = valueProvider[constraint];
-    if (typeof provider === 'function') {
-        return provider();
-    }
-    if (typeof provider === 'boolean') {
-        return provider;
-    }
-    return false;
-}
-
-// We're doing the below to avoid exposing the constraintsProvider in the ValidityState
-function newValidityState(
-    constraintsProvider: Record<string, any>
-): ValidityState {
-    class ValidityState {
-        get valueMissing(): boolean {
-            return computeConstraint(constraintsProvider, 'valueMissing');
-        }
-
-        get typeMismatch(): boolean {
-            return computeConstraint(constraintsProvider, 'typeMismatch');
-        }
-
-        get patternMismatch(): boolean {
-            return computeConstraint(constraintsProvider, 'patternMismatch');
-        }
-
-        get tooLong(): boolean {
-            return computeConstraint(constraintsProvider, 'tooLong');
-        }
-
-        get tooShort(): boolean {
-            return computeConstraint(constraintsProvider, 'tooShort');
-        }
-
-        get rangeUnderflow(): boolean {
-            return computeConstraint(constraintsProvider, 'rangeUnderflow');
-        }
-
-        get rangeOverflow(): boolean {
-            return computeConstraint(constraintsProvider, 'rangeOverflow');
-        }
-
-        get stepMismatch(): boolean {
-            return computeConstraint(constraintsProvider, 'stepMismatch');
-        }
-
-        get customError(): boolean {
-            return computeConstraint(constraintsProvider, 'customError');
-        }
-
-        get badInput(): boolean {
-            return computeConstraint(constraintsProvider, 'badInput');
-        }
-
-        get badNumericInput(): boolean {
-            return computeConstraint(constraintsProvider, 'badNumericInput');
-        }
-
-        get badEmailInput(): boolean {
-            return computeConstraint(constraintsProvider, 'badEmailInput');
-        }
-
-        get selectAtleastOneValue(): boolean {
-            return computeConstraint(
-                constraintsProvider,
-                'validitySelectAtleastOneValue'
-            );
-        }
-
-        get valid(): boolean {
-            return !(
-                this.valueMissing ||
-                this.typeMismatch ||
-                this.patternMismatch ||
-                this.tooLong ||
-                this.tooShort ||
-                this.rangeUnderflow ||
-                this.rangeOverflow ||
-                this.stepMismatch ||
-                this.customError ||
-                this.badInput ||
-                this.badNumericInput ||
-                this.badEmailInput ||
-                this.selectAtleastOneValue
-            );
-        }
-    }
-
-    return new ValidityState();
-}
-
-export function buildSyntheticValidity(
-    constraintProvider: Record<string, any>
-): ValidityState {
-    return Object.freeze(newValidityState(constraintProvider));
-}
-
-export function getErrorMessage(
-    validity: ValidityState,
-    labelMap: Record<string, string>
-): string {
-    const key = resolveBestMatch(validity);
-    if (key) {
-        return labelMap[key] ? labelMap[key] : defaultLabels[key];
-    }
-    return '';
-}
-
-interface LightningInputComponent extends HTMLElement {
-    messageWhenBadInput?: string;
-    messageWhenPatternMismatch?: string;
-    messageWhenRangeOverflow?: string;
-    messageWhenRangeUnderflow?: string;
-    messageWhenStepMismatch?: string;
-    messageWhenTooLong?: string;
-    messageWhenTooShort?: string;
-    messageWhenTypeMismatch?: string;
-    messageWhenValueMissing?: string;
-}
-
-interface ConstraintProviders {
-    [key: string]: any;
-}
-
-export class FieldConstraintApi {
-    _inputComponentProvider: () => any;
-    _constraintsProvider: ConstraintProviders;
-    _constraint?: ValidityState;
-    _customValidityMessage?: string;
-    _inputComponentElement?: HTMLElement;
-
-    constructor(
-        inputComponentProvider: () => any,
-        constraintProviders: ConstraintProviders
-    ) {
-        assert(typeof inputComponentProvider === 'function');
-        this._inputComponentProvider = inputComponentProvider;
-        this._constraintsProvider = Object.assign({}, constraintProviders);
-        if (!this._constraintsProvider.customError) {
-            this._constraintsProvider.customError = () =>
-                typeof this._customValidityMessage === 'string' &&
-                this._customValidityMessage !== '';
-        }
-    }
-
-    get validity(): ValidityState {
-        if (!this._constraint) {
-            this._constraint = buildSyntheticValidity(
-                this._constraintsProvider
-            );
-        }
-
-        return this._constraint;
-    }
-
-    checkValidity(): boolean {
-        const isValid = this.validity.valid;
-        if (!isValid) {
-            if (this.inputComponent) {
-                this.inputComponent.dispatchEvent(
-                    // @ts-expect-error: TODO: fix the typo 'cancellable' -> 'cancelable'
-                    new CustomEvent('invalid', { cancellable: true })
-                );
-            }
-        }
-        return isValid;
-    }
-
-    reportValidity(callback?: (message: string) => void): boolean {
-        const valid = this.checkValidity();
-
-        // the input might have been removed from the DOM by the time we query it
-        if (this.inputComponent) {
-            this.inputComponent.classList.toggle('slds-has-error', !valid);
-            reflectAttribute(this.inputComponent, 'invalid', !valid);
-
-            if (callback) {
-                callback(this.validationMessage);
-            }
-        }
-
-        return valid;
-    }
-
-    setCustomValidity(message: string): void {
-        this._customValidityMessage = message;
-    }
-
-    get validationMessage(): string {
-        return getErrorMessage(this.validity, {
-            customError: this._customValidityMessage,
-            badInput: this.inputComponent.messageWhenBadInput,
-            badNumericInput: this.inputComponent.messageWhenBadInput,
-            badEmailInput: this.inputComponent.messageWhenTypeMismatch,
-            patternMismatch: this.inputComponent.messageWhenPatternMismatch,
-            rangeOverflow: this.inputComponent.messageWhenRangeOverflow,
-            rangeUnderflow: this.inputComponent.messageWhenRangeUnderflow,
-            stepMismatch: this.inputComponent.messageWhenStepMismatch,
-            tooShort: this.inputComponent.messageWhenTooShort,
-            tooLong: this.inputComponent.messageWhenTooLong,
-            typeMismatch: this.inputComponent.messageWhenTypeMismatch,
-            valueMissing: this.inputComponent.messageWhenValueMissing,
-            selectAtleastOneValue: this.inputComponent.messageWhenValueMissing,
-        });
-    }
-
-    get inputComponent(): LightningInputComponent {
-        if (!this._inputComponentElement) {
-            this._inputComponentElement = this._inputComponentProvider();
-        }
-        return this._inputComponentElement as LightningInputComponent;
-    }
-}
-
-interface Overrides {
-    [key: string]: any;
-}
-
-export class FieldConstraintApiWithProxyInput {
-    _inputComponent: any;
-    _overrides: Overrides;
-    _proxyInput: HTMLInputElement | HTMLTextAreaElement;
-    _attributes?: Record<string, () => any>;
-    _attributeUpdater?: (attributeNames: string | string[]) => void;
-    _privateConstraintApi?: FieldConstraintApi;
-
-    constructor(
-        inputComponent: any,
-        overrides: Overrides = {},
-        inputElementName: 'input' | 'textarea' = 'input'
-    ) {
-        if (inputElementName !== 'textarea' && inputElementName !== 'input') {
-            throw new Error(
-                'FieldConstraintApiWithProxyInput is not supported for this element'
-            );
-        }
-        this._inputComponent = inputComponent;
-        this._overrides = overrides;
-        // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-        this._proxyInput = document.createElement(inputElementName);
-    }
-
-    setInputAttributes(
-        attributes: Record<string, () => any>
-    ): (attributeNames: string | string[]) => void {
-        this._attributes = attributes;
-
-        this._attributeUpdater = (attributeNames) => {
-            if (!attributes) {
-                return;
-            }
-            if (typeof attributeNames === 'string') {
-                this._setAttribute(
-                    attributeNames,
-                    attributes[attributeNames]()
-                );
-            } else {
-                attributeNames.forEach((attributeName) => {
-                    this._setAttribute(
-                        attributeName,
-                        attributes[attributeName]()
-                    );
-                });
-            }
-        };
-        return this._attributeUpdater;
-    }
-
-    get validity(): ValidityState {
-        return this._constraintApi.validity;
-    }
-
-    checkValidity(): boolean {
-        return this._constraintApi.checkValidity();
-    }
-
-    reportValidity(callback?: (message: string) => void): boolean {
-        return this._constraintApi.reportValidity(callback);
-    }
-
-    setCustomValidity(message: string): void {
-        this._constraintApi.setCustomValidity(message);
-        this._proxyInput.setCustomValidity(message);
-    }
-
-    get validationMessage(): string {
-        return this._constraintApi.validationMessage;
-    }
-
-    _setAttribute(attributeName: string, value: any): void {
-        if (value !== null && value !== undefined && value !== false) {
-            if (attributeName === 'value') {
-                if (this._proxyInput.type === 'file') {
-                    // Can't set value on file
-                    return;
-                }
-                this._proxyInput.value = value;
-            } else if (typeof value === 'number') {
-                reflectAttribute(
-                    this._proxyInput,
-                    attributeName,
-                    value.toString()
-                );
-            } else {
-                reflectAttribute(this._proxyInput, attributeName, value);
-            }
-        } else {
-            reflectAttribute(this._proxyInput, attributeName);
-        }
-    }
-
-    get _constraintApi(): FieldConstraintApi {
-        if (!this._privateConstraintApi) {
-            this._updateAllAttributes();
-
-            const computeConstraintWithProxyInput = (
-                constraintName: string
-            ): boolean => {
-                const constraintOverride = this._overrides[constraintName];
-
-                const isDisabledOrReadOnly =
-                    this._proxyInput.hasAttribute('disabled') ||
-                    this._proxyInput.hasAttribute('readonly');
-
-                if (typeof constraintOverride === 'function') {
-                    return !isDisabledOrReadOnly && constraintOverride();
-                }
-
-                // Firefox incorrectly computes rangeUnderflow for disabled and readonly inputs, so we're adding
-                // a check here instead to always return false when the input has readonly or disabled attributes set
-                return (
-                    !isDisabledOrReadOnly &&
-                    this._proxyInput.validity[constraintName]
-                );
-            };
-            const constraintsProvider = getConstraintsSortedByPriority().reduce(
-                (provider, constraint) => {
-                    provider[constraint] = computeConstraintWithProxyInput.bind(
-                        this,
-                        constraint
-                    );
-                    return provider;
-                },
-                {}
-            );
-            this._privateConstraintApi = new FieldConstraintApi(
-                this._inputComponent as any,
-                constraintsProvider
-            );
-        }
-        return this._privateConstraintApi;
-    }
-
-    _updateAllAttributes(): void {
-        if (this._attributes) {
-            Object.entries(this._attributes).forEach(([key, valueFunction]) => {
-                this._setAttribute(key, valueFunction());
-            });
-        }
-    }
-}

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

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
-    </capabilities>
-</LightningComponentBundle>

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

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <isExposed>true</isExposed>
-    <capabilities>
-        <capability>lightning__ServerRenderable</capability>
-    </capabilities>
-</LightningComponentBundle>

package/src/lightning/internationalizationLibrary/README.md

@@ -1,24 +0,0 @@
-# internationalizationLibrary
-
-Currently, the code base contains logic that directs execution in two different paths, depending whether a component is being executed on the platform vs off. That logic, was intented to aid the migration off the current Aura's localization service, in favor of an unified and universal solution based on standards, that could be consumed on any enviroment.
-
-Such logic can be detailed, on a high level as follows, at run time a path execution decides that:
-
-if a component is run on the platform, it will make use of Aura's localization Service to format and parse dates/times.
-if a component is run anywhere else, it will use the globalization i18n-service
-
-## When to use this utility
-
-Because of our legacy support and backward compatiblity contracts, we use this utility as a facade, with the hope that once we are able to fully deprecate Aura's Localization service, this utility will help us to transition into [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs).
-
-If you have an existing component that maps to any of the Aura's localization service methods, this module will aid with that.
-
-## Our recommmended approach
-
-- For declarative usage, use our localization specific components, they will work both off/on platform.
-- For low level, programatic usage, dealing with dates/times/numbers etc. use [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs). The next section covers more on usage and how these utiltiies are exposed.
-
-## Access/Exposure/Usage
-
-1. [internationalizationLibrary](https://github.com/salesforce-experience-platform-emu/lightning-components/tree/master/ui-lightning-components/src/main/modules/lightning/internationalizationLibrary) as a module is not exposed on the platform, but it's part of our NPM package.
-2. [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs) is maintained by the Globalization team, however, we expose it as part of Lightning. For example [i18nService](https://github.com/salesforce-experience-platform-emu/lightning-components/tree/master/ui-lightning-components/src/main/modules/lightning/i18nService). All usage of `localizerjs` should be consumed as `lightning/i18nService` and `lightning/i18nCldrOptions`. This is exposed on the platform internally and available as part of our NPM package.

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

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <capabilities>
-        <capability>lightning__ServerRenderable</capability>
-    </capabilities>
-</LightningComponentBundle>

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

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <capabilities>
-        <capability>lightning__ServerRenderable</capability>
-    </capabilities>
-</LightningComponentBundle>

package/src/lightning/layout/__docs__/layout.md

@@ -1,136 +0,0 @@
----
-examples:
-    - name: simple
-      label: Simple Layout
-      description: A layout can include layout items as columns.
-    - name: nested
-      label: Nested Page Layout
-      description: A layout item can contain nested layouts.
-    - name: horizontalAlignSpace
-      label: Layout with a Horizontal Align (Space)
-      description: Position layout items horizontally across the container, with space before, between, and after the items.
-    - name: horizontalAlignSpread
-      label: Layout with a Horizontal Align (Spread)
-      description: Position layout items horizontally across the container, with space between the items.
-    - name: verticalAlignCenter
-      label: Layout with a Vertical Align (Center)
-      description: Position layout items vertically in the center of the container.
-    - name: verticalAlignStretch
-      label: Layout with a Vertical Align (Stretch)
-      description: Stretch out layout items vertically to fill the container.
-    - name: pullToBoundary
-      label: Layout with PullToBoundary Attribute
-      description: Pull layout items to the edges of the container.
----
-
-A `lightning-layout` is a flexible grid system for arranging containers within
-a page or inside another container. The default layout is mobile-first and can
-be easily configured to work on different devices.
-
-Create the content of the layout by including `lightning-layout-item` components
-within `lightning-layout`. You can place HTML tags and text between the `lightning-layout-item`
-components, but you can't place other components or expressions between them.
-
-This component inherits styling from the
-[grid utility classes](https://lightningdesignsystem.com/utilities/grid/) in the
-Lightning Design System.
-
-The layout can be customized by setting the following attributes.
-
-#### `horizontal-align`
-
-Spread layout items out horizontally based on the following values.
-
-- `center`: Appends the `slds-grid_align-center` class to the grid. This attribute orders the layout items into a horizontal line without any spacing, and places the group into the center of the container.
-- `space`: Appends the `slds-grid_align-space` class to the grid. The layout items are spaced horizontally across the container, starting and ending with a space.
-- `spread`: Appends the `slds-grid_align-spread` class to the grid. The layout items are spaced horizontally across the container, starting and ending with a layout item.
-- `end`: Appends the `slds-grid_align-end` class to the grid. The layout items are grouped together and aligned horizontally on the right side of the container.
-
-#### `vertical-align`
-
-Spread layout items out vertically based on the following values.
-
-- `start`: Appends the `slds-grid_vertical-align-start` class to the grid. The layout items are aligned at the top of the container.
-- `center`: Appends the `slds-grid_vertical-align-center` class to the grid. The layout items are aligned in the center of the container.
-- `end`: Appends the `slds-grid_vertical-align-end` class to the grid. The layout items are aligned at the bottom of the container.
-- `stretch`: Appends the `slds-grid_vertical-stretch` class to the grid. The layout items extend vertically to fill the container.
-
-#### `pull-to-boundary`
-
-Pull layout items to the layout boundaries based on the following values. If
-padding is used on layout items, this attribute pulls the elements on either
-side of the container to the boundary. Choose the size that corresponds to the
-padding on your layout items. For instance, if
-`lightning-layout-item padding="horizontalSmall"`, choose `pull-to-boundary="small"`.
-
-- `small`: Appends the `slds-grid_pull-padded` class to the grid.
-- `medium`: Appends the `slds-grid_pull-padded-medium` class to the grid.
-- `large`: Appends the `slds-grid_pull-padded-large` class to the grid.
-
-Use the `class` or `multiple-rows` attributes to customize the styling in other
-ways.
-
-#### Creating Columns
-
-`lightning-layout` enables you to create several types of columns.
-
-- Flexible widths that adjust based on their content
-- Fixed widths that take up a percentage of the container
-
-Create a simple layout by enclosing single or multiple `lightning-layout-item` components within `lightning-layout`. `lightning-layout-item` creates a column within `lightning-layout`.
-
-To create columns with widths that are based on their content, use `flexibility="auto"`. The `horizontal-align` attribute determines how to spread the layout items horizontally. Here is an example that creates columns with flexible widths.
-
-```html
-<template>
-    <div class="c-container">
-        <lightning-layout horizontal-align={horizontalAlign}>
-            <lightning-layout-item flexibility="auto" padding="around-small">
-                1
-            </lightning-layout-item>
-            <lightning-layout-item flexibility="auto" padding="around-small">
-                2
-            </lightning-layout-item>
-            <lightning-layout-item flexibility="auto" padding="around-small">
-                3
-            </lightning-layout-item>
-            <lightning-layout-item flexibility="auto" padding="around-small">
-                4
-            </lightning-layout-item>
-        </lightning-layout>
-    </div>
-</template>
-```
-
-Set the horizontal alignment to `space`, which evenly distributes columns horizontally with an equal amount of space separating the columns.
-
-```javascript
-import { LightningElement, api } from 'lwc';
-
-export default class MyLayout extends LightningElement {
-    @api horizontalAlign = 'space';
-}
-```
-
-To create columns with fixed widths, use the `size` attribute on `lightning-layout-item`. For example, to create two columns where the width of the first column is 33% of the grid container and the second column is 66% of the grid container, use `size="4"` and `size="8"`.
-
-```html
-<lightning-layout>
-    <lightning-layout-item size="4"> Column 1 content </lightning-layout-item>
-    <lightning-layout-item size="8"> Column 2 content </lightning-layout-item>
-</lightning-layout>
-```
-
-For more information, see the [SLDS grid utility classes](https://lightningdesignsystem.com/utilities/grid/), and [SLDS sizing utility classes](https://www.lightningdesignsystem.com/utilities/sizing/).
-
-#### Usage Considerations
-
-This example creates the same layout shown in **Creating Columns**,
-which creates two columns with fixed widths.
-
-```html
-<div class="slds-grid">
-    <div class="slds-col slds-size_1-of-3">Column 1 content</div>
-    <div class="slds-col slds-size_2-of-3">Columns 2 content</div>
-</div>
-```

package/src/lightning/layout/__examples__/horizontalAlignSpace/horizontalAlignSpace.css

@@ -1,11 +0,0 @@
-.c-container {
-    border: 1px solid #d8dde6;
-    margin: 10px 0 20px;
-}
-
-.custom-box {
-    text-align: center;
-    background-color: #f4f6f9;
-    padding: 1rem;
-    border: 1px solid #d8dde6;
-}

package/src/lightning/layout/__examples__/horizontalAlignSpace/horizontalAlignSpace.html

@@ -1,31 +0,0 @@
-<template>
-        <p>The layout items are spaced horizontally across the container, starting and ending with a space, using attribute <code>horizontal-align="space"</code>.</p>
-    <div class="c-container">
-        <lightning-layout horizontal-align="space">
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">1</div>
-            </lightning-layout-item>
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">2</div>
-            </lightning-layout-item>
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">3</div>
-            </lightning-layout-item>
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">4</div>
-            </lightning-layout-item>
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">5</div>
-            </lightning-layout-item>
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">6</div>
-            </lightning-layout-item>
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">7</div>
-            </lightning-layout-item>
-            <lightning-layout-item padding="around-small">
-                <div class="custom-box">8</div>
-            </lightning-layout-item>
-        </lightning-layout>
-    </div>
-</template>