@eturnity/eturnity_reusable_components 8.37.1-dev-03-elisee-8.37.3 → 8.40.0

package/dist/main.es23.js

@@ -1,4 +1,196 @@
-const Test_vue_vue_type_style_index_0_lang = "";
+import styled from "./main.es7.js";
+import _sfc_main$1 from "./main.es15.js";
+import theme from "./main.es8.js";
+import "./main.es3.js";
+import _export_sfc from "./main.es11.js";
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from "./main.es6.js";
+const StyledComponents = {
+  ProgressionStepItem: styled.div`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    `,
+  BoxContainer: styled("div", {
+    isActive: Boolean,
+    isValid: Boolean,
+    isError: Boolean,
+    isWarning: Boolean,
+    isDirty: Boolean,
+    isDisabled: Boolean,
+    size: String,
+    borderRadius: String
+  })`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: ${({
+    size
+  }) => size};
+      height: ${({
+    size
+  }) => size};
+      font-size: 16px;
+      background-color: ${({
+    theme: theme2,
+    isValid,
+    isActive,
+    isError,
+    isWarning,
+    isDirty,
+    isDisabled
+  }) => {
+    if (isDisabled)
+      return theme2.semanticColors.grey[200];
+    if (isError)
+      return theme2.semanticColors.red[500];
+    if (isWarning)
+      return theme2.semanticColors.yellow[500];
+    if (isActive) {
+      return theme2.semanticColors.purple[500];
+    }
+    if (!isDirty)
+      return theme2.semanticColors.grey[50];
+    if (isValid)
+      return theme2.semanticColors.purple[50];
+    return theme2.semanticColors.grey[50];
+  }};
+      border: 1px solid;
+      border-color: ${({
+    theme: theme2,
+    isValid,
+    isActive,
+    isError,
+    isWarning,
+    isDirty,
+    isDisabled
+  }) => {
+    if (isDisabled)
+      return theme2.semanticColors.grey[500];
+    if (isError)
+      return theme2.semanticColors.red[500];
+    if (isWarning)
+      return theme2.semanticColors.yellow[600];
+    if (!isDirty)
+      return theme2.semanticColors.grey[400];
+    if (isActive)
+      return theme2.semanticColors.purple[600];
+    if (isValid)
+      return theme2.semanticColors.purple[50];
+    return theme2.semanticColors.grey[400];
+  }};
+      color: ${({
+    theme: theme2,
+    isValid,
+    isActive
+  }) => isActive ? theme2.colors.white : theme2.semanticColors.grey[800]};
+      margin: 0;
+      border-radius: ${({
+    borderRadius
+  }) => borderRadius};
+      cursor: ${({
+    isValid
+  }) => isValid ? "pointer" : "default"};
+      &:hover {
+        ${({
+    theme: theme2,
+    isValid,
+    isActive
+  }) => isValid ? "background-color:" + theme2.semanticColors.purple[100] + ";" : ""}
+      }
+    `,
+  NumberContainer: styled.div``
+};
+const _sfc_main = {
+  name: "StatusIndicator",
+  components: {
+    ...StyledComponents,
+    RcIcon: _sfc_main$1
+  },
+  props: {
+    isError: {
+      type: Boolean,
+      default: false
+    },
+    isWarning: {
+      type: Boolean,
+      default: false
+    },
+    isDirty: {
+      type: Boolean,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "20px"
+    },
+    borderRadius: {
+      type: String,
+      default: "50%"
+    }
+  },
+  data() {
+    return {
+      theme
+    };
+  },
+  computed: {
+    isValid() {
+      return this.isDirty && !this.isError && !this.isWarning;
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_RcIcon = resolveComponent("RcIcon");
+  const _component_NumberContainer = resolveComponent("NumberContainer");
+  const _component_BoxContainer = resolveComponent("BoxContainer");
+  return openBlock(), createBlock(_component_BoxContainer, {
+    "border-radius": $props.borderRadius,
+    "is-active": $props.isActive,
+    "is-dirty": $props.isDirty,
+    "is-disabled": $props.isDisabled,
+    "is-error": $props.isError,
+    "is-valid": $options.isValid,
+    "is-warning": $props.isWarning,
+    size: $props.size
+  }, {
+    default: withCtx(() => [$options.isValid ? (openBlock(), createBlock(_component_RcIcon, {
+      key: 0,
+      color: $data.theme.semanticColors.purple[500],
+      "hovered-color": $data.theme.semanticColors.purple[500],
+      name: "checkmark_thin",
+      size: "16px"
+    }, null, 8, ["color", "hovered-color"])) : $props.isError ? (openBlock(), createBlock(_component_RcIcon, {
+      key: 1,
+      color: $data.theme.colors.white,
+      "hovered-color": $data.theme.colors.white,
+      name: "cross",
+      size: "10x"
+    }, null, 8, ["color", "hovered-color"])) : $props.isWarning ? (openBlock(), createBlock(_component_RcIcon, {
+      key: 2,
+      color: $data.theme.colors.white,
+      "hovered-color": $data.theme.colors.white,
+      name: "warning_triangle",
+      size: "10px"
+    }, null, 8, ["color", "hovered-color"])) : (openBlock(), createBlock(_component_NumberContainer, {
+      key: 3,
+      "is-active": $props.isActive,
+      "is-valid": $options.isValid
+    }, {
+      default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+      _: 3
+    }, 8, ["is-active", "is-valid"]))]),
+    _: 3
+  }, 8, ["border-radius", "is-active", "is-dirty", "is-disabled", "is-error", "is-valid", "is-warning", "size"]);
+}
+const StatusIndicator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Test_vue_vue_type_style_index_0_lang as default
+  StatusIndicator as default
 };