@wikicasa-dev/components 2.0.17 → 2.0.18

package/dist/BaseSlider.js

@@ -1,257 +1,209 @@
-import f from "./BaseInput.js";
-import { defineComponent as c, resolveComponent as S, openBlock as V, createElementBlock as g, createElementVNode as a, withModifiers as h, createVNode as d } from "vue";
-import { _ as x } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
-import './assets/BaseSlider.css';function p(t, i) {
-  const e = parseInt(t.value, 10), l = parseInt(i.value, 10);
-  return [e, l];
-}
-const v = (t) => t.minPos + (Math.log(t.value) - t.minlval) / t.scale, $ = (t) => Math.exp(
-  (t.position - t.minPos) * t.scale + t.minlval
-);
-function m(t, i, e, l, s) {
-  const r = i.max - i.min, o = t - i.min, n = i.value - i.min;
-  s.style.background = `linear-gradient(
-      to right,
-      ${e} 0%,
-      ${e} ${o / r * 100}%,
-      ${l} ${o / r * 100}%,
-      ${l} ${n / r * 100}%,
-      ${e} ${n / r * 100}%,
-      ${e} 100%)`;
-}
-function u(t, i) {
-  t <= 0 ? i.style.zIndex = "2" : i.style.zIndex = "0";
-}
-const I = c({
-  name: "BaseSlider",
-  components: { BaseInput: f },
+import { defineComponent as q, ref as v, useTemplateRef as w, watch as D, useAttrs as G, onMounted as H, openBlock as J, createElementBlock as K, createElementVNode as p, withModifiers as T, unref as F, createVNode as k } from "vue";
+import E from "./BaseInput.js";
+import { _ as O } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import './assets/BaseSlider.css';const Q = { class: "range_container" }, W = { class: "sliders_control" }, X = ["value", "min", "max", "step"], Y = ["value", "min", "max", "step"], Z = { class: "form_control row" }, ee = { class: "pb-15 pb-sm-0 col-sm-6 col-xl-4" }, te = { class: "col-sm-6 col-xl-4" }, le = /* @__PURE__ */ q({
+  __name: "BaseSlider",
   props: {
-    type: {
-      type: String,
-      default: "linear"
-    }
+    type: { default: "linear" },
+    min: { default: 0 },
+    max: { default: 100 }
   },
   emits: ["minChanged", "maxChanged"],
-  data() {
-    return {
-      leftSliderLimit: 0,
-      rightSliderLimit: 100,
-      minValue: 0,
-      maxValue: 0,
-      sliderMinValue: 10,
-      sliderMaxValue: 40,
-      /* Logaritmic values */
-      minlval: 0,
-      maxlval: 0,
-      scale: 0
-    };
-  },
-  computed: {
-    fromSlider() {
-      return this.$refs.fromSlider;
-    },
-    toSlider() {
-      return this.$refs.toSlider;
-    },
-    fromInput() {
-      return this.$refs.fromInput;
-    },
-    toInput() {
-      return this.$refs.toInput;
+  setup(f, { emit: L }) {
+    function B(e, t) {
+      const l = parseInt(e.value, 10), a = parseInt(t.value, 10);
+      return [l, a];
     }
-  },
-  watch: {
-    minValue(t) {
-      this.$emit("minChanged", t);
-    },
-    maxValue(t) {
-      this.$emit("maxChanged", t);
+    const z = (e) => e.minPos + (Math.log(e.value) - e.minlval) / e.scale, A = (e) => Math.exp(
+      (e.position - e.minPos) * e.scale + e.minlval
+    );
+    function x(e, t, l, a, i) {
+      const d = t.max - t.min, C = e - t.min, b = t.value - t.min;
+      i.style.background = `linear-gradient(
+      to right,
+      ${l} 0%,
+      ${l} ${C / d * 100}%,
+      ${a} ${C / d * 100}%,
+      ${a} ${b / d * 100}%,
+      ${l} ${b / d * 100}%,
+      ${l} 100%)`;
     }
-  },
-  created() {
-    this.leftSliderLimit = parseInt(`${this.$attrs.min || 0}`, 10), this.rightSliderLimit = parseInt(`${this.$attrs.max || 100}`, 10), this.sliderMinValue = this.leftSliderLimit, this.sliderMaxValue = this.rightSliderLimit, this.minValue = parseInt(
-      `${this.$attrs.minValue || this.leftSliderLimit}`,
-      10
-    ), this.maxValue = parseInt(
-      `${this.$attrs.maxValue || this.rightSliderLimit}`,
-      10
-    ), this.minlval = Math.log(this.minValue || 1), this.maxlval = Math.log(this.maxValue), this.scale = (this.maxlval - this.minlval) / (this.rightSliderLimit - this.leftSliderLimit);
-  },
-  mounted() {
-    !this.fromSlider || !this.toSlider || (m(
-      this.sliderMinValue,
-      {
-        min: this.leftSliderLimit,
-        max: this.rightSliderLimit,
-        value: this.sliderMaxValue
-      },
-      "#B4C2F0",
-      "#2B5DFF",
-      this.toSlider
-    ), u(this.sliderMaxValue, this.toSlider));
-  },
-  methods: {
-    handleInputChange(t, i) {
-      if (!this.fromSlider || !this.toSlider) return;
-      i || (i = "0");
-      const e = parseInt(i, 10);
-      if (t == "min-input") {
-        if (e >= this.maxValue) return;
-        this.minValue = e, this.controlFromInput(this.toSlider);
+    function I(e, t) {
+      e <= 0 ? t.style.zIndex = "2" : t.style.zIndex = "0";
+    }
+    const V = L, n = v(0), o = v(100), s = v(0), u = v(0), m = v(10), c = v(40), h = v(0), P = v(0), y = v(0), g = w("fromSlider"), r = w("toSlider"), M = (e, t) => {
+      if (!g.value || !r.value) return;
+      t || (t = "0");
+      const l = parseInt(t, 10);
+      if (e == "min-input") {
+        if (l >= u.value) return;
+        s.value = l, N(r.value);
         return;
       }
-      e < this.minValue || (this.maxValue = e, this.controlToInput(this.toSlider, this.toSlider));
-    },
-    getCurrentPosition(t) {
-      if (this.type === "logarithmic")
-        return t = t || 1, parseInt(
-          v({
-            value: t,
-            minPos: this.leftSliderLimit,
-            minlval: this.minlval,
-            scale: this.scale
+      l < s.value || (u.value = l, U(r.value, r.value));
+    }, $ = (e) => {
+      if (f.type === "logarithmic")
+        return e = e || 1, parseInt(
+          z({
+            value: e,
+            minPos: n.value,
+            minlval: h.value,
+            scale: y.value
           }).toFixed(0),
           10
         );
-      if (this.type === "linear")
-        return t;
+      if (f.type === "linear")
+        return e;
       throw new Error("The slider type has not been implemented");
-    },
-    getCurrentValue(t) {
-      if (this.type === "logarithmic")
-        return t = t || 1, parseInt(
-          $({
-            position: t,
-            scale: this.scale,
-            minlval: this.minlval,
-            minPos: this.leftSliderLimit
+    }, S = (e) => {
+      if (f.type === "logarithmic")
+        return e = e || 1, parseInt(
+          A({
+            position: e,
+            scale: y.value,
+            minlval: h.value,
+            minPos: n.value
           }).toFixed(0),
           10
         );
-      if (this.type === "linear")
-        return t;
+      if (f.type === "linear")
+        return e;
       throw new Error("The slider type has not been implemented");
-    },
-    controlFromInput(t) {
-      const i = this.getCurrentPosition(this.minValue), e = this.getCurrentPosition(this.maxValue);
-      m(
-        i,
+    }, N = (e) => {
+      const t = $(s.value), l = $(u.value);
+      x(
+        t,
         {
-          min: this.leftSliderLimit,
-          max: this.rightSliderLimit,
-          value: e
+          min: n.value,
+          max: o.value,
+          value: l
         },
         "#B4C2F0",
         "#2B5DFF",
-        t
+        e
       );
-      const l = i, s = this.maxValue;
-      l > s ? this.sliderMinValue = s : this.sliderMinValue = l;
-    },
-    controlToInput(t, i) {
-      const e = this.getCurrentPosition(this.minValue), l = this.getCurrentPosition(this.maxValue);
-      m(
-        e,
+      const a = t, i = u.value;
+      a > i ? m.value = i : m.value = a;
+    }, U = (e, t) => {
+      const l = $(s.value), a = $(u.value);
+      x(
+        l,
         {
-          min: this.leftSliderLimit,
-          max: this.rightSliderLimit,
-          value: l
+          min: n.value,
+          max: o.value,
+          value: a
         },
         "#B4C2F0",
         "#2B5DFF",
-        i
+        t
       );
-      const s = this.minValue, r = l;
-      u(this.maxValue, t), s <= r ? this.sliderMaxValue = r : this.sliderMaxValue = s;
-    },
-    controlFromSlider(t, i) {
-      if (!this.toSlider) return;
-      const [e, l] = p(t, i), s = this.getCurrentValue(e);
-      m(
-        e,
+      const i = s.value, d = a;
+      I(u.value, e), i <= d ? c.value = d : c.value = i;
+    }, R = (e, t) => {
+      if (!t.value) return;
+      const [l, a] = B(e, t), i = S(l);
+      x(
+        l,
         {
-          min: this.leftSliderLimit,
-          max: this.rightSliderLimit,
-          value: l
+          min: n.value,
+          max: o.value,
+          value: a
         },
         "#B4C2F0",
         "#2B5DFF",
-        i
-      ), e > l ? (t.value = `${l}`, this.sliderMinValue = l, this.minValue = l) : (this.sliderMinValue = e, this.minValue = s);
-    },
-    controlToSlider(t, i) {
-      if (!this.toSlider) return;
-      const [e, l] = p(t, i), s = this.getCurrentValue(l);
-      m(
-        this.sliderMinValue,
+        t
+      ), l > a ? (e.value = `${a}`, m.value = a, s.value = a) : (m.value = l, s.value = i);
+    }, j = (e, t) => {
+      if (!t.value) return;
+      const [l, a] = B(e, t), i = S(a);
+      x(
+        m.value,
         {
-          min: this.leftSliderLimit,
-          max: this.rightSliderLimit,
-          value: l
+          min: n.value,
+          max: o.value,
+          value: a
         },
         "#B4C2F0",
         "#2B5DFF",
-        i
-      ), u(parseInt(this.toSlider.value, 10), i), e <= l ? (this.sliderMaxValue = l, this.maxValue = s) : (i.value = `${e}`, this.sliderMaxValue = e, this.maxValue = e);
-    }
-  }
-}), L = { class: "range_container" }, M = { class: "sliders_control" }, F = ["value", "min", "max", "step"], C = ["value", "min", "max", "step"], P = { class: "form_control row" }, y = { class: "pb-15 pb-sm-0 col-sm-6 col-xl-4" }, B = { class: "col-sm-6 col-xl-4" };
-function b(t, i, e, l, s, r) {
-  const o = S("base-input");
-  return V(), g("div", L, [
-    a("div", M, [
-      a("input", {
-        ref: "fromSlider",
-        class: "fromSlider",
-        type: "range",
-        value: t.sliderMinValue,
-        min: t.leftSliderLimit,
-        max: t.rightSliderLimit,
-        step: t.$attrs.step,
-        onInput: i[0] || (i[0] = h((n) => t.controlFromSlider(
-          t.fromSlider,
-          t.toSlider
-        ), ["stop"]))
-      }, null, 40, F),
-      a("input", {
-        ref: "toSlider",
-        class: "toSlider",
-        type: "range",
-        value: t.sliderMaxValue,
-        min: t.leftSliderLimit,
-        max: t.rightSliderLimit,
-        step: t.$attrs.step,
-        onInput: i[1] || (i[1] = h((n) => t.controlToSlider(
-          t.fromSlider,
-          t.toSlider
-        ), ["stop"]))
-      }, null, 40, C)
-    ]),
-    a("div", P, [
-      a("div", y, [
-        d(o, {
-          "label-text": "Min",
-          type: "text",
-          pattern: "[0-9]*",
-          inputmode: "numeric",
-          "model-value": t.minValue,
-          "onUpdate:modelValue": i[2] || (i[2] = (n) => t.handleInputChange("min-input", `${n || ""}`))
-        }, null, 8, ["model-value"])
+        t
+      ), I(parseInt(t.value, 10), t), l <= a ? (c.value = a, u.value = i) : (t.value = `${l}`, c.value = l, u.value = l);
+    };
+    D(s, (e) => {
+      V("minChanged", e);
+    }), D(u, (e) => {
+      V("maxChanged", e);
+    });
+    const _ = G();
+    return (() => {
+      n.value = parseInt(`${f.min || 0}`, 10), o.value = parseInt(`${f.max || 100}`, 10), m.value = n.value, c.value = o.value, s.value = parseInt(`${_.minValue || n.value}`, 10), u.value = parseInt(`${_.maxValue || o.value}`, 10), h.value = Math.log(s.value || 1), P.value = Math.log(u.value), y.value = (P.value - h.value) / (o.value - n.value);
+    })(), H(() => {
+      !g.value || !r.value || (x(
+        m.value,
+        {
+          min: n.value,
+          max: o.value,
+          value: c.value
+        },
+        "#B4C2F0",
+        "#2B5DFF",
+        r.value
+      ), I(c.value, r.value));
+    }), (e, t) => (J(), K("div", Q, [
+      p("div", W, [
+        p("input", {
+          ref_key: "fromSlider",
+          ref: g,
+          class: "fromSlider",
+          type: "range",
+          value: m.value,
+          min: n.value,
+          max: o.value,
+          step: e.$attrs.step,
+          onInput: t[0] || (t[0] = T((l) => R(
+            F(g),
+            F(r)
+          ), ["stop"]))
+        }, null, 40, X),
+        p("input", {
+          ref_key: "toSlider",
+          ref: r,
+          class: "toSlider",
+          type: "range",
+          value: c.value,
+          min: n.value,
+          max: o.value,
+          step: e.$attrs.step,
+          onInput: t[1] || (t[1] = T((l) => j(
+            F(g),
+            F(r)
+          ), ["stop"]))
+        }, null, 40, Y)
       ]),
-      a("div", B, [
-        d(o, {
-          "label-text": "Max",
-          type: "text",
-          pattern: "[0-9]*",
-          inputmode: "numeric",
-          "model-value": t.maxValue,
-          "onUpdate:modelValue": i[3] || (i[3] = (n) => t.handleInputChange("max-input", `${n || ""}`))
-        }, null, 8, ["model-value"])
+      p("div", Z, [
+        p("div", ee, [
+          k(E, {
+            "label-text": "Min",
+            type: "text",
+            pattern: "[0-9]*",
+            inputmode: "numeric",
+            "model-value": s.value,
+            "onUpdate:modelValue": t[2] || (t[2] = (l) => M("min-input", `${l || ""}`))
+          }, null, 8, ["model-value"])
+        ]),
+        p("div", te, [
+          k(E, {
+            "label-text": "Max",
+            type: "text",
+            pattern: "[0-9]*",
+            inputmode: "numeric",
+            "model-value": u.value,
+            "onUpdate:modelValue": t[3] || (t[3] = (l) => M("max-input", `${l || ""}`))
+          }, null, 8, ["model-value"])
+        ])
       ])
-    ])
-  ]);
-}
-const _ = /* @__PURE__ */ x(I, [["render", b], ["__scopeId", "data-v-c87c86da"]]);
+    ]));
+  }
+}), se = /* @__PURE__ */ O(le, [["__scopeId", "data-v-888621e8"]]);
 export {
-  _ as default
+  se as default
 };

package/dist/UIKit/BaseSlider.vue.d.ts

@@ -1,167 +1,16 @@
-import { Nullable } from '@wikicasa-dev/types';
-type Inputs = "min-input" | "max-input";
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    type: {
-        type: () => "linear" | "logarithmic";
-        default: string;
-    };
-}>, {}, {
-    leftSliderLimit: number;
-    rightSliderLimit: number;
-    minValue: number;
-    maxValue: number;
-    sliderMinValue: number;
-    sliderMaxValue: number;
-    minlval: number;
-    maxlval: number;
-    scale: number;
-}, {
-    fromSlider(): Nullable<HTMLInputElement>;
-    toSlider(): Nullable<HTMLInputElement>;
-    fromInput(): Nullable<HTMLInputElement>;
-    toInput(): Nullable<HTMLInputElement>;
-}, {
-    handleInputChange(from: Inputs, value: string): void;
-    getCurrentPosition(value: number): number;
-    getCurrentValue(position: number): number;
-    controlFromInput(controlSlider: HTMLInputElement): void;
-    controlToInput(toSlider: HTMLInputElement, controlSlider: HTMLInputElement): void;
-    controlFromSlider(fromSlider: HTMLInputElement, toSlider: HTMLInputElement): void;
-    controlToSlider(fromSlider: HTMLInputElement, toSlider: HTMLInputElement): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("minChanged" | "maxChanged")[], "minChanged" | "maxChanged", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    type: {
-        type: () => "linear" | "logarithmic";
-        default: string;
-    };
-}>> & Readonly<{
-    onMinChanged?: ((...args: any[]) => any) | undefined;
-    onMaxChanged?: ((...args: any[]) => any) | undefined;
-}>, {
-    type: "linear" | "logarithmic";
-}, {}, {
-    BaseInput: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-            modelValue?: string | number | undefined;
-        } & {
-            inputClass?: import('./types').ClassType | import('./types').ClassType[];
-            labelText?: string;
-            feedback?: import('./types').FeedbackLabels;
-            isValid?: Nullable<boolean>;
-            keepFloatingLabel?: boolean;
-            formatter?: Nullable<Partial<{
-                formatFn: (n: number | string) => string;
-                unFormatFn: (v: string) => string | number | null;
-            }>>;
-            labelClasses?: import('./types').ClassTypeProp;
-            fieldsetClasses?: import('./types').ClassTypeProp;
-            labelTextClasses?: import('./types').ClassTypeProp;
-            withLeftIcon?: boolean;
-            withRightIcon?: boolean;
-            dataCy?: string;
-        }> & Readonly<{
-            onClick?: ((args_0: MouseEvent) => any) | undefined;
-            "onUpdate:modelValue"?: ((modelValue: string | number | undefined) => any) | undefined;
-            onFocusin?: (() => any) | undefined;
-            onFocusout?: (() => any) | undefined;
-            onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
-            onKeyup?: ((args_0: KeyboardEvent) => any) | undefined;
-            onKeydownEnterPressed?: (() => any) | undefined;
-        }>, {
-            select: () => void;
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            click: (args_0: MouseEvent) => any;
-            "update:modelValue": (modelValue: string | number | undefined) => any;
-            focusin: () => any;
-            focusout: () => any;
-            keydown: (args_0: KeyboardEvent) => any;
-            keyup: (args_0: KeyboardEvent) => any;
-            keydownEnterPressed: () => any;
-        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<{
-            modelValue?: string | number | undefined;
-        } & {
-            inputClass?: import('./types').ClassType | import('./types').ClassType[];
-            labelText?: string;
-            feedback?: import('./types').FeedbackLabels;
-            isValid?: Nullable<boolean>;
-            keepFloatingLabel?: boolean;
-            formatter?: Nullable<Partial<{
-                formatFn: (n: number | string) => string;
-                unFormatFn: (v: string) => string | number | null;
-            }>>;
-            labelClasses?: import('./types').ClassTypeProp;
-            fieldsetClasses?: import('./types').ClassTypeProp;
-            labelTextClasses?: import('./types').ClassTypeProp;
-            withLeftIcon?: boolean;
-            withRightIcon?: boolean;
-            dataCy?: string;
-        }> & Readonly<{
-            onClick?: ((args_0: MouseEvent) => any) | undefined;
-            "onUpdate:modelValue"?: ((modelValue: string | number | undefined) => any) | undefined;
-            onFocusin?: (() => any) | undefined;
-            onFocusout?: (() => any) | undefined;
-            onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
-            onKeyup?: ((args_0: KeyboardEvent) => any) | undefined;
-            onKeydownEnterPressed?: (() => any) | undefined;
-        }>, {
-            select: () => void;
-        }, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<{
-        modelValue?: string | number | undefined;
-    } & {
-        inputClass?: import('./types').ClassType | import('./types').ClassType[];
-        labelText?: string;
-        feedback?: import('./types').FeedbackLabels;
-        isValid?: Nullable<boolean>;
-        keepFloatingLabel?: boolean;
-        formatter?: Nullable<Partial<{
-            formatFn: (n: number | string) => string;
-            unFormatFn: (v: string) => string | number | null;
-        }>>;
-        labelClasses?: import('./types').ClassTypeProp;
-        fieldsetClasses?: import('./types').ClassTypeProp;
-        labelTextClasses?: import('./types').ClassTypeProp;
-        withLeftIcon?: boolean;
-        withRightIcon?: boolean;
-        dataCy?: string;
-    }> & Readonly<{
-        onClick?: ((args_0: MouseEvent) => any) | undefined;
-        "onUpdate:modelValue"?: ((modelValue: string | number | undefined) => any) | undefined;
-        onFocusin?: (() => any) | undefined;
-        onFocusout?: (() => any) | undefined;
-        onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
-        onKeyup?: ((args_0: KeyboardEvent) => any) | undefined;
-        onKeydownEnterPressed?: (() => any) | undefined;
-    }>, {
-        select: () => void;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        click: (args_0: MouseEvent) => any;
-        "update:modelValue": (modelValue: string | number | undefined) => any;
-        focusin: () => any;
-        focusout: () => any;
-        keydown: (args_0: KeyboardEvent) => any;
-        keyup: (args_0: KeyboardEvent) => any;
-        keydownEnterPressed: () => any;
-    }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            leftIcon?(_: {}): any;
-            righticon?(_: {
-                handleClean: () => void;
-                handleShowPasswd: () => void;
-                curType: import('@wikicasa-dev/types').InputTypeHTMLAttribute;
-            }): any;
-            feedback?(_: {}): any;
-            "under-label"?(_: {}): any;
-        };
-    });
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{
+    type?: "linear" | "logarithmic";
+    min?: number;
+    max?: number;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    minChanged: (args_0: number) => any;
+    maxChanged: (args_0: number) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    type?: "linear" | "logarithmic";
+    min?: number;
+    max?: number;
+}> & Readonly<{
+    onMinChanged?: ((args_0: number) => any) | undefined;
+    onMaxChanged?: ((args_0: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/assets/BaseSlider.css

@@ -1 +1 @@
-[data-v-c87c86da] .form-control{max-width:none!important}.range_container[data-v-c87c86da]{padding-top:15px}.sliders_control[data-v-c87c86da]{position:relative;min-height:30px}.form_control[data-v-c87c86da]{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}input[type=range][data-v-c87c86da]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;width:100%;position:absolute;background-color:#b4c2f0;pointer-events:none}input[type=range][data-v-c87c86da]::-webkit-slider-thumb:hover{background:#f7f7f7}input[type=range][data-v-c87c86da]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe;-webkit-box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe}input[type=range][data-v-c87c86da]::-moz-range-thumb{-moz-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border-radius:50%;box-shadow:0 0 0 1px #c6c6c6;cursor:pointer}input[type=range][data-v-c87c86da]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border:2px solid #2B5DFF;border-radius:50%;cursor:pointer}input[type=number][data-v-c87c86da]{color:#8a8383;width:50px;height:30px;font-size:20px;border:none}input[type=number][data-v-c87c86da]::-webkit-inner-spin-button,input[type=number][data-v-c87c86da]::-webkit-outer-spin-button{opacity:1}.fromSlider[data-v-c87c86da]{height:0!important;z-index:1}.toSlider[data-v-c87c86da]{height:3px!important}
+[data-v-888621e8] .form-control{max-width:none!important}.range_container[data-v-888621e8]{padding-top:15px}.sliders_control[data-v-888621e8]{position:relative;min-height:30px}.form_control[data-v-888621e8]{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}input[type=range][data-v-888621e8]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;width:100%;position:absolute;background-color:#b4c2f0;pointer-events:none}input[type=range][data-v-888621e8]::-webkit-slider-thumb:hover{background:#f7f7f7}input[type=range][data-v-888621e8]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe;-webkit-box-shadow:inset 0 0 3px #387bbe,0 0 9px #387bbe}input[type=range][data-v-888621e8]::-moz-range-thumb{-moz-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border-radius:50%;box-shadow:0 0 0 1px #c6c6c6;cursor:pointer}input[type=range][data-v-888621e8]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:all;width:24px;height:24px;background-color:#fff;border:2px solid #2B5DFF;border-radius:50%;cursor:pointer}input[type=number][data-v-888621e8]{color:#8a8383;width:50px;height:30px;font-size:20px;border:none}input[type=number][data-v-888621e8]::-webkit-inner-spin-button,input[type=number][data-v-888621e8]::-webkit-outer-spin-button{opacity:1}.fromSlider[data-v-888621e8]{height:0!important;z-index:1}.toSlider[data-v-888621e8]{height:3px!important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",