@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
144 lines (140 loc) • 4.46 kB
JavaScript
/**
* Copyright IBM Corp. 2024
*
* 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 { __decorate } from 'tslib';
import { LitElement, html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { prefix } from '../../globals/settings.js';
import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
import styles from './options-tile.scss.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import ChevronDown20 from '@carbon/web-components/es/icons/chevron--down/20';
/**
* @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 = `${prefix}--options-tile`;
const blockEvent = `${prefix}-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() {
super(...arguments);
/**
* If `true` the body of the component is shown
*/
this.open = false;
/**
* Determines the size of the header
*/
this.size = 'lg';
/**
* Text for the title
*/
this.title = '';
/**
* ID for the title
*/
this.titleId = '';
}
static get eventOpen() {
return `${blockEvent}-open`;
}
static get eventClose() {
return `${blockEvent}-close`;
}
_toggle() {
this.open ? this._handleClose() : this._handleOpen();
}
_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));
}
getBody() {
const { open } = this;
if (open) {
return html ` <div class="${blockClass}__body">
<div class="${blockClass}__body-content"><slot name="body"></slot></div>
</div>`;
}
return nothing;
}
render() {
const { open, size, title, titleId } = this;
const classes = classMap({
[`${blockClass}`]: true,
[`${blockClass}--xl`]: size === 'xl',
[`${blockClass}--open`]: open,
});
return html `
<div part="options-tile" class="${classes}">
<div class="${blockClass}__header">
<div class="${blockClass}__header-left">
<div class="${blockClass}__chevron" =${this._toggle}>
${ChevronDown20({ slot: 'icon' })}
</div>
<div class="${blockClass}__title-block">
<p class="${blockClass}__title" id="${titleId}">${title}</p>
<div class="${blockClass}__summary">
<slot name="summary"></slot>
</div>
</div>
</div>
<div class="${blockClass}__header-right">
<slot name="toggle"></slot>
</div>
</div>
${this.getBody()}
</div>
`;
}
};
CDSOptionsTile.styles = styles;
__decorate([
property({ type: Boolean, reflect: true })
], CDSOptionsTile.prototype, "open", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSOptionsTile.prototype, "size", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSOptionsTile.prototype, "title", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSOptionsTile.prototype, "titleId", void 0);
CDSOptionsTile = __decorate([
carbonElement(`${prefix}-options-tile`)
], CDSOptionsTile);
var CDSOptionsTile$1 = CDSOptionsTile;
export { blockClass, CDSOptionsTile$1 as default };
//# sourceMappingURL=options-tile.js.map