@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.34 → 7.48.1-EPDM-12680.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.34",
+  "version": "7.48.1-EPDM-12680.36",
   "files": [
     "dist",
     "src"

package/src/components/inputs/checkbox/index.vue

@@ -19,7 +19,7 @@
       <CheckWrapper :has-label="hasLabel">
         <span class="checkmark"></span>
       </CheckWrapper>
-      <LabelText v-if="hasLabel">
+      <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
       </LabelText>
     </Container>
@@ -90,18 +90,20 @@
           ? '16px'
           : '25px'};
       background-color: ${(props) =>
-        props.isChecked
+        props.isDisabled
+          ? props.theme.colors.lightGray
+          : props.isChecked
           ? props.backgroundColor
             ? props.backgroundColor
             : props.theme.colors.green
-          : props.isDisabled
-          ? props.theme.colors.lightGray
           : props.theme.colors.white};
       border-radius: 4px;
       border: 1px solid
         ${(props) =>
           props.isChecked
-            ? props.backgroundColor
+            ? props.isDisabled
+              ? props.theme.colors.lightGray
+              : props.backgroundColor
               ? props.backgroundColor
               : props.theme.colors.green
             : props.theme.colors.mediumGray};
@@ -140,7 +142,11 @@
           : '10px'};
       border: solid
         ${(props) =>
-          props.checkColor ? props.checkColor : props.theme.colors.white};
+          props.isDisabled
+            ? props.theme.colors.green
+            : props.checkColor
+            ? props.checkColor
+            : props.theme.colors.white};
       border-width: ${(props) =>
         props.size === 'medium'
           ? '0 3px 3px 0'
@@ -160,11 +166,16 @@
     width: 0;
   `
 
-  const LabelText = styled.div`
+  const LabelTextAttrs = {
+    isDisabled: Boolean,
+  }
+  const LabelText = styled('div', LabelTextAttrs)`
     font-size: 13px;
     display: grid;
     align-items: center;
     min-height: 18px;
+    color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `
 
   export default {

package/src/components/stringDesign/DropdownMenu/index.vue

@@ -49,7 +49,9 @@
                 <template
                   v-if="itemHasStrings(item) || item.type === 'optimizer'"
                 >
-                  <ContainerValue v-if="item.getkWp() > 1">
+                  <ContainerValue
+                    v-if="item.getkWp() > 1 && hasExpandedSection"
+                  >
                     |
                     {{
                       numberToString({
@@ -59,7 +61,7 @@
                     }}
                     kWp
                   </ContainerValue>
-                  <ContainerValue v-else>
+                  <ContainerValue v-else-if="item.type !== 'optimizer'">
                     |
                     {{
                       numberToString({
@@ -105,7 +107,9 @@
             </MarkerItem>
             <MarkerItem>
               <RCIcon color="white" :name="getIconName(item)" size="14px" />
-              <div>{{ getTypeName(item.type) }}</div>
+              <MarkerText :title="getTypeName(item.type)">
+                {{ getTypeName(item.type) }}
+              </MarkerText>
             </MarkerItem>
             <MarkerItem
               v-if="item.type !== 'optimizer'"
@@ -121,7 +125,7 @@
               {{ $gettext('kWAC') }}
             </MarkerItem>
             <MarkerItem
-              v-if="!itemHasStrings(item) && item.type !== 'optimizer'"
+              v-if="!itemHasStrings(item)"
               :title="$gettext('The DC power is the maximum DC input power.')"
             >
               {{
@@ -459,16 +463,21 @@
         : props.theme.colors.grey6};
     font-size: 11px;
     color: ${(props) => props.theme.colors.white};
-    max-width: 11ch;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     & > span {
       overflow: hidden;
+      white-space: nowrap;
       text-overflow: ellipsis;
+      max-width: 11ch;
     }
   `
 
+  const MarkerText = styled.div`
+    max-width: 11ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `
+
   const ContainerValue = styled.div`
     font-size: 12px;
   `
@@ -727,6 +736,7 @@
       EmptyStringBox,
       InfoText,
       InfoWrapper,
+      MarkerText,
     },
     props: {
       dataList: {