@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
214 lines (212 loc) • 7.14 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 options_tile_default$1 from "./options-tile.scss.js";
import { classMap } from "lit/directives/class-map.js";
import { LitElement, html, nothing } from "lit";
import { property, state } 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 { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
import '@carbon/web-components/es-custom/components/layer/index.js';
import ChevronDown16 from "@carbon/icons/es/chevron--down/16";
import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16";
import Locked16 from "@carbon/icons/es/locked/16";
//#region src/components/options-tile/options-tile.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--options-tile`;
const blockEvent = `c4p-options-tile`;
/**
* OptionsTile.
*
* @element c4p-options-tile
* @csspart options-tile The options tile
* @fires c4p-options-tile-open Custom event fired when tile is opened
* @fires c4p-options-tile-close Custom event fired when tile is closed
* */
let CDSOptionsTile = class CDSOptionsTile extends HostListenerMixin(LitElement) {
constructor(..._args) {
super(..._args);
this.defaultOpen = false;
this.size = "lg";
this.titleId = "";
this.titleText = "";
this.locked = false;
this.lockedText = "";
this.warn = false;
this.warnText = "";
this._open = false;
this._hasToggle = false;
this._hasBody = false;
}
static get eventOpen() {
return `${blockEvent}-open`;
}
static get eventClose() {
return `${blockEvent}-close`;
}
_handleToggleSlotChange(e) {
const toggleElements = e.target?.assignedElements();
this._hasToggle = toggleElements && toggleElements.length > 0;
}
_handleBodySlotChange(e) {
const bodyElements = e.target?.assignedElements();
this._hasBody = bodyElements && bodyElements.length > 0;
}
_toggle(evt) {
const { newState } = evt;
this._open = newState === "open";
this._open ? this._handleOpen() : this._handleClose();
}
_handleOpen() {
const init = {
bubbles: true,
composed: true,
detail: { open: this._open }
};
this.dispatchEvent(new CustomEvent(this.constructor.eventOpen, init));
}
_handleClose() {
const init = {
bubbles: true,
composed: true,
detail: { open: this._open }
};
this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
}
render() {
const { _open, _hasToggle, _hasBody, defaultOpen, size, titleId, titleText, locked, lockedText, warn, warnText } = this;
const classes = classMap({
[`${blockClass}`]: true,
[`${blockClass}--xl`]: size === "xl",
[`${blockClass}--open`]: _open
});
const headerClasses = classMap({
[`${blockClass}__header`]: true,
[`${blockClass}__header--has-toggle`]: _hasToggle
});
const summaryClasses = classMap({
[`${blockClass}__summary`]: true,
[`${blockClass}__summary--warn`]: !!warn,
[`${blockClass}__summary--locked`]: !!locked
});
const renderTitle = () => html`
<div class="${blockClass}__title-block">
<p class="${blockClass}__title" id="${titleId}">${titleText}</p>
<div class="${summaryClasses}">
${locked && lockedText ? html`
${iconLoader(Locked16, { class: `${blockClass}__summary-icon` })}
<span class="${blockClass}__summary-text">${lockedText}</span>
` : warn && warnText ? html`
${iconLoader(WarningAltFilled16, { class: `${blockClass}__summary-icon` })}
<span class="${blockClass}__summary-text">${warnText}</span>
` : html`<slot name="summary"></slot>`}
</div>
</div>
`;
return _hasBody ? html`
<details
@toggle=${this._toggle}
class="${classes}"
part="options-tile"
open=${defaultOpen || nothing}
>
<summary class="${headerClasses}">
<div class="${blockClass}__header-right">
<slot
name="toggle"
@slotchange=${this._handleToggleSlotChange}
></slot>
</div>
<div class="${blockClass}__header-left">
${iconLoader(ChevronDown16, {
slot: "icon",
class: `${blockClass}__chevron`
})}
${renderTitle()}
</div>
</summary>
<div class="${blockClass}__body">
<cds-custom-layer level="1">
<slot
name="body"
@slotchange=${this._handleBodySlotChange}
></slot>
</cds-custom-layer>
</div>
</details>
` : html`
<div class="${classes}">
<div class="${blockClass}__static-content">
<slot
name="toggle"
@slotchange=${this._handleToggleSlotChange}
style="display: none;"
></slot>
<slot
name="body"
@slotchange=${this._handleBodySlotChange}
style="display: none;"
></slot>
${renderTitle()}
</div>
</div>
`;
}
static {
this.styles = options_tile_default$1;
}
};
__decorate([property({
type: Boolean,
reflect: true
})], CDSOptionsTile.prototype, "defaultOpen", void 0);
__decorate([property({
type: String,
reflect: true
})], CDSOptionsTile.prototype, "size", void 0);
__decorate([property({
type: String,
reflect: true
})], CDSOptionsTile.prototype, "titleId", void 0);
__decorate([property({
type: String,
reflect: true
})], CDSOptionsTile.prototype, "titleText", void 0);
__decorate([property({
type: Boolean,
reflect: true
})], CDSOptionsTile.prototype, "locked", void 0);
__decorate([property({
type: String,
reflect: true
})], CDSOptionsTile.prototype, "lockedText", void 0);
__decorate([property({
type: Boolean,
reflect: true
})], CDSOptionsTile.prototype, "warn", void 0);
__decorate([property({
type: String,
reflect: true
})], CDSOptionsTile.prototype, "warnText", void 0);
__decorate([state()], CDSOptionsTile.prototype, "_open", void 0);
__decorate([state()], CDSOptionsTile.prototype, "_hasToggle", void 0);
__decorate([state()], CDSOptionsTile.prototype, "_hasBody", void 0);
CDSOptionsTile = __decorate([carbonElement(`c4p-options-tile`)], CDSOptionsTile);
var options_tile_default = CDSOptionsTile;
//#endregion
export { blockClass, options_tile_default as default };
//# sourceMappingURL=options-tile.js.map