import { safeConcatStrings as l } from "../../common/utils/index.js";
import { DtIconHeadphones as p, DtIconChevronDown as u } from "@dialpad/dialtone-icons/vue2";
import { DialtoneLocalization as _ } from "../../localization/index.js";
import { n as b } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import h from "../button/button.js";
import f from "../badge/badge.js";
import m from "../emoji-text-wrapper/emoji-text-wrapper.js";
const w = {
  name: "DtRecipeContactCentersRow",
  components: {
    DtButton: h,
    DtBadge: f,
    DtEmojiTextWrapper: m,
    DtIconHeadphones: p,
    DtIconChevronDown: u
  },
  inheritAttrs: !1,
  props: {
    /**
     * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
     */
    ariaLabel: {
      type: String,
      default: ""
    },
    /**
     * Text displayed next to the icon. Required.
     */
    description: {
      type: String,
      required: !0
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: !1
    },
    /**
     * Making this true will hide the unread count badge, the chevron button, and the right slot
     */
    hideActions: {
      type: Boolean,
      default: !1
    },
    /**
     * Number of unread messages, could be a string to support '99+'
     */
    unreadCount: {
      type: String,
      default: null,
      validator(r) {
        return r ? /^\d+\+?$/.test(r) : !0;
      }
    }
  },
  emits: [
    /**
     * Native click event on the row itself
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * Menu button clicked
     *
     * @event call
     * @type {PointerEvent | KeyboardEvent}
     */
    "click-menu"
  ],
  data() {
    return {
      labelWidth: "auto",
      i18n: new _()
    };
  },
  computed: {
    leftbarContactCentersRowClasses() {
      return [
        "d-recipe-leftbar-row",
        "d-recipe-leftbar-row--contact-centers",
        {
          "d-recipe-leftbar-row__unread-count": this.showUnreadCount,
          "d-recipe-leftbar-row--selected": this.selected
        }
      ];
    },
    getAriaLabel() {
      const r = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
      return this.ariaLabel ? this.ariaLabel : l([
        this.description,
        this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: r })
      ]);
    },
    showUnreadCount() {
      return !!this.unreadCount;
    },
    menuButtonLabel() {
      return this.i18n.$t("DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL");
    }
  },
  watch: {
    $props: {
      deep: !0,
      async handler() {
        await this.$nextTick(), this.adjustLabelWidth();
      }
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(this.$el), this.adjustLabelWidth();
  },
  beforeDestroy: function() {
    this.resizeObserver.disconnect();
  },
  methods: {
    adjustLabelWidth() {
      var i, s, o, n, c, d;
      const r = ((s = (i = this.$el) == null ? void 0 : i.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : s.clientWidth) || 0, t = ((n = (o = this.$el) == null ? void 0 : o.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : n.clientWidth) || 0, e = ((d = (c = this.$el) == null ? void 0 : c.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : d.clientWidth) || 0, a = 12;
      this.labelWidth = r - (t + e + a) + "px";
    }
  }
};
var C = function() {
  var t = this, e = t._self._c;
  return e("div", { class: [
    "d-recipe-leftbar-row__container",
    { "d-recipe-leftbar-row__container--off-duty": t.$slots.timer }
  ] }, [e("div", { class: t.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [e("a", t._g(t._b({ staticClass: "d-recipe-leftbar-row__primary", attrs: { "data-qa": t.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link", "aria-label": t.getAriaLabel, title: t.description, href: t.$attrs.href ?? "javascript:void(0)" } }, "a", t.$attrs, !1), t.$listeners), [e("div", { staticClass: "d-recipe-leftbar-row__alpha" }, [e("dt-icon-headphones", { attrs: { size: "300", "data-qa": "dt-recipe-leftbar-row-icon" } })], 1), e("div", { staticClass: "d-recipe-leftbar-row__label", style: `flex-basis: ${t.labelWidth}` }, [e("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", size: "200" } }, [t._v(" " + t._s(t.description) + " ")])], 1)]), e("div", { directives: [{ name: "show", rawName: "v-show", value: !t.hideActions, expression: "!hideActions" }], staticClass: "d-recipe-leftbar-row__omega" }, [t._t("right"), e("div", { staticClass: "d-recipe-leftbar-row__action-container" }, [t.showUnreadCount ? e("dt-badge", { staticClass: "d-recipe-leftbar-row__unread-badge", attrs: { "data-qa": "dt-recipe-leftbar-row-unread-badge", kind: "count", type: "bulletin" } }, [t._v(" " + t._s(t.unreadCount) + " ")]) : t._e(), e("dt-button", { staticClass: "d-recipe-leftbar-row__action", attrs: { "data-qa": "dt-recipe-leftbar-row-action-button", "aria-label": t.menuButtonLabel, title: t.menuButtonLabel, importance: "clear", size: "xs", circle: "" }, on: { click: function(a) {
    return a.stopPropagation(), t.$emit("click-menu", a);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-chevron-down", { attrs: { size: "100" } })];
  }, proxy: !0 }]) })], 1)], 2)]), e("div", { staticClass: "d-recipe-leftbar-row__bottom" }, [t._t("timer")], 2)]);
}, v = [], g = /* @__PURE__ */ b(
  w,
  C,
  v
);
const T = g.exports;
export {
  T as default
};
//# sourceMappingURL=contact-centers-row.js.map
