feat(toggle): implement dynamic toggle size function

Allows setting a custom toggle function
Allows using toggleSize to toggle the width property.

package.json

@@ -16,19 +16,19 @@
 	},
 	"license": "Apache-2.0",
 	"author": "",
-	"main": "src/index.js",
+	"main": "dist/index.js",
 	"directories": {
 		"test": "test"
 	},
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"lint-tsc": "tsc",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
+		"prepare": "husky install",
 		"storybook:build": "build-storybook",
-		"storybook:deploy": "storybook-to-ghpages",
-		"prepare": "husky install"
+		"storybook:deploy": "storybook-to-ghpages"
 	},
 	"release": {
 		"plugins": [
@@ -46,23 +46,28 @@
 		"access": "public"
 	},
 	"files": [
-		"src/*.js"
+		"dist/"
 	],
 	"commitlint": {
 		"extends": [
 			"@commitlint/config-conventional"
 		]
 	},
-	"dependencies": {},
+	"exports": {
+		".": "./dist/index.js",
+		"./toggle": "./dist/toggle.js",
+		"./toggle.js": "./dist/toggle.js"
+
+	},
 	"devDependencies": {
-		"@commitlint/cli": "^13.0.0",
-		"@commitlint/config-conventional": "^13.0.0",
-		"@neovici/eslint-config": "^1.2.0",
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
+		"@neovici/cfg": "^1.20.1",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"husky": "^7.0.0",
+		"husky": "^8.0.0",
 		"prettier": "^2.5.1",
-		"semantic-release": "^18.0.0",
+		"semantic-release": "^19.0.0",
 		"typescript": "^4.0.0"
 	}
 }

src/cosmoz-collapse.ts

@@ -0,0 +1,28 @@
+import { toggleSize } from "./toggle";
+
+class Collapse extends HTMLElement {
+  static get observedAttributes() {
+    return ["opened"];
+  }
+
+  toggle = toggleSize("height");
+
+  constructor() {
+    super();
+    Object.assign(this.style, { display: "none", overflow: "hidden" });
+  }
+
+  attributeChangedCallback(name: string, prevValue?: unknown, value?: unknown) {
+    switch (name) {
+      case "opened": {
+        const visible = value != null;
+        return this.isConnected
+          ? this.toggle(this, visible)
+          : Object.assign(this.style, { display: visible ? "" : "none" });
+      }
+    }
+  }
+}
+
+export { Collapse };
+customElements.define("cosmoz-collapse", Collapse);

src/toggle.ts

@@ -0,0 +1,27 @@
+const defaults: Partial<KeyframeAnimationOptions> = { duration: 250 };
+
+export type SizeP = "width" | "height";
+
+export const toggleSize =
+  (prop: SizeP) =>
+  <T extends HTMLElement>(
+    el: T,
+    visible?: boolean,
+    opts?: Partial<KeyframeAnimationOptions>
+  ) => {
+    const maxSizeProp = "max" + prop.charAt(0).toUpperCase() + prop.slice(1);
+    Object.assign(el.style, { [maxSizeProp]: "", display: "block" });
+    const { [prop]: size } = el.getBoundingClientRect(),
+      kf = [0, size],
+      [from, to] = visible ? kf : kf.slice().reverse(),
+      anim = el.animate(
+        [{ [maxSizeProp]: `${from}px` }, { [maxSizeProp]: `${to}px` }],
+        { ...defaults, ...opts }
+      );
+
+    anim.onfinish = () =>
+      Object.assign(el.style, {
+        [maxSizeProp]: "",
+        display: visible ? "" : "none",
+      });
+  };

tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "dist",
+		"declaration": true,
+		"noEmit": false
+	},
+	"include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"noEmit": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"strict": true,
+		"target": "esnext",
+		"allowJs": true
+	}
+}