import { DtIconChevronDown as o, DtIconClose as n } from "@dialpad/dialtone-icons/vue2";
import { DialtoneLocalization as s } from "../../localization/index.js";
import { n as p } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../button/button.js";
import d from "../popover/popover.js";
import u from "../checkbox/checkbox.js";
import f from "../checkbox-group/checkbox-group.js";
import { BUTTON_SIZE_MODIFIERS as m } from "../button/button-constants.js";
import { POPOVER_PADDING_CLASSES as v, POPOVER_APPEND_TO_VALUES as _ } from "../popover/popover-constants.js";
const h = {
  name: "DtFilterPill",
  components: {
    DtCheckboxGroup: f,
    DtCheckbox: u,
    DtPopover: d,
    DtButton: c,
    DtIconClose: n,
    DtIconChevronDown: o
  },
  inheritAttrs: !1,
  props: {
    /**
     * Array of filters to display in the popover,
     * should be an array of objects with `name` and `active` properties
     */
    value: {
      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) => _.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(v).some((t) => t === 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(m).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:value"
  ],
  data() {
    return {
      isOpen: !1,
      i18n: new s(),
      filters: this.value
    };
  },
  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(e) {
      this.$emit("update:value", e);
    }
  },
  methods: {
    clearFilter(e) {
      this.filters = this.filters.map((t) => (delete t.active, t)), this.$emit("clear", e);
    },
    updateFilters(e, t) {
      this.filters = this.filters.map((i) => i.name !== e.name ? i : { ...i, active: t });
    }
  }
};
var b = function() {
  var t = this, i = t._self._c;
  return i("div", { staticClass: "d-filter-pill", attrs: { "data-qa": "dt-filter-pill" } }, [i("dt-popover", { attrs: { "append-to": t.popoverAppendTo, "fallback-placements": t.popoverFallbackPlacements, "max-height": t.popoverMaxHeight, "max-width": t.popoverMaxWidth, modal: !1, padding: t.popoverPadding, placement: t.popoverPlacement }, scopedSlots: t._u([{ key: "anchor", fn: function({ attrs: l }) {
    return [i("dt-button", t._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.alphaTooltipText, expression: "alphaTooltipText" }], class: [
      "d-filter-pill__primary",
      {
        "d-filter-pill--selected": t.isActive,
        "d-filter-pill__primary--has-clear": t.hasClear
      }
    ], attrs: { active: t.isActive, disabled: t.disabled, kind: t.buttonKind, size: t.size, "data-qa": "dt-filter-pill__button", "icon-position": "right", importance: "outlined" }, on: { click: function(a) {
      t.isOpen = !0;
    } }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: a }) {
      return [i("dt-icon-chevron-down", { staticClass: "d-filter-pill__icon", attrs: { size: a, "data-qa": "dt-filter-pill__icon" } })];
    } }], null, !0) }, "dt-button", l, !1), [i("span", { staticClass: "d-filter-pill__label" }, [t._t("default", function() {
      return [i("span", { staticClass: "d-filter-pill__label-alpha", domProps: { textContent: t._s(t.label) } }), t.activeFilterList ? i("span", { staticClass: "d-filter-pill__label-omega", domProps: { textContent: t._s(t.activeFilterList) } }) : t._e()];
    })], 2)])];
  } }, { key: "content", fn: function({ close: l }) {
    return [t._t("content", function() {
      return [t.value.length ? i("dt-checkbox-group", { attrs: { "selected-values": t.activeFilters, "aria-label": t.label, name: "contact-centers" } }, t._l(t.filters, function(a) {
        return i("dt-checkbox", { key: a.name, attrs: { label: a.name, value: a.name }, on: { input: (r) => t.updateFilters(a, r) } });
      }), 1) : t._e()];
    }, { close: l })];
  } }], null, !0), model: { value: t.isOpen, callback: function(l) {
    t.isOpen = l;
  }, expression: "isOpen" } }), t.hasClear ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.omegaTooltipText, expression: "omegaTooltipText" }], class: [
    "d-filter-pill__clear",
    { "d-filter-pill__clear--selected": t.isActive }
  ], attrs: { active: t.isActive, "aria-label": t.clearButtonAriaLabel, disabled: t.disabled, kind: t.buttonKind, size: t.size, title: t.clearButtonTitle, "data-qa": "dt-filter-pill__clear-button", importance: "outlined" }, on: { click: t.clearFilter }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: l }) {
    return [i("dt-icon-close", { attrs: { size: l } })];
  } }], null, !1, 2924703597) }) : t._e()], 1);
}, g = [], T = /* @__PURE__ */ p(
  h,
  b,
  g
);
const O = T.exports;
export {
  O as default
};
//# sourceMappingURL=filter-pill.js.map
