@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
149 lines (147 loc) • 4.47 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 guide_banner_default$1 from "./guide-banner.scss.js";
import { classMap } from "lit/directives/class-map.js";
import { LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import '@carbon/web-components/es-custom/components/button/index.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 Close from "@carbon/icons/es/close/16";
import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
import Idea20 from "@carbon/icons/es/idea/20";
//#region src/components/guide-banner/guide-banner.ts
/**
* @license
*
* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const blockClass = `c4p--guidebanner`;
const blockEvent = `c4p-guidebanner`;
/**
* GuideBanner.
*
* @element c4p-guide-banner
* @csspart guide-banner
* @fires c4p-guide-banner-toggle Custom event fired when banner is opened
* @fires c4p-guide-banner-close Custom event fired when banner is closed
* */
let CDSGuideBanner = class CDSGuideBanner extends HostListenerMixin(LitElement) {
constructor(..._args) {
super(..._args);
this.collapseText = "";
this.expandText = "";
this.open = false;
this.titleText = "";
}
static get eventToggle() {
return `${blockEvent}-toggle`;
}
static get eventOnClose() {
return `${blockEvent}-close`;
}
_handleClose() {
this.dispatchEvent(new CustomEvent(this.constructor.eventOnClose, {
bubbles: true,
composed: true,
detail: {}
}));
}
_handleToggle() {
this.open = !this.open;
const init = {
bubbles: true,
composed: true,
detail: { open: this.open }
};
this.dispatchEvent(new CustomEvent(this.constructor.eventToggle, init));
}
_getTitle() {
if (this.titleText) return html`<div class="${blockClass}__title">${this.titleText}</div>`;
return nothing;
}
_getButton() {
const buttonText = this.open ? this.collapseText : this.expandText;
return html`<cds-custom-button
kind="ghost"
size="md"
class="${blockClass}__toggle-button"
@click=${this._handleToggle}
>
${buttonText}
</cds-custom-button>`;
}
render() {
return html`
<div class="${classMap({
[`${blockClass}`]: true,
[`${blockClass}__collapsible-collapsed`]: !this.open
})}">
<div class="${blockClass}__header">
<div class="${blockClass}__icon-idea">
<slot name="icon">
${iconLoader(Idea20, { slot: "icon" })}
</slot>
</div>
${this._getTitle()}
<slot name="header"></slot>
<cds-custom-button
align="bottom-end"
class="${blockClass}__close-button"
kind="ghost"
size="md"
@click="${this._handleClose}"
>
${iconLoader(Close, { slot: "icon" })}
</cds-custom-button>
</div>
<details ?open=${this.open}>
<slot name="body"></slot>
<summary
tabindex="-1"
@click=${(evt) => {
evt.preventDefault();
}}
>
<div class="${blockClass}__navigation">
<slot name="footer">${this._getButton()}</slot>
</div>
</summary>
</details>
</div>
`;
}
static {
this.styles = guide_banner_default$1;
}
};
__decorate([property({
type: String,
reflect: true
})], CDSGuideBanner.prototype, "collapseText", void 0);
__decorate([property({
type: String,
reflect: true
})], CDSGuideBanner.prototype, "expandText", void 0);
__decorate([property({
type: Boolean,
reflect: true
})], CDSGuideBanner.prototype, "open", void 0);
__decorate([property({
type: String,
reflect: true
})], CDSGuideBanner.prototype, "titleText", void 0);
CDSGuideBanner = __decorate([carbonElement(`c4p-guide-banner`)], CDSGuideBanner);
var guide_banner_default = CDSGuideBanner;
//#endregion
export { blockClass, guide_banner_default as default };
//# sourceMappingURL=guide-banner.js.map