@carbon/web-components 2.51.1 → 2.52.0

package/es-custom/components/contained-list/contained-list-item.js

@@ -15,7 +15,7 @@ import { classMap } from "lit/directives/class-map.js";
 
 //#region src/components/contained-list/contained-list-item.ts
 /**
-* Copyright IBM Corp. 2022, 2025
+* Copyright IBM Corp. 2022, 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.
@@ -71,16 +71,8 @@ let CDSContainedListItem = class CDSContainedListItem extends LitElement {
 		});
 		const contentClasses = `${prefix}--contained-list-item__content`;
 		const content = html`
-      ${_hasIcon ? html`
-            <div class="${prefix}--contained-list-item__icon">
-              <slot
-                name="icon"
-                @slotchange="${this._handleIconSlotChange}"></slot>
-            </div>
-          ` : html`<slot
-            name="icon"
-            @slotchange="${this._handleIconSlotChange}"></slot>`}
-      <div><slot></slot></div>
+      <slot name="icon" @slotchange="${this._handleIconSlotChange}"></slot>
+      <slot></slot>
     `;
 		return html`
       <div class="${classes}">

package/es-custom/components/contained-list/contained-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"contained-list-item.js","names":["styles","customElement"],"sources":["../../../src/components/contained-list/contained-list-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2022, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './contained-list.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Contained list item.\n *\n * @element cds-custom-contained-list-item\n * @slot - The content of the list item\n * @slot icon - The icon slot for rendering an icon\n * @slot action - The action slot for interactive elements\n * @fires cds-custom-contained-list-item-click - Fires when clickable item is clicked\n */\n@customElement(`${prefix}-contained-list-item`)\nclass CDSContainedListItem extends LitElement {\n  /**\n   * Whether this item is clickable\n   */\n  @property({ type: Boolean, reflect: true })\n  clickable = false;\n\n  /**\n   * Whether this item is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Handles slot change for icon\n   */\n  private _handleIconSlotChange({ target }: Event) {\n    const slot = target as HTMLSlotElement;\n    const hasIcon = slot.assignedElements().length > 0;\n    this._hasIcon = hasIcon;\n    this.requestUpdate();\n  }\n\n  private _hasIcon = false;\n\n  /**\n   * Handles click event\n   */\n  private _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    const { eventClick } = this.constructor as typeof CDSContainedListItem;\n    this.dispatchEvent(\n      new CustomEvent(eventClick, {\n        bubbles: true,\n        composed: true,\n        detail: { item: this },\n      })\n    );\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  render() {\n    const { disabled, clickable, _hasIcon } = this;\n\n    const classes = classMap({\n      [`${prefix}--contained-list-item`]: true,\n      [`${prefix}--contained-list-item--clickable`]: clickable,\n      [`${prefix}--contained-list-item--with-icon`]: _hasIcon,\n    });\n\n    const contentClasses = `${prefix}--contained-list-item__content`;\n\n    const content = html`\n      ${_hasIcon\n        ? html`\n            <div class=\"${prefix}--contained-list-item__icon\">\n              <slot\n                name=\"icon\"\n                @slotchange=\"${this._handleIconSlotChange}\"></slot>\n            </div>\n          `\n        : html`<slot\n            name=\"icon\"\n            @slotchange=\"${this._handleIconSlotChange}\"></slot>`}\n      <div><slot></slot></div>\n    `;\n\n    return html`\n      <div class=\"${classes}\">\n        ${clickable\n          ? html`\n              <button\n                class=\"${contentClasses}\"\n                type=\"button\"\n                ?disabled=\"${disabled}\"\n                @click=\"${this._handleClick}\">\n                ${content}\n              </button>\n            `\n          : html`<div class=\"${contentClasses}\">${content}</div>`}\n        <div class=\"${prefix}--contained-list-item__action\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when a clickable item is clicked\n   */\n  static get eventClick() {\n    return `${prefix}-contained-list-item-click`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSContainedListItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,iCACM,6BAA6B,WAAW;;;mBAKhC;kBAMD;kBAYQ;;;;;CAPnB,AAAQ,sBAAsB,EAAE,UAAiB;AAG/C,OAAK,WAFQ,OACQ,kBAAkB,CAAC,SAAS;AAEjD,OAAK,eAAe;;;;;CAQtB,AAAQ,aAAa,OAAmB;AACtC,MAAI,KAAK,UAAU;AACjB,SAAM,gBAAgB;AACtB;;EAGF,MAAM,EAAE,eAAe,KAAK;AAC5B,OAAK,cACH,IAAI,YAAY,YAAY;GAC1B,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,MAAM,MAAM;GACvB,CAAC,CACH;;CAGH,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;;CAIzC,SAAS;EACP,MAAM,EAAE,UAAU,WAAW,aAAa;EAE1C,MAAM,UAAU,SAAS;IACtB,GAAG,OAAO,yBAAyB;IACnC,GAAG,OAAO,oCAAoC;IAC9C,GAAG,OAAO,oCAAoC;GAChD,CAAC;EAEF,MAAM,iBAAiB,GAAG,OAAO;EAEjC,MAAM,UAAU,IAAI;QAChB,WACE,IAAI;0BACY,OAAO;;;+BAGF,KAAK,sBAAsB;;cAGhD,IAAI;;2BAEa,KAAK,sBAAsB,WAAW;;;AAI7D,SAAO,IAAI;oBACK,QAAQ;UAClB,YACE,IAAI;;yBAES,eAAe;;6BAEX,SAAS;0BACZ,KAAK,aAAa;kBAC1B,QAAQ;;gBAGd,IAAI,eAAe,eAAe,IAAI,QAAQ,QAAQ;sBAC5C,OAAO;;;;;;;;;CAU3B,WAAW,aAAa;AACtB,SAAO,GAAG,OAAO;;;gBAGHA;;;YApGf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;mCAX5CC,cAAc,GAAG,OAAO,sBAAsB;AA4G/C,kCAAe"}
+{"version":3,"file":"contained-list-item.js","names":["styles","customElement"],"sources":["../../../src/components/contained-list/contained-list-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2022, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './contained-list.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Contained list item.\n *\n * @element cds-custom-contained-list-item\n * @slot - The content of the list item\n * @slot icon - The icon slot for rendering an icon\n * @slot action - The action slot for interactive elements\n * @fires cds-custom-contained-list-item-click - Fires when clickable item is clicked\n */\n@customElement(`${prefix}-contained-list-item`)\nclass CDSContainedListItem extends LitElement {\n  /**\n   * Whether this item is clickable\n   */\n  @property({ type: Boolean, reflect: true })\n  clickable = false;\n\n  /**\n   * Whether this item is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Handles slot change for icon\n   */\n  private _handleIconSlotChange({ target }: Event) {\n    const slot = target as HTMLSlotElement;\n    const hasIcon = slot.assignedElements().length > 0;\n    this._hasIcon = hasIcon;\n    this.requestUpdate();\n  }\n\n  private _hasIcon = false;\n\n  /**\n   * Handles click event\n   */\n  private _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    const { eventClick } = this.constructor as typeof CDSContainedListItem;\n    this.dispatchEvent(\n      new CustomEvent(eventClick, {\n        bubbles: true,\n        composed: true,\n        detail: { item: this },\n      })\n    );\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  render() {\n    const { disabled, clickable, _hasIcon } = this;\n\n    const classes = classMap({\n      [`${prefix}--contained-list-item`]: true,\n      [`${prefix}--contained-list-item--clickable`]: clickable,\n      [`${prefix}--contained-list-item--with-icon`]: _hasIcon,\n    });\n\n    const contentClasses = `${prefix}--contained-list-item__content`;\n\n    const content = html`\n      <slot name=\"icon\" @slotchange=\"${this._handleIconSlotChange}\"></slot>\n      <slot></slot>\n    `;\n\n    return html`\n      <div class=\"${classes}\">\n        ${clickable\n          ? html`\n              <button\n                class=\"${contentClasses}\"\n                type=\"button\"\n                ?disabled=\"${disabled}\"\n                @click=\"${this._handleClick}\">\n                ${content}\n              </button>\n            `\n          : html`<div class=\"${contentClasses}\">${content}</div>`}\n        <div class=\"${prefix}--contained-list-item__action\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when a clickable item is clicked\n   */\n  static get eventClick() {\n    return `${prefix}-contained-list-item-click`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSContainedListItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,iCACM,6BAA6B,WAAW;;;mBAKhC;kBAMD;kBAYQ;;;;;CAPnB,AAAQ,sBAAsB,EAAE,UAAiB;AAG/C,OAAK,WAFQ,OACQ,kBAAkB,CAAC,SAAS;AAEjD,OAAK,eAAe;;;;;CAQtB,AAAQ,aAAa,OAAmB;AACtC,MAAI,KAAK,UAAU;AACjB,SAAM,gBAAgB;AACtB;;EAGF,MAAM,EAAE,eAAe,KAAK;AAC5B,OAAK,cACH,IAAI,YAAY,YAAY;GAC1B,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,MAAM,MAAM;GACvB,CAAC,CACH;;CAGH,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;;CAIzC,SAAS;EACP,MAAM,EAAE,UAAU,WAAW,aAAa;EAE1C,MAAM,UAAU,SAAS;IACtB,GAAG,OAAO,yBAAyB;IACnC,GAAG,OAAO,oCAAoC;IAC9C,GAAG,OAAO,oCAAoC;GAChD,CAAC;EAEF,MAAM,iBAAiB,GAAG,OAAO;EAEjC,MAAM,UAAU,IAAI;uCACe,KAAK,sBAAsB;;;AAI9D,SAAO,IAAI;oBACK,QAAQ;UAClB,YACE,IAAI;;yBAES,eAAe;;6BAEX,SAAS;0BACZ,KAAK,aAAa;kBAC1B,QAAQ;;gBAGd,IAAI,eAAe,eAAe,IAAI,QAAQ,QAAQ;sBAC5C,OAAO;;;;;;;;;CAU3B,WAAW,aAAa;AACtB,SAAO,GAAG,OAAO;;;gBAGHA;;;YA1Ff,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;mCAX5CC,cAAc,GAAG,OAAO,sBAAsB;AAkG/C,kCAAe"}