import { d as O } from "./index-DU6yeDGn.js";
import { G as h, _ as E, C as S, M as z, H as A, J as B } from "./install-BuMO14Rb.js";
import { resolveComponent as n, resolveDirective as R, createElementBlock as I, openBlock as v, normalizeClass as P, createBlock as p, createCommentVNode as c, createVNode as o, mergeProps as g, withCtx as a, renderSlot as b, normalizeProps as f, guardReactiveProps as $, createTextVNode as d, toDisplayString as r, toHandlers as j, createSlots as q, withDirectives as V, createElementVNode as w, vShow as H, withModifiers as N } from "vue";
const D = {
  props: {
    // validation rules
    v: {
      type: Object
    },
    customValidators: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    isValidation() {
      return !!this.v && !!Object.keys(this.v).length;
    },
    invalid() {
      return this.isValidation && this.v.$error;
    },
    validationText() {
      let i = "";
      this.isValidation && this.invalid && (this.v.required?.$invalid ? i = this.$t("validation.required") : this.v.numeric?.$invalid ? i = this.$t("validation.numeric") : this.v.email?.$invalid ? i = this.$t("validation.email") : this.v.gatewayHostValidator?.$invalid ? i = this.$t("validation.gatewayHostValidator") : this.v.ipValidator?.$invalid ? i = this.$t("validation.ipValidator") : this.v.macValidator?.$invalid ? i = this.$t("validation.macValidator") : this.v.minValue?.$invalid ? i = this.$t("validation.minValue", {
        min: this.v.minValue.$params.min
      }) : this.v.maxValue?.$invalid ? i = this.$t("validation.maxValue", {
        max: this.v.maxValue.$params.max
      }) : this.v.sipAccountValidator?.$invalid ? i = this.$t("validation.sipAccountValidator") : this.v.minLength?.$invalid ? i = this.$t("validation.minLength", {
        min: this.v.minLength.$params.min
      }) : this.v.maxLength?.$invalid ? i = this.$t("validation.maxLength", {
        max: this.v.maxLength.$params.max
      }) : this.v.url?.$invalid ? i = `${this.$t("validation.url")}` : this.v.regExpValidator?.$invalid ? i = `${this.$t("validation.regExpValidator")}` : this.v.sameAs?.$invalid ? i = `${this.$t("validation.sameAs")}` : this.v.domainValidator?.$invalid ? i = `${this.$t("validation.domainValidator")}` : this.v.decimalValidator?.$invalid ? i = `${this.$t("validation.decimalValidator")} ${this.v.decimalValidator.$params.count}` : this.v.websocketValidator?.$invalid ? i = `${this.$t("validation.websocketValidator")}` : this.v.integer?.$invalid ? i = `${this.$t("validation.integer")}` : this.v.isRegExpMatched?.$invalid && (i = this.v.isRegExpMatched?.$params?.errorMessage || `${t("validation.isRegExpMatched")} ${this.v.isRegExpMatched?.$params?.regExp}`));
      for (const { name: l, text: e } of this.customValidators)
        this.v[l]?.$invalid && (i = e);
      return i;
    },
    validationTextColor() {
      return this.invalid ? h.ERROR : h.SUCCESS;
    }
  }
}, x = {
  name: "WtTagsInput",
  mixins: [
    D,
    A,
    // taggableMixin is used to add custom select values, see [https://my.webitel.com/browse/WTEL-3181
    B
  ],
  /**
   * @emits {Array} input - Fires when tags value changes. Emits value array
   * @emits {string} tag - Fires when tag is added (if manualTagging is true). Emits vue-multiselect "tag" value
   * @emits {string} search-change - Fires when search query changes
   * @emits {void} closed - Fires when dropdown is closed
   *
   * Note: This component inherits props from multiselectMixin (options, placeholder, optionLabel, searchMethod, disabled, required, allowEmpty, useValueFromOptionsByProp)
   * and validationMixin (v, customValidators). Also inherits label-related props from labelUsageMixin (label, labelProps).
   */
  props: {
    /**
     * Current tags value (v-model). Default mode for tags input is array of strings, not objects (that is the difference between tags input and select).
     * @type {Array}
     * @model value
     */
    value: {
      type: Array
    },
    /**
     * Default mode for tags input is array of strings, not objects (that is the difference between tags input and select).
     * @type {string}
     * @default null
     */
    trackBy: {
      type: String,
      default: null
    },
    /**
     * If true, user can add tags by himself
     * @type {boolean}
     * @default false
     */
    taggable: {
      type: Boolean,
      default: !1
    },
    /**
     * Represented property of select object. REQUIRED IN OBJECT-DATA TAG-INPUTS TO PREVENT OPTION DUPLICATION.
     * @type {string}
     * @default null
     */
    optionLabel: {
      type: String,
      default: null
    },
    /**
     * False: "tag" method automatically pushes { optionLabel | "name", trackBy } object to value array and $emits "input" event.
     * True: "tag" method only $emits "tag" event. Tag addition is responsibility of client side.
     * @type {boolean}
     * @default false
     */
    manualTagging: {
      type: Boolean,
      default: !1,
      description: `
      False: "tag" method automatically pushes { optionLabel | "name", trackBy } object to value
      array and $emits "input" event.

      True: "tag" method only $emits "tag" event. Tag addition is responsibility of client side.
    `
    }
  },
  emits: [
    "input",
    "tag",
    "search-change",
    "closed"
  ],
  data: () => ({
    defaultOptionLabel: "label",
    // [https://webitel.atlassian.net/browse/WTEL-4310]
    // Multiple value is needed in TaggableMixin mixin to correctly add custom values
    multiple: !0,
    // Expose enums to template
    MessageVariant: z,
    ComponentSize: S
  }),
  created() {
    this.isApiMode || this.initializeOptions();
  },
  methods: {
    getTagOptionLabel({ optionLabel: i, option: l }) {
      const e = this.getOptionLabel({
        optionLabel: i,
        option: l
      });
      return typeof e == "object" ? l.label : e;
    },
    initializeOptions() {
      if (!this.value)
        return [];
      const i = this.value.filter((l) => !this.options.find((e) => O(e, l)));
      this.options.unshift(...i);
    }
  }
}, F = { class: "multiselect__loading-wrapper" };
function G(i, l, e, J, U, u) {
  const y = n("wt-label"), m = n("wt-icon-btn"), L = n("wt-chip"), M = n("wt-loader"), _ = n("vue-multiselect"), k = n("wt-message"), T = R("observe-visibility");
  return v(), I("div", {
    class: P([{
      "wt-tags-input--disabled": i.disabled,
      "wt-tags-input--invalid": i.invalid,
      "wt-tags-input--loading": i.isLoading
    }, "wt-tags-input"])
  }, [
    i.hasLabel ? (v(), p(y, g({ key: 0 }, i.labelProps, {
      disabled: i.disabled,
      invalid: i.invalid,
      class: "wt-tags-input__label"
    }), {
      default: a(() => [
        b(i.$slots, "label", f($({ label: i.label })), () => [
          d(r(i.requiredLabel), 1)
        ], !0)
      ], void 0, !0),
      _: 3
    }, 16, ["disabled", "invalid"])) : c("", !0),
    o(_, g(i.$attrs, {
      ref: "vue-multiselect",
      "close-on-select": !1,
      disabled: i.disabled,
      "internal-search": !i.searchMethod,
      label: i.selectOptionLabel,
      loading: !1,
      "model-value": i.selectValue,
      multiple: i.multiple,
      options: i.selectOptions,
      placeholder: i.placeholder || i.label,
      taggable: e.taggable,
      "track-by": e.trackBy,
      class: "wt-tags-input__select"
    }, j(i.listeners)), q({
      tag: a(({ option: s, remove: C }) => [
        o(L, { class: "multiselect__custom-tag" }, {
          default: a(() => [
            d(r(u.getTagOptionLabel({ option: s, optionLabel: e.optionLabel })) + " ", 1),
            o(m, {
              color: "on-primary",
              icon: "close--filled",
              size: "sm",
              onClick: (W) => C(s)
            }, null, 8, ["onClick"])
          ], void 0, !0),
          _: 2
        }, 1024)
      ]),
      option: a(({ option: s }) => [
        b(i.$slots, "option", f($({ option: s, optionLabel: e.optionLabel })), () => [
          d(r(u.getTagOptionLabel({ option: s, optionLabel: e.optionLabel })), 1)
        ], !0)
      ]),
      caret: a(({ toggle: s }) => [
        o(m, {
          disabled: i.disabled,
          class: "multiselect__select",
          color: "active",
          icon: "arrow-down",
          onMousedown: N(s, ["prevent", "stop"])
        }, null, 8, ["disabled", "onMousedown"])
      ]),
      beforeList: a(() => [
        V(w("div", F, [
          o(M, { size: "sm" })
        ], 512), [
          [H, i.isLoading]
        ])
      ]),
      _: 2
    }, [
      i.showIntersectionObserver ? {
        name: "afterList",
        fn: a(() => [
          V(w("div", null, null, 512), [
            [T, i.handleAfterListIntersect]
          ])
        ]),
        key: "0"
      } : void 0
    ]), 1040, ["disabled", "internal-search", "label", "model-value", "multiple", "options", "placeholder", "taggable", "track-by"]),
    i.isValidation && i.validationText ? (v(), p(k, {
      key: 1,
      color: i.validationTextColor,
      variant: i.MessageVariant.SIMPLE,
      size: i.ComponentSize.SM
    }, {
      default: a(() => [
        d(r(i.validationText), 1)
      ], void 0, !0),
      _: 1
    }, 8, ["color", "variant", "size"])) : c("", !0)
  ], 2);
}
const Y = /* @__PURE__ */ E(x, [["render", G], ["__scopeId", "data-v-ded5a365"]]);
export {
  Y as default
};
