import { defineComponent, ref, toRef, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createCommentVNode, createElementVNode, withDirectives, vModelText, createTextVNode, toDisplayString, Fragment, renderList, createVNode, withModifiers } from 'vue';
import script$5 from './TsIcon.mjs';
import { s as script$6 } from './normalText-66005fcf.mjs';

var script$4 = defineComponent({
    name: "TsSelect",
    components: {
        TsIcon: script$5,
        TsNormalText: script$6,
    },
    props: {
        withKey: {
            type: Boolean,
            default: false,
        },
        autoComplete: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: String,
            default: "",
        },
        options: {
            default: [],
        },
        paddings: {
            type: String,
            default: "py-4 px-3",
        },
        customClass: {
            type: String,
            default: "",
        },
        defaultValues: {
            required: false,
            default: [],
        },
        modelValue: {
            type: String || Array,
            default: false,
        },
        isMultiple: {
            type: Boolean,
            default: false,
        },
        hasTitle: {
            type: Boolean,
            default: false,
        },
        defaultSize: {
            type: String,
            default: "w-full",
        },
    },
    emits: ["update:modelValue", "OnSearch", "OnOptionSelected"],
    setup(props, context) {
        const isFocused = ref(false);
        const showOption = ref(false);
        const tabIndex = Math.random();
        const valueData = toRef(props, "modelValue");
        const textValue = ref("");
        watch(textValue, () => {
            context.emit("OnSearch", textValue.value);
        });
        const selectedItems = ref([]);
        onMounted(() => {
            if (props.modelValue) {
                const selectedOption = props.options.filter((eachItem) => {
                    return eachItem.key == props.modelValue;
                });
                if (selectedOption.length > 0) {
                    selectValue(selectedOption[0]);
                }
            }
        });
        onMounted(() => {
            if (props.defaultValues.length > 0) {
                selectedItems.value = props.defaultValues;
            }
        });
        const itemIsSelected = (inputKey) => {
            const item = selectedItems.value.filter((key) => {
                return key == inputKey;
            });
            return item.length > 0;
        };
        const selectValue = (option) => {
            if (props.autoComplete) {
                context.emit("OnOptionSelected", option.key);
                isFocused.value = false;
                showOption.value = false;
                document.getElementById("container" + tabIndex)?.blur();
                return;
            }
            if (props.isMultiple) {
                if (itemIsSelected(option.key)) {
                    selectedItems.value = selectedItems.value.filter((key) => {
                        return key != option.key;
                    });
                    return;
                }
                selectedItems.value.push(option.key);
                context.emit("update:modelValue", selectedItems.value);
            }
            else {
                context.emit("update:modelValue", option.key);
                if (props.withKey) {
                    valueData.value = option.key;
                }
                else {
                    valueData.value = option.value;
                    textValue.value = option.value;
                }
                isFocused.value = false;
                showOption.value = false;
                document.getElementById("container" + tabIndex)?.blur();
            }
        };
        const getSelectedOption = (keyValue) => {
            const option = props.options.filter((eachItem) => {
                return eachItem.key == keyValue;
            });
            return option[0].value;
        };
        return {
            showOption,
            valueData,
            isFocused,
            selectValue,
            tabIndex,
            textValue,
            itemIsSelected,
            selectedItems,
            getSelectedOption,
        };
    },
});

const _hoisted_1$4 = ["id", "tabindex"];
const _hoisted_2$3 = ["placeholder", "disabled"];
const _hoisted_3$3 = {
  key: 2,
  class: "absolute top-[90%] flex flex-col left-0 w-full py-2 px-2 max-h-48 overflow-y-auto z-40 bg-white drop-shadow-lg"
};
const _hoisted_4$2 = ["onClick"];

function render$4(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_normal_text = resolveComponent("ts-normal-text");
  const _component_ts_icon = resolveComponent("ts-icon");

  return (openBlock(), createElementBlock("div", {
    class: normalizeClass(`flex flex-col space-y-2 ${_ctx.defaultSize}`)
  }, [
    (_ctx.hasTitle)
      ? (openBlock(), createBlock(_component_ts_normal_text, { key: 0 }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "title")
          ]),
          _: 3 /* FORWARDED */
        }))
      : createCommentVNode("v-if", true),
    createElementVNode("div", {
      class: normalizeClass(`flex relative flex-row items-center space-x-1 justify-between w-full ${_ctx.customClass} `),
      id: 'container' + _ctx.tabIndex,
      onFocus: _cache[5] || (_cache[5] = $event => {
        _ctx.showOption = true;
        _ctx.isFocused = true;
      }),
      onBlur: _cache[6] || (_cache[6] = $event => {
        _ctx.isFocused = false;
        _ctx.showOption = false;
      }),
      tabindex: _ctx.tabIndex
    }, [
      (!_ctx.isMultiple)
        ? withDirectives((openBlock(), createElementBlock("input", {
            key: 0,
            ref: "select",
            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.textValue) = $event)),
            placeholder: _ctx.placeholder,
            onFocus: _cache[1] || (_cache[1] = $event => {
          _ctx.showOption = true;
          _ctx.isFocused = true;
        }),
            onBlur: _cache[2] || (_cache[2] = $event => {
          _ctx.isFocused = false;
          _ctx.showOption = false;
        }),
            disabled: !_ctx.autoComplete,
            class: normalizeClass(` ${_ctx.paddings} flex-grow cursor-pointer bg-transparent placeholder-gray-600 focus input w-full filled focus:outline-none rounded-md focus:border-primary`)
          }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_2$3)), [
            [vModelText, _ctx.textValue]
          ])
        : (openBlock(), createElementBlock("div", {
            key: 1,
            onClick: _cache[3] || (_cache[3] = $event => {
          _ctx.showOption = true;
          _ctx.isFocused = true;
        }),
            class: normalizeClass(` ${_ctx.paddings} flex-grow  cursor-pointer bg-transparent text-gray-600 focus input border-[1px] w-full filled focus:outline-none
		rounded-md focus:border-primary border-gray-200 bg-white`)
          }, [
            createTextVNode(toDisplayString(_ctx.selectedItems.length == 0 ? "Select" : "") + " ", 1 /* TEXT */),
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selectedItems, (selected, index) => {
              return (openBlock(), createElementBlock("span", { key: index }, toDisplayString(_ctx.getSelectedOption(selected)) + " " + toDisplayString(index == _ctx.selectedItems.length - 1 ? "" : ", "), 1 /* TEXT */))
            }), 128 /* KEYED_FRAGMENT */))
          ], 2 /* CLASS */)),
      createVNode(_component_ts_icon, {
        onClick: _cache[4] || (_cache[4] = $event => {
          _ctx.showOption = true;
          _ctx.isFocused = true;
        }),
        name: "dropdown",
        "custom-class": "md:h-[7px] h-[6px] cursor-pointer"
      }),
      (_ctx.showOption)
        ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
              return (openBlock(), createElementBlock("div", {
                key: index,
                class: "py-3 px-3 hover:bg-gray-100 flex flex-row items-center space-x-2 cursor-pointer",
                onClick: withModifiers($event => (_ctx.selectValue(option)), ["stop"])
              }, [
                (_ctx.isMultiple)
                  ? (openBlock(), createElementBlock("span", {
                      key: 0,
                      class: normalizeClass(`h-[10px] w-[10px] rounded-full border-[1px] border-primary ${
              _ctx.itemIsSelected(option.key) ? 'bg-primary' : ''
            }`)
                    }, null, 2 /* CLASS */))
                  : createCommentVNode("v-if", true),
                createElementVNode("span", null, toDisplayString(_ctx.withKey ? option.key + " - " : "") + " " + toDisplayString(option.value), 1 /* TEXT */)
              ], 8 /* PROPS */, _hoisted_4$2))
            }), 128 /* KEYED_FRAGMENT */))
          ]))
        : createCommentVNode("v-if", true)
    ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1$4)
  ], 2 /* CLASS */))
}

script$4.render = render$4;
script$4.__file = "src/components/TsForm/select.vue";

var script$3 = {
    components: {
        TsNormalText: script$6,
    },
    props: {
        padding: {
            type: String,
            default: "py-3 px-3",
        },
        placeholder: {
            type: String,
            default: "",
        },
        rows: {
            type: String,
            default: "5",
        },
        name: {
            type: String,
            default: "",
        },
        rules: {
            type: Object,
            required: false,
        },
        modelValue: {
            default: "",
        },
    },
    name: "TsTextArea",
    emits: ["update:modelValue"],
    setup(props, context) {
        const content = ref("");
        onMounted(() => {
            if (props.modelValue) {
                content.value = props.modelValue;
            }
        });
        const validationStatus = ref(true);
        const errorMessage = ref("");
        const isRequired = () => {
            if (content.value) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} is required`;
            }
        };
        const isGreaterThan = (count) => {
            if (content.value.length > count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be more than ${count} characters`;
            }
        };
        const isLessThan = (count) => {
            if (content.value.length < count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be less than ${count} characters`;
            }
        };
        const isEqualsTo = (count) => {
            if (content.value.length == count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be ${count} characters`;
            }
        };
        const isCondition = (condition, errMsg) => {
            if (condition) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = errMsg;
            }
        };
        const isGreaterThanOrEqualsTo = (count) => {
            if (content.value.length >= count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be more than ${count - 1} characters`;
            }
        };
        const isLessThanOrEqualsTo = (count) => {
            if (content.value.length <= count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be less than ${count + 1} characters`;
            }
        };
        const isRegex = (regex, errMsg) => {
            if (content.value.match(regex)) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = errMsg;
            }
        };
        const checkValidation = () => {
            if (props.rules) {
                for (let index = 0; index < props.rules.length; index++) {
                    const rule = props.rules[index];
                    if (rule.type == "isRequired") {
                        isRequired();
                    }
                    if (rule.type == "isGreaterThan") {
                        isGreaterThan(rule.value);
                    }
                    if (rule.type == "isLessThan") {
                        isLessThan(rule.value);
                    }
                    if (rule.type == "isEqualsTo") {
                        isEqualsTo(rule.value);
                    }
                    if (rule.type == "isGreaterThanOrEqualsTo") {
                        isGreaterThanOrEqualsTo(rule.value);
                    }
                    if (rule.type == "isLessThanOrEqualsTo") {
                        isLessThanOrEqualsTo(rule.value);
                    }
                    if (rule.type == "isRegex") {
                        isRegex(rule.value, rule.errorMessage);
                    }
                    if (rule.type == "isCondition") {
                        isCondition(rule.value, rule.errorMessage);
                    }
                }
            }
        };
        watch(content, () => {
            checkValidation();
            context.emit("update:modelValue", content.value);
        });
        const showError = (message) => {
            validationStatus.value = false;
            errorMessage.value = message;
        };
        return {
            content,
            validationStatus,
            errorMessage,
            checkValidation,
            showError,
        };
    },
};

const _hoisted_1$3 = { class: "flex w-full flex-col space-y-2" };
const _hoisted_2$2 = ["rows", "placeholder"];
const _hoisted_3$2 = {
  key: 0,
  class: "w-full flex flex-row justify-end"
};

function render$3(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_normal_text = resolveComponent("ts-normal-text");

  return (openBlock(), createElementBlock("div", _hoisted_1$3, [
    createVNode(_component_ts_normal_text, null, {
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "title")
      ]),
      _: 3 /* FORWARDED */
    }),
    withDirectives(createElementVNode("textarea", {
      rows: $props.rows,
      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.content) = $event)),
      class: normalizeClass(`focus:outline-none border-[1px] resize-none border-gray-200 ${
        $setup.validationStatus ? 'focus:!border-primaryPurple' : '!border-errorColor'
      } rounded ${$props.padding} placeholder-slate-500`),
      placeholder: $props.placeholder,
      onBlur: _cache[1] || (_cache[1] = $event => ($setup.checkValidation()))
    }, "\n    ", 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_2$2), [
      [vModelText, $setup.content]
    ]),
    (!$setup.validationStatus)
      ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
          createVNode(_component_ts_normal_text, {
            customClass: 'pt-1 text-right',
            color: `text-errorColor`
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString($setup.errorMessage), 1 /* TEXT */)
            ]),
            _: 1 /* STABLE */
          })
        ]))
      : createCommentVNode("v-if", true)
  ]))
}

script$3.render = render$3;
script$3.__file = "src/components/TsForm/textArea.vue";

var script$2 = {
    components: {
        TsNormalText: script$6,
        TsIcon: script$5,
    },
    props: {
        options: {
            type: Array,
            required: true,
        },
    },
    name: "TsRadioCard",
    emits: ["update:modelValue"],
    setup(props, context) {
        const selectedOption = ref("");
        watch(selectedOption, () => {
            context.emit("update:modelValue", selectedOption.value);
        });
        return {
            selectedOption,
        };
    },
};

const _hoisted_1$2 = { class: "flex w-full flex-col space-y-2" };
const _hoisted_2$1 = ["onClick"];
const _hoisted_3$1 = { class: "flex flex-row space-x-2 items-center" };
const _hoisted_4$1 = /*#__PURE__*/createElementVNode("span", {
  class: /*#__PURE__*/normalizeClass(`h-[4px] mr-2 w-[4px] bg-paragraphTextLight rounded-full`)
}, null, -1 /* HOISTED */);

function render$2(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_icon = resolveComponent("ts-icon");
  const _component_ts_normal_text = resolveComponent("ts-normal-text");

  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
    (openBlock(true), createElementBlock(Fragment, null, renderList($props.options, (option, index) => {
      return (openBlock(), createElementBlock("div", {
        key: index,
        onClick: $event => ($setup.selectedOption = option.key),
        class: "flex w-full flex-row items-center justify-between cursor-pointer px-3 py-3 border-[1px] rounded"
      }, [
        createElementVNode("div", _hoisted_3$1, [
          createVNode(_component_ts_icon, {
            name: option.iconName,
            customClass: `h-[14px]`
          }, null, 8 /* PROPS */, ["name"]),
          (openBlock(true), createElementBlock(Fragment, null, renderList(option.name, (name, index) => {
            return (openBlock(), createBlock(_component_ts_normal_text, { key: index }, {
              default: withCtx(() => [
                (index == 0)
                  ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                      createTextVNode(toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
                  : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                      _hoisted_4$1,
                      createTextVNode(" " + toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
              ]),
              _: 2 /* DYNAMIC */
            }, 1024 /* DYNAMIC_SLOTS */))
          }), 128 /* KEYED_FRAGMENT */))
        ]),
        createVNode(_component_ts_icon, {
          name: `${option.key == $setup.selectedOption ? 'radio-active' : 'radio'}`,
          customClass: `h-[13px]`
        }, null, 8 /* PROPS */, ["name"])
      ], 8 /* PROPS */, _hoisted_2$1))
    }), 128 /* KEYED_FRAGMENT */))
  ]))
}

script$2.render = render$2;
script$2.__file = "src/components/TsForm/radioCard.vue";

var script$1 = {
    components: {
        TsNormalText: script$6,
        TsIcon: script$5,
    },
    props: {
        options: {
            type: Array,
            required: true,
        },
        hasSelectAll: {
            type: Boolean,
            default: false,
        },
        existingOptions: {
            type: Array,
            required: false,
        },
    },
    name: "TsCheckbox",
    emits: ["optionsSelected"],
    setup(props, context) {
        const selectedOption = ref([]);
        const selectOption = (key) => {
            if (selectedOption.value.includes(key)) {
                selectedOption.value = selectedOption.value.filter((eachKey) => eachKey != key);
            }
            else {
                selectedOption.value.push(key);
            }
            context.emit("optionsSelected", selectedOption.value);
        };
        const toggleSelectAll = () => {
            if (selectedOption.value.length < props.options.length) {
                selectedOption.value = [];
                props.options.forEach((content) => {
                    selectedOption.value.push(content.key);
                });
            }
            else {
                selectedOption.value = [];
            }
            context.emit("optionsSelected", selectedOption.value);
        };
        watch(props, () => {
            if (props.existingOptions) {
                selectedOption.value = props.existingOptions;
            }
        });
        return {
            selectedOption,
            toggleSelectAll,
            selectOption,
        };
    },
};

const _hoisted_1$1 = { class: "flex w-full flex-col space-y-2" };
const _hoisted_2 = { class: "flex flex-row space-x-2 items-center" };
const _hoisted_3 = /*#__PURE__*/createTextVNode(" Select all ");
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "flex flex-row space-x-2 items-center" };
const _hoisted_6 = /*#__PURE__*/createElementVNode("span", {
  class: /*#__PURE__*/normalizeClass(`h-[4px] mr-2 w-[4px] bg-paragraphTextLight rounded-full`)
}, null, -1 /* HOISTED */);

function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_normal_text = resolveComponent("ts-normal-text");
  const _component_ts_icon = resolveComponent("ts-icon");

  return (openBlock(), createElementBlock("div", _hoisted_1$1, [
    ($props.hasSelectAll)
      ? (openBlock(), createElementBlock("div", {
          key: 0,
          onClick: _cache[0] || (_cache[0] = $event => ($setup.toggleSelectAll())),
          class: "flex w-full flex-row items-center justify-between cursor-pointer px-3 py-3 border-[1px] rounded"
        }, [
          createElementVNode("div", _hoisted_2, [
            createVNode(_component_ts_normal_text, null, {
              default: withCtx(() => [
                _hoisted_3
              ]),
              _: 1 /* STABLE */
            })
          ]),
          createVNode(_component_ts_icon, {
            name: `${
          $setup.selectedOption.length == $props.options.length
            ? 'checkbox-active'
            : 'checkbox'
        }`,
            customClass: `h-[15px]`
          }, null, 8 /* PROPS */, ["name"])
        ]))
      : createCommentVNode("v-if", true),
    (openBlock(true), createElementBlock(Fragment, null, renderList($props.options, (option, index) => {
      return (openBlock(), createElementBlock("div", {
        key: index,
        onClick: $event => ($setup.selectOption(option.key)),
        class: "flex w-full flex-row items-center justify-between cursor-pointer px-3 py-3 border-[1px] rounded"
      }, [
        createElementVNode("div", _hoisted_5, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(option.name, (name, index) => {
            return (openBlock(), createBlock(_component_ts_normal_text, { key: index }, {
              default: withCtx(() => [
                (index == 0)
                  ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                      createTextVNode(toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
                  : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                      _hoisted_6,
                      createTextVNode(" " + toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
              ]),
              _: 2 /* DYNAMIC */
            }, 1024 /* DYNAMIC_SLOTS */))
          }), 128 /* KEYED_FRAGMENT */))
        ]),
        createVNode(_component_ts_icon, {
          name: `${
          $setup.selectedOption.includes(option.key) ? 'checkbox-active' : 'checkbox'
        }`,
          customClass: `h-[15px]`
        }, null, 8 /* PROPS */, ["name"])
      ], 8 /* PROPS */, _hoisted_4))
    }), 128 /* KEYED_FRAGMENT */))
  ]))
}

script$1.render = render$1;
script$1.__file = "src/components/TsForm/checkbox.vue";

var script = defineComponent({
    components: {},
    props: {
        parentRefs: {
            required: true,
        },
    },
    name: "TsFormWrapper",
    setup(props) {
        const formWrapper = ref(null);
        const fieldsToValidate = ref();
        watch(props, () => {
            fieldsToValidate.value = props.parentRefs;
        });
        const validate = () => {
            let formIsValid = true;
            for (const key in fieldsToValidate.value) {
                const componentName = key;
                const element = fieldsToValidate.value[componentName];
                if (element) {
                    if ("checkValidation" in element) {
                        element.checkValidation();
                        formIsValid = formIsValid && element.validationStatus;
                    }
                }
            }
            return formIsValid;
        };
        return {
            formWrapper,
            validate,
            fieldsToValidate,
        };
    },
});

const _hoisted_1 = { id: "form-wrapper" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("form", _hoisted_1, [
    renderSlot(_ctx.$slots, "default")
  ]))
}

script.render = render;
script.__file = "src/components/TsForm/wrapper.vue";

export { script$3 as a, script$2 as b, script$1 as c, script as d, script$4 as s };
