@voicenter-team/voicenter-ui-plus 2.0.10 → 3.0.0

package/library/components/VcPdfViewer/pdfjslib.mjs

@@ -0,0 +1,19 @@
+let pdfPromise = null;
+function loadPdf() {
+  if (!pdfPromise) {
+    pdfPromise = (async () => {
+      const pdfImport = import("pdfjs-dist/legacy/build/pdf.js");
+      const viewerImport = import("pdfjs-dist/legacy/web/pdf_viewer");
+      const [pdf, viewer] = await Promise.all([pdfImport, viewerImport]);
+      pdf.GlobalWorkerOptions.workerSrc = new URL("./pdf.worker.min.js", import.meta.url).toString();
+      return {
+        pdf,
+        PDFLinkService: viewer.PDFLinkService
+      };
+    })();
+  }
+  return pdfPromise;
+}
+export {
+  loadPdf
+};

package/library/components/VcPdfViewer/utils.mjs

@@ -0,0 +1,61 @@
+function getResolutionScale(canvasElt) {
+  return canvasElt.offsetWidth / canvasElt.width;
+}
+function clearCanvasElement(canvasElt) {
+  var _a;
+  (_a = canvasElt.getContext("2d")) == null ? void 0 : _a.clearRect(0, 0, canvasElt.width, canvasElt.height);
+}
+function clearAnnotationElement(annotationLayer) {
+  annotationLayer.style.visibility = "hidden";
+  while (annotationLayer.firstChild) {
+    annotationLayer.removeChild(annotationLayer.firstChild);
+  }
+}
+function addDocumentPrintStyles(printContainerElement, width, height) {
+  printContainerElement.appendChild(window.document.createElement("style")).textContent = `
+        @supports ((size:A4) and (size:1pt 1pt)) {
+            @page { margin: 1pt; size: ${width}pt ${height}pt; }
+        }
+        #print-canvas { display: none }
+        @media print {
+            body { margin: 0 }
+            canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }
+            #print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }
+            body > *:not(#print-container) { display: none; }
+        }
+        @media screen {
+            body { margin: 0 }
+        }
+    `;
+}
+function addDocumentPrintAttributes(printContainerElement) {
+  printContainerElement.setAttribute("frameBorder", "0");
+  printContainerElement.setAttribute("scrolling", "no");
+  printContainerElement.setAttribute("width", "0px");
+  printContainerElement.setAttribute("height", "0px");
+  printContainerElement.style.cssText = "position: absolute; top: 0; left: 0";
+}
+function findPos(element) {
+  if (!element) {
+    return 0;
+  }
+  return element.offsetTop - 64;
+}
+function scrollToPage(container, idPage) {
+  if (container) {
+    const el = findPos(document.getElementById(idPage));
+    container.scrollTo({
+      top: el,
+      behavior: "smooth"
+    });
+  }
+}
+export {
+  addDocumentPrintAttributes,
+  addDocumentPrintStyles,
+  clearAnnotationElement,
+  clearCanvasElement,
+  findPos,
+  getResolutionScale,
+  scrollToPage
+};

package/library/components/VcPhoneInput/VcFlagLabel.vue.mjs

@@ -0,0 +1,32 @@
+import '../../assets/components/VcPhoneInput/VcFlagLabel.css';
+import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+const _hoisted_1 = { class: "vc-flag-label" };
+const _hoisted_2 = {
+  key: 0,
+  class: "vc-flag-label__name"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "country-code"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcFlagLabel",
+  props: {
+    country: {},
+    showName: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass([`country--${__props.country.icon}`, "vc-flag-label__icon"])
+        }, null, 2),
+        __props.showName ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.country.name), 1)) : createCommentVNode("", true),
+        __props.showName ? (openBlock(), createElementBlock("div", _hoisted_3, " (+" + toDisplayString(__props.country.dialCode) + ") ", 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcPhoneInput/VcFlagLabel.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcFlagLabel.vue.mjs";
+import '../../assets/components/VcPhoneInput/VcFlagLabel.css';/* empty css                  */
+export {
+  _sfc_main as default
+};

package/library/components/VcPhoneInput/VcPhoneInput.vue.mjs

@@ -0,0 +1,367 @@
+import { defineComponent, ref, shallowRef, computed, watch, openBlock, createElementBlock, normalizeClass, createVNode, unref, createSlots, withCtx, createBlock, createCommentVNode, createElementVNode, toDisplayString, Fragment, renderList, renderSlot, normalizeStyle } from "vue";
+import { ElInput, ElSelect, ElOption } from "element-plus";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcPopover/VcPopover.css';import '../../assets/components/VcPhoneInput/VcFlagLabel.css';import '../../assets/node_modules/element-plus/theme-chalk/src/select.css';import '../../assets/node_modules/element-plus/theme-chalk/src/option-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tag.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popper.css';import '../../assets/node_modules/element-plus/theme-chalk/src/scrollbar.css';import '../../assets/node_modules/element-plus/theme-chalk/src/option.css';import '../../assets/node_modules/element-plus/theme-chalk/src/input.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcPhoneInput/VcPhoneInput.css';/* empty css                                                         */
+/* empty css                                                          */
+/* empty css                                                           */
+/* empty css                                                              */
+/* empty css                                                           */
+/* empty css                                                        */
+/* empty css                                                                 */
+/* empty css                                                           */
+import _sfc_main$3 from "./VcFlagLabel.vue.mjs";
+/* empty css                  */
+import countries from "../../enum/countries.mjs";
+import useInputBase from "../../composables/input/useInputBase.mjs";
+import { DEFAULT_COLOR, DEFAULT_ICON_SIZE } from "../../enum/inputDefaults.mjs";
+import _sfc_main$2 from "../VcPopover/VcPopover.vue.mjs";
+/* empty css                           */
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+const _hoisted_1 = ["data-test"];
+const _hoisted_2 = { class: "inline-flex" };
+const _hoisted_3 = { class: "p-1 text-center" };
+const _hoisted_4 = {
+  key: 0,
+  class: "inline-flex"
+};
+const colorClassName = "vc-phone-input--";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcPhoneInput",
+  props: {
+    modelValue: {},
+    defaultCountry: { default: void 0 },
+    preferredCountries: { default: () => [] },
+    ignoredCountries: { default: () => ["RU"] },
+    dataTestName: { default: "phoneNumberInput" },
+    placeholder: { default: void 0 },
+    maxLength: { default: void 0 },
+    minLength: { default: void 0 },
+    readonly: { type: Boolean, default: false },
+    isError: { type: Boolean, default: false },
+    id: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean },
+    emptyText: {},
+    prefixIcon: { default: "vc-icon-phone" },
+    prefixIconSize: { default: DEFAULT_ICON_SIZE },
+    name: { default: void 0 },
+    maxWidth: { default: "100%" },
+    prefixIconColor: { default: "" },
+    color: { default: DEFAULT_COLOR }
+  },
+  emits: ["update:modelValue", "update:details", "update:country"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const phoneLibPromise = import("libphonenumber-js");
+    const props = __props;
+    const emit = __emit;
+    const { prefixClasses, prefixStyle, prefixIcon: resolvedPrefixIcon } = useInputBase(props, {
+      colorClass: colorClassName
+    });
+    const activeCountryCode = ref(props.defaultCountry);
+    const isDefaultState = ref(true);
+    const phoneNumber = ref("");
+    const countryCallingCode = ref("");
+    const countrySelectFilterModel = ref(void 0);
+    const phoneLib = shallowRef(null);
+    void phoneLibPromise.then((mod) => {
+      phoneLib.value = mod;
+    });
+    const inputClasses = computed(() => {
+      const colorClass = props.color ? colorClassName + props.color : "";
+      return [
+        colorClass,
+        props.isError ? "is--error" : ""
+      ].join(" ");
+    });
+    const filteredBySearchCountries = computed(() => {
+      const filterModel = countrySelectFilterModel.value;
+      if (!filterModel) {
+        return filteredByPreferredCountries.value;
+      }
+      return filteredByPreferredCountries.value.filter((country) => {
+        const compareCountryData = country.iso2 + country.name + country.dialCode;
+        return compareCountryData.toLowerCase().includes(filterModel.toLowerCase());
+      });
+    });
+    const filteredByPreferredCountries = computed(() => {
+      var _a;
+      if ((_a = props.preferredCountries) == null ? void 0 : _a.length) {
+        const preferredCountriesSet = new Set(props.preferredCountries.map((c) => c.toUpperCase()));
+        const preferredCountries = props.preferredCountries.map((country) => countries.find((c) => c.iso2 === country.toUpperCase())).filter((c) => Boolean(c)).map((country) => ({
+          ...country,
+          preferred: true
+        }));
+        return [...preferredCountries, ...countries.filter((c) => !preferredCountriesSet.has(c.iso2))];
+      }
+      return [...countries];
+    });
+    const selectedCountry = computed(() => {
+      return findCountryByIso(activeCountryCode.value);
+    });
+    const formattedPhoneNumber = computed(() => {
+      if (!phoneLib.value) return phoneNumber.value;
+      return phoneLib.value.formatIncompletePhoneNumber(phoneNumber.value, activeCountryCode.value) || "";
+    });
+    const isValidNumber = computed(() => {
+      var _a;
+      if (!phoneLib.value) return false;
+      const parsedNumber = phoneLib.value.parsePhoneNumberFromString(phoneNumber.value, activeCountryCode.value);
+      if (!parsedNumber) {
+        return false;
+      }
+      if (parsedNumber.country && (((_a = props.ignoredCountries) == null ? void 0 : _a.includes(parsedNumber.country)) || !findCountryByIso(parsedNumber.country))) {
+        return false;
+      }
+      return parsedNumber.isValid();
+    });
+    function onCountrySelectVisibilityChange() {
+      countrySelectFilterModel.value = void 0;
+    }
+    function filterMethod(value) {
+      countrySelectFilterModel.value = value;
+      return true;
+    }
+    function findCountryByIso(iso) {
+      if (iso) {
+        return filteredByPreferredCountries.value.find((country) => country.iso2 === iso.toUpperCase());
+      }
+    }
+    function findCountryByDialCode(dialCode) {
+      return filteredByPreferredCountries.value.find((country) => Number(country.dialCode) === Number(dialCode));
+    }
+    function checkCode(code) {
+      var _a;
+      return code ? ((_a = props.ignoredCountries) == null ? void 0 : _a.includes(code)) ? void 0 : code : void 0;
+    }
+    async function setPhoneData(value, country) {
+      if (!value || value === "+") {
+        return;
+      }
+      const countryCode = checkCode(country);
+      const lib = phoneLib.value ?? await phoneLibPromise;
+      const parsedPhoneNumber = lib.default(value, countryCode);
+      countryCallingCode.value = (parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.countryCallingCode) || countryCallingCode.value;
+      activeCountryCode.value = checkCode(parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.country) || countryCode || props.defaultCountry;
+      phoneNumber.value = (parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.number) || value;
+      if (phoneNumber.value.length <= 1) {
+        activeCountryCode.value = void 0;
+      }
+    }
+    function handleNationalNumberInput(value) {
+      isDefaultState.value = false;
+      phoneNumber.value = ensurePlusPrefix(value);
+      void handleTelNumberChange();
+    }
+    async function getTeInputData() {
+      const telInput = {
+        countryCallingCode: "",
+        country: "",
+        nationalNumber: "",
+        formatted: "",
+        number: phoneNumber.value,
+        isValid: false
+      };
+      const lib = phoneLib.value ?? await phoneLibPromise;
+      if (selectedCountry.value) {
+        const parsedPhoneNumber = lib.default(phoneNumber.value, activeCountryCode.value);
+        telInput.country = (parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.country) || activeCountryCode.value || "";
+        telInput.countryCallingCode = (parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.countryCallingCode) || selectedCountry.value.dialCode || "";
+        telInput.nationalNumber = (parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.nationalNumber) || phoneNumber.value;
+        telInput.number = (parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.number) || phoneNumber.value;
+        telInput.formatted = lib.formatIncompletePhoneNumber(telInput.number);
+        telInput.isValid = (parsedPhoneNumber == null ? void 0 : parsedPhoneNumber.isValid()) || false;
+      } else {
+        telInput.number = phoneNumber.value;
+      }
+      return telInput;
+    }
+    async function handleTelNumberChange() {
+      const data = await getTeInputData();
+      emit("update:modelValue", data.number);
+      emit("update:details", data);
+    }
+    function handleCountryCodeInput(value) {
+      const oldCountryCode = activeCountryCode.value;
+      activeCountryCode.value = value;
+      checkPhonePrefixNumber(oldCountryCode);
+      void handleTelNumberChange();
+      emit("update:country", value);
+    }
+    function checkPhonePrefixNumber(oldCountryCode) {
+      var _a, _b, _c;
+      if (phoneNumber.value.length > 6) {
+        const prefixCode = (_a = selectedCountry.value) == null ? void 0 : _a.dialCode;
+        if (!phoneNumber.value.startsWith(`+${prefixCode}`)) {
+          const oldCode = (_b = findCountryByIso(oldCountryCode)) == null ? void 0 : _b.dialCode;
+          phoneNumber.value = phoneNumber.value.replace(`+${oldCode}`, `+${prefixCode}`);
+        }
+      } else {
+        activeCountryCode.value = oldCountryCode;
+        const dialCode = (_c = selectedCountry.value) == null ? void 0 : _c.dialCode;
+        if (dialCode) {
+          phoneNumber.value = `+${dialCode}`;
+        }
+      }
+    }
+    function getValidState() {
+      return isValidNumber.value;
+    }
+    function ensurePlusPrefix(newValue) {
+      const stringValue = String(newValue);
+      return "+" + stringValue.replace(/[\D]+/g, "");
+    }
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        void setPhoneData(ensurePlusPrefix(newValue), activeCountryCode.value);
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.defaultCountry,
+      (val) => {
+        checkPhonePrefixNumber(val);
+      },
+      {
+        immediate: true
+      }
+    );
+    __expose({
+      getValidState,
+      setPhoneData,
+      findCountryByDialCode,
+      /* State/computeds surfaced for tests and integrators that need to
+       * drive the component imperatively (e.g. async-validator rules). */
+      handleNationalNumberInput,
+      handleTelNumberChange,
+      handleCountryCodeInput,
+      onCountrySelectVisibilityChange,
+      filterMethod,
+      activeCountryCode,
+      countrySelectFilterModel,
+      phoneNumber,
+      isDefaultState,
+      isValidNumber,
+      filteredByPreferredCountries,
+      filteredBySearchCountries,
+      selectedCountry,
+      formattedPhoneNumber
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-test": __props.dataTestName,
+        class: normalizeClass([[{
+          "is--disabled": __props.disabled
+        }, inputClasses.value], "vc-phone-input"])
+      }, [
+        createVNode(unref(ElInput), {
+          id: __props.id,
+          ref: "telInput",
+          class: normalizeClass(["vc-input vc-tel-input", activeCountryCode.value ? "el-input-group--prepend" : ""]),
+          disabled: __props.disabled,
+          readonly: __props.readonly,
+          placeholder: __props.placeholder,
+          maxlength: __props.maxLength,
+          minlength: __props.minLength,
+          name: __props.name,
+          "model-value": formattedPhoneNumber.value,
+          onInput: handleNationalNumberInput
+        }, createSlots({
+          suffix: withCtx(() => [
+            formattedPhoneNumber.value && !isDefaultState.value ? (openBlock(), createElementBlock("span", _hoisted_4, [
+              isValidNumber.value ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                icon: "vc-icon-checkmark icon-sm text-success"
+              })) : (openBlock(), createBlock(_sfc_main$1, {
+                key: 1,
+                icon: "vc-icon-cross icon-sm text-error"
+              }))
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          activeCountryCode.value !== void 0 ? {
+            name: "prepend",
+            fn: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                open: countrySelectFilterModel.value !== void 0 && countrySelectFilterModel.value !== "",
+                "popover-width": "50",
+                "max-width": "100%",
+                placement: "top",
+                trigger: "manual"
+              }, {
+                reference: withCtx(() => [
+                  createVNode(unref(ElSelect), {
+                    "model-value": activeCountryCode.value,
+                    disabled: __props.disabled || __props.readonly,
+                    placeholder: " ",
+                    "popper-class": "vc-tel-input__dropdown",
+                    class: "vc-tel-select vc-select",
+                    placement: "bottom-start",
+                    filterable: "",
+                    "filter-method": filterMethod,
+                    style: { "width": "62px" },
+                    onVisibleChange: onCountrySelectVisibilityChange,
+                    onChange: handleCountryCodeInput
+                  }, {
+                    prefix: withCtx(() => [
+                      renderSlot(_ctx.$slots, "prefix", {
+                        countryCode: activeCountryCode.value,
+                        country: selectedCountry.value
+                      }, () => [
+                        createElementVNode("div", _hoisted_2, [
+                          selectedCountry.value ? (openBlock(), createBlock(_sfc_main$3, {
+                            key: 0,
+                            country: selectedCountry.value,
+                            "show-name": false
+                          }, null, 8, ["country"])) : createCommentVNode("", true)
+                        ])
+                      ])
+                    ]),
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(filteredBySearchCountries.value, (countryItem) => {
+                        return openBlock(), createBlock(unref(ElOption), {
+                          key: countryItem.iso2,
+                          value: countryItem.iso2,
+                          label: `+${countryItem.dialCode}`,
+                          "default-first-option": true
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_sfc_main$3, { country: countryItem }, null, 8, ["country"])
+                          ]),
+                          _: 2
+                        }, 1032, ["value", "label"]);
+                      }), 128))
+                    ]),
+                    _: 3
+                  }, 8, ["model-value", "disabled"])
+                ]),
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_3, toDisplayString(countrySelectFilterModel.value), 1)
+                ]),
+                _: 3
+              }, 8, ["open"])
+            ]),
+            key: "0"
+          } : {
+            name: "prefix",
+            fn: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                icon: unref(resolvedPrefixIcon),
+                class: normalizeClass(unref(prefixClasses)),
+                style: normalizeStyle(unref(prefixStyle))
+              }, null, 8, ["icon", "class", "style"])
+            ]),
+            key: "1"
+          }
+        ]), 1032, ["id", "class", "disabled", "readonly", "placeholder", "maxlength", "minlength", "name", "model-value"])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcPhoneInput/VcPhoneInput.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcPhoneInput.vue.mjs";
+import '../../assets/components/VcPhoneInput/VcPhoneInput.css';/* empty css                   */
+export {
+  _sfc_main as default
+};