@carbon/ibm-products-web-components/es/components/checklist/checklist-item.js

Carbon for IBM Products Web Components

/**
 * Copyright IBM Corp. 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { __decorate } from 'tslib';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import { prefix } from '../../globals/settings.js';
import styles from './checklist.scss.js';
import { Kinds, Statuses } from './checklist.types.js';
import { classMap } from 'lit/directives/class-map.js';

/**
 * @license
 *
 * Copyright IBM Corp. 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
/**
 * item in c4p-checklist-group
 * @element c4p-checklist-item
 * @slot icon - checklist item icon, usually a status indicator icon
 * @slot content - checklist item title/description
 * @fires c4p-checklist-item-clicked - The custom event which is fired when a user clicks on checklist item with clickable attribute.
 */
let CDSChecklistItem = class CDSChecklistItem extends LitElement {
    constructor() {
        super(...arguments);
        /** When true, makes the checklist item label clickable */
        this.clickable = false;
    }
    _handleClick(event) {
        const triggeredBy = event.target;
        event.stopPropagation();
        const init = {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: {
                triggeredBy,
            },
        };
        this.dispatchEvent(new CustomEvent(this.constructor.checklistItemClicked, init));
    }
    _handleKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            this._handleClick(event);
        }
    }
    _mapStatusToKind(status) {
        switch (status) {
            case Statuses.NotStarted:
                return Kinds.unchecked;
            case Statuses.InProgress:
                return Kinds.indeterminate;
            case Statuses.Completed:
                return Kinds.checked;
            case Statuses.Error:
                return Kinds.error;
            case Statuses.Disabled:
                return Kinds.disabled;
            default:
                return Kinds.error;
        }
    }
    _updateAttributes() {
        this.setAttribute('role', 'listitem');
        this.classList.add(`${prefix}--checklist__list-item`);
    }
    firstUpdated() {
        this._updateAttributes();
    }
    render() {
        const { clickable, label, status, _handleClick: handleClick, _handleKeyDown: handleKeyDown, } = this;
        const iconKind = this._mapStatusToKind(status);
        const classes = classMap({
            [`${prefix}--checklist__label`]: true,
            [`${prefix}--checklist__label--clickable`]: clickable,
            [`${prefix}--checklist__label--disabled`]: status === Statuses.Disabled,
        });
        return html `
      <slot name="icon">
        <c4p-checklist-icon kind="${iconKind}"></c4p-checklist-icon>
      </slot>
      <slot name="content">
        <div
          class="${classes}"
          title=${label}
          role=${clickable ? 'link' : undefined}
          @click=${clickable ? handleClick : undefined}
          @keydown=${clickable ? handleKeyDown : undefined}
          tabindex=${clickable ? 0 : -1}
        >
          ${label}
        </div>
      </slot>
    `;
    }
    /**
     * The custom event which is fired when the checklist item is clicked.
     */
    static get checklistItemClicked() {
        return `${prefix}-checklist-item-clicked`;
    }
};
CDSChecklistItem.styles = styles;
__decorate([
    property()
], CDSChecklistItem.prototype, "label", void 0);
__decorate([
    property()
], CDSChecklistItem.prototype, "status", void 0);
__decorate([
    property({ type: Boolean })
], CDSChecklistItem.prototype, "clickable", void 0);
CDSChecklistItem = __decorate([
    carbonElement(`${prefix}-checklist-item`)
], CDSChecklistItem);
var CDSChecklistItem$1 = CDSChecklistItem;

export { CDSChecklistItem$1 as default };
//# sourceMappingURL=checklist-item.js.map