@furystack/shades-common-components 10.0.35 → 11.0.0

package/esm/components/suggest/suggestion-list.spec.d.ts

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

package/esm/components/suggest/suggestion-list.spec.d.ts.map

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

package/esm/components/suggest/suggestion-list.spec.js

@@ -0,0 +1,252 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { using } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { SuggestManager } from './suggest-manager.js';
+import { SuggestionList } from './suggestion-list.js';
+const createTestEntries = () => [
+    { id: 1, name: 'alpha' },
+    { id: 2, name: 'beta' },
+    { id: 3, name: 'gamma' },
+];
+const createSuggestionResult = (entry) => ({
+    element: (createComponent("span", null, entry.name)),
+    score: entry.id,
+});
+describe('SuggestionList', () => {
+    let originalAnimate;
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+        vi.useFakeTimers();
+        originalAnimate = Element.prototype.animate;
+        Element.prototype.animate = vi.fn(() => {
+            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.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    const createManager = () => {
+        const getEntries = vi.fn().mockResolvedValue(createTestEntries());
+        const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult);
+        return new SuggestManager(getEntries, getSuggestionEntry);
+    };
+    it('should render with shadow DOM', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        using(createManager(), (manager) => {
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        const suggestionList = document.querySelector('shade-suggest-suggestion-list');
+        expect(suggestionList).not.toBeNull();
+    });
+    it('should render the suggestions container', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        using(createManager(), (manager) => {
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        const container = document.querySelector('.suggestion-items-container');
+        expect(container).not.toBeNull();
+    });
+    it('should render suggestion items when suggestions are present', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        const manager = createManager();
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(SuggestionList, { manager: manager }),
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        void manager.getSuggestion({ injector, term: 'test' });
+        await vi.advanceTimersByTimeAsync(250);
+        await vi.advanceTimersByTimeAsync(50);
+        const suggestionItems = document.querySelectorAll('.suggestion-item');
+        expect(suggestionItems.length).toBe(3);
+        expect(suggestionItems[0].textContent).toContain('alpha');
+        expect(suggestionItems[1].textContent).toContain('beta');
+        expect(suggestionItems[2].textContent).toContain('gamma');
+        manager[Symbol.dispose]();
+    });
+    it('should apply selected class to the correct suggestion item', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        const manager = createManager();
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(SuggestionList, { manager: manager }),
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        void manager.getSuggestion({ injector, term: 'test' });
+        await vi.advanceTimersByTimeAsync(250);
+        await vi.advanceTimersByTimeAsync(50);
+        const suggestionItems = document.querySelectorAll('.suggestion-item');
+        expect(suggestionItems[0].classList.contains('selected')).toBe(true);
+        expect(suggestionItems[1].classList.contains('selected')).toBe(false);
+        expect(suggestionItems[2].classList.contains('selected')).toBe(false);
+        manager[Symbol.dispose]();
+    });
+    it('should update selected class when selectedIndex changes', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        const manager = createManager();
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(SuggestionList, { manager: manager }),
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        void manager.getSuggestion({ injector, term: 'test' });
+        await vi.advanceTimersByTimeAsync(250);
+        await vi.advanceTimersByTimeAsync(50);
+        manager.selectedIndex.setValue(1);
+        await vi.advanceTimersByTimeAsync(50);
+        const suggestionItems = document.querySelectorAll('.suggestion-item');
+        expect(suggestionItems[0].classList.contains('selected')).toBe(false);
+        expect(suggestionItems[1].classList.contains('selected')).toBe(true);
+        expect(suggestionItems[2].classList.contains('selected')).toBe(false);
+        manager.selectedIndex.setValue(2);
+        await vi.advanceTimersByTimeAsync(50);
+        expect(suggestionItems[0].classList.contains('selected')).toBe(false);
+        expect(suggestionItems[1].classList.contains('selected')).toBe(false);
+        expect(suggestionItems[2].classList.contains('selected')).toBe(true);
+        manager[Symbol.dispose]();
+    });
+    it('should call selectSuggestion when a suggestion item is clicked', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        const manager = createManager();
+        const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(SuggestionList, { manager: manager }),
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        void manager.getSuggestion({ injector, term: 'test' });
+        await vi.advanceTimersByTimeAsync(250);
+        await vi.advanceTimersByTimeAsync(50);
+        manager.isOpened.setValue(true);
+        await vi.advanceTimersByTimeAsync(50);
+        const suggestionItems = document.querySelectorAll('.suggestion-item');
+        suggestionItems[1].click();
+        expect(selectSpy).toHaveBeenCalledWith(1);
+        manager[Symbol.dispose]();
+    });
+    it('should not call selectSuggestion when list is not opened', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        const manager = createManager();
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(SuggestionList, { manager: manager }),
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        manager.currentSuggestions.setValue([
+            { entry: { id: 1, name: 'alpha' }, suggestion: createSuggestionResult({ id: 1, name: 'alpha' }) },
+            { entry: { id: 2, name: 'beta' }, suggestion: createSuggestionResult({ id: 2, name: 'beta' }) },
+        ]);
+        await vi.advanceTimersByTimeAsync(50);
+        const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+        const suggestionItems = document.querySelectorAll('.suggestion-item');
+        suggestionItems[1].click();
+        expect(selectSpy).not.toHaveBeenCalled();
+        manager[Symbol.dispose]();
+    });
+    it('should render empty container when no suggestions', async () => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        const getEntries = vi.fn().mockResolvedValue([]);
+        const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult);
+        const manager = new SuggestManager(getEntries, getSuggestionEntry);
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(SuggestionList, { manager: manager }),
+        });
+        await vi.advanceTimersByTimeAsync(50);
+        const suggestionItems = document.querySelectorAll('.suggestion-item');
+        expect(suggestionItems.length).toBe(0);
+        manager[Symbol.dispose]();
+    });
+    describe('animations', () => {
+        it('should animate container when isOpened changes to true', async () => {
+            const injector = new Injector();
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await vi.advanceTimersByTimeAsync(50);
+            const container = document.querySelector('.suggestion-items-container');
+            manager.isOpened.setValue(true);
+            await vi.advanceTimersByTimeAsync(50);
+            expect(container.style.zIndex).toBe('1');
+            manager[Symbol.dispose]();
+        });
+        it('should animate container when isOpened changes to false', async () => {
+            const injector = new Injector();
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await vi.advanceTimersByTimeAsync(50);
+            manager.isOpened.setValue(true);
+            await vi.advanceTimersByTimeAsync(50);
+            const container = document.querySelector('.suggestion-items-container');
+            manager.isOpened.setValue(false);
+            await vi.advanceTimersByTimeAsync(50);
+            expect(container.style.zIndex).toBe('-1');
+            manager[Symbol.dispose]();
+        });
+    });
+    describe('container width', () => {
+        it('should set container width based on parent element', async () => {
+            const injector = new Injector();
+            const rootElement = document.getElementById('root');
+            rootElement.style.width = '400px';
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await vi.advanceTimersByTimeAsync(50);
+            const container = document.querySelector('.suggestion-items-container');
+            expect(container.style.width).toBeDefined();
+            manager[Symbol.dispose]();
+        });
+    });
+});
+//# sourceMappingURL=suggestion-list.spec.js.map

package/esm/components/suggest/suggestion-list.spec.js.map

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

package/esm/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;CACb;AA+BD,eAAO,MAAM,IAAI;UACT,GAAG,EAAE;qBACM,OAAO,CAAC,mBAAmB,CAAC;YACrC,OAAO,CAAC,mBAAmB,CAAC;eACzB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;;;sEAyBjC,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;CACb;AAkCD,eAAO,MAAM,IAAI;UACT,GAAG,EAAE;qBACM,OAAO,CAAC,mBAAmB,CAAC;YACrC,OAAO,CAAC,mBAAmB,CAAC;eACzB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;;;sEAkCjC,CAAA"}

package/esm/components/tabs.js

@@ -1,41 +1,55 @@
-import { LocationService, Shade, attachProps, createComponent } from '@furystack/shades';
-import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { LocationService, Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
 const TabHeader = Shade({
     shadowDomName: 'shade-tab-header',
-    style: {
+    css: {
         padding: '1em 2.5em',
         cursor: 'pointer',
-        transition: 'box-shadow 1s linear',
+        transition: 'box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, font-weight 0.3s ease',
+        fontWeight: 'inherit',
+        background: cssVariableTheme.background.default,
+        color: cssVariableTheme.text.secondary,
+        boxShadow: 'none',
+        '&.active': {
+            fontWeight: 'bolder',
+            background: cssVariableTheme.background.paper,
+            color: cssVariableTheme.text.primary,
+            boxShadow: `inset 0 -2px 0 ${cssVariableTheme.palette.primary.main}`,
+        },
     },
     elementBase: HTMLAnchorElement,
     elementBaseName: 'a',
     render: ({ children, element, injector, props, useObservable }) => {
-        const { theme } = injector.getInstance(ThemeProviderService);
         const locationService = injector.getInstance(LocationService);
         const [hash] = useObservable('updateLocation', locationService.onLocationHashChanged);
         const isActive = hash === props.hash;
-        attachProps(element, {
-            style: {
-                fontWeight: isActive ? 'bolder' : 'inherit',
-                background: isActive ? theme.background.paper : theme.background.default,
-                color: isActive ? theme.text.primary : theme.text.secondary,
-                boxShadow: isActive ? `inset 0 -2px 0 ${theme.palette.primary.main}` : 'none',
-            },
-            href: `#${props.hash}`,
-        });
+        element.classList.toggle('active', isActive);
+        element.setAttribute('href', `#${props.hash}`);
         return createComponent(createComponent, null, children);
     },
 });
 export const Tabs = Shade({
     shadowDomName: 'shade-tabs',
+    css: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        '& .shade-tabs-header-container': {
+            display: 'inline-flex',
+            borderRadius: '5px 5px 0 0',
+            overflow: 'hidden',
+            flexShrink: '0',
+        },
+    },
     render: ({ props, element, useObservable, injector }) => {
-        attachProps(element, {
-            style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...props.containerStyle },
-        });
+        if (props.containerStyle) {
+            Object.assign(element.style, props.containerStyle);
+        }
         const [hash] = useObservable('updateLocation', injector.getInstance(LocationService).onLocationHashChanged);
         const activeTab = props.tabs.find((t) => t.hash === hash.replace('#', ''));
         return (createComponent(createComponent, null,
-            createComponent("div", { className: "shade-tabs-header-container", style: { display: 'inline-flex', borderRadius: '5px 5px 0 0', overflow: 'hidden', flexShrink: '0' } }, props.tabs.map((tab) => (createComponent(TabHeader, { hash: tab.hash }, tab.header)))),
+            createComponent("div", { className: "shade-tabs-header-container" }, props.tabs.map((tab) => (createComponent(TabHeader, { hash: tab.hash }, tab.header)))),
             activeTab?.component));
     },
 });

package/esm/components/tabs.js.map

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

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

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

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

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

package/esm/components/tabs.spec.js

@@ -0,0 +1,187 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot, LocationService } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { Tabs } from './tabs.js';
+describe('Tabs', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+        window.location.hash = '';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        window.location.hash = '';
+    });
+    const createTabs = () => [
+        {
+            hash: 'tab1',
+            header: createComponent("span", null, "Tab 1"),
+            component: createComponent("div", { id: "content-1" }, "Content 1"),
+        },
+        {
+            hash: 'tab2',
+            header: createComponent("span", null, "Tab 2"),
+            component: createComponent("div", { id: "content-2" }, "Content 2"),
+        },
+        {
+            hash: 'tab3',
+            header: createComponent("span", null, "Tab 3"),
+            component: createComponent("div", { id: "content-3" }, "Content 3"),
+        },
+    ];
+    it('should render all tab headers', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs }),
+            });
+            await sleepAsync(100);
+            expect(document.body.innerHTML).toContain('Tab 1');
+            expect(document.body.innerHTML).toContain('Tab 2');
+            expect(document.body.innerHTML).toContain('Tab 3');
+        });
+    });
+    it('should display the active tab content based on URL hash', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            window.location.hash = '#tab2';
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs }),
+            });
+            await sleepAsync(100);
+            expect(document.getElementById('content-2')).toBeTruthy();
+            expect(document.getElementById('content-1')).toBeFalsy();
+            expect(document.getElementById('content-3')).toBeFalsy();
+        });
+    });
+    it('should not display any tab content when hash does not match', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            window.location.hash = '#nonexistent';
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs }),
+            });
+            await sleepAsync(100);
+            expect(document.getElementById('content-1')).toBeFalsy();
+            expect(document.getElementById('content-2')).toBeFalsy();
+            expect(document.getElementById('content-3')).toBeFalsy();
+        });
+    });
+    it('should update active tab when hash changes', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            window.location.hash = '#tab1';
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs }),
+            });
+            await sleepAsync(100);
+            expect(document.getElementById('content-1')).toBeTruthy();
+            // Change hash
+            window.location.hash = '#tab3';
+            injector.getInstance(LocationService).updateState();
+            await sleepAsync(100);
+            expect(document.getElementById('content-3')).toBeTruthy();
+            expect(document.getElementById('content-1')).toBeFalsy();
+        });
+    });
+    it('should render tab headers as anchor elements with correct href', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs }),
+            });
+            await sleepAsync(100);
+            // Tab headers extend anchor elements
+            const html = document.body.innerHTML;
+            expect(html).toContain('href="#tab1"');
+            expect(html).toContain('href="#tab2"');
+            expect(html).toContain('href="#tab3"');
+        });
+    });
+    it('should mark the active tab header with active class', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            window.location.hash = '#tab2';
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs }),
+            });
+            await sleepAsync(100);
+            // The tab header with tab2 hash should have active class
+            const html = document.body.innerHTML;
+            // Verify the active tab content is shown
+            expect(document.getElementById('content-2')).toBeTruthy();
+            // Check for active class in the tab-header element containing Tab 2
+            expect(html).toMatch(/shade-tab-header[^>]*class="active"[^>]*href="#tab2"/);
+        });
+    });
+    it('should switch active class when hash changes', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            window.location.hash = '#tab1';
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs }),
+            });
+            await sleepAsync(100);
+            // Verify tab1 is active
+            expect(document.getElementById('content-1')).toBeTruthy();
+            expect(document.body.innerHTML).toMatch(/shade-tab-header[^>]*class="active"[^>]*href="#tab1"/);
+            // Change hash
+            window.location.hash = '#tab2';
+            injector.getInstance(LocationService).updateState();
+            await sleepAsync(100);
+            // Verify tab2 is now active
+            expect(document.getElementById('content-2')).toBeTruthy();
+            expect(document.getElementById('content-1')).toBeFalsy();
+            expect(document.body.innerHTML).toMatch(/shade-tab-header[^>]*class="active"[^>]*href="#tab2"/);
+        });
+    });
+    it('should apply containerStyle to the element', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const tabs = createTabs();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: tabs, containerStyle: { maxWidth: '800px' } }),
+            });
+            await sleepAsync(100);
+            const tabsElement = document.querySelector('shade-tabs');
+            expect(tabsElement.style.maxWidth).toBe('800px');
+        });
+    });
+    it('should work with empty tabs array', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(Tabs, { tabs: [] }),
+            });
+            await sleepAsync(100);
+            const tabHeaders = document.querySelectorAll('shade-tab-header');
+            expect(tabHeaders.length).toBe(0);
+        });
+    });
+});
+//# sourceMappingURL=tabs.spec.js.map

package/esm/components/tabs.spec.js.map

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

package/esm/components/wizard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,MAAM;;0CAsCjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,MAAM;;0CAuCjB,CAAA"}

package/esm/components/wizard/index.js

@@ -2,16 +2,19 @@ import { createComponent, Shade } from '@furystack/shades';
 import { Paper } from '../paper.js';
 export const Wizard = Shade({
     shadowDomName: 'shades-wizard',
+    css: {
+        '& .wizard-container': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+        },
+    },
     render: ({ props, useState }) => {
         const [currentPage, setCurrentPage] = useState('currentPage', 0);
         const CurrentPage = props.steps[currentPage];
-        return (createComponent("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '100%',
-                height: '100%',
-            } },
+        return (createComponent("div", { className: "wizard-container" },
             createComponent(Paper, { style: { maxWidth: '100%', maxHeight: '100%' }, elevation: 3, onclick: (ev) => ev.stopPropagation() },
                 createComponent(CurrentPage, { currentPage: currentPage, maxPages: props.steps.length, onNext: () => {
                         if (currentPage < props.steps.length - 1) {

package/esm/components/wizard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgCnC,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;QAEhE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QAE5C,OAAO,CACL,yBACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YAED,gBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;gBACxG,gBAAC,WAAW,IACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAC5B,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;4BACzC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;6BAAM,CAAC;4BACN,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAA;wBACpB,CAAC;oBACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;4BACpB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;oBACH,CAAC,GACD,CACI,CACJ,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgCnC,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,eAAe;IAC9B,GAAG,EAAE;QACH,qBAAqB,EAAE;YACrB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;KACF;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;QAEhE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QAE5C,OAAO,CACL,yBAAK,SAAS,EAAC,kBAAkB;YAC/B,gBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;gBACxG,gBAAC,WAAW,IACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAC5B,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;4BACzC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;6BAAM,CAAC;4BACN,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAA;wBACpB,CAAC;oBACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;4BACpB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;oBACH,CAAC,GACD,CACI,CACJ,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/wizard/index.spec.d.ts

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

package/esm/components/wizard/index.spec.d.ts.map

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