'use client';
import { __decorate } from 'tslib';
import { html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import SgdsElement from '../../base/sgds-element.js';
import css_248z from './system-banner-item.js';
import { HasSlotController } from '../../utils/slot.js';
import { NoClampActionContext, SystemBannerChildCountContext } from './system-banner-context.js';
import { consume } from '@lit/context';

/**
 * @slot icon - The slot to pass in an icon element.
 * @slot action - The slot to pass in an action element such as a button or link
 * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
 *
 * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
 */
class SgdsSystemBannerItem extends SgdsElement {
    constructor() {
        super(...arguments);
        /** Used only for SSR to indicate the presence of the `action` slot. */
        this.hasActionSlot = false;
        /** Disables the action link that appears when text content is clamped */
        this.noClampAction = false;
        this.clamped = false;
        this.siblingsCount = 0;
        this.hasSlotController = new HasSlotController(this, "action");
    }
    async firstUpdated(_changedProperties) {
        super.firstUpdated(_changedProperties);
        await this.updateComplete;
        this._clampCheck();
        // Watch resizing for dynamic layout changes
        this._resizeObserver = new ResizeObserver(() => this._clampCheck());
        this._resizeObserver.observe(this.shadowRoot.querySelector(".message"));
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        if (this._resizeObserver)
            this._resizeObserver.disconnect();
    }
    updated() {
        if (!this.hasActionSlot)
            this.hasActionSlot = this.hasSlotController.test("action");
    }
    _clampCheck() {
        const textEl = this.shadowRoot.querySelector(".message");
        requestAnimationFrame(() => {
            this.clamped = textEl.scrollHeight > textEl.clientHeight;
        });
    }
    _handleShowMoreClick() {
        this.emit("sgds-show-more");
    }
    render() {
        return html `
      <div class="banner-item">
        <slot name="icon"></slot>
        <div class="banner-item__message_and__action">
          <div class="clamped-container">
            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
              <slot></slot>
            </div>
            ${this.clamped && !this.noClampAction
            ? html `<span class="show-more"
                  >...<a class="show-more__link" @click="${this._handleShowMoreClick}">show more</a></span
                >`
            : nothing}
          </div>
          ${this.hasActionSlot || this.siblingsCount > 1
            ? html `
                <div class="action">
                  <slot name="action"></slot>
                </div>
              `
            : nothing}
        </div>
      </div>
    `;
    }
}
SgdsSystemBannerItem.styles = [...SgdsElement.styles, css_248z];
__decorate([
    property({ type: Boolean })
], SgdsSystemBannerItem.prototype, "hasActionSlot", void 0);
__decorate([
    consume({ context: NoClampActionContext, subscribe: true })
    /** When true, message text will be truncated with ellipsis only */
    ,
    property({ type: Boolean })
], SgdsSystemBannerItem.prototype, "noClampAction", void 0);
__decorate([
    state()
], SgdsSystemBannerItem.prototype, "clamped", void 0);
__decorate([
    consume({ context: SystemBannerChildCountContext, subscribe: true }),
    state()
], SgdsSystemBannerItem.prototype, "siblingsCount", void 0);

export { SgdsSystemBannerItem, SgdsSystemBannerItem as default };
//# sourceMappingURL=sgds-system-banner-item.js.map
