lightning-base-components 1.13.1-alpha → 1.13.5-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.13.1-alpha",
+    "version": "1.13.5-alpha",
     "engines": {
         "node": ">=12.18.3"
     },
@@ -745,6 +745,10 @@
                 "name": "@salesforce/label/LightningRecordForm.loading",
                 "path": "scopedImports/@salesforce-label-LightningRecordForm.loading.js"
             },
+            {
+                "name": "@salesforce/label/LightningRecordForm.edit",
+                "path": "scopedImports/@salesforce-label-LightningRecordForm.edit.js"
+            },
             {
                 "name": "@salesforce/label/LightningLookup.add",
                 "path": "scopedImports/@salesforce-label-LightningLookup.add.js"
@@ -901,6 +905,34 @@
                 "name": "@salesforce/label/LightningServiceCloudVoiceToolkitApi.missingNbaParams",
                 "path": "scopedImports/@salesforce-label-LightningServiceCloudVoiceToolkitApi.missingNbaParams.js"
             },
+            {
+                "name": "@salesforce/label/LightningOutputField.helptextAlternativeText",
+                "path": "scopedImports/@salesforce-label-LightningOutputField.helptextAlternativeText.js"
+            },
+            {
+                "name": "@salesforce/label/LightningInput.helptextAlternativeText",
+                "path": "scopedImports/@salesforce-label-LightningInput.helptextAlternativeText.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRating.readOnlyAssistiveText",
+                "path": "scopedImports/@salesforce-label-LightningRating.readOnlyAssistiveText.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRating.selectRating",
+                "path": "scopedImports/@salesforce-label-LightningRating.selectRating.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRating.rating",
+                "path": "scopedImports/@salesforce-label-LightningRating.rating.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRating.oneStar",
+                "path": "scopedImports/@salesforce-label-LightningRating.oneStar.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRating.nStars",
+                "path": "scopedImports/@salesforce-label-LightningRating.nStars.js"
+            },
             {
                 "name": "@salesforce/i18n/lang",
                 "path": "scopedImports/@salesforce-i18n-lang.js"

package/scopedImports/@salesforce-label-LightningInput.helptextAlternativeText.js

@@ -0,0 +1 @@
+export default '{0} Help Info';

package/scopedImports/@salesforce-label-LightningOutputField.helptextAlternativeText.js

@@ -0,0 +1 @@
+export default '{0} Help Info';

package/scopedImports/@salesforce-label-LightningRating.nStars.js

@@ -0,0 +1 @@
+export default '{0} Stars';

package/scopedImports/@salesforce-label-LightningRating.oneStar.js

@@ -0,0 +1 @@
+export default '1 Star';

package/scopedImports/@salesforce-label-LightningRating.rating.js

@@ -0,0 +1 @@
+export default 'Rating';

package/scopedImports/@salesforce-label-LightningRating.readOnlyAssistiveText.js

@@ -0,0 +1 @@
+export default '{0} out of {1}';

package/scopedImports/@salesforce-label-LightningRating.selectRating.js

@@ -0,0 +1 @@
+export default 'Select a rating';

package/scopedImports/@salesforce-label-LightningRecordForm.edit.js

@@ -0,0 +1 @@
+export default 'Edit: {0}';

package/src/lightning/baseCombobox/baseCombobox.js

@@ -931,6 +931,14 @@ export default class LightningBaseCombobox extends LightningElement {
             isInputReadOnly() {
                 return that._inputAriaReadOnly;
             },
+            shouldPreventInputDeletion() {
+                let isAutocompleteEnabled =
+                        that.autocomplete && that.autocomplete !== 'off',
+                    isStandardVariant = that.variant === VARIANT.STANDARD,
+                    isDefaultReadOnlyTypes =
+                        isStandardVariant || that.hasInputPill;
+                return isAutocompleteEnabled && isDefaultReadOnlyTypes;
+            },
             highlightOptionWithText(currentIndex, text) {
                 // This only supports a flat structure, groups are not supported
                 for (

package/src/lightning/baseCombobox/keyboard.js

@@ -102,6 +102,12 @@ function handleEscapeOrTabKey({ event, dropdownInterface }) {
     }
 }
 
+function handleDeletionKeys({ event, dropdownInterface }) {
+    if (dropdownInterface.shouldPreventInputDeletion()) {
+        event.preventDefault();
+    }
+}
+
 function handleTypedCharacters({ event, currentIndex, dropdownInterface }) {
     if (event.key && event.key.length > 1) {
         // not a printable character
@@ -146,6 +152,9 @@ const eventKeyToHandlerMap = {
     Esc: handleEscapeOrTabKey, // IE11/Edge specific
     Escape: handleEscapeOrTabKey,
     Tab: handleEscapeOrTabKey,
+
+    Backspace: handleDeletionKeys,
+    Delete: handleDeletionKeys,
 };
 
 export function handleKeyDownOnInput({
@@ -154,7 +163,6 @@ export function handleKeyDownOnInput({
     dropdownInterface,
 }) {
     const parameters = { event, currentIndex, dropdownInterface };
-
     if (eventKeyToHandlerMap[event.key]) {
         eventKeyToHandlerMap[event.key](parameters);
     } else {

package/src/lightning/datatable/datatable.html

@@ -14,6 +14,7 @@
         column-def={state.inlineEdit.columnDef}
         is-mass-edit-enabled={state.inlineEdit.massEditEnabled}
         number-of-selected-rows={state.inlineEdit.massEditSelectedRows}
+        resolved-type-attributes={state.inlineEdit.resolvedTypeAttributes}
         onieditfinished={handleInlineEditFinish}
         onmasscheckboxchange={handleMassCheckboxChange}
     ></lightning-primitive-datatable-iedit-panel>

package/src/lightning/datatable/datatable.js

@@ -965,14 +965,17 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get computedTableContainerClass() {
-        return classSet('slds-table_header-fixed_container')
+        return classSet({
+            'slds-table_header-fixed_container': !this.hideTableHeader,
+        })
             .add({ 'slds-scrollable_x': !this._isResizing })
             .toString();
     }
 
     get computedTableClass() {
+        const headerType = this.hideTableHeader ? 'hidden' : 'fixed';
         return classSet(
-            'slds-table slds-table_header-fixed slds-table_bordered slds-table_edit'
+            `slds-table slds-table_header-${headerType} slds-table_bordered slds-table_edit`
         )
             .add({ 'slds-table_resizable-cols': this.hasResizebleColumns })
             .add({ 'slds-tree slds-table_tree': hasTreeDataType(this.state) })

package/src/lightning/datatable/infiniteLoading.js

@@ -82,7 +82,10 @@ export function handlePrefetch(root, state) {
     if (
         !isInfiniteLoadingEnabled(state) ||
         isLoading(state) ||
-        !hasData(root)
+        !hasData(root) ||
+        (this.viewportRendering &&
+            this._renderManager &&
+            !this._renderManager.hasWrapperHeight())
     ) {
         // dont prefetch if already loading or data is not set yet
         return;

package/src/lightning/datatable/inlineEdit.js

@@ -11,7 +11,12 @@ import {
     getCellElementByIndexes,
     updateActiveCell,
 } from './keyboard';
-import { updateRowsAndCellIndexes, getRowByKey, getKeyField } from './rows';
+import {
+    updateRowsAndCellIndexes,
+    getRowByKey,
+    getKeyField,
+    getUserRowByCellKeys,
+} from './rows';
 import {
     getColumnIndexByColumnKey,
     getColumns,
@@ -26,6 +31,7 @@ import {
     getCurrentSelectionLength,
     getSelectedRowsKeys,
 } from './selector';
+import { isObjectLike } from './utils';
 
 export { getDirtyValue } from './inlineEdit-shared';
 
@@ -179,7 +185,7 @@ function getFirstEditableCell(dt) {
 function openInlineEdit(dt, target) {
     startPanelPositioning(dt, target.parentElement);
 
-    const { state, template } = dt;
+    const { state, template, privateTypes: types } = dt;
     const inlineEdit = state.inlineEdit;
 
     if (inlineEdit.isPanelVisible) {
@@ -198,6 +204,7 @@ function openInlineEdit(dt, target) {
     inlineEdit.isPanelVisible = true;
     inlineEdit.rowKeyValue = rowKeyValue;
     inlineEdit.colKeyValue = colKeyValue;
+
     inlineEdit.editedValue = getCellValue(state, rowKeyValue, colKeyValue);
     inlineEdit.massEditSelectedRows = getCurrentSelectionLength(state);
     inlineEdit.massEditEnabled =
@@ -207,6 +214,20 @@ function openInlineEdit(dt, target) {
     // pass the column definition
     const colIndex = getStateColumnIndex(state, colKeyValue);
     inlineEdit.columnDef = getColumns(state)[colIndex];
+    const typeAttributesFromColumnDef =
+        inlineEdit.columnDef && inlineEdit.columnDef.typeAttributes;
+    if (typeAttributesFromColumnDef) {
+        // when open the inline edit panel resolve the typeAttributes if it's available
+        // then assign the resolved values to inlineEdit.resolvedTypeAttributes
+        inlineEdit.resolvedTypeAttributes = resolveNestedTypeAttributes(
+            state,
+            rowKeyValue,
+            colKeyValue,
+            types,
+            typeAttributesFromColumnDef,
+            colIndex
+        );
+    }
 
     markSelectedCell(state, rowKeyValue, colKeyValue);
 
@@ -218,6 +239,116 @@ function openInlineEdit(dt, target) {
     }, 0);
 }
 
+/**
+ * Returns the resolved typeAttributes
+ *
+ * @param {Object} state - state of the datatable
+ * @param {String} rowKeyValue - row key
+ * @param {String} colKeyValue - column key
+ * @param {object} types - types
+ * @param {object} typeAttributesFromColumnDef - values of typeAttributes from column definition
+ * @param {number} stateColIndex - state column index
+ *
+ * @return {Object} the resolved typeAttributes.
+ */
+export function resolveNestedTypeAttributes(
+    state,
+    rowKeyValue,
+    colKeyValue,
+    types,
+    typeAttributesFromColumnDef,
+    stateColIndex
+) {
+    const rowData = getUserRowByCellKeys(state, rowKeyValue, colKeyValue);
+    const column = state.columns[stateColIndex];
+    const validTypeAttributes = types.getType(column.type).typeAttributes;
+    const resolvedTypeAttributes = {};
+
+    // Check if typeAttributesValues and typeAttributes are available
+    if (isObjectLike(typeAttributesFromColumnDef) && validTypeAttributes) {
+        // We only want to resolve typeAttributes based on the custom types configuration
+        // If the attribute is not in that configuration, the value of typeAttributesValues
+        // for that will be undefined. This behavior is consistent with view cell.
+
+        Object.keys(validTypeAttributes).forEach((key) => {
+            const typeAttributeName = validTypeAttributes[key];
+            const typeAttributesValue =
+                typeAttributesFromColumnDef[typeAttributeName];
+            if (typeAttributesValue) {
+                resolvedTypeAttributes[typeAttributeName] =
+                    resolveNestedTypeAttributesHelper(
+                        rowData,
+                        typeAttributesValue
+                    );
+            }
+        });
+        return resolvedTypeAttributes;
+    }
+    return typeAttributesFromColumnDef;
+}
+
+/**
+ * Helper function to recursively traverse and resolve the nested typeAttributesValues object.
+ * For example, resolve {
+ *     editTypeAttributes: {
+ *         value: {
+ *             fieldName: 'name'
+ *         }
+ *     }
+ * } to be {
+ *     editTypeAttributes: {
+ *         value: 'resolvedValue'
+ *     }
+ * }
+ */
+function resolveNestedTypeAttributesHelper(rowData, typeAttributesValue) {
+    let resolvedTypeAttributes = {};
+    if (typeAttributesValue !== undefined) {
+        if (isObjectLike(typeAttributesValue)) {
+            Object.keys(typeAttributesValue).forEach((key) => {
+                const value = typeAttributesValue[key];
+                if (value !== undefined) {
+                    // since resolveNestedTypeAttributes will be creating the top level attribute
+                    // and we  resolve values while creating the new object, the typeAttributesValue passed in
+                    // could be something like {fieldName: 'someField'}.
+                    // For example, if the typeAttributes is { targetName: {fieldName: 'name'}},
+                    // {fieldName: 'name'} will be the typeAttributesValue passed in to the function,
+                    // so we need to check if key is 'fieldName' or not and resolve it immediately.
+                    if (key === 'fieldName') {
+                        resolvedTypeAttributes = rowData[value];
+                    } else if (isObjectLike(value)) {
+                        // This is the case when typeAttributesValue is something like {label: {fieldName: 'name'}}.
+                        // It's an object but the value maps a field name
+                        if (value.fieldName) {
+                            resolvedTypeAttributes[key] =
+                                rowData[value.fieldName];
+                        } else {
+                            // Nested object case, need to recursively resolve it.
+                            // For example, { targetName: {value: {fieldName: 'name'}}}}.
+                            resolvedTypeAttributes[key] =
+                                resolveNestedTypeAttributesHelper(
+                                    rowData,
+                                    value
+                                );
+                        }
+                    } else {
+                        // Primitive value
+                        resolvedTypeAttributes[key] = value;
+                    }
+                }
+            });
+        } else {
+            // Primitive value.
+            // For example, if the typeAttributes is { count: 5},
+            // 5 will be the typeAttributesValue passed in to the function.
+            // nothing needs to be resolved, just return it.
+            return typeAttributesValue;
+        }
+    }
+
+    return resolvedTypeAttributes;
+}
+
 export function handleInlineEditFinish(event) {
     stopPanelPositioning(this);
 

package/src/lightning/datatable/keyboard.js

@@ -353,10 +353,8 @@ export const setFocusActiveCell = function (element, state, direction, info) {
                 cellElement.parentElement.focus();
                 cellElement.setMode(keyboardMode, info);
 
-                const scrollingParent = element.querySelector(
-                    '.slds-table_header-fixed_container'
-                );
                 const scrollableY = element.querySelector('.slds-scrollable_y');
+                const scrollingParent = scrollableY.parentElement;
                 const parentRect = scrollingParent.getBoundingClientRect();
                 const findMeRect = cellElement.getBoundingClientRect();
                 if (findMeRect.top < parentRect.top + TOP_MARGIN) {
@@ -436,10 +434,8 @@ export const setFocusActiveRow = function (element, state) {
         const row = getRowElementByIndexes(element, rowIndex);
         row.focus();
 
-        const scrollingParent = element.querySelector(
-            '.slds-table_header-fixed_container'
-        );
         const scrollableY = element.querySelector('.slds-scrollable_y');
+        const scrollingParent = scrollableY.parentElement;
         const parentRect = scrollingParent.getBoundingClientRect();
         const findMeRect = row.getBoundingClientRect();
         if (findMeRect.top < parentRect.top + TOP_MARGIN) {

package/src/lightning/datatable/selector.js

@@ -259,11 +259,30 @@ export function getHideSelectAllCheckbox(state) {
     return getMaxRowSelection(state) === 1;
 }
 
+/**
+ * sets maxRowSelection to provided value,
+ * only keeping up to maxRowSelection values selected
+ * Use input type checkbox if maxRowSelection > 1
+ * and input type is radio if maxRowSelection = 1.
+ * Invalid values are set to default and log an error
+ * @param {Object} state - the datatable state.
+ * @param {Number | String} - value to set for maxRowSelection
+ */
 export function setMaxRowSelection(state, value) {
+    const previousSelectedRowsKeys = getSelectedRowsKeys(state);
     markAllRowsDeselected(state);
     if (isNonNegativeInteger(value)) {
         const previousMaxRowSelection = getMaxRowSelection(state);
         state.maxRowSelection = Number(value);
+        const newMaxRowSelection = getMaxRowSelection(state);
+        // reselect up to maxRowSelection rows
+        const numberOfRows = Math.min(
+            previousSelectedRowsKeys.length,
+            newMaxRowSelection
+        );
+        for (let i = 0; i < numberOfRows; i++) {
+            markRowSelected(state, previousSelectedRowsKeys[i]);
+        }
         if (
             inputTypeNeedsToChange(
                 previousMaxRowSelection,
@@ -305,11 +324,8 @@ export function updateRowSelectionInputType(state) {
     const type = getRowSelectionInputType(state);
     const rows = getRows(state);
 
-    resetSelectedRowsKeys(state);
     rows.forEach((row) => {
         row.inputType = type;
-        row.isSelected = false;
-        row.ariaSelected = false;
         row.isDisabled = isDisabledRow(state, row.key);
     });
 }

package/src/lightning/focusTrap/focusTrap.js

@@ -2,8 +2,6 @@ import { api, LightningElement } from 'lwc';
 import { findAllTabbableElements } from 'lightning/focusUtils';
 
 export default class FocusTrap extends LightningElement {
-    static delegatesFocus = true;
-
     _startNode;
     _endNode;
 

package/src/lightning/focusUtils/focus.js

@@ -1,3 +1,6 @@
+import { BUBBLE_PREFIX } from 'lightning/tooltipLibrary';
+
+const IGNORE_AUTOFOCUS = 'ignore-autofocus';
 /**
  *
  * Returns all tabbable elements within a containing element. Tabbable elements are:
@@ -196,23 +199,71 @@ function isTabbable({ element, rootContainer }) {
     );
 }
 
+/**
+ * Test if element has role='tooltip'
+ * @param {Element} Element that has focus.
+ * @returns {boolean} element has role='tooltip'
+ */
+const elemHasRoleTooltip = (elem) => {
+    return elem.getAttribute('role') === 'tooltip';
+};
+
+/**
+ * Test if the element has class='ignore-autofocus'
+ * @param {Element} Element that has focus.
+ * @returns {boolean} element has class='ignore-autofocus'
+ */
+const elemHasIgnoreAutofocus = (elem) => {
+    return elem.classList.contains(IGNORE_AUTOFOCUS);
+};
+
+/**
+ * Test if element has unique properties of <lightning-helptext>
+ * @param {Element} Element that needs to be tested
+ * @returns {boolean} element matches criteria of <lightning-helptext>
+ */
+const elemIsHelpTextComponent = (elem) => {
+    // properties of <lightning-helptext>
+    const tagNameIsButton = elem.tagName.toLowerCase() === 'button';
+    const ariaDescValue = elem.getAttribute('aria-describedby');
+    // ie11 doesn't support .startsWith()
+    const ariaValueMatchesPrefix = ariaDescValue
+        ? String(ariaDescValue).indexOf(BUBBLE_PREFIX) === 0
+        : false;
+    return tagNameIsButton && ariaValueMatchesPrefix;
+};
+
+/**
+ * Verify element doesn't have tooltip properties by running tooltip tests
+ * Primary use in autofocus feature of LighningModal
+ * @param {Element} Element to verify is not a tooltip
+ * @returns {boolean} element is not a tooltip
+ */
+const elemIsNotTooltip = (elem) => {
+    if (!elem) {
+        return false;
+    }
+    // evaluate whether element has properties of a tooltip
+    // if any tooltip test is true, the element is a tooltip
+    const elemIsTooltip = [
+        // array of tooltip tests
+        elemHasRoleTooltip(elem),
+        elemIsHelpTextComponent(elem),
+        elemHasIgnoreAutofocus(elem),
+    ].some((val) => val === true);
+    return !elemIsTooltip;
+};
+
 /**
  *
- * Returns tabbable elements filtered to remove any tooltips
- * @param {Array} elemsArray The element references array to filter of tooltip elements.
- * @returns {Array} Tabbable elements.
+ * Returns tabbable elements, filtered to remove any tooltips
+ * @param {Array} elemsArray Array of elements to filter tooltips from
+ * @returns {Array} Filtered tabbable elements with no tooltips
  */
 export function filterTooltips(elemsArray) {
-    // reference SLDS tooltip patterns && global focus in focusFirstElement
-    // TODO discovery if there are common CSS classes for tooltips as Salesforce
+    // reference SLDS tooltip patterns && global focus in
+    // modalBase focusFirstElement() -> used to autofocus first element
     // https://www.lightningdesignsystem.com/accessibility/patterns/tooltip/
-    const elemIsNotTooltip = (elem) => {
-        if (!elem) {
-            return false;
-        }
-        const elemRole = elem.getAttribute('role');
-        return elemRole !== 'tooltip';
-    };
     return elemsArray && Array.isArray(elemsArray) && elemsArray.length > 0
         ? elemsArray.filter(elemIsNotTooltip)
         : [];

package/src/lightning/formattedRichText/richTextConfig.js

@@ -158,6 +158,7 @@ const uriAllowList = Object.freeze([
     'cid',
     'xmpp',
     'ciscotel',
+    'navision',
 ]);
 
 const uriAllowListString = uriAllowList.join('|');

package/src/lightning/input/input.html

@@ -8,7 +8,7 @@
                 </template>
                 {label}
             </label>
-            <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+            <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
         </template>
         <div class={computedFormElementClass}>
             <input type={_internalType}
@@ -91,7 +91,7 @@
                 </template>
                 <span class={computedLabelClass}>{label}</span>
             </label>
-            <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+            <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
         </template>
         <div class={computedFormElementClass}>
                 <span class={computedCheckboxClass}>
@@ -118,7 +118,7 @@
                             <span class="slds-checkbox_faux"></span>
                             <span class={computedLabelClass}>{label}</span>
                         </label>
-                        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+                        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
                      </template>
                 </span>
             </div>
@@ -241,7 +241,7 @@
                     </div>
                 </div>
                 <template if:false={hasExternalLabel}>
-                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
                 </template>
             </div>
         </div>

package/src/lightning/input/input.js

@@ -8,11 +8,13 @@ import labelClearInput from '@salesforce/label/LightningControl.clear';
 import labelLoadingIndicator from '@salesforce/label/LightningControl.loading';
 import labelNumberIncrementCounter from '@salesforce/label/LightningInputNumber.incrementCounter';
 import labelNumberDecrementCounter from '@salesforce/label/LightningInputNumber.decrementCounter';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
+
 import userTimeZone from '@salesforce/i18n/timeZone';
 import formFactor from '@salesforce/client/formFactor';
 
 import { api, LightningElement, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     classListMutation,
@@ -69,6 +71,7 @@ const i18n = {
     required: labelRequired,
     clear: labelClearInput,
     loading: labelLoadingIndicator,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 const ARIA_CONTROLS = 'aria-controls';
@@ -1664,6 +1667,10 @@ export default class LightningInput extends LightningElement {
         );
     }
 
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
+
     handleFileClick() {
         this._setInputValue(null);
         this._updateValueAndValidityAttribute(null);

package/src/lightning/positionLibrary/__docs__/positionLibrary.md

@@ -0,0 +1,3 @@
+Position Library playground can be used to test positon library for `helptext`, `button-menu`, `combobox` and `datepicker`.
+
+To use the playground, go to `ui-lightning-stubs/src/main/modules/demo/app/app.html` and add the tag `<positionLibrary-playground></positionLibrary-playground>` in the template.

package/src/lightning/positionLibrary/__examples__/components/components.html

@@ -0,0 +1,41 @@
+<template>
+    <template if:true={isHelpText}>
+        <lightning-helptext
+            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel orci porta non pulvinar neque."
+        ></lightning-helptext>
+    </template>
+
+    <template if:true={isButtonMenu}>
+        <lightning-button-menu alternative-text="Show menu">
+            <lightning-menu-item
+                value="MenuItemOne"
+                label="Menu Item One"
+            ></lightning-menu-item>
+            <lightning-menu-item
+                value="MenuItemTwo"
+                label="Menu Item Two"
+            ></lightning-menu-item>
+            <lightning-menu-item
+                value="MenuItemThree"
+                label="Menu Item Three"
+            ></lightning-menu-item>
+            <lightning-menu-item
+                value="MenuItemFour"
+                label="Menu Item Four"
+            ></lightning-menu-item>
+        </lightning-button-menu>
+    </template>
+
+    <template if:true={isComboBox}>
+        <lightning-combobox
+            name="progress"
+            label="Status"
+            placeholder="Select Progress"
+            options={comboBoxOptions}
+        ></lightning-combobox>
+    </template>
+
+    <template if:true={isDatePicker}>
+        <lightning-datepicker label="Select a date"></lightning-datepicker>
+    </template>
+</template>