@carbon/ibm-products-web-components/es/components/checklist/checklist-icon.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 CheckmarkOutline16 from '@carbon/icons/es/checkmark--outline/16';
import CircleDash16 from '@carbon/icons/es/circle-dash/16';
import Incomplete16 from '@carbon/icons/es/incomplete/16';
import Warning16 from '@carbon/icons/es/warning/16';
import '@carbon/web-components/es/components/icon/index.js';
import { Kinds } from './checklist.types.js';
import { prefix } from '../../globals/settings.js';
import { classMap } from 'lit/directives/class-map.js';
import styles from './checklist.scss.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__icon`;
/**
 * @element c4p-checklist-icon
 * Represents checklist item status with different icons (unchecked, checked, indeterminate, error).
 */
let CDSChecklistIcon = class CDSChecklistIcon extends LitElement {
    constructor() {
        super(...arguments);
        /**
         * The icon to be displayed.
         * Values can be 'unchecked', 'indeterminate', 'checked', 'error', 'disabled'
      
         */
        this.kind = Kinds.unchecked;
    }
    render() {
        const icon = this.kind === Kinds.checked
            ? CheckmarkOutline16
            : this.kind === Kinds.indeterminate
                ? Incomplete16
                : this.kind === Kinds.error
                    ? Warning16
                    : CircleDash16;
        const classes = classMap({
            [`${blockClass}`]: true,
            [`${blockClass}--${this.kind}`]: true,
        });
        return html ` <span class="${classes}">
      <cds-icon .icon=${icon} size="16" ariaLabel=${this.kind}></cds-icon>
    </span>`;
    }
};
CDSChecklistIcon.styles = styles;
__decorate([
    property({ type: String, attribute: 'kind' })
], CDSChecklistIcon.prototype, "kind", void 0);
CDSChecklistIcon = __decorate([
    carbonElement(`${prefix}-checklist-icon`)
], CDSChecklistIcon);
var CDSChecklistIcon$1 = CDSChecklistIcon;

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