@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
94 lines (92 loc) • 3.6 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import "../../globals/settings.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import "../action-set/index.js";
import tearsheet_default from "./tearsheet.scss.js";
import { tearsheetSignal } from "./tearsheet-signal.js";
import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
import { LitElement, html } from "lit";
import { property, query } from "lit/decorators.js";
import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import { classMap } from "lit-html/directives/class-map.js";
import { SignalWatcher } from "@lit-labs/signals";
//#region src/components/tearsheet-preview/tearsheet-footer.ts
/**
* @license
*
* Copyright IBM Corp. 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const blockClass = `c4p--tearsheet__next`;
/**
* Tearsheet Footer component - Contains action buttons at the bottom of the tearsheet.
*
* @element c4p-tearsheet-footer
* @slot - Default slot for custom footer content (rendered before actions)
*/
let CDSTearsheetFooter = class CDSTearsheetFooter extends SignalWatcher(HostListenerMixin(LitElement)) {
constructor(..._args) {
super(..._args);
this.slot = "footer";
this.actions = [];
this._actionSetRegistered = false;
}
firstUpdated(_changedProperties) {
const uniqueId = tearsheetSignal.get().uniqueId;
if (uniqueId) registerFocusableContainers(this, uniqueId);
}
updated(_changedProperties) {
const uniqueId = tearsheetSignal.get().uniqueId;
if (this.actionSetElement?.shadowRoot && uniqueId && !this._actionSetRegistered) {
registerFocusableContainers(this.actionSetElement.shadowRoot, uniqueId);
this._actionSetRegistered = true;
}
}
/**
* Renders the action-set component with actions
*/
_renderActions() {
if (!this.actions || this.actions.length === 0) return null;
const variant = tearsheetSignal.get().variant;
return html`
<c4p-action-set
size="${variant === "wide" ? "2xl" : "lg"}"
button-size="${this.buttonSize || (variant === "wide" ? "2xl" : "xl")}"
.actions="${this.actions}"
?disable-stacking="${true}"
>
</c4p-action-set>
`;
}
render() {
const actionCount = this.actions?.length || 0;
return html`<footer class="${classMap({
[`${blockClass}__footer`]: true,
[`${blockClass}__footer--three-actions`]: actionCount === 3,
[`${blockClass}__footer--many-actions`]: actionCount > 3
})}">
<slot></slot>
${this._renderActions()}
</footer>`;
}
static {
this.styles = tearsheet_default;
}
};
__decorate([property({ reflect: true })], CDSTearsheetFooter.prototype, "slot", void 0);
__decorate([property({ type: Array })], CDSTearsheetFooter.prototype, "actions", void 0);
__decorate([property({ attribute: "button-size" })], CDSTearsheetFooter.prototype, "buttonSize", void 0);
__decorate([query("c4p-action-set")], CDSTearsheetFooter.prototype, "actionSetElement", void 0);
CDSTearsheetFooter = __decorate([carbonElement(`c4p-tearsheet-footer`)], CDSTearsheetFooter);
var tearsheet_footer_default = CDSTearsheetFooter;
//#endregion
export { tearsheet_footer_default as default };
//# sourceMappingURL=tearsheet-footer.js.map