Deleted old code. Added new readmore component.

readmore.js

@@ -0,0 +1,56 @@
+import { IgniteHtml } from '../ignite-html/ignite-html.js';
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, slot, list, div, text, button } from "../ignite-html/ignite-template.js";
+import { IgniteProperty } from "../ignite-html/ignite-html.js";
+
+class ReadMore extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return /*css*/`
+            mt-icon-tabs > .icons {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                gap: 1em;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            limit: 125,
+            value: null,
+            collapsed: true,
+            collapsedValue: null,
+            collapseButtonClass: "btn btn-none ps-2 text-primary"
+        };
+    }
+
+    render() {
+        return this.template.child(
+            new text([this.collapsed, this.value, this.limit], (collapsed, value, limit) => collapsed && value && value.length > limit ? value.substring(0, limit).trimEnd() + "..." : value),
+
+            new button()
+                .show([this.value, this.limit], (value, limit) => value && value.length > limit)
+                .class(this.collapseButtonClass)
+                .innerText(this.collapsed, collapsed => collapsed ? "read more" : "read less")
+                .onClick(() => this.collapsed = !this.collapsed)
+        )
+    }
+}
+
+class ReadMoreTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-read-more", children);
+    }
+}
+
+IgniteHtml.register("mt-read-more", ReadMore);
+
+export {
+    ReadMoreTemplate as ReadMore
+}