@carbon/ibm-products-web-components 0.24.0 → 0.25.0-rc.0

package/custom-elements.json

@@ -128,16 +128,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -151,6 +151,269 @@
         }
       ]
     },
+    {
+      "name": "c4p-checklist-chart",
+      "path": "./src/components/checklist/checklist-chart.ts",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "A number between 0 and 1 which indicates the progress of checklist",
+          "type": "number",
+          "default": "0"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "default": "\"styles\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "A number between 0 and 1 which indicates the progress of checklist",
+          "type": "number",
+          "default": "0"
+        }
+      ]
+    },
+    {
+      "name": "c4p-checklist-group",
+      "path": "./src/components/checklist/checklist-group.ts",
+      "description": "Sections in c4p-checklist",
+      "attributes": [
+        {
+          "name": "title",
+          "description": "Title text of the c4p-checklist-group"
+        }
+      ],
+      "properties": [
+        {
+          "name": "title",
+          "attribute": "title",
+          "description": "Title text of the c4p-checklist-group"
+        },
+        {
+          "name": "styles",
+          "default": "\"styles\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "description": "Contains one or more `c4p-checklist-item` components"
+        }
+      ]
+    },
+    {
+      "name": "c4p-checklist-icon",
+      "path": "./src/components/checklist/checklist-icon.ts",
+      "attributes": [
+        {
+          "name": "kind",
+          "description": "The icon to be displayed.\nValues can be 'unchecked', 'indeterminate', 'checked', 'error', 'disabled'",
+          "type": "Kinds",
+          "default": "\"unchecked\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "kind",
+          "attribute": "kind",
+          "description": "The icon to be displayed.\nValues can be 'unchecked', 'indeterminate', 'checked', 'error', 'disabled'",
+          "type": "Kinds",
+          "default": "\"unchecked\""
+        },
+        {
+          "name": "styles",
+          "default": "\"styles\""
+        }
+      ]
+    },
+    {
+      "name": "c4p-checklist-item",
+      "path": "./src/components/checklist/checklist-item.ts",
+      "description": "item in c4p-checklist-group",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "label of the c4p-checklist-item"
+        },
+        {
+          "name": "status",
+          "description": "status of the c4p-checklist-item\nValues can be 'not started', 'in progress', 'completed', 'error', 'disabled'"
+        },
+        {
+          "name": "clickable",
+          "description": "When true, makes the checklist item label clickable",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "label of the c4p-checklist-item"
+        },
+        {
+          "name": "status",
+          "attribute": "status",
+          "description": "status of the c4p-checklist-item\nValues can be 'not started', 'in progress', 'completed', 'error', 'disabled'"
+        },
+        {
+          "name": "clickable",
+          "attribute": "clickable",
+          "description": "When true, makes the checklist item label clickable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "styles",
+          "default": "\"styles\""
+        }
+      ],
+      "events": [
+        {
+          "name": "c4p-checklist-item-clicked",
+          "description": "The custom event which is fired when a user clicks on checklist item with clickable attribute."
+        }
+      ],
+      "slots": [
+        {
+          "name": "icon",
+          "description": "checklist item icon, usually a status indicator icon"
+        },
+        {
+          "name": "content",
+          "description": "checklist item title/description"
+        }
+      ]
+    },
+    {
+      "name": "c4p-checklist",
+      "path": "./src/components/checklist/checklist.ts",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Specifies whether the component is opened or closed.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "title",
+          "description": "The title of the component."
+        },
+        {
+          "name": "chart-label",
+          "description": "The label for progress indicator chart"
+        },
+        {
+          "name": "chart-value",
+          "description": "A number between 0 and 1 which indicates the progress of checklist"
+        },
+        {
+          "name": "disable-toggle",
+          "description": "Whether or not to show the open/close toggle.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "toggle-label",
+          "description": "The label for the toggle's tooltip."
+        },
+        {
+          "name": "toggle-label-align",
+          "description": "The alignment of the toggle's tooltip."
+        },
+        {
+          "name": "toggle-aria-label",
+          "description": "Aria-label for the Checklist's toggle component."
+        },
+        {
+          "name": "view-all-label",
+          "description": "If defined, will show and enable the \"View all (#)\" button in the checklist footer."
+        }
+      ],
+      "properties": [
+        {
+          "name": "open",
+          "attribute": "open",
+          "description": "Specifies whether the component is opened or closed.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "title",
+          "attribute": "title",
+          "description": "The title of the component."
+        },
+        {
+          "name": "chartLabel",
+          "attribute": "chart-label",
+          "description": "The label for progress indicator chart"
+        },
+        {
+          "name": "chartValue",
+          "attribute": "chart-value",
+          "description": "A number between 0 and 1 which indicates the progress of checklist"
+        },
+        {
+          "name": "disableToggle",
+          "attribute": "disable-toggle",
+          "description": "Whether or not to show the open/close toggle.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "toggleLabel",
+          "attribute": "toggle-label",
+          "description": "The label for the toggle's tooltip."
+        },
+        {
+          "name": "toggleLabelAlign",
+          "attribute": "toggle-label-align",
+          "description": "The alignment of the toggle's tooltip."
+        },
+        {
+          "name": "toggleAriaLabel",
+          "attribute": "toggle-aria-label",
+          "description": "Aria-label for the Checklist's toggle component."
+        },
+        {
+          "name": "viewAllLabel",
+          "attribute": "view-all-label",
+          "description": "If defined, will show and enable the \"View all (#)\" button in the checklist footer."
+        },
+        {
+          "name": "styles",
+          "default": "\"styles\""
+        }
+      ],
+      "events": [
+        {
+          "name": "c4p-checklist-view-all",
+          "description": "The custom event which is fired when a user clicks on View All button in checklist footer."
+        },
+        {
+          "name": "c4p-checklist-toggle",
+          "description": "The custom event which is fired when user clicks on toggle button in checklist header."
+        }
+      ],
+      "slots": [
+        {
+          "name": "checklist-header",
+          "description": "Header area which includes the title and the progress indicator."
+        },
+        {
+          "name": "default",
+          "description": "Contains one or more `c4p-checklist-group` components to organize tasks into logical groups."
+        },
+        {
+          "name": "checklist-footer",
+          "description": "Optional footer area for actions like buttons, links, or additional notes."
+        }
+      ]
+    },
     {
       "name": "c4p-full-page-error",
       "path": "./src/components/full-page-error/full-page-error.ts",
@@ -328,16 +591,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ]
     },
@@ -395,16 +658,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -582,16 +845,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         },
         {
           "name": "hasThreeButtons",
@@ -773,16 +1036,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ]
     },
@@ -911,16 +1174,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -989,16 +1252,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -1139,16 +1402,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -1249,16 +1512,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -1364,16 +1627,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -3058,16 +3321,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -3241,16 +3504,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ],
       "events": [
@@ -3617,16 +3880,16 @@
           "type": "SetOfActions"
         },
         {
-          "name": "set-of-users",
-          "type": "SetOfUsers"
+          "name": "set-of-breadcrumbs",
+          "type": "SetOfBreadcrumbs"
         },
         {
           "name": "set-of-tags",
           "type": "SetOfTags"
         },
         {
-          "name": "set-of-breadcrumbs",
-          "type": "SetOfBreadcrumbs"
+          "name": "set-of-users",
+          "type": "SetOfUsers"
         }
       ]
     }

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

@@ -0,0 +1,25 @@
+/**
+ * @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';
+/**
+ * @element c4p-checklist-chart
+ */
+declare class CDSChecklistChart extends LitElement {
+    /**
+     * A number between 0 and 1 which indicates the progress of checklist
+     */
+    value: number;
+    connectedCallback(): void;
+    private _updateChart;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    render(): symbol;
+    static styles: any;
+}
+export default CDSChecklistChart;

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

@@ -0,0 +1,81 @@
+/**
+ * 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, nothing } 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';
+
+/**
+ * @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__chart`;
+/**
+ * Clamps a value between a minimum and maximum.
+ * If the value, min, or max is NaN, the function returns void.
+ *
+ */
+const clamp = (value, min, max) => {
+    if (isNaN(value) || isNaN(min) || isNaN(max)) {
+        return;
+    }
+    {
+        value = value <= max ? value : max;
+    }
+    {
+        value = value >= min ? value : min;
+    }
+    return value;
+};
+/**
+ * @element c4p-checklist-chart
+ */
+let CDSChecklistChart = class CDSChecklistChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * A number between 0 and 1 which indicates the progress of checklist
+         */
+        this.value = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(`${blockClass}`);
+    }
+    _updateChart(value) {
+        this.style.setProperty(`--${prefix}-num-degrees`, `${clamp(value * 360, 0, 360)}deg`);
+    }
+    static get observedAttributes() {
+        return ['value'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'value' && oldValue !== newValue) {
+            this._updateChart(newValue);
+        }
+    }
+    render() {
+        return nothing;
+    }
+};
+CDSChecklistChart.styles = styles;
+__decorate([
+    property({ type: Number })
+], CDSChecklistChart.prototype, "value", void 0);
+CDSChecklistChart = __decorate([
+    carbonElement(`${prefix}-checklist-chart`)
+], CDSChecklistChart);
+var CDSChecklistChart$1 = CDSChecklistChart;
+
+export { CDSChecklistChart$1 as default };
+//# sourceMappingURL=checklist-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checklist-chart.js","sources":["../../../src/components/checklist/checklist-chart.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AASH,MAAM,UAAU,GAAG,CAAG,EAAA,MAAM,oBAAoB;AAEhD;;;;AAIG;AACH,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAmB;AACvE,IAAA,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE;QAC5C;;AAEF,IAAuB;AACrB,QAAA,KAAK,GAAG,KAAK,IAAI,GAAG,GAAG,KAAK,GAAG,GAAG;;AAEpC,IAAuB;AACrB,QAAA,KAAK,GAAG,KAAK,IAAI,GAAG,GAAG,KAAK,GAAG,GAAG;;AAEpC,IAAA,OAAO,KAAK;AACd,CAAC;AAED;;AAEG;AAEH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU,CAAA;AAA1C,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,CAAC;;IAET,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAG,EAAA,UAAU,CAAE,CAAA,CAAC;;AAG7B,IAAA,YAAY,CAAC,KAAK,EAAA;QACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CACpB,CAAK,EAAA,EAAA,MAAM,CAAc,YAAA,CAAA,EACzB,CAAG,EAAA,KAAK,CAAC,KAAK,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,CAAK,GAAA,CAAA,CACnC;;AAGH,IAAA,WAAW,kBAAkB,GAAA;QAC3B,OAAO,CAAC,OAAO,CAAC;;AAGlB,IAAA,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAA;QAC/C,IAAI,IAAI,KAAK,OAAO,IAAI,QAAQ,KAAK,QAAQ,EAAE;AAC7C,YAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;;;IAI/B,MAAM,GAAA;AACJ,QAAA,OAAO,OAAO;;;AAGT,iBAAM,CAAA,MAAA,GAAG,MAAH;AA5Bb,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAChB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AALN,iBAAiB,GAAA,UAAA,CAAA;AADtB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB;AACpC,CAAA,EAAA,iBAAiB,CAkCtB;AAED,0BAAe,iBAAiB;;;;"}

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

@@ -0,0 +1,25 @@
+/**
+ * @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';
+/**
+ * Sections in c4p-checklist
+ * @element c4p-checklist-group
+ * @slot default - Contains one or more `c4p-checklist-item` components
+ */
+declare class CDSChecklistGroup extends LitElement {
+    /**
+     * Title text of the c4p-checklist-group
+     */
+    title: any;
+    private _updateAttributes;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSChecklistGroup;