@eturnity/eturnity_reusable_components 9.31.2 → 9.31.4-EXP-11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.31.2",
+  "version": "9.31.4-EXP-11.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/compass_two_arrows.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(4.97 1.24)" d="M4.89579 7.48736C5.67453 7.35516 6.322 8.17595 5.94852 8.9229L3.92313 12.9747C3.55456 13.7116 2.50258 13.7117 2.13407 12.9747L0.108677 8.9229L0.0471536 8.77251C-0.193592 8.02052 0.52665 7.26383 1.31864 7.5274L2.71219 7.99126C2.91736 8.05965 3.13982 8.05959 3.34501 7.99126L4.73856 7.5274L4.89579 7.48736ZM3.66141 8.94048C3.25096 9.07723 2.80622 9.07729 2.39579 8.94048L1.00223 8.47564L3.0286 12.5274L5.05497 8.47564L3.66141 8.94048ZM2.13407 0.552786C2.50259 -0.184262 3.55461 -0.184262 3.92313 0.552786L5.9495 4.60454C6.34772 5.40135 5.58368 6.28176 4.73856 6.00005L3.34501 5.53618C3.13986 5.46781 2.91833 5.46787 2.71317 5.53618L1.31961 6.00005C0.474448 6.28177 -0.289683 5.40138 0.108677 4.60454L2.13407 0.552786Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/house_3d.svg

@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="none">
-  <mask id="path-1-inside-1_57915_3657" fill="white">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.03081 3.71851L0 6.28736V12.2814L3.41065 13.4587V9.98801L4.532 10.4406V13.8458L8.06161 15.0643V9.07028L4.03081 3.71851Z"/>
-  </mask>
-  <path d="M0 6.28736L-0.698673 5.19107L-1.3 5.5743V6.28736H0ZM4.03081 3.71851L5.06922 2.9364L4.34595 1.9761L3.33213 2.62221L4.03081 3.71851ZM0 12.2814H-1.3V13.2079L-0.424205 13.5102L0 12.2814ZM3.41065 13.4587L2.98645 14.6876L4.71065 15.2828V13.4587H3.41065ZM3.41065 9.98801L3.89722 8.78251L2.11065 8.0614V9.98801H3.41065ZM4.532 10.4406H5.832V9.56343L5.01858 9.23511L4.532 10.4406ZM4.532 13.8458H3.232V14.7723L4.1078 15.0747L4.532 13.8458ZM8.06161 15.0643L7.63741 16.2931L9.36161 16.8883V15.0643H8.06161ZM8.06161 9.07028H9.36161V8.63549L9.10003 8.28818L8.06161 9.07028ZM0.698673 7.38365L4.72948 4.8148L3.33213 2.62221L-0.698673 5.19107L0.698673 7.38365ZM1.3 12.2814V6.28736H-1.3V12.2814H1.3ZM3.83485 12.2299L0.424205 11.0525L-0.424205 13.5102L2.98645 14.6876L3.83485 12.2299ZM4.71065 13.4587V9.98801H2.11065V13.4587H4.71065ZM2.92408 11.1935L4.04543 11.6461L5.01858 9.23511L3.89722 8.78251L2.92408 11.1935ZM3.232 10.4406V13.8458H5.832V10.4406H3.232ZM8.48582 13.8354L4.95621 12.617L4.1078 15.0747L7.63741 16.2931L8.48582 13.8354ZM6.76161 9.07028V15.0643H9.36161V9.07028H6.76161ZM2.99239 4.50061L7.0232 9.85239L9.10003 8.28818L5.06922 2.9364L2.99239 4.50061Z" fill="white" mask="url(#path-1-inside-1_57915_3657)"/>
-  <path d="M8.5625 14.2779V9.38818L13.5026 7.07375V11.9634L8.5625 14.2779Z" fill="white" stroke="white"/>
-  <path d="M8.21735 8.44534L4.80134 3.90984L9.81609 1.56045L13.2321 6.09596L8.21735 8.44534Z" fill="white" stroke="white"/>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.23926 0.0928743C9.66555 -0.105047 10.1726 0.021414 10.457 0.395609L13.7962 4.78952C13.9284 4.96352 14 5.17604 14 5.39458V10.358C14 10.7472 13.7742 11.1011 13.4211 11.265L8.42517 13.5847C8.19119 13.6933 7.92427 13.7074 7.6802 13.6238L5.20741 12.7774C4.80297 12.639 4.53125 12.2588 4.53125 11.8313V9.17295L3.41016 8.72471V10.7634C3.41016 11.4493 2.73554 11.9315 2.08662 11.7097L0.676466 11.2275C0.27187 11.0892 0 10.7089 0 10.2813V5.60883C0 5.26575 0.175879 4.94662 0.465938 4.76339L4.03027 2.51182L9.23926 0.0928743ZM1 5.6085V10.2804L2.41016 10.7628V7.24815L5.53125 8.49619V11.8302L7.06055 12.3536V8.15147L3.78906 3.84678L1 5.6085Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/obstacle_flat_top.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1 3)" d="M10.5002 0C10.7763 0 11.0002 0.223858 11.0002 0.5V4.10254L13.2902 3.0459C13.5408 2.93024 13.8384 3.0396 13.9543 3.29004C14.0699 3.54066 13.9606 3.83828 13.7101 3.9541L0.710133 9.9541C0.459551 10.0696 0.161861 9.9604 0.0460701 9.70996C-0.0695019 9.45942 0.0398765 9.16177 0.290211 9.0459L3.00017 7.79492V0.5C3.00017 0.223939 3.22414 0.000131124 3.50017 0H10.5002ZM4.00017 7.33301L10.006 4.56055C10.0036 4.54062 10.0002 4.52058 10.0002 4.5V1H4.00017V7.33301Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/obstacle_sloped_top.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1 3.5)" d="M10.0411 0.0457596C10.1959 -0.0254973 10.3771 -0.0128598 10.5206 0.0789627C10.664 0.170879 10.751 0.329551 10.7511 0.499861V3.71763L13.2901 2.54576C13.5407 2.43012 13.8383 2.53955 13.9542 2.7899C14.0699 3.04052 13.9606 3.33814 13.7101 3.45396L0.710068 9.45396C0.459503 9.56943 0.161784 9.46024 0.0460058 9.20982C-0.0694542 8.95934 0.0399117 8.66164 0.290146 8.54576L3.25108 7.17857V3.49986L3.25597 3.4276C3.28014 3.26211 3.38642 3.11729 3.54112 3.04576L10.0411 0.0457596ZM7.21104 2.45396L4.25108 3.8192V6.71763L9.75108 4.17857V1.28111L7.21104 2.45396Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/panel_orientation_horizontal.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(2 1.5)" d="M0.5 0C0.776142 0 1 0.223858 1 0.5V12.5C1 12.7761 0.776142 13 0.5 13C0.223858 13 0 12.7761 0 12.5V0.5C0 0.223858 0.223858 0 0.5 0ZM7.10254 7.50488C7.60667 7.55621 8 7.98232 8 8.5C8 9.01768 7.60667 9.44379 7.10254 9.49512L7 9.5H3C2.44772 9.5 2 9.05228 2 8.5C2 7.94772 2.44772 7.5 3 7.5H7L7.10254 7.50488ZM11.1025 3.50488C11.6067 3.55621 12 3.98232 12 4.5C12 5.01768 11.6067 5.44379 11.1025 5.49512L11 5.5H3C2.44772 5.5 2 5.05228 2 4.5C2 3.94772 2.44772 3.5 3 3.5H11L11.1025 3.50488Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/panel_orientation_vertical.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1.5 1)" d="M4.5 2C5.05228 2 5.5 2.44772 5.5 3V11L5.49512 11.1025C5.44379 11.6067 5.01768 12 4.5 12C3.98232 12 3.55621 11.6067 3.50488 11.1025L3.5 11V3C3.5 2.44772 3.94772 2 4.5 2ZM8.5 2C9.05228 2 9.5 2.44772 9.5 3V7L9.49512 7.10254C9.44379 7.60667 9.01768 8 8.5 8C7.98232 8 7.55621 7.60667 7.50488 7.10254L7.5 7V3C7.5 2.44772 7.94772 2 8.5 2ZM12.5 0C12.7761 1.20706e-08 13 0.223858 13 0.5C13 0.776142 12.7761 1 12.5 1H0.5C0.223858 1 2.83224e-07 0.776142 0 0.5C1.20706e-08 0.223858 0.223858 -2.58771e-10 0.5 0H12.5Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/pv_panel.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1.04 1.5)" d="M13.3232 0C13.7327 4.6248e-05 14.022 0.401551 13.8926 0.790039L9.95896 12.5898C9.87726 12.8348 9.64784 13 9.38963 13H0.600565C0.191116 12.9999 -0.0982598 12.5984 0.0312292 12.21L3.96482 0.410156L4.00193 0.322266C4.10404 0.126506 4.30821 3.58696e-05 4.53416 0H13.3232ZM2.15623 9L1.15623 12H3.10154L4.10154 9H2.15623ZM5.15623 9L4.15623 12H6.10154L7.10154 9H5.15623ZM8.15623 9L7.15623 12H9.10154L10.1015 9H8.15623ZM2.48924 8H4.43455L5.43455 5H3.48924L2.48924 8ZM5.48924 8H7.43455L8.43455 5H6.48924L5.48924 8ZM8.48924 8H10.4345L11.4345 5H9.48924L8.48924 8ZM3.82224 4H5.76756L6.76756 1H4.82224L3.82224 4ZM6.82224 4H8.76756L9.76756 1H7.82224L6.82224 4ZM9.82224 4H11.7676L12.7676 1H10.8222L9.82224 4Z" fill="white"/>
+</svg>

package/src/components/infoText/index.vue

@@ -244,6 +244,18 @@
         default: '400px',
         type: String,
       },
+      // Floor for the measured popup width; lower it (e.g. '0') for short
+      // tooltip-style content.
+      minWidth: {
+        default: '230px',
+        type: String,
+      },
+      // Padding of the popup box; tighten (e.g. '6px 10px') for
+      // tooltip-style content.
+      contentPadding: {
+        default: '',
+        type: String,
+      },
       openTrigger: {
         type: String,
         default: 'onHover',
@@ -494,6 +506,7 @@
           width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
+          ...(props.contentPadding ? { padding: props.contentPadding } : {}),
           backgroundColor: props.contentBackgroundColor
             ? props.contentBackgroundColor
             : props.image
@@ -566,13 +579,21 @@
         clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
         document.body.appendChild(clone)
 
-        // Get fresh content width from clone
-        const contentWidth = clone.offsetWidth
+        // Get fresh content width from clone. offsetWidth rounds to an
+        // integer, which can under-measure by <1px and wrap an exact-fit
+        // line — use the subpixel rect width, ceiled.
+        const contentWidth = Math.ceil(clone.getBoundingClientRect().width)
         document.body.removeChild(clone)
 
-        // Calculate new width
+        // Calculate new width. The measured clone is the bare text span, but
+        // TextOverlay wraps it with 10px horizontal padding each side under
+        // border-box sizing — compensate or exact-fit content wraps.
+        const TEXT_OVERLAY_HORIZONTAL_PADDING_PX = 20
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 230),
+          Math.max(
+            contentWidth + TEXT_OVERLAY_HORIZONTAL_PADDING_PX,
+            parseInt(props.minWidth, 10) || 0
+          ),
           parseInt(props.maxWidth, 10)
         )
 

package/src/components/infoText/infoText.spec.js

@@ -79,6 +79,49 @@ describe('InfoText Component', () => {
     expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
   })
 
+  describe("popup width floor (minWidth)", () => {
+    const showPopup = async (w) => {
+      w.vm.isMobile = false
+      await w.vm.$nextTick()
+      // the hover listener sits on the component root
+      await w.trigger("mouseenter")
+      // updatePosition awaits two ticks before measuring
+      await new Promise((resolve) => setTimeout(resolve))
+      await w.vm.$nextTick()
+    }
+
+    it("keeps the 230px width floor by default", async () => {
+      const roomy = mount(InfoText, {
+        props: { ...defaultProps, maxWidth: "400px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(roomy)
+      // jsdom measures content at 0px, so the floor is what remains
+      expect(roomy.vm.infoBoxWidth).toBe(230)
+    })
+
+    it("applies contentPadding to the popup box", async () => {
+      const padded = mount(InfoText, {
+        props: { ...defaultProps, contentPadding: "6px 10px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(padded)
+      const box = padded.find('[data-test-id="info_text_wrapper"]')
+        .element.firstElementChild
+      expect(box.style.padding).toBe("6px 10px")
+    })
+
+    it("allows a lower minWidth for tooltip-style content", async () => {
+      const small = mount(InfoText, {
+        props: { ...defaultProps, minWidth: "0" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(small)
+      // jsdom content measures 0px; only the padding compensation remains
+      expect(small.vm.infoBoxWidth).toBe(20)
+    })
+  })
+
   test('iconTextContent slot is correctly rendered', async () => {
     // override
     const props = defaultProps.iconTextContent

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

@@ -1055,10 +1055,16 @@
           this.handleSetDropdownOffet()
           this.refreshOptionLength()
           if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
+          // Teleported menus live in <body>, so they aren't clipped by a
+          // scrollable ancestor (e.g. the filter modal). Close on outside
+          // scroll to avoid the menu floating free of its trigger.
+          if (this.shouldUseTeleport)
+            document.addEventListener('scroll', this.handleScrollClose, true)
           // Deferred dropdown slot content mounts after initial open in some hosts.
           this.$nextTick(() => this.refreshOptionLength())
         } else {
           this.$emit('on-dropdown-close')
+          document.removeEventListener('scroll', this.handleScrollClose, true)
           this.dropdownPosition.left = null
           this.optionLengthCount = 0
           if (this.animationFrameId) {
@@ -1139,6 +1145,7 @@
         this.clickOutside,
         CLICK_OUTSIDE_CAPTURE
       )
+      document.removeEventListener('scroll', this.handleScrollClose, true)
     },
     methods: {
       getDropdownTopScrollYOffset() {
@@ -1162,6 +1169,14 @@
         this.clearSearch()
         this.isDropdownOpen = false
       },
+      handleScrollClose(e) {
+        // Ignore scrolling within the menu itself (e.g. a long option list);
+        // only close when a surrounding container scrolls. The menu is
+        // teleported to <body>, so check the teleported dropdown element.
+        const menuEl = this.$refs.dropdown?.$el
+        if (menuEl && (menuEl === e.target || menuEl.contains(e.target))) return
+        this.closeDropdown()
+      },
       clearSearch() {
         this.textSearch = ''
         this.searchChange('')

package/src/components/navigationSideMenu/index.vue

@@ -292,6 +292,7 @@
           v-if="!isCollapsed"
           data-id="footer_documents_button"
           data-qa-id="footer_documents_button"
+          :is-disabled="footerButtonDisabled"
           :text="footerButtonText"
           @click="onFooterButtonClick()"
         />
@@ -299,6 +300,7 @@
           v-else
           data-id="footer_documents_button"
           data-qa-id="footer_documents_button"
+          :is-disabled="footerButtonDisabled"
           @click="onFooterButtonClick()"
         >
           <IconComponent color="white" name="documents" size="16px" />
@@ -560,15 +562,19 @@
     font-weight: 400;
   `
 
-  const FooterButtonWrapper = styled.div`
+  const FooterButtonWrapperAttrs = { isDisabled: Boolean }
+  const FooterButtonWrapper = styled('div', FooterButtonWrapperAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
     border-radius: 4px;
-    cursor: pointer;
-    background-color: ${(p) => p.theme.semanticColors.purple[500]};
+    cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(p) =>
+      p.isDisabled
+        ? p.theme.colors.disabled
+        : p.theme.semanticColors.purple[500]};
   `
 
   const ChevronCellAttrs = { isWrapperHovered: Boolean }
@@ -872,6 +878,10 @@
         type: String,
         default: '',
       },
+      footerButtonDisabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: [
       'item-click',