@evance/evance-ui 1.0.24 → 1.0.25

package/dist/cjs/EvProgress.cjs

@@ -1,6 +1,6 @@
 "use strict";
-/*! Evance UI v1.0.24 | MIT License */
+/*! Evance UI v1.0.25 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvProgress_vue_vue_type_script_setup_true_lang = require("./EvProgress.vue_vue_type_script_setup_true_lang-CHkG-yit.cjs");
+const EvProgress_vue_vue_type_script_setup_true_lang = require("./EvProgress.vue_vue_type_script_setup_true_lang-z_mzmHVz.cjs");
 exports.EvProgress = EvProgress_vue_vue_type_script_setup_true_lang._sfc_main;
 //# sourceMappingURL=EvProgress.cjs.map

package/dist/cjs/EvProgress.vue_vue_type_script_setup_true_lang-z_mzmHVz.cjs

@@ -0,0 +1,69 @@
+"use strict";
+/*! Evance UI v1.0.25 | MIT License */
+const vue = require("vue");
+const numbers = require("./numbers-BnbjuF22.cjs");
+const modifiers = require("./modifiers-DOPyy6Nx.cjs");
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ev-progress--track" }, null, -1);
+const _hoisted_3 = {
+  key: 1,
+  class: "ev-progress--indeterminate"
+};
+const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ev-progress--bar ev-progress--indeterminate--primary" }, null, -1);
+const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ev-progress--bar ev-progress--indeterminate--secondary" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_4,
+  _hoisted_5
+];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvProgress",
+  props: {
+    appearance: { default: "default" },
+    indeterminate: { type: Boolean, default: false },
+    percentage: { default: 0 },
+    size: { default: "medium" }
+  },
+  setup(__props) {
+    const props = __props;
+    function getPercentageTranslation() {
+      const percent = 0 - (100 - props.percentage);
+      return `translateX(${percent}%)`;
+    }
+    function getSizeHeight() {
+      return !isSizeNumeric() ? void 0 : props.size + "px";
+    }
+    function isSizeNumeric() {
+      return numbers.isIntegerish(props.size);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        role: "progressbar",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": _ctx.percentage,
+        class: vue.normalizeClass(["ev-progress", [
+          {
+            "is-indeterminate": props.indeterminate
+          },
+          vue.unref(modifiers.appearanceModifier)(props.appearance, ["default"]),
+          vue.unref(modifiers.sizeModifier)(props.size, [vue.unref(numbers.IntegerishPattern)])
+        ]]),
+        style: vue.normalizeStyle({
+          height: getSizeHeight()
+        })
+      }, [
+        _hoisted_2,
+        !props.indeterminate ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "ev-progress--bar",
+          style: vue.normalizeStyle({
+            transform: getPercentageTranslation()
+          })
+        }, null, 4)) : vue.createCommentVNode("", true),
+        props.indeterminate ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _hoisted_6)) : vue.createCommentVNode("", true)
+      ], 14, _hoisted_1);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=EvProgress.vue_vue_type_script_setup_true_lang-z_mzmHVz.cjs.map

package/dist/cjs/EvProgress.vue_vue_type_script_setup_true_lang-z_mzmHVz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvProgress.vue_vue_type_script_setup_true_lang-z_mzmHVz.cjs","sources":["../../src/components/EvProgress/EvProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * # EvProgress\n */\nimport \"./EvProgress.scss\";\nimport {\n    appearanceModifier,\n    sizeModifier,\n    IntegerishPattern,\n    isIntegerish,\n    AppearanceProp,\n    InputSizeProp,\n} from \"@/util\";\n\ninterface ProgressProps {\n    appearance?: AppearanceProp;\n    indeterminate?: boolean;\n    percentage?: number;\n    size?: InputSizeProp | number;\n}\nconst props = withDefaults(defineProps<ProgressProps>(), {\n    appearance: \"default\",\n    indeterminate: false,\n    percentage: 0,\n    size: \"medium\",\n});\n\nfunction getPercentageTranslation() {\n    const percent = 0 - (100 - props.percentage);\n    return `translateX(${percent}%)`;\n}\n\n/**\n * ## Get Size Class\n */\nfunction getSizeHeight() {\n    return !isSizeNumeric() ? undefined : props.size + \"px\";\n}\n\nfunction isSizeNumeric(): boolean {\n    return isIntegerish(props.size);\n}\n</script>\n\n<template>\n    <div\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        :aria-valuenow=\"percentage\"\n        class=\"ev-progress\"\n        :class=\"[\n            {\n                'is-indeterminate': props.indeterminate,\n            },\n            appearanceModifier(props.appearance, ['default']),\n            sizeModifier(props.size, [IntegerishPattern]),\n        ]\"\n        :style=\"{\n            height: getSizeHeight(),\n        }\">\n        <div class=\"ev-progress--track\"></div>\n        <div\n            v-if=\"!props.indeterminate\"\n            class=\"ev-progress--bar\"\n            :style=\"{\n                transform: getPercentageTranslation(),\n            }\"></div>\n        <div v-if=\"props.indeterminate\" class=\"ev-progress--indeterminate\">\n            <div\n                class=\"ev-progress--bar ev-progress--indeterminate--primary\"></div>\n            <div\n                class=\"ev-progress--bar ev-progress--indeterminate--secondary\"></div>\n        </div>\n    </div>\n</template>\n"],"names":["isIntegerish"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,aAAS,2BAA2B;AAC1B,YAAA,UAAU,KAAK,MAAM,MAAM;AACjC,aAAO,cAAc,OAAO;AAAA,IAAA;AAMhC,aAAS,gBAAgB;AACrB,aAAO,CAAC,cAAkB,IAAA,SAAY,MAAM,OAAO;AAAA,IAAA;AAGvD,aAAS,gBAAyB;AACvB,aAAAA,QAAA,aAAa,MAAM,IAAI;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EvProgressCircular.cjs

@@ -1,6 +1,6 @@
 "use strict";
-/*! Evance UI v1.0.24 | MIT License */
+/*! Evance UI v1.0.25 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvProgressCircular_vue_vue_type_script_setup_true_lang = require("./EvProgressCircular.vue_vue_type_script_setup_true_lang-C4uK2Ox0.cjs");
+const EvProgressCircular_vue_vue_type_script_setup_true_lang = require("./EvProgressCircular.vue_vue_type_script_setup_true_lang-D2rmBtv2.cjs");
 exports.EvProgressCircular = EvProgressCircular_vue_vue_type_script_setup_true_lang._sfc_main;
 //# sourceMappingURL=EvProgressCircular.cjs.map

package/dist/cjs/EvProgressCircular.vue_vue_type_script_setup_true_lang-D2rmBtv2.cjs

@@ -0,0 +1,109 @@
+"use strict";
+/*! Evance UI v1.0.25 | MIT License */
+const vue = require("vue");
+const modifiers = require("./modifiers-DOPyy6Nx.cjs");
+const units = require("./units-AnxEvUwp.cjs");
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = ["r", "stroke-width", "stroke-dasharray"];
+const _hoisted_3 = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
+const _hoisted_4 = { class: "ev-progress-circular--content" };
+const defaultSize = 48;
+const defaultRotation = -90;
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvProgressCircular",
+  props: {
+    appearance: { default: "default" },
+    indeterminate: { type: Boolean, default: false },
+    percentage: { default: 0 },
+    rotate: { default: 0 },
+    size: { default: "default" },
+    thickness: { default: 2 }
+  },
+  setup(__props) {
+    const props = __props;
+    const container = vue.ref(null);
+    const defaultRadius = defaultSize / 2;
+    function getSizeWithUnits() {
+      if (props.size === "default") {
+        return void 0;
+      }
+      return units.toWebUnit(props.size);
+    }
+    function getCircumference() {
+      return Math.PI * (getRadius() * 2);
+    }
+    function getContainerWidth() {
+      return !container.value ? defaultSize : container.value.clientWidth;
+    }
+    function getProgressOffset() {
+      return props.indeterminate ? 0 : getCircumference() * (1 - props.percentage / 100);
+    }
+    function getRadius() {
+      return defaultRadius - getThickness() / 2;
+    }
+    function getRotation() {
+      const rotation = defaultRotation + props.rotate;
+      return `rotate(${rotation}deg)`;
+    }
+    function getThickness() {
+      const maxThickness = defaultSize / 2;
+      const thickness = props.thickness / getContainerWidth() * defaultSize;
+      return thickness > maxThickness ? maxThickness : thickness;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("span", {
+        ref_key: "container",
+        ref: container,
+        role: "progressbar",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": _ctx.percentage,
+        class: vue.normalizeClass(["ev-progress-circular", [
+          {
+            "is-indeterminate": props.indeterminate,
+            "is-size-default": props.size === "default"
+          },
+          vue.unref(modifiers.appearanceModifier)(props.appearance, ["default"])
+        ]]),
+        style: vue.normalizeStyle({
+          width: getSizeWithUnits(),
+          height: getSizeWithUnits()
+        })
+      }, [
+        (vue.openBlock(), vue.createElementBlock("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 48 48",
+          style: vue.normalizeStyle({
+            transform: getRotation()
+          })
+        }, [
+          vue.createElementVNode("circle", {
+            class: "ev-progress-circular--track",
+            fill: "transparent",
+            cx: "50%",
+            cy: "50%",
+            r: getRadius(),
+            "stroke-width": getThickness(),
+            "stroke-dasharray": getCircumference(),
+            "stroke-dashoffset": "0"
+          }, null, 8, _hoisted_2),
+          vue.createElementVNode("circle", {
+            class: "ev-progress-circular--bar",
+            fill: "transparent",
+            cx: "50%",
+            cy: "50%",
+            r: getRadius(),
+            "stroke-width": getThickness(),
+            "stroke-dasharray": getCircumference(),
+            "stroke-dashoffset": getProgressOffset()
+          }, null, 8, _hoisted_3)
+        ], 4)),
+        vue.createElementVNode("span", _hoisted_4, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ])
+      ], 14, _hoisted_1);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=EvProgressCircular.vue_vue_type_script_setup_true_lang-D2rmBtv2.cjs.map

package/dist/cjs/EvProgressCircular.vue_vue_type_script_setup_true_lang-D2rmBtv2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvProgressCircular.vue_vue_type_script_setup_true_lang-D2rmBtv2.cjs","sources":["../../src/components/EvProgressCircular/EvProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * # EvProgressCircular\n */\nimport \"./EvProgressCircular.scss\";\nimport { appearanceModifier, AppearanceProp, toWebUnit } from \"@/util\";\nimport { ref } from \"vue\";\n\ntype Size = \"default\";\n\ninterface ProgressProps {\n    appearance?: AppearanceProp;\n    indeterminate?: boolean;\n    percentage?: number;\n    rotate?: number;\n    size?: Size | number;\n    thickness?: number;\n}\nconst props = withDefaults(defineProps<ProgressProps>(), {\n    appearance: \"default\",\n    size: \"default\",\n    indeterminate: false,\n    percentage: 0,\n    rotate: 0,\n    thickness: 2,\n});\n\nconst container = ref<HTMLElement | null>(null);\nconst defaultSize = 48;\nconst defaultRadius = defaultSize / 2;\nconst defaultRotation = -90;\n\n/**\n * ## Get Size with Units\n * The default units is `px` when only a number is supplied.\n */\nfunction getSizeWithUnits() {\n    if (props.size === \"default\") {\n        return undefined;\n    }\n    return toWebUnit(props.size);\n}\n\n/**\n * ## Get Circumference\n * Calculate the circumference of the inner circles.\n */\nfunction getCircumference() {\n    return Math.PI * (getRadius() * 2);\n}\n\n/**\n * ## Get Width\n * Returns the width of the container.\n */\nfunction getContainerWidth() {\n    return !container.value ? defaultSize : container.value.clientWidth;\n}\n\n/**\n * ## Get Progress Offset\n * Calculate progress offset based on the percentage of the circumference.\n */\nfunction getProgressOffset() {\n    return props.indeterminate\n        ? 0\n        : getCircumference() * (1 - props.percentage / 100);\n}\n\n/**\n * ## Get Radius\n * Calculate the radius of the\n */\nfunction getRadius() {\n    return defaultRadius - getThickness() / 2;\n}\n\n/**\n * ## Get Rotation\n * Returns the starting point rotation style.\n */\nfunction getRotation() {\n    const rotation = defaultRotation + props.rotate;\n    return `rotate(${rotation}deg)`;\n}\n\n/**\n * ## Get Thickness (Stroke Width)\n * Calculate the requested stroke width as this will be different from\n * the actual stroke-width attribute.\n */\nfunction getThickness() {\n    const maxThickness = defaultSize / 2;\n    const thickness = (props.thickness / getContainerWidth()) * defaultSize;\n    return thickness > maxThickness ? maxThickness : thickness;\n}\n</script>\n\n<template>\n    <span\n        ref=\"container\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        :aria-valuenow=\"percentage\"\n        class=\"ev-progress-circular\"\n        :class=\"[\n            {\n                'is-indeterminate': props.indeterminate,\n                'is-size-default': props.size === 'default',\n            },\n            appearanceModifier(props.appearance, ['default']),\n        ]\"\n        :style=\"{\n            width: getSizeWithUnits(),\n            height: getSizeWithUnits(),\n        }\">\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 48 48\"\n            :style=\"{\n                transform: getRotation(),\n            }\">\n            <circle\n                class=\"ev-progress-circular--track\"\n                fill=\"transparent\"\n                cx=\"50%\"\n                cy=\"50%\"\n                :r=\"getRadius()\"\n                :stroke-width=\"getThickness()\"\n                :stroke-dasharray=\"getCircumference()\"\n                stroke-dashoffset=\"0\"></circle>\n            <circle\n                class=\"ev-progress-circular--bar\"\n                fill=\"transparent\"\n                cx=\"50%\"\n                cy=\"50%\"\n                :r=\"getRadius()\"\n                :stroke-width=\"getThickness()\"\n                :stroke-dasharray=\"getCircumference()\"\n                :stroke-dashoffset=\"getProgressOffset()\"></circle>\n        </svg>\n        <span class=\"ev-progress-circular--content\">\n            <slot />\n        </span>\n    </span>\n</template>\n"],"names":["ref","toWebUnit"],"mappings":";;;;;;;;;AA4BA,MAAM,cAAc;AAEpB,MAAM,kBAAkB;;;;;;;;;;;;;AAHlB,UAAA,YAAYA,QAAwB,IAAI;AAE9C,UAAM,gBAAgB,cAAc;AAOpC,aAAS,mBAAmB;AACpB,UAAA,MAAM,SAAS,WAAW;AACnB,eAAA;AAAA,MAAA;AAEJ,aAAAC,MAAA,UAAU,MAAM,IAAI;AAAA,IAAA;AAO/B,aAAS,mBAAmB;AACjB,aAAA,KAAK,MAAM,UAAA,IAAc;AAAA,IAAA;AAOpC,aAAS,oBAAoB;AACzB,aAAO,CAAC,UAAU,QAAQ,cAAc,UAAU,MAAM;AAAA,IAAA;AAO5D,aAAS,oBAAoB;AACzB,aAAO,MAAM,gBACP,IACA,iBAAsB,KAAA,IAAI,MAAM,aAAa;AAAA,IAAA;AAOvD,aAAS,YAAY;AACV,aAAA,gBAAgB,iBAAiB;AAAA,IAAA;AAO5C,aAAS,cAAc;AACb,YAAA,WAAW,kBAAkB,MAAM;AACzC,aAAO,UAAU,QAAQ;AAAA,IAAA;AAQ7B,aAAS,eAAe;AACpB,YAAM,eAAe,cAAc;AACnC,YAAM,YAAa,MAAM,YAAY,kBAAuB,IAAA;AACrD,aAAA,YAAY,eAAe,eAAe;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EvQuickfind.cjs

@@ -1,6 +1,6 @@
 "use strict";
-/*! Evance UI v1.0.24 | MIT License */
+/*! Evance UI v1.0.25 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvQuickfind_vue_vue_type_script_setup_true_lang = require("./EvQuickfind.vue_vue_type_script_setup_true_lang-B2LYtms7.cjs");
+const EvQuickfind_vue_vue_type_script_setup_true_lang = require("./EvQuickfind.vue_vue_type_script_setup_true_lang-DVgLYR9e.cjs");
 exports.EvQuickfind = EvQuickfind_vue_vue_type_script_setup_true_lang._sfc_main;
 //# sourceMappingURL=EvQuickfind.cjs.map

package/dist/cjs/EvQuickfind.vue_vue_type_script_setup_true_lang-DVgLYR9e.cjs

@@ -0,0 +1,48 @@
+"use strict";
+/*! Evance UI v1.0.25 | MIT License */
+const vue = require("vue");
+const EvIcon_vue_vue_type_style_index_0_lang = require("./EvIcon.vue_vue_type_style_index_0_lang-BAFM-QWF.cjs");
+const QuickfindIcon = require("./QuickfindIcon-DnttvsJq.cjs");
+const modelProxy = require("./modelProxy-Cg_wrhAV.cjs");
+const modifiers = require("./modifiers-DOPyy6Nx.cjs");
+const _hoisted_1 = { class: "ev-quickfind--code" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvQuickfind",
+  props: {
+    modelValue: {},
+    bold: { type: Boolean, default: false },
+    size: { default: "medium" }
+  },
+  setup(__props) {
+    const props = __props;
+    const modelProxy$1 = modelProxy.useModelProxy(props, "modelValue");
+    const iconSize = vue.computed(() => {
+      switch (props.size) {
+        case "small":
+        case "medium":
+          return "small";
+        default:
+          return "medium";
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("span", {
+        class: vue.normalizeClass([
+          "ev-quickfind",
+          {
+            "is-variant-bold": _ctx.bold
+          },
+          vue.unref(modifiers.sizeModifier)(_ctx.size, ["medium"])
+        ])
+      }, [
+        vue.createVNode(EvIcon_vue_vue_type_style_index_0_lang._sfc_main, {
+          glyph: vue.unref(QuickfindIcon.QuickfindIcon),
+          size: iconSize.value
+        }, null, 8, ["glyph", "size"]),
+        vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(vue.unref(modelProxy$1)), 1)
+      ], 2);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=EvQuickfind.vue_vue_type_script_setup_true_lang-DVgLYR9e.cjs.map

package/dist/cjs/EvQuickfind.vue_vue_type_script_setup_true_lang-DVgLYR9e.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvQuickfind.vue_vue_type_script_setup_true_lang-DVgLYR9e.cjs","sources":["../../src/components/EvQuickfind/EvQuickfind.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./EvQuickfind.scss\";\nimport EvIcon from \"../EvIcon/EvIcon.vue\";\nimport { QuickfindIcon } from \"@/icons\";\nimport { useModelProxy } from \"@/composables/modelProxy\";\nimport { sizeModifier } from \"@/util\";\nimport { computed } from \"vue\";\n\ntype QuickfindSize = \"small\" | \"medium\" | \"large\";\n\ninterface QuickfindProps {\n    modelValue?: string | number;\n    bold?: boolean;\n    size?: QuickfindSize;\n}\nconst props = withDefaults(defineProps<QuickfindProps>(), {\n    bold: false,\n    size: \"medium\",\n});\nconst modelProxy = useModelProxy(props, \"modelValue\");\n\nconst iconSize = computed(() => {\n    switch (props.size) {\n        case \"small\":\n        case \"medium\":\n            return \"small\";\n        default:\n            return \"medium\";\n    }\n});\n</script>\n\n<template>\n    <span\n        :class=\"[\n            'ev-quickfind',\n            {\n                'is-variant-bold': bold,\n            },\n            sizeModifier(size, ['medium']),\n        ]\">\n        <ev-icon :glyph=\"QuickfindIcon\" :size=\"iconSize\" />\n        <span class=\"ev-quickfind--code\">{{ modelProxy }}</span>\n    </span>\n</template>\n"],"names":["modelProxy","useModelProxy","computed"],"mappings":";;;;;;;;;;;;;;;;;AAmBM,UAAAA,eAAaC,WAAAA,cAAc,OAAO,YAAY;AAE9C,UAAA,WAAWC,IAAAA,SAAS,MAAM;AAC5B,cAAQ,MAAM,MAAM;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AACM,iBAAA;AAAA,QACX;AACW,iBAAA;AAAA,MAAA;AAAA,IACf,CACH;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EvRadio.cjs

@@ -1,7 +1,7 @@
 "use strict";
-/*! Evance UI v1.0.24 | MIT License */
+/*! Evance UI v1.0.25 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvRadio_vue_vue_type_script_setup_true_lang = require("./EvRadio.vue_vue_type_script_setup_true_lang-CgwYR5O2.cjs");
+const EvRadio_vue_vue_type_script_setup_true_lang = require("./EvRadio.vue_vue_type_script_setup_true_lang-B8Qd1tpt.cjs");
 exports.EvRadio = EvRadio_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.makeEvRadioProps = EvRadio_vue_vue_type_script_setup_true_lang.makeEvRadioProps;
 //# sourceMappingURL=EvRadio.cjs.map

package/dist/cjs/EvRadio.vue_vue_type_script_setup_true_lang-B8Qd1tpt.cjs

@@ -0,0 +1,141 @@
+"use strict";
+/*! Evance UI v1.0.25 | MIT License */
+const vue = require("vue");
+const EvLabel_vue_vue_type_script_setup_true_lang = require("./EvLabel.vue_vue_type_script_setup_true_lang-CkvN17nB.cjs");
+const EvRadioGroup = require("./EvRadioGroup-CHeze8Kf.cjs");
+const validation = require("./validation-Bb_0VPCB.cjs");
+const component = require("./component-B6mexqr-.cjs");
+const props = require("./props-DowqCl7a.cjs");
+const helpers = require("./helpers-B6Z-pFEJ.cjs");
+const isFunctions = require("./is-functions-CV9cm7Iz.cjs");
+const makeEvRadioProps = props.propsFactory(
+  {
+    clearable: Boolean,
+    value: null,
+    ...EvLabel_vue_vue_type_script_setup_true_lang.makeLabelProps(),
+    ...validation.makeFormFieldProps(),
+    ...component.makeComponentProps()
+  },
+  "EvRadio"
+);
+const _hoisted_1 = { class: "ev-radio--control" };
+const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ev-radio--circles" }, [
+  /* @__PURE__ */ vue.createElementVNode("div", { class: "ev-radio--outer-circle" }),
+  /* @__PURE__ */ vue.createElementVNode("div", { class: "ev-radio--inner-circle" })
+], -1);
+const _hoisted_3 = ["id", "name", "disabled", "value", "checked", "onKeyup"];
+const _hoisted_4 = {
+  key: 0,
+  class: "ev-radio--label"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "EvRadio",
+  props: {
+    ...makeEvRadioProps()
+  },
+  emits: ["update:focused", "update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const group = vue.inject(EvRadioGroup.EvRadioGroupSymbol, void 0);
+    const attrs = vue.useAttrs();
+    const containerRef = vue.ref(null);
+    const inputRef = vue.ref(null);
+    const [containerAttrs, inputAttrs] = helpers.splitInputAttrs(attrs);
+    const formField = validation.useFormField(props2, group);
+    const valueComparator = isFunctions.isDeepEqual;
+    const isChecked = vue.computed({
+      get() {
+        return valueComparator(formField.value, props2.value);
+      },
+      set(value) {
+        if (props2.readonly) {
+          return;
+        }
+        formField.value = value ? props2.value : "";
+      }
+    });
+    function onClick(e) {
+      if (isChecked.value && props2.clearable) {
+        isChecked.value = false;
+      }
+    }
+    function onInput(e) {
+      isChecked.value = e.target.checked;
+    }
+    function onSpace(e) {
+      if (isChecked.value && props2.clearable) {
+        isChecked.value = false;
+        e.preventDefault();
+      }
+    }
+    function getInputElement() {
+      return inputRef.value;
+    }
+    __expose({
+      input: inputRef,
+      focus: () => {
+        var _a;
+        (_a = getInputElement()) == null ? void 0 : _a.focus();
+      },
+      ...formField.expose()
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: [
+          "ev-radio",
+          {
+            "is-checked": isChecked.value,
+            "is-labelled": props2.label || vue.unref(slots).label
+          },
+          vue.unref(formField).classes,
+          props2.class
+        ],
+        style: props2.style
+      }, vue.unref(containerAttrs)), [
+        vue.createElementVNode("div", _hoisted_1, [
+          _hoisted_2,
+          vue.createElementVNode("input", vue.mergeProps({
+            id: vue.unref(formField).id,
+            ref_key: "inputRef",
+            ref: inputRef,
+            type: "radio",
+            name: vue.unref(formField).name,
+            disabled: vue.unref(formField).isDisabled || vue.unref(formField).isReadonly,
+            value: props2.value,
+            checked: isChecked.value
+          }, vue.unref(inputAttrs), {
+            onBlur: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => vue.unref(formField).blur && vue.unref(formField).blur(...args)),
+            onClick,
+            onFocus: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => vue.unref(formField).focus && vue.unref(formField).focus(...args)),
+            onInput,
+            onKeyup: vue.withKeys(onSpace, ["space"])
+          }), null, 16, _hoisted_3)
+        ]),
+        props2.label || vue.unref(slots).label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createVNode(EvLabel_vue_vue_type_script_setup_true_lang._sfc_main, {
+            clickable: "",
+            for: vue.unref(formField).id,
+            title: props2.label,
+            hint: props2.hint
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "label")
+            ]),
+            _: 3
+          }, 8, ["for", "title", "hint"])
+        ])) : vue.createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.makeEvRadioProps = makeEvRadioProps;
+//# sourceMappingURL=EvRadio.vue_vue_type_script_setup_true_lang-B8Qd1tpt.cjs.map

package/dist/cjs/EvRadio.vue_vue_type_script_setup_true_lang-B8Qd1tpt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvRadio.vue_vue_type_script_setup_true_lang-B8Qd1tpt.cjs","sources":["../../src/components/EvRadio/EvRadio.ts","../../src/components/EvRadio/EvRadio.vue"],"sourcesContent":["import { propsFactory } from \"@/util\";\nimport { makeFormFieldProps } from \"@/composables/validation\";\nimport { makeComponentProps } from \"@/composables/component\";\nimport { makeLabelProps } from \"@/components/EvLabel\";\n\nexport const makeEvRadioProps = propsFactory(\n    {\n        clearable: Boolean,\n        value: null,\n        ...makeLabelProps(),\n        ...makeFormFieldProps(),\n        ...makeComponentProps(),\n    },\n    \"EvRadio\",\n);\n","<script setup lang=\"ts\">\n/**\n * # `<ev-radio>`\n */\nimport \"./EvRadio.scss\";\nimport { computed, inject, ref, useAttrs } from \"vue\";\nimport { isDeepEqual, splitInputAttrs } from \"@/util\";\nimport EvLabel from \"@/components/EvLabel/EvLabel.vue\";\nimport { EvRadioGroupSymbol } from \"@/components/EvRadioGroup\";\nimport { makeEvRadioProps } from \"./EvRadio\";\nimport { useFormField } from \"@/composables/validation\";\n\n/**\n * We want to pass attributes not defined as 'props'\n * to the `<input>` field, so we need to turn off `inheritAttrs`.\n */\ndefineOptions({\n    inheritAttrs: false,\n});\n\n// Props & slots\nconst props = defineProps({\n    ...makeEvRadioProps(),\n});\nconst slots = defineSlots<{\n    label(): never;\n}>();\nconst group = inject(EvRadioGroupSymbol, undefined);\n\n// Emit\ndefineEmits([\"update:focused\", \"update:modelValue\"]);\n\nconst attrs = useAttrs();\nconst containerRef = ref<HTMLElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst [containerAttrs, inputAttrs] = splitInputAttrs(attrs);\nconst formField = useFormField(props, group);\nconst valueComparator = isDeepEqual;\n\n// Computed\nconst isChecked = computed({\n    get() {\n        return valueComparator(formField.value, props.value);\n    },\n    set(value: boolean) {\n        if (props.readonly) {\n            return;\n        }\n        formField.value = value ? props.value : \"\";\n    },\n});\n\n/**\n * # On Click\n *\n * Handle clearable radio buttons when the input is checked and is then clicked again.\n *\n * @param e\n */\nfunction onClick(e: Event): void {\n    if (isChecked.value && props.clearable) {\n        isChecked.value = false;\n    }\n}\n\n/**\n * ## On Input\n *\n * Handle changes to the checked state.\n *\n * @param e\n */\nfunction onInput(e: Event): void {\n    isChecked.value = (e.target as HTMLInputElement).checked;\n}\n\n/**\n * # On Space\n *\n * We need this event handler to handle clearable radio, because\n * the `click` event is not triggered when the input is checked.\n *\n * @param e\n */\nfunction onSpace(e: Event): void {\n    if (isChecked.value && props.clearable) {\n        isChecked.value = false;\n        // Prevent default to avoid the click event being triggered.\n        e.preventDefault();\n    }\n}\n\n/**\n * ## Get Input Element\n */\nfunction getInputElement(): HTMLInputElement | null {\n    return inputRef.value;\n}\n\n/**\n * ## Expose stuff\n */\ndefineExpose({\n    input: inputRef,\n    focus: () => {\n        getInputElement()?.focus();\n    },\n    ...formField.expose(),\n});\n</script>\n\n<template>\n    <div\n        ref=\"containerRef\"\n        :class=\"[\n            'ev-radio',\n            {\n                'is-checked': isChecked,\n                'is-labelled': props.label || slots.label,\n            },\n            formField.classes,\n            props.class,\n        ]\"\n        :style=\"props.style\"\n        v-bind=\"containerAttrs\">\n        <div class=\"ev-radio--control\">\n            <div class=\"ev-radio--circles\">\n                <div class=\"ev-radio--outer-circle\"></div>\n                <div class=\"ev-radio--inner-circle\"></div>\n            </div>\n            <input\n                :id=\"formField.id\"\n                ref=\"inputRef\"\n                type=\"radio\"\n                :name=\"formField.name\"\n                :disabled=\"formField.isDisabled || formField.isReadonly\"\n                :value=\"props.value\"\n                :checked=\"isChecked\"\n                v-bind=\"inputAttrs\"\n                @blur=\"formField.blur\"\n                @click=\"onClick\"\n                @focus=\"formField.focus\"\n                @input=\"onInput\"\n                @keyup.space=\"onSpace\" />\n        </div>\n        <div v-if=\"props.label || slots.label\" class=\"ev-radio--label\">\n            <ev-label\n                clickable\n                :for=\"formField.id\"\n                :title=\"props.label\"\n                :hint=\"props.hint\">\n                <slot name=\"label\" />\n            </ev-label>\n        </div>\n    </div>\n</template>\n"],"names":["propsFactory","makeLabelProps","makeFormFieldProps","makeComponentProps","_useSlots","inject","EvRadioGroupSymbol","useAttrs","ref","splitInputAttrs","useFormField","props","isDeepEqual","computed"],"mappings":";;;;;;;;;;AAKO,MAAM,mBAAmBA,MAAA;AAAA,EAC5B;AAAA,IACI,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAGC,2DAAe;AAAA,IAClB,GAAGC,8BAAmB;AAAA,IACtB,GAAGC,UAAmB,mBAAA;AAAA,EAC1B;AAAA,EACA;AACJ;;;;;;;;;;;;;;;;;;;;;;ACUA,UAAM,QAAQC,IAAAA;AAGR,UAAA,QAAQC,IAAAA,OAAOC,aAAA,oBAAoB,MAAS;AAKlD,UAAM,QAAQC,IAAAA,SAAS;AACjB,UAAA,eAAeC,QAAwB,IAAI;AAC3C,UAAA,WAAWA,QAA6B,IAAI;AAClD,UAAM,CAAC,gBAAgB,UAAU,IAAIC,QAAAA,gBAAgB,KAAK;AACpD,UAAA,YAAYC,WAAAA,aAAaC,QAAO,KAAK;AAC3C,UAAM,kBAAkBC,YAAA;AAGxB,UAAM,YAAYC,IAAAA,SAAS;AAAA,MACvB,MAAM;AACF,eAAO,gBAAgB,UAAU,OAAOF,OAAM,KAAK;AAAA,MACvD;AAAA,MACA,IAAI,OAAgB;AAChB,YAAIA,OAAM,UAAU;AAChB;AAAA,QAAA;AAEM,kBAAA,QAAQ,QAAQA,OAAM,QAAQ;AAAA,MAAA;AAAA,IAC5C,CACH;AASD,aAAS,QAAQ,GAAgB;AACzB,UAAA,UAAU,SAASA,OAAM,WAAW;AACpC,kBAAU,QAAQ;AAAA,MAAA;AAAA,IACtB;AAUJ,aAAS,QAAQ,GAAgB;AACnB,gBAAA,QAAS,EAAE,OAA4B;AAAA,IAAA;AAWrD,aAAS,QAAQ,GAAgB;AACzB,UAAA,UAAU,SAASA,OAAM,WAAW;AACpC,kBAAU,QAAQ;AAElB,UAAE,eAAe;AAAA,MAAA;AAAA,IACrB;AAMJ,aAAS,kBAA2C;AAChD,aAAO,SAAS;AAAA,IAAA;AAMP,aAAA;AAAA,MACT,OAAO;AAAA,MACP,OAAO,MAAM;;AACT,8BAAA,MAAA,mBAAmB;AAAA,MACvB;AAAA,MACA,GAAG,UAAU,OAAO;AAAA,IAAA,CACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EvRadioGroup-CHeze8Kf.cjs

@@ -0,0 +1,19 @@
+"use strict";
+/*! Evance UI v1.0.25 | MIT License */
+const component = require("./component-B6mexqr-.cjs");
+const validation = require("./validation-Bb_0VPCB.cjs");
+const EvLabel_vue_vue_type_script_setup_true_lang = require("./EvLabel.vue_vue_type_script_setup_true_lang-CkvN17nB.cjs");
+const props = require("./props-DowqCl7a.cjs");
+const EvRadioGroupSymbol = Symbol.for("ev:radio-group");
+const makeEvRadioGroupProps = props.propsFactory(
+  {
+    inline: Boolean,
+    ...EvLabel_vue_vue_type_script_setup_true_lang.makeLabelProps(),
+    ...validation.makeFormFieldProps(),
+    ...component.makeComponentProps()
+  },
+  "EvRadioGroup"
+);
+exports.EvRadioGroupSymbol = EvRadioGroupSymbol;
+exports.makeEvRadioGroupProps = makeEvRadioGroupProps;
+//# sourceMappingURL=EvRadioGroup-CHeze8Kf.cjs.map

package/dist/cjs/EvRadioGroup-CHeze8Kf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvRadioGroup-CHeze8Kf.cjs","sources":["../../src/components/EvRadioGroup/EvRadioGroup.ts"],"sourcesContent":["import { propsFactory } from \"@/util\";\nimport { makeComponentProps } from \"@/composables/component\";\nimport { makeFormFieldProps } from \"@/composables/validation\";\nimport { InjectionKey } from \"vue\";\nimport { FormField } from \"@/modules/Form/FormField\";\nimport { makeLabelProps } from \"@/components/EvLabel\";\n\nexport interface EvRadioGroupContext extends FormField {}\n\nexport const EvRadioGroupSymbol: InjectionKey<EvRadioGroupContext> =\n    Symbol.for(\"ev:radio-group\");\n\nexport const makeEvRadioGroupProps = propsFactory(\n    {\n        inline: Boolean,\n\n        ...makeLabelProps(),\n        ...makeFormFieldProps(),\n        ...makeComponentProps(),\n    },\n    \"EvRadioGroup\",\n);\n"],"names":["propsFactory","makeLabelProps","makeFormFieldProps","makeComponentProps"],"mappings":";;;;;;AASa,MAAA,qBACT,OAAO,IAAI,gBAAgB;AAExB,MAAM,wBAAwBA,MAAA;AAAA,EACjC;AAAA,IACI,QAAQ;AAAA,IAER,GAAGC,2DAAe;AAAA,IAClB,GAAGC,8BAAmB;AAAA,IACtB,GAAGC,UAAmB,mBAAA;AAAA,EAC1B;AAAA,EACA;AACJ;;;"}

package/dist/cjs/EvRadioGroup.cjs

@@ -1,8 +1,8 @@
 "use strict";
-/*! Evance UI v1.0.24 | MIT License */
+/*! Evance UI v1.0.25 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvRadioGroup = require("./EvRadioGroup-CVmWGCcN.cjs");
-const EvRadioGroup_vue_vue_type_script_setup_true_lang = require("./EvRadioGroup.vue_vue_type_script_setup_true_lang-B4T7uCqS.cjs");
+const EvRadioGroup = require("./EvRadioGroup-CHeze8Kf.cjs");
+const EvRadioGroup_vue_vue_type_script_setup_true_lang = require("./EvRadioGroup.vue_vue_type_script_setup_true_lang-DHBxXsWf.cjs");
 exports.EvRadioGroupSymbol = EvRadioGroup.EvRadioGroupSymbol;
 exports.makeEvRadioGroupProps = EvRadioGroup.makeEvRadioGroupProps;
 exports.EvRadioGroup = EvRadioGroup_vue_vue_type_script_setup_true_lang._sfc_main;

package/dist/cjs/EvRadioGroup.vue_vue_type_script_setup_true_lang-DHBxXsWf.cjs

@@ -0,0 +1,73 @@
+"use strict";
+/*! Evance UI v1.0.25 | MIT License */
+const vue = require("vue");
+const EvLabel_vue_vue_type_script_setup_true_lang = require("./EvLabel.vue_vue_type_script_setup_true_lang-CkvN17nB.cjs");
+const EvRadioGroup = require("./EvRadioGroup-CHeze8Kf.cjs");
+const validation = require("./validation-Bb_0VPCB.cjs");
+const EvErrors_vue_vue_type_script_setup_true_lang = require("./EvErrors.vue_vue_type_script_setup_true_lang-Cue5GNgp.cjs");
+const helpers = require("./helpers-B6Z-pFEJ.cjs");
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  key: 0,
+  class: "ev-radio-group--label"
+};
+const _hoisted_3 = { class: "ev-radio-group--control" };
+const _hoisted_4 = {
+  key: 1,
+  class: "ev-radio-group-errors"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "EvRadioGroup",
+  props: {
+    ...EvRadioGroup.makeEvRadioGroupProps()
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const slots = vue.useSlots();
+    const uid = helpers.getNextId();
+    const id = vue.computed(() => {
+      return props.id || `radio-group-${uid}`;
+    });
+    const formField = validation.useFormField(props);
+    vue.provide(EvRadioGroup.EvRadioGroupSymbol, formField);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        id: id.value,
+        class: vue.normalizeClass([
+          "ev-radio-group",
+          props.class,
+          {
+            "is-inline": props.inline
+          }
+        ]),
+        style: vue.normalizeStyle(props.style)
+      }, [
+        props.label || props.hint || vue.unref(slots).label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(EvLabel_vue_vue_type_script_setup_true_lang._sfc_main, {
+            title: props.label,
+            hint: props.hint
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "label")
+            ]),
+            _: 3
+          }, 8, ["title", "hint"])
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        vue.unref(formField).isShowErrorMessages ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createVNode(EvErrors_vue_vue_type_script_setup_true_lang._sfc_main, {
+            messages: vue.unref(formField).errorMessages
+          }, null, 8, ["messages"])
+        ])) : vue.createCommentVNode("", true)
+      ], 14, _hoisted_1);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=EvRadioGroup.vue_vue_type_script_setup_true_lang-DHBxXsWf.cjs.map

package/dist/cjs/EvRadioGroup.vue_vue_type_script_setup_true_lang-DHBxXsWf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvRadioGroup.vue_vue_type_script_setup_true_lang-DHBxXsWf.cjs","sources":["../../src/components/EvRadioGroup/EvRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./EvRadioGroup.scss\";\nimport EvLabel from \"@/components/EvLabel/EvLabel.vue\";\nimport { EvRadioGroupSymbol, makeEvRadioGroupProps } from \"./EvRadioGroup\";\nimport { computed, provide } from \"vue\";\nimport { getNextId } from \"@/util\";\nimport { useFormField } from \"@/composables/validation\";\nimport EvErrors from \"@/components/EvErrors/EvErrors.vue\";\n\ndefineOptions({\n    inheritAttrs: false,\n});\n\n// Props & slots\nconst props = defineProps({\n    ...makeEvRadioGroupProps(),\n});\nconst slots = defineSlots<{\n    default(): never;\n    label(): never;\n}>();\n\n// Emit\ndefineEmits([\"update:modelValue\"]);\n\nconst uid = getNextId();\nconst id = computed(() => {\n    return props.id || `radio-group-${uid}`;\n});\n\nconst formField = useFormField(props);\nprovide(EvRadioGroupSymbol, formField);\n</script>\n\n<template>\n    <div\n        :id=\"id\"\n        :class=\"[\n            'ev-radio-group',\n            props.class,\n            {\n                'is-inline': props.inline,\n            },\n        ]\"\n        :style=\"props.style\">\n        <div v-if=\"props.label || props.hint || slots.label\" class=\"ev-radio-group--label\">\n            <ev-label :title=\"props.label\" :hint=\"props.hint\">\n                <slot name=\"label\" />\n            </ev-label>\n        </div>\n\n        <div class=\"ev-radio-group--control\">\n            <slot />\n        </div>\n\n        <div v-if=\"formField.isShowErrorMessages\" class=\"ev-radio-group-errors\">\n            <ev-errors :messages=\"formField.errorMessages\" />\n        </div>\n    </div>\n</template>\n"],"names":["_useSlots","getNextId","computed","useFormField","provide","EvRadioGroupSymbol"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,QAAQA,IAAAA;AAQd,UAAM,MAAMC,QAAAA,UAAU;AAChB,UAAA,KAAKC,IAAAA,SAAS,MAAM;AACf,aAAA,MAAM,MAAM,eAAe,GAAG;AAAA,IAAA,CACxC;AAEK,UAAA,YAAYC,wBAAa,KAAK;AACpCC,QAAA,QAAQC,iCAAoB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/EvResponsive.cjs

@@ -1,7 +1,7 @@
 "use strict";
-/*! Evance UI v1.0.24 | MIT License */
+/*! Evance UI v1.0.25 | MIT License */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EvResponsive_vue_vue_type_script_setup_true_lang = require("./EvResponsive.vue_vue_type_script_setup_true_lang-TJqblPoi.cjs");
+const EvResponsive_vue_vue_type_script_setup_true_lang = require("./EvResponsive.vue_vue_type_script_setup_true_lang-B224jQ7j.cjs");
 exports.EvResponsive = EvResponsive_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.makeEvResponsiveProps = EvResponsive_vue_vue_type_script_setup_true_lang.makeEvResponsiveProps;
 exports.useAspectStyles = EvResponsive_vue_vue_type_script_setup_true_lang.useAspectStyles;