@carbon/ibm-products-web-components 0.24.1 → 0.25.0

package/es/components/checklist/checklist-item.js

@@ -0,0 +1,122 @@
+/**
+ * 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));
+    }
+    _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.setAttribute('tabindex', '0');
+        this.classList.add(`${prefix}--checklist__list-item`);
+    }
+    firstUpdated() {
+        this._updateAttributes();
+    }
+    render() {
+        const { clickable, label, status, _handleClick: handleClick } = 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}
+          @click=${clickable ? handleClick : 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

package/es/components/checklist/checklist-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checklist-item.js","sources":["../../../src/components/checklist/checklist-item.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}

package/es/components/checklist/checklist.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @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.
+ */
+import { LitElement } from 'lit';
+import '@carbon/web-components/es/components/icon-button/index.js';
+import './checklist-chart';
+import './checklist-icon';
+/**
+ * @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.
+ */
+declare class CDSChecklist extends LitElement {
+    /**
+     * Specifies whether the component is opened or closed.
+     */
+    open: boolean;
+    /**
+     * The title of the component.
+     */
+    title: any;
+    /**
+     * The label for progress indicator chart
+     */
+    chartLabel: any;
+    /**
+     * A number between 0 and 1 which indicates the progress of checklist
+     */
+    chartValue: any;
+    /**
+     * Whether or not to show the open/close toggle.
+     */
+    disableToggle: boolean;
+    /**
+     * The label for the toggle's tooltip.
+     */
+    toggleLabel: any;
+    /**
+     * The alignment of the toggle's tooltip.
+     */
+    toggleLabelAlign: any;
+    /**
+     * Aria-label for the Checklist's toggle component.
+     */
+    toggleAriaLabel: any;
+    /**
+     * If defined, will show and enable the "View all (#)" button in the checklist footer.
+     */
+    viewAllLabel: any;
+    private _viewAll;
+    private _onToggle;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 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(): string;
+    /**
+     * 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(): string;
+    static styles: any;
+}
+export default CDSChecklist;

package/es/components/checklist/checklist.js

@@ -0,0 +1,187 @@
+/**
+ * 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 { 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));
+    }
+    _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, } = this;
+        const classes = classMap({
+            [`${blockClass}`]: true,
+            [`${blockClass}__closed`]: !open,
+        });
+        return html `
+      <aside class=${classes}>
+        <!-- Header -->
+        <header class="${blockClass}__header">
+          <slot name="checklist-header">
+            ${html `<c4p-checklist-chart
+              value=${chartValue}
+            ></c4p-checklist-chart>`}
+            ${(title || chartLabel) &&
+            html `<div class="${blockClass}__titles">
+              <!-- checklist title -->
+              ${title && html ` <h3 class="${blockClass}__title">${title}</h3> `}
+              <!-- chart label -->
+              ${chartLabel &&
+                html `
+                <p id="{chartLabelId}" class="${blockClass}__chart-label">
+                  ${chartLabel}
+                </p>
+              `}
+            </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 @click=${viewAll}> ${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

package/es/components/checklist/checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checklist.js","sources":["../../../src/components/checklist/checklist.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}

package/es/components/checklist/checklist.scss.js

@@ -0,0 +1,13 @@
+/**
+ * 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 { css } from 'lit';
+
+var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--tag{--cds-layout-size-height-xs:1.125rem;--cds-layout-size-height-sm:1.125rem;--cds-layout-size-height-md:1.5rem;--cds-layout-size-height-lg:2rem;--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min),var(--cds-layout-size-height-sm)),var(--cds-layout-size-height,var(--cds-layout-size-height-md)),min(var(--cds-layout-size-height-max),var(--cds-layout-size-height-lg)));align-items:center;background-color:var(--cds-tag-background-gray,#e0e0e0);border-radius:1rem;color:var(--cds-tag-color-gray,#161616);cursor:default;display:inline-flex;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);justify-content:center;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin:.25rem;max-inline-size:13rem;min-block-size:var(--cds-layout-size-height-local);min-inline-size:2rem;padding-inline:.5rem;vertical-align:middle;word-break:break-word}.cds--layout--size-xs :where(.cds--tag),.cds--tag.cds--layout--size-xs{--cds-layout-size-height:var(--cds-layout-size-height-xs)}.cds--layout--size-sm :where(.cds--tag),.cds--tag.cds--layout--size-sm{--cds-layout-size-height:var(--cds-layout-size-height-sm)}.cds--layout--size-md :where(.cds--tag),.cds--tag.cds--layout--size-md{--cds-layout-size-height:var(--cds-layout-size-height-md)}.cds--layout--size-lg :where(.cds--tag),.cds--tag.cds--layout--size-lg{--cds-layout-size-height:var(--cds-layout-size-height-lg)}.cds--tag.cds--tag--operational{border:1px solid var(--cds-tag-background-gray,#e0e0e0)}.cds--tag .cds--tag__close-icon:hover,.cds--tag.cds--tag--operational:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds--tag .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-gray,#161616)}.cds--tag.cds--tag--lg{padding-inline-start:.75rem}.cds--tag:has(.cds--tag__custom-icon){padding-inline-start:.25rem}.cds--tag.cds--tag--lg:not(.cds--tag--filter){padding-inline:.75rem}.cds--tag.cds--tag--lg:has(.cds--tag__custom-icon){padding-inline-start:.5rem}.cds--tag:not(.cds--tag--selectable){border:0}.cds--tag:not(:first-child){margin-inline-start:0}.cds--tag--operational>span,.cds--tag--selectable>span,.cds--tag__label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds--tag--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--tag--filter{padding-block:0;padding-inline-end:0}.cds--tag--filter:hover{outline:none}.cds--tag--selectable{background-color:var(--cds-layer);border:1px solid var(--cds-border-inverse,#161616);color:var(--cds-text-primary,#161616);cursor:pointer}.cds--tag--selectable:hover{background-color:var(--cds-layer-hover);outline:none}.cds--tag--selectable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--tag--selectable-selected{color:var(--cds-text-inverse,#fff)}.cds--tag--selectable-selected,.cds--tag--selectable-selected:hover{background-color:var(--cds-layer-selected-inverse,#161616)}.cds--tag--operational{background-color:var(--cds-tag-background-gray,#e0e0e0);border:1px solid var(--cds-tag-border-gray,#a8a8a8);color:var(--cds-tag-color-gray,#161616);cursor:pointer}.cds--tag--operational:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1);outline:none}.cds--tag--operational:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--tag--red{background-color:var(--cds-tag-background-red,#ffd7d9);color:var(--cds-tag-color-red,#a2191f)}.cds--tag--red.cds--tag--operational{border:1px solid var(--cds-tag-border-red,#ff8389)}.cds--tag--red .cds--tag__close-icon:hover,.cds--tag--red.cds--tag--operational:hover{background-color:var(--cds-tag-hover-red,#ffc2c5)}.cds--tag--red .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-red,#a2191f)}.cds--tag--magenta{background-color:var(--cds-tag-background-magenta,#ffd6e8);color:var(--cds-tag-color-magenta,#9f1853)}.cds--tag--magenta.cds--tag--operational{border:1px solid var(--cds-tag-border-magenta,#ff7eb6)}.cds--tag--magenta .cds--tag__close-icon:hover,.cds--tag--magenta.cds--tag--operational:hover{background-color:var(--cds-tag-hover-magenta,#ffbdda)}.cds--tag--magenta .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-magenta,#9f1853)}.cds--tag--purple{background-color:var(--cds-tag-background-purple,#e8daff);color:var(--cds-tag-color-purple,#6929c4)}.cds--tag--purple.cds--tag--operational{border:1px solid var(--cds-tag-border-purple,#be95ff)}.cds--tag--purple .cds--tag__close-icon:hover,.cds--tag--purple.cds--tag--operational:hover{background-color:var(--cds-tag-hover-purple,#dcc7ff)}.cds--tag--purple .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-purple,#6929c4)}.cds--tag--blue{background-color:var(--cds-tag-background-blue,#d0e2ff);color:var(--cds-tag-color-blue,#0043ce)}.cds--tag--blue.cds--tag--operational{border:1px solid var(--cds-tag-border-blue,#78a9ff)}.cds--tag--blue .cds--tag__close-icon:hover,.cds--tag--blue.cds--tag--operational:hover{background-color:var(--cds-tag-hover-blue,#b8d3ff)}.cds--tag--blue .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-blue,#0043ce)}.cds--tag--cyan{background-color:var(--cds-tag-background-cyan,#bae6ff);color:var(--cds-tag-color-cyan,#00539a)}.cds--tag--cyan.cds--tag--operational{border:1px solid var(--cds-tag-border-cyan,#33b1ff)}.cds--tag--cyan .cds--tag__close-icon:hover,.cds--tag--cyan.cds--tag--operational:hover{background-color:var(--cds-tag-hover-cyan,#99daff)}.cds--tag--cyan .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-cyan,#00539a)}.cds--tag--teal{background-color:var(--cds-tag-background-teal,#9ef0f0);color:var(--cds-tag-color-teal,#005d5d)}.cds--tag--teal.cds--tag--operational{border:1px solid var(--cds-tag-border-teal,#08bdba)}.cds--tag--teal .cds--tag__close-icon:hover,.cds--tag--teal.cds--tag--operational:hover{background-color:var(--cds-tag-hover-teal,#57e5e5)}.cds--tag--teal .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-teal,#005d5d)}.cds--tag--green{background-color:var(--cds-tag-background-green,#a7f0ba);color:var(--cds-tag-color-green,#0e6027)}.cds--tag--green.cds--tag--operational{border:1px solid var(--cds-tag-border-green,#42be65)}.cds--tag--green .cds--tag__close-icon:hover,.cds--tag--green.cds--tag--operational:hover{background-color:var(--cds-tag-hover-green,#74e792)}.cds--tag--green .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-green,#0e6027)}.cds--tag--gray{background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#161616)}.cds--tag--gray.cds--tag--operational{border:1px solid var(--cds-tag-border-gray,#a8a8a8)}.cds--tag--gray .cds--tag__close-icon:hover,.cds--tag--gray.cds--tag--operational:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds--tag--gray .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-gray,#161616)}.cds--tag--cool-gray{background-color:var(--cds-tag-background-cool-gray,#dde1e6);color:var(--cds-tag-color-cool-gray,#121619)}.cds--tag--cool-gray.cds--tag--operational{border:1px solid var(--cds-tag-border-cool-gray,#a2a9b0)}.cds--tag--cool-gray .cds--tag__close-icon:hover,.cds--tag--cool-gray.cds--tag--operational:hover{background-color:var(--cds-tag-hover-cool-gray,#cdd3da)}.cds--tag--cool-gray .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-cool-gray,#121619)}.cds--tag--warm-gray{background-color:var(--cds-tag-background-warm-gray,#e5e0df);color:var(--cds-tag-color-warm-gray,#171414)}.cds--tag--warm-gray.cds--tag--operational{border:1px solid var(--cds-tag-border-warm-gray,#ada8a8)}.cds--tag--warm-gray .cds--tag__close-icon:hover,.cds--tag--warm-gray.cds--tag--operational:hover{background-color:var(--cds-tag-hover-warm-gray,#d8d0cf)}.cds--tag--warm-gray .cds--definition-term .cds--tag__label{color:var(--cds-tag-color-warm-gray,#171414)}.cds--tag--high-contrast:not(.cds--tag--operational){background-color:var(--cds-background-inverse,#393939);color:var(--cds-text-inverse,#fff)}.cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational{border:1px solid var(--cds-background-inverse,#393939)}.cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover,.cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational:hover{background-color:var(--cds-background-inverse-hover,#474747)}.cds--tag--high-contrast:not(.cds--tag--operational) .cds--definition-term .cds--tag__label{color:var(--cds-text-inverse,#fff)}.cds--multi-select--readonly .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover{background-color:transparent}.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]){background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);outline:1px solid var(--cds-background-inverse,#393939);outline-offset:-1px}.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational{border:1px solid var(--cds-background,#fff)}.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover,.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational:hover{background-color:var(--cds-layer-hover)}.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--definition-term .cds--tag__label{color:var(--cds-text-primary,#161616)}.cds--tag--disabled:not(.cds--tag--operational),.cds--tag--filter.cds--tag--disabled,.cds--tag--interactive.cds--tag--disabled{background-color:var(--cds-layer);box-shadow:none;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));outline:none}.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational,.cds--tag--filter.cds--tag--disabled.cds--tag--operational,.cds--tag--interactive.cds--tag--disabled.cds--tag--operational{border:1px solid var(--cds-layer)}.cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover,.cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover,.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover,.cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover{background-color:var(--cds-layer)}.cds--tag--disabled:not(.cds--tag--operational) .cds--definition-term .cds--tag__label,.cds--tag--filter.cds--tag--disabled .cds--definition-term .cds--tag__label,.cds--tag--interactive.cds--tag--disabled .cds--definition-term .cds--tag__label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--tag--disabled:not(.cds--tag--operational):hover,.cds--tag--filter.cds--tag--disabled:hover,.cds--tag--interactive.cds--tag--disabled:hover{cursor:not-allowed}.cds--tag--disabled:not(.cds--tag--operational) .cds--tag__label,.cds--tag--filter.cds--tag--disabled .cds--tag__label,.cds--tag--interactive.cds--tag--disabled .cds--tag__label{background-color:var(--cds-layer);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--tag--operational.cds--tag--disabled,.cds--tag--selectable.cds--tag--disabled{background-color:var(--cds-layer);border:1px solid var(--cds-border-disabled,#c6c6c6);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--tag--operational.cds--tag--disabled:hover,.cds--tag--selectable.cds--tag--disabled:hover{background-color:var(--cds-layer);cursor:not-allowed}.cds--tag--interactive{transition:background-color 70ms cubic-bezier(0,0,.38,.9)}.cds--tag__close-icon{align-items:center;background-color:transparent;block-size:var(--cds-layout-size-height-local);border:0;border-radius:50%;color:currentColor;cursor:pointer;display:flex;flex-shrink:0;inline-size:var(--cds-layout-size-height-local);justify-content:center;margin:0 0 0 .125rem;padding:0;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),box-shadow 70ms cubic-bezier(.2,0,.38,.9)}.cds--tag__close-icon svg{fill:currentColor}.cds--tag__custom-icon{background-color:transparent;block-size:1rem;border:0;color:currentColor;flex-shrink:0;inline-size:1rem;margin-inline-end:.25rem;outline:none;padding:0}.cds--tag__custom-icon svg{fill:currentColor}.cds--tag--disabled .cds--tag__close-icon{cursor:not-allowed}.cds--tag__close-icon:focus{border-radius:50%;box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:none;z-index:99999}.cds--tag--high-contrast .cds--tag__close-icon:focus{box-shadow:inset 0 0 0 1px var(--cds-focus-inverse,#fff)}.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover{background-color:transparent}.cds--tag--filter.cds--tag--disabled svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--tag--sm.cds--tag--filter{padding-inline-end:0}.cds--tag--sm .cds--tag__close-icon{margin-inline-start:.3125rem}.cds--tag.cds--skeleton{background:var(--cds-skeleton-background,#e8e8e8);background-color:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;color:var(--cds-text-primary,#161616);inline-size:3.75rem;overflow:hidden;padding:0;pointer-events:none;position:relative}.cds--tag.cds--skeleton:active,.cds--tag.cds--skeleton:focus,.cds--tag.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--tag.cds--skeleton:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--tag.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--tag.cds--skeleton{background:CanvasText}.cds--tag.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--tag.cds--skeleton.cds--tag--operational{border:1px solid var(--cds-skeleton-background,#e8e8e8)}.cds--tag.cds--skeleton .cds--tag__close-icon:hover,.cds--tag.cds--skeleton.cds--tag--operational:hover{background-color:var(--cds-skeleton-background,#e8e8e8)}.cds--tag.cds--skeleton .cds--definition-term .cds--tag__label{color:var(--cds-text-primary,#161616)}@supports (hanging-punctuation:first) and (font:-apple-system-body) and (-webkit-appearance:none){.cds--tag.cds--skeleton{transform:translateZ(0)}}.cds--tag .cds--ai-label .cds--ai-label__button--inline,.cds--tag .cds--slug .cds--slug__button--inline{color:currentColor;margin-inline-start:.0625rem}.cds--tag .cds--ai-label .cds--ai-label__button--inline .cds--ai-label__text:before,.cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text:before{background-color:currentColor}.cds--tag .cds--ai-label .cds--ai-label__button--inline:hover,.cds--tag .cds--slug .cds--slug__button--inline:hover{border-color:currentColor}.cds--tag--filter .cds--ai-label,.cds--tag--filter .cds--slug,.cds--tag--filter .cds--tag__decorator>*{min-inline-size:2.00875rem}.cds--tag .cds--tag__decorator:not(:has(.cds--ai-label)){block-size:1rem;text-align:center}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--tag{outline:1px solid transparent}.cds--tag__close-icon:focus{color:Highlight;outline:1px solid Highlight}}.cds--tag-label-tooltip{max-inline-size:-webkit-fill-available}.cds--tag__custom-icon+.cds--tag-label-tooltip{max-inline-size:11rem}.cds--tag--filter .cds--tag__custom-icon+.cds--tag-label-tooltip{max-inline-size:9.875rem}.cds--interactive--tag-children{display:inline-flex;max-inline-size:12.5rem;place-items:center}.cds--tag--filter .cds--tag__custom-icon+span>.cds--interactive--tag-children{max-inline-size:11.5rem}.cds--tag .cds--definition-term{border-block-end:none;cursor:default;max-inline-size:12rem}.cds--tag .cds--tag__custom-icon+span>.cds--definition-term{max-inline-size:11rem}.cds--tag>.cds--popover-container{display:flex}.cds--toggletip-button:has(.cds--tag--operational.cds--tag--disabled){pointer-events:none}.c4p--checklist__header{background-color:var(--cds-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;gap:.5rem;padding:1rem}.c4p--checklist__chart{align-self:center;block-size:2.5rem;inline-size:2.5rem;min-inline-size:2.5rem;position:relative}.c4p--checklist__chart:after{background-color:var(--cds-layer-01,#f4f4f4);block-size:2rem;border-radius:50%;content:\"\";inline-size:2rem;inset-block-start:.25rem;inset-inline-start:.25rem;position:absolute}.c4p--checklist__titles{display:flex;flex-direction:column;justify-content:center}.c4p--checklist__title{font-size:var(--cds-productive-heading-02-font-size,1rem);font-weight:var(--cds-productive-heading-02-font-weight,600);letter-spacing:var(--cds-productive-heading-02-letter-spacing,0);line-height:var(--cds-productive-heading-02-line-height,1.375)}.c4p--checklist__chart-label,.c4p--checklist__title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis}.c4p--checklist__chart-label{color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.c4p--checklist__title+.c4p--checklist__chart-label{margin-block-start:.125rem}.c4p--checklist__header .cds--tooltip{block-size:2rem;margin-block-start:-.5rem;margin-inline:auto -.5rem}.c4p--checklist__chevron{color:var(--cds-text-primary,#161616);transform:rotate(0deg);transition:all .11s cubic-bezier(.2,0,.38,.9)}@media (prefers-reduced-motion:reduce){.c4p--checklist__chevron{transition:none}}.c4p--checklist__closed .c4p--checklist__chevron{transform:rotate(-180deg)}.c4p--checklist__button.cds--btn--primary{background-color:transparent;border:none;color:var(--cds-link-primary,#0f62fe);flex-shrink:unset;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);line-height:var(--cds-body-short-01-line-height,1.28572);max-inline-size:none;min-block-size:auto;padding:0}.c4p--checklist__button.cds--btn--primary div{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis}.c4p--checklist__button.cds--btn--primary:hover{background:transparent;color:var(--cds-link-primary-hover,#0043ce);text-decoration:underline}.c4p--checklist__button.cds--btn--primary:active{background:transparent;color:var(--cds-text-primary,#161616);text-decoration:underline}.c4p--checklist__content-outer{overflow:hidden}.c4p--checklist__content-inner{background-color:var(--cds-layer-01,#f4f4f4);block-size:100%;transform:translate(0);transition:all .11s cubic-bezier(.2,0,.38,.9)}@media (prefers-reduced-motion:reduce){.c4p--checklist__content-inner{transition:none}}.c4p--checklist__closed .c4p--checklist__content-inner{block-size:0;transform:translateY(-100%)}.c4p--checklist__list-group{border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);padding:1rem}.c4p--checklist__list-group:first-of-type{border-block-start:none}.c4p--checklist__list-title{display:-webkit-box;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);line-height:var(--cds-body-short-01-line-height,1.28572);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-block-end:.5rem;text-overflow:ellipsis}.c4p--checklist__list-item{display:flex;margin-block-end:.5rem}.c4p--checklist__list-item:last-child{margin-block-end:0}.c4p--checklist__icon{color:var(--cds-icon-primary,#161616);margin:.0625rem .5rem 0 0}.c4p--checklist__icon--checked,.c4p--checklist__icon--indeterminate{color:var(--cds-interactive,#0f62fe)}.c4p--checklist__icon--error{color:var(--cds-support-error,#da1e28)}.c4p--checklist__icon--disabled{color:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.c4p--checklist__label{display:-webkit-box;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);line-height:var(--cds-body-short-01-line-height,1.28572);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis}.c4p--checklist__label--disabled{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.c4p--checklist__footer{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);padding:.5rem 1rem;text-overflow:ellipsis}:host(c4p-checklist) .c4p--checklist__toggle{margin-block-start:-.5rem;margin-inline:auto -.5rem}:host(c4p-checklist-item){display:flex;margin-block-end:.5rem}:host(c4p-checklist-item:last-of-type){margin-block-end:0}:host(c4p-checklist-group){border-block-start:1px solid var(--cds-border-subtle-01,#c6c6c6);display:block;padding:1rem}:host(c4p-checklist-group:first-of-type){border-block-start:none}.c4p--checklist__label--clickable{color:var(--cds-link-primary,#0f62fe);cursor:pointer}.c4p--checklist__label--clickable:hover{color:var(--cds-link-primary-hover,#0043ce);text-decoration:underline}.c4p--checklist__chart{background-image:conic-gradient(#a56eff var(--c4p-num-degrees),var(--cds-tag-background-gray,#e0e0e0) var(--c4p-num-degrees) 1turn);border-radius:50%}"]);
+
+export { styles as default };
+//# sourceMappingURL=checklist.scss.js.map

package/es/components/checklist/checklist.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checklist.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es/components/checklist/checklist.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+import './index.ts';

package/es/components/checklist/checklist.test.js

@@ -0,0 +1,172 @@
+/**
+ * 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 { describe, beforeEach, it, expect } from 'vitest';
+import { fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import CDSChecklist from './checklist.js';
+import CDSChecklistItem from './checklist-item.js';
+import { Kinds } from './checklist.types.js';
+import './checklist-group.js';
+import './checklist-chart.js';
+import './checklist-icon.js';
+
+/**
+ * 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`;
+describe('c4p-checklist', () => {
+    let el;
+    beforeEach(async () => {
+        el = await fixture(html `
+      <c4p-checklist
+        title="Test Title"
+        chart-label="5 out of 10 tasks completed"
+        chart-value="0.5"
+        toggle-label="Toggle"
+        toggle-label-align="top"
+        toggle-aria-label="Toggle"
+        view-all-label="View All"
+      ></c4p-checklist>
+    `);
+    });
+    it('renders with default properties', () => {
+        const shadow = el.shadowRoot;
+        // Render title
+        expect(shadow.textContent).to.include('Test Title');
+        // Render chartLabel
+        expect(shadow.textContent).to.include('5 out of 10 tasks completed');
+        // Render chart
+        const chart = shadow.querySelector(`.${blockClass}__chart`);
+        expect(chart).to.exist;
+        // Render toggle button
+        const toggleButton = shadow.querySelector(`.${blockClass}__toggle`);
+        expect(toggleButton).to.exist;
+        // Checklist should be in collapsed state
+        expect(el.open).to.be.false;
+    });
+    it('toggles open state and fires checklistToggle event', async () => {
+        const shadow = el.shadowRoot;
+        const toggleButton = shadow.querySelector(`.${blockClass}__toggle`);
+        // Listen for event before clicking
+        setTimeout(() => toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.click());
+        const ev = await oneEvent(el, CDSChecklist.checklistToggle);
+        // Verify open property updated
+        expect(el.open).to.be.true;
+        expect(ev).to.exist;
+    });
+    it('fires checklistViewAll event on viewAll button click', async () => {
+        const shadow = el.shadowRoot;
+        const link = Array.from(shadow.querySelectorAll(`${carbonPrefix}-link`)).find((a) => { var _a; return ((_a = a.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === 'View All'; });
+        expect(link).toBeTruthy();
+        setTimeout(() => link === null || link === void 0 ? void 0 : link.click());
+        const ev = await oneEvent(el, CDSChecklist.checklistViewAll);
+        expect(ev).to.exist;
+    });
+    it('does not render toggle button if disableToggle is true', async () => {
+        el = await fixture(html `
+      <c4p-checklist
+        title="Test Title"
+        chart-label="5 out of 10 tasks completed"
+        chart-value="0.5"
+        disable-toggle
+        toggle-label="Toggle"
+        toggle-label-align="top"
+        toggle-aria-label="Toggle"
+        view-all-label="View All"
+      ></c4p-checklist>
+    `);
+        await elementUpdated(el);
+        const shadow = el.shadowRoot;
+        const toggleBtn = shadow.querySelector(`.${blockClass}__toggle`);
+        expect(toggleBtn).to.be.null;
+    });
+});
+describe('c4p-checklist-group', () => {
+    let el;
+    beforeEach(async () => {
+        el = await fixture(html `
+      <c4p-checklist-group title="Test Title"></c4p-checklist-group>
+    `);
+    });
+    it('renders group title', () => {
+        var _a, _b;
+        expect((_b = (_a = el
+            .shadowRoot.querySelector(`.${blockClass}__list-title`)) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()).toBe('Test Title');
+    });
+    it('renders an empty list when no content is provided', () => {
+        const ol = el.shadowRoot.querySelector('ol');
+        expect(ol).to.exist;
+        expect(ol.querySelector('li')).to.be.null;
+    });
+    it('renders checklist items provided via slot', async () => {
+        var _a;
+        el = await fixture(html `
+      <c4p-checklist-group title="Test Title">
+        <c4p-checklist-item
+          label="task 1"
+          status="completed"
+        ></c4p-checklist-item>
+        <c4p-checklist-item
+          label="task 2"
+          status="in progress"
+        ></c4p-checklist-item>
+        <c4p-checklist-item
+          label="task 3"
+          status="not started"
+        ></c4p-checklist-item>
+      </c4p-checklist-group>
+    `);
+        await elementUpdated(el);
+        const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        expect(slot).toBeDefined();
+        // Retrieve the assigned custom elements
+        const checklistItems = slot
+            .assignedElements()
+            .filter((el) => el.tagName.toLowerCase() === 'c4p-checklist-item');
+        expect(checklistItems).toHaveLength(3);
+    });
+});
+describe('c4p-checklist-item', () => {
+    const label = 'Test Label';
+    const status = 'in progress';
+    const clickable = true;
+    let el;
+    beforeEach(async () => {
+        el = await fixture(html `
+      <c4p-checklist-item
+        .label=${label}
+        .status=${status}
+        .clickable=${clickable}
+      ></c4p-checklist-item>
+    `);
+    });
+    it('renders item with correct classes', async () => {
+        var _a, _b;
+        const itemEl = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__label`);
+        expect(itemEl).to.exist;
+        expect(itemEl === null || itemEl === void 0 ? void 0 : itemEl.classList.contains(`${blockClass}__label--clickable`)).to.be
+            .true;
+        expect((_b = itemEl === null || itemEl === void 0 ? void 0 : itemEl.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal(label);
+    });
+    it('dispatches "checklistItemClicked" event on click', async () => {
+        var _a;
+        const itemEl = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__label--clickable`);
+        // Use oneEvent to await the custom event
+        setTimeout(() => itemEl === null || itemEl === void 0 ? void 0 : itemEl.click());
+        const event = await oneEvent(el, CDSChecklistItem.checklistItemClicked);
+        expect(event).to.exist;
+    });
+    it('maps status to correct kind', () => {
+        expect(el['_mapStatusToKind'](status)).to.equal(Kinds.indeterminate);
+        expect(el['_mapStatusToKind']('unknown')).to.equal(Kinds.error);
+    });
+});
+//# sourceMappingURL=checklist.test.js.map