import { DtIconChevronDown as F, DtIconClose as P } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as D } from "../../localization/index.js";
import { resolveComponent as o, resolveDirective as S, createElementBlock as u, openBlock as n, createVNode as m, withDirectives as v, createCommentVNode as _, withCtx as r, renderSlot as b, createBlock as p, Fragment as E, renderList as O, mergeProps as B, createElementVNode as g, toDisplayString as k, normalizeClass as z } from "vue";
import { _ as V } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import I from "../button/button.js";
import w from "../popover/popover.js";
import N from "../checkbox/checkbox.js";
import M from "../checkbox-group/checkbox-group.js";
import { BUTTON_SIZE_MODIFIERS as R } from "../button/button-constants.js";
import { POPOVER_PADDING_CLASSES as j, POPOVER_APPEND_TO_VALUES as q } from "../popover/popover-constants.js";
const H = {
  name: "DtFilterPill",
  components: {
    DtCheckboxGroup: M,
    DtCheckbox: N,
    DtPopover: w,
    DtButton: I,
    DtIconClose: P,
    DtIconChevronDown: F
  },
  inheritAttrs: !1,
  props: {
    /**
     * Array of filters to display in the popover,
     * should be an array of objects with `name` and `active` properties
     */
    modelValue: {
      type: Array,
      default: () => []
    },
    /**
     * Text shown in tooltip when you hover the alpha button,
     * required if no content is passed to default slot
     */
    alphaTooltipText: {
      type: String,
      default: ""
    },
    /**
     * HTML disabled attribute
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * Toggles the clear button visibility
     * @values true, false
     */
    hideClear: {
      type: Boolean,
      default: !1
    },
    /**
     * Label of the button
     */
    label: {
      type: String,
      default: void 0
    },
    /**
     * Text shown in tooltip when you hover the omega button,
     * required as it is an icon only button
     */
    omegaTooltipText: {
      type: String,
      default: ""
    },
    /**
     * Sets the element to which the
     * <a class="d-link" href="https://dialtone.dialpad.com/components/popover.html#vue-api" target="_blank">popover component</a>
     *  is going to append to
     * @values body, parent, root, HTMLElement
     */
    popoverAppendTo: {
      type: [HTMLElement, String],
      default: "body",
      validator: (e) => q.includes(e) || e instanceof HTMLElement
    },
    /**
     * If the dropdown does not fit in the direction described by "popoverPlacement",
     * it will attempt to change it's direction to the "popoverFallbackPlacements".
     *
     * @values top, top-start, top-end,
     * right, right-start, right-end,
     * left, left-start, left-end,
     * bottom, bottom-start, bottom-end,
     * auto, auto-start, auto-end
     * */
    popoverFallbackPlacements: {
      type: Array,
      default: () => ["auto"]
    },
    /**
     * Determines maximum height for the popover before overflow.
     * Possible units rem|px|em
     */
    popoverMaxHeight: {
      type: String,
      default: ""
    },
    /**
     * Determines maximum width for the popover before overflow.
     * Possible units rem|px|%|em
     */
    popoverMaxWidth: {
      type: String,
      default: ""
    },
    /**
     * Padding size class for the popover content.
     * @values none, small, medium, large
     */
    popoverPadding: {
      type: String,
      default: "large",
      validator: (e) => Object.keys(j).some((i) => i === e)
    },
    /**
     * The direction the popover displays relative to the anchor.
     * <a class="d-link" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement" target="_blank">Tippy.js docs</a>
     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end
     */
    popoverPlacement: {
      type: String,
      default: "bottom-start"
    },
    /**
     * The size of the button.
     * @values xs, sm, md, lg, xl
     */
    size: {
      type: String,
      default: "sm",
      validator: (e) => Object.keys(R).includes(e)
    }
  },
  emits: [
    /**
     * Emitted when clicking the clear button
     *
     * @event clear
     * @type {Boolean | Array}
     */
    "clear",
    /**
     * Emitted when popover is shown or hidden
     *
     * @event opened
     * @type {Boolean | Array}
     */
    "open",
    /**
     * Emitted when the active filters change
     * @type {Array}
     */
    "update:modelValue"
  ],
  data() {
    return {
      isOpen: !1,
      i18n: new D(),
      filters: this.modelValue
    };
  },
  computed: {
    buttonKind() {
      return this.isActive ? "default" : "muted";
    },
    clearButtonAriaLabel() {
      return this.omegaTooltipText || this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL");
    },
    clearButtonTitle() {
      if (!this.omegaTooltipText)
        return this.clearButtonAriaLabel;
    },
    activeFilters() {
      return this.filters.filter((e) => e.active).map((e) => e.name);
    },
    activeFilterList() {
      return this.activeFilters.length <= 2 ? this.activeFilters.join(", ") : this.activeFilters.slice(0, 2).join(", ") + ", + " + (this.activeFilters.length - 2);
    },
    isActive() {
      return this.activeFilterList.length > 0;
    },
    hasClear() {
      return !this.hideClear && this.activeFilterList.length > 0;
    }
  },
  watch: {
    isOpen(e) {
      this.$emit("open", e);
    },
    filters: {
      deep: !0,
      handler(e) {
        this.$emit("update:modelValue", e);
      }
    }
  },
  mounted() {
    var e;
    (e = this.modelValue) != null && e.length || this.$slots.content && this.$slots.content() || console.warn('Please provide content through the v-model or the "content" slot.');
  },
  methods: {
    clearFilter(e) {
      this.filters.forEach((i) => delete i.active), this.$emit("clear", e);
    }
  }
}, U = {
  class: "d-filter-pill",
  "data-qa": "dt-filter-pill"
}, K = { class: "d-filter-pill__label" }, G = ["textContent"], W = ["textContent"];
function Z(e, i, t, J, s, l) {
  const x = o("dt-icon-chevron-down"), h = o("dt-button"), y = o("dt-checkbox"), T = o("dt-checkbox-group"), C = o("dt-popover"), A = o("dt-icon-close"), f = S("dt-tooltip");
  return n(), u("div", U, [
    m(C, {
      open: s.isOpen,
      "onUpdate:open": i[1] || (i[1] = (a) => s.isOpen = a),
      "append-to": t.popoverAppendTo,
      "fallback-placements": t.popoverFallbackPlacements,
      "max-height": t.popoverMaxHeight,
      "max-width": t.popoverMaxWidth,
      modal: !1,
      padding: t.popoverPadding,
      placement: t.popoverPlacement
    }, {
      anchor: r(({ attrs: a }) => [
        v((n(), p(h, B(a, {
          active: l.isActive,
          class: [
            "d-filter-pill__primary",
            {
              "d-filter-pill--selected": l.isActive,
              "d-filter-pill__primary--has-clear": l.hasClear
            }
          ],
          disabled: t.disabled,
          kind: l.buttonKind,
          size: t.size,
          "data-qa": "dt-filter-pill__button",
          "icon-position": "right",
          importance: "outlined",
          onClick: i[0] || (i[0] = (c) => s.isOpen = !0)
        }), {
          icon: r(({ iconSize: c }) => [
            m(x, {
              size: c,
              class: "d-filter-pill__icon",
              "data-qa": "dt-filter-pill__icon"
            }, null, 8, ["size"])
          ]),
          default: r(() => [
            g("span", K, [
              b(e.$slots, "default", {}, () => [
                g("span", {
                  class: "d-filter-pill__label-alpha",
                  textContent: k(t.label)
                }, null, 8, G),
                l.activeFilterList ? (n(), u("span", {
                  key: 0,
                  class: "d-filter-pill__label-omega",
                  textContent: k(l.activeFilterList)
                }, null, 8, W)) : _("", !0)
              ])
            ])
          ]),
          _: 2
        }, 1040, ["active", "class", "disabled", "kind", "size"])), [
          [f, t.alphaTooltipText]
        ])
      ]),
      content: r(({ close: a }) => [
        b(e.$slots, "content", { close: a }, () => {
          var c;
          return [
            (c = t.modelValue) != null && c.length ? (n(), p(T, {
              key: 0,
              "selected-values": l.activeFilters,
              "aria-label": t.label,
              name: "contact-centers"
            }, {
              default: r(() => [
                (n(!0), u(E, null, O(s.filters, (d) => (n(), p(y, {
                  key: d.name,
                  label: d.name,
                  value: d.name,
                  onInput: (L) => d.active = L
                }, null, 8, ["label", "value", "onInput"]))), 128))
              ]),
              _: 1
            }, 8, ["selected-values", "aria-label"])) : _("", !0)
          ];
        })
      ]),
      _: 3
    }, 8, ["open", "append-to", "fallback-placements", "max-height", "max-width", "padding", "placement"]),
    l.hasClear ? v((n(), p(h, {
      key: 0,
      active: l.isActive,
      "aria-label": l.clearButtonAriaLabel,
      class: z([
        "d-filter-pill__clear",
        { "d-filter-pill__clear--selected": l.isActive }
      ]),
      disabled: t.disabled,
      kind: l.buttonKind,
      size: t.size,
      title: l.clearButtonTitle,
      "data-qa": "dt-filter-pill__clear-button",
      importance: "outlined",
      onClick: l.clearFilter
    }, {
      icon: r(({ iconSize: a }) => [
        m(A, { size: a }, null, 8, ["size"])
      ]),
      _: 1
    }, 8, ["active", "aria-label", "class", "disabled", "kind", "size", "title", "onClick"])), [
      [f, t.omegaTooltipText]
    ]) : _("", !0)
  ]);
}
const oe = /* @__PURE__ */ V(H, [["render", Z]]);
export {
  oe as default
};
//# sourceMappingURL=filter-pill.js.map
