'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 watch = require('../../utils/watch.cjs.js');
var badge = require('./badge.cjs.js');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var sgdsTooltip = require('../Tooltip/sgds-tooltip.cjs.js');
var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
var slot = require('../../utils/slot.cjs.js');

/**
 * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
 * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.
 *
 * @slot default - slot for badge
 * @slot icon - The slot for icon to the left of the badge text
 *
 * @event sgds-show - Emitted when the badge appears.
 * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
 * @event sgds-after-show - Emitted after the badge has appeared
 * @event sgds-after-hide - Emitted after the badge has closed
 */
class SgdsBadge extends sgdsElement["default"] {
    constructor() {
        super(...arguments);
        /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
        this.show = false;
        /**
         * One or more badge variant combinations.
         * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
         *
         * (@deprecated) The `info` variant is deprecated. Use `primary` instead.
         */
        this.variant = "primary";
        /** Manually set the outlined state to false */
        this.outlined = false;
        /** Manually set the dismissible state of the button to `false` */
        this.dismissible = false;
        /** Manually enable full width */
        this.fullWidth = false;
        this.truncated = false;
        this.text = "";
    }
    /** Closes the badge  */
    close() {
        this.show = false;
    }
    /**@internal */
    _handleShowChange() {
        if (this.show) {
            const sgdsShow = this.emit("sgds-show", { cancelable: true });
            if (sgdsShow.defaultPrevented) {
                this.show = false;
                return;
            }
            // animations if any go here
            this.emit("sgds-after-show");
        }
        else {
            const sgdsHide = this.emit("sgds-hide", { cancelable: true });
            if (sgdsHide.defaultPrevented) {
                this.show = true;
                return;
            }
            // animations if any go here
            this.emit("sgds-after-hide");
        }
    }
    /**@internal */
    _handleTruncation() {
        // checking of text height if its exceeding parent, it needs to be truncated
        const badge = this.shadowRoot.querySelector(".badge");
        const badgeLabel = this.shadowRoot.querySelector(".badge-label");
        if (badge && badgeLabel) {
            const labelHeight = badgeLabel.getBoundingClientRect().height;
            const badgeHeight = badge.getBoundingClientRect().height;
            this.truncated = labelHeight > badgeHeight;
        }
    }
    _handleLabelSlotChange(e) {
        this.text = slot.getTextContent(e.target);
        return;
    }
    _renderBadge() {
        const isDarkCloseButton = this.outlined || this.variant === "warning" || this.variant === "white";
        return lit.html `<div
      class="  
          ${classMap_js.classMap({
            [`badge-dismissible`]: this.dismissible,
            badge: true,
            outlined: this.outlined,
            truncated: this.truncated,
            "full-width": this.fullWidth
        })}"
      aria-hidden=${this.show ? "false" : "true"}
    >
      ${!this.dismissible ? lit.html `<slot name="icon"></slot>` : lit.nothing}

      <span class="badge-label">
        <slot @slotchange=${this._handleLabelSlotChange}></slot>
      </span>

      ${this.dismissible
            ? lit.html `<sgds-close-button
            size="sm"
            aria-label="close the badge"
            @click=${this.close}
            tone=${isDarkCloseButton ? "fixed-dark" : "fixed-light"}
          ></sgds-close-button>`
            : lit.nothing}
    </div>`;
    }
    render() {
        return (this.dismissible && this.show) || !this.dismissible
            ? this.truncated
                ? lit.html `<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}
            >${this._renderBadge()}</sgds-tooltip
          >`
                : this._renderBadge()
            : lit.nothing;
    }
}
SgdsBadge.styles = [...sgdsElement["default"].styles, badge["default"]];
/**@internal */
SgdsBadge.dependencies = {
    "sgds-close-button": sgdsCloseButton.SgdsCloseButton,
    "sgds-tooltip": sgdsTooltip.SgdsTooltip
};
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "show", void 0);
tslib.__decorate([
    decorators_js.property({ reflect: true })
], SgdsBadge.prototype, "variant", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "outlined", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "dismissible", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "fullWidth", void 0);
tslib.__decorate([
    decorators_js.state()
], SgdsBadge.prototype, "truncated", void 0);
tslib.__decorate([
    decorators_js.state()
], SgdsBadge.prototype, "text", void 0);
tslib.__decorate([
    watch.watch("show")
], SgdsBadge.prototype, "_handleShowChange", null);
tslib.__decorate([
    watch.watch("text")
], SgdsBadge.prototype, "_handleTruncation", null);

exports.SgdsBadge = SgdsBadge;
exports["default"] = SgdsBadge;
//# sourceMappingURL=sgds-badge.cjs.js.map
