Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@cloudfour/elastic-textarea

Package Overview
Dependencies
Maintainers
6
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudfour/elastic-textarea - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

7

index.js

@@ -60,4 +60,5 @@ customElements.define(

const minRows = textareaEl.getAttribute("data-min-rows");
const minRows = parseInt(textareaEl.getAttribute("data-min-rows"));
let rows = this.rows(textareaEl);
while (!this.isScrolling(textareaEl) && rows > minRows) {

@@ -91,5 +92,7 @@ rows--;

rows(textareaEl) {
return textareaEl.getAttribute("rows") || textareaEl.dataset.minRows;
return parseInt(
textareaEl.getAttribute("rows") || textareaEl.dataset.minRows
);
}
}
);

@@ -1,1 +0,1 @@

customElements.define("elastic-textarea",class extends HTMLElement{connectedCallback(){[...this.querySelectorAll("textarea")].forEach((t=>{t.setAttribute("data-min-rows",t.getAttribute("rows")||2),this.update(t)})),this.addEventListener("input",(({target:t})=>{!t instanceof HTMLTextAreaElement||this.update(t)}))}isScrolling(t){return t.scrollHeight>t.clientHeight}grow(t){let e=t.clientHeight,i=this.rows(t);for(;this.isScrolling(t);){i++,t.setAttribute("rows",String(i));const r=t.clientHeight;if(r===e)break;e=r}}shrink(t){let e=t.clientHeight;const i=t.getAttribute("data-min-rows");let r=this.rows(t);for(;!this.isScrolling(t)&&r>i;){r--,t.setAttribute("rows",String(Math.max(r,i)));if(t.clientHeight===e)break;if(this.isScrolling(t)){this.grow(t);break}}}update(t){this.isScrolling(t)?this.grow(t):this.shrink(t)}rows(t){return t.getAttribute("rows")||t.dataset.minRows}});
customElements.define("elastic-textarea",class extends HTMLElement{connectedCallback(){[...this.querySelectorAll("textarea")].forEach((t=>{t.setAttribute("data-min-rows",t.getAttribute("rows")||2),this.update(t)})),this.addEventListener("input",(({target:t})=>{!t instanceof HTMLTextAreaElement||this.update(t)}))}isScrolling(t){return t.scrollHeight>t.clientHeight}grow(t){let e=t.clientHeight,i=this.rows(t);for(;this.isScrolling(t);){i++,t.setAttribute("rows",String(i));const r=t.clientHeight;if(r===e)break;e=r}}shrink(t){let e=t.clientHeight;const i=parseInt(t.getAttribute("data-min-rows"));let r=this.rows(t);for(;!this.isScrolling(t)&&r>i;){r--,t.setAttribute("rows",String(Math.max(r,i)));if(t.clientHeight===e)break;if(this.isScrolling(t)){this.grow(t);break}}}update(t){this.isScrolling(t)?this.grow(t):this.shrink(t)}rows(t){return parseInt(t.getAttribute("rows")||t.dataset.minRows)}});

@@ -9,3 +9,3 @@ # elastic-textarea

| `isScrolling` | `(textareaEl: any): boolean` | Determine if the element is overflowing |
| `rows` | `(textareaEl: any): any` | |
| `rows` | `(textareaEl: any): number` | |
| `shrink` | `(textareaEl: any): void` | Shrink until the textarea matches the minimum rows or starts overflowing |
{
"name": "@cloudfour/elastic-textarea",
"version": "1.0.5",
"version": "1.0.6",
"description": "A web component for progressively-enhanced auto-expanding textareas",

@@ -34,10 +34,10 @@ "main": "index.js",

"devDependencies": {
"browser-sync": "^2.27.9",
"jest": "^27.5.1",
"minify": "^8.0.4",
"npm-run-all": "^4.1.5",
"pleasantest": "^2.0.0",
"web-component-analyzer": "^2.0.0-next.4"
"browser-sync": "2.27.9",
"jest": "27.5.1",
"minify": "8.0.4",
"npm-run-all": "4.1.5",
"pleasantest": "2.0.0",
"web-component-analyzer": "2.0.0-next.4"
},
"dependencies": {}
}
# Elastic Textarea
[![NPM version](http://img.shields.io/npm/v/@cloudfour/elastic-textarea.svg)](https://www.npmjs.org/package/@cloudfour/elastic-textarea) [![Build Status](https://github.com/cloudfour/elastic-textarea/workflows/CI/badge.svg)](https://github.com/cloudfour/elastic-textarea/actions?query=workflow%3ACI) [![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)
_A web component for progressively-enhanced auto-expanding textareas._

@@ -4,0 +7,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc