change max/min value of input

elsci-io · Feb 12, 2024 · 033978f · 033978f
1 parent 5dcf706
commit 033978f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/src/EditText/EditText.js b/src/EditText/EditText.js
@@ -77,7 +77,6 @@ export default class EditText extends HTMLElement {
         this.#updatePopupPosition();
         this.#children.popup.showModal();
         this.#children.input.focus();
-        this.#setInputWidth(this.#children.input, this.#children.input.rawValue);
     }
 
     #onInput(_, isValid) {
@@ -154,7 +153,10 @@ export default class EditText extends HTMLElement {
         let {top, left} = this.getBoundingClientRect();
         this.#children.popup.style.top = top + window.scrollY + "px";
         this.#children.popup.style.left = left + window.scrollX + "px";
-        this.#children.popup.style['max-width'] = this.offsetWidth + 16 + "px";
+        if (!this.hasAttribute('max-width')) {
+            this.#setInputWidth(this.#children.input, this.#children.input.rawValue);
+            this.#children.popup.style['max-width'] = Math.max(this.offsetWidth + 16, 128) + "px";
+        }
     }
 
     #isNumberType() {
@@ -163,14 +165,23 @@ export default class EditText extends HTMLElement {
 
     #setInputWidth(element, text){
         const textWidth = getTextWidth(text)
-        element.style.width = textWidth + 16 + "px";
+        element.style.width = Math.max(112, textWidth) + "px";
     }
 
     #initAttributes(){
         if (this.hasAttribute("suffix"))
             this.#suffix = this.getAttribute("suffix");
         if (this.hasAttribute("prefix"))
             this.#prefix = this.getAttribute("prefix");
+        if (this.hasAttribute("max-width")) {
+            this.#children.popup.style['max-width'] = this.getAttribute("max-width") + 'px';
+            this.#children.input.style['max-width'] = this.getAttribute("max-width") - 1 + 'px';
+        }
+        if (this.hasAttribute("min-width")) {
+            this.#children.popup.style['min-width'] = this.getAttribute("min-width") + 'px';
+            this.#children.input.style['min-width'] = this.getAttribute("min-width") - 1 + 'px';
+        }
+
         this.#children.input.value = this.#getValueAttr();
         if(this.hasAttribute("scale"))
             this.displayTextTransformer = (text) => roundToDecimalPlaces(text, parseInt(this.getAttribute("scale")));

diff --git a/src/EditText/EditText.scss b/src/EditText/EditText.scss
@@ -4,22 +4,23 @@ edit-text {
 }
 
 .edit-text__popup {
+  max-width: 100%;
   box-shadow: var(--box-shadow);
   position: absolute;
-  padding: 0;
+  padding: .5rem .5rem 1rem;
   border: none;
   margin: -0.7rem 0 0 -0.75rem;
-  min-width: 4rem;
+  min-width: 8rem;
 }
 
 .edit-text__popup text-input {
-  padding: .5rem .5rem 1rem;
-  min-width: 4rem;
+  width: 100%;
+  padding-top: 0;
 }
 
-.edit-text__popup text-input input{
-  width: 11ch;
-}
+//.edit-text__popup text-input input{
+//  width: 11ch;
+//}
 
 .edit-text__popup .text-input__error {
   height: unset;
@@ -31,7 +32,7 @@ edit-text {
 
 .edit-text__popup .text-input--with-right-icon .text-input__input {
   padding-right: 0;
-  width: inherit;
+  //width: inherit;
 }
 
 edit-text .edit-text__text {