(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--contour-offset: 2px;--icon-color: #000;position:relative;z-index:0;width:100%;height:var(--control-height, 40px);border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}
.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
import { defineComponent as I, reactive as $, useSlots as q, computed as s, watch as R, ref as U, createElementBlock as u, openBlock as t, Fragment as x, createElementVNode as f, createVNode as B, normalizeClass as O, createCommentVNode as d, withModifiers as F, withKeys as z, createBlock as a, normalizeStyle as H, unref as r, toDisplayString as c, withCtx as K, renderSlot as L, createTextVNode as j } from "vue";

import { prettyBytes as g } from "@milaboratories/helpers";
import { getFileNameFromHandle as A, getFilePathFromHandle as G } from "@platforma-sdk/model";
import { getErrorMessage as J } from "../../helpers/error.js";
import Q from "../../utils/DoubleContour.vue.js";

import { useLabelNotch as W } from "../../utils/useLabelNotch.js";
import X from "../PlFileDialog/PlFileDialog.vue.js";
import m from "../PlIcon24/PlIcon24.vue.js";
import Y from "../PlTooltip/PlTooltip.vue.js";
import Z from "../../assets/images/required.svg.js";
import ee from "../PlSvg/PlSvg.vue.js";
const le = {
  key: 0,
  ref: "label"
}, te = ["data-placeholder"], oe = {
  key: 5,
  class: "pl-file-input__stats"
}, re = {
  key: 0,
  class: "pl-file-input__error"
}, ie = {
  key: 1,
  class: "pl-file-input__helper"
}, ke = /* @__PURE__ */ I({
  __name: "PlFileInput",
  props: {
    modelValue: {},
    label: { default: void 0 },
    required: { type: Boolean },
    dashed: { type: Boolean },
    extensions: { default: void 0 },
    placeholder: { default: void 0 },
    progress: { default: void 0 },
    error: { default: void 0 },
    helper: { default: void 0 },
    cellStyle: { type: Boolean, default: !1 },
    fileDialogTitle: { default: void 0 },
    fileDialogCloseOnOutsideClick: { type: Boolean, default: !0 }
  },
  emits: ["update:modelValue"],
  setup(l, { emit: N }) {
    const n = $({
      fileDialogOpen: !1,
      error: void 0
    }), v = q(), h = N, o = l, k = (e, i) => {
      if (e)
        try {
          return i(e);
        } catch (p) {
          return n.error = p instanceof Error ? p.message : String(p), e;
        }
    }, V = s(() => k(o.modelValue, A)), S = s(() => k(o.modelValue, G)), P = s(() => o.progress && !o.progress.done), E = s(() => o.progress && o.progress.done), _ = s(() => J(n.error, o.error)), y = s(() => typeof _.value == "string"), b = s(() => {
      const { status: e, done: i } = o.progress ?? {};
      return !e || !e.bytesTotal ? "" : e.bytesProcessed && !i ? g(e.bytesProcessed, {}) + " / " + g(e.bytesTotal, {}) : g(e.bytesTotal, {});
    }), T = s(() => {
      var i;
      const { progress: e } = o;
      return e ? {
        width: e.done ? "100%" : Math.round((((i = e.status) == null ? void 0 : i.progress) ?? 0) * 100) + "%"
      } : {};
    }), C = () => {
      n.fileDialogOpen = !0;
    }, w = (e) => {
      e.files.length && h("update:modelValue", e.files[0]);
    }, M = () => h("update:modelValue", void 0);
    R(
      () => o.modelValue,
      () => n.error = void 0,
      { immediate: !0 }
    );
    const D = U();
    return o.cellStyle || W(D), (e, i) => (t(), u(x, null, [
      f("div", {
        class: O([{ "pl-file-input__cell-style": !!l.cellStyle, "has-file": !!V.value }, "pl-file-input__envelope"])
      }, [
        f("div", {
          ref_key: "rootRef",
          ref: D,
          class: O([{ dashed: l.dashed, error: y.value }, "pl-file-input"]),
          tabindex: "0",
          onKeyup: z(C, ["enter"]),
          onClick: F(C, ["stop"])
        }, [
          f("div", {
            style: H(T.value),
            class: "pl-file-input__progress"
          }, null, 4),
          !l.cellStyle && l.label ? (t(), u("label", le, [
            l.required ? (t(), a(r(ee), {
              key: 0,
              uri: r(Z)
            }, null, 8, ["uri"])) : d("", !0),
            f("span", null, c(l.label), 1),
            r(v).tooltip || S.value ? (t(), a(r(Y), {
              key: 1,
              class: "info",
              position: "top"
            }, {
              tooltip: K(() => [
                r(v).tooltip ? L(e.$slots, "tooltip", { key: 0 }) : (t(), u(x, { key: 1 }, [
                  j(c(S.value), 1)
                ], 64))
              ]),
              _: 3
            })) : d("", !0)
          ], 512)) : d("", !0),
          y.value ? (t(), a(r(m), {
            key: 1,
            name: "restart"
          })) : P.value ? (t(), a(r(m), {
            key: 2,
            name: "cloud-upload"
          })) : E.value ? (t(), a(r(m), {
            key: 3,
            name: "success"
          })) : (t(), a(r(m), {
            key: 4,
            name: "paper-clip"
          })),
          f("div", {
            "data-placeholder": l.placeholder ?? "Choose file",
            class: "pl-file-input__filename"
          }, c(V.value), 9, te),
          b.value ? (t(), u("div", oe, c(b.value), 1)) : d("", !0),
          l.modelValue ? (t(), a(r(m), {
            key: 6,
            class: "pl-file-input__clear",
            name: "close",
            onClick: F(M, ["stop"])
          })) : d("", !0),
          B(Q, { class: "pl-file-input__contour" })
        ], 34),
        y.value ? (t(), u("div", re, c(_.value), 1)) : l.helper ? (t(), u("div", ie, c(l.helper), 1)) : d("", !0)
      ], 2),
      B(r(X), {
        modelValue: n.fileDialogOpen,
        "onUpdate:modelValue": i[0] || (i[0] = (p) => n.fileDialogOpen = p),
        "close-on-outside-click": l.fileDialogCloseOnOutsideClick,
        extensions: l.extensions,
        title: l.fileDialogTitle,
        "onImport:files": w
      }, null, 8, ["modelValue", "close-on-outside-click", "extensions", "title"])
    ], 64));
  }
});
export {
  ke as default
};
//# sourceMappingURL=PlFileInput.vue.js.map
