@carbon/ibm-products-web-components 0.35.0 → 0.36.0

package/es-custom/components/tearsheet/tearsheet.js

@@ -1,354 +1,267 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { __decorate } from 'tslib';
-import { LitElement, html } from 'lit';
-import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
-import { carbonPrefix, prefix } from '../../globals/settings.js';
-import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
-import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
-import styles from './tearsheet.scss.js';
-import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
-import pconsole from '../../globals/internal/pconsole.js';
-import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { carbonPrefix, prefix } from "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import tearsheet_default$1 from "./tearsheet.scss.js";
+import pconsole_default from "../../globals/internal/pconsole.js";
+import { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH } from "./defs.js";
+import { LitElement, html } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import HostListener from "@carbon/web-components/es/globals/decorators/host-listener.js";
+import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
+import { selectorTabbable } from "@carbon/web-components/es/globals/settings.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import '@carbon/web-components/es-custom/components/button/index.js';
-import '@carbon/web-components/es-custom/components/layer/index.js';
 import '@carbon/web-components/es-custom/components/button/button-set-base.js';
+import '@carbon/web-components/es-custom/components/layer/index.js';
 import '@carbon/web-components/es-custom/components/modal/index.js';
-import { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH } from './defs.js';
 
+//#region src/components/tearsheet/tearsheet.ts
 /**
- * @license
- *
- * Copyright IBM Corp. 2023, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var CDSTearsheet_1;
+* @license
+*
+* Copyright IBM Corp. 2023, 2024
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var _CDSTearsheet;
 const maxStackDepth = 3;
 const blockClass = `${prefix}--tearsheet`;
 const blockClassModalHeader = `${carbonPrefix}--modal-header`;
 const blockClassActionSet = `${prefix}--action-set`;
 /**
- * Tearsheet.
- *
- * @element c4p-tearsheet
- * @csspart dialog The dialog.
- * @fires c4p-tearsheet-beingclosed
- *   The custom event fired before this tearsheet is being closed upon a user gesture.
- *   Cancellation of this event stops the user-initiated action of closing this tearsheet.
- * @fires c4p-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.
- */
-let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * The element that had focus before this tearsheet gets open.
-         */
-        this._launcher = null;
-        this._actionsCount = 0;
-        this._hasHeaderActions = false;
-        this._hasLabel = false;
-        this._hasSlug = false;
-        this._hasDecorator = false;
-        this._hasAILabel = false;
-        this._hasTitle = false;
-        this._hasDescription = false;
-        this._hasInfluencerLeft = false;
-        this._hasInfluencerRight = false;
-        this._isOpen = false;
-        this._hasHeaderNavigation = false;
-        /**
-         * Handles `click` event on this element.
-         *
-         * @param event The event.
-         */
-        this._handleClick = (event) => {
-            if (event.composedPath().indexOf(this.shadowRoot) < 0 &&
-                !this.preventCloseOnClickOutside) {
-                this._handleUserInitiatedClose(event.target);
-            }
-        };
-        this._handleKeydown = ({ key, target }) => {
-            if ((key === 'Esc' || key === 'Escape') && this._topOfStack()) {
-                this._handleUserInitiatedClose(target);
-            }
-        };
-        /**
-         * Handle the keydown event.
-         * Trap the focus inside the side-panel by tracking keydown.key == `Tab`
-         *
-         * @param {KeyboardEvent} event The keyboard event object.
-         */
-        this._handleHostKeydown = (event) => {
-            var _a;
-            if (event.key === 'Tab') {
-                const { first: _firstElement, last: _lastElement } = this.getFocusable();
-                if (event.shiftKey &&
-                    (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === _firstElement ||
-                        document.activeElement === _firstElement)) {
-                    event.preventDefault();
-                    _lastElement === null || _lastElement === void 0 ? void 0 : _lastElement.focus();
-                }
-                else if (!event.shiftKey && document.activeElement === _lastElement) {
-                    event.preventDefault();
-                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
-                }
-            }
-        };
-        /**
-         * Optional aria label for the tearsheet
-         */
-        this.ariaLabel = '';
-        /**
-         * Sets the close button icon description
-         */
-        this.closeIconDescription = 'Close';
-        /**
-         * Enable a close icon ('x') in the header area of the tearsheet. By default,
-         * (when this prop is omitted, or undefined or null) a tearsheet does not
-         * display a close icon if there are navigation actions ("transactional
-         * tearsheet") and displays one if there are no navigation actions ("passive
-         * tearsheet"), and that behavior can be overridden if required by setting
-         * this prop to either true or false.
-         */
-        this.hasCloseIcon = false;
-        /**
-         * The placement of the influencer section, 'left' or 'right'.
-         */
-        this.influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;
-        /**
-         * The width of the influencer section, 'narrow' or 'wide'.
-         */
-        this.influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;
-        /**
-         * `true` if the tearsheet should be open.
-         */
-        this.open = false;
-        /**
-         * Prevent closing on click outside of tearsheet
-         */
-        this.preventCloseOnClickOutside = false;
-        /**
-         * The width of the influencer section, 'narrow' or 'wide'.
-         */
-        this.width = TEARSHEET_WIDTH.NARROW;
-        this._checkUpdateActionSizes = () => {
-            if (this._actions) {
-                for (let i = 0; i < this._actions.length; i++) {
-                    this._actions[i].setAttribute('size', this.width === 'wide' ? '2xl' : 'xl');
-                }
-            }
-        };
-        this._maxActions = 4;
-        // Data structure to communicate the state of tearsheet stacking
-        // (i.e. when more than one tearsheet is open). Each tearsheet supplies a
-        // handler to be called whenever the stacking of the tearsheets changes, which
-        // happens when a tearsheet opens or closes. The 'open' array contains one
-        // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.
-        // The 'all' array contains all the handlers for open and closed tearsheets.
-        this._stackDepth = -1;
-        this._stackPosition = -1;
-        this._topOfStack = () => {
-            return this._stackDepth === this._stackPosition;
-        };
-        this._notifyStack = () => {
-            CDSTearsheet_1._stack.all.forEach((handler) => {
-                handler(Math.min(CDSTearsheet_1._stack.open.length, maxStackDepth), CDSTearsheet_1._stack.open.indexOf(handler) + 1);
-            });
-        };
-        this._handleStackChange = (newDepth, newPosition) => {
-            this._stackDepth = newDepth;
-            this._stackPosition = newPosition;
-            if (this._stackDepth > 1 && this._stackPosition > 0) {
-                this.setAttribute('stack-position', `${newPosition}`);
-                this.setAttribute('stack-depth', `${this._stackDepth}`);
-            }
-            else {
-                this.removeAttribute('stack-position');
-                this.removeAttribute('stack-depth');
-            }
-        };
-        this._updateStack = () => {
-            if (this.open) {
-                CDSTearsheet_1._stack.open.push(this._handleStackChange);
-            }
-            else {
-                const indexOpen = CDSTearsheet_1._stack.open.indexOf(this._handleStackChange);
-                if (indexOpen >= 0) {
-                    CDSTearsheet_1._stack.open.splice(indexOpen, 1);
-                }
-            }
-            this._notifyStack();
-        };
-        this.actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];
-        this._checkSetOpen = () => {
-            const { _tearsheet: tearsheet } = this;
-            if (tearsheet && this._isOpen) {
-                // wait until the tearsheet has transitioned off the screen to remove
-                tearsheet.addEventListener('transitionend', () => {
-                    this._isOpen = false;
-                });
-            }
-            else {
-                // allow the html to render before animating in the tearsheet
-                window.requestAnimationFrame(() => {
-                    this._isOpen = this.open;
-                });
-            }
-        };
-    }
-    /**
-     * Get focusable elements.
-     *
-     * Querying all tabbable items.
-     *
-     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
-     */
-    getFocusable() {
-        var _a, _b;
-        const elements = [];
-        // Add slug elements if present
-        if (this._hasSlug) {
-            elements.push(this.querySelectorAll(`${carbonPrefix}-slug`));
-        }
-        // Add close button if not hidden
-        if (this.hasCloseIcon) {
-            const closeButtons = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${carbonPrefix}-modal-close-button`);
-            if (closeButtons) {
-                elements.push(closeButtons);
-            }
-        }
-        // Add tabbable elements inside light DOM
-        const _tabbableItems = this.querySelectorAll(selectorTabbable);
-        if (_tabbableItems) {
-            elements.push(_tabbableItems);
-        }
-        // Flatten NodeList arrays and filter for focusable items
-        const all = (_b = elements === null || elements === void 0 ? void 0 : elements.flatMap((nodeList) => Array.from(nodeList))) === null || _b === void 0 ? void 0 : _b.filter((el) => typeof (el === null || el === void 0 ? void 0 : el.focus) === 'function');
-        return {
-            first: all[0],
-            last: all[all.length - 1],
-            all,
-        };
-    }
-    _checkSetHasSlot(e) {
-        var _a, _b;
-        const t = e.target;
-        const dataPostfix = t.getAttribute('data-postfix');
-        const postfix = dataPostfix ? `-${dataPostfix}` : '';
-        // snake `ab-cd-ef` to _has camel case _hasAbCdEf
-        const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) => c[1].toUpperCase());
-        this[hasName] = ((_b = (_a = t === null || t === void 0 ? void 0 : t.assignedElements()) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
-    }
-    /**
-     * Handles `click` event on the modal container.
-     *
-     * @param event The event.
-     */
-    _handleClickContainer(event) {
-        if (event.target.matches(this.constructor.selectorCloseButton)) {
-            this._handleUserInitiatedClose(event.target);
-        }
-    }
-    /**
-     * Handles user-initiated close request of this tearsheet.
-     *
-     * @param triggeredBy The element that triggered this close request.
-     */
-    _handleUserInitiatedClose(triggeredBy) {
-        if (this.open) {
-            const init = {
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-                detail: {
-                    triggeredBy,
-                },
-            };
-            if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
-                this.open = false;
-                this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
-            }
-        }
-    }
-    _handleSlugChange(e) {
-        const childItems = e.target.assignedElements();
-        this._hasSlug = childItems.length > 0;
-        if (this._hasSlug) {
-            childItems[0].setAttribute('size', 'sm');
-            this.setAttribute('slug', '');
-        }
-        else {
-            this.removeAttribute('slug');
-        }
-    }
-    _handleDecoratorChange(e) {
-        this._hasAILabel = false;
-        const childItems = e.target.assignedElements();
-        this._hasDecorator = childItems.length > 0;
-        if (this._hasDecorator) {
-            for (const item of childItems) {
-                if (item.tagName.toLowerCase() === 'cds-custom-ai-label') {
-                    this._hasAILabel = true;
-                    break;
-                }
-            }
-        }
-        if (this._hasAILabel || this._hasDecorator) {
-            childItems[0].setAttribute('size', 'sm');
-            this.setAttribute(this._hasAILabel ? 'ai-label' : 'decorator', '');
-            this.removeAttribute(this._hasAILabel ? 'decorator' : 'ai-label');
-        }
-        else {
-            this.removeAttribute('decorator');
-            this.removeAttribute('ai-label');
-        }
-    }
-    _handleActionsChange(e) {
-        var _a;
-        const target = e.target;
-        const actions = target === null || target === void 0 ? void 0 : target.assignedElements();
-        const actionsCount = (_a = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _a !== void 0 ? _a : 0;
-        if (actionsCount > this._maxActions) {
-            this._actionsCount = this._maxActions;
-            console.error(`Too many tearsheet actions, max ${this._maxActions}.`);
-        }
-        else {
-            this._actionsCount = actionsCount;
-        }
-        for (let i = 0; i < (actions === null || actions === void 0 ? void 0 : actions.length); i++) {
-            if (i + 1 > this._maxActions) {
-                // hide excessive tearsheet actions
-                actions[i].setAttribute('hidden', 'true');
-                actions[i].setAttribute(`data-actions-limit-${this._maxActions}-exceeded`, `${actions.length}`);
-            }
-            else {
-                actions[i].classList.add(`${blockClassActionSet}__action-button`);
-            }
-        }
-        this._checkUpdateActionSizes();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        CDSTearsheet_1._stack.all.push(this._handleStackChange);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        const indexAll = CDSTearsheet_1._stack.all.indexOf(this._handleStackChange);
-        CDSTearsheet_1._stack.all.splice(indexAll, 1);
-        const indexOpen = CDSTearsheet_1._stack.all.indexOf(this._handleStackChange);
-        CDSTearsheet_1._stack.open.splice(indexOpen, 1);
-    }
-    render() {
-        const { closeIconDescription, influencerPlacement, influencerWidth, open, width, } = this;
-        const actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];
-        const headerFieldsTemplate = html `<div
+* Tearsheet.
+*
+* @element c4p-tearsheet
+* @csspart dialog The dialog.
+* @fires c4p-tearsheet-beingclosed
+*   The custom event fired before this tearsheet is being closed upon a user gesture.
+*   Cancellation of this event stops the user-initiated action of closing this tearsheet.
+* @fires c4p-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.
+*/
+let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
+	static {
+		_CDSTearsheet = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this._launcher = null;
+		this._actionsCount = 0;
+		this._hasHeaderActions = false;
+		this._hasLabel = false;
+		this._hasSlug = false;
+		this._hasDecorator = false;
+		this._hasAILabel = false;
+		this._hasTitle = false;
+		this._hasDescription = false;
+		this._hasInfluencerLeft = false;
+		this._hasInfluencerRight = false;
+		this._isOpen = false;
+		this._hasHeaderNavigation = false;
+		this._handleClick = (event) => {
+			if (event.composedPath().indexOf(this.shadowRoot) < 0 && !this.preventCloseOnClickOutside) this._handleUserInitiatedClose(event.target);
+		};
+		this._handleKeydown = ({ key, target }) => {
+			if ((key === "Esc" || key === "Escape") && this._topOfStack()) this._handleUserInitiatedClose(target);
+		};
+		this._handleHostKeydown = (event) => {
+			if (event.key === "Tab") {
+				const { first: _firstElement, last: _lastElement } = this.getFocusable();
+				if (event.shiftKey && (this.shadowRoot?.activeElement === _firstElement || document.activeElement === _firstElement)) {
+					event.preventDefault();
+					_lastElement?.focus();
+				} else if (!event.shiftKey && document.activeElement === _lastElement) {
+					event.preventDefault();
+					_firstElement?.focus();
+				}
+			}
+		};
+		this.ariaLabel = "";
+		this.closeIconDescription = "Close";
+		this.hasCloseIcon = false;
+		this.influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;
+		this.influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;
+		this.open = false;
+		this.preventCloseOnClickOutside = false;
+		this.width = TEARSHEET_WIDTH.NARROW;
+		this._checkUpdateActionSizes = () => {
+			if (this._actions) for (let i = 0; i < this._actions.length; i++) this._actions[i].setAttribute("size", this.width === "wide" ? "2xl" : "xl");
+		};
+		this._maxActions = 4;
+		this._stackDepth = -1;
+		this._stackPosition = -1;
+		this._topOfStack = () => {
+			return this._stackDepth === this._stackPosition;
+		};
+		this._notifyStack = () => {
+			_CDSTearsheet._stack.all.forEach((handler) => {
+				handler(Math.min(_CDSTearsheet._stack.open.length, maxStackDepth), _CDSTearsheet._stack.open.indexOf(handler) + 1);
+			});
+		};
+		this._handleStackChange = (newDepth, newPosition) => {
+			this._stackDepth = newDepth;
+			this._stackPosition = newPosition;
+			if (this._stackDepth > 1 && this._stackPosition > 0) {
+				this.setAttribute("stack-position", `${newPosition}`);
+				this.setAttribute("stack-depth", `${this._stackDepth}`);
+			} else {
+				this.removeAttribute("stack-position");
+				this.removeAttribute("stack-depth");
+			}
+		};
+		this._updateStack = () => {
+			if (this.open) _CDSTearsheet._stack.open.push(this._handleStackChange);
+			else {
+				const indexOpen = _CDSTearsheet._stack.open.indexOf(this._handleStackChange);
+				if (indexOpen >= 0) _CDSTearsheet._stack.open.splice(indexOpen, 1);
+			}
+			this._notifyStack();
+		};
+		this.actionsMultiple = [
+			"",
+			"single",
+			"double",
+			"triple"
+		][this._actionsCount];
+		this._checkSetOpen = () => {
+			const { _tearsheet: tearsheet } = this;
+			if (tearsheet && this._isOpen) tearsheet.addEventListener("transitionend", () => {
+				this._isOpen = false;
+			});
+			else window.requestAnimationFrame(() => {
+				this._isOpen = this.open;
+			});
+		};
+	}
+	/**
+	* Get focusable elements.
+	*
+	* Querying all tabbable items.
+	*
+	* @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
+	*/
+	getFocusable() {
+		const elements = [];
+		if (this._hasSlug) elements.push(this.querySelectorAll(`${carbonPrefix}-slug`));
+		if (this.hasCloseIcon) {
+			const closeButtons = this.shadowRoot?.querySelectorAll(`${carbonPrefix}-modal-close-button`);
+			if (closeButtons) elements.push(closeButtons);
+		}
+		const _tabbableItems = this.querySelectorAll(selectorTabbable);
+		if (_tabbableItems) elements.push(_tabbableItems);
+		const all = elements?.flatMap((nodeList) => Array.from(nodeList))?.filter((el) => typeof el?.focus === "function");
+		return {
+			first: all[0],
+			last: all[all.length - 1],
+			all
+		};
+	}
+	_checkSetHasSlot(e) {
+		const t = e.target;
+		const dataPostfix = t.getAttribute("data-postfix");
+		const postfix = dataPostfix ? `-${dataPostfix}` : "";
+		const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) => c[1].toUpperCase());
+		this[hasName] = (t?.assignedElements()?.length ?? 0) > 0;
+	}
+	/**
+	* Handles `click` event on the modal container.
+	*
+	* @param event The event.
+	*/
+	_handleClickContainer(event) {
+		if (event.target.matches(this.constructor.selectorCloseButton)) this._handleUserInitiatedClose(event.target);
+	}
+	/**
+	* Handles user-initiated close request of this tearsheet.
+	*
+	* @param triggeredBy The element that triggered this close request.
+	*/
+	_handleUserInitiatedClose(triggeredBy) {
+		if (this.open) {
+			const init = {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				detail: { triggeredBy }
+			};
+			if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
+				this.open = false;
+				this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
+			}
+		}
+	}
+	_handleSlugChange(e) {
+		const childItems = e.target.assignedElements();
+		this._hasSlug = childItems.length > 0;
+		if (this._hasSlug) {
+			childItems[0].setAttribute("size", "sm");
+			this.setAttribute("slug", "");
+		} else this.removeAttribute("slug");
+	}
+	_handleDecoratorChange(e) {
+		this._hasAILabel = false;
+		const childItems = e.target.assignedElements();
+		this._hasDecorator = childItems.length > 0;
+		if (this._hasDecorator) {
+			for (const item of childItems) if (item.tagName.toLowerCase() === "cds-custom-ai-label") {
+				this._hasAILabel = true;
+				break;
+			}
+		}
+		if (this._hasAILabel || this._hasDecorator) {
+			childItems[0].setAttribute("size", "sm");
+			this.setAttribute(this._hasAILabel ? "ai-label" : "decorator", "");
+			this.removeAttribute(this._hasAILabel ? "decorator" : "ai-label");
+		} else {
+			this.removeAttribute("decorator");
+			this.removeAttribute("ai-label");
+		}
+	}
+	_handleActionsChange(e) {
+		const actions = e.target?.assignedElements();
+		const actionsCount = actions?.length ?? 0;
+		if (actionsCount > this._maxActions) {
+			this._actionsCount = this._maxActions;
+			console.error(`Too many tearsheet actions, max ${this._maxActions}.`);
+		} else this._actionsCount = actionsCount;
+		for (let i = 0; i < actions?.length; i++) if (i + 1 > this._maxActions) {
+			actions[i].setAttribute("hidden", "true");
+			actions[i].setAttribute(`data-actions-limit-${this._maxActions}-exceeded`, `${actions.length}`);
+		} else actions[i].classList.add(`${blockClassActionSet}__action-button`);
+		this._checkUpdateActionSizes();
+	}
+	static {
+		this._stack = {
+			open: [],
+			all: []
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		_CDSTearsheet._stack.all.push(this._handleStackChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		const indexAll = _CDSTearsheet._stack.all.indexOf(this._handleStackChange);
+		_CDSTearsheet._stack.all.splice(indexAll, 1);
+		const indexOpen = _CDSTearsheet._stack.all.indexOf(this._handleStackChange);
+		_CDSTearsheet._stack.open.splice(indexOpen, 1);
+	}
+	render() {
+		const { closeIconDescription, influencerPlacement, influencerWidth, open, width } = this;
+		const actionsMultiple = [
+			"",
+			"single",
+			"double",
+			"triple"
+		][this._actionsCount];
+		const headerFieldsTemplate = html`<div
       class=${`${blockClass}__header-fields`}
     >
       <h2 class=${`${blockClassModalHeader}__label`} ?hidden=${!this._hasLabel}>
@@ -367,31 +280,29 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
         <slot name="description" @slotchange=${this._checkSetHasSlot}></slot>
       </div>
     </div>`;
-        const headerActionsTemplate = html ` <div
+		const headerActionsTemplate = html` <div
       class=${`${blockClass}__header-actions`}
-      ?hidden=${!this._hasHeaderActions || this.width === 'narrow'}
+      ?hidden=${!this._hasHeaderActions || this.width === "narrow"}
     >
       <slot name="header-actions" @slotchange=${this._checkSetHasSlot}></slot>
     </div>`;
-        const headerTemplate = html ` <cds-custom-modal-header
+		const headerTemplate = html` <cds-custom-modal-header
       class=${`${blockClass}__header`}
-      ?has-close-icon=${this.hasCloseIcon || (this === null || this === void 0 ? void 0 : this._actionsCount) === 0}
-      ?has-navigation=${this._hasHeaderNavigation && this.width === 'wide'}
-      ?has-header-actions=${this._hasHeaderActions && this.width === 'wide'}
-      ?has-actions=${(this === null || this === void 0 ? void 0 : this._actionsCount) > 0}
-      ?has-slug=${this === null || this === void 0 ? void 0 : this._hasSlug}
-      ?has-decorator=${this === null || this === void 0 ? void 0 : this._hasDecorator}
+      ?has-close-icon=${this.hasCloseIcon || this?._actionsCount === 0}
+      ?has-navigation=${this._hasHeaderNavigation && this.width === "wide"}
+      ?has-header-actions=${this._hasHeaderActions && this.width === "wide"}
+      ?has-actions=${this?._actionsCount > 0}
+      ?has-slug=${this?._hasSlug}
+      ?has-decorator=${this?._hasDecorator}
       width=${width}
     >
-      ${this.width === TEARSHEET_WIDTH.WIDE
-            ? html `<cds-custom-layer level="1" class=${`${blockClass}__header-content`}
+      ${this.width === TEARSHEET_WIDTH.WIDE ? html`<cds-custom-layer level="1" class=${`${blockClass}__header-content`}
             >${headerFieldsTemplate}${headerActionsTemplate}</cds-custom-layer
-          >`
-            : html `<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}
+          >` : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}
 
       <div
         class=${`${blockClass}__header-navigation`}
-        ?hidden=${!this._hasHeaderNavigation || this.width === 'narrow'}
+        ?hidden=${!this._hasHeaderNavigation || this.width === "narrow"}
       >
         <slot
           name="header-navigation"
@@ -404,15 +315,12 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
         @slotchange=${this._handleDecoratorChange}
       ></slot>
       <slot name="slug" @slotchange=${this._handleSlugChange}></slot>
-      ${this.hasCloseIcon || (this === null || this === void 0 ? void 0 : this._actionsCount) === 0
-            ? html `<cds-custom-modal-close-button
+      ${this.hasCloseIcon || this?._actionsCount === 0 ? html`<cds-custom-modal-close-button
             close-button-label=${closeIconDescription}
             @click=${this._handleUserInitiatedClose}
-          ></cds-custom-modal-close-button>`
-            : ''}
+          ></cds-custom-modal-close-button>` : ""}
     </cds-custom-modal-header>`;
-        if (this._stackPosition <= this._stackDepth) {
-            return html `
+		if (this._stackPosition <= this._stackDepth) return html`
         <div
           aria-label=${this.ariaLabel}
           class=${`${blockClass}__container ${carbonPrefix}--modal-container ${carbonPrefix}--modal-container--sm`}
@@ -432,20 +340,17 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
           <!-- Body  -->
           <cds-custom-modal-body class=${`${blockClass}__body`} width=${width}>
             <!-- Influencer when on left -->
-            ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT
-                ? html `<div
+            ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT ? html`<div
                   class=${`${blockClass}__influencer`}
-                  ?wide=${influencerWidth === 'wide'}
-                  ?hidden=${!this._hasInfluencerLeft ||
-                    this.width === TEARSHEET_WIDTH.NARROW}
+                  ?wide=${influencerWidth === "wide"}
+                  ?hidden=${!this._hasInfluencerLeft || this.width === TEARSHEET_WIDTH.NARROW}
                 >
                   <slot
                     name="influencer"
                     data-postfix="left"
                     @slotchange=${this._checkSetHasSlot}
                   ></slot>
-                </div>`
-                : ''}
+                </div>` : ""}
 
             <div class=${`${blockClass}__right`}>
               <div class=${`${blockClass}__main`}>
@@ -458,26 +363,23 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
                 </div>
 
                 <!-- Influencer when on right -->
-                ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT
-                ? html `<div
+                ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT ? html`<div
                       class=${`${blockClass}__influencer`}
                       ?wide=${influencerWidth}
-                      ?hidden=${!this._hasInfluencerRight ||
-                    this.width === TEARSHEET_WIDTH.NARROW}
+                      ?hidden=${!this._hasInfluencerRight || this.width === TEARSHEET_WIDTH.NARROW}
                     >
                       <slot
                         name="influencer"
                         data-postfix="right"
                         @slotchange=${this._checkSetHasSlot}
                       ></slot>
-                    </div>`
-                : ''}
+                    </div>` : ""}
               </div>
               <!-- Action buttons -->
               <cds-custom-button-set-base
                 class=${`${blockClass}__buttons ${blockClass}__button-container`}
                 actions-multiple=${actionsMultiple}
-                ?tearsheet-wide=${width === 'wide'}
+                ?tearsheet-wide=${width === "wide"}
                 ?hidden=${this._actionsCount === 0}
               >
                 <slot
@@ -489,200 +391,144 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
           </cds-custom-modal-body>
         </div>
       `;
-        }
-        else {
-            pconsole.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
-            return null;
-        }
-    }
-    async updated(changedProperties) {
-        var _a, _b;
-        if (changedProperties.has('width')) {
-            this._checkUpdateActionSizes();
-        }
-        if (process.env.NODE_ENV === 'development' &&
-            (changedProperties.has('width') ||
-                changedProperties.has('_hasHeaderNavigation') ||
-                changedProperties.has('_hasInfluencerLeft') ||
-                changedProperties.has('_hasInfluencerRight') ||
-                changedProperties.has('_hasHeaderActions'))) {
-            if (this.width === 'narrow') {
-                if (this._hasHeaderNavigation) {
-                    console.error(`Header navigation is not permitted in narrow Tearsheet.`);
-                }
-                if (this._hasInfluencerLeft || this._hasInfluencerRight) {
-                    console.error(`Influencer is not permitted in narrow Tearsheet.`);
-                }
-                if (this._hasHeaderActions) {
-                    console.error(`Header actions are not permitted in narrow Tearsheet.`);
-                }
-            }
-        }
-        if (changedProperties.has('open')) {
-            this._updateStack();
-            this._checkSetOpen();
-            if (this.open) {
-                this._launcher = this.ownerDocument.activeElement;
-                await this.constructor._delay();
-                if ((_b = (_a = this.selectorInitialFocus) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) {
-                    const focusNode = this.querySelector(this.selectorInitialFocus);
-                    focusNode === null || focusNode === void 0 ? void 0 : focusNode.focus();
-                }
-                else {
-                    const { first: _firstElement } = this.getFocusable();
-                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
-                }
-            }
-            else if (this._launcher &&
-                typeof this._launcher.focus === 'function') {
-                this._launcher.focus();
-                this._launcher = null;
-            }
-        }
-    }
-    /**
-     * @param ms The number of milliseconds.
-     * @returns A promise that is resolves after the given milliseconds.
-     */
-    static _delay(ms = 0) {
-        return new Promise((resolve) => {
-            setTimeout(resolve, ms);
-        });
-    }
-    /**
-     * A selector selecting buttons that should close this modal.
-     */
-    static get selectorCloseButton() {
-        return `[data-modal-close],${carbonPrefix}-modal-close-button`;
-    }
-    /**
-     * A selector selecting tabbable nodes.
-     */
-    static get selectorTabbable() {
-        return selectorTabbable;
-    }
-    /**
-     * The name of the custom event fired before this tearsheet is being closed upon a user gesture.
-     * Cancellation of this event stops the user-initiated action of closing this tearsheet.
-     */
-    static get eventBeforeClose() {
-        return `${prefix}-tearsheet-beingclosed`;
-    }
-    /**
-     * The name of the custom event fired after this tearsheet is closed upon a user gesture.
-     */
-    static get eventClose() {
-        return `${prefix}-tearsheet-closed`;
-    }
-    /**
-     * The name of the custom event fired on clicking the navigate back button
-     */
-    static get eventNavigateBack() {
-        return `${prefix}-tearsheet-header-navigate-back`;
-    }
-};
-CDSTearsheet._stack = {
-    open: [],
-    all: [],
+		else {
+			pconsole_default.warn("Tearsheet not rendered: maximum stacking depth exceeded.");
+			return null;
+		}
+	}
+	async updated(changedProperties) {
+		if (changedProperties.has("width")) this._checkUpdateActionSizes();
+		if (changedProperties.has("width") || changedProperties.has("_hasHeaderNavigation") || changedProperties.has("_hasInfluencerLeft") || changedProperties.has("_hasInfluencerRight") || changedProperties.has("_hasHeaderActions")) {
+			if (this.width === "narrow") {
+				if (this._hasHeaderNavigation) console.error(`Header navigation is not permitted in narrow Tearsheet.`);
+				if (this._hasInfluencerLeft || this._hasInfluencerRight) console.error(`Influencer is not permitted in narrow Tearsheet.`);
+				if (this._hasHeaderActions) console.error(`Header actions are not permitted in narrow Tearsheet.`);
+			}
+		}
+		if (changedProperties.has("open")) {
+			this._updateStack();
+			this._checkSetOpen();
+			if (this.open) {
+				this._launcher = this.ownerDocument.activeElement;
+				await this.constructor._delay();
+				if (this.selectorInitialFocus?.trim()?.length) this.querySelector(this.selectorInitialFocus)?.focus();
+				else {
+					const { first: _firstElement } = this.getFocusable();
+					_firstElement?.focus();
+				}
+			} else if (this._launcher && typeof this._launcher.focus === "function") {
+				this._launcher.focus();
+				this._launcher = null;
+			}
+		}
+	}
+	/**
+	* @param ms The number of milliseconds.
+	* @returns A promise that is resolves after the given milliseconds.
+	*/
+	static _delay(ms = 0) {
+		return new Promise((resolve) => {
+			setTimeout(resolve, ms);
+		});
+	}
+	/**
+	* A selector selecting buttons that should close this modal.
+	*/
+	static get selectorCloseButton() {
+		return `[data-modal-close],${carbonPrefix}-modal-close-button`;
+	}
+	/**
+	* A selector selecting tabbable nodes.
+	*/
+	static get selectorTabbable() {
+		return selectorTabbable;
+	}
+	/**
+	* The name of the custom event fired before this tearsheet is being closed upon a user gesture.
+	* Cancellation of this event stops the user-initiated action of closing this tearsheet.
+	*/
+	static get eventBeforeClose() {
+		return `${prefix}-tearsheet-beingclosed`;
+	}
+	/**
+	* The name of the custom event fired after this tearsheet is closed upon a user gesture.
+	*/
+	static get eventClose() {
+		return `${prefix}-tearsheet-closed`;
+	}
+	/**
+	* The name of the custom event fired on clicking the navigate back button
+	*/
+	static get eventNavigateBack() {
+		return `${prefix}-tearsheet-header-navigate-back`;
+	}
+	static {
+		this.styles = tearsheet_default$1;
+	}
 };
-CDSTearsheet.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-__decorate([
-    query(`.${blockClass}__container`)
-], CDSTearsheet.prototype, "_tearsheet", void 0);
-__decorate([
-    queryAssignedElements({
-        slot: 'actions',
-        selector: `${carbonPrefix}-button`,
-    })
-], CDSTearsheet.prototype, "_actions", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_actionsCount", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasHeaderActions", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasLabel", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasSlug", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasDecorator", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasAILabel", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasTitle", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasDescription", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasInfluencerLeft", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasInfluencerRight", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_isOpen", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_hasHeaderNavigation", void 0);
-__decorate([
-    HostListener('click')
-    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-], CDSTearsheet.prototype, "_handleClick", void 0);
-__decorate([
-    HostListener('document:keydown')
-    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-], CDSTearsheet.prototype, "_handleKeydown", void 0);
-__decorate([
-    HostListener('keydown')
-], CDSTearsheet.prototype, "_handleHostKeydown", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'aria-label' })
-], CDSTearsheet.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'close-icon-description' })
-], CDSTearsheet.prototype, "closeIconDescription", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean, attribute: 'has-close-icon' })
-], CDSTearsheet.prototype, "hasCloseIcon", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'influencer-placement' })
-], CDSTearsheet.prototype, "influencerPlacement", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'influencer-width' })
-], CDSTearsheet.prototype, "influencerWidth", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], CDSTearsheet.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })
-], CDSTearsheet.prototype, "preventCloseOnClickOutside", void 0);
-__decorate([
-    property({
-        reflect: true,
-        attribute: 'selector-initial-focus',
-        type: String,
-    })
-], CDSTearsheet.prototype, "selectorInitialFocus", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'width' })
-], CDSTearsheet.prototype, "width", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_stackDepth", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "_stackPosition", void 0);
-CDSTearsheet = CDSTearsheet_1 = __decorate([
-    carbonElement(`${prefix}-tearsheet`)
-], CDSTearsheet);
-var CDSTearsheet_default = CDSTearsheet;
+__decorate([query(`.${blockClass}__container`)], CDSTearsheet.prototype, "_tearsheet", void 0);
+__decorate([queryAssignedElements({
+	slot: "actions",
+	selector: `${carbonPrefix}-button`
+})], CDSTearsheet.prototype, "_actions", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_actionsCount", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasHeaderActions", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasLabel", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasSlug", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasDecorator", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasAILabel", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasTitle", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasDescription", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasInfluencerLeft", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasInfluencerRight", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_isOpen", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_hasHeaderNavigation", void 0);
+__decorate([HostListener("click")], CDSTearsheet.prototype, "_handleClick", void 0);
+__decorate([HostListener("document:keydown")], CDSTearsheet.prototype, "_handleKeydown", void 0);
+__decorate([HostListener("keydown")], CDSTearsheet.prototype, "_handleHostKeydown", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "aria-label"
+})], CDSTearsheet.prototype, "ariaLabel", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "close-icon-description"
+})], CDSTearsheet.prototype, "closeIconDescription", void 0);
+__decorate([property({
+	reflect: true,
+	type: Boolean,
+	attribute: "has-close-icon"
+})], CDSTearsheet.prototype, "hasCloseIcon", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "influencer-placement"
+})], CDSTearsheet.prototype, "influencerPlacement", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "influencer-width"
+})], CDSTearsheet.prototype, "influencerWidth", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSTearsheet.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "prevent-close-on-click-outside"
+})], CDSTearsheet.prototype, "preventCloseOnClickOutside", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "selector-initial-focus",
+	type: String
+})], CDSTearsheet.prototype, "selectorInitialFocus", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "width"
+})], CDSTearsheet.prototype, "width", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_stackDepth", void 0);
+__decorate([state()], CDSTearsheet.prototype, "_stackPosition", void 0);
+CDSTearsheet = _CDSTearsheet = __decorate([carbonElement(`${prefix}-tearsheet`)], CDSTearsheet);
+var tearsheet_default = CDSTearsheet;
 
-export { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH, CDSTearsheet_default as default };
-//# sourceMappingURL=tearsheet.js.map
+//#endregion
+export { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH, tearsheet_default as default };
+//# sourceMappingURL=tearsheet.js.map