@tet/tet-components 1.3.157-testing → 1.4.0-staging

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.js

@@ -6,26 +6,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetAccordion {
     constructor() {
-        /**
-         * Toggles the state of the inner accordion content.
-         */
-        this.toggleOpenState = () => {
-            this.setState(!this.isOpen);
-            if (this.isOpen && this.withAutoScroll) {
-                setTimeout(() => {
-                    this.element.scrollIntoView({ block: 'start', behavior: 'smooth' });
-                }, this.animationDuration);
-            }
-        };
-        /**
-         * Toggles the state of the inner accordion content.
-         */
-        this.toggleAccessibilityOpenState = (e) => {
-            if (['Space', 'Enter'].includes(e.code)) {
-                e.preventDefault();
-                this.toggleOpenState();
-            }
-        };
         this.isOpen = false;
         this.theme = 'light';
         this.header = '';
@@ -38,6 +18,19 @@ export class TetAccordion {
         this.headingTag = 'span';
         this.transparentBackground = false;
     }
+    element;
+    /**
+     * Reference to the content element.
+     */
+    contentElement;
+    /**
+     * Reference to the content wrapper element.
+     */
+    contentWrapperElement;
+    /**
+     * The timeout callback for the end of the animation.
+     */
+    animationCallback;
     /**
      * Public API method to open the accordion content.
      */
@@ -62,6 +55,30 @@ export class TetAccordion {
     async getState() {
         return this.isOpen;
     }
+    /**
+     * The event to be emitted on the `isOpen` value change.
+     */
+    openChanged;
+    /**
+     * Toggles the state of the inner accordion content.
+     */
+    toggleOpenState = () => {
+        this.setState(!this.isOpen);
+        if (this.isOpen && this.withAutoScroll) {
+            setTimeout(() => {
+                this.element.scrollIntoView({ block: 'start', behavior: 'smooth' });
+            }, this.animationDuration);
+        }
+    };
+    /**
+     * Toggles the state of the inner accordion content.
+     */
+    toggleAccessibilityOpenState = (e) => {
+        if (['Space', 'Enter'].includes(e.code)) {
+            e.preventDefault();
+            this.toggleOpenState();
+        }
+    };
     /**
      * The duration of the animation from the style of the host element.
      */

package/dist/collection/components/simple/structural/tet-expansion-panel/tet-expansion-panel.js

@@ -6,36 +6,23 @@ import { h } from "@stencil/core";
  */
 export class TetExpansionPanel {
     constructor() {
-        /**
-         * Opens or closes the expansion panel.
-         */
-        this.handleToggleElementClick = () => {
-            this.toggleState();
-        };
-        /**
-         * Toggles the state of the inner expansion panel.
-         */
-        this.toggleState = () => {
-            this.state = this.state === 'open' ? 'closed' : 'open';
-        };
         this.state = undefined;
         this.toggleElement = null;
         this.initialState = 'closed';
     }
+    element;
     connectedCallback() {
-        var _a, _b;
         if (typeof this.toggleElement === 'string') {
             const root = this.element.getRootNode();
             this.toggleElement = root.querySelector(this.toggleElement);
         }
-        (_a = this.toggleElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleToggleElementClick);
-        (_b = this.toggleElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.handleToggleElementClick);
+        this.toggleElement?.removeEventListener('click', this.handleToggleElementClick);
+        this.toggleElement?.addEventListener('click', this.handleToggleElementClick);
         this.state = this.initialState;
     }
     disconnectedCallback() {
-        var _a;
         if (typeof this.toggleElement !== 'string') {
-            (_a = this.toggleElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleToggleElementClick);
+            this.toggleElement?.removeEventListener('click', this.handleToggleElementClick);
         }
     }
     /**
@@ -62,6 +49,18 @@ export class TetExpansionPanel {
     async getState() {
         return this.state;
     }
+    /**
+     * Opens or closes the expansion panel.
+     */
+    handleToggleElementClick = () => {
+        this.toggleState();
+    };
+    /**
+     * Toggles the state of the inner expansion panel.
+     */
+    toggleState = () => {
+        this.state = this.state === 'open' ? 'closed' : 'open';
+    };
     render() {
         return (h("div", { key: '110cb94243dcfad7ef9c8091b4efb52a236cd66a', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '0bf5be975a4841659b09f4130e6bd332e5e3159b', class: "tet-expansion-panel-content" }, h("slot", { key: 'c43bff135d4885ae5a67a0266782fadb4a36afa8' }))));
     }

package/dist/collection/components/simple/tables-and-graphs/tet-bar-graph/tet-bar-graph.js

@@ -4,219 +4,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetBarGraph {
     constructor() {
-        /**
-         * Extends the input data with display values required for rendering the graph.
-         * @param updateExisting Determines whether the calculation should update or re-declare the `displayData` state.
-         * @param rawData The input data of the component.
-         * @returns
-         */
-        this.calculateDisplayData = (updateExisting = false, rawData = this.data) => {
-            const displayData = [];
-            const valueRange = this.maxValue - this.minValue;
-            // Get max decimal places
-            const decimalPlaces = Math.max(...rawData.map(rawItem => { var _a; return ((_a = rawItem.value.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 0; }));
-            for (const rawItem of rawData) {
-                let value = rawItem.value;
-                if (value < this.minValue) {
-                    value = this.minValue;
-                }
-                if (value > this.maxValue) {
-                    value = this.maxValue;
-                }
-                const width = (((value - this.minValue) / valueRange) * 100) || 1;
-                displayData.push(Object.assign(Object.assign({}, rawItem), { width, formattedValue: this.formatValue(rawItem.value, decimalPlaces), order: -1 }));
-            }
-            if (this.dataOrder === 'ascending') {
-                displayData.sort((itemA, itemB) => itemA.value - itemB.value);
-            }
-            else if (this.dataOrder === 'descending') {
-                displayData.sort((itemA, itemB) => itemB.value - itemA.value);
-            }
-            for (let index = 0; index < displayData.length; index++) {
-                displayData[index].order = index;
-            }
-            if (!updateExisting) {
-                this.displayData = displayData;
-                return;
-            }
-            const elements = Array.from(this.barContainerRef.children);
-            for (const displayItem of displayData) {
-                const existingDisplayItem = this.displayData.find(existingDisplayItem => existingDisplayItem.id === displayItem.id);
-                if (existingDisplayItem === undefined) {
-                    this.displayData.push(displayItem);
-                }
-                else {
-                    Object.assign(existingDisplayItem, displayItem);
-                }
-                const element = elements.find(element => displayItem.id === element.getAttribute('data-id'));
-                if (element === undefined) {
-                    continue;
-                }
-                element.setAttribute('data-order', displayItem.order.toString());
-            }
-            const allIds = displayData.map(displayItem => displayItem.id);
-            this.displayData = this.displayData.filter((displayItem) => allIds.includes(displayItem.id));
-        };
-        /**
-         * Sets up the rendered data for animations.
-         * Calculates changes.
-         * Applies animations.
-         */
-        this.animateDisplayDataChanges = () => {
-            this.setElementOffsets();
-            this.calculateDisplayData(true);
-            this.sortGraph();
-            const elements = Array.from(this.barContainerRef.children);
-            for (const element of elements) {
-                this.animateElementTranslate(element);
-                this.animateValuePosition(element);
-            }
-        };
-        /**
-         * Executes the translate transition on the bar elements.
-         * @param element the bar of the graph.
-         */
-        this.animateElementTranslate = (element) => {
-            const elementStartPosition = parseFloat(element.getAttribute('data-offset'));
-            const elementEndPosition = element.getBoundingClientRect().top;
-            const translateTransform = `translateY(${elementStartPosition - elementEndPosition}px)`;
-            element.style.transform = translateTransform;
-            const animation = element.animate({
-                transform: 'translateY(0)',
-            }, {
-                duration: this.animationDuration,
-            });
-            /** Required to fix jest not seeing the animation. */
-            if (animation !== undefined) {
-                animation.onfinish = () => {
-                    element.style.transform = null;
-                };
-            }
-            const labelElement = this.barLabelContainerRef.querySelector(`[data-id="${element.getAttribute('data-id')}"]`);
-            if (labelElement !== null) {
-                labelElement.style.transform = translateTransform;
-                const animation = labelElement.animate({
-                    transform: 'translateY(0)',
-                }, {
-                    duration: this.animationDuration,
-                });
-                /** Required to fix jest not seeing the animation. */
-                if (animation !== undefined) {
-                    animation.onfinish = () => {
-                        labelElement.style.transform = null;
-                    };
-                }
-            }
-        };
-        /**
-         * Animates the position of the bar value elements in case of overflow.
-         * @param element The bar container element containing the bar and the value.
-         * @param duration The duration of the animation.
-         */
-        this.animateValuePosition = (element, duration = this.animationDuration) => {
-            const displayItem = this.displayData.find(displayItem => displayItem.id === element.getAttribute('data-id'));
-            const value = element.querySelector('.bar-graph__bar-value--after');
-            const elementWidth = element.getBoundingClientRect().width;
-            const valueWidth = value.getBoundingClientRect().width;
-            const availableWidth = elementWidth - elementWidth * (displayItem.width / 100);
-            const startPositionLeft = value.style.left || '0';
-            let endPositionLeft = '0';
-            if (valueWidth > availableWidth) {
-                const offset = (valueWidth - availableWidth) * -1;
-                endPositionLeft = offset === 0 ? '0' : `${offset}px`;
-            }
-            if (startPositionLeft !== endPositionLeft) {
-                const animation = value.animate([{ left: startPositionLeft }, { left: endPositionLeft }], {
-                    duration,
-                });
-                /** Required to fix jest not seeing the animation. */
-                if (animation !== undefined) {
-                    animation.onfinish = () => {
-                        value.style.left = endPositionLeft;
-                    };
-                }
-            }
-        };
-        /**
-         * Saves the current element offset for use in animations.
-         */
-        this.setElementOffsets = () => {
-            if (this.barContainerRef === undefined) {
-                return;
-            }
-            const elements = Array.from(this.barContainerRef.children);
-            for (const element of elements) {
-                element.setAttribute('data-offset', element.getBoundingClientRect().top.toString());
-            }
-        };
-        /**
-         * Formats the raw input value, adding `valueUnit` and decimal precision.
-         * @param value raw input value.
-         * @param decimalPlaces the amount of decimal places to display.
-         */
-        this.formatValue = (value, decimalPlaces) => {
-            let displayValue = value.toFixed(decimalPlaces).replace('.', ',');
-            if (this.valueUnit) {
-                displayValue = `${displayValue} ${this.valueUnit}`;
-            }
-            return displayValue;
-        };
-        /**
-         * Sets `containerSize` state depending on `element` width.
-         * Sets `sliderContainerRef` overflow style depending on `type` and `containerSize` states.
-         */
-        this.autoSetComponentSize = () => {
-            if (this.size !== 'auto') {
-                return;
-            }
-            let containerWidth;
-            if (this.parentContainer.hasOwnProperty('innerWidth')) {
-                containerWidth = this.parentContainer.innerWidth;
-            }
-            else {
-                containerWidth = this.parentContainer.getBoundingClientRect().width;
-            }
-            if (containerWidth >= 1024) {
-                this.componentSize = 'large';
-            }
-            else {
-                this.componentSize = 'small';
-            }
-        };
-        /**
-         * Sorts the graph elements depending on `dataOrder` prop.
-         */
-        this.sortGraph = () => {
-            const elements = Array.from(this.barContainerRef.children);
-            elements.sort((elementA, elementB) => parseInt(elementA.getAttribute('data-order'), 10) - parseInt(elementB.getAttribute('data-order'), 10));
-            for (const element of elements) {
-                element.style.order = element.getAttribute('data-order');
-            }
-        };
-        /**
-         * Renders the label for the graph bar.
-         * @param displayItem The display item containing values required for the render.
-         * @param isInline Determines the type of the label to be rendered.
-         */
-        this.renderLabel = (displayItem, isInline) => {
-            return (h("div", { class: {
-                    'bar-graph__label': true,
-                    'bar-graph__label--inline': isInline,
-                    [`bar-graph__label--${displayItem.type}`]: true,
-                }, "data-id": displayItem.id, style: { order: isInline ? displayItem.order.toString() : null } }, displayItem.label));
-        };
-        /**
-         * Renders the bar of the graph.
-         * @param displayItem The display item containing values required for the render.
-         * @returns
-         */
-        this.renderBar = (displayItem) => {
-            return (h("div", { class: "bar-graph__item", "data-id": displayItem.id, "data-order": displayItem.order, style: { zIndex: displayItem.type === 'primary' ? '1' : '0' } }, h("div", { class: { hidden: this.labelPosition !== 'responsive' || this.componentSize !== 'small' } }, this.renderLabel(displayItem, false)), h("div", { class: "bar-graph__bar-container", style: { width: `${displayItem.width}%` } }, h("div", { class: { 'bar-graph__bar': true, [`bar-graph__bar--${displayItem.type}`]: true } }, h("span", { class: { 'bar-graph__bar-value': true, 'hidden': this.valuePosition !== 'inside' } }, displayItem.formattedValue))), h("div", { class: "bar-graph__bar-value-container", style: { left: `${displayItem.width}%` } }, h("span", { class: {
-                    'bar-graph__bar-value': true,
-                    [`bar-graph__bar-value--after`]: true,
-                    'hidden': this.valuePosition !== 'after',
-                } }, displayItem.formattedValue))));
-        };
         this.parentContainer = null;
         this.data = [];
         this.minValue = 0;
@@ -233,6 +20,10 @@ export class TetBarGraph {
         this.componentSize = 'large';
         this.labelWidth = 0;
     }
+    barContainerRef;
+    barLabelContainerRef;
+    /** The root of the element. */
+    element;
     /** The `size` prop change listener. */
     onSizeChange(size) {
         if (size !== 'auto') {
@@ -288,6 +79,224 @@ export class TetBarGraph {
         this.autoSetComponentSize();
         this.animateDisplayDataChanges();
     }
+    /**
+     * Extends the input data with display values required for rendering the graph.
+     * @param updateExisting Determines whether the calculation should update or re-declare the `displayData` state.
+     * @param rawData The input data of the component.
+     * @returns
+     */
+    calculateDisplayData = (updateExisting = false, rawData = this.data) => {
+        const displayData = [];
+        const valueRange = this.maxValue - this.minValue;
+        // Get max decimal places
+        const decimalPlaces = Math.max(...rawData.map(rawItem => rawItem.value.toString().split('.')[1]?.length || 0));
+        for (const rawItem of rawData) {
+            let value = rawItem.value;
+            if (value < this.minValue) {
+                value = this.minValue;
+            }
+            if (value > this.maxValue) {
+                value = this.maxValue;
+            }
+            const width = (((value - this.minValue) / valueRange) * 100) || 1;
+            displayData.push({
+                ...rawItem,
+                width,
+                formattedValue: this.formatValue(rawItem.value, decimalPlaces),
+                order: -1,
+            });
+        }
+        if (this.dataOrder === 'ascending') {
+            displayData.sort((itemA, itemB) => itemA.value - itemB.value);
+        }
+        else if (this.dataOrder === 'descending') {
+            displayData.sort((itemA, itemB) => itemB.value - itemA.value);
+        }
+        for (let index = 0; index < displayData.length; index++) {
+            displayData[index].order = index;
+        }
+        if (!updateExisting) {
+            this.displayData = displayData;
+            return;
+        }
+        const elements = Array.from(this.barContainerRef.children);
+        for (const displayItem of displayData) {
+            const existingDisplayItem = this.displayData.find(existingDisplayItem => existingDisplayItem.id === displayItem.id);
+            if (existingDisplayItem === undefined) {
+                this.displayData.push(displayItem);
+            }
+            else {
+                Object.assign(existingDisplayItem, displayItem);
+            }
+            const element = elements.find(element => displayItem.id === element.getAttribute('data-id'));
+            if (element === undefined) {
+                continue;
+            }
+            element.setAttribute('data-order', displayItem.order.toString());
+        }
+        const allIds = displayData.map(displayItem => displayItem.id);
+        this.displayData = this.displayData.filter((displayItem) => allIds.includes(displayItem.id));
+    };
+    /**
+     * Sets up the rendered data for animations.
+     * Calculates changes.
+     * Applies animations.
+     */
+    animateDisplayDataChanges = () => {
+        this.setElementOffsets();
+        this.calculateDisplayData(true);
+        this.sortGraph();
+        const elements = Array.from(this.barContainerRef.children);
+        for (const element of elements) {
+            this.animateElementTranslate(element);
+            this.animateValuePosition(element);
+        }
+    };
+    /**
+     * Executes the translate transition on the bar elements.
+     * @param element the bar of the graph.
+     */
+    animateElementTranslate = (element) => {
+        const elementStartPosition = parseFloat(element.getAttribute('data-offset'));
+        const elementEndPosition = element.getBoundingClientRect().top;
+        const translateTransform = `translateY(${elementStartPosition - elementEndPosition}px)`;
+        element.style.transform = translateTransform;
+        const animation = element.animate({
+            transform: 'translateY(0)',
+        }, {
+            duration: this.animationDuration,
+        });
+        /** Required to fix jest not seeing the animation. */
+        if (animation !== undefined) {
+            animation.onfinish = () => {
+                element.style.transform = null;
+            };
+        }
+        const labelElement = this.barLabelContainerRef.querySelector(`[data-id="${element.getAttribute('data-id')}"]`);
+        if (labelElement !== null) {
+            labelElement.style.transform = translateTransform;
+            const animation = labelElement.animate({
+                transform: 'translateY(0)',
+            }, {
+                duration: this.animationDuration,
+            });
+            /** Required to fix jest not seeing the animation. */
+            if (animation !== undefined) {
+                animation.onfinish = () => {
+                    labelElement.style.transform = null;
+                };
+            }
+        }
+    };
+    /**
+     * Animates the position of the bar value elements in case of overflow.
+     * @param element The bar container element containing the bar and the value.
+     * @param duration The duration of the animation.
+     */
+    animateValuePosition = (element, duration = this.animationDuration) => {
+        const displayItem = this.displayData.find(displayItem => displayItem.id === element.getAttribute('data-id'));
+        const value = element.querySelector('.bar-graph__bar-value--after');
+        const elementWidth = element.getBoundingClientRect().width;
+        const valueWidth = value.getBoundingClientRect().width;
+        const availableWidth = elementWidth - elementWidth * (displayItem.width / 100);
+        const startPositionLeft = value.style.left || '0';
+        let endPositionLeft = '0';
+        if (valueWidth > availableWidth) {
+            const offset = (valueWidth - availableWidth) * -1;
+            endPositionLeft = offset === 0 ? '0' : `${offset}px`;
+        }
+        if (startPositionLeft !== endPositionLeft) {
+            const animation = value.animate([{ left: startPositionLeft }, { left: endPositionLeft }], {
+                duration,
+            });
+            /** Required to fix jest not seeing the animation. */
+            if (animation !== undefined) {
+                animation.onfinish = () => {
+                    value.style.left = endPositionLeft;
+                };
+            }
+        }
+    };
+    /**
+     * Saves the current element offset for use in animations.
+     */
+    setElementOffsets = () => {
+        if (this.barContainerRef === undefined) {
+            return;
+        }
+        const elements = Array.from(this.barContainerRef.children);
+        for (const element of elements) {
+            element.setAttribute('data-offset', element.getBoundingClientRect().top.toString());
+        }
+    };
+    /**
+     * Formats the raw input value, adding `valueUnit` and decimal precision.
+     * @param value raw input value.
+     * @param decimalPlaces the amount of decimal places to display.
+     */
+    formatValue = (value, decimalPlaces) => {
+        let displayValue = value.toFixed(decimalPlaces).replace('.', ',');
+        if (this.valueUnit) {
+            displayValue = `${displayValue} ${this.valueUnit}`;
+        }
+        return displayValue;
+    };
+    /**
+     * Sets `containerSize` state depending on `element` width.
+     * Sets `sliderContainerRef` overflow style depending on `type` and `containerSize` states.
+     */
+    autoSetComponentSize = () => {
+        if (this.size !== 'auto') {
+            return;
+        }
+        let containerWidth;
+        if (this.parentContainer.hasOwnProperty('innerWidth')) {
+            containerWidth = this.parentContainer.innerWidth;
+        }
+        else {
+            containerWidth = this.parentContainer.getBoundingClientRect().width;
+        }
+        if (containerWidth >= 1024) {
+            this.componentSize = 'large';
+        }
+        else {
+            this.componentSize = 'small';
+        }
+    };
+    /**
+     * Sorts the graph elements depending on `dataOrder` prop.
+     */
+    sortGraph = () => {
+        const elements = Array.from(this.barContainerRef.children);
+        elements.sort((elementA, elementB) => parseInt(elementA.getAttribute('data-order'), 10) - parseInt(elementB.getAttribute('data-order'), 10));
+        for (const element of elements) {
+            element.style.order = element.getAttribute('data-order');
+        }
+    };
+    /**
+     * Renders the label for the graph bar.
+     * @param displayItem The display item containing values required for the render.
+     * @param isInline Determines the type of the label to be rendered.
+     */
+    renderLabel = (displayItem, isInline) => {
+        return (h("div", { class: {
+                'bar-graph__label': true,
+                'bar-graph__label--inline': isInline,
+                [`bar-graph__label--${displayItem.type}`]: true,
+            }, "data-id": displayItem.id, style: { order: isInline ? displayItem.order.toString() : null } }, displayItem.label));
+    };
+    /**
+     * Renders the bar of the graph.
+     * @param displayItem The display item containing values required for the render.
+     * @returns
+     */
+    renderBar = (displayItem) => {
+        return (h("div", { class: "bar-graph__item", "data-id": displayItem.id, "data-order": displayItem.order, style: { zIndex: displayItem.type === 'primary' ? '1' : '0' } }, h("div", { class: { hidden: this.labelPosition !== 'responsive' || this.componentSize !== 'small' } }, this.renderLabel(displayItem, false)), h("div", { class: "bar-graph__bar-container", style: { width: `${displayItem.width}%` } }, h("div", { class: { 'bar-graph__bar': true, [`bar-graph__bar--${displayItem.type}`]: true } }, h("span", { class: { 'bar-graph__bar-value': true, 'hidden': this.valuePosition !== 'inside' } }, displayItem.formattedValue))), h("div", { class: "bar-graph__bar-value-container", style: { left: `${displayItem.width}%` } }, h("span", { class: {
+                'bar-graph__bar-value': true,
+                [`bar-graph__bar-value--after`]: true,
+                'hidden': this.valuePosition !== 'after',
+            } }, displayItem.formattedValue))));
+    };
     /**
      * Renders the background grid lines depending on `componentSize`.
      * @returns The background data-grid elements.