'use strict';

var vue = require('vue');
var TsIcon = require('./TsIcon.js');
var normalText = require('./normalText-7b937f11.js');

var script$4 = vue.defineComponent({
    name: "TsSelect",
    components: {
        TsIcon: TsIcon["default"],
        TsNormalText: normalText.script,
    },
    props: {
        withKey: {
            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"],
    setup(props, context) {
        const isFocused = vue.ref(false);
        const showOption = vue.ref(false);
        const tabIndex = Math.random();
        const valueData = vue.toRef(props, "modelValue");
        const textValue = vue.ref("");
        const selectedItems = vue.ref([]);
        vue.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.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 = ["value", "placeholder"];
const _hoisted_3$2 = {
  key: 2,
  class: "absolute top-[90%] flex flex-col left-0 w-full py-3 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 = vue.resolveComponent("ts-normal-text");
  const _component_ts_icon = vue.resolveComponent("ts-icon");

  return (vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass(`flex flex-col space-y-2 ${_ctx.defaultSize}`)
  }, [
    (_ctx.hasTitle)
      ? (vue.openBlock(), vue.createBlock(_component_ts_normal_text, { key: 0 }, {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "title")
          ]),
          _: 3 /* FORWARDED */
        }))
      : vue.createCommentVNode("v-if", true),
    vue.createElementVNode("div", {
      class: vue.normalizeClass(`flex relative flex-row items-center space-x-1 justify-between w-full ${_ctx.customClass} `),
      id: 'container' + _ctx.tabIndex,
      onFocus: _cache[2] || (_cache[2] = $event => {
        _ctx.showOption = true;
        _ctx.isFocused = true;
      }),
      onBlur: _cache[3] || (_cache[3] = $event => {
        _ctx.isFocused = false;
        _ctx.showOption = false;
      }),
      tabindex: _ctx.tabIndex
    }, [
      (!_ctx.isMultiple)
        ? (vue.openBlock(), vue.createElementBlock("input", {
            key: 0,
            ref: "select",
            value: _ctx.withKey ? _ctx.valueData : _ctx.textValue,
            placeholder: _ctx.placeholder,
            disabled: "",
            class: vue.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, 10 /* CLASS, PROPS */, _hoisted_2$3))
        : (vue.openBlock(), vue.createElementBlock("div", {
            key: 1,
            onClick: _cache[0] || (_cache[0] = $event => {
          _ctx.showOption = true;
          _ctx.isFocused = true;
        }),
            class: vue.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`)
          }, [
            vue.createTextVNode(vue.toDisplayString(_ctx.selectedItems.length == 0 ? "Select" : "") + " ", 1 /* TEXT */),
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selectedItems, (selected, index) => {
              return (vue.openBlock(), vue.createElementBlock("span", { key: index }, vue.toDisplayString(_ctx.getSelectedOption(selected)) + " " + vue.toDisplayString(index == _ctx.selectedItems.length - 1 ? "" : ", "), 1 /* TEXT */))
            }), 128 /* KEYED_FRAGMENT */))
          ], 2 /* CLASS */)),
      vue.createVNode(_component_ts_icon, {
        onClick: _cache[1] || (_cache[1] = $event => {
          _ctx.showOption = true;
          _ctx.isFocused = true;
        }),
        name: "dropdown",
        "custom-class": "md:h-[7px] h-[6px] cursor-pointer"
      }),
      (_ctx.showOption)
        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option, index) => {
              return (vue.openBlock(), vue.createElementBlock("div", {
                key: index,
                class: "py-3 px-3 hover:bg-gray-100 flex flex-row items-center space-x-2 cursor-pointer",
                onClick: vue.withModifiers($event => (_ctx.selectValue(option)), ["stop"])
              }, [
                (_ctx.isMultiple)
                  ? (vue.openBlock(), vue.createElementBlock("span", {
                      key: 0,
                      class: vue.normalizeClass(`h-[10px] w-[10px] rounded-full border-[1px] border-primary ${
              _ctx.itemIsSelected(option.key) ? 'bg-primary' : ''
            }`)
                    }, null, 2 /* CLASS */))
                  : vue.createCommentVNode("v-if", true),
                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.withKey ? option.key + " - " : "") + " " + vue.toDisplayString(option.value), 1 /* TEXT */)
              ], 8 /* PROPS */, _hoisted_4$2))
            }), 128 /* KEYED_FRAGMENT */))
          ]))
        : vue.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: normalText.script,
    },
    props: {
        padding: {
            type: String,
            default: "py-3 px-3",
        },
        placeholder: {
            type: String,
            default: "",
        },
        rows: {
            type: String,
            default: "5",
        },
    },
    name: "TsTextArea",
    emits: ["update:modelValue"],
    setup(props, context) {
        const content = vue.ref("");
        vue.watch(content, () => {
            context.emit("update:modelValue", content.value);
        });
        return {
            content,
        };
    },
};

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

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

  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
    vue.createVNode(_component_ts_normal_text, null, {
      default: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, "title")
      ]),
      _: 3 /* FORWARDED */
    }),
    vue.withDirectives(vue.createElementVNode("textarea", {
      rows: $props.rows,
      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.content) = $event)),
      class: vue.normalizeClass(`focus:outline-none border-[1px] resize-none border-gray-200 rounded ${$props.padding} placeholder-slate-500`),
      placeholder: $props.placeholder
    }, "\n    ", 10 /* CLASS, PROPS */, _hoisted_2$2), [
      [vue.vModelText, $setup.content]
    ])
  ]))
}

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

var script$2 = {
    components: {
        TsNormalText: normalText.script,
        TsIcon: TsIcon["default"],
    },
    props: {
        options: {
            type: Array,
            required: true,
        },
    },
    name: "TsRadioCard",
    emits: ["update:modelValue"],
    setup(props, context) {
        const selectedOption = vue.ref("");
        vue.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__*/vue.createElementVNode("span", {
  class: /*#__PURE__*/vue.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 = vue.resolveComponent("ts-icon");
  const _component_ts_normal_text = vue.resolveComponent("ts-normal-text");

  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.options, (option, index) => {
      return (vue.openBlock(), vue.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"
      }, [
        vue.createElementVNode("div", _hoisted_3$1, [
          vue.createVNode(_component_ts_icon, {
            name: option.iconName,
            customClass: `h-[14px]`
          }, null, 8 /* PROPS */, ["name"]),
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(option.name, (name, index) => {
            return (vue.openBlock(), vue.createBlock(_component_ts_normal_text, { key: index }, {
              default: vue.withCtx(() => [
                (index == 0)
                  ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                      vue.createTextVNode(vue.toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
                  : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                      _hoisted_4$1,
                      vue.createTextVNode(" " + vue.toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
              ]),
              _: 2 /* DYNAMIC */
            }, 1024 /* DYNAMIC_SLOTS */))
          }), 128 /* KEYED_FRAGMENT */))
        ]),
        vue.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: normalText.script,
        TsIcon: TsIcon["default"],
    },
    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 = vue.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);
        };
        vue.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__*/vue.createTextVNode(" Select all ");
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "flex flex-row space-x-2 items-center" };
const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("span", {
  class: /*#__PURE__*/vue.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 = vue.resolveComponent("ts-normal-text");
  const _component_ts_icon = vue.resolveComponent("ts-icon");

  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
    ($props.hasSelectAll)
      ? (vue.openBlock(), vue.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"
        }, [
          vue.createElementVNode("div", _hoisted_2, [
            vue.createVNode(_component_ts_normal_text, null, {
              default: vue.withCtx(() => [
                _hoisted_3
              ]),
              _: 1 /* STABLE */
            })
          ]),
          vue.createVNode(_component_ts_icon, {
            name: `${
          $setup.selectedOption.length == $props.options.length
            ? 'checkbox-active'
            : 'checkbox'
        }`,
            customClass: `h-[15px]`
          }, null, 8 /* PROPS */, ["name"])
        ]))
      : vue.createCommentVNode("v-if", true),
    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.options, (option, index) => {
      return (vue.openBlock(), vue.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"
      }, [
        vue.createElementVNode("div", _hoisted_5, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(option.name, (name, index) => {
            return (vue.openBlock(), vue.createBlock(_component_ts_normal_text, { key: index }, {
              default: vue.withCtx(() => [
                (index == 0)
                  ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                      vue.createTextVNode(vue.toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
                  : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                      _hoisted_6,
                      vue.createTextVNode(" " + vue.toDisplayString(name), 1 /* TEXT */)
                    ], 64 /* STABLE_FRAGMENT */))
              ]),
              _: 2 /* DYNAMIC */
            }, 1024 /* DYNAMIC_SLOTS */))
          }), 128 /* KEYED_FRAGMENT */))
        ]),
        vue.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 = vue.defineComponent({
    components: {},
    props: {
        parentRefs: {
            required: true,
        },
    },
    name: "TsFormWrapper",
    setup(props) {
        const formWrapper = vue.ref(null);
        const fieldsToValidate = vue.ref();
        vue.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.checkValidation) {
                    element.checkValidation();
                    formIsValid = formIsValid && element.validationStatus;
                }
            }
            return formIsValid;
        };
        return {
            formWrapper,
            validate,
        };
    },
});

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

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

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

exports.script = script$4;
exports.script$1 = script$3;
exports.script$2 = script$2;
exports.script$3 = script$1;
exports.script$4 = script;
