@carbon/ibm-products-web-components 0.45.0 → 0.46.0

package/es-custom/components/add-select/add-select-column.js

@@ -0,0 +1,217 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
+import add_select_column_default$1 from "./add-select-column.scss.js";
+import { classMap } from "lit/directives/class-map.js";
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
+import '@carbon/web-components/es-custom/components/search/index.js';
+import '@carbon/web-components/es-custom/components/tag/index.js';
+import '@carbon/web-components/es-custom/components/checkbox/index.js';
+//#region src/components/add-select/add-select-column.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 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.
+*/
+const blockClass = `c4p--add-select__next`;
+/**
+* Add Select Column component — optional column wrapper providing column-level
+* search, title, and "Select All" functionality. Propagates `multi` context to
+* child rows via the `multi` property/attribute.
+* @element c4p-add-select-column
+* @slot default - AddSelectRow elements
+* @slot actions - Custom actions (filter/sort) placed next to column search
+* @fires c4p-add-select-column-search - Fired when column search changes; detail: { searchTerm }
+* @fires c4p-add-select-column-select-all - Fired when "Select All" checkbox changes; detail: { checked }
+*/
+let CDSAddSelectColumn = class CDSAddSelectColumn extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.title = "";
+		this.searchLabel = "Search";
+		this.searchPlaceholder = "Search";
+		this.hideSearch = false;
+		this.multi = false;
+		this.showSelectAll = false;
+		this.itemCount = 0;
+		this.allSelected = false;
+		this.allIndeterminate = false;
+		this._searchTerm = "";
+		this._hasActionsSlot = false;
+	}
+	_handleActionsSlotChange(e) {
+		const slot = e.target;
+		this._hasActionsSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	_handleSearch(event) {
+		this._searchTerm = event.detail?.value ?? "";
+		this.dispatchEvent(new CustomEvent(this.constructor.eventSearch, {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: { searchTerm: this._searchTerm }
+		}));
+	}
+	_handleSelectAll(event) {
+		const checked = !!event.detail?.checked;
+		this.dispatchEvent(new CustomEvent(this.constructor.eventSelectAll, {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: { checked }
+		}));
+	}
+	_handleSlotChange() {
+		const slot = this.shadowRoot?.querySelector("slot:not([name])");
+		if (!slot) return;
+		slot.assignedElements({ flatten: true }).forEach((el) => {
+			if (el.tagName.toLowerCase() === `c4p-add-select-row`) if (this.multi) el.setAttribute("_column-multi", "");
+			else el.removeAttribute("_column-multi");
+		});
+	}
+	updated(changed) {
+		if (changed.has("multi")) this._handleSlotChange();
+	}
+	render() {
+		const { title, searchLabel, searchPlaceholder, hideSearch, multi, showSelectAll, itemCount, allSelected, allIndeterminate } = this;
+		const columnClasses = classMap({ [`${blockClass}-column`]: true });
+		const showHeader = showSelectAll || !!title;
+		return html`
+      <div class=${columnClasses}>
+        <!-- Column search with optional actions slot -->
+        ${!hideSearch ? html`
+              <div
+                class="${classMap({
+			[`${blockClass}-column__search`]: true,
+			[`${blockClass}-column__search--with-actions`]: this._hasActionsSlot
+		})}"
+              >
+                <div
+                  class="${this._hasActionsSlot ? `${blockClass}-column__search-input` : ""}"
+                >
+                  <cds-custom-search
+                    label-text=${searchLabel}
+                    placeholder=${searchPlaceholder}
+                    size="md"
+                    @cds-custom-search-input=${this._handleSearch}
+                  ></cds-custom-search>
+                </div>
+                <slot
+                  name="actions"
+                  class="${blockClass}-column__actions"
+                  @slotchange=${this._handleActionsSlotChange}
+                ></slot>
+              </div>
+            ` : nothing}
+
+        <!-- Column header: Select All checkbox or title -->
+        ${showHeader ? html`
+              <div class="${blockClass}-column__header">
+                ${showSelectAll && multi ? html`
+                      <cds-custom-checkbox
+                        class="${blockClass}-column__select-all"
+                        ?checked=${allSelected}
+                        ?indeterminate=${allIndeterminate}
+                        @cds-custom-checkbox-changed=${this._handleSelectAll}
+                      >
+                        <span class="${blockClass}-column__title"
+                          >${title}</span
+                        >
+                        ${itemCount > 0 ? html`<cds-custom-tag type="gray" size="sm"
+                              >${itemCount}</cds-custom-tag
+                            >` : nothing}
+                      </cds-custom-checkbox>
+                    ` : html`
+                      <div class="${blockClass}-column__title-wrapper">
+                        <span class="${blockClass}-column__title"
+                          >${title}</span
+                        >
+                        ${itemCount > 0 ? html`<cds-custom-tag type="gray" size="sm"
+                              >${itemCount}</cds-custom-tag
+                            >` : nothing}
+                      </div>
+                    `}
+              </div>
+            ` : nothing}
+
+        <!-- Rows container -->
+        <div class="${blockClass}-column__rows" role="rowgroup">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* The name of the custom event fired when column search changes.
+	* detail: { searchTerm: string }
+	*/
+	static get eventSearch() {
+		return `c4p-add-select-column-search`;
+	}
+	/**
+	* The name of the custom event fired when "Select All" is toggled.
+	* detail: { checked: boolean }
+	*/
+	static get eventSelectAll() {
+		return `c4p-add-select-column-select-all`;
+	}
+	static {
+		this.styles = add_select_column_default$1;
+	}
+};
+__decorate([property({ type: String })], CDSAddSelectColumn.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: "search-label"
+})], CDSAddSelectColumn.prototype, "searchLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "search-placeholder"
+})], CDSAddSelectColumn.prototype, "searchPlaceholder", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-search",
+	reflect: true
+})], CDSAddSelectColumn.prototype, "hideSearch", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSAddSelectColumn.prototype, "multi", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-select-all",
+	reflect: true
+})], CDSAddSelectColumn.prototype, "showSelectAll", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "item-count"
+})], CDSAddSelectColumn.prototype, "itemCount", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "all-selected",
+	reflect: true
+})], CDSAddSelectColumn.prototype, "allSelected", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "all-indeterminate",
+	reflect: true
+})], CDSAddSelectColumn.prototype, "allIndeterminate", void 0);
+__decorate([state()], CDSAddSelectColumn.prototype, "_searchTerm", void 0);
+__decorate([state()], CDSAddSelectColumn.prototype, "_hasActionsSlot", void 0);
+CDSAddSelectColumn = __decorate([carbonElement(`c4p-add-select-column`)], CDSAddSelectColumn);
+var add_select_column_default = CDSAddSelectColumn;
+//#endregion
+export { add_select_column_default as default };
+
+//# sourceMappingURL=add-select-column.js.map

package/es-custom/components/add-select/add-select-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-column.js","names":["styles","customElement"],"sources":["../../../src/components/add-select/add-select-column.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es-custom/components/search/index.js';\nimport '@carbon/web-components/es-custom/components/tag/index.js';\nimport '@carbon/web-components/es-custom/components/checkbox/index.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './add-select-column.scss?lit';\n\nconst blockClass = `${prefix}--add-select__next`;\n\n/**\n * Add Select Column component — optional column wrapper providing column-level\n * search, title, and \"Select All\" functionality. Propagates `multi` context to\n * child rows via the `multi` property/attribute.\n * @element c4p-add-select-column\n * @slot default - AddSelectRow elements\n * @slot actions - Custom actions (filter/sort) placed next to column search\n * @fires c4p-add-select-column-search - Fired when column search changes; detail: { searchTerm }\n * @fires c4p-add-select-column-select-all - Fired when \"Select All\" checkbox changes; detail: { checked }\n */\n@customElement(`${prefix}-add-select-column`)\nclass CDSAddSelectColumn extends LitElement {\n  /**\n   * Column title shown in the header\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Label text for the column search input (accessibility)\n   */\n  @property({ type: String, attribute: 'search-label' })\n  searchLabel = 'Search';\n\n  /**\n   * Placeholder text for the column search input\n   */\n  @property({ type: String, attribute: 'search-placeholder' })\n  searchPlaceholder = 'Search';\n\n  /**\n   * Whether to hide the column search input\n   */\n  @property({ type: Boolean, attribute: 'hide-search', reflect: true })\n  hideSearch = false;\n\n  /**\n   * Whether this column uses multi-selection (checkboxes) or single-selection (radio buttons)\n   */\n  @property({ type: Boolean, reflect: true })\n  multi = false;\n\n  /**\n   * Whether to show the \"Select All\" checkbox (only when multi is true)\n   */\n  @property({ type: Boolean, attribute: 'show-select-all', reflect: true })\n  showSelectAll = false;\n\n  /**\n   * Total number of items in the column (shown in tag badge)\n   */\n  @property({ type: Number, attribute: 'item-count' })\n  itemCount = 0;\n\n  /**\n   * Whether all items are currently selected\n   */\n  @property({ type: Boolean, attribute: 'all-selected', reflect: true })\n  allSelected = false;\n\n  /**\n   * Whether the \"Select All\" checkbox is in an indeterminate state\n   */\n  @property({ type: Boolean, attribute: 'all-indeterminate', reflect: true })\n  allIndeterminate = false;\n\n  /** Internal column search term */\n  @state()\n  private _searchTerm = '';\n\n  /** Whether the actions slot has any assigned content */\n  @state()\n  private _hasActionsSlot = false;\n\n  private _handleActionsSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasActionsSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleSearch(event: CustomEvent) {\n    this._searchTerm = (event.detail?.value as string) ?? '';\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectColumn).eventSearch,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: { searchTerm: this._searchTerm },\n        }\n      )\n    );\n  }\n\n  private _handleSelectAll(event: CustomEvent) {\n    const checked = !!event.detail?.checked;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectColumn).eventSelectAll,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: { checked },\n        }\n      )\n    );\n  }\n\n  private _handleSlotChange() {\n    // Propagate multi to slotted rows\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name])'\n    ) as HTMLSlotElement | null;\n    if (!slot) {\n      return;\n    }\n    slot.assignedElements({ flatten: true }).forEach((el) => {\n      if (el.tagName.toLowerCase() === `${prefix}-add-select-row`) {\n        if (this.multi) {\n          el.setAttribute('_column-multi', '');\n        } else {\n          el.removeAttribute('_column-multi');\n        }\n      }\n    });\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('multi')) {\n      this._handleSlotChange();\n    }\n  }\n\n  render() {\n    const {\n      title,\n      searchLabel,\n      searchPlaceholder,\n      hideSearch,\n      multi,\n      showSelectAll,\n      itemCount,\n      allSelected,\n      allIndeterminate,\n    } = this;\n\n    const columnClasses = classMap({\n      [`${blockClass}-column`]: true,\n    });\n\n    const showHeader = showSelectAll || !!title;\n\n    return html`\n      <div class=${columnClasses}>\n        <!-- Column search with optional actions slot -->\n        ${!hideSearch\n          ? html`\n              <div\n                class=\"${classMap({\n                  [`${blockClass}-column__search`]: true,\n                  [`${blockClass}-column__search--with-actions`]:\n                    this._hasActionsSlot,\n                })}\"\n              >\n                <div\n                  class=\"${this._hasActionsSlot\n                    ? `${blockClass}-column__search-input`\n                    : ''}\"\n                >\n                  <cds-custom-search\n                    label-text=${searchLabel}\n                    placeholder=${searchPlaceholder}\n                    size=\"md\"\n                    @cds-custom-search-input=${this._handleSearch}\n                  ></cds-custom-search>\n                </div>\n                <slot\n                  name=\"actions\"\n                  class=\"${blockClass}-column__actions\"\n                  @slotchange=${this._handleActionsSlotChange}\n                ></slot>\n              </div>\n            `\n          : nothing}\n\n        <!-- Column header: Select All checkbox or title -->\n        ${showHeader\n          ? html`\n              <div class=\"${blockClass}-column__header\">\n                ${showSelectAll && multi\n                  ? html`\n                      <cds-custom-checkbox\n                        class=\"${blockClass}-column__select-all\"\n                        ?checked=${allSelected}\n                        ?indeterminate=${allIndeterminate}\n                        @cds-custom-checkbox-changed=${this._handleSelectAll}\n                      >\n                        <span class=\"${blockClass}-column__title\"\n                          >${title}</span\n                        >\n                        ${itemCount > 0\n                          ? html`<cds-custom-tag type=\"gray\" size=\"sm\"\n                              >${itemCount}</cds-custom-tag\n                            >`\n                          : nothing}\n                      </cds-custom-checkbox>\n                    `\n                  : html`\n                      <div class=\"${blockClass}-column__title-wrapper\">\n                        <span class=\"${blockClass}-column__title\"\n                          >${title}</span\n                        >\n                        ${itemCount > 0\n                          ? html`<cds-custom-tag type=\"gray\" size=\"sm\"\n                              >${itemCount}</cds-custom-tag\n                            >`\n                          : nothing}\n                      </div>\n                    `}\n              </div>\n            `\n          : nothing}\n\n        <!-- Rows container -->\n        <div class=\"${blockClass}-column__rows\" role=\"rowgroup\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when column search changes.\n   * detail: { searchTerm: string }\n   */\n  static get eventSearch() {\n    return `${prefix}-add-select-column-search`;\n  }\n\n  /**\n   * The name of the custom event fired when \"Select All\" is toggled.\n   * detail: { checked: boolean }\n   */\n  static get eventSelectAll() {\n    return `${prefix}-add-select-column-select-all`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAddSelectColumn;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,aAAa;;;;;;;;;;;AAYnB,IAAA,qBAAA,MACM,2BAA2B,WAAW;;;eAKlC;qBAMM;2BAMM;oBAMP;eAML;uBAMQ;mBAMJ;qBAME;0BAMK;qBAIG;yBAII;;CAE1B,yBAAiC,GAAU;EACzC,MAAM,OAAO,EAAE;AACf,OAAK,kBAAkB,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS;;CAG3E,cAAsB,OAAoB;AACxC,OAAK,cAAe,MAAM,QAAQ,SAAoB;AACtD,OAAK,cACH,IAAI,YACD,KAAK,YAA0C,aAChD;GACE,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EAAE,YAAY,KAAK,aAAa;GACzC,CACF,CACF;;CAGH,iBAAyB,OAAoB;EAC3C,MAAM,UAAU,CAAC,CAAC,MAAM,QAAQ;AAChC,OAAK,cACH,IAAI,YACD,KAAK,YAA0C,gBAChD;GACE,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EAAE,SAAS;GACpB,CACF,CACF;;CAGH,oBAA4B;EAE1B,MAAM,OAAO,KAAK,YAAY,cAC5B,mBACD;AACD,MAAI,CAAC,KACH;AAEF,OAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS,OAAO;AACvD,OAAI,GAAG,QAAQ,aAAa,KAAK,qBAC/B,KAAI,KAAK,MACP,IAAG,aAAa,iBAAiB,GAAG;OAEpC,IAAG,gBAAgB,gBAAgB;IAGvC;;CAGJ,QAAQ,SAA+B;AACrC,MAAI,QAAQ,IAAI,QAAQ,CACtB,MAAK,mBAAmB;;CAI5B,SAAS;EACP,MAAM,EACJ,OACA,aACA,mBACA,YACA,OACA,eACA,WACA,aACA,qBACE;EAEJ,MAAM,gBAAgB,SAAS,GAC5B,GAAG,WAAW,WAAW,MAC3B,CAAC;EAEF,MAAM,aAAa,iBAAiB,CAAC,CAAC;AAEtC,SAAO,IAAI;mBACI,cAAc;;UAEvB,CAAC,aACC,IAAI;;yBAES,SAAS;IACf,GAAG,WAAW,mBAAmB;IACjC,GAAG,WAAW,iCACb,KAAK;GACR,CAAC,CAAC;;;2BAGQ,KAAK,kBACV,GAAG,WAAW,yBACd,GAAG;;;iCAGQ,YAAY;kCACX,kBAAkB;;wCAEZ,KAAK,cAAc;;;;;2BAKhC,WAAW;gCACN,KAAK,yBAAyB;;;gBAIlD,QAAQ;;;UAGV,aACE,IAAI;4BACY,WAAW;kBACrB,iBAAiB,QACf,IAAI;;iCAES,WAAW;mCACT,YAAY;yCACN,iBAAiB;gDACV,KAAK,iBAAiB;;uCAE/B,WAAW;6BACrB,MAAM;;0BAET,YAAY,IACV,IAAI;iCACC,UAAU;iCAEf,QAAQ;;wBAGhB,IAAI;oCACY,WAAW;uCACR,WAAW;6BACrB,MAAM;;0BAET,YAAY,IACV,IAAI;iCACC,UAAU;iCAEf,QAAQ;;sBAEd;;gBAGV,QAAQ;;;sBAGE,WAAW;8BACH,KAAK,kBAAkB;;;;;;;;;CAUnD,WAAW,cAAc;AACvB,SAAO;;;;;;CAOT,WAAW,iBAAiB;AAC1B,SAAO;;;gBAGOA;;;YAzOf,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,SAAA,KAAA,EAAA;YAM1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAMrD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,CAAC,CAAA,EAAA,mBAAA,WAAA,qBAAA,KAAA,EAAA;YAM3D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAe,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,cAAA,KAAA,EAAA;YAMpE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,SAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,iBAAA,KAAA,EAAA;YAMxE,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC,CAAA,EAAA,mBAAA,WAAA,aAAA,KAAA,EAAA;YAMnD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAgB,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAMrE,SAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,oBAAA,KAAA,EAAA;YAI1E,OAAO,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAIP,OAAO,CAAA,EAAA,mBAAA,WAAA,mBAAA,KAAA,EAAA;iCA7DTC,cAAc,wBAA8B,CAAA,EAAA,mBAAA;AAiP7C,IAAA,4BAAe"}

package/es-custom/components/add-select/add-select-column.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from "lit";
+//#region src/components/add-select/add-select-column.scss?lit
+var add_select_column_default = css([".c4p--add-select__next{position:relative}.c4p--add-select__next,.c4p--add-select__next__body{block-size:100%;display:flex;flex-direction:column;inline-size:100%}.c4p--add-select__next__header{border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);padding-block-end:.5rem;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next__search{margin-block-end:1rem}.c4p--add-select__next__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next__search-input{flex:1}.c4p--add-select__next__global-actions{align-items:flex-end;display:flex}.c4p--add-select__next__sub-header{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__tags{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next__tags-label{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-heading-compact-02-line-height,1.375);margin:0}.c4p--add-select__next__sub-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:1rem}.c4p--add-select__next__content{display:flex;flex:1;flex-direction:column;overflow:auto}.c4p--add-select__next-list{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-list{overflow-block:auto}}.c4p--add-select__next-list:focus{outline:none}.c4p--add-select__next-list-body{display:flex;flex-direction:column}.c4p--add-select__next-list-body--horizontal{align-items:stretch;block-size:100%;flex-direction:row}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-row{border-inline-start:.125rem solid transparent;display:flex;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row:focus:not(:focus-visible){outline:none}.c4p--add-select__next-row--selected{background-color:var(--cds-custom-layer-selected-01,#e0e0e0)}.c4p--add-select__next-row--selected .c4p--add-select__next-row__cell-wrapper{border-block-end-color:var(--cds-custom-border-subtle-selected-01,#c6c6c6)}.c4p--add-select__next-row--disabled{cursor:not-allowed}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__subtitle,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__title{color:var(--cds-custom-text-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__icon svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-layer-hover-01,#e8e8e8)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-custom-link-primary,#0f62fe)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-layer-selected-hover-01,#d1d1d1)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-custom-text-primary,#161616)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-custom-icon-primary,#161616)}.c4p--add-select__next-row__cell{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__cell-wrapper{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;justify-content:space-between;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem}.c4p--add-select__next-row__content{align-items:center;align-self:center;display:flex;flex:1}.c4p--add-select__next-row__checkbox{align-self:center;flex:none;margin-inline-end:1rem}.c4p--add-select__next-row__radio{align-self:center}.c4p--add-select__next-row__radio .cds-custom--radio-button__appearance{margin-inline-end:0}.c4p--add-select__next-row__icon{align-items:center;display:flex;margin-inline-end:.5rem}.c4p--add-select__next-row__text{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__title{color:var(--cds-custom-text-primary,#161616);display:block;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next-row__subtitle{color:var(--cds-custom-text-secondary,#525252);display:block;font-size:var(--cds-custom-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-custom-helper-text-01-letter-spacing,.32px);line-height:var(--cds-custom-helper-text-01-line-height,1.33333)}.c4p--add-select__next-row__meta{align-items:center;display:flex;margin-inline-start:.5rem}.c4p--add-select__next-row__view-item-panel{margin-inline-start:auto}.c4p--add-select__next-row-item-panel--selected{background-color:var(--cds-custom-layer-hover-01,#e8e8e8);border-inline-start:.125rem solid var(--cds-custom-interactive,#0f62fe)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:none}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-icon-primary,#161616)}}.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-icon-primary,#161616)}.c4p--add-select__next-row--skeleton{cursor:default;pointer-events:none}.c4p--add-select__next-row--skeleton:hover{background:none}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-control{background-color:var(--cds-custom-skeleton-element,#c6c6c6);block-size:1rem;border-radius:.125rem;flex:none;inline-size:1rem;margin-inline-end:1rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds-custom--icon--skeleton{block-size:2rem;border-radius:50%;inline-size:2rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds-custom--icon--skeleton:before{animation:none;border-radius:50%}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-title{margin-block-end:0}.c4p--add-select__next-column{block-size:100%;border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-direction:column;min-inline-size:300px;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column:last-child{border-inline-end:none}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column:last-child{border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6)}.c4p--add-select__next-column__actions,.c4p--add-select__next-column__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next-column__search-bar{padding-block-end:0;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next-column__search-wrapper{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__search-input{flex:1}.c4p--add-select__next-column__controls{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__filter-button,.c4p--add-select__next-column__sort-button{flex:none}.c4p--add-select__next-column__filter-popover{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__filter-popover .cds-custom--checkbox-wrapper{margin-block-end:.5rem}.c4p--add-select__next-column__filter-popover .cds-custom--checkbox-wrapper:last-child{margin-block-end:0}.c4p--add-select__next-column__header{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__select-all .cds-custom--checkbox-label{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__select-all .cds-custom--checkbox-label-text{align-items:center;display:flex;gap:.5rem;margin-inline-start:.5rem}.c4p--add-select__next-column__title-wrapper{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next-column__title{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next-column__rows{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-column__rows{overflow-block:auto}}.c4p--add-select__next__breadcrumbs{flex-wrap:wrap}.c4p--add-select__next__breadcrumb-item,.c4p--add-select__next__breadcrumbs{align-items:center;display:flex;gap:.25rem}.c4p--add-select__next__breadcrumb-button{background:none;border:none;color:var(--cds-custom-link-primary,#0f62fe);cursor:pointer;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572);padding-block:0;padding-inline:0;text-decoration:none}.c4p--add-select__next__breadcrumb-button:hover{color:var(--cds-custom-link-primary-hover,#0043ce);text-decoration:underline}.c4p--add-select__next__breadcrumb-button:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:.125rem}.c4p--add-select__next__breadcrumb-separator{align-items:center;color:var(--cds-custom-text-secondary,#525252);display:flex}.c4p--add-select__next__breadcrumb-separator svg{fill:currentColor}.c4p--add-select__next__breadcrumb-current{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary{display:flex;flex-direction:column}.c4p--add-select__next__selection-summary-header{align-items:center;border-block-end:1px solid var(--cds-custom-layer-accent-01,#e0e0e0);display:flex;padding-block-end:.5rem;padding-block-start:1.5rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-title{font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-heading-compact-02-line-height,1.375);margin-inline-end:.5rem}.c4p--add-select__next__selection-summary-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:auto}.c4p--add-select__next__selection-summary-item{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);position:relative}.c4p--add-select__next__selection-summary-item:hover{background-color:var(--cds-custom-layer-hover-01,#e8e8e8)}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item,.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item:last-child{border-block-end:none;border-block-start:none}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__heading{min-block-size:unset;padding-block:.75rem;padding-inline-end:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between;padding-block:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-content{padding-block-end:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__selection-summary-item-selected-item{flex:1}.c4p--add-select__next__selection-summary-item-title{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857)}.c4p--add-select__next__selection-summary-item-entry{margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-header{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.5rem}.c4p--add-select__next__selection-summary-item-body{font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857);margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-remove-button-container{align-items:center;display:inline-flex;justify-content:center;padding-inline-start:.5rem}.c4p--add-select__next__selection-summary-item--accordion .c4p--add-select__next__selection-summary-item-remove-button-container{inset-block-start:50%;inset-inline-end:1rem;padding-inline-start:0;position:absolute;transform:translateY(-50%)}.c4p--add-select__next__selection-summary-item-remove-button{opacity:0;transition:opacity 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next__selection-summary-item-remove-button{transition:none}}.c4p--add-select__next__selection-summary-item:focus-within .c4p--add-select__next__selection-summary-item-remove-button,.c4p--add-select__next__selection-summary-item:hover .c4p--add-select__next__selection-summary-item-remove-button{opacity:1}.c4p--add-select__next__selection-summary-item-content{margin-block-start:0}.c4p--add-select__next__selection-summary .cds-custom--accordion__arrow{transform:rotate(90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--accordion__arrow{transform:rotate(-90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__arrow{margin-block:0;margin-inline-end:0;margin-inline-start:1rem}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__title{margin-inline-end:0;margin-inline-start:.5rem;padding-inline-end:2rem}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--accordion__content{margin-block-start:0;padding-block:1rem;padding-inline:1rem}@keyframes add-select-item-panel-entrance{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes add-select-item-panel-exit{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes add-select-item-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes add-select-item-panel-exit-reduced{0%{opacity:1}to{opacity:0}}.c4p--add-select__next__item-summary-panel{block-size:100%;display:none;inline-size:100%;transform:translateX(0);transition-behavior:allow-discrete;transition-duration:.15s;transition-property:display,opacity,transform}.c4p--add-select__next__item-summary-panel--open{animation:add-select-item-panel-entrance .15s cubic-bezier(0,0,.38,.9) forwards;display:flex;flex-direction:column}@starting-style{.c4p--add-select__next__item-summary-panel--open{opacity:0;transform:translateX(100%)}}@media (prefers-reduced-motion){.c4p--add-select__next__item-summary-panel--open{animation:add-select-item-panel-entrance-reduced .15s cubic-bezier(0,0,.38,.9) forwards}@starting-style{.c4p--add-select__next__item-summary-panel--open{opacity:0;transform:translateX(0)}}}.c4p--add-select__next__item-summary-panel-header{align-items:center;border-block-end:1px solid var(--cds-custom-layer-accent-01,#e0e0e0);display:flex;gap:.5rem;justify-content:space-between;padding-block-end:.5rem;padding-block-start:2rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-title{font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-heading-compact-02-line-height,1.375)}.c4p--add-select__next__item-summary-panel-body{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-entry{margin-block-end:1rem}.c4p--add-select__next__item-summary-panel-entry-title{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next__item-summary-panel-entry-body{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}:host(c4p-add-select-column){display:block}:host(c4p-add-select-column) .c4p--add-select__next-column{display:flex;flex-direction:column;padding:1rem}:host(c4p-add-select-column) .c4p--add-select__next-column__search{padding:0}:host(c4p-add-select-column) .c4p--add-select__next-column__search--with-actions{align-items:flex-end;display:flex}:host(c4p-add-select-column) .c4p--add-select__next-column__search-input{flex:1}:host(c4p-add-select-column) .c4p--add-select__next-column__actions{align-items:flex-end;display:flex}:host(c4p-add-select-column) .c4p--add-select__next-column__header{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;padding:1rem}:host(c4p-add-select-column) .c4p--add-select__next-column__title-wrapper{align-items:center;display:flex;gap:.5rem}:host(c4p-add-select-column) .c4p--add-select__next-column__title{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572);margin-inline-end:.5rem}:host(c4p-add-select-column) .c4p--add-select__next-column__select-all::part(label){align-items:center;display:flex;gap:.5rem}:host(c4p-add-select-column) .c4p--add-select__next-column__rows{flex:1;overflow:auto}@supports (overflow-block:auto){:host(c4p-add-select-column) .c4p--add-select__next-column__rows{overflow-block:auto}}"]);
+//#endregion
+export { add_select_column_default as default };
+
+//# sourceMappingURL=add-select-column.scss.js.map

package/es-custom/components/add-select/add-select-column.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-column.scss.js","names":[],"sources":["../../../src/components/add-select/add-select-column.scss?lit"],"sourcesContent":["/**\n * Copyright IBM Corp. 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\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/type';\n\n$prefix: 'c4p';\n\n@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'\n  as *;\n\n:host(#{$prefix}-add-select-column) {\n  display: block;\n\n  .#{$block-class__next}-column {\n    display: flex;\n    flex-direction: column;\n    padding: $spacing-05;\n  }\n\n  .#{$block-class__next}-column__search {\n    padding: 0;\n\n    &--with-actions {\n      display: flex;\n      align-items: flex-end;\n    }\n  }\n\n  .#{$block-class__next}-column__search-input {\n    flex: 1;\n  }\n\n  .#{$block-class__next}-column__actions {\n    display: flex;\n    align-items: flex-end;\n  }\n\n  .#{$block-class__next}-column__header {\n    display: flex;\n    align-items: center;\n    padding: $spacing-05;\n    border-block-end: 1px solid $border-subtle-01;\n  }\n\n  .#{$block-class__next}-column__title-wrapper {\n    display: flex;\n    align-items: center;\n    gap: $spacing-03;\n  }\n\n  .#{$block-class__next}-column__title {\n    @include type.type-style('heading-compact-01');\n\n    margin-inline-end: $spacing-03;\n  }\n\n  // Select all: align slotted title + tag inside the checkbox label\n  .#{$block-class__next}-column__select-all {\n    &::part(label) {\n      display: flex;\n      align-items: center;\n      gap: $spacing-03;\n    }\n  }\n\n  .#{$block-class__next}-column__rows {\n    overflow: auto;\n    flex: 1;\n    @supports (overflow-block: auto) {\n      overflow-block: auto;\n    }\n  }\n}\n"],"mappings":""}

package/es-custom/components/add-select/add-select-item-panel.js

@@ -0,0 +1,162 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
+import add_select_item_panel_default$1 from "./add-select-item-panel.scss.js";
+import { classMap } from "lit/directives/class-map.js";
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
+import Close16 from "@carbon/icons/es/close/16";
+import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
+import '@carbon/web-components/es-custom/components/icon-button/index.js';
+//#region src/components/add-select/add-select-item-panel.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 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.
+*/
+const blockClass = `c4p--add-select__next`;
+/**
+* Add Select Item Panel — side panel displaying detailed information about an item.
+* CSS modifier `${blockClass}__item-summary-panel--open` is added when `open` is true,
+* enabling CSS-driven slide-in/out transitions.
+* @element c4p-add-select-item-panel
+* @slot default - Highest priority: replaces all body rendering when populated
+* @slot render-item - Medium priority: receives item for custom rendering
+* @fires c4p-add-select-item-panel-close - Fired when close icon is clicked
+*/
+let CDSAddSelectItemPanel = class CDSAddSelectItemPanel extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.title = "Item details";
+		this.item = null;
+		this.open = false;
+		this.closeIconDescription = "Close";
+		this.showCloseButton = true;
+		this._hasDefaultSlot = false;
+		this._hasRenderItemSlot = false;
+	}
+	_handleClose() {
+		this.dispatchEvent(new CustomEvent(this.constructor.eventClose, {
+			bubbles: true,
+			cancelable: true,
+			composed: true
+		}));
+	}
+	_renderDefaultContent() {
+		const { item } = this;
+		if (!item) return nothing;
+		const { itemDetails } = item;
+		if (!itemDetails || !Array.isArray(itemDetails) || itemDetails.length === 0) return nothing;
+		return html`
+      ${itemDetails.map(({ label, value: val }) => html`
+          <div class="${blockClass}__item-summary-panel-entry">
+            <p class="${blockClass}__item-summary-panel-entry-title">
+              ${label}
+            </p>
+            <p class="${blockClass}__item-summary-panel-entry-body">
+              ${String(val)}
+            </p>
+          </div>
+        `)}
+    `;
+	}
+	_handleDefaultSlotChange(e) {
+		const slot = e.target;
+		this._hasDefaultSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	_handleRenderItemSlotChange(e) {
+		const slot = e.target;
+		this._hasRenderItemSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	render() {
+		const { title, open, closeIconDescription, showCloseButton } = this;
+		const panelClasses = classMap({
+			[`${blockClass}__item-summary-panel`]: true,
+			[`${blockClass}__item-summary-panel--open`]: open
+		});
+		const showDefault = this._hasDefaultSlot;
+		const showRenderItem = !showDefault && this._hasRenderItemSlot;
+		const showItemDetails = !showDefault && !showRenderItem;
+		return html`
+      <div class=${panelClasses}>
+        <!-- Header -->
+        <div class="${blockClass}__item-summary-panel-header">
+          <p class="${blockClass}__item-summary-panel-title">${title}</p>
+          ${showCloseButton ? html`
+                <cds-custom-icon-button
+                  tooltip-text=${closeIconDescription}
+                  autoalign
+                  kind="ghost"
+                  size="sm"
+                  class="${blockClass}__item-summary-panel-close"
+                  @click=${this._handleClose}
+                >
+                  ${iconLoader(Close16, { slot: "icon" })}
+                </cds-custom-icon-button>
+              ` : nothing}
+        </div>
+
+        <!-- Body: each slot exists once; wrappers hide/show via display:none -->
+        <div class="${blockClass}__item-summary-panel-body">
+          <!-- default slot — always in DOM -->
+          <div style=${showDefault ? "" : "display:none"}>
+            <slot @slotchange=${this._handleDefaultSlotChange}></slot>
+          </div>
+          <!-- render-item slot — always in DOM -->
+          <div style=${showRenderItem ? "" : "display:none"}>
+            <slot
+              name="render-item"
+              @slotchange=${this._handleRenderItemSlotChange}
+            ></slot>
+          </div>
+          <!-- default item details — shown when no slot content -->
+          <div style=${showItemDetails ? "" : "display:none"}>
+            ${this._renderDefaultContent()}
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* The name of the custom event fired when the close icon is clicked.
+	*/
+	static get eventClose() {
+		return `c4p-add-select-item-panel-close`;
+	}
+	static {
+		this.styles = add_select_item_panel_default$1;
+	}
+};
+__decorate([property({ type: String })], CDSAddSelectItemPanel.prototype, "title", void 0);
+__decorate([property({ attribute: false })], CDSAddSelectItemPanel.prototype, "item", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSAddSelectItemPanel.prototype, "open", void 0);
+__decorate([property({
+	type: String,
+	attribute: "close-icon-description"
+})], CDSAddSelectItemPanel.prototype, "closeIconDescription", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-close-button",
+	reflect: true
+})], CDSAddSelectItemPanel.prototype, "showCloseButton", void 0);
+__decorate([state()], CDSAddSelectItemPanel.prototype, "_hasDefaultSlot", void 0);
+__decorate([state()], CDSAddSelectItemPanel.prototype, "_hasRenderItemSlot", void 0);
+CDSAddSelectItemPanel = __decorate([carbonElement(`c4p-add-select-item-panel`)], CDSAddSelectItemPanel);
+var add_select_item_panel_default = CDSAddSelectItemPanel;
+//#endregion
+export { add_select_item_panel_default as default };
+
+//# sourceMappingURL=add-select-item-panel.js.map

package/es-custom/components/add-select/add-select-item-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-item-panel.js","names":["styles","customElement"],"sources":["../../../src/components/add-select/add-select-item-panel.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es-custom/components/icon-button/index.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport Close16 from '@carbon/icons/es/close/16';\nimport { prefix } from '../../globals/settings';\nimport type { AddSelectItem } from '@carbon/ibm-products-utilities';\nimport styles from './add-select-item-panel.scss?lit';\n\nconst blockClass = `${prefix}--add-select__next`;\n\n/**\n * Add Select Item Panel — side panel displaying detailed information about an item.\n * CSS modifier `${blockClass}__item-summary-panel--open` is added when `open` is true,\n * enabling CSS-driven slide-in/out transitions.\n * @element c4p-add-select-item-panel\n * @slot default - Highest priority: replaces all body rendering when populated\n * @slot render-item - Medium priority: receives item for custom rendering\n * @fires c4p-add-select-item-panel-close - Fired when close icon is clicked\n */\n@customElement(`${prefix}-add-select-item-panel`)\nclass CDSAddSelectItemPanel extends LitElement {\n  /**\n   * Panel title\n   */\n  @property({ type: String })\n  title = 'Item details';\n\n  /**\n   * Item data (set via JS property)\n   */\n  @property({ attribute: false })\n  item: AddSelectItem | null = null;\n\n  /**\n   * Controls panel visibility via CSS modifier class (enables CSS transitions)\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Accessible label for the close icon button\n   */\n  @property({ type: String, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Whether to show the close button\n   */\n  @property({ type: Boolean, attribute: 'show-close-button', reflect: true })\n  showCloseButton = true;\n\n  private _handleClose() {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectItemPanel).eventClose,\n        { bubbles: true, cancelable: true, composed: true }\n      )\n    );\n  }\n\n  private _renderDefaultContent() {\n    const { item } = this;\n    if (!item) {\n      return nothing;\n    }\n    const { itemDetails } = item;\n    if (\n      !itemDetails ||\n      !Array.isArray(itemDetails) ||\n      itemDetails.length === 0\n    ) {\n      return nothing;\n    }\n    return html`\n      ${itemDetails.map(\n        ({ label, value: val }) => html`\n          <div class=\"${blockClass}__item-summary-panel-entry\">\n            <p class=\"${blockClass}__item-summary-panel-entry-title\">\n              ${label}\n            </p>\n            <p class=\"${blockClass}__item-summary-panel-entry-body\">\n              ${String(val)}\n            </p>\n          </div>\n        `\n      )}\n    `;\n  }\n\n  /** Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlot = false;\n\n  /** Whether the render-item slot has assigned elements */\n  @state()\n  private _hasRenderItemSlot = false;\n\n  private _handleDefaultSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasDefaultSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleRenderItemSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasRenderItemSlot =\n      slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  render() {\n    const { title, open, closeIconDescription, showCloseButton } = this;\n\n    const panelClasses = classMap({\n      [`${blockClass}__item-summary-panel`]: true,\n      [`${blockClass}__item-summary-panel--open`]: open,\n    });\n\n    // Priority: default slot > render-item slot > default item details\n    const showDefault = this._hasDefaultSlot;\n    const showRenderItem = !showDefault && this._hasRenderItemSlot;\n    const showItemDetails = !showDefault && !showRenderItem;\n\n    return html`\n      <div class=${panelClasses}>\n        <!-- Header -->\n        <div class=\"${blockClass}__item-summary-panel-header\">\n          <p class=\"${blockClass}__item-summary-panel-title\">${title}</p>\n          ${showCloseButton\n            ? html`\n                <cds-custom-icon-button\n                  tooltip-text=${closeIconDescription}\n                  autoalign\n                  kind=\"ghost\"\n                  size=\"sm\"\n                  class=\"${blockClass}__item-summary-panel-close\"\n                  @click=${this._handleClose}\n                >\n                  ${iconLoader(Close16, { slot: 'icon' })}\n                </cds-custom-icon-button>\n              `\n            : nothing}\n        </div>\n\n        <!-- Body: each slot exists once; wrappers hide/show via display:none -->\n        <div class=\"${blockClass}__item-summary-panel-body\">\n          <!-- default slot — always in DOM -->\n          <div style=${showDefault ? '' : 'display:none'}>\n            <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n          </div>\n          <!-- render-item slot — always in DOM -->\n          <div style=${showRenderItem ? '' : 'display:none'}>\n            <slot\n              name=\"render-item\"\n              @slotchange=${this._handleRenderItemSlotChange}\n            ></slot>\n          </div>\n          <!-- default item details — shown when no slot content -->\n          <div style=${showItemDetails ? '' : 'display:none'}>\n            ${this._renderDefaultContent()}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when the close icon is clicked.\n   */\n  static get eventClose() {\n    return `${prefix}-add-select-item-panel-close`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAddSelectItemPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,aAAa;;;;;;;;;;AAWnB,IAAA,wBAAA,MACM,8BAA8B,WAAW;;;eAKrC;cAMqB;cAMtB;8BAMgB;yBAML;yBA0CQ;4BAIG;;CA5C7B,eAAuB;AACrB,OAAK,cACH,IAAI,YACD,KAAK,YAA6C,YACnD;GAAE,SAAS;GAAM,YAAY;GAAM,UAAU;GAAM,CACpD,CACF;;CAGH,wBAAgC;EAC9B,MAAM,EAAE,SAAS;AACjB,MAAI,CAAC,KACH,QAAO;EAET,MAAM,EAAE,gBAAgB;AACxB,MACE,CAAC,eACD,CAAC,MAAM,QAAQ,YAAY,IAC3B,YAAY,WAAW,EAEvB,QAAO;AAET,SAAO,IAAI;QACP,YAAY,KACX,EAAE,OAAO,OAAO,UAAU,IAAI;wBACf,WAAW;wBACX,WAAW;gBACnB,MAAM;;wBAEE,WAAW;gBACnB,OAAO,IAAI,CAAC;;;UAIrB,CAAC;;;CAYN,yBAAiC,GAAU;EACzC,MAAM,OAAO,EAAE;AACf,OAAK,kBAAkB,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS;;CAG3E,4BAAoC,GAAU;EAC5C,MAAM,OAAO,EAAE;AACf,OAAK,qBACH,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC,SAAS;;CAGtD,SAAS;EACP,MAAM,EAAE,OAAO,MAAM,sBAAsB,oBAAoB;EAE/D,MAAM,eAAe,SAAS;IAC3B,GAAG,WAAW,wBAAwB;IACtC,GAAG,WAAW,8BAA8B;GAC9C,CAAC;EAGF,MAAM,cAAc,KAAK;EACzB,MAAM,iBAAiB,CAAC,eAAe,KAAK;EAC5C,MAAM,kBAAkB,CAAC,eAAe,CAAC;AAEzC,SAAO,IAAI;mBACI,aAAa;;sBAEV,WAAW;sBACX,WAAW,8BAA8B,MAAM;YACzD,kBACE,IAAI;;iCAEe,qBAAqB;;;;2BAI3B,WAAW;2BACX,KAAK,aAAa;;oBAEzB,WAAW,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAC;;kBAG5C,QAAQ;;;;sBAIA,WAAW;;uBAEV,cAAc,KAAK,eAAe;gCACzB,KAAK,yBAAyB;;;uBAGvC,iBAAiB,KAAK,eAAe;;;4BAGhC,KAAK,4BAA4B;;;;uBAItC,kBAAkB,KAAK,eAAe;cAC/C,KAAK,uBAAuB,CAAC;;;;;;;;;CAUzC,WAAW,aAAa;AACtB,SAAO;;;gBAGOA;;;YAnJf,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,sBAAA,WAAA,SAAA,KAAA,EAAA;YAM1B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,sBAAA,WAAA,QAAA,KAAA,EAAA;YAM9B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,sBAAA,WAAA,QAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAA0B,CAAC,CAAA,EAAA,sBAAA,WAAA,wBAAA,KAAA,EAAA;YAM/D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;CAAM,CAAC,CAAA,EAAA,sBAAA,WAAA,mBAAA,KAAA,EAAA;YA0C1E,OAAO,CAAA,EAAA,sBAAA,WAAA,mBAAA,KAAA,EAAA;YAIP,OAAO,CAAA,EAAA,sBAAA,WAAA,sBAAA,KAAA,EAAA;oCA3ETC,cAAc,4BAAkC,CAAA,EAAA,sBAAA;AA2JjD,IAAA,gCAAe"}

package/es-custom/components/add-select/add-select-item-panel.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from "lit";
+//#region src/components/add-select/add-select-item-panel.scss?lit
+var add_select_item_panel_default = css([".c4p--add-select__next{position:relative}.c4p--add-select__next,.c4p--add-select__next__body{block-size:100%;display:flex;flex-direction:column;inline-size:100%}.c4p--add-select__next__header{border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);padding-block-end:.5rem;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next__search{margin-block-end:1rem}.c4p--add-select__next__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next__search-input{flex:1}.c4p--add-select__next__global-actions{align-items:flex-end;display:flex}.c4p--add-select__next__sub-header{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__tags{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next__tags-label{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-heading-compact-02-line-height,1.375);margin:0}.c4p--add-select__next__sub-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:1rem}.c4p--add-select__next__content{display:flex;flex:1;flex-direction:column;overflow:auto}.c4p--add-select__next-list{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-list{overflow-block:auto}}.c4p--add-select__next-list:focus{outline:none}.c4p--add-select__next-list-body{display:flex;flex-direction:column}.c4p--add-select__next-list-body--horizontal{align-items:stretch;block-size:100%;flex-direction:row}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-row{border-inline-start:.125rem solid transparent;display:flex;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row:focus:not(:focus-visible){outline:none}.c4p--add-select__next-row--selected{background-color:var(--cds-custom-layer-selected-01,#e0e0e0)}.c4p--add-select__next-row--selected .c4p--add-select__next-row__cell-wrapper{border-block-end-color:var(--cds-custom-border-subtle-selected-01,#c6c6c6)}.c4p--add-select__next-row--disabled{cursor:not-allowed}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__subtitle,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__title{color:var(--cds-custom-text-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__icon svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-layer-hover-01,#e8e8e8)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-custom-link-primary,#0f62fe)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-layer-selected-hover-01,#d1d1d1)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-custom-text-primary,#161616)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-custom-icon-primary,#161616)}.c4p--add-select__next-row__cell{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__cell-wrapper{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;justify-content:space-between;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem}.c4p--add-select__next-row__content{align-items:center;align-self:center;display:flex;flex:1}.c4p--add-select__next-row__checkbox{align-self:center;flex:none;margin-inline-end:1rem}.c4p--add-select__next-row__radio{align-self:center}.c4p--add-select__next-row__radio .cds-custom--radio-button__appearance{margin-inline-end:0}.c4p--add-select__next-row__icon{align-items:center;display:flex;margin-inline-end:.5rem}.c4p--add-select__next-row__text{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__title{color:var(--cds-custom-text-primary,#161616);display:block;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next-row__subtitle{color:var(--cds-custom-text-secondary,#525252);display:block;font-size:var(--cds-custom-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-custom-helper-text-01-letter-spacing,.32px);line-height:var(--cds-custom-helper-text-01-line-height,1.33333)}.c4p--add-select__next-row__meta{align-items:center;display:flex;margin-inline-start:.5rem}.c4p--add-select__next-row__view-item-panel{margin-inline-start:auto}.c4p--add-select__next-row-item-panel--selected{background-color:var(--cds-custom-layer-hover-01,#e8e8e8);border-inline-start:.125rem solid var(--cds-custom-interactive,#0f62fe)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:none}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-icon-primary,#161616)}}.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-icon-primary,#161616)}.c4p--add-select__next-row--skeleton{cursor:default;pointer-events:none}.c4p--add-select__next-row--skeleton:hover{background:none}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-control{background-color:var(--cds-custom-skeleton-element,#c6c6c6);block-size:1rem;border-radius:.125rem;flex:none;inline-size:1rem;margin-inline-end:1rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds-custom--icon--skeleton{block-size:2rem;border-radius:50%;inline-size:2rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds-custom--icon--skeleton:before{animation:none;border-radius:50%}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-title{margin-block-end:0}.c4p--add-select__next-column{block-size:100%;border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;flex-direction:column;min-inline-size:300px;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column:last-child{border-inline-end:none}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column:last-child{border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6)}.c4p--add-select__next-column__actions,.c4p--add-select__next-column__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next-column__search-bar{padding-block-end:0;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next-column__search-wrapper{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__search-input{flex:1}.c4p--add-select__next-column__controls{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__filter-button,.c4p--add-select__next-column__sort-button{flex:none}.c4p--add-select__next-column__filter-popover{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__filter-popover .cds-custom--checkbox-wrapper{margin-block-end:.5rem}.c4p--add-select__next-column__filter-popover .cds-custom--checkbox-wrapper:last-child{margin-block-end:0}.c4p--add-select__next-column__header{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__select-all .cds-custom--checkbox-label{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__select-all .cds-custom--checkbox-label-text{align-items:center;display:flex;gap:.5rem;margin-inline-start:.5rem}.c4p--add-select__next-column__title-wrapper{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next-column__title{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next-column__rows{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-column__rows{overflow-block:auto}}.c4p--add-select__next__breadcrumbs{flex-wrap:wrap}.c4p--add-select__next__breadcrumb-item,.c4p--add-select__next__breadcrumbs{align-items:center;display:flex;gap:.25rem}.c4p--add-select__next__breadcrumb-button{background:none;border:none;color:var(--cds-custom-link-primary,#0f62fe);cursor:pointer;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572);padding-block:0;padding-inline:0;text-decoration:none}.c4p--add-select__next__breadcrumb-button:hover{color:var(--cds-custom-link-primary-hover,#0043ce);text-decoration:underline}.c4p--add-select__next__breadcrumb-button:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:.125rem}.c4p--add-select__next__breadcrumb-separator{align-items:center;color:var(--cds-custom-text-secondary,#525252);display:flex}.c4p--add-select__next__breadcrumb-separator svg{fill:currentColor}.c4p--add-select__next__breadcrumb-current{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary{display:flex;flex-direction:column}.c4p--add-select__next__selection-summary-header{align-items:center;border-block-end:1px solid var(--cds-custom-layer-accent-01,#e0e0e0);display:flex;padding-block-end:.5rem;padding-block-start:1.5rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-title{font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-heading-compact-02-line-height,1.375);margin-inline-end:.5rem}.c4p--add-select__next__selection-summary-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:auto}.c4p--add-select__next__selection-summary-item{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);position:relative}.c4p--add-select__next__selection-summary-item:hover{background-color:var(--cds-custom-layer-hover-01,#e8e8e8)}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item,.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item:last-child{border-block-end:none;border-block-start:none}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__heading{min-block-size:unset;padding-block:.75rem;padding-inline-end:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between;padding-block:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-content{padding-block-end:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__selection-summary-item-selected-item{flex:1}.c4p--add-select__next__selection-summary-item-title{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857)}.c4p--add-select__next__selection-summary-item-entry{margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-header{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.5rem}.c4p--add-select__next__selection-summary-item-body{font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857);margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-remove-button-container{align-items:center;display:inline-flex;justify-content:center;padding-inline-start:.5rem}.c4p--add-select__next__selection-summary-item--accordion .c4p--add-select__next__selection-summary-item-remove-button-container{inset-block-start:50%;inset-inline-end:1rem;padding-inline-start:0;position:absolute;transform:translateY(-50%)}.c4p--add-select__next__selection-summary-item-remove-button{opacity:0;transition:opacity 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next__selection-summary-item-remove-button{transition:none}}.c4p--add-select__next__selection-summary-item:focus-within .c4p--add-select__next__selection-summary-item-remove-button,.c4p--add-select__next__selection-summary-item:hover .c4p--add-select__next__selection-summary-item-remove-button{opacity:1}.c4p--add-select__next__selection-summary-item-content{margin-block-start:0}.c4p--add-select__next__selection-summary .cds-custom--accordion__arrow{transform:rotate(90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--accordion__arrow{transform:rotate(-90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__arrow{margin-block:0;margin-inline-end:0;margin-inline-start:1rem}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__title{margin-inline-end:0;margin-inline-start:.5rem;padding-inline-end:2rem}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--accordion__content{margin-block-start:0;padding-block:1rem;padding-inline:1rem}@keyframes add-select-item-panel-entrance{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes add-select-item-panel-exit{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes add-select-item-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes add-select-item-panel-exit-reduced{0%{opacity:1}to{opacity:0}}.c4p--add-select__next__item-summary-panel{block-size:100%;display:none;inline-size:100%;transform:translateX(0);transition-behavior:allow-discrete;transition-duration:.15s;transition-property:display,opacity,transform}.c4p--add-select__next__item-summary-panel--open{animation:add-select-item-panel-entrance .15s cubic-bezier(0,0,.38,.9) forwards;display:flex;flex-direction:column}@starting-style{.c4p--add-select__next__item-summary-panel--open{opacity:0;transform:translateX(100%)}}@media (prefers-reduced-motion){.c4p--add-select__next__item-summary-panel--open{animation:add-select-item-panel-entrance-reduced .15s cubic-bezier(0,0,.38,.9) forwards}@starting-style{.c4p--add-select__next__item-summary-panel--open{opacity:0;transform:translateX(0)}}}.c4p--add-select__next__item-summary-panel-header{align-items:center;border-block-end:1px solid var(--cds-custom-layer-accent-01,#e0e0e0);display:flex;gap:.5rem;justify-content:space-between;padding-block-end:.5rem;padding-block-start:2rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-title{font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-heading-compact-02-line-height,1.375)}.c4p--add-select__next__item-summary-panel-body{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-entry{margin-block-end:1rem}.c4p--add-select__next__item-summary-panel-entry-title{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next__item-summary-panel-entry-body{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}:host(c4p-add-select-item-panel){display:block}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel{block-size:100%;display:flex;flex-direction:column;padding:0;transform:translateX(100%);transition:transform .15s cubic-bezier(.2,0,.38,.9)}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel--open{transform:translateX(0)}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel-header{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;justify-content:space-between;margin-block-end:0;padding:2rem 1rem .5rem}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel-title{color:var(--cds-custom-text-primary,#161616);flex:1;font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572);margin:0}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel-body{flex:1;overflow:auto;padding:1rem}@supports (overflow-block:auto){:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel-body{overflow-block:auto}}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel-entry{margin-block-end:.75rem}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel-entry-title{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin:0}:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel-entry-body{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572);margin:0}@media screen and (prefers-reduced-motion:reduce){:host(c4p-add-select-item-panel) .c4p--add-select__next__item-summary-panel{transition:none}}"]);
+//#endregion
+export { add_select_item_panel_default as default };
+
+//# sourceMappingURL=add-select-item-panel.scss.js.map

package/es-custom/components/add-select/add-select-item-panel.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-item-panel.scss.js","names":[],"sources":["../../../src/components/add-select/add-select-item-panel.scss?lit"],"sourcesContent":["/**\n * Copyright IBM Corp. 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\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/motion' as *;\n\n$prefix: 'c4p';\n\n@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'\n  as *;\n\n:host(#{$prefix}-add-select-item-panel) {\n  display: block;\n\n  .#{$block-class__next}__item-summary-panel {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    block-size: 100%;\n    transform: translateX(100%);\n    transition: transform $duration-moderate-01 motion(standard, productive);\n  }\n\n  .#{$block-class__next}__item-summary-panel--open {\n    transform: translateX(0);\n  }\n\n  .#{$block-class__next}__item-summary-panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: $spacing-07 $spacing-05 $spacing-03;\n    border-block-end: 1px solid $border-subtle-01;\n    margin-block-end: 0;\n  }\n\n  .#{$block-class__next}__item-summary-panel-title {\n    @include type.type-style('heading-compact-01');\n\n    flex: 1;\n    margin: 0;\n    color: $text-primary;\n  }\n\n  .#{$block-class__next}__item-summary-panel-body {\n    overflow: auto;\n    flex: 1;\n    padding: $spacing-05;\n    @supports (overflow-block: auto) {\n      overflow-block: auto;\n    }\n  }\n\n  .#{$block-class__next}__item-summary-panel-entry {\n    margin-block-end: $spacing-04;\n  }\n\n  .#{$block-class__next}__item-summary-panel-entry-title {\n    @include type.type-style('label-01');\n\n    margin: 0;\n    color: $text-secondary;\n  }\n\n  .#{$block-class__next}__item-summary-panel-entry-body {\n    @include type.type-style('body-compact-01');\n\n    margin: 0;\n    color: $text-primary;\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    .#{$block-class__next}__item-summary-panel {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}