'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var lit = require('lit');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var systemBannerItem = require('./system-banner-item.cjs.js');
var slot = require('../../utils/slot.cjs.js');
var systemBannerContext = require('./system-banner-context.cjs.js');
var context = require('@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["default"] {
    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 slot.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 lit.html `
      <div class="banner-item">
        <slot name="icon"></slot>
        <div class="banner-item__message_and__action">
          <div class="clamped-container">
            <div class=${classMap_js.classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
              <slot></slot>
            </div>
            ${this.clamped && !this.noClampAction
            ? lit.html `<span class="show-more"
                  >...<a class="show-more__link" @click="${this._handleShowMoreClick}">show more</a></span
                >`
            : lit.nothing}
          </div>
          ${this.hasActionSlot || this.siblingsCount > 1
            ? lit.html `
                <div class="action">
                  <slot name="action"></slot>
                </div>
              `
            : lit.nothing}
        </div>
      </div>
    `;
    }
}
SgdsSystemBannerItem.styles = [...sgdsElement["default"].styles, systemBannerItem["default"]];
tslib.__decorate([
    decorators_js.property({ type: Boolean })
], SgdsSystemBannerItem.prototype, "hasActionSlot", void 0);
tslib.__decorate([
    context.consume({ context: systemBannerContext.NoClampActionContext, subscribe: true })
    /** When true, message text will be truncated with ellipsis only */
    ,
    decorators_js.property({ type: Boolean })
], SgdsSystemBannerItem.prototype, "noClampAction", void 0);
tslib.__decorate([
    decorators_js.state()
], SgdsSystemBannerItem.prototype, "clamped", void 0);
tslib.__decorate([
    context.consume({ context: systemBannerContext.SystemBannerChildCountContext, subscribe: true }),
    decorators_js.state()
], SgdsSystemBannerItem.prototype, "siblingsCount", void 0);

exports.SgdsSystemBannerItem = SgdsSystemBannerItem;
exports["default"] = SgdsSystemBannerItem;
//# sourceMappingURL=sgds-system-banner-item.cjs.js.map
