npm - @carbon/web-components - Versions diffs - 2.52.0-rc.0 → 2.53.0-rc.0 - Mend

@carbon/web-components 2.52.0-rc.0 → 2.53.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1787) hide show

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix, selectorTabbable } from "../../globals/settings.js";
+import { selectorTabbable } from "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import "../button/button-set-base.js";
@@ -17,7 +17,6 @@ import "../modal/index.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";
 //#region src/components/tearsheet/tearsheet.ts
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -29,9 +28,9 @@ var _CDSTearsheet;
 const maxStackDepth = 3;
 const PRECEDING = Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 const FOLLOWING = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
-const blockClass = `${prefix}--tearsheet`;
-const blockClassModalHeader = `${prefix}--modal-header`;
-const blockClassActionSet = `${prefix}--action-set`;
+const blockClass = `cds-custom--tearsheet`;
+const blockClassModalHeader = `cds-custom--modal-header`;
+const blockClassActionSet = `cds-custom--action-set`;
 /**
 * Tries to focus on the given elements and bails out if one of them is successful.
 *
@@ -109,11 +108,11 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
 		this.ariaLabel = "";
 		this.closeIconDescription = "Close";
 		this.hasCloseIcon = false;
-		this.influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;
-		this.influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;
+		this.influencerPlacement = "right";
+		this.influencerWidth = "narrow";
 		this.open = false;
 		this.preventCloseOnClickOutside = false;
-		this.width = TEARSHEET_WIDTH.NARROW;
+		this.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");
 		};
@@ -272,7 +271,7 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
       ?has-actions=${this?._actionsCount > 0}
       ?has-slug=${this?._hasSlug}
       width=${width}>
-      ${this.width === TEARSHEET_WIDTH.WIDE ? html`<cds-custom-layer level="1" class=${`${blockClass}__header-content`}
+      ${this.width === "wide" ? html`<cds-custom-layer level="1" class=${`${blockClass}__header-content`}
             >${headerFieldsTemplate}${headerActionsTemplate}</cds-custom-layer
           >` : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}
@@ -291,12 +290,12 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
 		return html`
       <a
         id="start-sentinel"
-        class="${prefix}--visually-hidden"
+        class="${"cds-custom"}--visually-hidden"
         href="javascript:void 0"
         role="navigation"></a>
       <div
         aria-label=${this.ariaLabel}
-        class=${`${blockClass}__container ${prefix}--modal-container ${prefix}--modal-container--sm`}
+        class=${`${blockClass}__container cds-custom--modal-container cds-custom--modal-container--sm`}
         part="dialog"
         role="complementary"
         ?open=${this._isOpen}
@@ -312,10 +311,10 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
         <!-- Body  -->
         <cds-custom-modal-body class=${`${blockClass}__body`} width=${width}>
           <!-- Influencer when on left -->
-          ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT ? html`<div
+          ${influencerPlacement !== "right" ? html`<div
                 class=${`${blockClass}__influencer`}
                 ?wide=${influencerWidth === "wide"}
-                ?hidden=${!this._hasInfluencerLeft || this.width === TEARSHEET_WIDTH.NARROW}>
+                ?hidden=${!this._hasInfluencerLeft || this.width === "narrow"}>
                 <slot
                   name="influencer"
                   data-postfix="left"
@@ -331,10 +330,10 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
               </div>
               <!-- Influencer when on right -->
-              ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT ? html`<div
+              ${influencerPlacement === "right" ? html`<div
                     class=${`${blockClass}__influencer`}
                     ?wide=${influencerWidth}
-                    ?hidden=${!this._hasInfluencerRight || this.width === TEARSHEET_WIDTH.NARROW}>
+                    ?hidden=${!this._hasInfluencerRight || this.width === "narrow"}>
                     <slot
                       name="influencer"
                       data-postfix="right"
@@ -356,7 +355,7 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
       </div>
       <a
         id="end-sentinel"
-        class="${prefix}--visually-hidden"
+        class="${"cds-custom"}--visually-hidden"
         href="javascript:void 0"
         role="navigation"></a>
     `;
@@ -398,7 +397,7 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
 	* A selector selecting buttons that should close this modal.
 	*/
 	static get selectorCloseButton() {
-		return `[data-modal-close],${prefix}-modal-close-button`;
+		return `[data-modal-close],cds-custom-modal-close-button`;
 	}
 	/**
 	* A selector selecting tabbable nodes.
@@ -411,19 +410,19 @@ let CDSTearsheet = class CDSTearsheet extends HostListenerMixin(LitElement) {
 	* Cancellation of this event stops the user-initiated action of closing this tearsheet.
 	*/
 	static get eventBeforeClose() {
-		return `${prefix}-tearsheet-beingclosed`;
+		return `cds-custom-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`;
+		return `cds-custom-tearsheet-closed`;
 	}
 	/**
 	* The name of the custom event fired on clicking the navigate back button
 	*/
 	static get eventNavigateBack() {
-		return `${prefix}-tearsheet-header-navigate-back`;
+		return `cds-custom-tearsheet-header-navigate-back`;
 	}
 };
 __decorate([query("#start-sentinel")], CDSTearsheet.prototype, "_startSentinelNode", void 0);
@@ -431,7 +430,7 @@ __decorate([query("#end-sentinel")], CDSTearsheet.prototype, "_endSentinelNode",
 __decorate([query(`.${blockClass}__container`)], CDSTearsheet.prototype, "_tearsheet", void 0);
 __decorate([queryAssignedElements({
 	slot: "actions",
-	selector: `${prefix}-button`
+	selector: `cds-custom-button`
 })], CDSTearsheet.prototype, "_actions", void 0);
 __decorate([state()], CDSTearsheet.prototype, "_actionsCount", void 0);
 __decorate([state()], CDSTearsheet.prototype, "_hasHeaderActions", void 0);
@@ -486,9 +485,9 @@ __decorate([property({
 })], 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);
+CDSTearsheet = _CDSTearsheet = __decorate([carbonElement(`cds-custom-tearsheet`)], CDSTearsheet);
 var tearsheet_default = CDSTearsheet;
 //#endregion
 export { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH, tearsheet_default as default };
 //# sourceMappingURL=tearsheet.js.map

package/es-custom/components/tearsheet/tearsheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tearsheet.js","names":["customElement"],"sources":["../../../src/components/tearsheet/tearsheet.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 2024\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../button/index';\nimport '../layer/index';\nimport '../button/button-set-base';\nimport '../modal/index';\nimport {\n TEARSHEET_INFLUENCER_PLACEMENT,\n TEARSHEET_INFLUENCER_WIDTH,\n TEARSHEET_WIDTH,\n} from './defs';\n\nexport {\n TEARSHEET_INFLUENCER_PLACEMENT,\n TEARSHEET_INFLUENCER_WIDTH,\n TEARSHEET_WIDTH,\n};\n\nconst maxStackDepth = 3;\ntype StackHandler = (newDepth: number, newPosition: number) => void;\ninterface StackState {\n open: StackHandler[];\n all: StackHandler[];\n}\n\nconst PRECEDING =\n Node.DOCUMENT_POSITION_PRECEDING \| Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n Node.DOCUMENT_POSITION_FOLLOWING \| Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--tearsheet`;\nconst blockClassModalHeader = `${prefix}--modal-header`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/\n Tries to focus on the given elements and bails out if one of them is successful.\n \n @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n /\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n if (!reverse) {\n for (let i = 0; i < elems.length; ++i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n } else {\n for (let i = elems.length - 1; i >= 0; --i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n }\n return false;\n}\n\n/\n Tearsheet.\n \n @deprecated Use Carbon for IBM Products `tearsheet` component.\n * This component has been deprecated in `@carbon/web-components` and will instead be maintained\n * in the Carbon for IBM Products library:\n * https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-custom-tearsheet\n * @csspart dialog The dialog.\n * @fires cds-custom-tearsheet-beingclosed\n * The custom event fired before this tearsheet is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n * @fires cds-custom-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.\n /\n@customElement(`${prefix}-tearsheet`)\nclass CDSTearsheet extends HostListenerMixin(LitElement) {\n /\n The element that had focus before this tearsheet gets open.\n /\n private _launcher: Element \| null = null;\n\n /\n Node to track focus going outside of tearsheet content.\n /\n @query('#start-sentinel')\n private _startSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track focus going outside of tearsheet content.\n /\n @query('#end-sentinel')\n private _endSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track tearsheet.\n /\n @query(`.${blockClass}__container`)\n private _tearsheet!: HTMLDivElement;\n\n @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n private _actions!: Array<HTMLElement>;\n\n @state()\n _actionsCount = 0;\n\n @state()\n _hasHeaderActions = false;\n\n @state()\n _hasLabel = false;\n\n @state()\n _hasSlug = false;\n\n @state()\n _hasTitle = false;\n\n @state()\n _hasDescription = false;\n\n @state()\n _hasInfluencerLeft = false;\n\n @state()\n _hasInfluencerRight = false;\n\n @state()\n _isOpen = false;\n\n @state()\n _hasHeaderNavigation = false;\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('click')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = (event: MouseEvent) => {\n if (\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n !this.preventCloseOnClickOutside\n ) {\n this._handleUserInitiatedClose(event.target);\n }\n };\n\n /\n Handles `blur` event on this element.\n \n @param event The event.\n * @param event.target The event target.\n * @param event.relatedTarget The event relatedTarget.\n /\n @HostListener('shadowRoot:focusout')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n if (!this._topOfStack()) {\n return;\n }\n\n const {\n // condensedActions,\n open,\n _startSentinelNode: startSentinelNode,\n _endSentinelNode: endSentinelNode,\n } = this;\n\n const oldContains = target !== this && this.contains(target as Node);\n const currentContains =\n relatedTarget !== this &&\n (this.contains(relatedTarget as Node) \|\|\n (this.shadowRoot?.contains(relatedTarget as Node) &&\n relatedTarget !== (startSentinelNode as Node) &&\n relatedTarget !== (endSentinelNode as Node)));\n\n // Performs focus wrapping if _all_ of the following is met:\n // This tearsheet is open\n // * The viewport still has focus\n // * Tearsheet body used to have focus but no longer has focus\n const { selectorTabbable: selectorTabbableForTearsheet } = this\n .constructor as typeof CDSTearsheet;\n\n if (open && relatedTarget && oldContains && !currentContains) {\n const comparisonResult = (target as Node).compareDocumentPosition(\n relatedTarget as Node\n );\n\n if (relatedTarget === startSentinelNode \|\| comparisonResult & PRECEDING) {\n await (this.constructor as typeof CDSTearsheet)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForTearsheet),\n true\n ) &&\n relatedTarget !== this\n ) {\n this.focus();\n }\n } else if (\n relatedTarget === endSentinelNode \|\|\n comparisonResult & FOLLOWING\n ) {\n await (this.constructor as typeof CDSTearsheet)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForTearsheet),\n true\n )\n ) {\n this.focus();\n }\n }\n }\n };\n\n @HostListener('document:keydown')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n if ((key === 'Esc' \|\| key === 'Escape') && this._topOfStack()) {\n this._handleUserInitiatedClose(target);\n }\n };\n\n private _checkSetHasSlot(e: Event) {\n const t = e.target as HTMLSlotElement;\n const dataPostfix = t.getAttribute('data-postfix');\n const postfix = dataPostfix ? `-${dataPostfix}` : '';\n\n // snake `ab-cd-ef` to _has camel case _hasAbCdEf\n const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) =>\n c[1].toUpperCase()\n );\n this[hasName] = (t?.assignedElements()?.length ?? 0) > 0;\n }\n\n /*\n Handles `click` event on the modal container.\n \n @param event The event.\n /\n private _handleClickContainer(event: MouseEvent) {\n if (\n (event.target as Element).matches(\n (this.constructor as typeof CDSTearsheet).selectorCloseButton\n )\n ) {\n this._handleUserInitiatedClose(event.target);\n }\n }\n\n /\n Handles user-initiated close request of this tearsheet.\n \n @param triggeredBy The element that triggered this close request.\n /\n private _handleUserInitiatedClose(triggeredBy: EventTarget \| null) {\n if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheet).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheet).eventClose,\n init\n )\n );\n }\n }\n }\n\n private _handleSlugChange(e: Event) {\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n this._hasSlug = childItems.length > 0;\n if (this._hasSlug) {\n childItems[0].setAttribute('size', 'lg');\n this.setAttribute('slug', '');\n } else {\n this.removeAttribute('slug');\n }\n }\n\n /\n Optional aria label for the tearsheet\n /\n @property({ reflect: true, attribute: 'aria-label' })\n ariaLabel = '';\n\n /\n Sets the close button icon description\n /\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription = 'Close';\n\n /\n Enable a close icon ('x') in the header area of the tearsheet. By default,\n * (when this prop is omitted, or undefined or null) a tearsheet does not\n * display a close icon if there are navigation actions (\"transactional\n * tearsheet\") and displays one if there are no navigation actions (\"passive\n * tearsheet\"), and that behavior can be overridden if required by setting\n * this prop to either true or false.\n /\n\n @property({ reflect: true, type: Boolean, attribute: 'has-close-icon' })\n hasCloseIcon = false;\n\n /\n The placement of the influencer section, 'left' or 'right'.\n /\n @property({ reflect: true, attribute: 'influencer-placement' })\n influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;\n\n /\n The width of the influencer section, 'narrow' or 'wide'.\n /\n @property({ reflect: true, attribute: 'influencer-width' })\n influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;\n\n /\n `true` if the tearsheet should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n Prevent closing on click outside of tearsheet\n /\n @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n preventCloseOnClickOutside = false;\n\n /\n The initial location of focus in the side panel\n /\n @property({\n reflect: true,\n attribute: 'selector-initial-focus',\n type: String,\n })\n selectorInitialFocus;\n\n /\n The width of the influencer section, 'narrow' or 'wide'.\n /\n @property({ reflect: true, attribute: 'width' })\n width = TEARSHEET_WIDTH.NARROW;\n\n private _checkUpdateActionSizes = () => {\n if (this._actions) {\n for (let i = 0; i < this._actions.length; i++) {\n this._actions[i].setAttribute(\n 'size',\n this.width === 'wide' ? '2xl' : 'xl'\n );\n }\n }\n };\n\n private _maxActions = 4;\n private _handleActionsChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const actions = target?.assignedElements();\n const actionsCount = actions?.length ?? 0;\n\n if (actionsCount > this._maxActions) {\n this._actionsCount = this._maxActions;\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(`Too many tearsheet actions, max ${this._maxActions}.`);\n } else {\n this._actionsCount = actionsCount;\n }\n\n for (let i = 0; i < actions?.length; i++) {\n if (i + 1 > this._maxActions) {\n // hide excessive tearsheet actions\n actions[i].setAttribute('hidden', 'true');\n actions[i].setAttribute(\n `data-actions-limit-${this._maxActions}-exceeded`,\n `${actions.length}`\n );\n } else {\n actions[i].classList.add(`${blockClassActionSet}__action-button`);\n }\n }\n this._checkUpdateActionSizes();\n }\n\n // Data structure to communicate the state of tearsheet stacking\n // (i.e. when more than one tearsheet is open). Each tearsheet supplies a\n // handler to be called whenever the stacking of the tearsheets changes, which\n // happens when a tearsheet opens or closes. The 'open' array contains one\n // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.\n // The 'all' array contains all the handlers for open and closed tearsheets.\n\n @state()\n _stackDepth = -1;\n\n @state()\n _stackPosition = -1;\n\n private _topOfStack = () => {\n return this._stackDepth === this._stackPosition;\n };\n\n private static _stack: StackState = {\n open: [],\n all: [],\n };\n private _notifyStack = () => {\n CDSTearsheet._stack.all.forEach(\n (handler: (stackSize: number, position: number) => void) => {\n handler(\n Math.min(CDSTearsheet._stack.open.length, maxStackDepth),\n CDSTearsheet._stack.open.indexOf(handler) + 1\n );\n }\n );\n };\n\n private _handleStackChange: StackHandler = (newDepth, newPosition) => {\n this._stackDepth = newDepth;\n this._stackPosition = newPosition;\n if (this._stackDepth > 1 && this._stackPosition > 0) {\n this.setAttribute('stack-position', `${newPosition}`);\n this.setAttribute('stack-depth', `${this._stackDepth}`);\n } else {\n this.removeAttribute('stack-position');\n this.removeAttribute('stack-depth');\n }\n };\n\n private _updateStack = () => {\n if (this.open) {\n CDSTearsheet._stack.open.push(this._handleStackChange);\n } else {\n const indexOpen = CDSTearsheet._stack.open.indexOf(\n this._handleStackChange\n );\n if (indexOpen >= 0) {\n CDSTearsheet._stack.open.splice(indexOpen, 1);\n }\n }\n this._notifyStack();\n };\n\n actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];\n\n connectedCallback() {\n super.connectedCallback();\n\n CDSTearsheet._stack.all.push(this._handleStackChange);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const indexAll = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n CDSTearsheet._stack.all.splice(indexAll, 1);\n const indexOpen = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n CDSTearsheet._stack.open.splice(indexOpen, 1);\n }\n\n render() {\n const {\n closeIconDescription,\n influencerPlacement,\n influencerWidth,\n open,\n width,\n } = this;\n\n const actionsMultiple = ['', 'single', 'double', 'triple'][\n this._actionsCount\n ];\n\n const headerFieldsTemplate = html`<div\n class=${`${blockClass}__header-fields`}>\n <h2 class=${`${blockClassModalHeader}__label`} ?hidden=${!this._hasLabel}>\n <slot name=\"label\" @slotchange=${this._checkSetHasSlot}></slot>\n </h2>\n <h3\n class=${`${blockClassModalHeader}__heading ${blockClass}__heading`}\n ?hidden=${!this._hasTitle}>\n <slot name=\"title\" @slotchange=${this._checkSetHasSlot}></slot>\n </h3>\n <div\n class=${`${blockClass}__header-description`}\n ?hidden=${!this._hasDescription}>\n <slot name=\"description\" @slotchange=${this._checkSetHasSlot}></slot>\n </div>\n </div>`;\n\n const headerActionsTemplate = html` <div\n class=${`${blockClass}__header-actions`}\n ?hidden=${!this._hasHeaderActions \|\| this.width === 'narrow'}>\n <slot name=\"header-actions\" @slotchange=${this._checkSetHasSlot}></slot>\n </div>`;\n\n const headerTemplate = html` <cds-custom-modal-header\n class=${`${blockClass}__header`}\n ?has-close-icon=${this.hasCloseIcon \|\| this?._actionsCount === 0}\n ?has-navigation=${this._hasHeaderNavigation && this.width === 'wide'}\n ?has-header-actions=${this._hasHeaderActions && this.width === 'wide'}\n ?has-actions=${this?._actionsCount > 0}\n ?has-slug=${this?._hasSlug}\n width=${width}>\n ${this.width === TEARSHEET_WIDTH.WIDE\n ? html`<cds-custom-layer level=\"1\" class=${`${blockClass}__header-content`}\n >${headerFieldsTemplate}${headerActionsTemplate}</cds-custom-layer\n >`\n : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}\n\n <div\n class=${`${blockClass}__header-navigation`}\n ?hidden=${!this._hasHeaderNavigation \|\| this.width === 'narrow'}>\n <slot\n name=\"header-navigation\"\n @slotchange=${this._checkSetHasSlot}></slot>\n </div>\n <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n ${this.hasCloseIcon \|\| this?._actionsCount === 0\n ? html`<cds-custom-modal-close-button\n close-button-label=${closeIconDescription}\n @click=${this._handleUserInitiatedClose}></cds-custom-modal-close-button>`\n : ''}\n </cds-custom-modal-header>`;\n\n return html`\n <a\n id=\"start-sentinel\"\n class=\"${prefix}--visually-hidden\"\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n <div\n aria-label=${this.ariaLabel}\n class=${`${blockClass}__container ${prefix}--modal-container ${prefix}--modal-container--sm`}\n part=\"dialog\"\n role=\"complementary\"\n ?open=${this._isOpen}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n width=${width}\n stack-position=${this._stackPosition}\n stack-depth=${this._stackDepth}\n @click=${this._handleClickContainer}>\n <!-- Header -->\n ${headerTemplate}\n\n <!-- Body -->\n <cds-custom-modal-body class=${`${blockClass}__body`} width=${width}>\n <!-- Influencer when on left -->\n ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n ? html`<div\n class=${`${blockClass}__influencer`}\n ?wide=${influencerWidth === 'wide'}\n ?hidden=${!this._hasInfluencerLeft \|\|\n this.width === TEARSHEET_WIDTH.NARROW}>\n <slot\n name=\"influencer\"\n data-postfix=\"left\"\n @slotchange=${this._checkSetHasSlot}></slot>\n </div>`\n : ''}\n\n <div class=${`${blockClass}__right`}>\n <div class=${`${blockClass}__main`}>\n <div class=${`${blockClass}__content`}>\n <cds-custom-layer level=\"0\">\n <slot></slot>\n </cds-custom-layer>\n </div>\n\n <!-- Influencer when on right -->\n ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n ? html`<div\n class=${`${blockClass}__influencer`}\n ?wide=${influencerWidth}\n ?hidden=${!this._hasInfluencerRight \|\|\n this.width === TEARSHEET_WIDTH.NARROW}>\n <slot\n name=\"influencer\"\n data-postfix=\"right\"\n @slotchange=${this._checkSetHasSlot}></slot>\n </div>`\n : ''}\n </div>\n <!-- Action buttons -->\n <cds-custom-button-set-base\n class=${`${blockClass}__buttons ${blockClass}__button-container`}\n actions-multiple=${actionsMultiple}\n ?tearsheet-wide=${width === 'wide'}\n ?hidden=${this._actionsCount === 0}>\n <slot\n name=\"actions\"\n @slotchange=${this._handleActionsChange}></slot>\n </cds-custom-button-set-base>\n </div>\n </cds-custom-modal-body>\n </div>\n <a\n id=\"end-sentinel\"\n class=\"${prefix}--visually-hidden\"\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n `;\n }\n\n _checkSetOpen = () => {\n const { _tearsheet: tearsheet } = this;\n if (tearsheet && this._isOpen) {\n // wait until the tearsheet has transitioned off the screen to remove\n tearsheet.addEventListener('transitionend', () => {\n this._isOpen = false;\n });\n } else {\n // allow the html to render before animating in the tearsheet\n window.requestAnimationFrame(() => {\n this._isOpen = this.open;\n });\n }\n };\n\n async updated(changedProperties) {\n if (changedProperties.has('width')) {\n this._checkUpdateActionSizes();\n }\n\n if (\n process.env.NODE_ENV === 'development' &&\n (changedProperties.has('width') \|\|\n changedProperties.has('_hasHeaderNavigation') \|\|\n changedProperties.has('_hasInfluencerLeft') \|\|\n changedProperties.has('_hasInfluencerRight') \|\|\n changedProperties.has('_hasHeaderActions'))\n ) {\n if (this.width === 'narrow') {\n if (this._hasHeaderNavigation) {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(\n `Header navigation is not permitted in narrow Tearsheet.`\n );\n }\n if (this._hasInfluencerLeft \|\| this._hasInfluencerRight) {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(`Influencer is not permitted in narrow Tearsheet.`);\n }\n if (this._hasHeaderActions) {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(\n `Header actions are not permitted in narrow Tearsheet.`\n );\n }\n }\n }\n\n if (changedProperties.has('open')) {\n this._updateStack();\n\n this._checkSetOpen();\n if (this.open) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n this._launcher = this.ownerDocument!.activeElement;\n const focusNode =\n this.selectorInitialFocus &&\n this.querySelector(this.selectorInitialFocus);\n\n await (this.constructor as typeof CDSTearsheet)._delay();\n if (focusNode) {\n // For cases where a `carbon-web-components` component (e.g. `<cds-custom-button>`) being `primaryFocusNode`,\n // where its first update/render cycle that makes it focusable happens after `<cds-custom-tearsheet>`'s first update/render cycle\n (focusNode as HTMLElement).focus();\n } else if (\n !tryFocusElems(\n this.querySelectorAll(\n (this.constructor as typeof CDSTearsheet).selectorTabbable\n ),\n true\n )\n ) {\n this.focus();\n }\n } else if (\n this._launcher &&\n typeof (this._launcher as HTMLElement).focus === 'function'\n ) {\n (this._launcher as HTMLElement).focus();\n this._launcher = null;\n }\n }\n }\n\n /\n @param ms The number of milliseconds.\n * @returns A promise that is resolves after the given milliseconds.\n /\n private static _delay(ms = 0) {\n return new Promise((resolve) => {\n setTimeout(resolve, ms);\n });\n }\n\n /\n A selector selecting buttons that should close this modal.\n /\n static get selectorCloseButton() {\n return `[data-modal-close],${prefix}-modal-close-button`;\n }\n\n /\n A selector selecting tabbable nodes.\n /\n static get selectorTabbable() {\n return selectorTabbable;\n }\n\n /\n The name of the custom event fired before this tearsheet is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n /\n static get eventBeforeClose() {\n return `${prefix}-tearsheet-beingclosed`;\n }\n\n /\n The name of the custom event fired after this tearsheet is closed upon a user gesture.\n /\n static get eventClose() {\n return `${prefix}-tearsheet-closed`;\n }\n\n /\n The name of the custom event fired on clicking the navigate back button\n */\n static get eventNavigateBack() {\n return `${prefix}-tearsheet-header-navigate-back`;\n }\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}
1	+ {"version":3,"file":"tearsheet.js","names":["customElement"],"sources":["../../../src/components/tearsheet/tearsheet.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 2024\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../button/index';\nimport '../layer/index';\nimport '../button/button-set-base';\nimport '../modal/index';\nimport {\n TEARSHEET_INFLUENCER_PLACEMENT,\n TEARSHEET_INFLUENCER_WIDTH,\n TEARSHEET_WIDTH,\n} from './defs';\n\nexport {\n TEARSHEET_INFLUENCER_PLACEMENT,\n TEARSHEET_INFLUENCER_WIDTH,\n TEARSHEET_WIDTH,\n};\n\nconst maxStackDepth = 3;\ntype StackHandler = (newDepth: number, newPosition: number) => void;\ninterface StackState {\n open: StackHandler[];\n all: StackHandler[];\n}\n\nconst PRECEDING =\n Node.DOCUMENT_POSITION_PRECEDING \| Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n Node.DOCUMENT_POSITION_FOLLOWING \| Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--tearsheet`;\nconst blockClassModalHeader = `${prefix}--modal-header`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/\n Tries to focus on the given elements and bails out if one of them is successful.\n \n @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n /\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n if (!reverse) {\n for (let i = 0; i < elems.length; ++i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n } else {\n for (let i = elems.length - 1; i >= 0; --i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n }\n return false;\n}\n\n/\n Tearsheet.\n \n @deprecated Use Carbon for IBM Products `tearsheet` component.\n * This component has been deprecated in `@carbon/web-components` and will instead be maintained\n * in the Carbon for IBM Products library:\n * https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-custom-tearsheet\n * @csspart dialog The dialog.\n * @fires cds-custom-tearsheet-beingclosed\n * The custom event fired before this tearsheet is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n * @fires cds-custom-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.\n /\n@customElement(`${prefix}-tearsheet`)\nclass CDSTearsheet extends HostListenerMixin(LitElement) {\n /\n The element that had focus before this tearsheet gets open.\n /\n private _launcher: Element \| null = null;\n\n /\n Node to track focus going outside of tearsheet content.\n /\n @query('#start-sentinel')\n private _startSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track focus going outside of tearsheet content.\n /\n @query('#end-sentinel')\n private _endSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track tearsheet.\n /\n @query(`.${blockClass}__container`)\n private _tearsheet!: HTMLDivElement;\n\n @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n private _actions!: Array<HTMLElement>;\n\n @state()\n _actionsCount = 0;\n\n @state()\n _hasHeaderActions = false;\n\n @state()\n _hasLabel = false;\n\n @state()\n _hasSlug = false;\n\n @state()\n _hasTitle = false;\n\n @state()\n _hasDescription = false;\n\n @state()\n _hasInfluencerLeft = false;\n\n @state()\n _hasInfluencerRight = false;\n\n @state()\n _isOpen = false;\n\n @state()\n _hasHeaderNavigation = false;\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('click')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = (event: MouseEvent) => {\n if (\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n !this.preventCloseOnClickOutside\n ) {\n this._handleUserInitiatedClose(event.target);\n }\n };\n\n /\n Handles `blur` event on this element.\n \n @param event The event.\n * @param event.target The event target.\n * @param event.relatedTarget The event relatedTarget.\n /\n @HostListener('shadowRoot:focusout')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n if (!this._topOfStack()) {\n return;\n }\n\n const {\n // condensedActions,\n open,\n _startSentinelNode: startSentinelNode,\n _endSentinelNode: endSentinelNode,\n } = this;\n\n const oldContains = target !== this && this.contains(target as Node);\n const currentContains =\n relatedTarget !== this &&\n (this.contains(relatedTarget as Node) \|\|\n (this.shadowRoot?.contains(relatedTarget as Node) &&\n relatedTarget !== (startSentinelNode as Node) &&\n relatedTarget !== (endSentinelNode as Node)));\n\n // Performs focus wrapping if _all_ of the following is met:\n // This tearsheet is open\n // * The viewport still has focus\n // * Tearsheet body used to have focus but no longer has focus\n const { selectorTabbable: selectorTabbableForTearsheet } = this\n .constructor as typeof CDSTearsheet;\n\n if (open && relatedTarget && oldContains && !currentContains) {\n const comparisonResult = (target as Node).compareDocumentPosition(\n relatedTarget as Node\n );\n\n if (relatedTarget === startSentinelNode \|\| comparisonResult & PRECEDING) {\n await (this.constructor as typeof CDSTearsheet)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForTearsheet),\n true\n ) &&\n relatedTarget !== this\n ) {\n this.focus();\n }\n } else if (\n relatedTarget === endSentinelNode \|\|\n comparisonResult & FOLLOWING\n ) {\n await (this.constructor as typeof CDSTearsheet)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForTearsheet),\n true\n )\n ) {\n this.focus();\n }\n }\n }\n };\n\n @HostListener('document:keydown')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n if ((key === 'Esc' \|\| key === 'Escape') && this._topOfStack()) {\n this._handleUserInitiatedClose(target);\n }\n };\n\n private _checkSetHasSlot(e: Event) {\n const t = e.target as HTMLSlotElement;\n const dataPostfix = t.getAttribute('data-postfix');\n const postfix = dataPostfix ? `-${dataPostfix}` : '';\n\n // snake `ab-cd-ef` to _has camel case _hasAbCdEf\n const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) =>\n c[1].toUpperCase()\n );\n this[hasName] = (t?.assignedElements()?.length ?? 0) > 0;\n }\n\n /*\n Handles `click` event on the modal container.\n \n @param event The event.\n /\n private _handleClickContainer(event: MouseEvent) {\n if (\n (event.target as Element).matches(\n (this.constructor as typeof CDSTearsheet).selectorCloseButton\n )\n ) {\n this._handleUserInitiatedClose(event.target);\n }\n }\n\n /\n Handles user-initiated close request of this tearsheet.\n \n @param triggeredBy The element that triggered this close request.\n /\n private _handleUserInitiatedClose(triggeredBy: EventTarget \| null) {\n if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheet).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTearsheet).eventClose,\n init\n )\n );\n }\n }\n }\n\n private _handleSlugChange(e: Event) {\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n this._hasSlug = childItems.length > 0;\n if (this._hasSlug) {\n childItems[0].setAttribute('size', 'lg');\n this.setAttribute('slug', '');\n } else {\n this.removeAttribute('slug');\n }\n }\n\n /\n Optional aria label for the tearsheet\n /\n @property({ reflect: true, attribute: 'aria-label' })\n ariaLabel = '';\n\n /\n Sets the close button icon description\n /\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription = 'Close';\n\n /\n Enable a close icon ('x') in the header area of the tearsheet. By default,\n * (when this prop is omitted, or undefined or null) a tearsheet does not\n * display a close icon if there are navigation actions (\"transactional\n * tearsheet\") and displays one if there are no navigation actions (\"passive\n * tearsheet\"), and that behavior can be overridden if required by setting\n * this prop to either true or false.\n /\n\n @property({ reflect: true, type: Boolean, attribute: 'has-close-icon' })\n hasCloseIcon = false;\n\n /\n The placement of the influencer section, 'left' or 'right'.\n /\n @property({ reflect: true, attribute: 'influencer-placement' })\n influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;\n\n /\n The width of the influencer section, 'narrow' or 'wide'.\n /\n @property({ reflect: true, attribute: 'influencer-width' })\n influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;\n\n /\n `true` if the tearsheet should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n Prevent closing on click outside of tearsheet\n /\n @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n preventCloseOnClickOutside = false;\n\n /\n The initial location of focus in the side panel\n /\n @property({\n reflect: true,\n attribute: 'selector-initial-focus',\n type: String,\n })\n selectorInitialFocus;\n\n /\n The width of the influencer section, 'narrow' or 'wide'.\n /\n @property({ reflect: true, attribute: 'width' })\n width = TEARSHEET_WIDTH.NARROW;\n\n private _checkUpdateActionSizes = () => {\n if (this._actions) {\n for (let i = 0; i < this._actions.length; i++) {\n this._actions[i].setAttribute(\n 'size',\n this.width === 'wide' ? '2xl' : 'xl'\n );\n }\n }\n };\n\n private _maxActions = 4;\n private _handleActionsChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const actions = target?.assignedElements();\n const actionsCount = actions?.length ?? 0;\n\n if (actionsCount > this._maxActions) {\n this._actionsCount = this._maxActions;\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(`Too many tearsheet actions, max ${this._maxActions}.`);\n } else {\n this._actionsCount = actionsCount;\n }\n\n for (let i = 0; i < actions?.length; i++) {\n if (i + 1 > this._maxActions) {\n // hide excessive tearsheet actions\n actions[i].setAttribute('hidden', 'true');\n actions[i].setAttribute(\n `data-actions-limit-${this._maxActions}-exceeded`,\n `${actions.length}`\n );\n } else {\n actions[i].classList.add(`${blockClassActionSet}__action-button`);\n }\n }\n this._checkUpdateActionSizes();\n }\n\n // Data structure to communicate the state of tearsheet stacking\n // (i.e. when more than one tearsheet is open). Each tearsheet supplies a\n // handler to be called whenever the stacking of the tearsheets changes, which\n // happens when a tearsheet opens or closes. The 'open' array contains one\n // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.\n // The 'all' array contains all the handlers for open and closed tearsheets.\n\n @state()\n _stackDepth = -1;\n\n @state()\n _stackPosition = -1;\n\n private _topOfStack = () => {\n return this._stackDepth === this._stackPosition;\n };\n\n private static _stack: StackState = {\n open: [],\n all: [],\n };\n private _notifyStack = () => {\n CDSTearsheet._stack.all.forEach(\n (handler: (stackSize: number, position: number) => void) => {\n handler(\n Math.min(CDSTearsheet._stack.open.length, maxStackDepth),\n CDSTearsheet._stack.open.indexOf(handler) + 1\n );\n }\n );\n };\n\n private _handleStackChange: StackHandler = (newDepth, newPosition) => {\n this._stackDepth = newDepth;\n this._stackPosition = newPosition;\n if (this._stackDepth > 1 && this._stackPosition > 0) {\n this.setAttribute('stack-position', `${newPosition}`);\n this.setAttribute('stack-depth', `${this._stackDepth}`);\n } else {\n this.removeAttribute('stack-position');\n this.removeAttribute('stack-depth');\n }\n };\n\n private _updateStack = () => {\n if (this.open) {\n CDSTearsheet._stack.open.push(this._handleStackChange);\n } else {\n const indexOpen = CDSTearsheet._stack.open.indexOf(\n this._handleStackChange\n );\n if (indexOpen >= 0) {\n CDSTearsheet._stack.open.splice(indexOpen, 1);\n }\n }\n this._notifyStack();\n };\n\n actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];\n\n connectedCallback() {\n super.connectedCallback();\n\n CDSTearsheet._stack.all.push(this._handleStackChange);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const indexAll = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n CDSTearsheet._stack.all.splice(indexAll, 1);\n const indexOpen = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n CDSTearsheet._stack.open.splice(indexOpen, 1);\n }\n\n render() {\n const {\n closeIconDescription,\n influencerPlacement,\n influencerWidth,\n open,\n width,\n } = this;\n\n const actionsMultiple = ['', 'single', 'double', 'triple'][\n this._actionsCount\n ];\n\n const headerFieldsTemplate = html`<div\n class=${`${blockClass}__header-fields`}>\n <h2 class=${`${blockClassModalHeader}__label`} ?hidden=${!this._hasLabel}>\n <slot name=\"label\" @slotchange=${this._checkSetHasSlot}></slot>\n </h2>\n <h3\n class=${`${blockClassModalHeader}__heading ${blockClass}__heading`}\n ?hidden=${!this._hasTitle}>\n <slot name=\"title\" @slotchange=${this._checkSetHasSlot}></slot>\n </h3>\n <div\n class=${`${blockClass}__header-description`}\n ?hidden=${!this._hasDescription}>\n <slot name=\"description\" @slotchange=${this._checkSetHasSlot}></slot>\n </div>\n </div>`;\n\n const headerActionsTemplate = html` <div\n class=${`${blockClass}__header-actions`}\n ?hidden=${!this._hasHeaderActions \|\| this.width === 'narrow'}>\n <slot name=\"header-actions\" @slotchange=${this._checkSetHasSlot}></slot>\n </div>`;\n\n const headerTemplate = html` <cds-custom-modal-header\n class=${`${blockClass}__header`}\n ?has-close-icon=${this.hasCloseIcon \|\| this?._actionsCount === 0}\n ?has-navigation=${this._hasHeaderNavigation && this.width === 'wide'}\n ?has-header-actions=${this._hasHeaderActions && this.width === 'wide'}\n ?has-actions=${this?._actionsCount > 0}\n ?has-slug=${this?._hasSlug}\n width=${width}>\n ${this.width === TEARSHEET_WIDTH.WIDE\n ? html`<cds-custom-layer level=\"1\" class=${`${blockClass}__header-content`}\n >${headerFieldsTemplate}${headerActionsTemplate}</cds-custom-layer\n >`\n : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}\n\n <div\n class=${`${blockClass}__header-navigation`}\n ?hidden=${!this._hasHeaderNavigation \|\| this.width === 'narrow'}>\n <slot\n name=\"header-navigation\"\n @slotchange=${this._checkSetHasSlot}></slot>\n </div>\n <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n ${this.hasCloseIcon \|\| this?._actionsCount === 0\n ? html`<cds-custom-modal-close-button\n close-button-label=${closeIconDescription}\n @click=${this._handleUserInitiatedClose}></cds-custom-modal-close-button>`\n : ''}\n </cds-custom-modal-header>`;\n\n return html`\n <a\n id=\"start-sentinel\"\n class=\"${prefix}--visually-hidden\"\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n <div\n aria-label=${this.ariaLabel}\n class=${`${blockClass}__container ${prefix}--modal-container ${prefix}--modal-container--sm`}\n part=\"dialog\"\n role=\"complementary\"\n ?open=${this._isOpen}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n width=${width}\n stack-position=${this._stackPosition}\n stack-depth=${this._stackDepth}\n @click=${this._handleClickContainer}>\n <!-- Header -->\n ${headerTemplate}\n\n <!-- Body -->\n <cds-custom-modal-body class=${`${blockClass}__body`} width=${width}>\n <!-- Influencer when on left -->\n ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n ? html`<div\n class=${`${blockClass}__influencer`}\n ?wide=${influencerWidth === 'wide'}\n ?hidden=${!this._hasInfluencerLeft \|\|\n this.width === TEARSHEET_WIDTH.NARROW}>\n <slot\n name=\"influencer\"\n data-postfix=\"left\"\n @slotchange=${this._checkSetHasSlot}></slot>\n </div>`\n : ''}\n\n <div class=${`${blockClass}__right`}>\n <div class=${`${blockClass}__main`}>\n <div class=${`${blockClass}__content`}>\n <cds-custom-layer level=\"0\">\n <slot></slot>\n </cds-custom-layer>\n </div>\n\n <!-- Influencer when on right -->\n ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n ? html`<div\n class=${`${blockClass}__influencer`}\n ?wide=${influencerWidth}\n ?hidden=${!this._hasInfluencerRight \|\|\n this.width === TEARSHEET_WIDTH.NARROW}>\n <slot\n name=\"influencer\"\n data-postfix=\"right\"\n @slotchange=${this._checkSetHasSlot}></slot>\n </div>`\n : ''}\n </div>\n <!-- Action buttons -->\n <cds-custom-button-set-base\n class=${`${blockClass}__buttons ${blockClass}__button-container`}\n actions-multiple=${actionsMultiple}\n ?tearsheet-wide=${width === 'wide'}\n ?hidden=${this._actionsCount === 0}>\n <slot\n name=\"actions\"\n @slotchange=${this._handleActionsChange}></slot>\n </cds-custom-button-set-base>\n </div>\n </cds-custom-modal-body>\n </div>\n <a\n id=\"end-sentinel\"\n class=\"${prefix}--visually-hidden\"\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n `;\n }\n\n _checkSetOpen = () => {\n const { _tearsheet: tearsheet } = this;\n if (tearsheet && this._isOpen) {\n // wait until the tearsheet has transitioned off the screen to remove\n tearsheet.addEventListener('transitionend', () => {\n this._isOpen = false;\n });\n } else {\n // allow the html to render before animating in the tearsheet\n window.requestAnimationFrame(() => {\n this._isOpen = this.open;\n });\n }\n };\n\n async updated(changedProperties) {\n if (changedProperties.has('width')) {\n this._checkUpdateActionSizes();\n }\n\n if (\n process.env.NODE_ENV === 'development' &&\n (changedProperties.has('width') \|\|\n changedProperties.has('_hasHeaderNavigation') \|\|\n changedProperties.has('_hasInfluencerLeft') \|\|\n changedProperties.has('_hasInfluencerRight') \|\|\n changedProperties.has('_hasHeaderActions'))\n ) {\n if (this.width === 'narrow') {\n if (this._hasHeaderNavigation) {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(\n `Header navigation is not permitted in narrow Tearsheet.`\n );\n }\n if (this._hasInfluencerLeft \|\| this._hasInfluencerRight) {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(`Influencer is not permitted in narrow Tearsheet.`);\n }\n if (this._hasHeaderActions) {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(\n `Header actions are not permitted in narrow Tearsheet.`\n );\n }\n }\n }\n\n if (changedProperties.has('open')) {\n this._updateStack();\n\n this._checkSetOpen();\n if (this.open) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n this._launcher = this.ownerDocument!.activeElement;\n const focusNode =\n this.selectorInitialFocus &&\n this.querySelector(this.selectorInitialFocus);\n\n await (this.constructor as typeof CDSTearsheet)._delay();\n if (focusNode) {\n // For cases where a `carbon-web-components` component (e.g. `<cds-custom-button>`) being `primaryFocusNode`,\n // where its first update/render cycle that makes it focusable happens after `<cds-custom-tearsheet>`'s first update/render cycle\n (focusNode as HTMLElement).focus();\n } else if (\n !tryFocusElems(\n this.querySelectorAll(\n (this.constructor as typeof CDSTearsheet).selectorTabbable\n ),\n true\n )\n ) {\n this.focus();\n }\n } else if (\n this._launcher &&\n typeof (this._launcher as HTMLElement).focus === 'function'\n ) {\n (this._launcher as HTMLElement).focus();\n this._launcher = null;\n }\n }\n }\n\n /\n @param ms The number of milliseconds.\n * @returns A promise that is resolves after the given milliseconds.\n /\n private static _delay(ms = 0) {\n return new Promise((resolve) => {\n setTimeout(resolve, ms);\n });\n }\n\n /\n A selector selecting buttons that should close this modal.\n /\n static get selectorCloseButton() {\n return `[data-modal-close],${prefix}-modal-close-button`;\n }\n\n /\n A selector selecting tabbable nodes.\n /\n static get selectorTabbable() {\n return selectorTabbable;\n }\n\n /\n The name of the custom event fired before this tearsheet is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n /\n static get eventBeforeClose() {\n return `${prefix}-tearsheet-beingclosed`;\n }\n\n /\n The name of the custom event fired after this tearsheet is closed upon a user gesture.\n /\n static get eventClose() {\n return `${prefix}-tearsheet-closed`;\n }\n\n /\n The name of the custom event fired on clicking the navigate back button\n */\n static get eventNavigateBack() {\n return `${prefix}-tearsheet-header-navigate-back`;\n }\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}

package/es-custom/components/text-input/defs.js CHANGED Viewed

@@ -6,7 +6,6 @@
  */
 import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
 //#region src/components/text-input/defs.ts
 /**
 * Input size.
@@ -83,7 +82,7 @@ let INPUT_TYPE = /* @__PURE__ */ function(INPUT_TYPE) {
 	INPUT_TYPE["URL"] = "url";
 	return INPUT_TYPE;
 }({});
 //#endregion
 export { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE };
 //# sourceMappingURL=defs.js.map

package/es-custom/components/text-input/defs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/text-input/defs.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2020, 2023\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nexport { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/\n Input size.\n /\nexport enum INPUT_SIZE {\n /\n Small size.\n /\n SMALL = 'sm',\n\n /\n Regular size, same as medium size.\n /\n MEDIUM = 'md',\n\n /\n Large size.\n /\n LARGE = 'lg',\n\n // TODO: deprecate\n /\n Extra large size.\n /\n EXTRA_LARGE = 'xl',\n}\n\n/\n Input tooltop alignment\n /\nexport enum INPUT_TOOLTIP_ALIGNMENT {\n /\n Small size.\n /\n START = 'start',\n\n /\n Regular size, same as medium size.\n /\n CENTER = 'center',\n\n /\n Large size.\n /\n END = 'end',\n}\n\n/\n Input tooltop direction\n /\nexport enum INPUT_TOOLTIP_DIRECTION {\n /\n Small size.\n /\n TOP = 'top',\n\n /\n Regular size, same as medium size.\n /\n RIGHT = 'right',\n\n /\n Large size.\n /\n BOTTOM = 'bottom',\n\n /\n Regular size, same as medium size.\n /\n LEFT = 'left',\n}\n\n/\n Supported input types.\n \n For this component we only support textual types\n */\nexport enum INPUT_TYPE {\n EMAIL = 'email',\n PASSWORD = 'password',\n TEL = 'tel',\n TEXT = 'text',\n URL = 'url',\n}\n"],"mappings":"~~;;;;;;;;;;;;;~~AAYA,IAAY,~~kDAAL~~;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAMA~~;;;;;;AAMF~~,IAAY,~~4EAAL~~;;;;AAIL;;;;AAKA;;;;AAKA~~;;;;;;AAMF~~,IAAY,~~4EAAL~~;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAKA~~;;;;;;;;AAQF~~,IAAY,~~kDAAL~~;AACL;AACA;AACA;AACA;AACA"}
1	+ {"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/text-input/defs.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2020, 2023\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nexport { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/\n Input size.\n /\nexport enum INPUT_SIZE {\n /\n Small size.\n /\n SMALL = 'sm',\n\n /\n Regular size, same as medium size.\n /\n MEDIUM = 'md',\n\n /\n Large size.\n /\n LARGE = 'lg',\n\n // TODO: deprecate\n /\n Extra large size.\n /\n EXTRA_LARGE = 'xl',\n}\n\n/\n Input tooltop alignment\n /\nexport enum INPUT_TOOLTIP_ALIGNMENT {\n /\n Small size.\n /\n START = 'start',\n\n /\n Regular size, same as medium size.\n /\n CENTER = 'center',\n\n /\n Large size.\n /\n END = 'end',\n}\n\n/\n Input tooltop direction\n /\nexport enum INPUT_TOOLTIP_DIRECTION {\n /\n Small size.\n /\n TOP = 'top',\n\n /\n Regular size, same as medium size.\n /\n RIGHT = 'right',\n\n /\n Large size.\n /\n BOTTOM = 'bottom',\n\n /\n Regular size, same as medium size.\n /\n LEFT = 'left',\n}\n\n/\n Supported input types.\n \n For this component we only support textual types\n */\nexport enum INPUT_TYPE {\n EMAIL = 'email',\n PASSWORD = 'password',\n TEL = 'tel',\n TEXT = 'text',\n URL = 'url',\n}\n"],"mappings":";;;;;;;;;;;;AAYA,IAAY,aAAL,yBAAA,YAAA;;;;AAIL,YAAA,WAAA;;;;AAKA,YAAA,YAAA;;;;AAKA,YAAA,WAAA;;;;AAMA,YAAA,iBAAA;;KACD;;;;AAKD,IAAY,0BAAL,yBAAA,yBAAA;;;;AAIL,yBAAA,WAAA;;;;AAKA,yBAAA,YAAA;;;;AAKA,yBAAA,SAAA;;KACD;;;;AAKD,IAAY,0BAAL,yBAAA,yBAAA;;;;AAIL,yBAAA,SAAA;;;;AAKA,yBAAA,WAAA;;;;AAKA,yBAAA,YAAA;;;;AAKA,yBAAA,UAAA;;KACD;;;;;;AAOD,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,WAAA;AACA,YAAA,cAAA;AACA,YAAA,SAAA;AACA,YAAA,UAAA;AACA,YAAA,SAAA;;KACD"}

package/es-custom/components/text-input/stories/helpers.js CHANGED Viewed

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { FORM_ELEMENT_COLOR_SCHEME } from "../../../globals/shared-enums.js";
-import { INPUT_SIZE, INPUT_TYPE } from "../defs.js";
+import "../../../globals/shared-enums.js";
+import { INPUT_TYPE } from "../defs.js";
 import "../text-input.js";
 import { action } from "storybook/actions";
 //#region src/components/text-input/stories/helpers.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -22,16 +21,16 @@ const inputTypes = Object.entries(INPUT_TYPE).reduce((acc, [key, val]) => ({
 	[`${key.toLowerCase()}`]: val
 }), {});
 const sizes = {
-	[`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-	[`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
-	[`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE
+	[`Small size (sm)`]: "sm",
+	[`Medium size (md)`]: "md",
+	[`Large size (lg)`]: "lg"
 };
 const colorSchemes = {
 	[`Regular`]: null,
-	[`Light (${FORM_ELEMENT_COLOR_SCHEME.LIGHT})`]: FORM_ELEMENT_COLOR_SCHEME.LIGHT
+	[`Light (light)`]: "light"
 };
 const createProps = ({ boolean, textNonEmpty, select }) => {
-	const type = select("Input type (type)", inputTypes, INPUT_TYPE.TEXT);
+	const type = select("Input type (type)", inputTypes, "text");
 	return {
 		colorScheme: select("Color scheme (color-scheme)", colorSchemes, null),
 		disabled: boolean("Disabled (disabled)", false),
@@ -39,12 +38,12 @@ const createProps = ({ boolean, textNonEmpty, select }) => {
 		placeholder: textNonEmpty("Placeholder text (placeholder)", "Optional placeholder text"),
 		invalid: boolean("Invalid (invalid)", false),
 		onInput: action("input"),
-		showPasswordVisibilityToggle: type === INPUT_TYPE.TEXT || type === INPUT_TYPE.PASSWORD ? boolean("Show password visibility toggle (show-password-visibility-toggle)", false) : null,
-		size: select("Input size (size)", sizes, INPUT_SIZE.MEDIUM),
+		showPasswordVisibilityToggle: type === "text" || type === "password" ? boolean("Show password visibility toggle (show-password-visibility-toggle)", false) : null,
+		size: select("Input size (size)", sizes, "md"),
 		type
 	};
 };
 //#endregion
 export { createProps as default };
 //# sourceMappingURL=helpers.js.map

package/es-custom/components/text-input/stories/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.js","names":[~~"INPUT_COLOR_SCHEME"~~],"sources":["../../../../src/components/text-input/stories/helpers.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2023\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { action } from 'storybook/actions';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from '../text-input';\n\nconst inputTypes = Object.entries(INPUT_TYPE).reduce(\n (acc, [key, val]) => ({\n ...acc,\n [`${key.toLowerCase()}`]: val,\n }),\n {}\n);\n\nconst sizes = {\n [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,\n [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,\n [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,\n};\n\nconst colorSchemes = {\n [`Regular`]: null,\n [`Light (${INPUT_COLOR_SCHEME.LIGHT})`]: INPUT_COLOR_SCHEME.LIGHT,\n};\n\nconst createProps = ({ boolean, textNonEmpty, select }) => {\n const type = select('Input type (type)', inputTypes, INPUT_TYPE.TEXT);\n return {\n colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),\n disabled: boolean('Disabled (disabled)', false),\n value: textNonEmpty('Input value (value)', ''),\n placeholder: textNonEmpty(\n 'Placeholder text (placeholder)',\n 'Optional placeholder text'\n ),\n invalid: boolean('Invalid (invalid)', false),\n onInput: action('input'),\n showPasswordVisibilityToggle:\n type === INPUT_TYPE.TEXT \|\| type === INPUT_TYPE.PASSWORD\n ? boolean(\n 'Show password visibility toggle (show-password-visibility-toggle)',\n false\n )\n : null,\n size: select('Input size (size)', sizes, INPUT_SIZE.MEDIUM),\n type,\n };\n};\n\nexport default createProps;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;~~AAUA,MAAM,aAAa,OAAO,QAAQ,WAAW,CAAC,QAC3C,KAAK,CAAC,KAAK,UAAU;CACpB,GAAG;EACF,GAAG,IAAI,aAAa,KAAK;CAC3B,GACD,EAAE,CACH;AAED,MAAM,QAAQ;EACX,~~eAAe,WAAW,MAAM,KAAK,WAAW~~;~~EAChD~~,~~gBAAgB,WAAW,OAAO,KAAK,WAAW~~;~~EAClD~~,~~eAAe,WAAW,MAAM,KAAK,WAAW~~;~~CAClD~~;AAED,MAAM,eAAe;EAClB,YAAY;EACZ,~~UAAUA,0BAAmB,MAAM,KAAKA,0BAAmB~~;~~CAC7D~~;AAED,MAAM,eAAe,EAAE,SAAS,cAAc,aAAa;CACzD,MAAM,OAAO,OAAO,qBAAqB,~~YAAY~~,~~WAAW,KAAK~~;AACrE,QAAO;EACL,aAAa,OAAO,+BAA+B,cAAc,KAAK;EACtE,UAAU,QAAQ,uBAAuB,MAAM;EAC/C,OAAO,aAAa,uBAAuB,GAAG;EAC9C,aAAa,aACX,kCACA,4BACD;EACD,SAAS,QAAQ,qBAAqB,MAAM;EAC5C,SAAS,OAAO,QAAQ;EACxB,8BACE,~~SAAS~~,~~WAAW~~,~~QAAQ~~,~~SAAS~~,~~WAAW,WAC5C,~~QACE,qEACA,MACD,GACD;EACN,MAAM,OAAO,qBAAqB,~~OAAO~~,~~WAAW,OAAO~~;EAC3D;EACD"}
1	+ {"version":3,"file":"helpers.js","names":[],"sources":["../../../../src/components/text-input/stories/helpers.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2023\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { action } from 'storybook/actions';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from '../text-input';\n\nconst inputTypes = Object.entries(INPUT_TYPE).reduce(\n (acc, [key, val]) => ({\n ...acc,\n [`${key.toLowerCase()}`]: val,\n }),\n {}\n);\n\nconst sizes = {\n [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,\n [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,\n [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,\n};\n\nconst colorSchemes = {\n [`Regular`]: null,\n [`Light (${INPUT_COLOR_SCHEME.LIGHT})`]: INPUT_COLOR_SCHEME.LIGHT,\n};\n\nconst createProps = ({ boolean, textNonEmpty, select }) => {\n const type = select('Input type (type)', inputTypes, INPUT_TYPE.TEXT);\n return {\n colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),\n disabled: boolean('Disabled (disabled)', false),\n value: textNonEmpty('Input value (value)', ''),\n placeholder: textNonEmpty(\n 'Placeholder text (placeholder)',\n 'Optional placeholder text'\n ),\n invalid: boolean('Invalid (invalid)', false),\n onInput: action('input'),\n showPasswordVisibilityToggle:\n type === INPUT_TYPE.TEXT \|\| type === INPUT_TYPE.PASSWORD\n ? boolean(\n 'Show password visibility toggle (show-password-visibility-toggle)',\n false\n )\n : null,\n size: select('Input size (size)', sizes, INPUT_SIZE.MEDIUM),\n type,\n };\n};\n\nexport default createProps;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,QAAQ,WAAW,CAAC,QAC3C,KAAK,CAAC,KAAK,UAAU;CACpB,GAAG;EACF,GAAG,IAAI,aAAa,KAAK;CAC3B,GACD,EAAE,CACH;AAED,MAAM,QAAQ;EACX,oBAAgC;EAChC,qBAAkC;EAClC,oBAAgC;CAClC;AAED,MAAM,eAAe;EAClB,YAAY;EACZ,kBAAmC;CACrC;AAED,MAAM,eAAe,EAAE,SAAS,cAAc,aAAa;CACzD,MAAM,OAAO,OAAO,qBAAqB,YAAA,OAA4B;AACrE,QAAO;EACL,aAAa,OAAO,+BAA+B,cAAc,KAAK;EACtE,UAAU,QAAQ,uBAAuB,MAAM;EAC/C,OAAO,aAAa,uBAAuB,GAAG;EAC9C,aAAa,aACX,kCACA,4BACD;EACD,SAAS,QAAQ,qBAAqB,MAAM;EAC5C,SAAS,OAAO,QAAQ;EACxB,8BACE,SAAA,UAA4B,SAAA,aACxB,QACE,qEACA,MACD,GACD;EACN,MAAM,OAAO,qBAAqB,OAAA,KAAyB;EAC3D;EACD"}

package/es-custom/components/text-input/text-input-skeleton.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 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.
@@ -8,7 +8,7 @@ import { LitElement } from 'lit';
 /**
  * @element cds-custom-text-input-skeleton
  *
- * Skeleton of number input.
+ * Skeleton of text input.
  */
 declare class CDSTextInputSkeleton extends LitElement {
     /**

package/es-custom/components/text-input/text-input-skeleton.js CHANGED Viewed

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import text_input_default from "./text-input.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/components/text-input/text-input-skeleton.ts
 /**
-* Copyright IBM Corp. 2019, 2025
+* Copyright IBM Corp. 2019, 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.
@@ -22,7 +21,7 @@ import { property } from "lit/decorators.js";
 /**
 * @element cds-custom-text-input-skeleton
 *
-* Skeleton of number input.
+* Skeleton of text input.
 */
 let CDSTextInputSkeleton = class CDSTextInputSkeleton extends LitElement {
 	constructor(..._args) {
@@ -32,8 +31,8 @@ let CDSTextInputSkeleton = class CDSTextInputSkeleton extends LitElement {
 	render() {
 		const { hideLabel } = this;
 		return html`
-      ${hideLabel ? "" : html`<span class="${prefix}--label ${prefix}--skeleton"></span>`}
-      <div class="${prefix}--text-input ${prefix}--skeleton"></div>
+      ${hideLabel ? "" : html`<span class="${"cds-custom"}--label ${"cds-custom"}--skeleton"></span>`}
+      <div class="${"cds-custom"}--text-input ${"cds-custom"}--skeleton"></div>
     `;
 	}
 	static {
@@ -45,9 +44,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "hide-label"
 })], CDSTextInputSkeleton.prototype, "hideLabel", void 0);
-CDSTextInputSkeleton = __decorate([carbonElement(`${prefix}-text-input-skeleton`)], CDSTextInputSkeleton);
+CDSTextInputSkeleton = __decorate([carbonElement(`cds-custom-text-input-skeleton`)], CDSTextInputSkeleton);
 var text_input_skeleton_default = CDSTextInputSkeleton;
 //#endregion
 export { text_input_skeleton_default as default };
 //# sourceMappingURL=text-input-skeleton.js.map

package/es-custom/components/text-input/text-input-skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/text-input/text-input-skeleton.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, ~~2025~~\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './text-input.scss?lit';\n\n/\n @element cds-custom-text-input-skeleton\n \n Skeleton of ~~number~~ input.\n /\n@customElement(`${prefix}-text-input-skeleton`)\nclass CDSTextInputSkeleton extends LitElement {\n /\n Specify whether the label should be hidden, or not\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n render() {\n const { hideLabel } = this;\n return html`\n ${hideLabel\n ? ''\n : html`<span class=\"${prefix}--label ${prefix}--skeleton\"></span>`}\n <div class=\"${prefix}--text-input ${prefix}--skeleton\"></div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTextInputSkeleton;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkBA,~~iCACM~~,6BAA6B,WAAW;;;mBAKhC;;CAEZ,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;QACP,YACE,KACA,IAAI,~~gBAAgB~~,~~OAAO~~,~~UAAU~~,~~OAAO~~,qBAAqB;~~oBACvD~~,~~OAAO~~,~~eAAe,OAAO~~;;;;gBAI/BA;;;YAbf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC;mCALrEC,cAAc,~~GAAG~~,~~OAAO~~,~~sBAAsB~~;AAqB/C,~~kCAAe~~"}
1	+ {"version":3,"file":"text-input-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/text-input/text-input-skeleton.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2026\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './text-input.scss?lit';\n\n/\n @element cds-custom-text-input-skeleton\n \n Skeleton of text input.\n /\n@customElement(`${prefix}-text-input-skeleton`)\nclass CDSTextInputSkeleton extends LitElement {\n /\n Specify whether the label should be hidden, or not\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n render() {\n const { hideLabel } = this;\n return html`\n ${hideLabel\n ? ''\n : html`<span class=\"${prefix}--label ${prefix}--skeleton\"></span>`}\n <div class=\"${prefix}--text-input ${prefix}--skeleton\"></div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTextInputSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,uBAAA,MACM,6BAA6B,WAAW;;;mBAKhC;;CAEZ,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;QACP,YACE,KACA,IAAI,gBAAA,MAAuB,UAAA,MAAiB,qBAAqB;0BAChD,eAAA,MAAsB;;;;gBAI/BA;;;YAbf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,qBAAA,WAAA,aAAA,KAAA,EAAA;mCALrEC,cAAc,0BAAgC,CAAA,EAAA,qBAAA;AAqB/C,IAAA,8BAAe"}