@dxtmisha/constructor 0.39.5 → 0.52.0

package/dist/field.js

@@ -1,515 +1,221 @@
-var u = Object.defineProperty;
-var m = (n, e, s) => e in n ? u(n, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[e] = s;
-var t = (n, e, s) => m(n, typeof e != "symbol" ? e + "" : e, s);
-import { computed as a, watch as b, onUnmounted as f, onMounted as y, onUpdated as v, h as r } from "vue";
-import { isDomRuntime as g, EventItem as _, getElementId as S, DesignConstructorAbstract as I, isString as w } from "@dxtmisha/functional";
-import { C as N } from "./CaptionInclude-AFVF4qyd.js";
-import { P as x, S as B } from "./SuffixInclude-C7JNYCJK.js";
-import { E as $ } from "./EnabledInclude-DGeuJhOr.js";
-import { E as C } from "./EventClickInclude-eDWqxK0d.js";
-import { A as d } from "./AriaStaticInclude-CFGewqpn.js";
-import { F as L } from "./FieldLabelInclude-B4OGaJ1r.js";
-import { F as E } from "./FieldMessageInclude-CktVHvWW.js";
-import { S as k } from "./SkeletonInclude-BIUzAO2s.js";
-import { I as A } from "./IconTrailingInclude-CdsOcDxv.js";
-import { P as F } from "./ProgressInclude-UBipdctr.js";
-class T {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param className class name/ название класса
-   */
-  constructor(e, s) {
-    /**
-     * Determines whether to display arrows.
-     *
-     * Определяет, требуется ли отображение стрелок.
-     */
-    t(this, "isArrow", a(
-      () => !!((this.props.arrowCarousel || this.props.arrowStepper) && !this.props.disabled)
-    ));
-    /**
-     * Determines whether to display the "Delete" button.
-     *
-     * Определяет, требуется ли отображение кнопки "Удалить".
-     */
-    t(this, "isCancel", a(() => !!(this.props.cancel && !this.props.readonly && !this.props.disabled && !this.props.arrowCarousel && !this.props.arrowStepper && (this.props.cancel === "auto" && this.props.cancelShow || this.props.cancel === "always"))));
-    /**
-     * Returns data for the data deletion button.
-     *
-     * Возвращает данные для кнопки удаления данных.
-     */
-    t(this, "cancelBind", a(() => ({
-      class: `${this.className}__cancel`,
-      icon: this.props.iconClose,
-      dynamic: !0,
-      "data-event-type": "cancel"
-    })));
-    /**
-     * Returns data for the left arrow.
-     *
-     * Возвращает данные для стрелки слева.
-     */
-    t(this, "previousBind", a(() => ({
-      class: `${this.className}__previous`,
-      icon: this.props.arrowCarousel ? this.props.iconArrowLeft : this.props.iconMinus,
-      disabled: this.props.disabled || this.props.disabledPrevious,
-      dynamic: !0,
-      "data-event-type": "previous"
-    })));
-    /**
-     * Returns data for the right arrow.
-     *
-     * Возвращает данные для стрелки справа.
-     */
-    t(this, "nextBind", a(() => ({
-      class: `${this.className}__next`,
-      icon: this.props.arrowCarousel ? this.props.iconArrowRight : this.props.iconPlus,
-      disabled: this.props.disabled || this.props.disabledNext,
-      dynamic: !0,
-      "data-event-type": "next"
-    })));
-    this.props = e, this.className = s;
-  }
-}
-class q {
-  /**
-   * Constructor
-   * @param element main element/ главный элемент
-   * @param className class name/ название класса
-   */
-  constructor(e, s) {
-    t(this, "left", 0);
-    t(this, "right", 0);
-    t(this, "title", 0);
-    t(this, "event");
-    /**
-     * Update margins.
-     *
-     * Обновление отступов.
-     */
-    t(this, "update", () => {
-      requestAnimationFrame(() => {
-        var i, o, l, h;
-        const e = this.getElementSpace(), s = this.getElementPrefix();
-        e && (this.left = e.offsetLeft, this.right = ((o = (i = e.parentElement) == null ? void 0 : i.offsetWidth) != null ? o : 0) - this.left - e.offsetWidth), this.title = (h = (l = s == null ? void 0 : s.offsetLeft) != null ? l : e == null ? void 0 : e.offsetLeft) != null ? h : 0, this.make();
-      });
-    });
-    this.element = e, this.className = s, b(e, () => this.update, { immediate: !0 }), g() && (this.event = new _(window, "resize", this.update), f(() => {
-      var i;
-      return (i = this.event) == null ? void 0 : i.stop();
-    })), y(this.update), v(this.update);
-  }
-  /**
-   * Returns separator elements.
-   *
-   * Возвращает элементы-разделители.
-   */
-  getElementSpace() {
-    var e, s;
-    return (s = (e = this.element.value) == null ? void 0 : e.querySelector(`.${this.className}__body__scoreboard__space`)) != null ? s : void 0;
-  }
-  /**
-   * Returns element with prefix.
-   *
-   * Возвращает элемент с префиксом.
-   */
-  getElementPrefix() {
-    var e, s;
-    return (s = (e = this.element.value) == null ? void 0 : e.querySelector(`.${this.className}__prefix`)) != null ? s : void 0;
-  }
-  /**
-   * Update input field margins.
-   *
-   * Обновление отступов для поля ввода.
-   */
-  make() {
-    const e = this.element.value;
-    e && (e.style.setProperty(`--${this.className}-sys-left`, `${this.left}px`), e.style.setProperty(`--${this.className}-sys-right`, `${this.right}px`), e.style.setProperty(`--${this.className}-sys-title`, `${this.title}px`), e.classList.contains(`${this.className}--show`) || requestAnimationFrame(() => e.classList.add(`${this.className}--show`)));
-  }
-}
-class P {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
-   * @param element input element/ элемент ввода
-   * @param classDesign design name/ название дизайна
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(e, s, i, o, l, h, c, p) {
-    t(this, "id", S());
-    t(this, "labelId", `${this.id}-label`);
-    t(this, "helperId", `${this.id}-helper`);
-    t(this, "validationId", `${this.id}-validation`);
-    t(this, "counterId", `${this.id}-counter`);
-    t(this, "icon");
-    t(this, "caption");
-    t(this, "prefix");
-    t(this, "suffix");
-    t(this, "fieldLabel");
-    t(this, "fieldMessage");
-    t(this, "progress");
-    t(this, "enabled");
-    t(this, "event");
-    t(this, "skeleton");
-    t(this, "icons");
-    t(this, "size");
-    /** Checks if an error needs to be displayed/ Проверяет, надо ли выводить ошибку */
-    t(this, "isValidation", a(() => !!(this.props.validationMessage && (this.props.forceShowMessage || !this.props.readonly && !this.props.disabled))));
-    /** Values for the class/ Значения для класса */
-    t(this, "classes", a(() => ({
-      [`${this.className}--cancel`]: this.icons.isCancel.value,
-      [`${this.className}--suffix`]: this.props.suffix,
-      [`${this.className}--validation`]: this.isValidation.value
-    })));
-    /**
-     * Returns data for the slot/ Возвращает данные для слота
-     */
-    t(this, "control", a(() => {
-      const e = String(this.props.id || this.id), s = `${this.className}__body__input ${this.skeleton.classesSkeleton.classText}`;
-      return {
-        id: e,
-        className: s,
-        classHidden: `${this.className}__body__hidden`,
-        classForFocus: `${this.className}__body__focus`,
-        binds: {
-          id: e,
-          className: s,
-          ...d.labelledby(this.labelId),
-          ...d.describedby(this.getDescribedby()),
-          ...d.invalid(this.isValidation.value)
-        }
-      };
-    }));
-    this.props = e, this.refs = s, this.element = i, this.classDesign = o, this.className = l, this.components = h, this.slots = c, this.emits = p, this.skeleton = new k(
-      this.props,
-      this.classDesign,
-      ["classBackground"]
-    ), this.icon = new A(this.props, this.className, this.components), this.caption = new N(this.props, this.className, this.slots), this.prefix = new x(this.props, this.className, this.slots), this.suffix = new B(this.props, this.className, this.slots), this.fieldLabel = new L(
-      this.props,
-      this.className,
-      this.components,
-      this.slots,
-      this.refs.counterTop,
-      this.labelId,
-      this.counterId,
-      this.skeleton.binds
-    ), this.fieldMessage = new E(
-      this.props,
-      this.className,
-      this.components,
-      void 0,
-      a(() => !this.props.counterTop),
-      this.helperId,
-      this.validationId,
-      this.counterId,
-      this.skeleton.binds
-    ), this.progress = new F(
-      this.props,
-      this.className,
-      this.components,
-      {
-        circular: !0,
-        position: "static",
-        dense: !0
-      }
-    ), this.enabled = new $(this.props, this.progress), this.event = new C(this.props, this.enabled, this.emits), this.icons = new T(this.props, this.className), this.size = new q(this.element, this.className);
-  }
-  /**
-   * Get ARIA describedby attribute.
-   *
-   * Получить атрибут ARIA describedby.
-   */
-  getDescribedby() {
-    const e = [];
-    return this.props.helperMessage && e.push(this.helperId), this.isValidation.value && e.push(this.validationId), this.props.counterShow && e.push(this.counterId), e.join(" ");
-  }
-}
-const Q = {
-  // :default [!] System label / Системная метка
-  arrowAlign: "right",
-  cancel: "auto"
-};
-class X extends I {
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(s, i, o) {
-    super(
-      s,
-      i,
-      o
-    );
-    t(this, "item");
-    /**
-     * Generates body.
-     *
-     * Генерирует тело.
-     */
-    t(this, "renderBody", () => {
-      var i;
-      const s = [
-        this.initSlot("default", void 0, this.item.control.value),
-        this.renderBodyLabel(),
-        this.renderBodyScoreboard(),
-        this.renderBodyBorder()
-      ];
-      return [
-        r(
-          "span",
-          {
-            class: [
-              (i = this.classes) == null ? void 0 : i.value.body,
-              this.item.skeleton.classes.value
-            ],
-            onClick: this.item.event.onClick
-          },
-          s
-        )
-      ];
-    });
-    /**
-     * Generates data for the title.
-     *
-     * Генерирует данные для заголовка.
-     */
-    t(this, "renderBodyLabel", () => {
-      var i, o, l, h;
-      const s = [
-        this.props.label
-      ];
-      return this.props.required && s.push(r(
-        "span",
-        { class: (i = this.classes) == null ? void 0 : i.value.required }
-      )), r(
-        "span",
-        { class: (o = this.classes) == null ? void 0 : o.value.bodyTitle },
-        r(
-          "span",
-          { class: (l = this.classes) == null ? void 0 : l.value.bodyTitleLabel },
-          r(
-            "span",
-            { class: (h = this.classes) == null ? void 0 : h.value.bodyTitleLabelText },
-            s
-          )
-        )
-      );
-    });
-    /**
-     * Generates data for additional controls.
-     *
-     * Генерирует данные для дополнительных управлений.
-     */
-    t(this, "renderBodyScoreboard", () => {
-      var i;
-      const s = [
-        ...this.renderBodyScoreboardSlot(),
-        ...this.renderBodyScoreboardIcon(),
-        ...this.item.prefix.render(),
-        ...this.item.suffix.render(),
-        ...this.item.progress.render(),
-        ...this.renderBodyScoreboardSpace()
-      ];
-      return r("span", {
-        class: (i = this.classes) == null ? void 0 : i.value.bodyScoreboard,
-        "data-element": "scoreboard"
-      }, s);
-    });
-    /**
-     * Generates data for the slot.
-     *
-     * Генерирует данные для слота.
-     */
-    t(this, "renderBodyScoreboardSlot", () => {
-      var i, o;
-      const s = [];
-      return this.slots && ("leading" in this.slots && s.push(r(
-        "span",
-        { class: (i = this.classes) == null ? void 0 : i.value.bodyScoreboardLeft },
-        this.initSlot("leading")
-      )), "trailing" in this.slots && s.push(r(
-        "span",
-        { class: (o = this.classes) == null ? void 0 : o.value.bodyScoreboardRight },
-        this.initSlot("trailing")
-      ))), s;
-    });
-    /**
-     * Generates all available icons.
-     *
-     * Генерирует все доступные иконки.
-     */
-    t(this, "renderBodyScoreboardIcon", () => {
-      const s = [...this.item.icon.render()];
-      return this.item.icons.isCancel.value && this.components.renderAdd(
-        s,
-        "icon",
-        this.item.icons.cancelBind.value,
-        void 0,
-        "cancel"
-      ), this.item.icons.isArrow.value && (this.components.renderAdd(
-        s,
-        "icon",
-        this.item.icons.previousBind.value,
-        void 0,
-        "previous"
-      ), this.components.renderAdd(
-        s,
-        "icon",
-        this.item.icons.nextBind.value,
-        void 0,
-        "next"
-      )), s;
-    });
-    /**
-     * Generates separators and additional descriptions.
-     *
-     * Генерирует разделители и дополнительные описания.
-     */
-    t(this, "renderBodyScoreboardSpace", () => {
-      var i, o;
-      const s = [];
-      return this.item.caption.is.value && s.push(
-        r(
-          "span",
-          {
-            class: (i = this.classes) == null ? void 0 : i.value.bodyScoreboardInput,
-            style: `min-width: ${this.lengthValue()};`
-          },
-          this.focusValue()
-        ),
-        ...this.item.caption.render()
-      ), [
-        r(
-          "span",
-          { class: (o = this.classes) == null ? void 0 : o.value.bodyScoreboardSpace },
-          s
-        )
-      ];
-    });
-    /**
-     * Generates border.
-     *
-     * Генерирует border.
-     */
-    t(this, "renderBodyBorder", () => {
-      var s;
-      return r("span", { class: (s = this.classes) == null ? void 0 : s.value.bodyBorder });
-    });
-    /**
-     * Value for focus.
-     *
-     * Значение для фокуса.
-     */
-    t(this, "focusValue", () => !this.lengthElement.value && w(this.props.value) ? this.props.value : "");
-    /**
-     * Length value.
-     *
-     * Значение длины.
-     */
-    t(this, "lengthValue", () => {
-      if (this.lengthElement.value)
-        return `${this.lengthElement.value.offsetWidth}px`;
-    });
-    /**
-     * Element for counting characters.
-     *
-     * Элемент для подсчёта символов.
-     */
-    t(this, "lengthElement", a(() => {
-      var s, i;
-      return (i = (s = this.element.value) == null ? void 0 : s.querySelector("*[data-length]")) != null ? i : void 0;
-    }));
-    /**
-     * Input element.
-     *
-     * Элемент ввода.
-     */
-    t(this, "inputElement", a(() => {
-      var s, i, o, l;
-      return (l = (o = this.element.value) == null ? void 0 : o.querySelector(`input.${(s = this.classes) == null ? void 0 : s.value.bodyInput}, .${(i = this.classes) == null ? void 0 : i.value.bodyInput} input`)) != null ? l : void 0;
-    }));
-    this.item = new P(
-      this.props,
-      this.refs,
-      this.element,
-      this.getDesign(),
-      this.getName(),
-      this.components,
-      this.slots,
-      this.emits
-    ), this.init();
-  }
-  /**
-   * Initialization of all the necessary properties for work
-   *
-   * Инициализация всех необходимых свойств для работы.
-   */
-  initExpose() {
-    return {};
-  }
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  initClasses() {
-    return {
-      main: this.item.classes.value,
-      // :classes [!] System label / Системная метка
-      body: this.getSubClass("body"),
-      bodyInput: this.getSubClass("body__input"),
-      bodyTitle: this.getSubClass("body__title"),
-      bodyTitleLabel: this.getSubClass("body__title__label"),
-      bodyTitleLabelText: this.getSubClass("body__title__label__text"),
-      bodyScoreboard: this.getSubClass("body__scoreboard"),
-      bodyScoreboardLeft: this.getSubClass("body__scoreboard__left"),
-      bodyScoreboardRight: this.getSubClass("body__scoreboard__right"),
-      bodyScoreboardSpace: this.getSubClass("body__scoreboard__space"),
-      bodyScoreboardInput: this.getSubClass("body__scoreboard__input"),
-      bodyBorder: this.getSubClass("body__border"),
-      required: this.getSubClass("required")
-    };
-  }
-  /**
-   * Refinement of the received list of styles.
-   *
-   * Доработка полученного списка стилей.
-   */
-  initStyles() {
-    return {};
-  }
-  /**
-   * A method for rendering.
-   *
-   * Метод для рендеринга.
-   */
-  initRender() {
-    var i, o;
-    const s = [];
-    return this.props.classic && !this.props.basic && !this.props.boxed && !this.props.filled && !this.props.outlined && !this.props.tonal && s.push(...this.item.fieldLabel.render()), s.push(
-      ...this.renderBody(),
-      ...this.item.fieldMessage.render()
-    ), r(
-      "label",
-      {
-        ...this.getAttrs(),
-        ref: this.element,
-        class: (i = this.classes) == null ? void 0 : i.value.main,
-        style: (o = this.styles) == null ? void 0 : o.value
-      },
-      s
-    );
-  }
-}
-export {
-  P as Field,
-  X as FieldDesign,
-  Q as defaultsField
+import { t as e } from "./AriaStaticInclude-CS1hPGyK.js";
+import { t } from "./defineProperty-hmGKPWdq.js";
+import { t as n } from "./TextInclude-OwyVCAbS.js";
+import { t as r } from "./ProgressInclude-BnPBYwJg.js";
+import { t as i } from "./EnabledInclude-CkD_lxMY.js";
+import { t as a } from "./EventClickInclude-6I8kuFc9.js";
+import { t as o } from "./SkeletonInclude-D8on8xmw.js";
+import { t as s } from "./IconTrailingInclude-BwoB_AQn.js";
+import { t as c } from "./CaptionInclude-CunHUsec.js";
+import { t as l } from "./FieldMessageInclude-6cxMqgIx.js";
+import { n as u, t as d } from "./SuffixInclude-VNq8SwAI.js";
+import { t as f } from "./FieldLabelInclude-BA5H3kib.js";
+import { t as p } from "./FieldInclude-DCvNorOt.js";
+import { computed as m, h, onMounted as g, onUnmounted as _, onUpdated as v, watch as y } from "vue";
+import { DesignConstructorAbstract as b, EventItem as x, getElementId as S, isDomRuntime as C, isString as w } from "@dxtmisha/functional";
+//#region src/constructors/Field/FieldIcons.ts
+var T = class {
+	constructor(e, n, r) {
+		t(this, "isArrow", m(() => !!((this.props.arrowCarousel || this.props.arrowStepper) && !this.props.disabled))), t(this, "isCancel", m(() => !!(this.props.cancel && !this.props.readonly && !this.props.disabled && !this.props.arrowCarousel && !this.props.arrowStepper && (this.props.cancel === "auto" && this.props.cancelShow || this.props.cancel === "always")))), t(this, "cancelBind", m(() => ({
+			class: `${this.className}__cancel`,
+			icon: this.props.iconClose,
+			dynamic: !0,
+			"data-event-type": "cancel",
+			ariaLabel: this.text.cancel.value
+		}))), t(this, "previousBind", m(() => ({
+			class: `${this.className}__previous`,
+			icon: this.props.arrowCarousel ? this.props.iconArrowLeft : this.props.iconMinus,
+			disabled: this.props.disabled || this.props.disabledPrevious,
+			dynamic: !0,
+			"data-event-type": "previous",
+			ariaLabel: this.props.arrowCarousel ? this.text.previous.value : this.text.decrement.value
+		}))), t(this, "nextBind", m(() => ({
+			class: `${this.className}__next`,
+			icon: this.props.arrowCarousel ? this.props.iconArrowRight : this.props.iconPlus,
+			disabled: this.props.disabled || this.props.disabledNext,
+			dynamic: !0,
+			"data-event-type": "next",
+			ariaLabel: this.props.arrowCarousel ? this.text.next.value : this.text.increment.value
+		}))), this.props = e, this.className = n, this.text = r;
+	}
+}, E = class {
+	constructor(e, n) {
+		t(this, "left", 0), t(this, "right", 0), t(this, "title", 0), t(this, "event", void 0), t(this, "update", (e = 128) => {
+			requestAnimationFrame(() => {
+				var t, n;
+				let r = this.getElementSpace(), i = this.getElementPrefix();
+				if (r) {
+					var a, o;
+					this.left = r.offsetLeft, this.right = ((a = (o = r.parentElement) == null ? void 0 : o.offsetWidth) == null ? 0 : a) - this.left - r.offsetWidth;
+				}
+				this.title = (t = (n = i == null ? void 0 : i.offsetLeft) == null ? r == null ? void 0 : r.offsetLeft : n) == null ? 0 : t, this.left < 0 ? this.update(e - 1) : this.make();
+			});
+		}), this.element = e, this.className = n, y(e, () => this.update, { immediate: !0 }), C() && (this.event = new x(window, "resize", () => this.update()), _(() => {
+			var e;
+			return (e = this.event) == null ? void 0 : e.stop();
+		})), g(this.update), v(this.update);
+	}
+	getElementSpace() {
+		var e, t;
+		return (e = (t = this.element.value) == null ? void 0 : t.querySelector(`.${this.className}__body__scoreboard__space`)) == null ? void 0 : e;
+	}
+	getElementPrefix() {
+		var e, t;
+		return (e = (t = this.element.value) == null ? void 0 : t.querySelector(`.${this.className}__prefix`)) == null ? void 0 : e;
+	}
+	make() {
+		let e = this.element.value;
+		e && (e.style.setProperty(`--${this.className}-sys-left`, `${this.left}px`), e.style.setProperty(`--${this.className}-sys-right`, `${this.right}px`), e.style.setProperty(`--${this.className}-sys-title`, `${this.title}px`), e.classList.contains(`${this.className}--show`) || requestAnimationFrame(() => e.classList.add(`${this.className}--show`)));
+	}
+}, D = class {
+	constructor(p, h, g, _, v, y, b, x, C) {
+		t(this, "text", void 0), t(this, "icon", void 0), t(this, "caption", void 0), t(this, "prefix", void 0), t(this, "suffix", void 0), t(this, "fieldLabel", void 0), t(this, "fieldMessage", void 0), t(this, "progress", void 0), t(this, "enabled", void 0), t(this, "event", void 0), t(this, "skeleton", void 0), t(this, "icons", void 0), t(this, "size", void 0), t(this, "isClassic", m(() => !!(this.props.classic && !this.props.basic && !this.props.boxed && !this.props.filled && !this.props.outlined && !this.props.tonal))), t(this, "isValidation", m(() => !!(this.props.validationMessage && (this.props.forceShowMessage || !this.props.readonly && !this.props.disabled)))), t(this, "id", m(() => String(this.props.id || S()))), t(this, "classes", m(() => ({
+			[`${this.className}--cancel`]: this.icons.isCancel.value,
+			[`${this.className}--suffix`]: this.props.suffix,
+			[`${this.className}--validation`]: this.isValidation.value
+		}))), t(this, "control", m(() => {
+			let t = `${this.className}__body__input ${this.skeleton.classesSkeleton.classText}`;
+			return {
+				id: this.id.value,
+				className: t,
+				classHidden: `${this.className}__body__hidden`,
+				classForFocus: `${this.className}__body__focus`,
+				binds: {
+					id: this.id.value,
+					class: t,
+					...e.invalid(this.isValidation.value),
+					...e.describedby(this.getDescribedby())
+				}
+			};
+		})), this.props = p, this.refs = h, this.element = g, this.classDesign = _, this.className = v, this.components = y, this.slots = b, this.emits = x;
+		let { CaptionIncludeConstructor: w = c, EnabledIncludeConstructor: D = i, EventClickIncludeConstructor: O = a, FieldIconsConstructor: k = T, FieldLabelIncludeConstructor: A = f, FieldMessageIncludeConstructor: j = l, FieldSizeConstructor: M = E, IconTrailingIncludeConstructor: N = s, PrefixIncludeConstructor: P = u, ProgressIncludeConstructor: F = r, SkeletonIncludeConstructor: I = o, SuffixIncludeConstructor: L = d, TextIncludeConstructor: R = n } = C == null ? {} : C;
+		this.skeleton = new I(this.props, this.classDesign, ["classBackground"]), this.icon = new N(this.props, this.className, this.components), this.text = new R(this.props), this.caption = new w(this.props, this.className, this.slots), this.prefix = new P(this.props, this.className, this.slots), this.suffix = new L(this.props, this.className, this.slots), this.fieldLabel = new A(this.props, this.className, this.components, this.slots, this.id, this.refs.counterTop, this.skeleton.binds), this.fieldMessage = new j(this.props, this.className, this.components, void 0, m(() => !this.props.counterTop), this.skeleton.binds), this.progress = new F(this.props, this.className, this.components, {
+			circular: !0,
+			position: "static",
+			dense: !0
+		}), this.enabled = new D(this.props, this.progress), this.event = new O(this.props, this.enabled, this.emits), this.icons = new k(this.props, this.className, this.text), this.size = new M(this.element, this.className);
+	}
+	getDescribedby() {
+		return [
+			this.prefix.describedby.value,
+			this.suffix.describedby.value,
+			this.fieldLabel.id.value,
+			this.fieldMessage.id.value
+		].join(" ").trim();
+	}
+}, O = {
+	arrowAlign: "right",
+	cancel: "auto"
+}, k = class extends b {
+	constructor(e, n, r, i = D) {
+		super(e, n, r), t(this, "item", void 0), t(this, "renderBody", () => {
+			var e;
+			let t = [
+				this.initSlot("default", void 0, this.item.control.value),
+				this.renderBodyLabel(),
+				this.renderBodyScoreboard(),
+				this.renderBodyBorder()
+			];
+			return [h("span", {
+				class: [(e = this.classes) == null ? void 0 : e.value.body, this.item.skeleton.classes.value],
+				...this.item.event.binds
+			}, t)];
+		}), t(this, "renderBodyLabel", () => {
+			var e, t, n;
+			let r = [this.props.label];
+			if (this.props.required) {
+				var i;
+				r.push(h("span", { class: (i = this.classes) == null ? void 0 : i.value.required }));
+			}
+			return h("span", { class: (e = this.classes) == null ? void 0 : e.value.bodyTitle }, h("span", { class: (t = this.classes) == null ? void 0 : t.value.bodyTitleLabel }, h("span", { class: (n = this.classes) == null ? void 0 : n.value.bodyTitleLabelText }, r)));
+		}), t(this, "renderBodyScoreboard", () => {
+			var e;
+			let t = [
+				...this.renderBodyScoreboardSlot(),
+				...this.renderBodyScoreboardIcon(),
+				...this.item.prefix.render(),
+				...this.item.suffix.render(),
+				...this.item.progress.render(),
+				...this.renderBodyScoreboardSpace()
+			];
+			return h("span", {
+				class: (e = this.classes) == null ? void 0 : e.value.bodyScoreboard,
+				"data-element": "scoreboard"
+			}, t);
+		}), t(this, "renderBodyScoreboardSlot", () => {
+			let e = [];
+			if (this.slots) {
+				if ("leading" in this.slots) {
+					var t;
+					e.push(h("span", { class: (t = this.classes) == null ? void 0 : t.value.bodyScoreboardLeft }, this.initSlot("leading")));
+				}
+				if ("trailing" in this.slots) {
+					var n;
+					e.push(h("span", { class: (n = this.classes) == null ? void 0 : n.value.bodyScoreboardRight }, this.initSlot("trailing")));
+				}
+			}
+			return e;
+		}), t(this, "renderBodyScoreboardIcon", () => {
+			let e = [...this.item.icon.render()];
+			return this.item.icons.isCancel.value && this.components.renderAdd(e, "icon", this.item.icons.cancelBind.value, void 0, "cancel"), this.item.icons.isArrow.value && (this.components.renderAdd(e, "icon", this.item.icons.previousBind.value, void 0, "previous"), this.components.renderAdd(e, "icon", this.item.icons.nextBind.value, void 0, "next")), e;
+		}), t(this, "renderBodyScoreboardSpace", () => {
+			var e;
+			let t = [];
+			if (this.item.caption.is.value) {
+				var n;
+				t.push(h("span", {
+					class: (n = this.classes) == null ? void 0 : n.value.bodyScoreboardInput,
+					style: `min-width: ${this.lengthValue()};`
+				}, this.focusValue()), ...this.item.caption.render());
+			}
+			return [h("span", { class: (e = this.classes) == null ? void 0 : e.value.bodyScoreboardSpace }, t)];
+		}), t(this, "renderBodyBorder", () => {
+			var e;
+			return h("span", { class: (e = this.classes) == null ? void 0 : e.value.bodyBorder });
+		}), t(this, "focusValue", () => !this.lengthElement.value && w(this.props.value) ? this.props.value : ""), t(this, "lengthValue", () => {
+			if (this.lengthElement.value) return `${this.lengthElement.value.offsetWidth}px`;
+		}), t(this, "lengthElement", m(() => {
+			var e, t;
+			return (e = (t = this.element.value) == null ? void 0 : t.querySelector("*[data-length]")) == null ? void 0 : e;
+		})), t(this, "inputElement", m(() => {
+			var e, t, n, r;
+			return (e = (t = this.element.value) == null ? void 0 : t.querySelector(`input.${(n = this.classes) == null ? void 0 : n.value.bodyInput}, .${(r = this.classes) == null ? void 0 : r.value.bodyInput} input`)) == null ? void 0 : e;
+		})), this.item = new i(this.props, this.refs, this.element, this.getDesign(), this.getName(), this.components, this.slots, this.emits), this.init();
+	}
+	initExpose() {
+		return {};
+	}
+	initClasses() {
+		return {
+			main: this.item.classes.value,
+			body: this.getSubClass("body"),
+			bodyInput: this.getSubClass("body__input"),
+			bodyTitle: this.getSubClass("body__title"),
+			bodyTitleLabel: this.getSubClass("body__title__label"),
+			bodyTitleLabelText: this.getSubClass("body__title__label__text"),
+			bodyScoreboard: this.getSubClass("body__scoreboard"),
+			bodyScoreboardLeft: this.getSubClass("body__scoreboard__left"),
+			bodyScoreboardRight: this.getSubClass("body__scoreboard__right"),
+			bodyScoreboardSpace: this.getSubClass("body__scoreboard__space"),
+			bodyScoreboardInput: this.getSubClass("body__scoreboard__input"),
+			bodyBorder: this.getSubClass("body__border"),
+			required: this.getSubClass("required")
+		};
+	}
+	initStyles() {
+		return {};
+	}
+	initRender() {
+		var e, t;
+		let n = [];
+		return this.item.isClassic.value && n.push(...this.item.fieldLabel.render()), n.push(...this.renderBody(), ...this.item.fieldMessage.render()), h(this.item.isClassic.value ? "div" : "label", {
+			...this.getAttrs(),
+			ref: this.element,
+			class: (e = this.classes) == null ? void 0 : e.value.main,
+			style: (t = this.styles) == null ? void 0 : t.value,
+			for: this.item.isClassic.value ? void 0 : this.item.id.value
+		}, n);
+	}
 };
+//#endregion
+export { D as Field, k as FieldDesign, T as FieldIcons, p as FieldInclude, E as FieldSize, O as defaultsField };