@carbon/ibm-products-web-components/es/components/checklist/checklist.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 { classMap } from 'lit/directives/class-map.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import ChevronIcon16 from '@carbon/icons/es/chevron--up/16';
import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
import '@carbon/web-components/es/components/icon-button/index.js';
import '@carbon/web-components/es/components/link/index.js';
import { prefix } from '../../globals/settings.js';
import styles from './checklist.scss.js';
import './checklist-chart.js';
import './checklist-icon.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.
 */
const blockClass = `${prefix}--checklist`;
/**
 * @element c4p-checklist
 * @slot checklist-header - Header area which includes the title and the progress indicator.
 * @slot default - Contains one or more `c4p-checklist-group` components to organize tasks into logical groups.
 * @slot checklist-footer - Optional footer area for actions like buttons, links, or additional notes.
 * @fires c4p-checklist-view-all - The custom event which is fired when a user clicks on View All button in checklist footer.
 * @fires c4p-checklist-toggle - The custom event which is fired when user clicks on toggle button in checklist header.
 */
let CDSChecklist = class CDSChecklist extends LitElement {
    constructor() {
        super(...arguments);
        /**
         * Specifies whether the component is opened or closed.
         */
        this.open = false;
        /**
         * Whether or not to show the open/close toggle.
         */
        this.disableToggle = false;
    }
    _viewAll(event) {
        const triggeredBy = event.target;
        event.stopPropagation();
        const init = {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: {
                triggeredBy,
            },
        };
        this.dispatchEvent(new CustomEvent(this.constructor.checklistViewAll, init));
    }
    _handleKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            this._viewAll(event);
        }
    }
    _onToggle(event) {
        this.open = !this.open;
        // Fire custom event
        const triggeredBy = event.target;
        event.stopPropagation();
        const init = {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: {
                triggeredBy,
            },
        };
        this.dispatchEvent(new CustomEvent(this.constructor.checklistToggle, init));
    }
    render() {
        const { open, chartLabel, chartValue, title, disableToggle, toggleLabel, toggleLabelAlign, toggleAriaLabel, viewAllLabel, _viewAll: viewAll, _onToggle: onToggle, _handleKeyDown: handleKeyDown, } = this;
        const classes = classMap({
            [`${blockClass}`]: true,
            [`${blockClass}__closed`]: !open,
        });
        return html `
      <aside class=${classes} aria-label="Checklist">
        <!-- Header -->
        <header class="${blockClass}__header">
          <slot name="checklist-header">
            <slot name="header-chart">
              <c4p-checklist-chart value=${chartValue}></c4p-checklist-chart>
            </slot>
            <div class="${blockClass}__titles">
              <!-- checklist title -->
              <slot name="header-title">
                ${title && html `<h2 class="${blockClass}__title">${title}</h2>`}
              </slot>
              <!-- chart label -->
              <slot name="header-chartLabel">
                ${chartLabel &&
            html `<p class="${blockClass}__chart-label">${chartLabel}</p>`}
              </slot>
            </div>
          </slot>
          <!-- Checklist toggle button -->
          ${!disableToggle &&
            html `<cds-icon-button
            kind="ghost"
            size="sm"
            align=${toggleLabelAlign}
            aria-label=${toggleAriaLabel}
            class="${blockClass}__toggle"
            @click=${onToggle}
          >
            ${iconLoader(ChevronIcon16, {
                slot: 'icon',
                class: `${blockClass}__chevron`,
            })}
            <span slot="tooltip-content">${toggleLabel}</span>
          </cds-icon-button>`}
        </header>
        <div class="${blockClass}__content-outer">
          <div class="${blockClass}__content-inner">
            <!-- Checklist body -->
            <!-- This is where you add c4p-checklist-group elements-->
            <slot></slot>

            <!-- Checklist footer -->
            <div class="${blockClass}__footer">
              <slot name="checklist-footer">
                ${viewAllLabel &&
            html `<cds-link
                  role="link"
                  @click=${viewAll}
                  @keydown=${handleKeyDown}
                >
                  ${viewAllLabel}
                </cds-link>`}
              </slot>
            </div>
          </div>
        </div>
      </aside>
    `;
    }
    /**
     * The custom event which is fired when the  view all button in checklist footer is clicked or when the Enter key is pressed on it.
     */
    static get checklistViewAll() {
        return `${prefix}-checklist-view-all`;
    }
    /**
     * The custom event which is fired when the checklist toggle button is clicked or when the Enter key is pressed on it.
     */
    static get checklistToggle() {
        return `${prefix}-checklist-toggle`;
    }
};
CDSChecklist.styles = styles;
__decorate([
    property({ type: Boolean, reflect: true })
], CDSChecklist.prototype, "open", void 0);
__decorate([
    property({ type: String })
], CDSChecklist.prototype, "title", void 0);
__decorate([
    property({ type: String, attribute: 'chart-label' })
], CDSChecklist.prototype, "chartLabel", void 0);
__decorate([
    property({ type: Number, attribute: 'chart-value' })
], CDSChecklist.prototype, "chartValue", void 0);
__decorate([
    property({ type: Boolean, attribute: 'disable-toggle' })
], CDSChecklist.prototype, "disableToggle", void 0);
__decorate([
    property({ type: String, attribute: 'toggle-label' })
], CDSChecklist.prototype, "toggleLabel", void 0);
__decorate([
    property({ type: String, attribute: 'toggle-label-align' })
], CDSChecklist.prototype, "toggleLabelAlign", void 0);
__decorate([
    property({ type: String, attribute: 'toggle-aria-label' })
], CDSChecklist.prototype, "toggleAriaLabel", void 0);
__decorate([
    property({ type: String, attribute: 'view-all-label' })
], CDSChecklist.prototype, "viewAllLabel", void 0);
CDSChecklist = __decorate([
    carbonElement(`${prefix}-checklist`)
], CDSChecklist);
var CDSChecklist$1 = CDSChecklist;

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