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

@carbon/web-components 2.52.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 (1760) hide show

package/es-custom/components/data-table/table-header-description.js CHANGED Viewed

@@ -5,12 +5,11 @@
  * 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 data_table_default from "./data-table.scss.js";
 import { LitElement, html } from "lit";
 //#region src/components/data-table/table-header-description.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -31,9 +30,9 @@ let CDSTableHeaderDescription = class CDSTableHeaderDescription extends LitEleme
 		this.styles = data_table_default;
 	}
 };
-CDSTableHeaderDescription = __decorate([carbonElement(`${prefix}-table-header-description`)], CDSTableHeaderDescription);
+CDSTableHeaderDescription = __decorate([carbonElement(`cds-custom-table-header-description`)], CDSTableHeaderDescription);
 var table_header_description_default = CDSTableHeaderDescription;
 //#endregion
 export { table_header_description_default as default };
 //# sourceMappingURL=table-header-description.js.map

package/es-custom/components/data-table/table-header-description.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header-description.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-header-description.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Data table header description\n \n @element cds-custom-table-header-description\n */\n@customElement(`${prefix}-table-header-description`)\nclass CDSTableHeaderDescription extends LitElement {\n render() {\n return html` <slot></slot> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableHeaderDescription;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiBA,~~sCACM~~,kCAAkC,WAAW;CACjD,SAAS;AACP,SAAO,IAAI;;;gBAGGA;;;wCANjBC,cAAc,~~GAAG~~,~~OAAO~~,~~2BAA2B~~;AASpD,~~uCAAe~~"}
1	+ {"version":3,"file":"table-header-description.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-header-description.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Data table header description\n \n @element cds-custom-table-header-description\n */\n@customElement(`${prefix}-table-header-description`)\nclass CDSTableHeaderDescription extends LitElement {\n render() {\n return html` <slot></slot> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableHeaderDescription;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,4BAAA,MACM,kCAAkC,WAAW;CACjD,SAAS;AACP,SAAO,IAAI;;;gBAGGA;;;wCANjBC,cAAc,+BAAqC,CAAA,EAAA,0BAAA;AASpD,IAAA,mCAAe"}

package/es-custom/components/data-table/table-header-row.js CHANGED Viewed

@@ -5,11 +5,10 @@
  * 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 table_row_default from "./table-row.js";
 //#region src/components/data-table/table-header-row.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -31,12 +30,12 @@ let CDSTableHeaderRow = class CDSTableHeaderRow extends table_row_default {
 	* Cancellation of this event stops the user-initiated change in selection.
 	*/
 	static get eventBeforeChangeSelection() {
-		return `${prefix}-table-change-selection-all`;
+		return `cds-custom-table-change-selection-all`;
 	}
 };
-CDSTableHeaderRow = __decorate([carbonElement(`${prefix}-table-header-row`)], CDSTableHeaderRow);
+CDSTableHeaderRow = __decorate([carbonElement(`cds-custom-table-header-row`)], CDSTableHeaderRow);
 var table_header_row_default = CDSTableHeaderRow;
 //#endregion
 export { table_header_row_default as default };
 //# sourceMappingURL=table-header-row.js.map

package/es-custom/components/data-table/table-header-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header-row.js","names":["CDSTableRow","customElement"],"sources":["../../../src/components/data-table/table-header-row.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { prefix } from '../../globals/settings';\nimport CDSTableRow from './table-row';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Data table header row.\n \n @element cds-custom-table-header-row\n * @fires cds-custom-table-change-selection-all\n * The name of the custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n /\n@customElement(`${prefix}-table-header-row`)\nclass CDSTableHeaderRow extends CDSTableRow {\n /\n The name of the custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n */\n static get eventBeforeChangeSelection() {\n return `${prefix}-table-change-selection-all`;\n }\n}\n\nexport default CDSTableHeaderRow;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAmBA,~~8BACM~~,0BAA0BA,kBAAY;;;;;CAK1C,WAAW,6BAA6B;AACtC,SAAO~~,GAAG,OAAO~~;;;~~gCAPpBC~~,cAAc,~~GAAG~~,~~OAAO~~,~~mBAAmB~~;AAW5C~~,+BAAe~~"}
1	+ {"version":3,"file":"table-header-row.js","names":["CDSTableRow","customElement"],"sources":["../../../src/components/data-table/table-header-row.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { prefix } from '../../globals/settings';\nimport CDSTableRow from './table-row';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Data table header row.\n \n @element cds-custom-table-header-row\n * @fires cds-custom-table-change-selection-all\n * The name of the custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n /\n@customElement(`${prefix}-table-header-row`)\nclass CDSTableHeaderRow extends CDSTableRow {\n /\n The name of the custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n */\n static get eventBeforeChangeSelection() {\n return `${prefix}-table-change-selection-all`;\n }\n}\n\nexport default CDSTableHeaderRow;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,oBAAA,MACM,0BAA0BA,kBAAY;;;;;CAK1C,WAAW,6BAA6B;AACtC,SAAO;;;gCAPVC,cAAc,uBAA6B,CAAA,EAAA,kBAAA;AAW5C,IAAA,2BAAe"}

package/es-custom/components/data-table/table-header-title.js CHANGED Viewed

@@ -5,12 +5,11 @@
  * 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 data_table_default from "./data-table.scss.js";
 import { LitElement, html } from "lit";
 //#region src/components/data-table/table-header-title.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -31,9 +30,9 @@ let CDSTableHeader = class CDSTableHeader extends LitElement {
 		this.styles = data_table_default;
 	}
 };
-CDSTableHeader = __decorate([carbonElement(`${prefix}-table-header-title`)], CDSTableHeader);
+CDSTableHeader = __decorate([carbonElement(`cds-custom-table-header-title`)], CDSTableHeader);
 var table_header_title_default = CDSTableHeader;
 //#endregion
 export { table_header_title_default as default };
 //# sourceMappingURL=table-header-title.js.map

package/es-custom/components/data-table/table-header-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header-title.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-header-title.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Data table header title\n \n @element cds-custom-table-header-title\n */\n@customElement(`${prefix}-table-header-title`)\nclass CDSTableHeader extends LitElement {\n render() {\n return html` <slot></slot> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableHeader;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiBA,~~2BACM~~,uBAAuB,WAAW;CACtC,SAAS;AACP,SAAO,IAAI;;;gBAGGA;;;6BANjBC,cAAc,~~GAAG~~,~~OAAO~~,~~qBAAqB~~;AAS9C,~~iCAAe~~"}
1	+ {"version":3,"file":"table-header-title.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-header-title.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Data table header title\n \n @element cds-custom-table-header-title\n */\n@customElement(`${prefix}-table-header-title`)\nclass CDSTableHeader extends LitElement {\n render() {\n return html` <slot></slot> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,iBAAA,MACM,uBAAuB,WAAW;CACtC,SAAS;AACP,SAAO,IAAI;;;gBAGGA;;;6BANjBC,cAAc,yBAA+B,CAAA,EAAA,eAAA;AAS9C,IAAA,6BAAe"}

package/es-custom/components/data-table/table-row.js CHANGED Viewed

@@ -5,9 +5,9 @@
  * 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 iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
@@ -18,7 +18,6 @@ import "../radio-button/index.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import ChevronRight16 from "@carbon/icons/es/chevron--right/16.js";
 //#region src/components/data-table/table-row.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -148,14 +147,14 @@ let CDSTableRow = class CDSTableRow extends HostListenerMixin(FocusMixin(LitElem
 	_renderExpandButton() {
 		const { _handleClickExpando: handleClickExpando } = this;
 		return html`
-      <div class="${prefix}--table-expand">
+      <div class="${"cds-custom"}--table-expand">
         <div>
           <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
           <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
           ${this.expandable ? html`<button
-                class="${prefix}--table-expand__button"
+                class="${"cds-custom"}--table-expand__button"
                 @click="${handleClickExpando}">
-                ${iconLoader(ChevronRight16, { class: `${prefix}--table-expand__svg` })}
+                ${iconLoader(ChevronRight16, { class: `cds-custom--table-expand__svg` })}
               </button>` : html`&nbsp;`}
           <!-- Add non-breaking space for proper styling -->
         </div>
@@ -179,7 +178,7 @@ let CDSTableRow = class CDSTableRow extends HostListenerMixin(FocusMixin(LitElem
 	_renderFirstCells() {
 		const { disabled, hideCheckbox, radio, selected, selectionLabel, selectionName, selectionValue } = this;
 		return !selectionName ? void 0 : html`
-          <div class="${prefix}--table-column-checkbox">
+          <div class="${"cds-custom"}--table-column-checkbox">
             <div>
               <slot
                 name="ai-label"
@@ -233,38 +232,38 @@ let CDSTableRow = class CDSTableRow extends HostListenerMixin(FocusMixin(LitElem
 	* The name of the custom event fired after this radio button changes its checked state.
 	*/
 	static get eventRadioChange() {
-		return `${prefix}-radio-button-changed`;
+		return `cds-custom-radio-button-changed`;
 	}
 	/**
 	* The name of the custom event fired after this radio button changes its checked state.
 	*/
 	static get eventCheckboxChange() {
-		return `${prefix}-checkbox-changed`;
+		return `cds-custom-checkbox-changed`;
 	}
 	/**
 	* The name of the custom event fired before this row is selected/unselected upon a user gesture.
 	* Cancellation of this event stops the user-initiated change in selection.
 	*/
 	static get eventBeforeChangeSelection() {
-		return `${prefix}-table-row-change-selection`;
+		return `cds-custom-table-row-change-selection`;
 	}
 	/**
 	* A selector that will return the parent table
 	*/
 	static get selectorTable() {
-		return `${prefix}-table`;
+		return `cds-custom-table`;
 	}
 	/**
 	* The CSS selector to find the overflow menu on the table cell
 	*/
 	static get selectorTableCellOverflowMenu() {
-		return `${prefix}-table-cell ${prefix}-overflow-menu`;
+		return `cds-custom-table-cell cds-custom-overflow-menu`;
 	}
 	/**
 	* A selector that will return the corresponding expanded row.
 	*/
 	static get selectorExpandedRow() {
-		return `${prefix}-table-expanded-row`;
+		return `cds-custom-table-expanded-row`;
 	}
 	/**
 	* A selector that will return the slug item.
@@ -272,26 +271,26 @@ let CDSTableRow = class CDSTableRow extends HostListenerMixin(FocusMixin(LitElem
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-custom-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-custom-ai-label`;
 	}
 	/**
 	* The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.
 	* Cancellation of this event stops the user-initiated action of toggling the expanded state.
 	*/
 	static get eventBeforeExpandoToggle() {
-		return `${prefix}-table-row-expando-beingtoggled`;
+		return `cds-custom-table-row-expando-beingtoggled`;
 	}
 	/**
 	* The name of the custom event fired after the expanded state this row is toggled upon a user gesture.
 	*/
 	static get eventExpandoToggle() {
-		return `${prefix}-table-row-expando-toggled`;
+		return `cds-custom-table-row-expando-toggled`;
 	}
 	static {
 		this.styles = data_table_default;
@@ -354,9 +353,9 @@ __decorate([property({
 __decorate([property({ attribute: "selection-label" })], CDSTableRow.prototype, "selectionLabel", void 0);
 __decorate([property({ attribute: "selection-name" })], CDSTableRow.prototype, "selectionName", void 0);
 __decorate([property({ attribute: "selection-value" })], CDSTableRow.prototype, "selectionValue", void 0);
-CDSTableRow = __decorate([carbonElement(`${prefix}-table-row`)], CDSTableRow);
+CDSTableRow = __decorate([carbonElement(`cds-custom-table-row`)], CDSTableRow);
 var table_row_default = CDSTableRow;
 //#endregion
 export { table_row_default as default };
 //# sourceMappingURL=table-row.js.map

package/es-custom/components/data-table/table-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-row.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-row.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './data-table.scss?lit';\nimport '../checkbox';\nimport '../radio-button';\n\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSTableExpandedRow from './table-expanded-row';\nimport CDSTableCell from './table-cell';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/\n Data table row.\n \n @element cds-custom-table-row\n * @csspart selection-container The container of the checkbox.\n * @csspart selection The checkbox.\n * @fires cds-custom-table-row-change-selection\n * The custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n * @fires cds-custom-radio-button-changed\n * The name of the custom event fired after this radio button changes its checked state.\n * @fires cds-custom-checkbox-changed\n * The name of the custom event fired after this checkbox changes its checked state.\n * @fires cds-custom-table-row-expando-beingtoggled\n * The name of the custom event fired before the expanded state of this row is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling the expanded state.\n * @fires cds-custom-table-row-expando-toggled\n * The name of the custom event fired after the expanded state of this row is toggled upon a user gesture.\n /\n@customElement(`${prefix}-table-row`)\nclass CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n `true` if there is an AI Label.\n /\n protected _hasAILabel = false;\n\n /\n Handles `click` event on the radio button.\n \n @param event The event.\n /\n @HostListener('eventRadioChange')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n private _handleClickSelectionRadio(event: CustomEvent) {\n const { detail } = event;\n const selected = detail.checked;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n selected,\n },\n };\n const constructor = this.constructor as typeof CDSTableRow;\n if (\n this.dispatchEvent(\n new CustomEvent(constructor.eventBeforeChangeSelection, init)\n )\n ) {\n this.selected = selected;\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n\n if (this.nextElementSibling?.matches(selectorExpandedRow)) {\n (this.nextElementSibling as CDSTableExpandedRow).selected = selected;\n }\n }\n }\n\n /\n Handles `click` event on the check box.\n \n @param event The event.\n /\n @HostListener('eventCheckboxChange')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-expect-error\n private _handleClickSelectionCheckbox(event: CustomEvent) {\n const { detail } = event;\n const selected = detail.checked;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n selected,\n },\n };\n const constructor = this.constructor as typeof CDSTableRow;\n if (\n this.dispatchEvent(\n new CustomEvent(constructor.eventBeforeChangeSelection, init)\n )\n ) {\n this.selected = selected;\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n\n if (this.nextElementSibling?.matches(selectorExpandedRow)) {\n (this.nextElementSibling as CDSTableExpandedRow).selected = selected;\n }\n }\n }\n\n /\n Handles `click` event on the expando button.\n /\n private _handleClickExpando() {\n this._handleUserInitiatedToggleExpando();\n }\n\n /\n Handles `mouseover`/`mouseout` event handler on this element.\n \n @param event The event.\n /\n @HostListener('mouseover')\n @HostListener('mouseout')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleMouseOverOut(event: MouseEvent) {\n const { selectorExpandedRow, selectorTableCellOverflowMenu } = this\n .constructor as typeof CDSTableRow;\n const { nextElementSibling } = this;\n if (nextElementSibling?.matches(selectorExpandedRow)) {\n (nextElementSibling as CDSTableExpandedRow).highlighted =\n event.type === 'mouseover';\n }\n if (this.overflowMenuOnHover) {\n const overflowMenu = this.querySelector(selectorTableCellOverflowMenu);\n const parentCell = overflowMenu?.parentElement;\n\n if (event.type === 'mouseout') {\n (parentCell as CDSTableCell).overflowMenuOnHover = true;\n } else {\n (parentCell as CDSTableCell).overflowMenuOnHover = false;\n }\n }\n }\n\n /\n Handles user-initiated toggle request of the expando button in this table row.\n \n @param expanded The new expanded state.\n /\n _handleUserInitiatedToggleExpando(expanded = !this.expanded) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTableRow).eventBeforeExpandoToggle,\n init\n )\n )\n ) {\n this.expanded = expanded;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTableRow).eventExpandoToggle,\n init\n )\n );\n }\n }\n\n protected _renderExpandButton() {\n const { _handleClickExpando: handleClickExpando } = this;\n\n // Always use the same structure for consistency, but only render the button for expandable rows\n return html`\n <div class=\"${prefix}--table-expand\">\n <div>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.expandable\n ? html`<button\n class=\"${prefix}--table-expand__button\"\n @click=\"${handleClickExpando}\">\n ${iconLoader(ChevronRight16, {\n class: `${prefix}--table-expand__svg`,\n })}\n </button>`\n : html` `}\n <!-- Add non-breaking space for proper styling -->\n </div>\n </div>\n `;\n }\n\n /\n Handles `slotchange` event.\n /\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTableRow).aiLabelItem\n ) \|\|\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTableRow).slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n this._hasAILabel = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n }\n this.requestUpdate();\n }\n\n /\n @returns The first set of table cells.\n /\n protected _renderFirstCells() {\n const {\n disabled,\n hideCheckbox,\n radio,\n selected,\n selectionLabel,\n selectionName,\n selectionValue,\n } = this;\n return !selectionName\n ? undefined\n : html`\n <div class=\"${prefix}--table-column-checkbox\">\n <div>\n <slot\n name=\"ai-label\"\n @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${radio\n ? html`<cds-custom-radio-button data-table></cds-custom-radio-button>`\n : html`<cds-custom-checkbox\n hide-label\n ?hide-checkbox=\"${hideCheckbox}\"\n label-text=\"${selectionLabel}\"\n name=${selectionName}\n data-table\n ?disabled=${disabled}\n ?checked=${selected}\n value=${selectionValue}></cds-custom-checkbox> `}\n </div>\n </div>\n `;\n }\n\n /\n `true` if this table should support batch expansion\n /\n @property({ type: Boolean, reflect: true, attribute: 'batch-expansion' })\n batchExpansion = false;\n\n /\n `true` if this table row should be disabled.\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n `true` if this table row is placed at an even position in parent `<cds-custom-table-body>`.\n * `<cds-custom-table-body>` sets this property, _only_ in zebra stripe mode.\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n even = false;\n\n /\n `true` if this table row can be expanded to show content underneath\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n expandable = false;\n\n /\n `true` when the table row expanded is showing\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n `true` if this table row should be filtered out.\n /\n @property({ type: Boolean, reflect: true })\n filtered = false;\n\n /\n Specify whether the checkbox should be present in the DOM,\n * but invisible and uninteractable.\n /\n @property({ type: Boolean, reflect: true, attribute: 'hide-checkbox' })\n hideCheckbox = false;\n\n /\n `true` if the table row should be highlighted.\n /\n @property({ type: Boolean, reflect: true })\n highlighted = false;\n\n /\n `true` if this table row is placed at an odd position in parent `<cds-custom-table-body>`.\n * `<cds-custom-table-body>` sets this property, _only_ in zebra stripe mode.\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n odd = false;\n\n /\n Specify whether the overflow menu (if it exists) should be shown always, or only on hover\n /\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'overflow-menu-on-hover',\n })\n overflowMenuOnHover = false;\n\n /\n Specify whether the control should be a radio button or inline checkbox\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n radio = false;\n\n /\n `true` if this table row should be selected.\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n The `aria-label` attribute for the `<label>` for selection.\n /\n @property({ attribute: 'selection-label' })\n selectionLabel = 'Select row';\n\n /\n The `name` attribute for the `<input>` for selection.\n * If present, this table row will be a selectable one.\n /\n @property({ attribute: 'selection-name' })\n selectionName = '';\n\n /\n The `value` attribute for the `<input>` for selection.\n /\n @property({ attribute: 'selection-value' })\n selectionValue = '';\n\n /\n TODO: Uncomment when Carbon fully implements sticky header\n * Specify whether the header should be sticky.\n * Still experimental: may not work with every combination of table props\n /\n // @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n // stickyHeader = false;\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'row');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('expanded')) {\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n const { expanded, nextElementSibling } = this;\n if (nextElementSibling?.matches(selectorExpandedRow)) {\n (nextElementSibling as CDSTableExpandedRow).expanded = expanded;\n }\n }\n\n if (changedProperties.has('highlighted')) {\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n const { highlighted, nextElementSibling } = this;\n if (nextElementSibling?.matches(selectorExpandedRow)) {\n (nextElementSibling as CDSTableExpandedRow).highlighted = highlighted;\n }\n }\n\n if (this._hasAILabel) {\n this.setAttribute('ai-label', '');\n } else {\n this.removeAttribute('ai-label');\n }\n }\n\n render() {\n if (this.selectionName) {\n this.closest(\n (this.constructor as typeof CDSTableRow).selectorTable\n )?.setAttribute('is-selectable', '');\n }\n\n // Always render the expand button container for consistent table structure\n // The button itself will only be rendered if the row is expandable\n const tableHasExpandableRows = this.closest(\n (this.constructor as typeof CDSTableRow).selectorTable\n )?.hasAttribute('expandable');\n\n return html`\n ${tableHasExpandableRows ? this._renderExpandButton() : ''}\n ${this._renderFirstCells()}\n <slot></slot>\n `;\n }\n\n /\n The name of the custom event fired after this radio button changes its checked state.\n /\n static get eventRadioChange() {\n return `${prefix}-radio-button-changed`;\n }\n\n /\n The name of the custom event fired after this radio button changes its checked state.\n /\n static get eventCheckboxChange() {\n return `${prefix}-checkbox-changed`;\n }\n\n /\n The name of the custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n /\n static get eventBeforeChangeSelection() {\n return `${prefix}-table-row-change-selection`;\n }\n\n /\n A selector that will return the parent table\n /\n static get selectorTable() {\n return `${prefix}-table`;\n }\n\n /\n The CSS selector to find the overflow menu on the table cell\n /\n static get selectorTableCellOverflowMenu() {\n return `${prefix}-table-cell ${prefix}-overflow-menu`;\n }\n\n /\n A selector that will return the corresponding expanded row.\n /\n static get selectorExpandedRow() {\n return `${prefix}-table-expanded-row`;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n /\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n /\n The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling the expanded state.\n /\n static get eventBeforeExpandoToggle() {\n return `${prefix}-table-row-expando-beingtoggled`;\n }\n\n /\n The name of the custom event fired after the expanded state this row is toggled upon a user gesture.\n */\n static get eventExpandoToggle() {\n return `${prefix}-table-row-expando-toggled`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableRow;\n"],"mappings":"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"}
1	+ {"version":3,"file":"table-row.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-row.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 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 { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './data-table.scss?lit';\nimport '../checkbox';\nimport '../radio-button';\n\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSTableExpandedRow from './table-expanded-row';\nimport CDSTableCell from './table-cell';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/\n Data table row.\n \n @element cds-custom-table-row\n * @csspart selection-container The container of the checkbox.\n * @csspart selection The checkbox.\n * @fires cds-custom-table-row-change-selection\n * The custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n * @fires cds-custom-radio-button-changed\n * The name of the custom event fired after this radio button changes its checked state.\n * @fires cds-custom-checkbox-changed\n * The name of the custom event fired after this checkbox changes its checked state.\n * @fires cds-custom-table-row-expando-beingtoggled\n * The name of the custom event fired before the expanded state of this row is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling the expanded state.\n * @fires cds-custom-table-row-expando-toggled\n * The name of the custom event fired after the expanded state of this row is toggled upon a user gesture.\n /\n@customElement(`${prefix}-table-row`)\nclass CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n `true` if there is an AI Label.\n /\n protected _hasAILabel = false;\n\n /\n Handles `click` event on the radio button.\n \n @param event The event.\n /\n @HostListener('eventRadioChange')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n private _handleClickSelectionRadio(event: CustomEvent) {\n const { detail } = event;\n const selected = detail.checked;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n selected,\n },\n };\n const constructor = this.constructor as typeof CDSTableRow;\n if (\n this.dispatchEvent(\n new CustomEvent(constructor.eventBeforeChangeSelection, init)\n )\n ) {\n this.selected = selected;\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n\n if (this.nextElementSibling?.matches(selectorExpandedRow)) {\n (this.nextElementSibling as CDSTableExpandedRow).selected = selected;\n }\n }\n }\n\n /\n Handles `click` event on the check box.\n \n @param event The event.\n /\n @HostListener('eventCheckboxChange')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-expect-error\n private _handleClickSelectionCheckbox(event: CustomEvent) {\n const { detail } = event;\n const selected = detail.checked;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n selected,\n },\n };\n const constructor = this.constructor as typeof CDSTableRow;\n if (\n this.dispatchEvent(\n new CustomEvent(constructor.eventBeforeChangeSelection, init)\n )\n ) {\n this.selected = selected;\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n\n if (this.nextElementSibling?.matches(selectorExpandedRow)) {\n (this.nextElementSibling as CDSTableExpandedRow).selected = selected;\n }\n }\n }\n\n /\n Handles `click` event on the expando button.\n /\n private _handleClickExpando() {\n this._handleUserInitiatedToggleExpando();\n }\n\n /\n Handles `mouseover`/`mouseout` event handler on this element.\n \n @param event The event.\n /\n @HostListener('mouseover')\n @HostListener('mouseout')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleMouseOverOut(event: MouseEvent) {\n const { selectorExpandedRow, selectorTableCellOverflowMenu } = this\n .constructor as typeof CDSTableRow;\n const { nextElementSibling } = this;\n if (nextElementSibling?.matches(selectorExpandedRow)) {\n (nextElementSibling as CDSTableExpandedRow).highlighted =\n event.type === 'mouseover';\n }\n if (this.overflowMenuOnHover) {\n const overflowMenu = this.querySelector(selectorTableCellOverflowMenu);\n const parentCell = overflowMenu?.parentElement;\n\n if (event.type === 'mouseout') {\n (parentCell as CDSTableCell).overflowMenuOnHover = true;\n } else {\n (parentCell as CDSTableCell).overflowMenuOnHover = false;\n }\n }\n }\n\n /\n Handles user-initiated toggle request of the expando button in this table row.\n \n @param expanded The new expanded state.\n /\n _handleUserInitiatedToggleExpando(expanded = !this.expanded) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTableRow).eventBeforeExpandoToggle,\n init\n )\n )\n ) {\n this.expanded = expanded;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTableRow).eventExpandoToggle,\n init\n )\n );\n }\n }\n\n protected _renderExpandButton() {\n const { _handleClickExpando: handleClickExpando } = this;\n\n // Always use the same structure for consistency, but only render the button for expandable rows\n return html`\n <div class=\"${prefix}--table-expand\">\n <div>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.expandable\n ? html`<button\n class=\"${prefix}--table-expand__button\"\n @click=\"${handleClickExpando}\">\n ${iconLoader(ChevronRight16, {\n class: `${prefix}--table-expand__svg`,\n })}\n </button>`\n : html` `}\n <!-- Add non-breaking space for proper styling -->\n </div>\n </div>\n `;\n }\n\n /\n Handles `slotchange` event.\n /\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTableRow).aiLabelItem\n ) \|\|\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTableRow).slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n this._hasAILabel = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n }\n this.requestUpdate();\n }\n\n /\n @returns The first set of table cells.\n /\n protected _renderFirstCells() {\n const {\n disabled,\n hideCheckbox,\n radio,\n selected,\n selectionLabel,\n selectionName,\n selectionValue,\n } = this;\n return !selectionName\n ? undefined\n : html`\n <div class=\"${prefix}--table-column-checkbox\">\n <div>\n <slot\n name=\"ai-label\"\n @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${radio\n ? html`<cds-custom-radio-button data-table></cds-custom-radio-button>`\n : html`<cds-custom-checkbox\n hide-label\n ?hide-checkbox=\"${hideCheckbox}\"\n label-text=\"${selectionLabel}\"\n name=${selectionName}\n data-table\n ?disabled=${disabled}\n ?checked=${selected}\n value=${selectionValue}></cds-custom-checkbox> `}\n </div>\n </div>\n `;\n }\n\n /\n `true` if this table should support batch expansion\n /\n @property({ type: Boolean, reflect: true, attribute: 'batch-expansion' })\n batchExpansion = false;\n\n /\n `true` if this table row should be disabled.\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n `true` if this table row is placed at an even position in parent `<cds-custom-table-body>`.\n * `<cds-custom-table-body>` sets this property, _only_ in zebra stripe mode.\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n even = false;\n\n /\n `true` if this table row can be expanded to show content underneath\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n expandable = false;\n\n /\n `true` when the table row expanded is showing\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n `true` if this table row should be filtered out.\n /\n @property({ type: Boolean, reflect: true })\n filtered = false;\n\n /\n Specify whether the checkbox should be present in the DOM,\n * but invisible and uninteractable.\n /\n @property({ type: Boolean, reflect: true, attribute: 'hide-checkbox' })\n hideCheckbox = false;\n\n /\n `true` if the table row should be highlighted.\n /\n @property({ type: Boolean, reflect: true })\n highlighted = false;\n\n /\n `true` if this table row is placed at an odd position in parent `<cds-custom-table-body>`.\n * `<cds-custom-table-body>` sets this property, _only_ in zebra stripe mode.\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n odd = false;\n\n /\n Specify whether the overflow menu (if it exists) should be shown always, or only on hover\n /\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'overflow-menu-on-hover',\n })\n overflowMenuOnHover = false;\n\n /\n Specify whether the control should be a radio button or inline checkbox\n \n @private\n /\n @property({ type: Boolean, reflect: true })\n radio = false;\n\n /\n `true` if this table row should be selected.\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n The `aria-label` attribute for the `<label>` for selection.\n /\n @property({ attribute: 'selection-label' })\n selectionLabel = 'Select row';\n\n /\n The `name` attribute for the `<input>` for selection.\n * If present, this table row will be a selectable one.\n /\n @property({ attribute: 'selection-name' })\n selectionName = '';\n\n /\n The `value` attribute for the `<input>` for selection.\n /\n @property({ attribute: 'selection-value' })\n selectionValue = '';\n\n /\n TODO: Uncomment when Carbon fully implements sticky header\n * Specify whether the header should be sticky.\n * Still experimental: may not work with every combination of table props\n /\n // @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n // stickyHeader = false;\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'row');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('expanded')) {\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n const { expanded, nextElementSibling } = this;\n if (nextElementSibling?.matches(selectorExpandedRow)) {\n (nextElementSibling as CDSTableExpandedRow).expanded = expanded;\n }\n }\n\n if (changedProperties.has('highlighted')) {\n const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;\n const { highlighted, nextElementSibling } = this;\n if (nextElementSibling?.matches(selectorExpandedRow)) {\n (nextElementSibling as CDSTableExpandedRow).highlighted = highlighted;\n }\n }\n\n if (this._hasAILabel) {\n this.setAttribute('ai-label', '');\n } else {\n this.removeAttribute('ai-label');\n }\n }\n\n render() {\n if (this.selectionName) {\n this.closest(\n (this.constructor as typeof CDSTableRow).selectorTable\n )?.setAttribute('is-selectable', '');\n }\n\n // Always render the expand button container for consistent table structure\n // The button itself will only be rendered if the row is expandable\n const tableHasExpandableRows = this.closest(\n (this.constructor as typeof CDSTableRow).selectorTable\n )?.hasAttribute('expandable');\n\n return html`\n ${tableHasExpandableRows ? this._renderExpandButton() : ''}\n ${this._renderFirstCells()}\n <slot></slot>\n `;\n }\n\n /\n The name of the custom event fired after this radio button changes its checked state.\n /\n static get eventRadioChange() {\n return `${prefix}-radio-button-changed`;\n }\n\n /\n The name of the custom event fired after this radio button changes its checked state.\n /\n static get eventCheckboxChange() {\n return `${prefix}-checkbox-changed`;\n }\n\n /\n The name of the custom event fired before this row is selected/unselected upon a user gesture.\n * Cancellation of this event stops the user-initiated change in selection.\n /\n static get eventBeforeChangeSelection() {\n return `${prefix}-table-row-change-selection`;\n }\n\n /\n A selector that will return the parent table\n /\n static get selectorTable() {\n return `${prefix}-table`;\n }\n\n /\n The CSS selector to find the overflow menu on the table cell\n /\n static get selectorTableCellOverflowMenu() {\n return `${prefix}-table-cell ${prefix}-overflow-menu`;\n }\n\n /\n A selector that will return the corresponding expanded row.\n /\n static get selectorExpandedRow() {\n return `${prefix}-table-expanded-row`;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n /\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n /\n The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling the expanded state.\n /\n static get eventBeforeExpandoToggle() {\n return `${prefix}-table-row-expando-beingtoggled`;\n }\n\n /\n The name of the custom event fired after the expanded state this row is toggled upon a user gesture.\n */\n static get eventExpandoToggle() {\n return `${prefix}-table-row-expando-toggled`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableRow;\n"],"mappings":"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"}

package/es-custom/components/data-table/table-skeleton.js CHANGED Viewed

@@ -5,14 +5,13 @@
  * 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 data_table_default from "./data-table.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/data-table/table-skeleton.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -41,10 +40,10 @@ let CDSTableSkeleton = class CDSTableSkeleton extends LitElement {
 	_renderHeader() {
 		const { showHeader } = this;
 		return !showHeader ? void 0 : html`
-          <div class="${prefix}--skeleton ${prefix}--data-table-container">
-            <div class="${prefix}--data-table-header">
-              <div class="${prefix}--data-table-header__title"></div>
-              <div class="${prefix}--data-table-header__description"></div>
+          <div class="${"cds-custom"}--skeleton ${"cds-custom"}--data-table-container">
+            <div class="${"cds-custom"}--data-table-header">
+              <div class="${"cds-custom"}--data-table-header__title"></div>
+              <div class="${"cds-custom"}--data-table-header__description"></div>
             </div>
           </div>
         `;
@@ -55,10 +54,10 @@ let CDSTableSkeleton = class CDSTableSkeleton extends LitElement {
 	_renderToolbar() {
 		const { showToolbar } = this;
 		return !showToolbar ? void 0 : html`
-          <section class="${prefix}--table-toolbar">
-            <div class="${prefix}--toolbar-content">
+          <section class="${"cds-custom"}--table-toolbar">
+            <div class="${"cds-custom"}--toolbar-content">
               <span
-                class="${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm"></span>
+                class="${"cds-custom"}--skeleton ${"cds-custom"}--btn ${"cds-custom"}--btn--sm"></span>
             </div>
           </section>
         `;
@@ -74,9 +73,9 @@ let CDSTableSkeleton = class CDSTableSkeleton extends LitElement {
 	render() {
 		const { columnCount, headers, rowCount, zebra } = this;
 		const classes = classMap({
-			[`${prefix}--skeleton`]: true,
-			[`${prefix}--data-table`]: true,
-			[`${prefix}--data-table--zebra`]: zebra
+			[`cds-custom--skeleton`]: true,
+			[`cds-custom--data-table`]: true,
+			[`cds-custom--data-table--zebra`]: zebra
 		});
 		return html`
       ${this._renderHeader()} ${this._renderToolbar()}
@@ -86,7 +85,7 @@ let CDSTableSkeleton = class CDSTableSkeleton extends LitElement {
           <tr>
             ${Array.from(new Array(columnCount)).map((_, index) => html`
                 <th>
-                  <div class="${prefix}--table-header-label">
+                  <div class="${"cds-custom"}--table-header-label">
                     ${headers[index]}
                   </div>
                 </th>
@@ -136,9 +135,9 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSTableSkeleton.prototype, "zebra", void 0);
-CDSTableSkeleton = __decorate([carbonElement(`${prefix}-table-skeleton`)], CDSTableSkeleton);
+CDSTableSkeleton = __decorate([carbonElement(`cds-custom-table-skeleton`)], CDSTableSkeleton);
 var table_skeleton_default = CDSTableSkeleton;
 //#endregion
 export { table_skeleton_default as default };
 //# sourceMappingURL=table-skeleton.js.map

package/es-custom/components/data-table/table-skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-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 { classMap } from 'lit/directives/class-map.js';\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 './data-table.scss?lit';\n\n/\n Data table skeleton\n \n @element cds-custom-table-skeleton\n /\n@customElement(`${prefix}-table-skeleton`)\nclass CDSTableSkeleton extends LitElement {\n /\n Optionally specify the displayed headers\n /\n @property()\n private headers: string[] = [];\n\n /\n Specify the number of columns that you want to render in the skeleton state\n /\n @property({ type: Number, reflect: true, attribute: 'column-count' })\n columnCount = 5;\n\n /\n Specify the number of rows that you want to render in the skeleton state\n /\n @property({ type: Number, reflect: true, attribute: 'row-count' })\n rowCount = 5;\n\n /\n Specify if the table header should be rendered as part of the skeleton.\n /\n @property({ type: Boolean, reflect: true, attribute: 'show-header' })\n showHeader = true;\n\n /\n Specify if the table toolbar should be rendered as part of the skeleton.\n /\n @property({ type: Boolean, reflect: true, attribute: 'show-toolbar' })\n showToolbar = true;\n\n /\n true to add useZebraStyles striping.\n /\n @property({ type: Boolean, reflect: true })\n zebra = false;\n\n /\n @returns The header\n /\n protected _renderHeader() {\n const { showHeader } = this;\n return !showHeader\n ? undefined\n : html`\n <div class=\"${prefix}--skeleton ${prefix}--data-table-container\">\n <div class=\"${prefix}--data-table-header\">\n <div class=\"${prefix}--data-table-header__title\"></div>\n <div class=\"${prefix}--data-table-header__description\"></div>\n </div>\n </div>\n `;\n }\n\n /\n @returns The header\n */\n protected _renderToolbar() {\n const { showToolbar } = this;\n return !showToolbar\n ? undefined\n : html`\n <section class=\"${prefix}--table-toolbar\">\n <div class=\"${prefix}--toolbar-content\">\n <span\n class=\"${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm\"></span>\n </div>\n </section>\n `;\n }\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'table');\n }\n super.connectedCallback();\n }\n\n updated() {\n if (this.headers.length) {\n this.columnCount = this.headers.length;\n } else {\n this.headers = Array(this.columnCount).fill('');\n }\n }\n\n render() {\n const { columnCount, headers, rowCount, zebra } = this;\n const classes = classMap({\n [`${prefix}--skeleton`]: true,\n [`${prefix}--data-table`]: true,\n [`${prefix}--data-table--zebra`]: zebra,\n });\n return html`\n ${this._renderHeader()} ${this._renderToolbar()}\n\n <table class=\"${classes}\">\n <thead>\n <tr>\n ${Array.from(new Array(columnCount)).map(\n (_, index) => html`\n <th>\n <div class=\"${prefix}--table-header-label\">\n ${headers[index]}\n </div>\n </th>\n `\n )}\n </tr>\n </thead>\n <tbody>\n ${Array.from(new Array(rowCount)).map(\n () => html`\n <tr>\n ${Array.from(new Array(columnCount)).map(\n () => html`\n <td>\n <span></span>\n </td>\n `\n )}\n </tr>\n `\n )}\n </tbody>\n </table>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableSkeleton;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAmBA,~~6BACM~~,yBAAyB,WAAW;;;iBAKZ,EAAE;qBAMhB;kBAMH;oBAME;qBAMC;eAMN;;;;;CAKR,~~AAAU,gBAAgB~~;EACxB,MAAM,EAAE,eAAe;AACvB,SAAO,CAAC,aACJ,~~SACA~~,IAAI;~~wBACY~~,~~OAAO~~,~~aAAa,OAAO~~;~~0BACzB,OAAO~~;~~4BACL,OAAO~~;~~4BACP,OAAO~~;;;;;;;;CASjC,~~AAAU,iBAAiB~~;EACzB,MAAM,EAAE,gBAAgB;AACxB,SAAO,CAAC,cACJ,~~SACA~~,IAAI;~~4BACgB,OAAO~~;~~0BACT~~,~~OAAO;;yBAER~~,~~OAAO~~,~~aAAa~~,~~OAAO,QAAQ,OAAO~~;;;;;CAMjE,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,QAAQ;AAEpC,QAAM,mBAAmB;;CAG3B,UAAU;AACR,MAAI,KAAK,QAAQ,OACf,MAAK,cAAc,KAAK,QAAQ;MAEhC,MAAK,UAAU,MAAM,KAAK,YAAY,CAAC,KAAK,GAAG;;CAInD,SAAS;EACP,MAAM,EAAE,aAAa,SAAS,UAAU,UAAU;EAClD,MAAM,UAAU,SAAS;IACtB,~~GAAG,OAAO,cAAc~~;IACxB,~~GAAG,OAAO,gBAAgB~~;IAC1B,~~GAAG,OAAO,uBAAuB~~;GACnC,CAAC;AACF,SAAO,IAAI;QACP,KAAK,eAAe,CAAC,GAAG,KAAK,gBAAgB,CAAC;;sBAEhC,QAAQ;;;cAGhB,MAAM,KAAK,IAAI,MAAM,YAAY,CAAC,CAAC,KAClC,GAAG,UAAU,IAAI;;~~gCAEA,OAAO~~;sBACjB,QAAQ,OAAO;;;gBAIxB,CAAC;;;;YAIF,MAAM,KAAK,IAAI,MAAM,SAAS,CAAC,CAAC,UAC1B,IAAI;;kBAEJ,MAAM,KAAK,IAAI,MAAM,YAAY,CAAC,CAAC,UAC7B,IAAI;;;;oBAKX,CAAC;;cAGP,CAAC;;;;;;gBAMMA;;;YA7Hf,UAAU;YAMV,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAgB,CAAC;YAMpE,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAa,CAAC;YAMjE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAe,CAAC;YAMpE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAgB,CAAC;YAMrE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;+BAnC5CC,cAAc,~~GAAG~~,~~OAAO~~,~~iBAAiB~~;AAqI1C,~~6BAAe~~"}
1	+ {"version":3,"file":"table-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-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 { classMap } from 'lit/directives/class-map.js';\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 './data-table.scss?lit';\n\n/\n Data table skeleton\n \n @element cds-custom-table-skeleton\n /\n@customElement(`${prefix}-table-skeleton`)\nclass CDSTableSkeleton extends LitElement {\n /\n Optionally specify the displayed headers\n /\n @property()\n private headers: string[] = [];\n\n /\n Specify the number of columns that you want to render in the skeleton state\n /\n @property({ type: Number, reflect: true, attribute: 'column-count' })\n columnCount = 5;\n\n /\n Specify the number of rows that you want to render in the skeleton state\n /\n @property({ type: Number, reflect: true, attribute: 'row-count' })\n rowCount = 5;\n\n /\n Specify if the table header should be rendered as part of the skeleton.\n /\n @property({ type: Boolean, reflect: true, attribute: 'show-header' })\n showHeader = true;\n\n /\n Specify if the table toolbar should be rendered as part of the skeleton.\n /\n @property({ type: Boolean, reflect: true, attribute: 'show-toolbar' })\n showToolbar = true;\n\n /\n true to add useZebraStyles striping.\n /\n @property({ type: Boolean, reflect: true })\n zebra = false;\n\n /\n @returns The header\n /\n protected _renderHeader() {\n const { showHeader } = this;\n return !showHeader\n ? undefined\n : html`\n <div class=\"${prefix}--skeleton ${prefix}--data-table-container\">\n <div class=\"${prefix}--data-table-header\">\n <div class=\"${prefix}--data-table-header__title\"></div>\n <div class=\"${prefix}--data-table-header__description\"></div>\n </div>\n </div>\n `;\n }\n\n /\n @returns The header\n */\n protected _renderToolbar() {\n const { showToolbar } = this;\n return !showToolbar\n ? undefined\n : html`\n <section class=\"${prefix}--table-toolbar\">\n <div class=\"${prefix}--toolbar-content\">\n <span\n class=\"${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm\"></span>\n </div>\n </section>\n `;\n }\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'table');\n }\n super.connectedCallback();\n }\n\n updated() {\n if (this.headers.length) {\n this.columnCount = this.headers.length;\n } else {\n this.headers = Array(this.columnCount).fill('');\n }\n }\n\n render() {\n const { columnCount, headers, rowCount, zebra } = this;\n const classes = classMap({\n [`${prefix}--skeleton`]: true,\n [`${prefix}--data-table`]: true,\n [`${prefix}--data-table--zebra`]: zebra,\n });\n return html`\n ${this._renderHeader()} ${this._renderToolbar()}\n\n <table class=\"${classes}\">\n <thead>\n <tr>\n ${Array.from(new Array(columnCount)).map(\n (_, index) => html`\n <th>\n <div class=\"${prefix}--table-header-label\">\n ${headers[index]}\n </div>\n </th>\n `\n )}\n </tr>\n </thead>\n <tbody>\n ${Array.from(new Array(rowCount)).map(\n () => html`\n <tr>\n ${Array.from(new Array(columnCount)).map(\n () => html`\n <td>\n <span></span>\n </td>\n `\n )}\n </tr>\n `\n )}\n </tbody>\n </table>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,mBAAA,MACM,yBAAyB,WAAW;;;iBAKZ,EAAE;qBAMhB;kBAMH;oBAME;qBAMC;eAMN;;;;;CAKR,gBAA0B;EACxB,MAAM,EAAE,eAAe;AACvB,SAAO,CAAC,aACJ,KAAA,IACA,IAAI;8BACmB,aAAA,MAAoB;gCAClB;kCACE;kCACA;;;;;;;;CASjC,iBAA2B;EACzB,MAAM,EAAE,gBAAgB;AACxB,SAAO,CAAC,cACJ,KAAA,IACA,IAAI;kCACuB;gCACF;;+BAED,aAAA,MAAoB,QAAA,MAAe;;;;;CAMjE,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,QAAQ;AAEpC,QAAM,mBAAmB;;CAG3B,UAAU;AACR,MAAI,KAAK,QAAQ,OACf,MAAK,cAAc,KAAK,QAAQ;MAEhC,MAAK,UAAU,MAAM,KAAK,YAAY,CAAC,KAAK,GAAG;;CAInD,SAAS;EACP,MAAM,EAAE,aAAa,SAAS,UAAU,UAAU;EAClD,MAAM,UAAU,SAAS;IACtB,kBAAwB;IACxB,oBAA0B;IAC1B,2BAAiC;GACnC,CAAC;AACF,SAAO,IAAI;QACP,KAAK,eAAe,CAAC,GAAG,KAAK,gBAAgB,CAAC;;sBAEhC,QAAQ;;;cAGhB,MAAM,KAAK,IAAI,MAAM,YAAY,CAAC,CAAC,KAClC,GAAG,UAAU,IAAI;;sCAEO;sBACjB,QAAQ,OAAO;;;gBAIxB,CAAC;;;;YAIF,MAAM,KAAK,IAAI,MAAM,SAAS,CAAC,CAAC,UAC1B,IAAI;;kBAEJ,MAAM,KAAK,IAAI,MAAM,YAAY,CAAC,CAAC,UAC7B,IAAI;;;;oBAKX,CAAC;;cAGP,CAAC;;;;;;gBAMMA;;;YA7Hf,UAAU,CAAA,EAAA,iBAAA,WAAA,WAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAgB,CAAC,CAAA,EAAA,iBAAA,WAAA,eAAA,KAAA,EAAA;YAMpE,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAa,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAMjE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAe,CAAC,CAAA,EAAA,iBAAA,WAAA,cAAA,KAAA,EAAA;YAMpE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAgB,CAAC,CAAA,EAAA,iBAAA,WAAA,eAAA,KAAA,EAAA;YAMrE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,SAAA,KAAA,EAAA;+BAnC5CC,cAAc,qBAA2B,CAAA,EAAA,iBAAA;AAqI1C,IAAA,yBAAe"}

package/es-custom/components/data-table/table-toolbar-content.js CHANGED Viewed

@@ -5,13 +5,12 @@
  * 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 data_table_default from "./data-table.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/components/data-table/table-toolbar-content.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -50,9 +49,9 @@ __decorate([property({
 	attribute: "has-batch-actions"
 })], CDSTableToolbarContent.prototype, "hasBatchActions", void 0);
 __decorate([property({ reflect: true })], CDSTableToolbarContent.prototype, "size", void 0);
-CDSTableToolbarContent = __decorate([carbonElement(`${prefix}-table-toolbar-content`)], CDSTableToolbarContent);
+CDSTableToolbarContent = __decorate([carbonElement(`cds-custom-table-toolbar-content`)], CDSTableToolbarContent);
 var table_toolbar_content_default = CDSTableToolbarContent;
 //#endregion
 export { table_toolbar_content_default as default };
 //# sourceMappingURL=table-toolbar-content.js.map

package/es-custom/components/data-table/table-toolbar-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-toolbar-content.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-toolbar-content.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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Table toolbar content.\n \n @element cds-custom-table-toolbar-content\n /\n@customElement(`${prefix}-table-toolbar-content`)\nclass CDSTableToolbarContent extends LitElement {\n /\n `true` if this batch actions bar is active.\n /\n @property({ type: Boolean, reflect: true, attribute: 'has-batch-actions' })\n hasBatchActions = false;\n\n /\n Table toolbar contents size\n */\n @property({ reflect: true })\n size;\n\n updated(changedProperties) {\n if (this.hasBatchActions) {\n this.setAttribute('tabindex', '-1');\n } else {\n this.removeAttribute('tabindex');\n }\n\n if (changedProperties.has('size')) {\n [...this.children].forEach((e) => {\n const size =\n this.size === 'xs'\n ? 'sm'\n : this.size === 'md' \|\| this.size === 'xl'\n ? 'lg'\n : this.size;\n e.setAttribute('size', size);\n });\n }\n }\n\n render() {\n return html` <slot></slot> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableToolbarContent;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkBA,~~mCACM~~,+BAA+B,WAAW;;;yBAK5B;;CAQlB,QAAQ,mBAAmB;AACzB,MAAI,KAAK,gBACP,MAAK,aAAa,YAAY,KAAK;MAEnC,MAAK,gBAAgB,WAAW;AAGlC,MAAI,kBAAkB,IAAI,OAAO,CAC/B,EAAC,GAAG,KAAK,SAAS,CAAC,SAAS,MAAM;GAChC,MAAM,OACJ,KAAK,SAAS,OACV,OACA,KAAK,SAAS,QAAQ,KAAK,SAAS,OAClC,OACA,KAAK;AACb,KAAE,aAAa,QAAQ,KAAK;IAC5B;;CAIN,SAAS;AACP,SAAO,IAAI;;;gBAGGA;;;YAjCf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAqB,CAAC;YAM1E,SAAS,EAAE,SAAS,MAAM,CAAC;qCAX7BC,cAAc,~~GAAG~~,~~OAAO~~,~~wBAAwB~~;AAyCjD,~~oCAAe~~"}
1	+ {"version":3,"file":"table-toolbar-content.js","names":["styles","customElement"],"sources":["../../../src/components/data-table/table-toolbar-content.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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Table toolbar content.\n \n @element cds-custom-table-toolbar-content\n /\n@customElement(`${prefix}-table-toolbar-content`)\nclass CDSTableToolbarContent extends LitElement {\n /\n `true` if this batch actions bar is active.\n /\n @property({ type: Boolean, reflect: true, attribute: 'has-batch-actions' })\n hasBatchActions = false;\n\n /\n Table toolbar contents size\n */\n @property({ reflect: true })\n size;\n\n updated(changedProperties) {\n if (this.hasBatchActions) {\n this.setAttribute('tabindex', '-1');\n } else {\n this.removeAttribute('tabindex');\n }\n\n if (changedProperties.has('size')) {\n [...this.children].forEach((e) => {\n const size =\n this.size === 'xs'\n ? 'sm'\n : this.size === 'md' \|\| this.size === 'xl'\n ? 'lg'\n : this.size;\n e.setAttribute('size', size);\n });\n }\n }\n\n render() {\n return html` <slot></slot> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSTableToolbarContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,yBAAA,MACM,+BAA+B,WAAW;;;yBAK5B;;CAQlB,QAAQ,mBAAmB;AACzB,MAAI,KAAK,gBACP,MAAK,aAAa,YAAY,KAAK;MAEnC,MAAK,gBAAgB,WAAW;AAGlC,MAAI,kBAAkB,IAAI,OAAO,CAC/B,EAAC,GAAG,KAAK,SAAS,CAAC,SAAS,MAAM;GAChC,MAAM,OACJ,KAAK,SAAS,OACV,OACA,KAAK,SAAS,QAAQ,KAAK,SAAS,OAClC,OACA,KAAK;AACb,KAAE,aAAa,QAAQ,KAAK;IAC5B;;CAIN,SAAS;AACP,SAAO,IAAI;;;gBAGGA;;;YAjCf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAqB,CAAC,CAAA,EAAA,uBAAA,WAAA,mBAAA,KAAA,EAAA;YAM1E,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,QAAA,KAAA,EAAA;qCAX7BC,cAAc,4BAAkC,CAAA,EAAA,uBAAA;AAyCjD,IAAA,gCAAe"}

package/es-custom/components/data-table/table-toolbar-search.js CHANGED Viewed

@@ -5,19 +5,18 @@
  * 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 HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import data_table_default from "./data-table.scss.js";
-import { INPUT_SIZE } from "../text-input/defs.js";
+import "../text-input/defs.js";
 import "../text-input/text-input.js";
 import search_default from "../search/search.js";
 import { LitElement, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/data-table/table-toolbar-search.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -36,7 +35,7 @@ let CDSTableToolbarSearch = class CDSTableToolbarSearch extends HostListenerMixi
 		super(..._args);
 		this.expanded = false;
 		this.persistent = false;
-		this.size = INPUT_SIZE.LARGE;
+		this.size = "lg";
 	}
 	/**
 	* Handles user-initiated gestures for expanding the search box.
@@ -75,8 +74,8 @@ let CDSTableToolbarSearch = class CDSTableToolbarSearch extends HostListenerMixi
 		const result = super.render();
 		const { persistent, expanded, size, _handleSearchClick: handleSearchClick } = this;
 		const classes = classMap({
-			[`${prefix}--search`]: true,
-			[`${prefix}--search--${size}`]: size
+			[`cds-custom--search`]: true,
+			[`cds-custom--search--${size}`]: size
 		});
 		if (persistent) this.expanded = true;
 		return html`
@@ -92,7 +91,7 @@ let CDSTableToolbarSearch = class CDSTableToolbarSearch extends HostListenerMixi
 	* The name of the custom event fired after the search content is changed upon a user gesture.
 	*/
 	static get eventInput() {
-		return `${prefix}-search-input`;
+		return `cds-custom-search-input`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -116,9 +115,9 @@ __decorate([property({
 	reflect: true
 })], CDSTableToolbarSearch.prototype, "persistent", void 0);
 __decorate([property({ reflect: true })], CDSTableToolbarSearch.prototype, "size", void 0);
-CDSTableToolbarSearch = __decorate([carbonElement(`${prefix}-table-toolbar-search`)], CDSTableToolbarSearch);
+CDSTableToolbarSearch = __decorate([carbonElement(`cds-custom-table-toolbar-search`)], CDSTableToolbarSearch);
 var table_toolbar_search_default = CDSTableToolbarSearch;
 //#endregion
 export { table_toolbar_search_default as default };
 //# sourceMappingURL=table-toolbar-search.js.map

package/es-custom/components/data-table/table-toolbar-search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-toolbar-search.js","names":["CDSSearch","styles","customElement"],"sources":["../../../src/components/data-table/table-toolbar-search.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { INPUT_SIZE } from '../text-input/text-input';\nimport CDSSearch from '../search/search';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Table toolbar search.\n \n @element cds-custom-table-toolbar-search\n * @fires cds-custom-search-input - The custom event fired after the search content is changed upon a user gesture.\n /\n@customElement(`${prefix}-table-toolbar-search`)\nclass CDSTableToolbarSearch extends HostListenerMixin(CDSSearch) {\n @query('input')\n private _inputNode!: HTMLInputElement;\n\n /\n Handles user-initiated gestures for expanding the search box.\n /\n private async _handleUserInitiatedExpand() {\n this.expanded = true;\n await this.updateComplete;\n const { _inputNode: inputNode } = this;\n inputNode?.focus();\n }\n\n /\n Handles `focus` event handler on this element.\n /\n @HostListener('focusin')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusIn() {\n this._handleUserInitiatedExpand();\n }\n\n /\n Handles `blur` event handler on this element.\n \n @param event The event.\n /\n @HostListener('focusout')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusOut(event: FocusEvent) {\n if (\n !this.contains(event.relatedTarget as Node) &&\n !this.value &&\n !this.persistent\n ) {\n this.expanded = false;\n }\n }\n\n /\n Handles `click` event handler on the search box.\n /\n private _handleSearchClick() {\n this._handleUserInitiatedExpand();\n }\n\n /\n `true` if the search box should be expanded.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n `true` if the search box should be always be open.\n /\n @property({ type: Boolean, reflect: true })\n persistent = false;\n\n /\n The search box size.\n /\n @property({ reflect: true })\n size = INPUT_SIZE.LARGE;\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'search');\n }\n super.connectedCallback();\n }\n\n render() {\n const result = super.render();\n const {\n persistent,\n expanded,\n size,\n _handleSearchClick: handleSearchClick,\n } = this;\n const classes = classMap({\n [`${prefix}--search`]: true,\n [`${prefix}--search--${size}`]: size,\n });\n if (persistent) {\n this.expanded = true;\n }\n return html`\n <div\n class=\"${classes}\"\n tabindex=\"${expanded ? '-1' : '0'}\"\n @click=\"${handleSearchClick}\">\n ${result}\n </div>\n `;\n }\n\n /\n The name of the custom event fired after the search content is changed upon a user gesture.\n */\n static get eventInput() {\n // The code uses on in `<cds-custom-search>`, but definition is done also here for React event generation\n return `${prefix}-search-input`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTableToolbarSearch;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAwBA,~~kCACM~~,8BAA8B,kBAAkBA,eAAU,CAAC;;;kBAmDpD;oBAME~~;cAMN~~,~~WAAW;;;;;CAxDlB,~~MAAc,6BAA6B;AACzC,OAAK,WAAW;AAChB,QAAM,KAAK;EACX,MAAM,EAAE,YAAY,cAAc;AAClC,aAAW,OAAO;;;;;CAMpB,~~AAEQ,iBAAiB~~;AACvB,OAAK,4BAA4B;;;;;;;CAQnC,~~AAEQ~~,~~gBAAgB,~~OAAmB;AACzC,MACE,CAAC,KAAK,SAAS,MAAM,cAAsB,IAC3C,CAAC,KAAK,SACN,CAAC,KAAK,WAEN,MAAK,WAAW;;;;;CAOpB,~~AAAQ,qBAAqB~~;AAC3B,OAAK,4BAA4B;;CAqBnC,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,SAAS;AAErC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,SAAS,MAAM,QAAQ;EAC7B,MAAM,EACJ,YACA,UACA,MACA,oBAAoB,sBAClB;EACJ,MAAM,UAAU,SAAS;IACtB,~~GAAG,OAAO,YAAY~~;IACtB,~~GAAG~~,~~OAAO,YAAY,~~SAAS;GACjC,CAAC;AACF,MAAI,WACF,MAAK,WAAW;AAElB,SAAO,IAAI;;iBAEE,QAAQ;oBACL,WAAW,OAAO,IAAI;kBACxB,kBAAkB;UAC1B,OAAO;;;;;;;CAQf,WAAW,aAAa;AAEtB,SAAO~~,GAAG,OAAO~~;;;~~2BAGQ~~;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeC;;;YA5Gf,MAAM,QAAQ;YAgBd,aAAa,UAAU;YAWvB,aAAa,WAAW;YAsBxB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC;oCA/D7BC,cAAc,~~GAAG~~,~~OAAO~~,~~uBAAuB~~;AAiHhD,~~mCAAe~~"}
1	+ {"version":3,"file":"table-toolbar-search.js","names":["CDSSearch","styles","customElement"],"sources":["../../../src/components/data-table/table-toolbar-search.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { INPUT_SIZE } from '../text-input/text-input';\nimport CDSSearch from '../search/search';\nimport styles from './data-table.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Table toolbar search.\n \n @element cds-custom-table-toolbar-search\n * @fires cds-custom-search-input - The custom event fired after the search content is changed upon a user gesture.\n /\n@customElement(`${prefix}-table-toolbar-search`)\nclass CDSTableToolbarSearch extends HostListenerMixin(CDSSearch) {\n @query('input')\n private _inputNode!: HTMLInputElement;\n\n /\n Handles user-initiated gestures for expanding the search box.\n /\n private async _handleUserInitiatedExpand() {\n this.expanded = true;\n await this.updateComplete;\n const { _inputNode: inputNode } = this;\n inputNode?.focus();\n }\n\n /\n Handles `focus` event handler on this element.\n /\n @HostListener('focusin')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusIn() {\n this._handleUserInitiatedExpand();\n }\n\n /\n Handles `blur` event handler on this element.\n \n @param event The event.\n /\n @HostListener('focusout')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusOut(event: FocusEvent) {\n if (\n !this.contains(event.relatedTarget as Node) &&\n !this.value &&\n !this.persistent\n ) {\n this.expanded = false;\n }\n }\n\n /\n Handles `click` event handler on the search box.\n /\n private _handleSearchClick() {\n this._handleUserInitiatedExpand();\n }\n\n /\n `true` if the search box should be expanded.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n `true` if the search box should be always be open.\n /\n @property({ type: Boolean, reflect: true })\n persistent = false;\n\n /\n The search box size.\n /\n @property({ reflect: true })\n size = INPUT_SIZE.LARGE;\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'search');\n }\n super.connectedCallback();\n }\n\n render() {\n const result = super.render();\n const {\n persistent,\n expanded,\n size,\n _handleSearchClick: handleSearchClick,\n } = this;\n const classes = classMap({\n [`${prefix}--search`]: true,\n [`${prefix}--search--${size}`]: size,\n });\n if (persistent) {\n this.expanded = true;\n }\n return html`\n <div\n class=\"${classes}\"\n tabindex=\"${expanded ? '-1' : '0'}\"\n @click=\"${handleSearchClick}\">\n ${result}\n </div>\n `;\n }\n\n /\n The name of the custom event fired after the search content is changed upon a user gesture.\n */\n static get eventInput() {\n // The code uses on in `<cds-custom-search>`, but definition is done also here for React event generation\n return `${prefix}-search-input`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTableToolbarSearch;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAA,wBAAA,MACM,8BAA8B,kBAAkBA,eAAU,CAAC;;;kBAmDpD;oBAME;;;;;;CAlDb,MAAc,6BAA6B;AACzC,OAAK,WAAW;AAChB,QAAM,KAAK;EACX,MAAM,EAAE,YAAY,cAAc;AAClC,aAAW,OAAO;;;;;CAMpB,iBAEyB;AACvB,OAAK,4BAA4B;;;;;;;CAQnC,gBAEwB,OAAmB;AACzC,MACE,CAAC,KAAK,SAAS,MAAM,cAAsB,IAC3C,CAAC,KAAK,SACN,CAAC,KAAK,WAEN,MAAK,WAAW;;;;;CAOpB,qBAA6B;AAC3B,OAAK,4BAA4B;;CAqBnC,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,SAAS;AAErC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,SAAS,MAAM,QAAQ;EAC7B,MAAM,EACJ,YACA,UACA,MACA,oBAAoB,sBAClB;EACJ,MAAM,UAAU,SAAS;IACtB,gBAAsB;IACtB,gBAAsB,SAAS;GACjC,CAAC;AACF,MAAI,WACF,MAAK,WAAW;AAElB,SAAO,IAAI;;iBAEE,QAAQ;oBACL,WAAW,OAAO,IAAI;kBACxB,kBAAkB;UAC1B,OAAO;;;;;;;CAQf,WAAW,aAAa;AAEtB,SAAO;;;2BAGkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeC;;;YA5Gf,MAAM,QAAQ,CAAA,EAAA,sBAAA,WAAA,cAAA,KAAA,EAAA;YAgBd,aAAa,UAAU,CAAA,EAAA,sBAAA,WAAA,kBAAA,KAAA;YAWvB,aAAa,WAAW,CAAA,EAAA,sBAAA,WAAA,mBAAA,KAAA;YAsBxB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,sBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,sBAAA,WAAA,cAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,sBAAA,WAAA,QAAA,KAAA,EAAA;oCA/D7BC,cAAc,2BAAiC,CAAA,EAAA,sBAAA;AAiHhD,IAAA,+BAAe"}