@carbon/ibm-products-web-components 0.24.0 → 0.25.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +315 -52
- package/es/components/checklist/checklist-chart.d.ts +25 -0
- package/es/components/checklist/checklist-chart.js +81 -0
- package/es/components/checklist/checklist-chart.js.map +1 -0
- package/es/components/checklist/checklist-group.d.ts +25 -0
- package/es/components/checklist/checklist-group.js +58 -0
- package/es/components/checklist/checklist-group.js.map +1 -0
- package/es/components/checklist/checklist-icon.d.ts +26 -0
- package/es/components/checklist/checklist-icon.js +72 -0
- package/es/components/checklist/checklist-icon.js.map +1 -0
- package/es/components/checklist/checklist-item.d.ts +40 -0
- package/es/components/checklist/checklist-item.js +122 -0
- package/es/components/checklist/checklist-item.js.map +1 -0
- package/es/components/checklist/checklist.d.ts +71 -0
- package/es/components/checklist/checklist.js +187 -0
- package/es/components/checklist/checklist.js.map +1 -0
- package/es/components/checklist/checklist.scss.js +13 -0
- package/es/components/checklist/checklist.scss.js.map +1 -0
- package/es/components/checklist/checklist.test.d.ts +7 -0
- package/es/components/checklist/checklist.test.js +172 -0
- package/es/components/checklist/checklist.test.js.map +1 -0
- package/es/components/checklist/checklist.types.d.ts +22 -0
- package/es/components/checklist/checklist.types.js +32 -0
- package/es/components/checklist/checklist.types.js.map +1 -0
- package/es/components/checklist/index.d.ts +13 -0
- package/es/components/checklist/index.js +13 -0
- package/es/components/checklist/index.js.map +1 -0
- package/es/components/interstitial-screen/interstitial-screen-footer.d.ts +1 -1
- package/es/components/interstitial-screen/interstitial-screen-footer.js +1 -1
- package/es/components/page-header/page-header-title-breadcrumb.d.ts +1 -1
- package/es/components/page-header/page-header-title-breadcrumb.js +1 -1
- package/es/packages/ibm-products-web-components/package.json.js +1 -1
- package/es-custom/components/checklist/checklist-chart.d.ts +25 -0
- package/es-custom/components/checklist/checklist-chart.js +81 -0
- package/es-custom/components/checklist/checklist-chart.js.map +1 -0
- package/es-custom/components/checklist/checklist-group.d.ts +25 -0
- package/es-custom/components/checklist/checklist-group.js +58 -0
- package/es-custom/components/checklist/checklist-group.js.map +1 -0
- package/es-custom/components/checklist/checklist-icon.d.ts +26 -0
- package/es-custom/components/checklist/checklist-icon.js +72 -0
- package/es-custom/components/checklist/checklist-icon.js.map +1 -0
- package/es-custom/components/checklist/checklist-item.d.ts +40 -0
- package/es-custom/components/checklist/checklist-item.js +122 -0
- package/es-custom/components/checklist/checklist-item.js.map +1 -0
- package/es-custom/components/checklist/checklist.d.ts +71 -0
- package/es-custom/components/checklist/checklist.js +187 -0
- package/es-custom/components/checklist/checklist.js.map +1 -0
- package/es-custom/components/checklist/checklist.scss.js +13 -0
- package/es-custom/components/checklist/checklist.scss.js.map +1 -0
- package/es-custom/components/checklist/checklist.test.d.ts +7 -0
- package/es-custom/components/checklist/checklist.test.js +172 -0
- package/es-custom/components/checklist/checklist.test.js.map +1 -0
- package/es-custom/components/checklist/checklist.types.d.ts +22 -0
- package/es-custom/components/checklist/checklist.types.js +32 -0
- package/es-custom/components/checklist/checklist.types.js.map +1 -0
- package/es-custom/components/checklist/index.d.ts +13 -0
- package/es-custom/components/checklist/index.js +13 -0
- package/es-custom/components/checklist/index.js.map +1 -0
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.d.ts +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.js +1 -1
- package/es-custom/components/page-header/page-header-title-breadcrumb.d.ts +1 -1
- package/es-custom/components/page-header/page-header-title-breadcrumb.js +1 -1
- package/es-custom/packages/ibm-products-web-components/package.json.js +1 -1
- package/lib/components/checklist/checklist-chart.d.ts +25 -0
- package/lib/components/checklist/checklist-group.d.ts +25 -0
- package/lib/components/checklist/checklist-icon.d.ts +26 -0
- package/lib/components/checklist/checklist-item.d.ts +40 -0
- package/lib/components/checklist/checklist.d.ts +71 -0
- package/lib/components/checklist/checklist.test.d.ts +7 -0
- package/lib/components/checklist/checklist.types.d.ts +22 -0
- package/lib/components/checklist/index.d.ts +13 -0
- package/lib/components/interstitial-screen/interstitial-screen-footer.d.ts +1 -1
- package/lib/components/page-header/page-header-title-breadcrumb.d.ts +1 -1
- package/package.json +3 -3
- package/scss/components/checklist/checklist.scss +65 -0
- package/telemetry.yml +26 -5
@@ -0,0 +1,72 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { __decorate } from 'tslib';
|
9
|
+
import { LitElement, html } from 'lit';
|
10
|
+
import { property } from 'lit/decorators.js';
|
11
|
+
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
|
12
|
+
import CheckmarkOutline16 from '@carbon/icons/es/checkmark--outline/16';
|
13
|
+
import CircleDash16 from '@carbon/icons/es/circle-dash/16';
|
14
|
+
import Incomplete16 from '@carbon/icons/es/incomplete/16';
|
15
|
+
import Warning16 from '@carbon/icons/es/warning/16';
|
16
|
+
import '@carbon/web-components/es-custom/components/icon/index.js';
|
17
|
+
import { Kinds } from './checklist.types.js';
|
18
|
+
import { prefix } from '../../globals/settings.js';
|
19
|
+
import { classMap } from 'lit/directives/class-map.js';
|
20
|
+
import styles from './checklist.scss.js';
|
21
|
+
|
22
|
+
/**
|
23
|
+
* @license
|
24
|
+
*
|
25
|
+
* Copyright IBM Corp. 2025
|
26
|
+
*
|
27
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
28
|
+
* LICENSE file in the root directory of this source tree.
|
29
|
+
*/
|
30
|
+
const blockClass = `${prefix}--checklist__icon`;
|
31
|
+
/**
|
32
|
+
* @element c4p-checklist-icon
|
33
|
+
* Represents checklist item status with different icons (unchecked, checked, indeterminate, error).
|
34
|
+
*/
|
35
|
+
let CDSChecklistIcon = class CDSChecklistIcon extends LitElement {
|
36
|
+
constructor() {
|
37
|
+
super(...arguments);
|
38
|
+
/**
|
39
|
+
* The icon to be displayed.
|
40
|
+
* Values can be 'unchecked', 'indeterminate', 'checked', 'error', 'disabled'
|
41
|
+
|
42
|
+
*/
|
43
|
+
this.kind = Kinds.unchecked;
|
44
|
+
}
|
45
|
+
render() {
|
46
|
+
const icon = this.kind === Kinds.checked
|
47
|
+
? CheckmarkOutline16
|
48
|
+
: this.kind === Kinds.indeterminate
|
49
|
+
? Incomplete16
|
50
|
+
: this.kind === Kinds.error
|
51
|
+
? Warning16
|
52
|
+
: CircleDash16;
|
53
|
+
const classes = classMap({
|
54
|
+
[`${blockClass}`]: true,
|
55
|
+
[`${blockClass}--${this.kind}`]: true,
|
56
|
+
});
|
57
|
+
return html ` <span class="${classes}">
|
58
|
+
<cds-custom-icon .icon=${icon} size="16" ariaLabel=${this.kind}></cds-custom-icon>
|
59
|
+
</span>`;
|
60
|
+
}
|
61
|
+
};
|
62
|
+
CDSChecklistIcon.styles = styles;
|
63
|
+
__decorate([
|
64
|
+
property({ type: String, attribute: 'kind' })
|
65
|
+
], CDSChecklistIcon.prototype, "kind", void 0);
|
66
|
+
CDSChecklistIcon = __decorate([
|
67
|
+
carbonElement(`${prefix}-checklist-icon`)
|
68
|
+
], CDSChecklistIcon);
|
69
|
+
var CDSChecklistIcon$1 = CDSChecklistIcon;
|
70
|
+
|
71
|
+
export { CDSChecklistIcon$1 as default };
|
72
|
+
//# sourceMappingURL=checklist-icon.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"checklist-icon.js","sources":["../../../src/components/checklist/checklist-icon.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAkBH,MAAM,UAAU,GAAG,CAAG,EAAA,MAAM,mBAAmB;AAE/C;;;AAGG;AAEH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU,CAAA;AAAzC,IAAA,WAAA,GAAA;;AACE;;;;AAIG;AAEH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,SAAS;;IAEtB,MAAM,GAAA;QACJ,MAAM,IAAI,GACR,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;AAClB,cAAE;AACF,cAAE,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;AACpB,kBAAE;AACF,kBAAE,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;AACpB,sBAAE;sBACA,YAAY;QAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC;AACvB,YAAA,CAAC,CAAG,EAAA,UAAU,CAAE,CAAA,GAAG,IAAI;YACvB,CAAC,CAAA,EAAG,UAAU,CAAK,EAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AACtC,SAAA,CAAC;QAEF,OAAO,IAAI,CAAA,CAAA,cAAA,EAAiB,OAAO,CAAA;wBACf,IAAI,CAAA,qBAAA,EAAwB,IAAI,CAAC,IAAI,CAAA;YACjD;;;AAGH,gBAAM,CAAA,MAAA,GAAG,MAAH;AAtBb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE;AACtB,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAPnB,gBAAgB,GAAA,UAAA,CAAA;AADrB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,eAAA,CAAiB;AACnC,CAAA,EAAA,gBAAgB,CA8BrB;AAED,yBAAe,gBAAgB;;;;"}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
/**
|
2
|
+
* @license
|
3
|
+
*
|
4
|
+
* Copyright IBM Corp. 2025
|
5
|
+
*
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
8
|
+
*/
|
9
|
+
import { LitElement } from 'lit';
|
10
|
+
/**
|
11
|
+
* item in c4p-checklist-group
|
12
|
+
* @element c4p-checklist-item
|
13
|
+
* @slot icon - checklist item icon, usually a status indicator icon
|
14
|
+
* @slot content - checklist item title/description
|
15
|
+
* @fires c4p-checklist-item-clicked - The custom event which is fired when a user clicks on checklist item with clickable attribute.
|
16
|
+
*/
|
17
|
+
declare class CDSChecklistItem extends LitElement {
|
18
|
+
/**
|
19
|
+
* label of the c4p-checklist-item
|
20
|
+
*/
|
21
|
+
label: any;
|
22
|
+
/**
|
23
|
+
* status of the c4p-checklist-item
|
24
|
+
* Values can be 'not started', 'in progress', 'completed', 'error', 'disabled'
|
25
|
+
*/
|
26
|
+
status: any;
|
27
|
+
/** When true, makes the checklist item label clickable */
|
28
|
+
clickable: boolean;
|
29
|
+
private _handleClick;
|
30
|
+
private _mapStatusToKind;
|
31
|
+
private _updateAttributes;
|
32
|
+
firstUpdated(): void;
|
33
|
+
render(): import("lit-html").TemplateResult<1>;
|
34
|
+
/**
|
35
|
+
* The custom event which is fired when the checklist item is clicked.
|
36
|
+
*/
|
37
|
+
static get checklistItemClicked(): string;
|
38
|
+
static styles: any;
|
39
|
+
}
|
40
|
+
export default CDSChecklistItem;
|
@@ -0,0 +1,122 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { __decorate } from 'tslib';
|
9
|
+
import { LitElement, html } from 'lit';
|
10
|
+
import { property } from 'lit/decorators.js';
|
11
|
+
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
|
12
|
+
import { prefix } from '../../globals/settings.js';
|
13
|
+
import styles from './checklist.scss.js';
|
14
|
+
import { Kinds, Statuses } from './checklist.types.js';
|
15
|
+
import { classMap } from 'lit/directives/class-map.js';
|
16
|
+
|
17
|
+
/**
|
18
|
+
* @license
|
19
|
+
*
|
20
|
+
* Copyright IBM Corp. 2025
|
21
|
+
*
|
22
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
23
|
+
* LICENSE file in the root directory of this source tree.
|
24
|
+
*/
|
25
|
+
/**
|
26
|
+
* item in c4p-checklist-group
|
27
|
+
* @element c4p-checklist-item
|
28
|
+
* @slot icon - checklist item icon, usually a status indicator icon
|
29
|
+
* @slot content - checklist item title/description
|
30
|
+
* @fires c4p-checklist-item-clicked - The custom event which is fired when a user clicks on checklist item with clickable attribute.
|
31
|
+
*/
|
32
|
+
let CDSChecklistItem = class CDSChecklistItem extends LitElement {
|
33
|
+
constructor() {
|
34
|
+
super(...arguments);
|
35
|
+
/** When true, makes the checklist item label clickable */
|
36
|
+
this.clickable = false;
|
37
|
+
}
|
38
|
+
_handleClick(event) {
|
39
|
+
const triggeredBy = event.target;
|
40
|
+
event.stopPropagation();
|
41
|
+
const init = {
|
42
|
+
bubbles: true,
|
43
|
+
cancelable: true,
|
44
|
+
composed: true,
|
45
|
+
detail: {
|
46
|
+
triggeredBy,
|
47
|
+
},
|
48
|
+
};
|
49
|
+
this.dispatchEvent(new CustomEvent(this.constructor.checklistItemClicked, init));
|
50
|
+
}
|
51
|
+
_mapStatusToKind(status) {
|
52
|
+
switch (status) {
|
53
|
+
case Statuses.NotStarted:
|
54
|
+
return Kinds.unchecked;
|
55
|
+
case Statuses.InProgress:
|
56
|
+
return Kinds.indeterminate;
|
57
|
+
case Statuses.Completed:
|
58
|
+
return Kinds.checked;
|
59
|
+
case Statuses.Error:
|
60
|
+
return Kinds.error;
|
61
|
+
case Statuses.Disabled:
|
62
|
+
return Kinds.disabled;
|
63
|
+
default:
|
64
|
+
return Kinds.error;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
_updateAttributes() {
|
68
|
+
this.setAttribute('role', 'listitem');
|
69
|
+
this.setAttribute('tabindex', '0');
|
70
|
+
this.classList.add(`${prefix}--checklist__list-item`);
|
71
|
+
}
|
72
|
+
firstUpdated() {
|
73
|
+
this._updateAttributes();
|
74
|
+
}
|
75
|
+
render() {
|
76
|
+
const { clickable, label, status, _handleClick: handleClick } = this;
|
77
|
+
const iconKind = this._mapStatusToKind(status);
|
78
|
+
const classes = classMap({
|
79
|
+
[`${prefix}--checklist__label`]: true,
|
80
|
+
[`${prefix}--checklist__label--clickable`]: clickable,
|
81
|
+
[`${prefix}--checklist__label--disabled`]: status === Statuses.Disabled,
|
82
|
+
});
|
83
|
+
return html `
|
84
|
+
<slot name="icon">
|
85
|
+
<c4p-checklist-icon kind="${iconKind}"></c4p-checklist-icon>
|
86
|
+
</slot>
|
87
|
+
<slot name="content">
|
88
|
+
<div
|
89
|
+
class="${classes}"
|
90
|
+
title=${label}
|
91
|
+
@click=${clickable ? handleClick : undefined}
|
92
|
+
tabindex=${clickable ? 0 : -1}
|
93
|
+
>
|
94
|
+
${label}
|
95
|
+
</div>
|
96
|
+
</slot>
|
97
|
+
`;
|
98
|
+
}
|
99
|
+
/**
|
100
|
+
* The custom event which is fired when the checklist item is clicked.
|
101
|
+
*/
|
102
|
+
static get checklistItemClicked() {
|
103
|
+
return `${prefix}-checklist-item-clicked`;
|
104
|
+
}
|
105
|
+
};
|
106
|
+
CDSChecklistItem.styles = styles;
|
107
|
+
__decorate([
|
108
|
+
property()
|
109
|
+
], CDSChecklistItem.prototype, "label", void 0);
|
110
|
+
__decorate([
|
111
|
+
property()
|
112
|
+
], CDSChecklistItem.prototype, "status", void 0);
|
113
|
+
__decorate([
|
114
|
+
property({ type: Boolean })
|
115
|
+
], CDSChecklistItem.prototype, "clickable", void 0);
|
116
|
+
CDSChecklistItem = __decorate([
|
117
|
+
carbonElement(`${prefix}-checklist-item`)
|
118
|
+
], CDSChecklistItem);
|
119
|
+
var CDSChecklistItem$1 = CDSChecklistItem;
|
120
|
+
|
121
|
+
export { CDSChecklistItem$1 as default };
|
122
|
+
//# sourceMappingURL=checklist-item.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"checklist-item.js","sources":["../../../src/components/checklist/checklist-item.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}
|
@@ -0,0 +1,71 @@
|
|
1
|
+
/**
|
2
|
+
* @license
|
3
|
+
*
|
4
|
+
* Copyright IBM Corp. 2025
|
5
|
+
*
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
8
|
+
*/
|
9
|
+
import { LitElement } from 'lit';
|
10
|
+
import '@carbon/web-components/es-custom/components/icon-button/index.js';
|
11
|
+
import './checklist-chart';
|
12
|
+
import './checklist-icon';
|
13
|
+
/**
|
14
|
+
* @element c4p-checklist
|
15
|
+
* @slot checklist-header - Header area which includes the title and the progress indicator.
|
16
|
+
* @slot default - Contains one or more `c4p-checklist-group` components to organize tasks into logical groups.
|
17
|
+
* @slot checklist-footer - Optional footer area for actions like buttons, links, or additional notes.
|
18
|
+
* @fires c4p-checklist-view-all - The custom event which is fired when a user clicks on View All button in checklist footer.
|
19
|
+
* @fires c4p-checklist-toggle - The custom event which is fired when user clicks on toggle button in checklist header.
|
20
|
+
*/
|
21
|
+
declare class CDSChecklist extends LitElement {
|
22
|
+
/**
|
23
|
+
* Specifies whether the component is opened or closed.
|
24
|
+
*/
|
25
|
+
open: boolean;
|
26
|
+
/**
|
27
|
+
* The title of the component.
|
28
|
+
*/
|
29
|
+
title: any;
|
30
|
+
/**
|
31
|
+
* The label for progress indicator chart
|
32
|
+
*/
|
33
|
+
chartLabel: any;
|
34
|
+
/**
|
35
|
+
* A number between 0 and 1 which indicates the progress of checklist
|
36
|
+
*/
|
37
|
+
chartValue: any;
|
38
|
+
/**
|
39
|
+
* Whether or not to show the open/close toggle.
|
40
|
+
*/
|
41
|
+
disableToggle: boolean;
|
42
|
+
/**
|
43
|
+
* The label for the toggle's tooltip.
|
44
|
+
*/
|
45
|
+
toggleLabel: any;
|
46
|
+
/**
|
47
|
+
* The alignment of the toggle's tooltip.
|
48
|
+
*/
|
49
|
+
toggleLabelAlign: any;
|
50
|
+
/**
|
51
|
+
* Aria-label for the Checklist's toggle component.
|
52
|
+
*/
|
53
|
+
toggleAriaLabel: any;
|
54
|
+
/**
|
55
|
+
* If defined, will show and enable the "View all (#)" button in the checklist footer.
|
56
|
+
*/
|
57
|
+
viewAllLabel: any;
|
58
|
+
private _viewAll;
|
59
|
+
private _onToggle;
|
60
|
+
render(): import("lit-html").TemplateResult<1>;
|
61
|
+
/**
|
62
|
+
* 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.
|
63
|
+
*/
|
64
|
+
static get checklistViewAll(): string;
|
65
|
+
/**
|
66
|
+
* The custom event which is fired when the checklist toggle button is clicked or when the Enter key is pressed on it.
|
67
|
+
*/
|
68
|
+
static get checklistToggle(): string;
|
69
|
+
static styles: any;
|
70
|
+
}
|
71
|
+
export default CDSChecklist;
|
@@ -0,0 +1,187 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { __decorate } from 'tslib';
|
9
|
+
import { LitElement, html } from 'lit';
|
10
|
+
import { property } from 'lit/decorators.js';
|
11
|
+
import { classMap } from 'lit/directives/class-map.js';
|
12
|
+
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
|
13
|
+
import ChevronIcon16 from '@carbon/icons/es/chevron--up/16';
|
14
|
+
import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
|
15
|
+
import '@carbon/web-components/es-custom/components/icon-button/index.js';
|
16
|
+
import { prefix } from '../../globals/settings.js';
|
17
|
+
import styles from './checklist.scss.js';
|
18
|
+
import './checklist-chart.js';
|
19
|
+
import './checklist-icon.js';
|
20
|
+
|
21
|
+
/**
|
22
|
+
* @license
|
23
|
+
*
|
24
|
+
* Copyright IBM Corp. 2025
|
25
|
+
*
|
26
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
27
|
+
* LICENSE file in the root directory of this source tree.
|
28
|
+
*/
|
29
|
+
const blockClass = `${prefix}--checklist`;
|
30
|
+
/**
|
31
|
+
* @element c4p-checklist
|
32
|
+
* @slot checklist-header - Header area which includes the title and the progress indicator.
|
33
|
+
* @slot default - Contains one or more `c4p-checklist-group` components to organize tasks into logical groups.
|
34
|
+
* @slot checklist-footer - Optional footer area for actions like buttons, links, or additional notes.
|
35
|
+
* @fires c4p-checklist-view-all - The custom event which is fired when a user clicks on View All button in checklist footer.
|
36
|
+
* @fires c4p-checklist-toggle - The custom event which is fired when user clicks on toggle button in checklist header.
|
37
|
+
*/
|
38
|
+
let CDSChecklist = class CDSChecklist extends LitElement {
|
39
|
+
constructor() {
|
40
|
+
super(...arguments);
|
41
|
+
/**
|
42
|
+
* Specifies whether the component is opened or closed.
|
43
|
+
*/
|
44
|
+
this.open = false;
|
45
|
+
/**
|
46
|
+
* Whether or not to show the open/close toggle.
|
47
|
+
*/
|
48
|
+
this.disableToggle = false;
|
49
|
+
}
|
50
|
+
_viewAll(event) {
|
51
|
+
const triggeredBy = event.target;
|
52
|
+
event.stopPropagation();
|
53
|
+
const init = {
|
54
|
+
bubbles: true,
|
55
|
+
cancelable: true,
|
56
|
+
composed: true,
|
57
|
+
detail: {
|
58
|
+
triggeredBy,
|
59
|
+
},
|
60
|
+
};
|
61
|
+
this.dispatchEvent(new CustomEvent(this.constructor.checklistViewAll, init));
|
62
|
+
}
|
63
|
+
_onToggle(event) {
|
64
|
+
this.open = !this.open;
|
65
|
+
// Fire custom event
|
66
|
+
const triggeredBy = event.target;
|
67
|
+
event.stopPropagation();
|
68
|
+
const init = {
|
69
|
+
bubbles: true,
|
70
|
+
cancelable: true,
|
71
|
+
composed: true,
|
72
|
+
detail: {
|
73
|
+
triggeredBy,
|
74
|
+
},
|
75
|
+
};
|
76
|
+
this.dispatchEvent(new CustomEvent(this.constructor.checklistToggle, init));
|
77
|
+
}
|
78
|
+
render() {
|
79
|
+
const { open, chartLabel, chartValue, title, disableToggle, toggleLabel, toggleLabelAlign, toggleAriaLabel, viewAllLabel, _viewAll: viewAll, _onToggle: onToggle, } = this;
|
80
|
+
const classes = classMap({
|
81
|
+
[`${blockClass}`]: true,
|
82
|
+
[`${blockClass}__closed`]: !open,
|
83
|
+
});
|
84
|
+
return html `
|
85
|
+
<aside class=${classes}>
|
86
|
+
<!-- Header -->
|
87
|
+
<header class="${blockClass}__header">
|
88
|
+
<slot name="checklist-header">
|
89
|
+
${html `<c4p-checklist-chart
|
90
|
+
value=${chartValue}
|
91
|
+
></c4p-checklist-chart>`}
|
92
|
+
${(title || chartLabel) &&
|
93
|
+
html `<div class="${blockClass}__titles">
|
94
|
+
<!-- checklist title -->
|
95
|
+
${title && html ` <h3 class="${blockClass}__title">${title}</h3> `}
|
96
|
+
<!-- chart label -->
|
97
|
+
${chartLabel &&
|
98
|
+
html `
|
99
|
+
<p id="{chartLabelId}" class="${blockClass}__chart-label">
|
100
|
+
${chartLabel}
|
101
|
+
</p>
|
102
|
+
`}
|
103
|
+
</div>`}
|
104
|
+
</slot>
|
105
|
+
<!-- Checklist toggle button -->
|
106
|
+
${!disableToggle &&
|
107
|
+
html `<cds-custom-icon-button
|
108
|
+
kind="ghost"
|
109
|
+
size="sm"
|
110
|
+
align=${toggleLabelAlign}
|
111
|
+
aria-label=${toggleAriaLabel}
|
112
|
+
class="${blockClass}__toggle"
|
113
|
+
@click=${onToggle}
|
114
|
+
>
|
115
|
+
${iconLoader(ChevronIcon16, {
|
116
|
+
slot: 'icon',
|
117
|
+
class: `${blockClass}__chevron`,
|
118
|
+
})}
|
119
|
+
<span slot="tooltip-content">${toggleLabel}</span>
|
120
|
+
</cds-custom-icon-button>`}
|
121
|
+
</header>
|
122
|
+
<div class="${blockClass}__content-outer">
|
123
|
+
<div class="${blockClass}__content-inner">
|
124
|
+
<!-- Checklist body -->
|
125
|
+
<!-- This is where you add c4p-checklist-group elements-->
|
126
|
+
<slot></slot>
|
127
|
+
|
128
|
+
<!-- Checklist footer -->
|
129
|
+
<div class="${blockClass}__footer">
|
130
|
+
<slot name="checklist-footer">
|
131
|
+
${viewAllLabel &&
|
132
|
+
html `<cds-custom-link @click=${viewAll}> ${viewAllLabel} </cds-custom-link>`}
|
133
|
+
</slot>
|
134
|
+
</div>
|
135
|
+
</div>
|
136
|
+
</div>
|
137
|
+
</aside>
|
138
|
+
`;
|
139
|
+
}
|
140
|
+
/**
|
141
|
+
* 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.
|
142
|
+
*/
|
143
|
+
static get checklistViewAll() {
|
144
|
+
return `${prefix}-checklist-view-all`;
|
145
|
+
}
|
146
|
+
/**
|
147
|
+
* The custom event which is fired when the checklist toggle button is clicked or when the Enter key is pressed on it.
|
148
|
+
*/
|
149
|
+
static get checklistToggle() {
|
150
|
+
return `${prefix}-checklist-toggle`;
|
151
|
+
}
|
152
|
+
};
|
153
|
+
CDSChecklist.styles = styles;
|
154
|
+
__decorate([
|
155
|
+
property({ type: Boolean, reflect: true })
|
156
|
+
], CDSChecklist.prototype, "open", void 0);
|
157
|
+
__decorate([
|
158
|
+
property({ type: String })
|
159
|
+
], CDSChecklist.prototype, "title", void 0);
|
160
|
+
__decorate([
|
161
|
+
property({ type: String, attribute: 'chart-label' })
|
162
|
+
], CDSChecklist.prototype, "chartLabel", void 0);
|
163
|
+
__decorate([
|
164
|
+
property({ type: Number, attribute: 'chart-value' })
|
165
|
+
], CDSChecklist.prototype, "chartValue", void 0);
|
166
|
+
__decorate([
|
167
|
+
property({ type: Boolean, attribute: 'disable-toggle' })
|
168
|
+
], CDSChecklist.prototype, "disableToggle", void 0);
|
169
|
+
__decorate([
|
170
|
+
property({ type: String, attribute: 'toggle-label' })
|
171
|
+
], CDSChecklist.prototype, "toggleLabel", void 0);
|
172
|
+
__decorate([
|
173
|
+
property({ type: String, attribute: 'toggle-label-align' })
|
174
|
+
], CDSChecklist.prototype, "toggleLabelAlign", void 0);
|
175
|
+
__decorate([
|
176
|
+
property({ type: String, attribute: 'toggle-aria-label' })
|
177
|
+
], CDSChecklist.prototype, "toggleAriaLabel", void 0);
|
178
|
+
__decorate([
|
179
|
+
property({ type: String, attribute: 'view-all-label' })
|
180
|
+
], CDSChecklist.prototype, "viewAllLabel", void 0);
|
181
|
+
CDSChecklist = __decorate([
|
182
|
+
carbonElement(`${prefix}-checklist`)
|
183
|
+
], CDSChecklist);
|
184
|
+
var CDSChecklist$1 = CDSChecklist;
|
185
|
+
|
186
|
+
export { CDSChecklist$1 as default };
|
187
|
+
//# sourceMappingURL=checklist.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"checklist.js","sources":["../../../src/components/checklist/checklist.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { css } from 'lit';
|
9
|
+
|
10
|
+
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-custom--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-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--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-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--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-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--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-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--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-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--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-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--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-custom--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-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--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-custom--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-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--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-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--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-custom--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-custom--layout--size-xs :where(.cds-custom--tag),.cds-custom--tag.cds-custom--layout--size-xs{--cds-layout-size-height:var(--cds-layout-size-height-xs)}.cds-custom--layout--size-sm :where(.cds-custom--tag),.cds-custom--tag.cds-custom--layout--size-sm{--cds-layout-size-height:var(--cds-layout-size-height-sm)}.cds-custom--layout--size-md :where(.cds-custom--tag),.cds-custom--tag.cds-custom--layout--size-md{--cds-layout-size-height:var(--cds-layout-size-height-md)}.cds-custom--layout--size-lg :where(.cds-custom--tag),.cds-custom--tag.cds-custom--layout--size-lg{--cds-layout-size-height:var(--cds-layout-size-height-lg)}.cds-custom--tag.cds-custom--tag--operational{border:1px solid var(--cds-tag-background-gray,#e0e0e0)}.cds-custom--tag .cds-custom--tag__close-icon:hover,.cds-custom--tag.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds-custom--tag .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-gray,#161616)}.cds-custom--tag.cds-custom--tag--lg{padding-inline-start:.75rem}.cds-custom--tag:has(.cds-custom--tag__custom-icon){padding-inline-start:.25rem}.cds-custom--tag.cds-custom--tag--lg:not(.cds-custom--tag--filter){padding-inline:.75rem}.cds-custom--tag.cds-custom--tag--lg:has(.cds-custom--tag__custom-icon){padding-inline-start:.5rem}.cds-custom--tag:not(.cds-custom--tag--selectable){border:0}.cds-custom--tag:not(:first-child){margin-inline-start:0}.cds-custom--tag--operational>span,.cds-custom--tag--selectable>span,.cds-custom--tag__label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds-custom--tag--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds-custom--tag--filter{padding-block:0;padding-inline-end:0}.cds-custom--tag--filter:hover{outline:none}.cds-custom--tag--selectable{background-color:var(--cds-layer);border:1px solid var(--cds-border-inverse,#161616);color:var(--cds-text-primary,#161616);cursor:pointer}.cds-custom--tag--selectable:hover{background-color:var(--cds-layer-hover);outline:none}.cds-custom--tag--selectable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds-custom--tag--selectable-selected{color:var(--cds-text-inverse,#fff)}.cds-custom--tag--selectable-selected,.cds-custom--tag--selectable-selected:hover{background-color:var(--cds-layer-selected-inverse,#161616)}.cds-custom--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-custom--tag--operational:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1);outline:none}.cds-custom--tag--operational:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds-custom--tag--red{background-color:var(--cds-tag-background-red,#ffd7d9);color:var(--cds-tag-color-red,#a2191f)}.cds-custom--tag--red.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-red,#ff8389)}.cds-custom--tag--red .cds-custom--tag__close-icon:hover,.cds-custom--tag--red.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-red,#ffc2c5)}.cds-custom--tag--red .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-red,#a2191f)}.cds-custom--tag--magenta{background-color:var(--cds-tag-background-magenta,#ffd6e8);color:var(--cds-tag-color-magenta,#9f1853)}.cds-custom--tag--magenta.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-magenta,#ff7eb6)}.cds-custom--tag--magenta .cds-custom--tag__close-icon:hover,.cds-custom--tag--magenta.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-magenta,#ffbdda)}.cds-custom--tag--magenta .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-magenta,#9f1853)}.cds-custom--tag--purple{background-color:var(--cds-tag-background-purple,#e8daff);color:var(--cds-tag-color-purple,#6929c4)}.cds-custom--tag--purple.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-purple,#be95ff)}.cds-custom--tag--purple .cds-custom--tag__close-icon:hover,.cds-custom--tag--purple.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-purple,#dcc7ff)}.cds-custom--tag--purple .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-purple,#6929c4)}.cds-custom--tag--blue{background-color:var(--cds-tag-background-blue,#d0e2ff);color:var(--cds-tag-color-blue,#0043ce)}.cds-custom--tag--blue.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-blue,#78a9ff)}.cds-custom--tag--blue .cds-custom--tag__close-icon:hover,.cds-custom--tag--blue.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-blue,#b8d3ff)}.cds-custom--tag--blue .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-blue,#0043ce)}.cds-custom--tag--cyan{background-color:var(--cds-tag-background-cyan,#bae6ff);color:var(--cds-tag-color-cyan,#00539a)}.cds-custom--tag--cyan.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-cyan,#33b1ff)}.cds-custom--tag--cyan .cds-custom--tag__close-icon:hover,.cds-custom--tag--cyan.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-cyan,#99daff)}.cds-custom--tag--cyan .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-cyan,#00539a)}.cds-custom--tag--teal{background-color:var(--cds-tag-background-teal,#9ef0f0);color:var(--cds-tag-color-teal,#005d5d)}.cds-custom--tag--teal.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-teal,#08bdba)}.cds-custom--tag--teal .cds-custom--tag__close-icon:hover,.cds-custom--tag--teal.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-teal,#57e5e5)}.cds-custom--tag--teal .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-teal,#005d5d)}.cds-custom--tag--green{background-color:var(--cds-tag-background-green,#a7f0ba);color:var(--cds-tag-color-green,#0e6027)}.cds-custom--tag--green.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-green,#42be65)}.cds-custom--tag--green .cds-custom--tag__close-icon:hover,.cds-custom--tag--green.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-green,#74e792)}.cds-custom--tag--green .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-green,#0e6027)}.cds-custom--tag--gray{background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#161616)}.cds-custom--tag--gray.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-gray,#a8a8a8)}.cds-custom--tag--gray .cds-custom--tag__close-icon:hover,.cds-custom--tag--gray.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds-custom--tag--gray .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-gray,#161616)}.cds-custom--tag--cool-gray{background-color:var(--cds-tag-background-cool-gray,#dde1e6);color:var(--cds-tag-color-cool-gray,#121619)}.cds-custom--tag--cool-gray.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-cool-gray,#a2a9b0)}.cds-custom--tag--cool-gray .cds-custom--tag__close-icon:hover,.cds-custom--tag--cool-gray.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-cool-gray,#cdd3da)}.cds-custom--tag--cool-gray .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-cool-gray,#121619)}.cds-custom--tag--warm-gray{background-color:var(--cds-tag-background-warm-gray,#e5e0df);color:var(--cds-tag-color-warm-gray,#171414)}.cds-custom--tag--warm-gray.cds-custom--tag--operational{border:1px solid var(--cds-tag-border-warm-gray,#ada8a8)}.cds-custom--tag--warm-gray .cds-custom--tag__close-icon:hover,.cds-custom--tag--warm-gray.cds-custom--tag--operational:hover{background-color:var(--cds-tag-hover-warm-gray,#d8d0cf)}.cds-custom--tag--warm-gray .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-tag-color-warm-gray,#171414)}.cds-custom--tag--high-contrast:not(.cds-custom--tag--operational){background-color:var(--cds-background-inverse,#393939);color:var(--cds-text-inverse,#fff)}.cds-custom--tag--high-contrast:not(.cds-custom--tag--operational).cds-custom--tag--operational{border:1px solid var(--cds-background-inverse,#393939)}.cds-custom--tag--high-contrast:not(.cds-custom--tag--operational) .cds-custom--tag__close-icon:hover,.cds-custom--tag--high-contrast:not(.cds-custom--tag--operational).cds-custom--tag--operational:hover{background-color:var(--cds-background-inverse-hover,#474747)}.cds-custom--tag--high-contrast:not(.cds-custom--tag--operational) .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-text-inverse,#fff)}.cds-custom--multi-select--readonly .cds-custom--tag--high-contrast:not(.cds-custom--tag--operational) .cds-custom--tag__close-icon:hover{background-color:transparent}.cds-custom--tag--outline:not(.cds-custom--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-custom--tag--outline:not(.cds-custom--tag--operational):not(span):not([disabled]).cds-custom--tag--operational{border:1px solid var(--cds-background,#fff)}.cds-custom--tag--outline:not(.cds-custom--tag--operational):not(span):not([disabled]) .cds-custom--tag__close-icon:hover,.cds-custom--tag--outline:not(.cds-custom--tag--operational):not(span):not([disabled]).cds-custom--tag--operational:hover{background-color:var(--cds-layer-hover)}.cds-custom--tag--outline:not(.cds-custom--tag--operational):not(span):not([disabled]) .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-text-primary,#161616)}.cds-custom--tag--disabled:not(.cds-custom--tag--operational),.cds-custom--tag--filter.cds-custom--tag--disabled,.cds-custom--tag--interactive.cds-custom--tag--disabled{background-color:var(--cds-layer);box-shadow:none;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));outline:none}.cds-custom--tag--disabled:not(.cds-custom--tag--operational).cds-custom--tag--operational,.cds-custom--tag--filter.cds-custom--tag--disabled.cds-custom--tag--operational,.cds-custom--tag--interactive.cds-custom--tag--disabled.cds-custom--tag--operational{border:1px solid var(--cds-layer)}.cds-custom--tag--disabled:not(.cds-custom--tag--operational) .cds-custom--tag__close-icon:hover,.cds-custom--tag--disabled:not(.cds-custom--tag--operational).cds-custom--tag--operational:hover,.cds-custom--tag--filter.cds-custom--tag--disabled .cds-custom--tag__close-icon:hover,.cds-custom--tag--filter.cds-custom--tag--disabled.cds-custom--tag--operational:hover,.cds-custom--tag--interactive.cds-custom--tag--disabled .cds-custom--tag__close-icon:hover,.cds-custom--tag--interactive.cds-custom--tag--disabled.cds-custom--tag--operational:hover{background-color:var(--cds-layer)}.cds-custom--tag--disabled:not(.cds-custom--tag--operational) .cds-custom--definition-term .cds-custom--tag__label,.cds-custom--tag--filter.cds-custom--tag--disabled .cds-custom--definition-term .cds-custom--tag__label,.cds-custom--tag--interactive.cds-custom--tag--disabled .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--tag--disabled:not(.cds-custom--tag--operational):hover,.cds-custom--tag--filter.cds-custom--tag--disabled:hover,.cds-custom--tag--interactive.cds-custom--tag--disabled:hover{cursor:not-allowed}.cds-custom--tag--disabled:not(.cds-custom--tag--operational) .cds-custom--tag__label,.cds-custom--tag--filter.cds-custom--tag--disabled .cds-custom--tag__label,.cds-custom--tag--interactive.cds-custom--tag--disabled .cds-custom--tag__label{background-color:var(--cds-layer);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--tag--operational.cds-custom--tag--disabled,.cds-custom--tag--selectable.cds-custom--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-custom--tag--operational.cds-custom--tag--disabled:hover,.cds-custom--tag--selectable.cds-custom--tag--disabled:hover{background-color:var(--cds-layer);cursor:not-allowed}.cds-custom--tag--interactive{transition:background-color 70ms cubic-bezier(0,0,.38,.9)}.cds-custom--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-custom--tag__close-icon svg{fill:currentColor}.cds-custom--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-custom--tag__custom-icon svg{fill:currentColor}.cds-custom--tag--disabled .cds-custom--tag__close-icon{cursor:not-allowed}.cds-custom--tag__close-icon:focus{border-radius:50%;box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:none;z-index:99999}.cds-custom--tag--high-contrast .cds-custom--tag__close-icon:focus{box-shadow:inset 0 0 0 1px var(--cds-focus-inverse,#fff)}.cds-custom--tag--filter.cds-custom--tag--disabled .cds-custom--tag__close-icon:hover{background-color:transparent}.cds-custom--tag--filter.cds-custom--tag--disabled svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds-custom--tag--sm.cds-custom--tag--filter{padding-inline-end:0}.cds-custom--tag--sm .cds-custom--tag__close-icon{margin-inline-start:.3125rem}.cds-custom--tag.cds-custom--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-custom--tag.cds-custom--skeleton:active,.cds-custom--tag.cds-custom--skeleton:focus,.cds-custom--tag.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--tag.cds-custom--skeleton:before{animation:cds-custom--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-custom--tag.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--tag.cds-custom--skeleton{background:CanvasText}.cds-custom--tag.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--tag.cds-custom--skeleton.cds-custom--tag--operational{border:1px solid var(--cds-skeleton-background,#e8e8e8)}.cds-custom--tag.cds-custom--skeleton .cds-custom--tag__close-icon:hover,.cds-custom--tag.cds-custom--skeleton.cds-custom--tag--operational:hover{background-color:var(--cds-skeleton-background,#e8e8e8)}.cds-custom--tag.cds-custom--skeleton .cds-custom--definition-term .cds-custom--tag__label{color:var(--cds-text-primary,#161616)}@supports (hanging-punctuation:first) and (font:-apple-system-body) and (-webkit-appearance:none){.cds-custom--tag.cds-custom--skeleton{transform:translateZ(0)}}.cds-custom--tag .cds-custom--ai-label .cds-custom--ai-label__button--inline,.cds-custom--tag .cds-custom--slug .cds-custom--slug__button--inline{color:currentColor;margin-inline-start:.0625rem}.cds-custom--tag .cds-custom--ai-label .cds-custom--ai-label__button--inline .cds-custom--ai-label__text:before,.cds-custom--tag .cds-custom--slug .cds-custom--slug__button--inline .cds-custom--slug__text:before{background-color:currentColor}.cds-custom--tag .cds-custom--ai-label .cds-custom--ai-label__button--inline:hover,.cds-custom--tag .cds-custom--slug .cds-custom--slug__button--inline:hover{border-color:currentColor}.cds-custom--tag--filter .cds-custom--ai-label,.cds-custom--tag--filter .cds-custom--slug,.cds-custom--tag--filter .cds-custom--tag__decorator>*{min-inline-size:2.00875rem}.cds-custom--tag .cds-custom--tag__decorator:not(:has(.cds-custom--ai-label)){block-size:1rem;text-align:center}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--tag{outline:1px solid transparent}.cds-custom--tag__close-icon:focus{color:Highlight;outline:1px solid Highlight}}.cds-custom--tag-label-tooltip{max-inline-size:-webkit-fill-available}.cds-custom--tag__custom-icon+.cds-custom--tag-label-tooltip{max-inline-size:11rem}.cds-custom--tag--filter .cds-custom--tag__custom-icon+.cds-custom--tag-label-tooltip{max-inline-size:9.875rem}.cds-custom--interactive--tag-children{display:inline-flex;max-inline-size:12.5rem;place-items:center}.cds-custom--tag--filter .cds-custom--tag__custom-icon+span>.cds-custom--interactive--tag-children{max-inline-size:11.5rem}.cds-custom--tag .cds-custom--definition-term{border-block-end:none;cursor:default;max-inline-size:12rem}.cds-custom--tag .cds-custom--tag__custom-icon+span>.cds-custom--definition-term{max-inline-size:11rem}.cds-custom--tag>.cds-custom--popover-container{display:flex}.cds-custom--toggletip-button:has(.cds-custom--tag--operational.cds-custom--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-custom--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-custom--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-custom--btn--primary div{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis}.c4p--checklist__button.cds-custom--btn--primary:hover{background:transparent;color:var(--cds-link-primary-hover,#0043ce);text-decoration:underline}.c4p--checklist__button.cds-custom--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%}"]);
|
11
|
+
|
12
|
+
export { styles as default };
|
13
|
+
//# sourceMappingURL=checklist.scss.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"checklist.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|