@carbon/web-components 2.63.0-rc.0 → 2.63.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 +645 -0
- package/es/components/big-number/big-number.js +1 -1
- package/es/components/card/card-action.d.ts +27 -0
- package/es/components/card/card-action.d.ts.map +1 -0
- package/es/components/card/card-action.js +52 -0
- package/es/components/card/card-action.js.map +1 -0
- package/es/components/card/card-actions.d.ts +36 -0
- package/es/components/card/card-actions.d.ts.map +1 -0
- package/es/components/card/card-actions.js +171 -0
- package/es/components/card/card-actions.js.map +1 -0
- package/es/components/card/card-body.d.ts +23 -0
- package/es/components/card/card-body.d.ts.map +1 -0
- package/es/components/card/card-body.js +54 -0
- package/es/components/card/card-body.js.map +1 -0
- package/es/components/card/card-context.d.ts +20 -0
- package/es/components/card/card-context.d.ts.map +1 -0
- package/es/components/card/card-context.js +29 -0
- package/es/components/card/card-context.js.map +1 -0
- package/es/components/card/card-footer.d.ts +34 -0
- package/es/components/card/card-footer.d.ts.map +1 -0
- package/es/components/card/card-footer.js +75 -0
- package/es/components/card/card-footer.js.map +1 -0
- package/es/components/card/card-header-media.d.ts +19 -0
- package/es/components/card/card-header-media.d.ts.map +1 -0
- package/es/components/card/card-header-media.js +39 -0
- package/es/components/card/card-header-media.js.map +1 -0
- package/es/components/card/card-header.d.ts +23 -0
- package/es/components/card/card-header.d.ts.map +1 -0
- package/es/components/card/card-header.js +70 -0
- package/es/components/card/card-header.js.map +1 -0
- package/es/components/card/card-media.d.ts +37 -0
- package/es/components/card/card-media.d.ts.map +1 -0
- package/es/components/card/card-media.js +79 -0
- package/es/components/card/card-media.js.map +1 -0
- package/es/components/card/card-title-media.d.ts +19 -0
- package/es/components/card/card-title-media.d.ts.map +1 -0
- package/es/components/card/card-title-media.js +39 -0
- package/es/components/card/card-title-media.js.map +1 -0
- package/es/components/card/card-title.d.ts +52 -0
- package/es/components/card/card-title.d.ts.map +1 -0
- package/es/components/card/card-title.js +144 -0
- package/es/components/card/card-title.js.map +1 -0
- package/es/components/card/card.d.ts +69 -0
- package/es/components/card/card.d.ts.map +1 -0
- package/es/components/card/card.js +185 -0
- package/es/components/card/card.js.map +1 -0
- package/es/components/card/card.scss.js +14 -0
- package/es/components/card/card.scss.js.map +1 -0
- package/es/components/card/defs.d.ts +33 -0
- package/es/components/card/defs.d.ts.map +1 -0
- package/es/components/card/defs.js +46 -0
- package/es/components/card/defs.js.map +1 -0
- package/es/components/card/index.d.ts +17 -0
- package/es/components/card/index.d.ts.map +1 -0
- package/es/components/card/index.js +17 -0
- package/es/components/tile/clickable-tile.js +1 -1
- package/es/components/user-avatar/index.d.ts +8 -0
- package/es/components/user-avatar/index.d.ts.map +1 -0
- package/es/components/user-avatar/index.js +8 -0
- package/es/components/user-avatar/user-avatar.d.ts +84 -0
- package/es/components/user-avatar/user-avatar.d.ts.map +1 -0
- package/es/components/user-avatar/user-avatar.js +151 -0
- package/es/components/user-avatar/user-avatar.js.map +1 -0
- package/es/components/user-avatar/user-avatar.scss.js +14 -0
- package/es/components/user-avatar/user-avatar.scss.js.map +1 -0
- package/es/globals/settings.d.ts +1 -1
- package/es/globals/settings.d.ts.map +1 -1
- package/es/globals/settings.js +1 -0
- package/es/globals/settings.js.map +1 -1
- package/es/index.d.ts +10 -0
- package/es/index.d.ts.map +1 -1
- package/es/index.js +13 -3
- package/es-custom/components/big-number/big-number.js +1 -1
- package/es-custom/components/card/card-action.d.ts +27 -0
- package/es-custom/components/card/card-action.d.ts.map +1 -0
- package/es-custom/components/card/card-action.js +52 -0
- package/es-custom/components/card/card-action.js.map +1 -0
- package/es-custom/components/card/card-actions.d.ts +36 -0
- package/es-custom/components/card/card-actions.d.ts.map +1 -0
- package/es-custom/components/card/card-actions.js +171 -0
- package/es-custom/components/card/card-actions.js.map +1 -0
- package/es-custom/components/card/card-body.d.ts +23 -0
- package/es-custom/components/card/card-body.d.ts.map +1 -0
- package/es-custom/components/card/card-body.js +54 -0
- package/es-custom/components/card/card-body.js.map +1 -0
- package/es-custom/components/card/card-context.d.ts +20 -0
- package/es-custom/components/card/card-context.d.ts.map +1 -0
- package/es-custom/components/card/card-context.js +29 -0
- package/es-custom/components/card/card-context.js.map +1 -0
- package/es-custom/components/card/card-footer.d.ts +34 -0
- package/es-custom/components/card/card-footer.d.ts.map +1 -0
- package/es-custom/components/card/card-footer.js +75 -0
- package/es-custom/components/card/card-footer.js.map +1 -0
- package/es-custom/components/card/card-header-media.d.ts +19 -0
- package/es-custom/components/card/card-header-media.d.ts.map +1 -0
- package/es-custom/components/card/card-header-media.js +39 -0
- package/es-custom/components/card/card-header-media.js.map +1 -0
- package/es-custom/components/card/card-header.d.ts +23 -0
- package/es-custom/components/card/card-header.d.ts.map +1 -0
- package/es-custom/components/card/card-header.js +70 -0
- package/es-custom/components/card/card-header.js.map +1 -0
- package/es-custom/components/card/card-media.d.ts +37 -0
- package/es-custom/components/card/card-media.d.ts.map +1 -0
- package/es-custom/components/card/card-media.js +79 -0
- package/es-custom/components/card/card-media.js.map +1 -0
- package/es-custom/components/card/card-title-media.d.ts +19 -0
- package/es-custom/components/card/card-title-media.d.ts.map +1 -0
- package/es-custom/components/card/card-title-media.js +39 -0
- package/es-custom/components/card/card-title-media.js.map +1 -0
- package/es-custom/components/card/card-title.d.ts +52 -0
- package/es-custom/components/card/card-title.d.ts.map +1 -0
- package/es-custom/components/card/card-title.js +144 -0
- package/es-custom/components/card/card-title.js.map +1 -0
- package/es-custom/components/card/card.d.ts +69 -0
- package/es-custom/components/card/card.d.ts.map +1 -0
- package/es-custom/components/card/card.js +185 -0
- package/es-custom/components/card/card.js.map +1 -0
- package/es-custom/components/card/card.scss.js +14 -0
- package/es-custom/components/card/card.scss.js.map +1 -0
- package/es-custom/components/card/defs.d.ts +33 -0
- package/es-custom/components/card/defs.d.ts.map +1 -0
- package/es-custom/components/card/defs.js +46 -0
- package/es-custom/components/card/defs.js.map +1 -0
- package/es-custom/components/card/index.d.ts +17 -0
- package/es-custom/components/card/index.d.ts.map +1 -0
- package/es-custom/components/card/index.js +17 -0
- package/es-custom/components/tile/clickable-tile.js +1 -1
- package/es-custom/components/user-avatar/index.d.ts +8 -0
- package/es-custom/components/user-avatar/index.d.ts.map +1 -0
- package/es-custom/components/user-avatar/index.js +8 -0
- package/es-custom/components/user-avatar/user-avatar.d.ts +84 -0
- package/es-custom/components/user-avatar/user-avatar.d.ts.map +1 -0
- package/es-custom/components/user-avatar/user-avatar.js +151 -0
- package/es-custom/components/user-avatar/user-avatar.js.map +1 -0
- package/es-custom/components/user-avatar/user-avatar.scss.js +14 -0
- package/es-custom/components/user-avatar/user-avatar.scss.js.map +1 -0
- package/es-custom/globals/settings.d.ts +1 -1
- package/es-custom/globals/settings.d.ts.map +1 -1
- package/es-custom/globals/settings.js +1 -0
- package/es-custom/globals/settings.js.map +1 -1
- package/es-custom/index.d.ts +10 -0
- package/es-custom/index.d.ts.map +1 -1
- package/es-custom/index.js +13 -3
- package/lib/components/card/card-action.d.ts +27 -0
- package/lib/components/card/card-action.d.ts.map +1 -0
- package/lib/components/card/card-actions.d.ts +36 -0
- package/lib/components/card/card-actions.d.ts.map +1 -0
- package/lib/components/card/card-body.d.ts +23 -0
- package/lib/components/card/card-body.d.ts.map +1 -0
- package/lib/components/card/card-context.d.ts +20 -0
- package/lib/components/card/card-context.d.ts.map +1 -0
- package/lib/components/card/card-footer.d.ts +34 -0
- package/lib/components/card/card-footer.d.ts.map +1 -0
- package/lib/components/card/card-header-media.d.ts +19 -0
- package/lib/components/card/card-header-media.d.ts.map +1 -0
- package/lib/components/card/card-header.d.ts +23 -0
- package/lib/components/card/card-header.d.ts.map +1 -0
- package/lib/components/card/card-media.d.ts +37 -0
- package/lib/components/card/card-media.d.ts.map +1 -0
- package/lib/components/card/card-title-media.d.ts +19 -0
- package/lib/components/card/card-title-media.d.ts.map +1 -0
- package/lib/components/card/card-title.d.ts +52 -0
- package/lib/components/card/card-title.d.ts.map +1 -0
- package/lib/components/card/card.d.ts +69 -0
- package/lib/components/card/card.d.ts.map +1 -0
- package/lib/components/card/defs.d.ts +33 -0
- package/lib/components/card/defs.d.ts.map +1 -0
- package/lib/components/card/defs.js +48 -0
- package/lib/components/card/defs.js.map +1 -0
- package/lib/components/card/index.d.ts +17 -0
- package/lib/components/card/index.d.ts.map +1 -0
- package/lib/components/user-avatar/index.d.ts +8 -0
- package/lib/components/user-avatar/index.d.ts.map +1 -0
- package/lib/components/user-avatar/user-avatar.d.ts +84 -0
- package/lib/components/user-avatar/user-avatar.d.ts.map +1 -0
- package/lib/globals/settings.d.ts +1 -1
- package/lib/globals/settings.d.ts.map +1 -1
- package/lib/globals/settings.js +1 -0
- package/lib/globals/settings.js.map +1 -1
- package/lib/index.d.ts +10 -0
- package/lib/index.d.ts.map +1 -1
- package/package.json +6 -6
- package/scss/components/card/card-story.scss +29 -0
- package/scss/components/card/card.scss +212 -0
- package/scss/components/user-avatar/story-styles.scss +53 -0
- package/scss/components/user-avatar/user-avatar.scss +113 -0
- package/telemetry.yml +5 -0
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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 "../../globals/settings.js";
|
|
9
|
+
import { carbonElement } from "../../globals/decorators/carbon-element.js";
|
|
10
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
11
|
+
import iconLoader from "../../globals/internal/icon-loader.js";
|
|
12
|
+
import "../menu/index.js";
|
|
13
|
+
import card_default from "./card.scss.js";
|
|
14
|
+
import "../overflow-menu/index.js";
|
|
15
|
+
import { LitElement, html, nothing } from "lit";
|
|
16
|
+
import { property, state } from "lit/decorators.js";
|
|
17
|
+
import { createOverflowHandler } from "@carbon/utilities/overflowHandler";
|
|
18
|
+
import OverflowMenuVertical16 from "@carbon/icons/es/overflow-menu--vertical/16.js";
|
|
19
|
+
//#region src/components/card/card-actions.ts
|
|
20
|
+
/**
|
|
21
|
+
* Copyright IBM Corp. 2026
|
|
22
|
+
*
|
|
23
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
24
|
+
* LICENSE file in the root directory of this source tree.
|
|
25
|
+
*/
|
|
26
|
+
const _overflowIcon = iconLoader(OverflowMenuVertical16, {
|
|
27
|
+
slot: "icon",
|
|
28
|
+
class: `cds-custom--overflow-menu__icon`
|
|
29
|
+
});
|
|
30
|
+
/**
|
|
31
|
+
* Card actions
|
|
32
|
+
*
|
|
33
|
+
* @element cds-custom-card-actions
|
|
34
|
+
* @slot - Default slot for cds-custom-card-action elements.
|
|
35
|
+
*/
|
|
36
|
+
let CDSCardActions = class CDSCardActions extends LitElement {
|
|
37
|
+
constructor(..._args) {
|
|
38
|
+
super(..._args);
|
|
39
|
+
this.overflowMenuLabel = "More actions";
|
|
40
|
+
this._hiddenIds = /* @__PURE__ */ new Set();
|
|
41
|
+
this._actionItems = [];
|
|
42
|
+
this._pendingAttach = false;
|
|
43
|
+
}
|
|
44
|
+
disconnectedCallback() {
|
|
45
|
+
super.disconnectedCallback();
|
|
46
|
+
this._overflowHandler?.disconnect();
|
|
47
|
+
this._overflowHandler = void 0;
|
|
48
|
+
this._offsetEl?.remove();
|
|
49
|
+
this._offsetEl = void 0;
|
|
50
|
+
this._pendingAttach = false;
|
|
51
|
+
this._hiddenIds = /* @__PURE__ */ new Set();
|
|
52
|
+
this._actionItems = [];
|
|
53
|
+
}
|
|
54
|
+
_ensureOffsetEl() {
|
|
55
|
+
if (this._offsetEl) return;
|
|
56
|
+
const div = document.createElement("div");
|
|
57
|
+
div.setAttribute("data-offset", "");
|
|
58
|
+
div.style.inlineSize = `var(--cds-spacing-07, 2rem)`;
|
|
59
|
+
div.style.blockSize = `var(--cds-spacing-07, 2rem)`;
|
|
60
|
+
div.style.flexShrink = "0";
|
|
61
|
+
div.style.display = "none";
|
|
62
|
+
this._offsetEl = div;
|
|
63
|
+
this.appendChild(div);
|
|
64
|
+
}
|
|
65
|
+
_handleSlotChange({ target }) {
|
|
66
|
+
const actions = target.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement && el.localName === `cds-custom-card-action`);
|
|
67
|
+
this._assignActionIds(actions);
|
|
68
|
+
this._actionItems = this._resolveActionItems(actions);
|
|
69
|
+
if (!this._pendingAttach) {
|
|
70
|
+
this._pendingAttach = true;
|
|
71
|
+
this.updateComplete.then(() => {
|
|
72
|
+
this._pendingAttach = false;
|
|
73
|
+
if (this.isConnected) this._attachOverflowHandler();
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
_attachOverflowHandler() {
|
|
78
|
+
this._overflowHandler?.disconnect();
|
|
79
|
+
this._overflowHandler = void 0;
|
|
80
|
+
if (this._actionItems.length === 0) return;
|
|
81
|
+
this._ensureOffsetEl();
|
|
82
|
+
const idByEl = new Map(this._actionItems.map(({ el, id }) => [el, id]));
|
|
83
|
+
const offsetEl = this._offsetEl;
|
|
84
|
+
this._overflowHandler = createOverflowHandler({
|
|
85
|
+
container: this,
|
|
86
|
+
gap: 8,
|
|
87
|
+
onChange: (_, hidden) => {
|
|
88
|
+
if (offsetEl) offsetEl.style.display = hidden.length > 0 ? "block" : "none";
|
|
89
|
+
this._hiddenIds = new Set(hidden.map((el) => idByEl.get(el)).filter((id) => id !== void 0));
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
_assignActionIds(actions) {
|
|
94
|
+
actions.forEach((action, index) => {
|
|
95
|
+
action.dataset.actionId = `card-action-${index}`;
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
_resolveActionItems(actions) {
|
|
99
|
+
return actions.map((action, index) => {
|
|
100
|
+
const id = `card-action-${index}`;
|
|
101
|
+
const actionLabel = action.getAttribute("label");
|
|
102
|
+
if (actionLabel) return {
|
|
103
|
+
el: action,
|
|
104
|
+
label: actionLabel,
|
|
105
|
+
id
|
|
106
|
+
};
|
|
107
|
+
const button = action.querySelector(`cds-custom-button, cds-custom-icon-button`);
|
|
108
|
+
if (button) {
|
|
109
|
+
const btnLabel = button.getAttribute("label") || button.getAttribute("tooltip-text") || button.getAttribute("tooltip-content");
|
|
110
|
+
if (btnLabel) return {
|
|
111
|
+
el: action,
|
|
112
|
+
label: btnLabel,
|
|
113
|
+
id
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
const tooltipContent = action.querySelector("[slot=\"tooltip-content\"]");
|
|
117
|
+
if (tooltipContent?.textContent?.trim()) return {
|
|
118
|
+
el: action,
|
|
119
|
+
label: tooltipContent.textContent.trim(),
|
|
120
|
+
id
|
|
121
|
+
};
|
|
122
|
+
return {
|
|
123
|
+
el: action,
|
|
124
|
+
label: `Action ${index + 1}`,
|
|
125
|
+
id
|
|
126
|
+
};
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
render() {
|
|
130
|
+
const { _actionItems, _hiddenIds, overflowMenuLabel } = this;
|
|
131
|
+
const hasHidden = _hiddenIds.size > 0;
|
|
132
|
+
const hiddenItems = _actionItems.filter(({ id }) => _hiddenIds.has(id));
|
|
133
|
+
return html`
|
|
134
|
+
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
135
|
+
|
|
136
|
+
${hasHidden ? html`
|
|
137
|
+
<cds-custom-overflow-menu
|
|
138
|
+
size="sm"
|
|
139
|
+
enable-v12-overflowmenu
|
|
140
|
+
autoalign
|
|
141
|
+
menu-alignment="bottom-end"
|
|
142
|
+
label=${overflowMenuLabel}
|
|
143
|
+
class="${"cds-custom"}--card__actions-overflow-menu">
|
|
144
|
+
${_overflowIcon}
|
|
145
|
+
<cds-custom-menu>
|
|
146
|
+
${hiddenItems.map(({ id, label }) => html`
|
|
147
|
+
<cds-custom-menu-item
|
|
148
|
+
data-action-id=${id}
|
|
149
|
+
label=${label}></cds-custom-menu-item>
|
|
150
|
+
`)}
|
|
151
|
+
</cds-custom-menu>
|
|
152
|
+
</cds-custom-overflow-menu>
|
|
153
|
+
` : nothing}
|
|
154
|
+
`;
|
|
155
|
+
}
|
|
156
|
+
static {
|
|
157
|
+
this.styles = card_default;
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
__decorate([property({
|
|
161
|
+
attribute: "overflow-menu-label",
|
|
162
|
+
reflect: true
|
|
163
|
+
})], CDSCardActions.prototype, "overflowMenuLabel", void 0);
|
|
164
|
+
__decorate([state()], CDSCardActions.prototype, "_hiddenIds", void 0);
|
|
165
|
+
__decorate([state()], CDSCardActions.prototype, "_actionItems", void 0);
|
|
166
|
+
CDSCardActions = __decorate([carbonElement(`cds-custom-card-actions`)], CDSCardActions);
|
|
167
|
+
var card_actions_default = CDSCardActions;
|
|
168
|
+
//#endregion
|
|
169
|
+
export { card_actions_default as default };
|
|
170
|
+
|
|
171
|
+
//# sourceMappingURL=card-actions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-actions.js","names":["slot","styles","customElement"],"sources":["../../../src/components/card/card-actions.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n createOverflowHandler,\n type OverflowHandler,\n} from '@carbon/utilities/overflowHandler';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport OverflowMenuVertical16 from '@carbon/icons/es/overflow-menu--vertical/16.js';\nimport '../overflow-menu/index';\nimport '../menu/index';\nimport styles from './card.scss?lit';\n\nconst _overflowIcon = iconLoader(OverflowMenuVertical16, {\n slot: 'icon',\n class: `${prefix}--overflow-menu__icon`,\n});\n\n/**\n * Resolved item shape used for overflow menu population.\n */\ninterface ActionItem {\n /** The cds-custom-card-action element itself, used as the handler's measured item. */\n el: HTMLElement;\n /** Resolved label for the overflow menu entry. */\n label: string;\n /** The data-action-id assigned to `el`, cached to avoid repeated dataset lookups. */\n id: string;\n}\n\n/**\n * Card actions\n *\n * @element cds-custom-card-actions\n * @slot - Default slot for cds-custom-card-action elements.\n */\n@customElement(`${prefix}-card-actions`)\nclass CDSCardActions extends LitElement {\n /** Label for the overflow menu trigger button. */\n @property({ attribute: 'overflow-menu-label', reflect: true })\n overflowMenuLabel = 'More actions';\n\n /** data-action-id values of items currently hidden by the overflow handler. */\n @state()\n private _hiddenIds: Set<string> = new Set();\n\n /** Resolved metadata for all slotted actions (rebuilt on slotchange). */\n @state()\n private _actionItems: ActionItem[] = [];\n\n private _overflowHandler: OverflowHandler | undefined;\n private _pendingAttach = false;\n\n private _offsetEl: HTMLDivElement | undefined;\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._overflowHandler?.disconnect();\n this._overflowHandler = undefined;\n this._offsetEl?.remove();\n this._offsetEl = undefined;\n this._pendingAttach = false;\n this._hiddenIds = new Set();\n this._actionItems = [];\n }\n\n private _ensureOffsetEl() {\n if (this._offsetEl) return;\n\n const div = document.createElement('div');\n div.setAttribute('data-offset', '');\n div.style.inlineSize = `var(--${prefix}-spacing-07, 2rem)`;\n div.style.blockSize = `var(--${prefix}-spacing-07, 2rem)`;\n div.style.flexShrink = '0';\n div.style.display = 'none';\n this._offsetEl = div;\n this.appendChild(div);\n }\n\n private _handleSlotChange({ target }: Event) {\n const slot = target as HTMLSlotElement;\n const actions = slot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HTMLElement =>\n el instanceof HTMLElement && el.localName === `${prefix}-card-action`\n );\n\n this._assignActionIds(actions);\n this._actionItems = this._resolveActionItems(actions);\n if (!this._pendingAttach) {\n this._pendingAttach = true;\n void this.updateComplete.then(() => {\n this._pendingAttach = false;\n if (this.isConnected) {\n this._attachOverflowHandler();\n }\n });\n }\n }\n\n private _attachOverflowHandler() {\n this._overflowHandler?.disconnect();\n this._overflowHandler = undefined;\n\n if (this._actionItems.length === 0) return;\n\n this._ensureOffsetEl();\n\n const idByEl = new Map(this._actionItems.map(({ el, id }) => [el, id]));\n const offsetEl = this._offsetEl;\n\n this._overflowHandler = createOverflowHandler({\n container: this,\n gap: 8,\n onChange: (_, hidden: HTMLElement[]) => {\n if (offsetEl) {\n offsetEl.style.display = hidden.length > 0 ? 'block' : 'none';\n }\n this._hiddenIds = new Set(\n hidden\n .map((el) => idByEl.get(el))\n .filter((id): id is string => id !== undefined)\n );\n },\n });\n }\n\n private _assignActionIds(actions: HTMLElement[]) {\n actions.forEach((action, index) => {\n action.dataset.actionId = `card-action-${index}`;\n });\n }\n\n private _resolveActionItems(actions: HTMLElement[]): ActionItem[] {\n return actions.map((action, index) => {\n const id = `card-action-${index}`;\n\n const actionLabel = action.getAttribute('label');\n if (actionLabel) return { el: action, label: actionLabel, id };\n\n const button = action.querySelector(\n `${prefix}-button, ${prefix}-icon-button`\n ) as HTMLElement | null;\n if (button) {\n const btnLabel =\n button.getAttribute('label') ||\n button.getAttribute('tooltip-text') ||\n button.getAttribute('tooltip-content');\n if (btnLabel) return { el: action, label: btnLabel, id };\n }\n\n const tooltipContent = action.querySelector(\n '[slot=\"tooltip-content\"]'\n ) as HTMLElement | null;\n if (tooltipContent?.textContent?.trim()) {\n return { el: action, label: tooltipContent.textContent.trim(), id };\n }\n\n return { el: action, label: `Action ${index + 1}`, id };\n });\n }\n\n render() {\n const { _actionItems, _hiddenIds, overflowMenuLabel } = this;\n const hasHidden = _hiddenIds.size > 0;\n const hiddenItems = _actionItems.filter(({ id }) => _hiddenIds.has(id));\n\n return html`\n <slot @slotchange=${this._handleSlotChange}></slot>\n\n ${hasHidden\n ? html`\n <cds-custom-overflow-menu\n size=\"sm\"\n enable-v12-overflowmenu\n autoalign\n menu-alignment=\"bottom-end\"\n label=${overflowMenuLabel}\n class=\"${prefix}--card__actions-overflow-menu\">\n ${_overflowIcon}\n <cds-custom-menu>\n ${hiddenItems.map(\n ({ id, label }) => html`\n <cds-custom-menu-item\n data-action-id=${id}\n label=${label}></cds-custom-menu-item>\n `\n )}\n </cds-custom-menu>\n </cds-custom-overflow-menu>\n `\n : nothing}\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSCardActions;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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
|
+
import { LitElement } from 'lit';
|
|
8
|
+
/**
|
|
9
|
+
* Card body — primary content area.
|
|
10
|
+
*
|
|
11
|
+
* @element cds-custom-card-body
|
|
12
|
+
* @slot - Default slot for free-form content.
|
|
13
|
+
*/
|
|
14
|
+
declare class CDSCardBody extends LitElement {
|
|
15
|
+
/**
|
|
16
|
+
* Remove all padding so content sits flush to the card edges.
|
|
17
|
+
*/
|
|
18
|
+
isFlush: boolean;
|
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
20
|
+
static styles: any;
|
|
21
|
+
}
|
|
22
|
+
export default CDSCardBody;
|
|
23
|
+
//# sourceMappingURL=card-body.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-body.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-body.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC;;;;;GAKG;AACH,cACM,WAAY,SAAQ,UAAU;IAClC;;OAEG;IAEH,OAAO,UAAS;IAEhB,MAAM;IASN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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 "../../globals/settings.js";
|
|
9
|
+
import { carbonElement } from "../../globals/decorators/carbon-element.js";
|
|
10
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
11
|
+
import card_default from "./card.scss.js";
|
|
12
|
+
import { LitElement, html } from "lit";
|
|
13
|
+
import { property } from "lit/decorators.js";
|
|
14
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
15
|
+
//#region src/components/card/card-body.ts
|
|
16
|
+
/**
|
|
17
|
+
* Copyright IBM Corp. 2026
|
|
18
|
+
*
|
|
19
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
20
|
+
* LICENSE file in the root directory of this source tree.
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* Card body — primary content area.
|
|
24
|
+
*
|
|
25
|
+
* @element cds-custom-card-body
|
|
26
|
+
* @slot - Default slot for free-form content.
|
|
27
|
+
*/
|
|
28
|
+
let CDSCardBody = class CDSCardBody extends LitElement {
|
|
29
|
+
constructor(..._args) {
|
|
30
|
+
super(..._args);
|
|
31
|
+
this.isFlush = false;
|
|
32
|
+
}
|
|
33
|
+
render() {
|
|
34
|
+
const { isFlush } = this;
|
|
35
|
+
return html`<div class=${classMap({
|
|
36
|
+
[`cds-custom--card__body`]: true,
|
|
37
|
+
[`cds-custom--card__body--flush`]: isFlush
|
|
38
|
+
})}><slot></slot></div>`;
|
|
39
|
+
}
|
|
40
|
+
static {
|
|
41
|
+
this.styles = card_default;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
__decorate([property({
|
|
45
|
+
type: Boolean,
|
|
46
|
+
attribute: "is-flush",
|
|
47
|
+
reflect: true
|
|
48
|
+
})], CDSCardBody.prototype, "isFlush", void 0);
|
|
49
|
+
CDSCardBody = __decorate([carbonElement(`cds-custom-card-body`)], CDSCardBody);
|
|
50
|
+
var card_body_default = CDSCardBody;
|
|
51
|
+
//#endregion
|
|
52
|
+
export { card_body_default as default };
|
|
53
|
+
|
|
54
|
+
//# sourceMappingURL=card-body.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-body.js","names":["styles","customElement"],"sources":["../../../src/components/card/card-body.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './card.scss?lit';\n\n/**\n * Card body — primary content area.\n *\n * @element cds-custom-card-body\n * @slot - Default slot for free-form content.\n */\n@customElement(`${prefix}-card-body`)\nclass CDSCardBody extends LitElement {\n /**\n * Remove all padding so content sits flush to the card edges.\n */\n @property({ type: Boolean, attribute: 'is-flush', reflect: true })\n isFlush = false;\n\n render() {\n const { isFlush } = this;\n const classes = classMap({\n [`${prefix}--card__body`]: true,\n [`${prefix}--card__body--flush`]: isFlush,\n });\n return html`<div class=${classes}><slot></slot></div>`;\n }\n\n static styles = styles;\n}\n\nexport default CDSCardBody;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,cAAA,MACM,oBAAoB,WAAW;;;iBAKzB;;CAEV,SAAS;EACP,MAAM,EAAE,YAAY;EAKpB,OAAO,IAAI,cAJK,SAAS;IACtB,oBAA0B;IAC1B,2BAAiC;EACpC,CAC+B,EAAE;CACnC;;gBAEgBA;;AAClB;YAbG,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,WAAA,KAAA,CAAA;0BALlEC,cAAc,eAAqB,CAAA,GAAA,WAAA;AAoBpC,IAAA,oBAAe"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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
|
+
export type CardContextValue = {
|
|
8
|
+
clickable: boolean;
|
|
9
|
+
disabled: boolean;
|
|
10
|
+
horizontal: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const cardDefaultContext: CardContextValue;
|
|
13
|
+
/**
|
|
14
|
+
* Lit context shared by cds-custom-card (provider) and
|
|
15
|
+
* cds-custom-card-footer, cds-custom-card-media (consumers).
|
|
16
|
+
*/
|
|
17
|
+
export declare const cardContext: {
|
|
18
|
+
__context__: CardContextValue;
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=card-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-context.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,gBAIhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW;;CAAsD,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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 { createContext } from "@lit/context";
|
|
9
|
+
//#region src/components/card/card-context.ts
|
|
10
|
+
/**
|
|
11
|
+
* Copyright IBM Corp. 2026
|
|
12
|
+
*
|
|
13
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
|
15
|
+
*/
|
|
16
|
+
const cardDefaultContext = {
|
|
17
|
+
clickable: false,
|
|
18
|
+
disabled: false,
|
|
19
|
+
horizontal: false
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Lit context shared by cds-custom-card (provider) and
|
|
23
|
+
* cds-custom-card-footer, cds-custom-card-media (consumers).
|
|
24
|
+
*/
|
|
25
|
+
const cardContext = createContext("cds-custom-card-context");
|
|
26
|
+
//#endregion
|
|
27
|
+
export { cardContext, cardDefaultContext };
|
|
28
|
+
|
|
29
|
+
//# sourceMappingURL=card-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-context.js","names":[],"sources":["../../../src/components/card/card-context.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { createContext } from '@lit/context';\n\nexport type CardContextValue = {\n clickable: boolean;\n disabled: boolean;\n horizontal: boolean;\n};\n\nexport const cardDefaultContext: CardContextValue = {\n clickable: false,\n disabled: false,\n horizontal: false,\n};\n\n/**\n * Lit context shared by cds-custom-card (provider) and\n * cds-custom-card-footer, cds-custom-card-media (consumers).\n */\nexport const cardContext = createContext<CardContextValue>('cds-custom-card-context');\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,qBAAuC;CAClD,WAAW;CACX,UAAU;CACV,YAAY;AACd;;;;;AAMA,MAAa,cAAc,cAAgC,kBAAkB"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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
|
+
import { LitElement, nothing } from 'lit';
|
|
8
|
+
/**
|
|
9
|
+
* Card footer — bottom content/action bar.
|
|
10
|
+
*
|
|
11
|
+
* Must not be used inside a `clickable` card. When placed inside one,
|
|
12
|
+
* this element renders nothing and logs a console.error — a clickable
|
|
13
|
+
* card renders its own built-in footer affordance automatically.
|
|
14
|
+
*
|
|
15
|
+
* Reflects `has-actions` when any `cds-custom-card-action` element is slotted,
|
|
16
|
+
* enabling CSS rule [17] to apply zero-padding / border-top layout without
|
|
17
|
+
* any cross-boundary `:has(> .cds-custom--card__action)`.
|
|
18
|
+
*
|
|
19
|
+
* @element cds-custom-card-footer
|
|
20
|
+
* @slot - Default slot for footer content or cds-custom-card-action elements.
|
|
21
|
+
*/
|
|
22
|
+
declare class CDSCardFooter extends LitElement {
|
|
23
|
+
private _cardContext;
|
|
24
|
+
/**
|
|
25
|
+
* Reflects `has-actions` attribute when at least one `cds-custom-card-action`
|
|
26
|
+
* is present in the default slot. CSS rule [17] keys off this attribute
|
|
27
|
+
* to switch the footer to its action-set layout (padding:0, border-top).
|
|
28
|
+
*/
|
|
29
|
+
private _handleDefaultSlotChange;
|
|
30
|
+
render(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
31
|
+
static styles: any;
|
|
32
|
+
}
|
|
33
|
+
export default CDSCardFooter;
|
|
34
|
+
//# sourceMappingURL=card-footer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-footer.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-footer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAYhD;;;;;;;;;;;;;GAaG;AACH,cACM,aAAc,SAAQ,UAAU;IAGpC,OAAO,CAAC,YAAY,CAAwC;IAI5D;;;;OAIG;IACH,OAAO,CAAC,wBAAwB;IAahC,MAAM;IAkBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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 "../../globals/settings.js";
|
|
9
|
+
import { carbonElement } from "../../globals/decorators/carbon-element.js";
|
|
10
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
11
|
+
import { cardContext, cardDefaultContext } from "./card-context.js";
|
|
12
|
+
import card_default from "./card.scss.js";
|
|
13
|
+
import { LitElement, html, nothing } from "lit";
|
|
14
|
+
import { state } from "lit/decorators.js";
|
|
15
|
+
import { consume } from "@lit/context";
|
|
16
|
+
//#region src/components/card/card-footer.ts
|
|
17
|
+
/**
|
|
18
|
+
* Copyright IBM Corp. 2026
|
|
19
|
+
*
|
|
20
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
21
|
+
* LICENSE file in the root directory of this source tree.
|
|
22
|
+
*/
|
|
23
|
+
/**
|
|
24
|
+
* Card footer — bottom content/action bar.
|
|
25
|
+
*
|
|
26
|
+
* Must not be used inside a `clickable` card. When placed inside one,
|
|
27
|
+
* this element renders nothing and logs a console.error — a clickable
|
|
28
|
+
* card renders its own built-in footer affordance automatically.
|
|
29
|
+
*
|
|
30
|
+
* Reflects `has-actions` when any `cds-custom-card-action` element is slotted,
|
|
31
|
+
* enabling CSS rule [17] to apply zero-padding / border-top layout without
|
|
32
|
+
* any cross-boundary `:has(> .cds-custom--card__action)`.
|
|
33
|
+
*
|
|
34
|
+
* @element cds-custom-card-footer
|
|
35
|
+
* @slot - Default slot for footer content or cds-custom-card-action elements.
|
|
36
|
+
*/
|
|
37
|
+
let CDSCardFooter = class CDSCardFooter extends LitElement {
|
|
38
|
+
constructor(..._args) {
|
|
39
|
+
super(..._args);
|
|
40
|
+
this._cardContext = cardDefaultContext;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Reflects `has-actions` attribute when at least one `cds-custom-card-action`
|
|
44
|
+
* is present in the default slot. CSS rule [17] keys off this attribute
|
|
45
|
+
* to switch the footer to its action-set layout (padding:0, border-top).
|
|
46
|
+
*/
|
|
47
|
+
_handleDefaultSlotChange({ target }) {
|
|
48
|
+
if (target.assignedElements({ flatten: true }).some((el) => el.matches(`cds-custom-card-action`))) this.setAttribute("has-actions", "");
|
|
49
|
+
else this.removeAttribute("has-actions");
|
|
50
|
+
}
|
|
51
|
+
render() {
|
|
52
|
+
if (this._cardContext.clickable) {
|
|
53
|
+
console.error("[cds-custom-card-footer] Cannot be used inside a clickable card. A clickable card renders its own footer affordance automatically. Use the `footer-icon` slot on `cds-custom-card` to customise the icon.");
|
|
54
|
+
return nothing;
|
|
55
|
+
}
|
|
56
|
+
return html`
|
|
57
|
+
<div class="${"cds-custom"}--card__footer">
|
|
58
|
+
<slot @slotchange=${this._handleDefaultSlotChange}></slot>
|
|
59
|
+
</div>
|
|
60
|
+
`;
|
|
61
|
+
}
|
|
62
|
+
static {
|
|
63
|
+
this.styles = card_default;
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
__decorate([consume({
|
|
67
|
+
context: cardContext,
|
|
68
|
+
subscribe: true
|
|
69
|
+
}), state()], CDSCardFooter.prototype, "_cardContext", void 0);
|
|
70
|
+
CDSCardFooter = __decorate([carbonElement(`cds-custom-card-footer`)], CDSCardFooter);
|
|
71
|
+
var card_footer_default = CDSCardFooter;
|
|
72
|
+
//#endregion
|
|
73
|
+
export { card_footer_default as default };
|
|
74
|
+
|
|
75
|
+
//# sourceMappingURL=card-footer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-footer.js","names":["slot","styles","customElement"],"sources":["../../../src/components/card/card-footer.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n cardContext,\n cardDefaultContext,\n type CardContextValue,\n} from './card-context';\nimport styles from './card.scss?lit';\n\n/**\n * Card footer — bottom content/action bar.\n *\n * Must not be used inside a `clickable` card. When placed inside one,\n * this element renders nothing and logs a console.error — a clickable\n * card renders its own built-in footer affordance automatically.\n *\n * Reflects `has-actions` when any `cds-custom-card-action` element is slotted,\n * enabling CSS rule [17] to apply zero-padding / border-top layout without\n * any cross-boundary `:has(> .cds-custom--card__action)`.\n *\n * @element cds-custom-card-footer\n * @slot - Default slot for footer content or cds-custom-card-action elements.\n */\n@customElement(`${prefix}-card-footer`)\nclass CDSCardFooter extends LitElement {\n @consume({ context: cardContext, subscribe: true })\n @state()\n private _cardContext: CardContextValue = cardDefaultContext;\n\n // ─── Slot handlers ──────────────────────────────────────────────────────\n\n /**\n * Reflects `has-actions` attribute when at least one `cds-custom-card-action`\n * is present in the default slot. CSS rule [17] keys off this attribute\n * to switch the footer to its action-set layout (padding:0, border-top).\n */\n private _handleDefaultSlotChange({ target }: Event) {\n const slot = target as HTMLSlotElement;\n const hasActions = slot\n .assignedElements({ flatten: true })\n .some((el) => el.matches(`${prefix}-card-action`));\n\n if (hasActions) {\n this.setAttribute('has-actions', '');\n } else {\n this.removeAttribute('has-actions');\n }\n }\n\n render() {\n if (this._cardContext.clickable) {\n // eslint-disable-next-line no-console\n console.error(\n `[cds-custom-card-footer] Cannot be used inside a clickable card. ` +\n `A clickable card renders its own footer affordance automatically. ` +\n `Use the \\`footer-icon\\` slot on \\`cds-custom-card\\` to customise the icon.`\n );\n return nothing;\n }\n\n return html`\n <div class=\"${prefix}--card__footer\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n </div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSCardFooter;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAA,gBAAA,MACM,sBAAsB,WAAW;;;sBAGI;;;;;;;CASzC,yBAAiC,EAAE,UAAiB;EAMlD,IAJmBA,OAChB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,MAAM,OAAO,GAAG,QAAQ,iBAAuB,CAErC,GACX,KAAK,aAAa,eAAe,EAAE;OAEnC,KAAK,gBAAgB,aAAa;CAEtC;CAEA,SAAS;EACP,IAAI,KAAK,aAAa,WAAW;GAE/B,QAAQ,MACN,6LAGF;GACA,OAAO;EACT;EAEA,OAAO,IAAI;0BACY;4BACC,KAAK,yBAAyB;;;CAGxD;;gBAEgBC;;AAClB;YA3CG,QAAQ;CAAE,SAAS;CAAa,WAAW;AAAK,CAAC,GACjD,MAAM,CAAA,GAAA,cAAA,WAAA,gBAAA,KAAA,CAAA;4BAHRC,cAAc,iBAAuB,CAAA,GAAA,aAAA;AA+CtC,IAAA,sBAAe"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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
|
+
import { LitElement } from 'lit';
|
|
8
|
+
/**
|
|
9
|
+
* Card header media — full-width icon/image slot rendered above the title row.
|
|
10
|
+
*
|
|
11
|
+
* @element cds-custom-card-header-media
|
|
12
|
+
* @slot - Default slot for an icon, image, or pictogram.
|
|
13
|
+
*/
|
|
14
|
+
declare class CDSCardHeaderMedia extends LitElement {
|
|
15
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
16
|
+
static styles: any;
|
|
17
|
+
}
|
|
18
|
+
export default CDSCardHeaderMedia;
|
|
19
|
+
//# sourceMappingURL=card-header-media.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-header-media.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-header-media.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;;GAKG;AACH,cACM,kBAAmB,SAAQ,UAAU;IACzC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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 "../../globals/settings.js";
|
|
9
|
+
import { carbonElement } from "../../globals/decorators/carbon-element.js";
|
|
10
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
11
|
+
import card_default from "./card.scss.js";
|
|
12
|
+
import { LitElement, html } from "lit";
|
|
13
|
+
//#region src/components/card/card-header-media.ts
|
|
14
|
+
/**
|
|
15
|
+
* Copyright IBM Corp. 2026
|
|
16
|
+
*
|
|
17
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
18
|
+
* LICENSE file in the root directory of this source tree.
|
|
19
|
+
*/
|
|
20
|
+
/**
|
|
21
|
+
* Card header media — full-width icon/image slot rendered above the title row.
|
|
22
|
+
*
|
|
23
|
+
* @element cds-custom-card-header-media
|
|
24
|
+
* @slot - Default slot for an icon, image, or pictogram.
|
|
25
|
+
*/
|
|
26
|
+
let CDSCardHeaderMedia = class CDSCardHeaderMedia extends LitElement {
|
|
27
|
+
render() {
|
|
28
|
+
return html`<div class="${"cds-custom"}--card__header-media"><slot></slot></div>`;
|
|
29
|
+
}
|
|
30
|
+
static {
|
|
31
|
+
this.styles = card_default;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
CDSCardHeaderMedia = __decorate([carbonElement(`cds-custom-card-header-media`)], CDSCardHeaderMedia);
|
|
35
|
+
var card_header_media_default = CDSCardHeaderMedia;
|
|
36
|
+
//#endregion
|
|
37
|
+
export { card_header_media_default as default };
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=card-header-media.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-header-media.js","names":["styles","customElement"],"sources":["../../../src/components/card/card-header-media.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './card.scss?lit';\n\n/**\n * Card header media — full-width icon/image slot rendered above the title row.\n *\n * @element cds-custom-card-header-media\n * @slot - Default slot for an icon, image, or pictogram.\n */\n@customElement(`${prefix}-card-header-media`)\nclass CDSCardHeaderMedia extends LitElement {\n render() {\n return html`<div class=\"${prefix}--card__header-media\"><slot></slot></div>`;\n }\n\n static styles = styles;\n}\n\nexport default CDSCardHeaderMedia;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,qBAAA,MACM,2BAA2B,WAAW;CAC1C,SAAS;EACP,OAAO,IAAI,eAAA,MAAsB;CACnC;;gBAEgBA;;AAClB;iCAPCC,cAAc,uBAA6B,CAAA,GAAA,kBAAA;AAS5C,IAAA,4BAAe"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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
|
+
import { LitElement } from 'lit';
|
|
8
|
+
/**
|
|
9
|
+
* Card header — header section of the card.
|
|
10
|
+
*
|
|
11
|
+
* @element cds-custom-card-header
|
|
12
|
+
* @slot - Default slot for cds-custom-card-title, cds-custom-card-title-media, cds-custom-card-actions.
|
|
13
|
+
* @slot decorator - Slot for cds-custom-ai-label or other decorator element.
|
|
14
|
+
*/
|
|
15
|
+
declare class CDSCardHeader extends LitElement {
|
|
16
|
+
private _cardContext;
|
|
17
|
+
private _handleDefaultSlotChange;
|
|
18
|
+
private _handleDecoratorInteraction;
|
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
20
|
+
static styles: any;
|
|
21
|
+
}
|
|
22
|
+
export default CDSCardHeader;
|
|
23
|
+
//# sourceMappingURL=card-header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["../../../src/components/card/card-header.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC;;;;;;GAMG;AACH,cACM,aAAc,SAAQ,UAAU;IAGpC,OAAO,CAAC,YAAY,CAAwC;IAE5D,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,2BAA2B;IAInC,MAAM;IAiBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
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 "../../globals/settings.js";
|
|
9
|
+
import { carbonElement } from "../../globals/decorators/carbon-element.js";
|
|
10
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
11
|
+
import { cardContext, cardDefaultContext } from "./card-context.js";
|
|
12
|
+
import card_default from "./card.scss.js";
|
|
13
|
+
import { LitElement, html } from "lit";
|
|
14
|
+
import { state } from "lit/decorators.js";
|
|
15
|
+
import { consume } from "@lit/context";
|
|
16
|
+
//#region src/components/card/card-header.ts
|
|
17
|
+
/**
|
|
18
|
+
* Copyright IBM Corp. 2026
|
|
19
|
+
*
|
|
20
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
21
|
+
* LICENSE file in the root directory of this source tree.
|
|
22
|
+
*/
|
|
23
|
+
/**
|
|
24
|
+
* Card header — header section of the card.
|
|
25
|
+
*
|
|
26
|
+
* @element cds-custom-card-header
|
|
27
|
+
* @slot - Default slot for cds-custom-card-title, cds-custom-card-title-media, cds-custom-card-actions.
|
|
28
|
+
* @slot decorator - Slot for cds-custom-ai-label or other decorator element.
|
|
29
|
+
*/
|
|
30
|
+
let CDSCardHeader = class CDSCardHeader extends LitElement {
|
|
31
|
+
constructor(..._args) {
|
|
32
|
+
super(..._args);
|
|
33
|
+
this._cardContext = cardDefaultContext;
|
|
34
|
+
}
|
|
35
|
+
_handleDefaultSlotChange({ target }) {
|
|
36
|
+
if (target.assignedElements({ flatten: true }).some((el) => el.matches(`cds-custom-card-title-media`))) this.setAttribute("has-title-media", "");
|
|
37
|
+
else this.removeAttribute("has-title-media");
|
|
38
|
+
}
|
|
39
|
+
_handleDecoratorInteraction(e) {
|
|
40
|
+
e.stopPropagation();
|
|
41
|
+
}
|
|
42
|
+
render() {
|
|
43
|
+
this._cardContext;
|
|
44
|
+
return html`
|
|
45
|
+
<div class="${"cds-custom"}--card__header">
|
|
46
|
+
<slot @slotchange=${this._handleDefaultSlotChange}></slot>
|
|
47
|
+
<div
|
|
48
|
+
class="${"cds-custom"}--card__decorator"
|
|
49
|
+
role="presentation"
|
|
50
|
+
@click=${this._handleDecoratorInteraction}
|
|
51
|
+
@keydown=${this._handleDecoratorInteraction}>
|
|
52
|
+
<slot name="decorator"></slot>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
static {
|
|
58
|
+
this.styles = card_default;
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
__decorate([consume({
|
|
62
|
+
context: cardContext,
|
|
63
|
+
subscribe: true
|
|
64
|
+
}), state()], CDSCardHeader.prototype, "_cardContext", void 0);
|
|
65
|
+
CDSCardHeader = __decorate([carbonElement(`cds-custom-card-header`)], CDSCardHeader);
|
|
66
|
+
var card_header_default = CDSCardHeader;
|
|
67
|
+
//#endregion
|
|
68
|
+
export { card_header_default as default };
|
|
69
|
+
|
|
70
|
+
//# sourceMappingURL=card-header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-header.js","names":["slot","styles","customElement"],"sources":["../../../src/components/card/card-header.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport {\n cardContext,\n cardDefaultContext,\n type CardContextValue,\n} from './card-context';\nimport styles from './card.scss?lit';\n\n/**\n * Card header — header section of the card.\n *\n * @element cds-custom-card-header\n * @slot - Default slot for cds-custom-card-title, cds-custom-card-title-media, cds-custom-card-actions.\n * @slot decorator - Slot for cds-custom-ai-label or other decorator element.\n */\n@customElement(`${prefix}-card-header`)\nclass CDSCardHeader extends LitElement {\n @consume({ context: cardContext, subscribe: true })\n @state()\n private _cardContext: CardContextValue = cardDefaultContext;\n\n private _handleDefaultSlotChange({ target }: Event) {\n const slot = target as HTMLSlotElement;\n const hasTitleMedia = slot\n .assignedElements({ flatten: true })\n .some((el) => el.matches(`${prefix}-card-title-media`));\n\n if (hasTitleMedia) {\n this.setAttribute('has-title-media', '');\n } else {\n this.removeAttribute('has-title-media');\n }\n }\n\n private _handleDecoratorInteraction(e: Event) {\n e.stopPropagation();\n }\n\n render() {\n void this._cardContext;\n\n return html`\n <div class=\"${prefix}--card__header\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n <div\n class=\"${prefix}--card__decorator\"\n role=\"presentation\"\n @click=${this._handleDecoratorInteraction}\n @keydown=${this._handleDecoratorInteraction}>\n <slot name=\"decorator\"></slot>\n </div>\n </div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSCardHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAA,gBAAA,MACM,sBAAsB,WAAW;;;sBAGI;;CAEzC,yBAAiC,EAAE,UAAiB;EAMlD,IAJsBA,OACnB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,MAAM,OAAO,GAAG,QAAQ,sBAA4B,CAEvC,GACd,KAAK,aAAa,mBAAmB,EAAE;OAEvC,KAAK,gBAAgB,iBAAiB;CAE1C;CAEA,4BAAoC,GAAU;EAC5C,EAAE,gBAAgB;CACpB;CAEA,SAAS;EACP,KAAU;EAEV,OAAO,IAAI;0BACY;4BACC,KAAK,yBAAyB;;yBAEhC;;mBAEP,KAAK,4BAA4B;qBAC/B,KAAK,4BAA4B;;;;;CAKpD;;gBAEgBC;;AAClB;YAvCG,QAAQ;CAAE,SAAS;CAAa,WAAW;AAAK,CAAC,GACjD,MAAM,CAAA,GAAA,cAAA,WAAA,gBAAA,KAAA,CAAA;4BAHRC,cAAc,iBAAuB,CAAA,GAAA,aAAA;AA2CtC,IAAA,sBAAe"}
|