@carbon/ibm-products-web-components/es/components/options-tile/options-tile.js

Carbon for IBM Products Web Components

/**
 * 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, nothing, html } from 'lit';
import { property, state } 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';
import '@carbon/web-components/es/components/button/index.js';
import '@carbon/web-components/es/components/layer/index.js';

/**
 * @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);
        /**
         * Determines if the tile is open by default
         */
        this.defaultOpen = false;
        /**
         * Determines the size of the header
         */
        this.size = 'lg';
        /**
         * ID for the title
         */
        this.titleId = '';
        /**
         * Text for the title
         */
        this.titleText = '';
        /**
         * Using the native toggle event handler in details can cause an infinite loop
         * when setting the native open attribute. To combat this, the open state is kept
         * here and only referenced internally.
         */
        this._open = false;
    }
    static get eventOpen() {
        return `${blockEvent}-open`;
    }
    static get eventClose() {
        return `${blockEvent}-close`;
    }
    _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, defaultOpen, size, titleId, titleText } = this;
        const classes = classMap({
            [`${blockClass}`]: true,
            [`${blockClass}--xl`]: size === 'xl',
            [`${blockClass}--open`]: _open,
        });
        return html `
      <details
        @toggle=${this._toggle}
        class="${classes}"
        part="options-tile"
        open=${defaultOpen || nothing}
      >
        <summary class="${blockClass}__header">
          <div class="${blockClass}__header-left">
            ${ChevronDown20({
            slot: 'icon',
            class: `${blockClass}__chevron`,
        })}
            <div class="${blockClass}__title-block">
              <p class="${blockClass}__title" id="${titleId}">${titleText}</p>
              <div class="${blockClass}__summary">
                <slot name="summary"></slot>
              </div>
            </div>
          </div>
          <div class="${blockClass}__header-right">
            <slot name="toggle"></slot>
          </div>
        </summary>
        <div class="${blockClass}__body">
          <cds-layer level="1">
            <slot name="body"></slot>
          </cds-layer>
        </div>
      </details>
    `;
    }
};
CDSOptionsTile.styles = styles;
__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([
    state()
], CDSOptionsTile.prototype, "_open", void 0);
CDSOptionsTile = __decorate([
    carbonElement(`${prefix}-options-tile`)
], CDSOptionsTile);
var CDSOptionsTile$1 = CDSOptionsTile;

export { blockClass, CDSOptionsTile$1 as default };
//# sourceMappingURL=options-tile.js.map