@nectary/components 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/textarea/index.js

@@ -1,17 +1,20 @@
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 import { DEFAULT_SIZE } from '../utils/size';
-const templateHTML = '<style>:host{all:initial;display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([resizable]) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
+const templateHTML = '<style>:host{all:initial;display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}#resize-handle{display:none;position:absolute;width:20px;height:20px;bottom:36px;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#bottom.empty+#resize-handle{bottom:0}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', class extends NectaryElement {
   #$input;
   #$bottomSlot;
   #$bottomWrapper;
+  #$resizeHandle;
   #cursorPos = null;
   #isPendingDk = false;
   #controller = null;
   #sizeContext;
-  #contentHeight = 0;
+  #prevContentHeight = 0;
+  #dragStartY = 0;
+  #intersectionObserver = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
@@ -21,6 +24,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
     this.#$input = shadowRoot.querySelector('#input');
     this.#$bottomSlot = shadowRoot.querySelector('slot[name="bottom"]');
     this.#$bottomWrapper = shadowRoot.querySelector('#bottom');
+    this.#$resizeHandle = shadowRoot.querySelector('#resize-handle');
     this.#sizeContext = new Context(this.#$bottomWrapper, 'size');
   }
   connectedCallback() {
@@ -37,19 +41,24 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
     this.#$input.addEventListener('keydown', this.#onSelectionChange, options);
     this.#$input.addEventListener('focus', this.#onInputFocus, options);
     this.#$input.addEventListener('blur', this.#onInputBlur, options);
+    this.#$resizeHandle.addEventListener('mousedown', this.#onDragStart, options);
     this.#$bottomSlot.addEventListener('slotchange', this.#onBottomSlotChange, options);
     this.addEventListener('-change', this.#onChangeReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
     this.#sizeContext.listen(this.#controller.signal);
     this.#onBottomSlotChange();
-    this.updateMinRows();
+    this.#updateMinRows();
     this.#onSizeUpdate();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
     this.#controller = null;
+    if (this.#intersectionObserver !== null) {
+      this.#intersectionObserver.disconnect();
+      this.#intersectionObserver = null;
+    }
   }
   static get observedAttributes() {
     return ['value', 'placeholder', 'invalid', 'disabled', 'rows', 'minrows', 'resizable'];
@@ -70,9 +79,9 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
                 this.#$input.style.removeProperty('height');
               }
               const nextContentHeight = this.#$input.scrollHeight;
-              if (isShrinkingContent || nextContentHeight !== this.#contentHeight) {
-                this.#contentHeight = nextContentHeight;
-                this.#$input.style.setProperty('height', `${this.#contentHeight}px`);
+              if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
+                this.#prevContentHeight = nextContentHeight;
+                this.#$input.style.setProperty('height', `${this.#prevContentHeight}px`);
               }
             }
             if (!isPrevCursorEnd) {
@@ -114,7 +123,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
         }
       case 'minrows':
         {
-          this.updateMinRows();
+          this.#updateMinRows();
           break;
         }
       case 'resizable':
@@ -196,19 +205,37 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
   blur() {
     this.#$input.blur();
   }
-  updateMinRows() {
-    if (!this.isDomConnected) {
-      return;
-    }
+  #updateMinRows() {
     const minRows = this.minRows;
     if (minRows <= 0) {
       this.#$input.style.removeProperty('min-height');
+      if (this.#intersectionObserver !== null) {
+        this.#intersectionObserver.disconnect();
+        this.#intersectionObserver = null;
+      }
     } else {
-      this.#$input.rows = minRows;
-      this.#$input.style.setProperty('min-height', `${this.#$input.clientHeight}px`);
-      this.#$input.rows = this.rows;
+      if (this.isDomConnected) {
+        this.#calcMinRows();
+      }
+      if (this.#intersectionObserver === null) {
+        this.#intersectionObserver = new IntersectionObserver(this.#intersectionObserverCallback, {
+          root: null
+        });
+        this.#intersectionObserver.observe(this.#$input);
+      }
     }
   }
+  #intersectionObserverCallback = _ref => {
+    let [entry] = _ref;
+    if (entry != null && entry.isIntersecting) {
+      this.#calcMinRows();
+    }
+  };
+  #calcMinRows() {
+    this.#$input.rows = this.minRows;
+    this.#$input.style.setProperty('min-height', `${getRect(this.#$input).height}px`);
+    this.#$input.rows = this.rows;
+  }
   #onCompositionStart = () => {
     this.#isPendingDk = true;
   };
@@ -236,6 +263,36 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
       }));
     }
   };
+  #onDragStart = e => {
+    if (this.#dragStartY !== 0) {
+      return;
+    }
+    this.#dragStartY = e.clientY;
+    this.#prevContentHeight = getRect(this.#$input).height;
+    window.addEventListener('mousemove', this.#onDragResize, {
+      signal: this.#controller.signal,
+      capture: true
+    });
+    window.addEventListener('mouseup', this.#onDragEnd, {
+      signal: this.#controller.signal,
+      capture: true
+    });
+  };
+  #onDragResize = e => {
+    const dy = e.clientY - this.#dragStartY;
+    const height = Math.round(Math.max(0, this.#prevContentHeight + dy));
+    this.#$input.style.setProperty('height', `${height}px`);
+  };
+  #onDragEnd = () => {
+    window.removeEventListener('mousemove', this.#onDragResize, {
+      capture: true
+    });
+    window.removeEventListener('mouseup', this.#onDragEnd, {
+      capture: true
+    });
+    this.#dragStartY = 0;
+    this.#prevContentHeight = 0;
+  };
   #onInputFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
   };