@jaykay-design/flext 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+interface IFlextInfo {
+    container?: HTMLElement | undefined;
+    textarea?: HTMLTextAreaElement | undefined;
+}
+declare function setup(e: CustomEvent<IFlextInfo>): void;
+export { setup, IFlextInfo };

package/dist/index.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setup = setup;
+function resize(element) {
+    const scrollY = window.scrollY, styles = getComputedStyle(element), paddingWidth = parseInt(styles.getPropertyValue('padding-top'), 10) + parseInt(styles.getPropertyValue('padding-bottom'), 10), borderWidths = parseInt(styles.getPropertyValue('border-top-width'), 10) + parseInt(styles.getPropertyValue('border-bottom-width'), 10), copy = document.getElementById(element.dataset.copy);
+    let minHeight = borderWidths;
+    if (element.closest('.form-floating'))
+        minHeight += 24 + paddingWidth;
+    copy.value = element.value;
+    let newHeight = copy.scrollHeight;
+    if (newHeight === 0)
+        newHeight = minHeight;
+    newHeight += paddingWidth + borderWidths;
+    element.style.height = newHeight + 'px';
+    window.scrollTo(window.scrollX, scrollY);
+}
+function setup(e) {
+    if (CSS.supports('field-sizing', 'content'))
+        return;
+    let items = [];
+    if (e.detail.textarea)
+        items.push(e.detail.textarea);
+    else if (e.detail.container)
+        items = Array.from(e.detail.container.querySelectorAll('textarea.growme'));
+    else
+        return;
+    items.forEach(el => {
+        const copy = document.createElement('textarea');
+        copy.style.height = '1px';
+        copy.style.width = '100%';
+        copy.style.visibility = 'hidden';
+        copy.style.border = '0';
+        copy.style.padding = '0';
+        copy.id = 'flext-' + Math.trunc(Math.random() * 100000000);
+        copy.value = el.value;
+        el.dataset.copy = copy.id;
+        el.insertAdjacentElement('afterend', copy);
+        resize(el);
+        if (el.hasAttribute('flext'))
+            return;
+        el.setAttribute('flext', 'done');
+        el.addEventListener('keyup', () => resize(el));
+        el.addEventListener('paste', () => resize(el));
+    });
+}

package/index.ts

@@ -0,0 +1,64 @@
+interface IFlextInfo {
+    container?: HTMLElement | undefined;
+    textarea?: HTMLTextAreaElement | undefined;
+}
+
+function resize(element: HTMLTextAreaElement) {
+    const scrollY = window.scrollY,
+        styles = getComputedStyle(element),
+        paddingWidth = parseInt(styles.getPropertyValue('padding-top'), 10) + parseInt(styles.getPropertyValue('padding-bottom'), 10),
+        borderWidths = parseInt(styles.getPropertyValue('border-top-width'), 10) + parseInt(styles.getPropertyValue('border-bottom-width'), 10),
+        copy = document.getElementById(element.dataset.copy!)! as HTMLTextAreaElement;
+
+    let minHeight = borderWidths;
+
+    if (element.closest('.form-floating')) minHeight += 24 + paddingWidth;
+
+    copy.value = element.value;
+
+    let newHeight = copy.scrollHeight;
+    if (newHeight === 0) newHeight = minHeight;
+
+    newHeight += paddingWidth + borderWidths;
+
+    element.style.height = newHeight + 'px';
+
+    window.scrollTo(window.scrollX, scrollY);
+}
+
+function setup(e: CustomEvent<IFlextInfo>) {
+    if (CSS.supports('field-sizing', 'content')) return;
+
+    let items: HTMLTextAreaElement[] = [];
+
+    if (e.detail.textarea) items.push(e.detail.textarea);
+    else if (e.detail.container) items = Array.from(e.detail.container.querySelectorAll('textarea.growme'));
+    else return;
+
+    items.forEach(el => {
+        const copy = document.createElement('textarea');
+
+        copy.style.height = '1px';
+        copy.style.width = '100%';
+        copy.style.visibility = 'hidden';
+        copy.style.border = '0';
+        copy.style.padding = '0';
+
+        copy.id = 'flext-' + Math.trunc(Math.random() * 100000000);
+
+        copy.value = el.value;
+        el.dataset.copy = copy.id;
+        el.insertAdjacentElement('afterend', copy);
+
+        resize(el);
+
+        if (el.hasAttribute('flext')) return;
+        el.setAttribute('flext', 'done');
+
+        el.addEventListener('keyup', () => resize(el));
+        el.addEventListener('paste', () => resize(el));
+    });
+}
+
+export { setup, IFlextInfo };
+

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@jaykay-design/flext",
+  "version": "1.0.0",
+  "description": "HTML textbox polyfill for CSS field-sizing:content",
+  "license": "ISC",
+  "author": "",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true
+  }
+}