@furystack/shades-common-components 10.0.35 → 11.0.0

package/esm/components/inputs/text-area.js

@@ -1,65 +1,61 @@
 import { createComponent, Shade } from '@furystack/shades';
-import { ThemeProviderService } from '../../services/theme-provider-service.js';
-import { promisifyAnimation } from '../../utils/promisify-animation.js';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
 export const TextArea = Shade({
     shadowDomName: 'shade-text-area',
-    render: ({ props, element, injector }) => {
-        const themeProvider = injector.getInstance(ThemeProviderService);
-        const { theme } = themeProvider;
-        const { palette } = theme;
-        return (createComponent("label", { ...props.labelProps, style: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                justifyContent: 'space-between',
-                fontSize: '10px',
-                color: props.disabled ? 'rgb(170, 170, 170)' : '#bbb',
-                marginBottom: '1em',
-                padding: '1em',
-                borderRadius: '5px',
-                border: props.variant === 'outlined' ? '1px solid #bbb' : 'none',
-                ...props.labelProps?.style,
-            } },
+    css: {
+        display: 'block',
+        marginBottom: '1em',
+        '& label': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            fontSize: '10px',
+            color: '#bbb',
+            padding: '1em',
+            borderRadius: '5px',
+            border: 'none',
+            transition: 'color 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955)',
+        },
+        '&[data-variant="outlined"] label': {
+            border: '1px solid #bbb',
+        },
+        '&[data-disabled] label': {
+            color: 'rgb(170, 170, 170)',
+        },
+        '&:focus-within label': {
+            color: cssVariableTheme.palette.primary.main,
+        },
+        '& .textarea-content': {
+            border: 'none',
+            backgroundColor: 'transparent',
+            outline: 'none',
+            fontSize: '12px',
+            width: '100%',
+            textOverflow: 'ellipsis',
+            boxShadow: '0px 0px 0px rgba(128,128,128,0.1)',
+            transition: 'box-shadow 0.2s ease',
+        },
+        '&:focus-within .textarea-content': {
+            boxShadow: `0px 3px 0px ${cssVariableTheme.palette.primary.main}`,
+        },
+    },
+    render: ({ props, element }) => {
+        if (props.variant) {
+            element.setAttribute('data-variant', props.variant);
+        }
+        else {
+            element.removeAttribute('data-variant');
+        }
+        if (props.disabled) {
+            element.setAttribute('data-disabled', '');
+        }
+        else {
+            element.removeAttribute('data-disabled');
+        }
+        return (createComponent("label", { ...props.labelProps, style: props.labelProps?.style },
             createComponent("span", null, props.labelTitle),
-            createComponent("div", { contentEditable: props.readOnly === true || props.disabled === true ? 'inherit' : 'true', ...props, style: {
-                    border: 'none',
-                    backgroundColor: 'transparent',
-                    outline: 'none',
-                    fontSize: '12px',
-                    width: '100%',
-                    textOverflow: 'ellipsis',
-                    ...props.style,
-                }, onfocus: () => {
-                    if (!props.disabled) {
-                        void promisifyAnimation(element.querySelector('label'), [{ color: themeProvider.getTextColor(theme.background.default) }, { color: palette.primary.main }], {
-                            duration: 500,
-                            easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                            fill: 'forwards',
-                        });
-                        void promisifyAnimation(element.querySelector('div[contenteditable="true"]'), [
-                            { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                            { boxShadow: `0px 3px 0px ${palette.primary.main}` },
-                        ], {
-                            duration: 200,
-                            fill: 'forwards',
-                        });
-                    }
-                }, onblur: () => {
-                    if (!props.disabled) {
-                        void promisifyAnimation(element.querySelector('label'), [{ color: palette.primary.main }, { color: themeProvider.getTextColor(theme.background.default) }], {
-                            duration: 200,
-                            easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                            fill: 'forwards',
-                        });
-                        void promisifyAnimation(element.querySelector('div[contenteditable="true"]'), [
-                            { boxShadow: '0px 3px 0px rgba(128,128,128,0.4)' },
-                            { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                        ], {
-                            duration: 400,
-                            fill: 'forwards',
-                        });
-                    }
-                } }, props.value)));
+            createComponent("div", { className: "textarea-content", contentEditable: props.readOnly === true || props.disabled === true ? 'inherit' : 'true', ...props, style: props.style }, props.value)));
     },
 });
 //# sourceMappingURL=text-area.js.map

package/esm/components/inputs/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../src/components/inputs/text-area.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../src/components/inputs/text-area.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AASvE,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAgB;IAC3C,aAAa,EAAE,iBAAiB;IAChC,GAAG,EAAE;QACH,OAAO,EAAE,OAAO;QAChB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,YAAY;YACxB,cAAc,EAAE,eAAe;YAC/B,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,KAAK;YACd,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,qDAAqD;SAClE;QACD,kCAAkC,EAAE;YAClC,MAAM,EAAE,gBAAgB;SACzB;QACD,wBAAwB,EAAE;YACxB,KAAK,EAAE,oBAAoB;SAC5B;QACD,sBAAsB,EAAE;YACtB,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;SAC7C;QACD,qBAAqB,EAAE;YACrB,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,aAAa;YAC9B,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM;YACb,YAAY,EAAE,UAAU;YACxB,SAAS,EAAE,mCAAmC;YAC9C,UAAU,EAAE,sBAAsB;SACnC;QACD,kCAAkC,EAAE;YAClC,SAAS,EAAE,eAAe,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE;SAClE;KACF;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;QAC7B,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;QACrD,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;QACD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;QAC3C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;QAC1C,CAAC;QAED,OAAO,CACL,8BAAW,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK;YACzD,8BAAO,KAAK,CAAC,UAAU,CAAQ;YAE/B,yBACE,SAAS,EAAC,kBAAkB,EAC5B,eAAe,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,KACpF,KAAK,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,IAEjB,KAAK,CAAC,KAAK,CACR,CACA,CACT,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/inputs/text-area.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-area.spec.d.ts.map

package/esm/components/inputs/text-area.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.spec.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/text-area.spec.tsx"],"names":[],"mappings":""}

package/esm/components/inputs/text-area.spec.js

@@ -0,0 +1,214 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { TextArea } from './text-area.js';
+describe('TextArea', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should render with shadow DOM', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, null),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+    });
+    it('should render label with labelTitle', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { labelTitle: "Test Label" }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+        const label = textArea?.querySelector('label');
+        expect(label).not.toBeNull();
+        const span = textArea?.querySelector('span');
+        expect(span?.textContent).toBe('Test Label');
+    });
+    it('should apply labelProps to label element', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { labelTitle: "Test", labelProps: { className: 'custom-label-class' } }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        const label = textArea?.querySelector('label');
+        expect(label?.className).toBe('custom-label-class');
+    });
+    it('should set data-variant attribute for outlined variant', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { variant: "outlined" }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+        expect(textArea.getAttribute('data-variant')).toBe('outlined');
+    });
+    it('should set data-variant attribute for contained variant', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { variant: "contained" }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+        expect(textArea.getAttribute('data-variant')).toBe('contained');
+    });
+    it('should not set data-variant attribute when no variant is provided', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, null),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+        expect(textArea.hasAttribute('data-variant')).toBe(false);
+    });
+    it('should set data-disabled attribute when disabled', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { disabled: true }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+        expect(textArea.hasAttribute('data-disabled')).toBe(true);
+    });
+    it('should not set data-disabled attribute when not disabled', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { disabled: false }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+        expect(textArea.hasAttribute('data-disabled')).toBe(false);
+    });
+    it('should render value in contentEditable div', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { value: "Test content" }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        const contentDiv = textArea?.querySelector('.textarea-content');
+        expect(contentDiv).not.toBeNull();
+        expect(contentDiv?.textContent).toBe('Test content');
+    });
+    it('should have contentEditable true when not readOnly or disabled', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, null),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        const contentDiv = textArea?.querySelector('.textarea-content');
+        expect(contentDiv?.contentEditable).toBe('true');
+    });
+    it('should have contentEditable inherit when readOnly is true', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { readOnly: true }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        const contentDiv = textArea?.querySelector('.textarea-content');
+        expect(contentDiv?.contentEditable).toBe('inherit');
+    });
+    it('should have contentEditable inherit when disabled is true', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { disabled: true }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        const contentDiv = textArea?.querySelector('.textarea-content');
+        expect(contentDiv?.contentEditable).toBe('inherit');
+    });
+    it('should apply custom style to content div', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { style: { color: 'red' } }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        const contentDiv = textArea?.querySelector('.textarea-content');
+        expect(contentDiv?.style.color).toBe('red');
+    });
+    it('should apply custom style to label element', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, { labelProps: { style: { backgroundColor: 'blue' } } }),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        const label = textArea?.querySelector('label');
+        expect(label?.style.backgroundColor).toBe('blue');
+    });
+    it('should have correct CSS styles applied', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(TextArea, null),
+        });
+        await sleepAsync(50);
+        const textArea = document.querySelector('shade-text-area');
+        expect(textArea).not.toBeNull();
+        const computedStyle = window.getComputedStyle(textArea);
+        expect(computedStyle.display).toBe('block');
+        expect(computedStyle.marginBottom).toBe('1em');
+    });
+});
+//# sourceMappingURL=text-area.spec.js.map

package/esm/components/inputs/text-area.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.spec.js","sourceRoot":"","sources":["../../../src/components/inputs/text-area.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/loader.js

@@ -3,7 +3,7 @@ import { ThemeProviderService } from '../services/theme-provider-service.js';
 import { promisifyAnimation } from '../utils/promisify-animation.js';
 export const Loader = Shade({
     shadowDomName: 'shade-loader',
-    style: {
+    css: {
         display: 'inline-block',
         transformOrigin: 'center',
         opacity: '0',

package/esm/components/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/components/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAuBpE,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,cAAc;IAC7B,KAAK,EAAE;QACL,OAAO,EAAE,cAAc;QACvB,eAAe,EAAE,QAAQ;QACzB,OAAO,EAAE,GAAG;KACb;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QACvC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;QAE5D,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,GAAG,KAAK,CAAA;QAC7B,MAAM,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,KAAK,CAAA;QAClC,MAAM,EAAE,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,KAAK,CAAA;QAE1D,UAAU,CAAC,GAAG,EAAE;YACd,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE;gBACrE,QAAQ,EAAE,GAAG;gBACb,KAAK;gBACL,IAAI,EAAE,UAAU;aACjB,CAAC,CAAA;YACF,KAAK,kBAAkB,CACrB,OAAO,CAAC,iBAAiB,EACzB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACjG;gBACE,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,aAAa;gBACrB,UAAU,EAAE,QAAQ;aACrB,CACF,CAAA;QACH,CAAC,EAAE,CAAC,CAAC,CAAA;QACL,OAAO,CACL,yBACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,eAAe,WAAW,GAAG,CAAC,KAAK;gBAC1C,MAAM,EAAE,eAAe,WAAW,GAAG,CAAC,KAAK;gBAC3C,MAAM,EAAE,GAAG,WAAW,gCAAgC;gBACtD,YAAY,EAAE,GAAG,WAAW,YAAY,WAAW,EAAE;gBACrD,YAAY,EAAE,KAAK;aACpB,GACD,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/components/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAuBpE,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,cAAc;IAC7B,GAAG,EAAE;QACH,OAAO,EAAE,cAAc;QACvB,eAAe,EAAE,QAAQ;QACzB,OAAO,EAAE,GAAG;KACb;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QACvC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;QAE5D,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,GAAG,KAAK,CAAA;QAC7B,MAAM,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,KAAK,CAAA;QAClC,MAAM,EAAE,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,KAAK,CAAA;QAE1D,UAAU,CAAC,GAAG,EAAE;YACd,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE;gBACrE,QAAQ,EAAE,GAAG;gBACb,KAAK;gBACL,IAAI,EAAE,UAAU;aACjB,CAAC,CAAA;YACF,KAAK,kBAAkB,CACrB,OAAO,CAAC,iBAAiB,EACzB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACjG;gBACE,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,aAAa;gBACrB,UAAU,EAAE,QAAQ;aACrB,CACF,CAAA;QACH,CAAC,EAAE,CAAC,CAAC,CAAA;QACL,OAAO,CACL,yBACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,eAAe,WAAW,GAAG,CAAC,KAAK;gBAC1C,MAAM,EAAE,eAAe,WAAW,GAAG,CAAC,KAAK;gBAC3C,MAAM,EAAE,GAAG,WAAW,gCAAgC;gBACtD,YAAY,EAAE,GAAG,WAAW,YAAY,WAAW,EAAE;gBACrD,YAAY,EAAE,KAAK;aACpB,GACD,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/loader.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=loader.spec.d.ts.map

package/esm/components/loader.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.spec.d.ts","sourceRoot":"","sources":["../../src/components/loader.spec.tsx"],"names":[],"mappings":""}

package/esm/components/loader.spec.js

@@ -0,0 +1,251 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { Loader } from './loader.js';
+describe('Loader', () => {
+    let originalAnimate;
+    let animateCalls;
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+        animateCalls = [];
+        originalAnimate = Element.prototype.animate;
+        Element.prototype.animate = vi.fn((keyframes, options) => {
+            animateCalls.push({ keyframes, options });
+            const mockAnimation = {
+                onfinish: null,
+                oncancel: null,
+                cancel: vi.fn(),
+                play: vi.fn(),
+                pause: vi.fn(),
+                finish: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+            };
+            return mockAnimation;
+        });
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        Element.prototype.animate = originalAnimate;
+        vi.restoreAllMocks();
+    });
+    it('should render with shadow DOM', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+    });
+    it('should have initial opacity of 0', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const computedStyle = window.getComputedStyle(loader);
+        expect(computedStyle.opacity).toBe('0');
+    });
+    it('should have correct css styles applied', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const computedStyle = window.getComputedStyle(loader);
+        expect(computedStyle.display).toBe('inline-block');
+        expect(computedStyle.transformOrigin).toBe('center');
+    });
+    it('should use default delay of 500ms', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'opacity' in kf));
+        expect(fadeInCall).toBeDefined();
+        expect(fadeInCall?.options?.delay).toBe(500);
+    });
+    it('should use custom delay when provided', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, { delay: 200 }),
+        });
+        await sleepAsync(50);
+        const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'opacity' in kf));
+        expect(fadeInCall).toBeDefined();
+        expect(fadeInCall?.options?.delay).toBe(200);
+    });
+    it('should start fade-in animation with correct parameters', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, { delay: 100 }),
+        });
+        await sleepAsync(50);
+        const fadeInCall = animateCalls.find((call) => Array.isArray(call.keyframes) &&
+            call.keyframes.length === 2 &&
+            call.keyframes[0].opacity === '0' &&
+            call.keyframes[1].opacity === '1');
+        expect(fadeInCall).toBeDefined();
+        const options = fadeInCall?.options;
+        expect(options.fill).toBe('forwards');
+        expect(options.duration).toBe(500);
+        expect(options.delay).toBe(100);
+    });
+    it('should start rotation animation', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const rotationCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'transform' in kf));
+        expect(rotationCall).toBeDefined();
+        const options = rotationCall?.options;
+        expect(options.duration).toBe(1500);
+        expect(options.easing).toBe('ease-in-out');
+        expect(options.iterations).toBe(Infinity);
+    });
+    it('should have rotation keyframes from 0 to 360 degrees', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const rotationCall = animateCalls.find((call) => Array.isArray(call.keyframes) && call.keyframes.some((kf) => 'transform' in kf));
+        expect(rotationCall).toBeDefined();
+        const keyframes = rotationCall?.keyframes;
+        expect(keyframes).toHaveLength(3);
+        expect(keyframes[0].transform).toBe('rotate(0deg)');
+        expect(keyframes[1].transform).toBe('rotate(180deg)');
+        expect(keyframes[2].transform).toBe('rotate(360deg)');
+    });
+    it('should use default borderWidth of 15px', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const innerDiv = loader.querySelector('div');
+        expect(innerDiv).not.toBeNull();
+        expect(innerDiv.style.width).toBe('calc(100% - 30px)');
+        expect(innerDiv.style.height).toBe('calc(100% - 30px)');
+        expect(innerDiv.style.borderTopWidth).toBe('15px');
+    });
+    it('should use custom borderWidth when provided', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, { borderWidth: 10 }),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const innerDiv = loader.querySelector('div');
+        expect(innerDiv).not.toBeNull();
+        expect(innerDiv.style.width).toBe('calc(100% - 20px)');
+        expect(innerDiv.style.height).toBe('calc(100% - 20px)');
+        expect(innerDiv.style.borderTopWidth).toBe('10px');
+    });
+    it('should use custom borderColor when provided', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, { borderColor: "#ff0000" }),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const innerDiv = loader.querySelector('div');
+        expect(innerDiv).not.toBeNull();
+        expect(innerDiv.style.borderBottomColor).toBe('rgb(255, 0, 0)');
+    });
+    it('should use theme primary color as default borderColor', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const innerDiv = loader.querySelector('div');
+        expect(innerDiv).not.toBeNull();
+        const themeService = injector.getInstance(ThemeProviderService);
+        expect(innerDiv.style.borderBottom).toContain(themeService.theme.palette.primary.main);
+    });
+    it('should render with circular shape', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, null),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const innerDiv = loader.querySelector('div');
+        expect(innerDiv).not.toBeNull();
+        expect(innerDiv.style.borderRadius).toBe('50%');
+        expect(innerDiv.style.position).toBe('relative');
+    });
+    it('should have a semi-transparent main border and colored bottom border', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(Loader, { borderColor: "#00ff00" }),
+        });
+        await sleepAsync(50);
+        const loader = document.querySelector('shade-loader');
+        expect(loader).not.toBeNull();
+        const innerDiv = loader.querySelector('div');
+        expect(innerDiv).not.toBeNull();
+        expect(innerDiv.style.borderTopColor).toBe('rgba(128, 128, 128, 0.1)');
+        expect(innerDiv.style.borderBottomColor).toBe('rgb(0, 255, 0)');
+    });
+});
+//# sourceMappingURL=loader.spec.js.map