@net7/components 3.8.5 → 3.10.0

package/fesm2020/net7-components.mjs

@@ -124,22 +124,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class BubbleChartComponent {
     constructor() {
         this._loaded = false;
-        this.measureWidth = (text) => {
-            const context = document.createElement('canvas').getContext('2d');
-            // measure text with the correct font family and weight
-            if (this.data?.fontRendering?.label?.family && this.data?.fontRendering?.label?.weight) {
-                context.font = `${this.data.fontRendering.label.weight} ${this.data.fontRendering.label.family}`;
-            }
-            return context.measureText(text).width;
-        };
-        this.isValidNumber = (value) => !Number.isNaN(Number.parseFloat(value));
         this.draw = () => {
             const { d3 } = this;
             const { containerId, data, height, width, selected, transition, colorMatch, shuffle, fontRendering } = this.data;
             const closeIconPath = 'M -50,40 L-40,50 0,10 40,50 50,40 10,0 50,-40 40,-50 0,-10 -40,-50 -50,-40 -10,0 -50,40';
-            const defaultLineHeight = 13;
-            const ellipsisThreshold = 4; // words
-            const textScalingFactor = 0.95;
             if (!Array.isArray(data)) {
                 // Check if it is possible to draw with the current dataset
                 console.warn('(n7-bubble-chart) The data object is not in the expected format!');
@@ -175,23 +163,19 @@ class BubbleChartComponent {
             const svg = d3
                 .select(`#${containerId}`)
                 .attr('viewBox', [0, 0, width, height])
-                // .attr('font-family', 'Verdana, Geneva, sans-serif')
-                // .attr('font-size', '10px')
-                .style('font', '10px Verdana, Geneva, sans-serif')
-                .style('height', 'auto')
-                .style('max-width', '100%')
+                .attr('font-family', 'Verdana, Geneva, sans-serif')
                 .attr('text-anchor', 'middle');
             const leaf = svg.selectAll('g').data(root().leaves(), (d) => d.data.entity.id);
             leaf
                 .transition(t) // update transition on <g>
                 .attr('fill-opacity', 1)
-                .attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`);
-            // .attr('font-size', (d) => {
-            //   let size = d.r / 5.5;
-            //   size *= 1;
-            //   size += 1;
-            //   return `${Math.round(size)}px`;
-            // });
+                .attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`)
+                .attr('font-size', (d) => {
+                let size = d.r / 5.5;
+                size *= 1;
+                size += 1;
+                return `${Math.round(size)}px`;
+            });
             leaf.selectAll('.close-icon').remove(); // clear all existing close icons
             if (selected) {
                 leaf // render necessary close icons
@@ -212,8 +196,86 @@ class BubbleChartComponent {
                 .transition(t) // update transition on <circle>
                 .attr('fill-opacity', 1)
                 .attr('r', (d) => d.r);
+            leaf
+                .select('text')
+                .attr('font-family', () => {
+                if (fontRendering && fontRendering.label && fontRendering.label.family) {
+                    return fontRendering.label.family;
+                }
+                return 'inherit';
+            })
+                .attr('font-weight', () => {
+                if (fontRendering && fontRendering.label && fontRendering.label.weight) {
+                    return fontRendering.label.weight;
+                }
+                return 'inherit';
+            })
+                .selectAll('tspan')
+                .data((d) => {
+                if (d.r / 4 > 4.5) {
+                    // show text and number threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
+                    }
+                    return label;
+                }
+                if (d.r / 4 > 2.5) {
+                    // show text threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
+                    }
+                    return label;
+                }
+                return '';
+            })
+                .join('tspan')
+                .attr('x', 0)
+                .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
+                .attr('fill', 'white')
+                .text((d) => d);
+            leaf
+                .select('.label-count')
+                .attr('font-family', () => {
+                if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
+                    return fontRendering.counter.family;
+                }
+                return 'inherit';
+            })
+                .attr('font-weight', () => {
+                if (fontRendering && fontRendering.counter && fontRendering.counter.weight) {
+                    return fontRendering.counter.weight;
+                }
+                return 'inherit';
+            })
+                .attr('fill', 'white')
+                .text((d) => {
+                if (d.r / 4 > 2.5) {
+                    // show text and number threshhold
+                    return d.data.count;
+                }
+                return '';
+            })
+                .attr('y', (d) => {
+                let labelLength = d.data.entity.label.split(/ +/g);
+                if (labelLength.length > 3) {
+                    labelLength = labelLength.slice(0, 3);
+                }
+                return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
+            });
             const g = leaf.enter().append('g');
             g.attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`)
+                .attr('font-size', (d) => {
+                let size = d.r / 5.5;
+                size *= 1;
+                size += 1;
+                return `${Math.round(size)}px`;
+            })
                 .attr('cursor', 'pointer')
                 .on('click', (event, d) => {
                 this.onClick(d.data.entity.id);
@@ -230,88 +292,6 @@ class BubbleChartComponent {
                 .attr('id', (d) => { d.clipUid = `Clip-${d.data.entity.id}`; })
                 .append('use')
                 .attr('xlink:href', (d) => d.leafUid.href);
-            // g.append('text')
-            //   .attr('font-family', () => {
-            //     if (fontRendering && fontRendering.label && fontRendering.label.family) {
-            //       return fontRendering.label.family;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .attr('font-weight', () => {
-            //     if (fontRendering && fontRendering
-            //         && fontRendering.label && fontRendering.label.weight) {
-            //       return fontRendering.label.weight;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .selectAll('tspan')
-            //   .data((d) => {
-            //     if (d.r / 4 > 4.5) {
-            //       // show text and number threshhold
-            //       let label = (
-            //         d.data.entity.label.charAt(0).toUpperCase()
-            //         + d.data.entity.label.slice(1)
-            //       ).split(/ +/g);
-            //       if (label.length > 3) {
-            //         label = label.slice(0, 3);
-            //         label[2] += '…';
-            //       }
-            //       return label;
-            //     } if (d.r / 4 > 2.5) {
-            //       // show text threshhold
-            //       let label = (
-            //         d.data.entity.label.charAt(0).toUpperCase()
-            //         + d.data.entity.label.slice(1)
-            //       ).split(/ +/g);
-            //       if (label.length > 3) {
-            //         label = label.slice(0, 3);
-            //         label[2] += '…';
-            //       }
-            //       return label;
-            //     }
-            //     return '';
-            //   })
-            //   .join('tspan')
-            //   .attr('x', 0)
-            //   .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
-            //   .attr('fill', 'white')
-            //   .text((d) => d)
-            //   .attr('fill-opacity', 0)
-            //   .transition(t) // enter() transition on <tspan>
-            //   .attr('fill-opacity', 1);
-            // g.append('text') // Count label
-            //   .attr('class', 'label-count')
-            //   .attr('font-family', () => {
-            //     if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
-            //       return fontRendering.counter.family;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .attr('font-weight', () => {
-            //     if (fontRendering && fontRendering.counter && fontRendering.counter.weight) {
-            //       return fontRendering.counter.weight;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .attr('fill', 'white')
-            //   .text((d) => {
-            //     if (d.r / 4 > 2.5) {
-            //       // show text and number threshhold
-            //       return d.data.count;
-            //     }
-            //     return '';
-            //   })
-            //   .attr('y', (d) => {
-            //     let labelLength = d.data.entity.label.split(/ +/g);
-            //     if (labelLength.length > 3) {
-            //       labelLength = labelLength.slice(0, 3);
-            //     }
-            //     return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
-            //   })
-            //   .attr('fill-opacity', 0)
-            //   .transition(t) // enter() transition on <text>
-            //   .attr('fill-opacity', 1);
-            /** NEW TEXT LOGIC */
             g.append('text')
                 .attr('font-family', () => {
                 if (fontRendering && fontRendering.label && fontRendering.label.family) {
@@ -325,83 +305,40 @@ class BubbleChartComponent {
                 }
                 return 'inherit';
             })
-                .attr('fill', 'white')
-                .each((d) => {
-                // Capitalize the first letter of the label
-                d.data.entity.label = d.data.entity
-                    .label.charAt(0).toUpperCase()
-                    + d.data.entity.label.slice(1);
-                // 1. initialize meta object
-                if (!d._meta || typeof d._meta !== 'object')
-                    d._meta = {};
-                // 2. tokenize label & count into words
-                const words = d.data.entity.label.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/
-                // Truncate with ellipsis if the label is longer than the threshold
-                if (words.length > ellipsisThreshold) {
-                    words.splice(ellipsisThreshold, words.length - ellipsisThreshold);
-                    words[ellipsisThreshold - 1] += '…';
-                }
-                // add counter
-                if (d.r / 4 > 2.5) {
-                    // show text threshold
-                    if (!words[words.length - 1])
-                        words.pop();
-                    if (!words[0])
-                        words.shift();
-                }
+                .selectAll('tspan')
+                .data((d) => {
                 if (d.r / 4 > 4.5) {
-                    // show number threshold
-                    words.push(`${d.data.count}`);
-                }
-                d._meta.words = words;
-                d._meta.lineHeight = defaultLineHeight;
-                const targetWidth = Math.sqrt(this.measureWidth(d._meta.words.join(' ').trim()) * defaultLineHeight);
-                // 3. build lines of text
-                d._meta.lines = [];
-                let line;
-                let lineWidth0 = Infinity;
-                for (let i = 0, n = d._meta.words.length; i < n; i += 1) {
-                    const lineText1 = (line ? `${line.text} ` : '') + words[i];
-                    const lineWidth1 = this.measureWidth(lineText1);
-                    if ((lineWidth0 + lineWidth1) / 2 < targetWidth && i !== n - 1) {
-                        line.width = lineWidth0;
-                        lineWidth0 = lineWidth1;
-                        line.text = lineText1;
-                    }
-                    else {
-                        // if line is too long or this is the last line (counter), push to next line
-                        lineWidth0 = this.measureWidth(words[i]);
-                        line = { width: lineWidth0, text: words[i] };
-                        d._meta.lines.push(line);
+                    // show text and number threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
                     }
+                    return label;
                 }
-                // 4. compute the bounding radius
-                let radius = 0;
-                for (let i = 0, n = d._meta.lines.length; i < n; i += 1) {
-                    const dy = (Math.abs(i - n / 2) + 0.8) * d._meta.lineHeight;
-                    const dx = d._meta.lines[i].width / 2;
-                    radius = Math.max(radius, Math.sqrt(dx * dx + dy * dy));
+                if (d.r / 4 > 2.5) {
+                    // show text threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
+                    }
+                    return label;
                 }
-                d._meta.textRadius = radius;
-                return d;
+                return '';
             })
-                .attr('transform', (d) => `scale(${(d.r / d._meta.textRadius) * textScalingFactor})`)
-                .filter((d) => (d.r / 4 > 2.5))
-                .selectAll('tspan')
-                .data((d) => d._meta.lines)
-                .enter()
-                .append('tspan')
+                .join('tspan')
                 .attr('x', 0)
-                .attr('y', (d, i, n) => (i - n.length / 2 + 0.8) * defaultLineHeight)
-                .attr('class', (d, i, n) => (
-            // if it's the last label and a valid number, mark as counter
-            i === n.length - 1 && this.isValidNumber(d.text) ? 'label-counter' : 'label-text'))
-                .text((d) => d.text)
+                .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
+                .attr('fill', 'white')
+                .text((d) => d)
                 .attr('fill-opacity', 0)
                 .transition(t) // enter() transition on <tspan>
                 .attr('fill-opacity', 1);
-            // custom style for the counter
-            g.selectAll('tspan.label-counter')
+            g.append('text') // Count label
+                .attr('class', 'label-count')
                 .attr('font-family', () => {
                 if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
                     return fontRendering.counter.family;
@@ -413,7 +350,25 @@ class BubbleChartComponent {
                     return fontRendering.counter.weight;
                 }
                 return 'inherit';
-            });
+            })
+                .attr('fill', 'white')
+                .text((d) => {
+                if (d.r / 4 > 2.5) {
+                    // show text and number threshhold
+                    return d.data.count;
+                }
+                return '';
+            })
+                .attr('y', (d) => {
+                let labelLength = d.data.entity.label.split(/ +/g);
+                if (labelLength.length > 3) {
+                    labelLength = labelLength.slice(0, 3);
+                }
+                return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
+            })
+                .attr('fill-opacity', 0)
+                .transition(t) // enter() transition on <text>
+                .attr('fill-opacity', 1);
             leaf
                 .exit() // EXIT CYCLE
                 .remove();
@@ -1408,10 +1363,10 @@ class InputTextComponent {
     }
 }
 InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\" [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\" [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span> \n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\" [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\" [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span> \n    </div>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1939,6 +1894,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+class InputTextareaComponent {
+    onChange(inputPayload, value) {
+        if (!this.emit)
+            return;
+        this.emit('change', { inputPayload, value });
+    }
+}
+InputTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextareaComponent, selector: "n7-frontend-components-input-textarea", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-frontend-components-input-textarea', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 const COMPONENTS = [
     AdvancedAutocompleteComponent,
     AlertComponent,
@@ -1976,6 +1949,7 @@ const COMPONENTS = [
     SimpleAutocompleteComponent,
     TableComponent,
     TagComponent,
+    InputTextareaComponent,
     TextViewerComponent,
     TimelineComponent,
     ToastComponent,
@@ -2023,6 +1997,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         SimpleAutocompleteComponent,
         TableComponent,
         TagComponent,
+        InputTextareaComponent,
         TextViewerComponent,
         TimelineComponent,
         ToastComponent,
@@ -2065,6 +2040,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         SimpleAutocompleteComponent,
         TableComponent,
         TagComponent,
+        InputTextareaComponent,
         TextViewerComponent,
         TimelineComponent,
         ToastComponent,
@@ -7334,6 +7310,15 @@ const INPUT_TEXT_MOCK = {
     // max: 20,
 };
 
+const INPUT_TEXTAREA_MOCK = {
+    id: 'input-text-1',
+    label: 'TEXT AREA LABEL',
+    placeholder: 'Describe your thing here',
+    inputPayload: 'textarea-input',
+    enterPayload: 'textarea-enter',
+    iconPayload: 'textarea-icon',
+};
+
 const ITEM_PREVIEW_MOCK = {
     image: 'https://placeimg.com/600/600/nature',
     color: '#4D8FF2',
@@ -8403,5 +8388,5 @@ const WIZARD_MOCK = {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BreadcrumbsComponent, BubbleChartComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
+export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BreadcrumbsComponent, BubbleChartComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
 //# sourceMappingURL=net7-components.mjs.map