@tet/tet-components 1.3.146-testing → 1.3.147-testing

package/dist/esm/tet-spinner.entry.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, h, g as getElement } from './index-7f1e2a22.js';
+
+const tetSpinnerCss = ":host{display:flex;--spinner-primary-color:var(--tc-blue-40);--spinner-secondary-color:transparent;--spinner-size:1.5rem;--spinner-indicator-size:0.23rem;--spinner-progress:0}.dark-theme{--spinner-primary-color:var(--tc-spinner-gradient-value-1-dark);--spinner-secondary-color:var(--tc-spinner-gradient-value-2-dark)}.light-theme{--spinner-primary-color:var(--tc-spinner-gradient-value-1);--spinner-secondary-color:var(--tc-spinner-gradient-value-2)}.size--medium{--spinner-size:2rem;--spinner-indicator-size:0.3rem}.size--large{--spinner-size:2.5rem;--spinner-indicator-size:0.375rem}@keyframes indeterminate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.spinner{position:relative;width:var(--spinner-size);height:var(--spinner-size)}.spinner::before{display:block;content:\"\";right:0;top:43%;width:var(--spinner-indicator-size);aspect-ratio:1;position:absolute;background-color:var(--spinner-primary-color);border-radius:50%}.spinner__gradient{width:2.5rem;height:2.5rem;border-radius:50%;background:conic-gradient(from 90deg, var(--spinner-secondary-color) 0%, var(--spinner-primary-color) 76%, var(--spinner-primary-color) 100%) border-box}.spinner--indeterminate{animation:indeterminate 1.5s infinite steps(100)}.spinner--determinate{transform:rotate(calc(var(--spinner-progress) * 2.7deg))}.spinner--determinate .spinner__gradient{background:conic-gradient(from 90deg, var(--spinner-secondary-color) 0%, var(--spinner-primary-color) calc(76% - var(--spinner-progress) * 0.76%), var(--spinner-primary-color) 100%) border-box}";
+const TetSpinnerStyle0 = tetSpinnerCss;
+
+const TetSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** The reference to the spinner element */
+        this.spinner = null;
+        /** Sets foreignObject attributes manually as a workaround to stenciljs bug in JSX translation */
+        this.setForeignObjectAttributes = () => {
+            const foreignObject = this.spinner.querySelector('foreignObject');
+            if (foreignObject === null || foreignObject === undefined) {
+                return;
+            }
+            foreignObject.setAttribute('x', '0');
+            foreignObject.setAttribute('y', '0');
+            foreignObject.setAttribute('width', '40px');
+            foreignObject.setAttribute('height', '40px');
+            foreignObject.setAttribute('clip-path', 'url(#clip)');
+        };
+        this.theme = 'classic';
+        this.size = 'small';
+        this.type = 'indeterminate';
+        this.previousProgress = 0;
+    }
+    onTypeChange(type) {
+        if (type === 'determinate') {
+            return;
+        }
+        this.spinner.classList.remove(`spinner--${this.previousProgress}-progress`);
+    }
+    /**
+     * Sets the `--spinner-progress` CSS variable.
+     * @param progress number representing the current progress of the spinner.
+     */
+    async setProgress(progress) {
+        let currentProgress = progress;
+        if (!currentProgress) {
+            currentProgress = 0;
+        }
+        if (currentProgress > 100) {
+            currentProgress = 100;
+        }
+        this.element.style.setProperty('--spinner-progress', currentProgress.toString());
+    }
+    componentDidLoad() {
+        this.setForeignObjectAttributes();
+    }
+    render() {
+        return (h("div", { key: '6700ed743adb73ad21bbb7eba4c593f78aa7be73', ref: element => (this.spinner = element), class: {
+                spinner: true,
+                [`${this.theme}-theme`]: true,
+                [`size--${this.size}`]: true,
+                [`spinner--${this.type}`]: true,
+            } }, h("svg", { key: '95c55e994caa2cb7fdc0f3e743ead7085fd8406e', viewBox: "0 0 40 40" }, h("clipPath", { key: '337f95d860f1a27284ee0134e785aff287187b29', id: "clip" }, h("path", { key: '880422c680560d58f7527c6353f4e234c0c1d11f', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
+              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: 'ea78a1e04a9ab23ee66cb68bb72cc2b49928a1e7' }, h("div", { key: '7b9d99801d5b97e4a44c439fb779d4ec7400fa45', class: "spinner__gradient" })))));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "type": ["onTypeChange"]
+    }; }
+};
+TetSpinner.style = TetSpinnerStyle0;
+
+export { TetSpinner as tet_spinner };