@eturnity/eturnity_reusable_components 8.40.6 → 8.40.8--EPDM-16195.0

package/dist/main.es26.js

@@ -1,26 +1,261 @@
-import styled from "./main.es7.js";
 import "./main.es3.js";
-import _export_sfc from "./main.es11.js";
-import { resolveComponent, openBlock, createBlock, withCtx, createTextVNode } from "./main.es6.js";
-const StarElement = styled.span`
+import styled from "./main.es7.js";
+import { fetchIcon } from "./main.es27.js";
+import { rotateSvg } from "./main.es28.js";
+import { reactive } from "./main.es18.js";
+import { computed, onMounted, watch, openBlock, createBlock, withCtx, createVNode, createElementVNode as createBaseVNode, createTextVNode, createCommentVNode } from "./main.es6.js";
+import { toDisplayString } from "./main.es16.js";
+const _hoisted_1 = ["innerHTML"];
+const _sfc_main = {
+  __name: "index",
+  props: {
+    disabled: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    name: {
+      required: true,
+      type: String
+    },
+    color: {
+      required: false,
+      default: null,
+      type: String
+    },
+    hoveredColor: {
+      required: false,
+      default: null,
+      type: String
+    },
+    size: {
+      required: false,
+      default: "30px",
+      type: String
+    },
+    width: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    height: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    cursor: {
+      required: false,
+      default: null,
+      type: String
+    },
+    isStriked: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    backgroundColor: {
+      required: false,
+      default: null,
+      type: String
+    },
+    count: {
+      required: false,
+      default: 0,
+      type: Number
+    },
+    animation: {
+      required: false,
+      default: "none",
+      type: String
+    },
+    fillType: {
+      required: false,
+      default: "fill",
+      type: String
+    },
+    disableHover: {
+      type: Boolean,
+      default: false
+    },
+    showCount: {
+      type: Boolean,
+      default: false
+    },
+    svgRotation: {
+      type: Number,
+      default: null
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const Wrapper = styled("div", {
+      height: String,
+      width: String,
+      disabled: Boolean,
+      cursor: String
+    })`
+    display: flex;
+    position: relative;
+    align-content: center;
+    justify-content: center;
+    width: ${(props2) => props2.width};
+    height: ${(props2) => props2.height};
+    min-width: ${(props2) => props2.width};
+    min-height: ${(props2) => props2.height};
+    cursor: ${(props2) => props2.disabled ? "not-allowed" : props2.cursor};
+    line-height: 0;
+  `;
+    const CountWrapper = styled("div")`
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    background-color: ${({
+      theme
+    }) => theme.colors.red};
     color: ${({
-  theme
-}) => theme.colors.red};
+      theme
+    }) => theme.colors.white};
+    border-radius: 100%;
+    width: 15px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
   `;
-const _sfc_main = {
-  name: "IsRequiredLabelStar",
-  components: {
-    StarElement
+    const StrikedLine = styled("div", {
+      color: String
+    })`
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    align-content: center;
+    justify-content: center;
+    width: 143%;
+    height: 8%;
+    background-color: ${({
+      theme,
+      color
+    }) => theme.colors[color] || color};
+    min-height: 0;
+    line-height: 0;
+    transform-origin: 0% 100%;
+    transform: rotate(-45deg);
+  `;
+    const IconImageAttrs = {
+      color: String,
+      backgroundColor: String,
+      hoveredColor: String,
+      animation: String,
+      fillType: String,
+      disableHover: Boolean,
+      showCount: Boolean
+    };
+    const IconImage = styled("div", IconImageAttrs)`
+    animation: ${(props2) => props2.animation};
+    width: 100%;
+    svg {
+      width: 100%;
+      height: 100%;
+      background-color: ${(props2) => props2.backgroundColor ? props2.backgroundColor : "transparent"};
+      padding: ${(props2) => props2.backgroundColor ? "3px" : "0"};
+      border-radius: ${(props2) => props2.showCount ? "8px 0 0  8px" : props2.backgroundColor ? "8px" : "0"};
+    }
+    svg path:not(.fix, .isStrokePath) {
+      ${({
+      theme,
+      color,
+      fillType
+    }) => color && `${fillType}: ${theme.colors[color] || color};`}
+    }
+    svg .isStroke {
+      ${({
+      theme,
+      color
+    }) => color && `stroke: ${theme.colors[color] || color};`}
+    }
+    svg .isFill {
+      ${({
+      theme,
+      color
+    }) => color && `fill: ${theme.colors[color] || color};`}
+    }
+    svg .isStrokePath:not(.fix) {
+      ${({
+      theme,
+      color
+    }) => color && `stroke: ${theme.colors[color] || color};`}
+    }
+    ${(props2) => !props2.disableHover && `
+     &:hover svg path:not(.fix, .isStrokePath) {
+      ${`${props2.fillType}: ${props2.theme.colors[props2.hoveredColor] || props2.color};`}
+     &:hover svg isStrokePath:not(.fix) {
+      ${`stroke: ${props2.theme.colors[props2.hoveredColor] || props2.color};`}
+    }
+    &:hover + div {
+      background-color: ${props2.hoveredColor};
+    }
+    `}
+
+    @keyframes fade {
+      50% {
+        opacity: 0.3;
+      }
+    }
+  `;
+    const icon = reactive({
+      html: ""
+    });
+    const loadSvg = async () => {
+      let svgString = await fetchIcon(props.name.toLowerCase());
+      if (props.svgRotation)
+        svgString = rotateSvg(svgString, props.svgRotation);
+      icon.html = svgString;
+    };
+    const counter = computed(() => props.count > 9 ? "9+" : props.count.toString());
+    onMounted(() => loadSvg());
+    watch(() => props.name, loadSvg);
+    watch(() => props.svgRotation, loadSvg);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Wrapper, {
+        cursor: __props.cursor,
+        "data-test-id": "icon_wrapper",
+        disabled: __props.disabled,
+        height: __props.height ? __props.height : __props.size,
+        width: __props.width ? __props.width : __props.size
+      }, {
+        default: withCtx(() => [createVNode(IconImage, {
+          animation: __props.animation,
+          "background-color": __props.backgroundColor,
+          color: __props.color,
+          "data-test-id": "icon_image",
+          "disable-hover": __props.disableHover,
+          "fill-type": __props.fillType,
+          "hovered-color": __props.hoveredColor,
+          "show-count": __props.showCount
+        }, {
+          default: withCtx(() => [createBaseVNode("i", {
+            "data-test-id": "icon_svg",
+            innerHTML: icon.html
+          }, null, 8, _hoisted_1)]),
+          _: 1
+        }, 8, ["animation", "background-color", "color", "disable-hover", "fill-type", "hovered-color", "show-count"]), createTextVNode(), __props.isStriked ? (openBlock(), createBlock(StrikedLine, {
+          key: 0,
+          color: __props.color,
+          "data-test-id": "icon_striked_line"
+        }, null, 8, ["color"])) : createCommentVNode("", true), createTextVNode(), __props.count > 0 ? (openBlock(), createBlock(CountWrapper, {
+          key: 1,
+          "data-test-id": "icon_count"
+        }, {
+          default: withCtx(() => [createTextVNode(toDisplayString(counter.value), 1)]),
+          _: 1
+        })) : createCommentVNode("", true)]),
+        _: 1
+      }, 8, ["cursor", "disabled", "height", "width"]);
+    };
   }
 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_StarElement = resolveComponent("StarElement");
-  return openBlock(), createBlock(_component_StarElement, null, {
-    default: withCtx(() => [createTextVNode("*")]),
-    _: 1
-  });
-}
-const IsRequiredLabelStar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  IsRequiredLabelStar as default
+  _sfc_main as default
 };

package/dist/main.es384.js

@@ -1,5 +1,5 @@
 import styled from "./main.es7.js";
-import _sfc_main$1 from "./main.es17.js";
+import _sfc_main$1 from "./main.es26.js";
 import theme from "./main.es8.js";
 import "./main.es3.js";
 import _export_sfc from "./main.es11.js";

package/dist/main.es6.js

@@ -1,5 +1,5 @@
-import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es19.js";
-import { readonly, ref, shallowRef, unref } from "./main.es19.js";
+import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es18.js";
+import { readonly, ref, shallowRef, unref } from "./main.es18.js";
 import { isString, isFunction, getGlobalThis, isArray, NOOP, EMPTY_OBJ, normalizeClass, isObject, extend, normalizeStyle, isOn, isPromise, hasChanged, remove, isSet, isMap, isPlainObject, camelize, capitalize, toHandlerKey, hasOwn, EMPTY_ARR, NO, isBuiltInDirective, isReservedProp, invokeArrayFns, makeMap, looseToNumber, hyphenate, def, toRawType, isModelListener } from "./main.es16.js";
 import { toDisplayString } from "./main.es16.js";
 const stack = [];

package/dist/main.es9.js

@@ -1,5 +1,5 @@
 import styled from "./main.es7.js";
-import _sfc_main$1 from "./main.es17.js";
+import _sfc_main$1 from "./main.es26.js";
 import theme from "./main.es8.js";
 import "./main.es3.js";
 import _export_sfc from "./main.es11.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.40.6",
+  "version": "8.40.8--EPDM-16195.0",
   "files": [
     "dist",
     "src"

package/src/components/barchart/BottomFields.vue

@@ -1,19 +1,5 @@
 <template>
   <Container :is-chart-controls-shown-in-bottom="isChartControlsShownInBottom">
-    <LabelsColumn :width="yAxisWidth">
-      <LabelRow v-for="series in seriesData" :key="series.name">
-        {{ series.name }}
-      </LabelRow>
-      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
-        {{ $gettext ? `${$gettext('loadprofile_total')} (%)` : 'Total (%)' }}
-      </TotalRow>
-      <TotalRow v-if="seriesData.length">
-        {{
-          $gettext ? `${$gettext('loadprofile_total')} (kWh)` : 'Total (kWh)'
-        }}
-      </TotalRow>
-    </LabelsColumn>
-
     <FieldsContainer
       :class="`fields-container-${chartId}`"
       @scroll="handleFieldsScroll"
@@ -26,6 +12,11 @@
             :key="series.name"
             :data-series-name="series.name"
           >
+            <LabelsColumn :width="yAxisWidth">
+              <LabelRow>
+                {{ series.name }}
+              </LabelRow>
+            </LabelsColumn>
             <InputGroup
               v-for="(item, index) in props.data"
               :key="index"
@@ -60,6 +51,15 @@
           </InputRow>
 
           <TotalInputRow v-if="fieldMode === 'percentage'">
+            <LabelsColumn :width="yAxisWidth">
+              <TotalRow v-if="seriesData.length">
+                {{
+                  $gettext
+                    ? `${$gettext('loadprofile_total')} (%)`
+                    : 'Total (%)'
+                }}
+              </TotalRow>
+            </LabelsColumn>
             <InputGroup
               v-for="(item, index) in props.data"
               :key="index"
@@ -83,6 +83,15 @@
           </TotalInputRow>
 
           <TotalInputRow>
+            <LabelsColumn :width="yAxisWidth">
+              <TotalRow v-if="seriesData.length">
+                {{
+                  $gettext
+                    ? `${$gettext('loadprofile_total')} (kWh)`
+                    : 'Total (kWh)'
+                }}
+              </TotalRow>
+            </LabelsColumn>
             <InputGroup
               v-for="(item, index) in props.data"
               :key="index"
@@ -111,6 +120,7 @@
         <!-- For simple bar chart -->
         <template v-else>
           <InputRow>
+            <LabelsColumn :width="yAxisWidth" />
             <InputGroup
               v-for="(item, index) in props.data"
               :key="index"

package/src/components/spinner/index.vue

@@ -60,7 +60,7 @@
   const getSpinnerSize = (size) => {
     switch (size) {
       case 'tiny':
-        return '16px'
+        return '14px'
       case 'small':
         return '24px'
       case 'large':

package/src/components/tables/mainTable/index.vue

@@ -54,9 +54,8 @@
 
   const TableTitle = styled.div`
     margin-bottom: 16px;
-    font-weight: bold;
+    font-weight: 500;
     font-size: 14px;
-    text-transform: uppercase;
   `
 
   const tableScrollProps = {
@@ -66,12 +65,6 @@
   const TableScroll = styled('div', tableScrollProps)`
     max-width: 100%;
     height: auto;
-    ${(props) =>
-      props.isPositionAbsolute &&
-      `
-    position: absolute;
-    left: -20px;
-  `}
   `
 
   const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
@@ -111,15 +104,24 @@
 
   const TableContainer = styled('table', containerAttrs)`
     width: 100%;
-    border-collapse: collapse;
-    border: none;
-    font-size: 13px;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-right: ${(props) =>
+      '1px solid ' + props.theme.semanticColors.grey[200]};
+    border-left: ${(props) =>
+      '1px solid ' + props.theme.semanticColors.grey[200]};
+    border-top: ${(props) =>
+      '1px solid ' + props.theme.semanticColors.grey[200]};
+    border-radius: 4px;
+    font-size: 12px;
 
     thead {
-      font-weight: bold;
+      font-weight: 500;
+      line-height: 140%;
 
       tr {
         border-bottom: none !important;
+        background-color: ${(props) => props.theme.semanticColors.grey[100]};
       }
     }
 
@@ -128,6 +130,8 @@
     }
 
     tbody {
+      font-weight: 400;
+      line-height: 150%;
       tr {
         &:hover,
         td.hovered-column {
@@ -148,18 +152,25 @@
         }
 
         td {
-          height: 40px;
+          height: 48px;
+        }
+
+        .drag-placeholder {
+          min-height: 48px;
+          min-width: 20px;
+          border-bottom: 1px solid
+            ${(props) => props.theme.semanticColors.grey[200]};
         }
       }
     }
 
     th {
-      padding: 11px 15px;
+      padding: 8px 16px;
       background-color: ${(props) => props.theme.semanticColors.grey[100]};
       border-bottom: 1px solid
-        ${(props) => props.theme.semanticColors.teal[100]};
+        ${(props) => props.theme.semanticColors.grey[200]};
       cursor: auto;
-      height: 40px;
+      height: 36px;
       font-weight: 500;
 
       .ordering {
@@ -251,6 +262,10 @@
         visibility: hidden;
       }
 
+      &.footer {
+        background-color: ${(props) => props.theme.colors.grey5};
+      }
+
       &.footer,
       &.total-row {
         td {
@@ -283,6 +298,8 @@
         flex-wrap: nowrap;
         background-color: ${(props) => props.theme.colors.white};
         vertical-align: middle;
+        border-bottom: 1px solid
+          ${(props) => props.theme.semanticColors.grey[200]};
       }
 
       .arrow-container {
@@ -301,6 +318,11 @@
         .arrow-container {
           border-bottom: none;
         }
+
+        .drag-container,
+        .icons-container {
+          border-bottom: none !important;
+        }
       }
 
       &:hover {
@@ -326,12 +348,14 @@
         display: table-cell;
         width: 20px;
         min-width: 20px;
-        height: 40px;
+        height: 48px;
+        border-bottom: ${(props) =>
+          '1px solid ' + props.theme.semanticColors.grey[200]};
       }
 
       .drag-wrapper {
         width: 16px;
-        height: 36px;
+        height: 46px;
         display: grid;
         align-items: center;
         justify-items: center;
@@ -377,9 +401,9 @@
     }
 
     input {
-      font-size: 13px;
+      font-size: 12px;
       padding: 5px 10px;
-      background: #fff;
+      background: ${(props) => props.theme.colors.white};
       height: unset;
 
       &:focus {