-
-
- `;
- }
-
- // Lifecycle methods
- public connectedCallback() {
- super.connectedCallback();
- // Setup that needs DOM access
- }
-
- public async firstUpdated() {
- // One-time initialization after first render
- }
-
- // Cleanup
- public destroy() {
- // Clean up listeners, observers, registrations
- super.destroy();
- }
-}
-```
-
-### Advanced Patterns
-
-#### 1. Separation of Concerns (Complex Components)
-
-For complex components like WYSIWYG editors, separate concerns into handler classes:
-
-```typescript
-export class DeesComplexComponent extends DeesElement {
- // Orchestrator pattern - main component coordinates handlers
- private inputHandler: InputHandler;
- private stateHandler: StateHandler;
- private renderHandler: RenderHandler;
-
- constructor() {
- super();
- this.inputHandler = new InputHandler(this);
- this.stateHandler = new StateHandler(this);
- this.renderHandler = new RenderHandler(this);
- }
-}
-```
-
-#### 2. Singleton Pattern (Global Components)
-
-For global UI elements like menus:
-
-```typescript
-export class DeesGlobalMenu extends DeesElement {
- private static instance: DeesGlobalMenu;
-
- public static getInstance(): DeesGlobalMenu {
- if (!DeesGlobalMenu.instance) {
- DeesGlobalMenu.instance = new DeesGlobalMenu();
- document.body.appendChild(DeesGlobalMenu.instance);
- }
- return DeesGlobalMenu.instance;
- }
-}
-```
-
-#### 3. Registry Pattern (Z-Index Management)
-
-Use centralized registries for global state:
-
-```typescript
-class ComponentRegistry {
- private static instance: ComponentRegistry;
- private registry = new WeakMap${this.counter}
`;
-}
-
-// ✅ CORRECT - Pure render function
-public render() {
- return html`${this.counter}
`;
-}
-```
-
-## Form Components
-
-### DO: Extend DeesInputBase
-
-All form inputs must extend the base class:
-
-```typescript
-export class DeesInputNew extends DeesInputBase
-
-// ✅ CORRECT
-
-// In styles:
-.themed-container {
- background-color: ${cssManager.bdTheme('#ffffff', '#000000')};
-}
-```
-
-### ❌ DON'T: Forget Mobile Responsiveness
-
-```typescript
-// ❌ WRONG
-:host {
- width: 800px; // Fixed width
-}
-
-// ✅ CORRECT
-:host {
- width: 100%;
- max-width: 800px;
-}
-
-@media (max-width: 768px) {
- :host {
- /* Mobile adjustments */
- }
-}
-```
-
-## Code Examples
-
-### Example: Creating a New Button Variant
-
-```typescript
-// dees-special-button.ts
-import { customElement, property, css, html } from '@design.estate/dees-element';
-import { DeesElement } from '@design.estate/dees-element';
-import * as cssManager from './00colors.js';
-import * as demoFunc from './dees-special-button.demo.js';
-
-@customElement('dees-special-button')
-export class DeesSpecialButton extends DeesElement {
- public static demo = demoFunc.demoFunc;
-
- @property({ type: String })
- public text: string = 'Click me';
-
- @property({ type: Boolean, reflect: true })
- public loading: boolean = false;
-
- public static styles = [
- cssManager.defaultStyles,
- css`
- :host {
- display: inline-block;
- }
-
- .button {
- padding: 8px 16px;
- background: ${cssManager.bdTheme('#0066ff', '#0044cc')};
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s;
- }
-
- .button:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 8px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
- }
-
- :host([loading]) .button {
- opacity: 0.7;
- cursor: not-allowed;
- }
- `
- ];
-
- public render() {
- return html`
-
- `;
- }
-
- private handleClick() {
- this.dispatchEvent(new CustomEvent('special-click', {
- bubbles: true,
- composed: true
- }));
- }
-}
-```
-
-### Example: Creating a Form Input
-
-```typescript
-// dees-input-special.ts
-export class DeesInputSpecial extends DeesInputBase {
- public static demo = demoFunc.demoFunc;
-
- public render() {
- return html`
-
-
-
- `;
- }
-
- private handleInput(e: Event) {
- this.value = (e.target as HTMLInputElement).value;
- this.changeSubject.next(this);
- }
-
- private handleBlur() {
- this.dispatchEvent(new CustomEvent('blur', {
- bubbles: true,
- composed: true
- }));
- }
-
- public getValue(): string {
- return this.value;
- }
-
- public setValue(value: string): void {
- this.value = value;
- this.changeSubject.next(this);
- }
-}
-```
-
-## Summary
-
-This playbook represents the collective wisdom and patterns found in the @design.estate/dees-catalog component library. Following these guidelines will help you create components that are:
-
-- **Consistent**: Following established patterns
-- **Maintainable**: Easy to understand and modify
-- **Performant**: Optimized for real-world use
-- **Accessible**: Usable by everyone
-- **Theme-aware**: Supporting light and dark modes
-- **Well-integrated**: Working seamlessly with the component ecosystem
-
-Remember: When in doubt, look at existing components for examples. The codebase itself is the best documentation of these patterns in action.
\ No newline at end of file
diff --git a/test/test.chromium.ts b/test/test.chromium.ts
deleted file mode 100644
index 082cf4d..0000000
--- a/test/test.chromium.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
-
-import * as deesCatalog from '../ts_web/index.js';
-
-tap.test('should create a working button', async () => {
- const button: deesCatalog.DeesButton = await webhelpers.fixture(
- webhelpers.html`
-
- `;
- document.body.appendChild(parentDiv);
-
- // Wait for components to be ready
- await new Promise(resolve => setTimeout(resolve, 100));
-
- const wysiwygInput = parentDiv.querySelector('dees-input-wysiwyg') as any;
- const blockElement = wysiwygInput?.shadowRoot?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
-
- if (blockElement) {
- // Set block data
- blockElement.block = {
- id: 'test-2',
- type: 'paragraph',
- content: 'Cross shadow DOM test'
- };
-
- blockElement.handlers = {
- onInput: () => {},
- onKeyDown: () => {},
- onFocus: () => {},
- onBlur: () => {},
- onCompositionStart: () => {},
- onCompositionEnd: () => {}
- };
-
- await blockElement.updateComplete;
-
- // Get the paragraph inside the nested shadow DOM
- const container = blockElement.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
- const paragraphBlock = container?.querySelector('.block.paragraph') as HTMLElement;
-
- if (paragraphBlock) {
- console.log('Found nested paragraph block');
-
- // Focus and set selection
- paragraphBlock.focus();
- const textNode = paragraphBlock.firstChild;
- if (textNode && textNode.nodeType === Node.TEXT_NODE) {
- const range = document.createRange();
- range.setStart(textNode, 5);
- range.setEnd(textNode, 5);
-
- const selection = window.getSelection();
- selection?.removeAllRanges();
- selection?.addRange(range);
-
- // Test containment from parent's perspective
- const selRange = selection?.getRangeAt(0);
- if (selRange) {
- // This should fail because it crosses shadow DOM boundary
- const regularContains = wysiwygInput.contains(selRange.startContainer);
- console.log('Parent regular contains:', regularContains);
- expect(regularContains).toBeFalse();
-
- // This should work with our Shadow DOM-aware method
- const shadowDOMContains = WysiwygSelection.containsAcrossShadowDOM(wysiwygInput, selRange.startContainer);
- console.log('Parent shadow DOM contains:', shadowDOMContains);
- expect(shadowDOMContains).toBeTrue();
- }
- }
- }
- }
-
- // Clean up
- document.body.removeChild(parentDiv);
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.tabs-indicator.chromium.ts b/test/test.tabs-indicator.chromium.ts
deleted file mode 100644
index f9d1251..0000000
--- a/test/test.tabs-indicator.chromium.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { expect, tap } from '@git.zone/tstest/tapbundle';
-import * as deesCatalog from '../ts_web/index.js';
-
-tap.test('tabs indicator positioning - detailed measurements', async () => {
- // Create tabs element with different length labels
- const tabsElement = new deesCatalog.DeesAppuiTabs();
- tabsElement.tabs = [
- { key: 'Home', iconName: 'lucide:home', action: () => {} },
- { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => {} },
- { key: 'User Settings', iconName: 'lucide:settings', action: () => {} },
- ];
-
- document.body.appendChild(tabsElement);
- await tabsElement.updateComplete;
-
- // Wait for fonts and indicator initialization
- await new Promise(resolve => setTimeout(resolve, 200));
-
- // Get all elements
- const shadowRoot = tabsElement.shadowRoot;
- const wrapper = shadowRoot.querySelector('.tabs-wrapper') as HTMLElement;
- const container = shadowRoot.querySelector('.tabsContainer') as HTMLElement;
- const tabs = shadowRoot.querySelectorAll('.tab');
- const firstTab = tabs[0] as HTMLElement;
- const firstContent = firstTab.querySelector('.tab-content') as HTMLElement;
- const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
-
- // Verify all elements exist
- expect(wrapper).toBeInstanceOf(HTMLElement);
- expect(container).toBeInstanceOf(HTMLElement);
- expect(firstTab).toBeInstanceOf(HTMLElement);
- expect(firstContent).toBeInstanceOf(HTMLElement);
- expect(indicator).toBeInstanceOf(HTMLElement);
-
- // Get all measurements
- const wrapperRect = wrapper.getBoundingClientRect();
- const containerRect = container.getBoundingClientRect();
- const tabRect = firstTab.getBoundingClientRect();
- const contentRect = firstContent.getBoundingClientRect();
- const indicatorRect = indicator.getBoundingClientRect();
-
- console.log('\n=== DETAILED MEASUREMENTS ===');
- console.log('Document body left:', document.body.getBoundingClientRect().left);
- console.log('Wrapper left:', wrapperRect.left);
- console.log('Container left:', containerRect.left);
- console.log('Tab left:', tabRect.left);
- console.log('Content left:', contentRect.left);
- console.log('Indicator left (actual):', indicatorRect.left);
-
- console.log('\n=== RELATIVE POSITIONS ===');
- console.log('Container padding (container - wrapper):', containerRect.left - wrapperRect.left);
- console.log('Tab position in container:', tabRect.left - containerRect.left);
- console.log('Content position in tab:', contentRect.left - tabRect.left);
- console.log('Content relative to wrapper:', contentRect.left - wrapperRect.left);
- console.log('Indicator relative to wrapper (actual):', indicatorRect.left - wrapperRect.left);
-
- console.log('\n=== WIDTHS ===');
- console.log('Tab width:', tabRect.width);
- console.log('Content width:', contentRect.width);
- console.log('Indicator width:', indicatorRect.width);
-
- console.log('\n=== STYLES (what we set) ===');
- console.log('Indicator style.left:', indicator.style.left);
- console.log('Indicator style.width:', indicator.style.width);
-
- console.log('\n=== CALCULATIONS ===');
- const expectedIndicatorLeft = contentRect.left - wrapperRect.left - 4; // We subtract 4 to center
- const expectedIndicatorWidth = contentRect.width + 8; // We add 8 in the code
- console.log('Expected indicator left:', expectedIndicatorLeft);
- console.log('Expected indicator width:', expectedIndicatorWidth);
- console.log('Actual indicator left (from style):', parseFloat(indicator.style.left));
- console.log('Actual indicator width (from style):', parseFloat(indicator.style.width));
-
- console.log('\n=== VISUAL ALIGNMENT CHECK ===');
- const tabCenter = tabRect.left + (tabRect.width / 2);
- const contentCenter = contentRect.left + (contentRect.width / 2);
- const indicatorCenter = indicatorRect.left + (indicatorRect.width / 2);
-
- console.log('Tab center:', tabCenter);
- console.log('Content center:', contentCenter);
- console.log('Indicator center:', indicatorCenter);
- console.log('Content offset from tab center:', contentCenter - tabCenter);
- console.log('Indicator offset from content center:', indicatorCenter - contentCenter);
- console.log('Indicator offset from tab center:', indicatorCenter - tabCenter);
- console.log('---');
- console.log('Indicator extends left of content by:', contentRect.left - indicatorRect.left);
- console.log('Indicator extends right of content by:', (indicatorRect.left + indicatorRect.width) - (contentRect.left + contentRect.width));
-
- // Check if icons are rendering
- const icon = firstContent.querySelector('dees-icon');
- console.log('\n=== ICON CHECK ===');
- console.log('Icon element found:', icon ? 'YES' : 'NO');
- if (icon) {
- const iconRect = icon.getBoundingClientRect();
- console.log('Icon width:', iconRect.width);
- console.log('Icon height:', iconRect.height);
- console.log('Icon visible:', iconRect.width > 0 && iconRect.height > 0 ? 'YES' : 'NO');
- }
-
- // Verify indicator is visible
- expect(indicator.style.opacity).toEqual('1');
-
- // Verify positioning calculations
- expect(parseFloat(indicator.style.left)).toBeCloseTo(expectedIndicatorLeft, 1);
- expect(parseFloat(indicator.style.width)).toBeCloseTo(expectedIndicatorWidth, 1);
-
- // Verify visual centering on content (should be perfectly centered)
- expect(Math.abs(indicatorCenter - contentCenter)).toBeLessThan(1);
-
- document.body.removeChild(tabsElement);
-});
-
-tap.test('tabs indicator should move when tab is clicked', async () => {
- // Create tabs element
- const tabsElement = new deesCatalog.DeesAppuiTabs();
- tabsElement.tabs = [
- { key: 'Home', iconName: 'lucide:home', action: () => {} },
- { key: 'Analytics', iconName: 'lucide:barChart', action: () => {} },
- { key: 'Settings', iconName: 'lucide:settings', action: () => {} },
- ];
-
- document.body.appendChild(tabsElement);
- await tabsElement.updateComplete;
- await new Promise(resolve => setTimeout(resolve, 100));
-
- const shadowRoot = tabsElement.shadowRoot;
- const tabs = shadowRoot.querySelectorAll('.tab');
- const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
-
- // Get initial position
- const initialLeft = parseFloat(indicator.style.left);
-
- // Click second tab
- (tabs[1] as HTMLElement).click();
- await tabsElement.updateComplete;
- await new Promise(resolve => setTimeout(resolve, 100));
-
- // Position should have changed
- const newLeft = parseFloat(indicator.style.left);
- expect(newLeft).not.toEqual(initialLeft);
- expect(newLeft).toBeGreaterThan(initialLeft);
-
- document.body.removeChild(tabsElement);
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.wysiwyg-basic.chromium.ts b/test/test.wysiwyg-basic.chromium.ts
deleted file mode 100644
index 4df522c..0000000
--- a/test/test.wysiwyg-basic.chromium.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-
-tap.test('should create wysiwyg editor', async () => {
- const editor = new DeesInputWysiwyg();
- expect(editor).toBeInstanceOf(DeesInputWysiwyg);
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.wysiwyg-blockmovement.chromium.ts b/test/test.wysiwyg-blockmovement.chromium.ts
deleted file mode 100644
index b2a552a..0000000
--- a/test/test.wysiwyg-blockmovement.chromium.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-
-// Initialize the element
-DeesInputWysiwyg;
-
-tap.test('wysiwyg block movement during drag', async () => {
- const element = document.createElement('dees-input-wysiwyg');
- document.body.appendChild(element);
-
- await element.updateComplete;
-
- // Set initial content
- element.blocks = [
- { id: 'block1', type: 'paragraph', content: 'Block 1' },
- { id: 'block2', type: 'paragraph', content: 'Block 2' },
- { id: 'block3', type: 'paragraph', content: 'Block 3' },
- ];
- element.renderBlocksProgrammatically();
-
- await element.updateComplete;
-
- const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
- const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
-
- // Start dragging block 1
- const mockDragEvent = {
- dataTransfer: {
- effectAllowed: '',
- setData: () => {},
- setDragImage: () => {}
- },
- clientY: 50,
- preventDefault: () => {},
- } as any;
-
- element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
-
- // Wait for dragging class
- await new Promise(resolve => setTimeout(resolve, 20));
-
- // Verify drag state
- expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
-
- // Check that drag height was calculated
- console.log('Checking drag height...');
- const dragHandler = element.dragDropHandler as any;
- console.log('draggedBlockHeight:', dragHandler.draggedBlockHeight);
- console.log('draggedBlockContentHeight:', dragHandler.draggedBlockContentHeight);
-
- // Manually call updateBlockPositions to simulate drag movement
- console.log('Simulating drag movement...');
- const updateBlockPositions = dragHandler.updateBlockPositions.bind(dragHandler);
-
- // Simulate dragging down past block 2
- const block2 = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
- const block2Rect = block2.getBoundingClientRect();
- const dragToY = block2Rect.bottom + 10;
-
- console.log('Dragging to Y position:', dragToY);
- updateBlockPositions(dragToY);
-
- // Check if blocks have moved
- await new Promise(resolve => setTimeout(resolve, 50));
-
- const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
- console.log('Block states after drag:');
- blocks.forEach((block, i) => {
- const classes = block.className;
- const offset = (block as HTMLElement).style.getPropertyValue('--drag-offset');
- console.log(`Block ${i}: classes="${classes}", offset="${offset}"`);
- });
-
- // Check that at least one block has move class
- const movedUpBlocks = editorContent.querySelectorAll('.block-wrapper.move-up');
- const movedDownBlocks = editorContent.querySelectorAll('.block-wrapper.move-down');
- console.log('Moved up blocks:', movedUpBlocks.length);
- console.log('Moved down blocks:', movedDownBlocks.length);
-
- // Clean up
- element.dragDropHandler.handleDragEnd();
- document.body.removeChild(element);
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.wysiwyg-blocks-debug.chromium.ts b/test/test.wysiwyg-blocks-debug.chromium.ts
deleted file mode 100644
index 5cdd083..0000000
--- a/test/test.wysiwyg-blocks-debug.chromium.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
-
-import * as deesCatalog from '../ts_web/index.js';
-import { BlockRegistry } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/block.registry.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
-
-// Import block registration to ensure handlers are registered
-import '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';
-
-tap.test('Debug: should create empty wysiwyg block component', async () => {
- try {
- console.log('Creating DeesWysiwygBlock...');
- const block: DeesWysiwygBlock = await webhelpers.fixture(
- webhelpers.html`
not .divider-icon) - const hr = dividerBlock.shadowRoot?.querySelector('hr'); - expect(hr).toBeTruthy(); - - // Clean up - document.body.removeChild(dividerBlock); -}); - -tap.test('should render paragraph block using handler', async () => { - // Wait for custom element to be defined - await customElements.whenDefined('dees-wysiwyg-block'); - - // Create element and set properties BEFORE attaching to DOM - const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - // Set required handlers - paragraphBlock.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - // Set a paragraph block - paragraphBlock.block = { - id: 'test-paragraph', - type: 'paragraph', - content: 'Test paragraph content' - }; - - // Attach to DOM and wait for render - document.body.appendChild(paragraphBlock); - await paragraphBlock.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - // Check that the paragraph is rendered - const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph'); - expect(paragraphElement).toBeTruthy(); - expect(paragraphElement?.getAttribute('contenteditable')).toEqual('true'); - expect(paragraphElement?.textContent).toEqual('Test paragraph content'); - - // Clean up - document.body.removeChild(paragraphBlock); -}); - -tap.test('should render heading blocks using handler', async () => { - // Wait for custom element to be defined - await customElements.whenDefined('dees-wysiwyg-block'); - - // Test heading-1 - set properties BEFORE attaching to DOM - const heading1Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - heading1Block.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - heading1Block.block = { - id: 'test-h1', - type: 'heading-1', - content: 'Heading 1 Test' - }; - - document.body.appendChild(heading1Block); - await heading1Block.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - const h1Element = heading1Block.shadowRoot?.querySelector('.block.heading-1'); - expect(h1Element).toBeTruthy(); - expect(h1Element?.textContent).toEqual('Heading 1 Test'); - - // Clean up heading-1 - document.body.removeChild(heading1Block); - - // Test heading-2 - set properties BEFORE attaching to DOM - const heading2Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - heading2Block.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - heading2Block.block = { - id: 'test-h2', - type: 'heading-2', - content: 'Heading 2 Test' - }; - - document.body.appendChild(heading2Block); - await heading2Block.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - const h2Element = heading2Block.shadowRoot?.querySelector('.block.heading-2'); - expect(h2Element).toBeTruthy(); - expect(h2Element?.textContent).toEqual('Heading 2 Test'); - - // Clean up heading-2 - document.body.removeChild(heading2Block); -}); - -tap.test('paragraph block handler methods should work', async () => { - // Wait for custom element to be defined - await customElements.whenDefined('dees-wysiwyg-block'); - - // Create element and set properties BEFORE attaching to DOM - const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - // Set required handlers - paragraphBlock.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - paragraphBlock.block = { - id: 'test-methods', - type: 'paragraph', - content: 'Initial content' - }; - - document.body.appendChild(paragraphBlock); - await paragraphBlock.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - // Test getContent - const content = paragraphBlock.getContent(); - expect(content).toEqual('Initial content'); - - // Test setContent - paragraphBlock.setContent('Updated content'); - await paragraphBlock.updateComplete; - expect(paragraphBlock.getContent()).toEqual('Updated content'); - - // Test that the DOM is updated - const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph'); - expect(paragraphElement?.textContent).toEqual('Updated content'); - - // Clean up - document.body.removeChild(paragraphBlock); -}); - -export default tap.start(); \ No newline at end of file diff --git a/test/test.wysiwyg-blocktype-change.chromium.ts b/test/test.wysiwyg-blocktype-change.chromium.ts deleted file mode 100644 index b5f4a5d..0000000 --- a/test/test.wysiwyg-blocktype-change.chromium.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { expect, tap } from '@git.zone/tstest/tapbundle'; -import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js'; -import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js'; - -tap.test('should change block type via context menu', async () => { - // Create WYSIWYG editor with a paragraph - const wysiwygEditor = new DeesInputWysiwyg(); - wysiwygEditor.value = '((resolve) => {
- console.log('Setting up delayed check...');
-
- // Use regular setTimeout
- setTimeout(() => {
- console.log('In setTimeout callback');
-
- try {
- const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
- const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
-
- console.log('Block has dragging class:', block1?.classList.contains('dragging'));
- console.log('Editor has dragging class:', editorContent?.classList.contains('dragging'));
-
- // Clean up
- element.dragDropHandler.handleDragEnd();
- document.body.removeChild(element);
-
- resolve();
- } catch (error) {
- console.error('Error in setTimeout:', error);
- throw error;
- }
- }, 50);
- });
-});
-
-tap.test('identify the crash point', async () => {
- console.log('Test started');
-
- const element = document.createElement('dees-input-wysiwyg');
- document.body.appendChild(element);
-
- console.log('Element created');
- await element.updateComplete;
-
- console.log('Setting blocks');
- element.blocks = [{ id: 'block1', type: 'paragraph', content: 'Test' }];
- element.renderBlocksProgrammatically();
-
- console.log('Waiting for update');
- await element.updateComplete;
-
- console.log('Creating mock event');
- const mockDragEvent = {
- dataTransfer: {
- effectAllowed: '',
- setData: () => {},
- setDragImage: () => {}
- },
- clientY: 100,
- preventDefault: () => {},
- } as any;
-
- console.log('Calling handleDragStart');
- element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
-
- console.log('handleDragStart completed');
-
- // Try different wait methods
- console.log('About to wait...');
-
- // Method 1: Direct promise
- await Promise.resolve();
- console.log('Promise.resolve completed');
-
- // Method 2: setTimeout 0
- await new Promise(resolve => setTimeout(resolve, 0));
- console.log('setTimeout 0 completed');
-
- // Method 3: requestAnimationFrame
- await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
- console.log('requestAnimationFrame completed');
-
- // Clean up
- element.dragDropHandler.handleDragEnd();
- document.body.removeChild(element);
- console.log('Cleanup completed');
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.wysiwyg-dropindicator.chromium.ts b/test/test.wysiwyg-dropindicator.chromium.ts
deleted file mode 100644
index 9ad6715..0000000
--- a/test/test.wysiwyg-dropindicator.chromium.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-
-// Initialize the element
-DeesInputWysiwyg;
-
-tap.test('wysiwyg drop indicator creation', async () => {
- const element = document.createElement('dees-input-wysiwyg');
- document.body.appendChild(element);
-
- await element.updateComplete;
-
- // Set initial content
- element.blocks = [
- { id: 'block1', type: 'paragraph', content: 'Test block' },
- ];
- element.renderBlocksProgrammatically();
-
- await element.updateComplete;
-
- // Check editorContentRef
- console.log('editorContentRef exists:', !!element.editorContentRef);
- console.log('editorContentRef tagName:', element.editorContentRef?.tagName);
- expect(element.editorContentRef).toBeTruthy();
-
- // Check initial state - no drop indicator
- let dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
- console.log('Drop indicator before drag:', dropIndicator);
- expect(dropIndicator).toBeFalsy();
-
- // Manually call createDropIndicator
- try {
- console.log('Calling createDropIndicator...');
- element.dragDropHandler['createDropIndicator']();
- console.log('createDropIndicator succeeded');
- } catch (error) {
- console.error('Error creating drop indicator:', error);
- throw error;
- }
-
- // Check drop indicator was created
- dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
- console.log('Drop indicator after creation:', dropIndicator);
- console.log('Drop indicator parent:', dropIndicator?.parentElement?.className);
- expect(dropIndicator).toBeTruthy();
- expect(dropIndicator!.style.display).toEqual('none');
-
- // Clean up
- document.body.removeChild(element);
-});
-
-tap.test('wysiwyg drag initialization with drop indicator', async () => {
- const element = document.createElement('dees-input-wysiwyg');
- document.body.appendChild(element);
-
- await element.updateComplete;
-
- // Set initial content
- element.blocks = [
- { id: 'block1', type: 'paragraph', content: 'Test block' },
- ];
- element.renderBlocksProgrammatically();
-
- await element.updateComplete;
-
- // Mock drag event
- const mockDragEvent = {
- dataTransfer: {
- effectAllowed: '',
- setData: (type: string, data: string) => {
- console.log('setData:', type, data);
- },
- setDragImage: (img: any, x: number, y: number) => {
- console.log('setDragImage');
- }
- },
- clientY: 100,
- preventDefault: () => {},
- } as any;
-
- console.log('Starting drag...');
-
- try {
- element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
- console.log('Drag start succeeded');
- } catch (error) {
- console.error('Error during drag start:', error);
- throw error;
- }
-
- // Wait for async operations
- await new Promise(resolve => setTimeout(resolve, 20));
-
- // Check drop indicator exists
- const dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
- console.log('Drop indicator after drag start:', dropIndicator);
- expect(dropIndicator).toBeTruthy();
-
- // Check drag state
- console.log('Drag state:', element.dragDropHandler.dragState);
- expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
-
- // Clean up
- element.dragDropHandler.handleDragEnd();
- document.body.removeChild(element);
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.wysiwyg-eventlisteners.chromium.ts b/test/test.wysiwyg-eventlisteners.chromium.ts
deleted file mode 100644
index 4657968..0000000
--- a/test/test.wysiwyg-eventlisteners.chromium.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-
-// Initialize the element
-DeesInputWysiwyg;
-
-tap.test('wysiwyg global event listeners', async () => {
- const element = document.createElement('dees-input-wysiwyg');
- document.body.appendChild(element);
-
- await element.updateComplete;
-
- // Set initial content
- element.blocks = [
- { id: 'block1', type: 'paragraph', content: 'Test block' },
- ];
- element.renderBlocksProgrammatically();
-
- await element.updateComplete;
-
- const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
- console.log('Block 1 found:', !!block1);
-
- // Set up drag state manually without using handleDragStart
- element.dragDropHandler['draggedBlockId'] = 'block1';
- element.dragDropHandler['draggedBlockElement'] = block1;
- element.dragDropHandler['initialMouseY'] = 100;
-
- // Create drop indicator manually
- element.dragDropHandler['createDropIndicator']();
-
- // Test adding global event listeners
- console.log('Adding event listeners...');
- const handleGlobalDragOver = element.dragDropHandler['handleGlobalDragOver'];
- const handleGlobalDragEnd = element.dragDropHandler['handleGlobalDragEnd'];
-
- try {
- document.addEventListener('dragover', handleGlobalDragOver);
- console.log('dragover listener added');
-
- document.addEventListener('dragend', handleGlobalDragEnd);
- console.log('dragend listener added');
- } catch (error) {
- console.error('Error adding event listeners:', error);
- throw error;
- }
-
- // Test firing a dragover event
- console.log('Creating dragover event...');
- const dragOverEvent = new Event('dragover', {
- bubbles: true,
- cancelable: true
- });
- Object.defineProperty(dragOverEvent, 'clientY', { value: 150 });
-
- console.log('Dispatching dragover event...');
- document.dispatchEvent(dragOverEvent);
- console.log('dragover event dispatched');
-
- // Clean up
- document.removeEventListener('dragover', handleGlobalDragOver);
- document.removeEventListener('dragend', handleGlobalDragEnd);
-
- document.body.removeChild(element);
-});
-
-tap.test('wysiwyg setTimeout in drag start', async () => {
- const element = document.createElement('dees-input-wysiwyg');
- document.body.appendChild(element);
-
- await element.updateComplete;
-
- // Set initial content
- element.blocks = [
- { id: 'block1', type: 'paragraph', content: 'Test block' },
- ];
- element.renderBlocksProgrammatically();
-
- await element.updateComplete;
-
- const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
- const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
-
- // Set drag state
- element.dragDropHandler['draggedBlockId'] = 'block1';
- element.dragDropHandler['draggedBlockElement'] = block1;
-
- console.log('Testing setTimeout callback...');
-
- // Test the setTimeout callback directly
- try {
- if (block1) {
- console.log('Adding dragging class to block...');
- block1.classList.add('dragging');
- console.log('Block classes:', block1.className);
- }
- if (editorContent) {
- console.log('Adding dragging class to editor...');
- editorContent.classList.add('dragging');
- console.log('Editor classes:', editorContent.className);
- }
- } catch (error) {
- console.error('Error in setTimeout callback:', error);
- throw error;
- }
-
- expect(block1.classList.contains('dragging')).toBeTrue();
- expect(editorContent.classList.contains('dragging')).toBeTrue();
-
- // Clean up
- document.body.removeChild(element);
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.wysiwyg-keyboard.chromium.ts b/test/test.wysiwyg-keyboard.chromium.ts
deleted file mode 100644
index ec8181b..0000000
--- a/test/test.wysiwyg-keyboard.chromium.ts
+++ /dev/null
@@ -1,329 +0,0 @@
-import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
-
-tap.test('Keyboard: Arrow navigation between blocks', async () => {
- const editor: DeesInputWysiwyg = await webhelpers.fixture(
- webhelpers.html`
-
- `;
- }
-}
-
-tap.test('should show context menu when right-clicking inside shadow DOM', async () => {
- // Create the shadow DOM element
- const shadowElement = document.createElement('test-shadow-element');
- document.body.appendChild(shadowElement);
-
- // Wait for element to be ready
- await shadowElement.updateComplete;
-
- // Get the content inside shadow DOM
- const shadowContent = shadowElement.shadowRoot!.querySelector('div');
- expect(shadowContent).toBeTruthy();
-
- // Simulate right-click on content inside shadow DOM
- const contextMenuEvent = new MouseEvent('contextmenu', {
- clientX: 100,
- clientY: 100,
- bubbles: true,
- cancelable: true,
- composed: true // Important for shadow DOM
- });
-
- shadowContent!.dispatchEvent(contextMenuEvent);
-
- // Wait for context menu to appear
- await new Promise(resolve => setTimeout(resolve, 100));
-
- // Check if context menu is created
- const contextMenu = document.querySelector('dees-contextmenu');
- expect(contextMenu).toBeInstanceOf(DeesContextmenu);
-
- // Check if menu items from shadow element are rendered
- const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
- expect(menuItems.length).toBeGreaterThanOrEqual(2);
-
- // Check menu item text
- const menuTexts = Array.from(menuItems).map(item =>
- item.querySelector('.menuitem-text')?.textContent
- );
- expect(menuTexts).toContain('Shadow Item 1');
- expect(menuTexts).toContain('Shadow Item 2');
-
- // Clean up
- contextMenu!.remove();
- shadowElement.remove();
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.contextmenu.chromium.ts b/test/test.contextmenu.chromium.ts
deleted file mode 100644
index 0e4e151..0000000
--- a/test/test.contextmenu.chromium.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
-
-tap.test('should show context menu with nested submenu', async () => {
- // Create a test element with context menu items
- const testDiv = document.createElement('div');
- testDiv.style.width = '200px';
- testDiv.style.height = '200px';
- testDiv.style.background = '#eee';
- testDiv.innerHTML = 'Right-click me';
-
- // Add getContextMenuItems method
- (testDiv as any).getContextMenuItems = () => {
- return [
- {
- name: 'Change Type',
- iconName: 'type',
- submenu: [
- { name: 'Paragraph', iconName: 'text', action: () => console.log('Paragraph') },
- { name: 'Heading 1', iconName: 'heading1', action: () => console.log('Heading 1') },
- { name: 'Heading 2', iconName: 'heading2', action: () => console.log('Heading 2') },
- { divider: true },
- { name: 'Code Block', iconName: 'fileCode', action: () => console.log('Code') },
- { name: 'Quote', iconName: 'quote', action: () => console.log('Quote') }
- ]
- },
- { divider: true },
- {
- name: 'Delete',
- iconName: 'trash2',
- action: () => console.log('Delete')
- }
- ];
- };
-
- document.body.appendChild(testDiv);
-
- // Simulate right-click
- const contextMenuEvent = new MouseEvent('contextmenu', {
- clientX: 100,
- clientY: 100,
- bubbles: true,
- cancelable: true
- });
-
- testDiv.dispatchEvent(contextMenuEvent);
-
- // Wait for context menu to appear
- await new Promise(resolve => setTimeout(resolve, 100));
-
- // Check if context menu is created
- const contextMenu = document.querySelector('dees-contextmenu');
- expect(contextMenu).toBeInstanceOf(DeesContextmenu);
-
- // Check if menu items are rendered
- const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
- expect(menuItems.length).toEqual(2); // "Change Type" and "Delete"
-
- // Hover over "Change Type" to trigger submenu
- const changeTypeItem = menuItems[0] as HTMLElement;
- changeTypeItem.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-
- // Wait for submenu to appear
- await new Promise(resolve => setTimeout(resolve, 300));
-
- // Check if submenu is created
- const submenus = document.querySelectorAll('dees-contextmenu');
- expect(submenus.length).toEqual(2); // Main menu and submenu
-
- // Clean up
- contextMenu!.remove();
- const submenu = submenus[1];
- if (submenu) submenu.remove();
- testDiv.remove();
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.dashboardgrid-layout.node.ts b/test/test.dashboardgrid-layout.node.ts
deleted file mode 100644
index fe4ac5a..0000000
--- a/test/test.dashboardgrid-layout.node.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { tap, expect } from '@git.zone/tstest/tapbundle';
-
-import {
- resolveWidgetPlacement,
- collectCollisions,
-} from '../ts_web/elements/dees-dashboardgrid/layout.ts';
-import type { DashboardWidget } from '../ts_web/elements/dees-dashboardgrid/types.ts';
-
-tap.test('dashboardgrid does not overlap widgets after swap attempt', async () => {
- const widgets: DashboardWidget[] = [
- { id: 'w0', x: 6, y: 5, w: 1, h: 3 },
- { id: 'w1', x: 6, y: 1, w: 1, h: 3 },
- { id: 'w2', x: 3, y: 0, w: 2, h: 2 },
- { id: 'w3', x: 9, y: 0, w: 1, h: 2 },
- { id: 'w4', x: 4, y: 3, w: 1, h: 2 },
- ];
-
- const placement = resolveWidgetPlacement(widgets, 'w0', { x: 6, y: 3 }, 12);
- expect(placement).toBeTruthy();
-
- const layout = placement!.widgets;
- for (const widget of layout) {
- const collisions = collectCollisions(layout, widget, widget.x, widget.y, widget.w, widget.h);
- expect(collisions).toBeEmptyArray();
- }
-});
-
-export default tap.start();
diff --git a/test/test.eco-catalog.chromium.ts b/test/test.eco-catalog.chromium.ts
new file mode 100644
index 0000000..49c2988
--- /dev/null
+++ b/test/test.eco-catalog.chromium.ts
@@ -0,0 +1,35 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import * as ecoCatalog from '../ts_web/index.js';
+
+tap.test('should export EcoApplauncher component', async () => {
+ expect(ecoCatalog.EcoApplauncher).toBeTypeOf('function');
+});
+
+tap.test('should export EcoScreensaver component', async () => {
+ expect(ecoCatalog.EcoScreensaver).toBeTypeOf('function');
+});
+
+tap.test('should export applauncher sub-components', async () => {
+ expect(ecoCatalog.EcoApplauncherWifimenu).toBeTypeOf('function');
+ expect(ecoCatalog.EcoApplauncherBatterymenu).toBeTypeOf('function');
+ expect(ecoCatalog.EcoApplauncherSoundmenu).toBeTypeOf('function');
+ expect(ecoCatalog.EcoApplauncherKeyboard).toBeTypeOf('function');
+ expect(ecoCatalog.EcoApplauncherPowermenu).toBeTypeOf('function');
+});
+
+tap.test('should create a working EcoApplauncher instance', async () => {
+ const applauncher: ecoCatalog.EcoApplauncher = await webhelpers.fixture(
+ webhelpers.html`Shadow DOM Content
-Right-click anywhere inside this shadow DOM
-not .divider-icon) - const hr = dividerBlock.shadowRoot?.querySelector('hr'); - expect(hr).toBeTruthy(); - - // Clean up - document.body.removeChild(dividerBlock); -}); - -tap.test('should render paragraph block using handler', async () => { - // Wait for custom element to be defined - await customElements.whenDefined('dees-wysiwyg-block'); - - // Create element and set properties BEFORE attaching to DOM - const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - // Set required handlers - paragraphBlock.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - // Set a paragraph block - paragraphBlock.block = { - id: 'test-paragraph', - type: 'paragraph', - content: 'Test paragraph content' - }; - - // Attach to DOM and wait for render - document.body.appendChild(paragraphBlock); - await paragraphBlock.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - // Check that the paragraph is rendered - const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph'); - expect(paragraphElement).toBeTruthy(); - expect(paragraphElement?.getAttribute('contenteditable')).toEqual('true'); - expect(paragraphElement?.textContent).toEqual('Test paragraph content'); - - // Clean up - document.body.removeChild(paragraphBlock); -}); - -tap.test('should render heading blocks using handler', async () => { - // Wait for custom element to be defined - await customElements.whenDefined('dees-wysiwyg-block'); - - // Test heading-1 - set properties BEFORE attaching to DOM - const heading1Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - heading1Block.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - heading1Block.block = { - id: 'test-h1', - type: 'heading-1', - content: 'Heading 1 Test' - }; - - document.body.appendChild(heading1Block); - await heading1Block.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - const h1Element = heading1Block.shadowRoot?.querySelector('.block.heading-1'); - expect(h1Element).toBeTruthy(); - expect(h1Element?.textContent).toEqual('Heading 1 Test'); - - // Clean up heading-1 - document.body.removeChild(heading1Block); - - // Test heading-2 - set properties BEFORE attaching to DOM - const heading2Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - heading2Block.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - heading2Block.block = { - id: 'test-h2', - type: 'heading-2', - content: 'Heading 2 Test' - }; - - document.body.appendChild(heading2Block); - await heading2Block.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - const h2Element = heading2Block.shadowRoot?.querySelector('.block.heading-2'); - expect(h2Element).toBeTruthy(); - expect(h2Element?.textContent).toEqual('Heading 2 Test'); - - // Clean up heading-2 - document.body.removeChild(heading2Block); -}); - -tap.test('paragraph block handler methods should work', async () => { - // Wait for custom element to be defined - await customElements.whenDefined('dees-wysiwyg-block'); - - // Create element and set properties BEFORE attaching to DOM - const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock; - - // Set required handlers - paragraphBlock.handlers = { - onInput: () => {}, - onKeyDown: () => {}, - onFocus: () => {}, - onBlur: () => {}, - onCompositionStart: () => {}, - onCompositionEnd: () => {}, - onMouseUp: () => {} - }; - - paragraphBlock.block = { - id: 'test-methods', - type: 'paragraph', - content: 'Initial content' - }; - - document.body.appendChild(paragraphBlock); - await paragraphBlock.updateComplete; - // Wait for firstUpdated to populate the container - await new Promise(resolve => setTimeout(resolve, 50)); - - // Test getContent - const content = paragraphBlock.getContent(); - expect(content).toEqual('Initial content'); - - // Test setContent - paragraphBlock.setContent('Updated content'); - await paragraphBlock.updateComplete; - expect(paragraphBlock.getContent()).toEqual('Updated content'); - - // Test that the DOM is updated - const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph'); - expect(paragraphElement?.textContent).toEqual('Updated content'); - - // Clean up - document.body.removeChild(paragraphBlock); -}); - -export default tap.start(); \ No newline at end of file diff --git a/test/test.wysiwyg-blocktype-change.chromium.ts b/test/test.wysiwyg-blocktype-change.chromium.ts deleted file mode 100644 index b5f4a5d..0000000 --- a/test/test.wysiwyg-blocktype-change.chromium.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { expect, tap } from '@git.zone/tstest/tapbundle'; -import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js'; -import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js'; - -tap.test('should change block type via context menu', async () => { - // Create WYSIWYG editor with a paragraph - const wysiwygEditor = new DeesInputWysiwyg(); - wysiwygEditor.value = '
This is a test paragraph
'; - document.body.appendChild(wysiwygEditor); - - // Wait for editor to be ready - await wysiwygEditor.updateComplete; - await new Promise(resolve => setTimeout(resolve, 100)); - - // Get the first block - const firstBlock = wysiwygEditor.blocks[0]; - expect(firstBlock.type).toEqual('paragraph'); - - // Get the block element - const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper'); - expect(firstBlockWrapper).toBeTruthy(); - - const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any; - expect(blockComponent).toBeTruthy(); - await blockComponent.updateComplete; - - // Get the editable content inside the block's shadow DOM - const editableBlock = blockComponent.shadowRoot!.querySelector('.block'); - expect(editableBlock).toBeTruthy(); - - // Simulate right-click on the editable block - const contextMenuEvent = new MouseEvent('contextmenu', { - clientX: 200, - clientY: 200, - bubbles: true, - cancelable: true, - composed: true - }); - - editableBlock!.dispatchEvent(contextMenuEvent); - - // Wait for context menu to appear - await new Promise(resolve => setTimeout(resolve, 100)); - - // Check if context menu is created - const contextMenu = document.querySelector('dees-contextmenu'); - expect(contextMenu).toBeInstanceOf(DeesContextmenu); - - // Find "Change Type" menu item - const menuItems = Array.from(contextMenu!.shadowRoot!.querySelectorAll('.menuitem')); - const changeTypeItem = menuItems.find(item => - item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type' - ); - expect(changeTypeItem).toBeTruthy(); - - // Hover over "Change Type" to trigger submenu - changeTypeItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true })); - - // Wait for submenu to appear - await new Promise(resolve => setTimeout(resolve, 300)); - - // Check if submenu is created - const allMenus = document.querySelectorAll('dees-contextmenu'); - expect(allMenus.length).toEqual(2); - - const submenu = allMenus[1]; - const submenuItems = Array.from(submenu.shadowRoot!.querySelectorAll('.menuitem')); - - // Find "Heading 1" option - const heading1Item = submenuItems.find(item => - item.querySelector('.menuitem-text')?.textContent?.trim() === 'Heading 1' - ); - expect(heading1Item).toBeTruthy(); - - // Click on "Heading 1" - (heading1Item as HTMLElement).click(); - - // Wait for menu to close and block to update - await new Promise(resolve => setTimeout(resolve, 300)); - - // Verify block type has changed - expect(wysiwygEditor.blocks[0].type).toEqual('heading-1'); - - // Verify DOM has been updated - const updatedBlockComponent = wysiwygEditor.shadowRoot! - .querySelector('.block-wrapper')! - .querySelector('dees-wysiwyg-block') as any; - - await updatedBlockComponent.updateComplete; - - const updatedBlock = updatedBlockComponent.shadowRoot!.querySelector('.block'); - expect(updatedBlock?.classList.contains('heading-1')).toEqual(true); - - // Clean up - wysiwygEditor.remove(); -}); - -export default tap.start(); \ No newline at end of file diff --git a/test/test.wysiwyg-contextmenu.chromium.ts b/test/test.wysiwyg-contextmenu.chromium.ts deleted file mode 100644 index 5a71a5a..0000000 --- a/test/test.wysiwyg-contextmenu.chromium.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { expect, tap } from '@git.zone/tstest/tapbundle'; -import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js'; -import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js'; - -tap.test('should show context menu on WYSIWYG blocks', async () => { - // Create WYSIWYG editor - const wysiwygEditor = new DeesInputWysiwyg(); - wysiwygEditor.value = 'Test paragraph
Test heading
'; - document.body.appendChild(wysiwygEditor); - - // Wait for editor to be ready - await wysiwygEditor.updateComplete; - await new Promise(resolve => setTimeout(resolve, 100)); - - // Get the first block element - const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper'); - expect(firstBlockWrapper).toBeTruthy(); - - const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any; - expect(blockComponent).toBeTruthy(); - - // Wait for block to be ready - await blockComponent.updateComplete; - - // Get the editable content inside the block's shadow DOM - const editableBlock = blockComponent.shadowRoot!.querySelector('.block'); - expect(editableBlock).toBeTruthy(); - - // Simulate right-click on the editable block - const contextMenuEvent = new MouseEvent('contextmenu', { - clientX: 200, - clientY: 200, - bubbles: true, - cancelable: true, - composed: true // Important for shadow DOM - }); - - editableBlock!.dispatchEvent(contextMenuEvent); - - // Wait for context menu to appear - await new Promise(resolve => setTimeout(resolve, 100)); - - // Check if context menu is created - const contextMenu = document.querySelector('dees-contextmenu'); - expect(contextMenu).toBeInstanceOf(DeesContextmenu); - - // Check if menu items from WYSIWYG block are rendered - const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem'); - const menuTexts = Array.from(menuItems).map(item => - item.querySelector('.menuitem-text')?.textContent?.trim() - ); - - // Should have "Change Type" and "Delete Block" items - expect(menuTexts).toContain('Change Type'); - expect(menuTexts).toContain('Delete Block'); - - // Check if "Change Type" has submenu indicator - const changeTypeItem = Array.from(menuItems).find(item => - item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type' - ); - expect(changeTypeItem?.classList.contains('has-submenu')).toEqual(true); - - // Clean up - contextMenu!.remove(); - wysiwygEditor.remove(); -}); - -export default tap.start(); \ No newline at end of file diff --git a/test/test.wysiwyg-dragdrop-simple.chromium.ts b/test/test.wysiwyg-dragdrop-simple.chromium.ts deleted file mode 100644 index 89e7dc7..0000000 --- a/test/test.wysiwyg-dragdrop-simple.chromium.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { expect, tap } from '@git.zone/tstest/tapbundle'; -import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js'; - -// Initialize the element -DeesInputWysiwyg; - -tap.test('wysiwyg drag handler initialization', async () => { - const element = document.createElement('dees-input-wysiwyg'); - document.body.appendChild(element); - - // Wait for element to be ready - await element.updateComplete; - - // Check that drag handler is initialized - expect(element.dragDropHandler).toBeTruthy(); - - // Set initial content with multiple blocks - element.blocks = [ - { id: 'block1', type: 'paragraph', content: 'First paragraph' }, - { id: 'block2', type: 'paragraph', content: 'Second paragraph' }, - ]; - element.renderBlocksProgrammatically(); - - await element.updateComplete; - - // Check that editor content ref exists - console.log('editorContentRef:', element.editorContentRef); - expect(element.editorContentRef).toBeTruthy(); - - // Check that blocks are rendered - const blockWrappers = element.shadowRoot!.querySelectorAll('.block-wrapper'); - console.log('Number of block wrappers:', blockWrappers.length); - expect(blockWrappers.length).toEqual(2); - - // Check drag handles - const dragHandles = element.shadowRoot!.querySelectorAll('.drag-handle'); - console.log('Number of drag handles:', dragHandles.length); - expect(dragHandles.length).toEqual(2); - - // Clean up - document.body.removeChild(element); -}); - -tap.test('wysiwyg drag start behavior', async () => { - const element = document.createElement('dees-input-wysiwyg'); - document.body.appendChild(element); - - await element.updateComplete; - - // Set initial content - element.blocks = [ - { id: 'block1', type: 'paragraph', content: 'Test block' }, - ]; - element.renderBlocksProgrammatically(); - - await element.updateComplete; - - const dragHandle = element.shadowRoot!.querySelector('.drag-handle') as HTMLElement; - expect(dragHandle).toBeTruthy(); - - // Check that drag handle has draggable attribute - console.log('Drag handle draggable:', dragHandle.draggable); - expect(dragHandle.draggable).toBeTrue(); - - // Test drag handler state before drag - console.log('Initial drag state:', element.dragDropHandler.dragState); - expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull(); - - // Try to manually call handleDragStart - const mockDragEvent = { - dataTransfer: { - effectAllowed: '', - setData: (type: string, data: string) => { - console.log('setData called with:', type, data); - }, - setDragImage: (img: any, x: number, y: number) => { - console.log('setDragImage called'); - } - }, - clientY: 100, - preventDefault: () => {}, - } as any; - - element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]); - - // Check drag state after drag start - console.log('Drag state after start:', element.dragDropHandler.dragState); - expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1'); - - // Clean up - element.dragDropHandler.handleDragEnd(); - document.body.removeChild(element); -}); - -export default tap.start(); \ No newline at end of file diff --git a/test/test.wysiwyg-dragdrop-visual.chromium.ts b/test/test.wysiwyg-dragdrop-visual.chromium.ts deleted file mode 100644 index b8bfcc5..0000000 --- a/test/test.wysiwyg-dragdrop-visual.chromium.ts +++ /dev/null @@ -1,133 +0,0 @@ -import { expect, tap } from '@git.zone/tstest/tapbundle'; -import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js'; - -// Initialize the element -DeesInputWysiwyg; - -tap.test('wysiwyg drag visual feedback - block movement', async () => { - const element = document.createElement('dees-input-wysiwyg'); - document.body.appendChild(element); - - await element.updateComplete; - - // Set initial content - element.blocks = [ - { id: 'block1', type: 'paragraph', content: 'Block 1' }, - { id: 'block2', type: 'paragraph', content: 'Block 2' }, - { id: 'block3', type: 'paragraph', content: 'Block 3' }, - ]; - element.renderBlocksProgrammatically(); - - await element.updateComplete; - - const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement; - const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement; - - // Manually start drag - const mockDragEvent = { - dataTransfer: { - effectAllowed: '', - setData: (type: string, data: string) => {}, - setDragImage: (img: any, x: number, y: number) => {} - }, - clientY: 50, - preventDefault: () => {}, - } as any; - - element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]); - - // Wait for dragging class - await new Promise(resolve => setTimeout(resolve, 20)); - - // Check dragging state - console.log('Block 1 classes:', block1.className); - console.log('Editor content classes:', editorContent.className); - expect(block1.classList.contains('dragging')).toBeTrue(); - expect(editorContent.classList.contains('dragging')).toBeTrue(); - - // Check drop indicator exists - const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement; - console.log('Drop indicator:', dropIndicator); - expect(dropIndicator).toBeTruthy(); - - // Test block movement calculation - console.log('Testing updateBlockPositions...'); - - // Access private method for testing - const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler); - - // Simulate dragging to different position - updateBlockPositions(150); // Move down - - // Check if blocks have move classes - const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper')); - console.log('Block classes after move:'); - blocks.forEach((block, i) => { - console.log(`Block ${i}:`, block.className, 'transform:', (block as HTMLElement).style.getPropertyValue('--drag-offset')); - }); - - // Clean up - element.dragDropHandler.handleDragEnd(); - document.body.removeChild(element); -}); - -tap.test('wysiwyg drop indicator positioning', async () => { - const element = document.createElement('dees-input-wysiwyg'); - document.body.appendChild(element); - - await element.updateComplete; - - // Set initial content - element.blocks = [ - { id: 'block1', type: 'paragraph', content: 'Paragraph 1' }, - { id: 'block2', type: 'heading-2', content: 'Heading 2' }, - ]; - element.renderBlocksProgrammatically(); - - await element.updateComplete; - - const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement; - - // Start dragging first block - const mockDragEvent = { - dataTransfer: { - effectAllowed: '', - setData: (type: string, data: string) => {}, - setDragImage: (img: any, x: number, y: number) => {} - }, - clientY: 50, - preventDefault: () => {}, - } as any; - - element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]); - - // Wait for initialization - await new Promise(resolve => setTimeout(resolve, 20)); - - // Get drop indicator - const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement; - expect(dropIndicator).toBeTruthy(); - - // Check initial display state - console.log('Drop indicator initial display:', dropIndicator.style.display); - - // Trigger updateBlockPositions to see drop indicator - const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler); - updateBlockPositions(100); - - // Check drop indicator position - console.log('Drop indicator after update:'); - console.log('- display:', dropIndicator.style.display); - console.log('- top:', dropIndicator.style.top); - console.log('- height:', dropIndicator.style.height); - - expect(dropIndicator.style.display).toEqual('block'); - expect(dropIndicator.style.top).toBeTruthy(); - expect(dropIndicator.style.height).toBeTruthy(); - - // Clean up - element.dragDropHandler.handleDragEnd(); - document.body.removeChild(element); -}); - -export default tap.start(); \ No newline at end of file diff --git a/test/test.wysiwyg-dragdrop.chromium.ts b/test/test.wysiwyg-dragdrop.chromium.ts deleted file mode 100644 index 9c29375..0000000 --- a/test/test.wysiwyg-dragdrop.chromium.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { expect, tap } from '@git.zone/tstest/tapbundle'; -import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js'; - -// Initialize the element -DeesInputWysiwyg; - -tap.test('wysiwyg drag and drop should work correctly', async () => { - const element = document.createElement('dees-input-wysiwyg'); - document.body.appendChild(element); - - // Wait for element to be ready - await element.updateComplete; - - // Set initial content with multiple blocks - element.blocks = [ - { id: 'block1', type: 'paragraph', content: 'First paragraph' }, - { id: 'block2', type: 'heading-2', content: 'Test Heading' }, - { id: 'block3', type: 'paragraph', content: 'Second paragraph' }, - ]; - element.renderBlocksProgrammatically(); - - await element.updateComplete; - // Wait for nested block components to also complete their updates - await new Promise(resolve => setTimeout(resolve, 50)); - - // Check that blocks are rendered - const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement; - expect(editorContent).toBeTruthy(); - - const blockWrappers = editorContent.querySelectorAll('.block-wrapper'); - expect(blockWrappers.length).toEqual(3); - - // Test drag handles exist for non-divider blocks - const dragHandles = editorContent.querySelectorAll('.drag-handle'); - expect(dragHandles.length).toEqual(3); - - // Get references to specific blocks - const firstBlock = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement; - const secondBlock = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement; - const firstDragHandle = firstBlock.querySelector('.drag-handle') as HTMLElement; - - expect(firstBlock).toBeTruthy(); - expect(secondBlock).toBeTruthy(); - expect(firstDragHandle).toBeTruthy(); - - // Verify drag drop handler exists - expect(element.dragDropHandler).toBeTruthy(); - expect(element.dragDropHandler.dragState).toBeTruthy(); - - // Test drag initialization - synthetic DragEvents may not fully work in all browsers - console.log('Testing drag initialization...'); - - // Create drag event - const dragStartEvent = new DragEvent('dragstart', { - dataTransfer: new DataTransfer(), - clientY: 100, - bubbles: true - }); - - // Simulate drag start - firstDragHandle.dispatchEvent(dragStartEvent); - - // Wait for setTimeout in drag start - await new Promise(resolve => setTimeout(resolve, 50)); - - // Note: Synthetic DragEvents may not fully initialize drag state in all test environments - // The test verifies the structure and that events can be dispatched - console.log('Drag state after start:', element.dragDropHandler.dragState.draggedBlockId); - - // Test drag end cleanup - const dragEndEvent = new DragEvent('dragend', { - bubbles: true - }); - - document.dispatchEvent(dragEndEvent); - - // Wait for cleanup - await new Promise(resolve => setTimeout(resolve, 150)); - - // Clean up - document.body.removeChild(element); -}); - -tap.test('wysiwyg drag and drop visual feedback', async () => { - const element = document.createElement('dees-input-wysiwyg'); - document.body.appendChild(element); - - await element.updateComplete; - - // Set initial content - element.blocks = [ - { id: 'block1', type: 'paragraph', content: 'Block 1' }, - { id: 'block2', type: 'paragraph', content: 'Block 2' }, - { id: 'block3', type: 'paragraph', content: 'Block 3' }, - ]; - element.renderBlocksProgrammatically(); - - await element.updateComplete; - // Wait for nested block components to also complete their updates - await new Promise(resolve => setTimeout(resolve, 50)); - - const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement; - const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement; - const dragHandle1 = block1.querySelector('.drag-handle') as HTMLElement; - - // Start dragging block 1 - const dragStartEvent = new DragEvent('dragstart', { - dataTransfer: new DataTransfer(), - clientY: 50, - bubbles: true - }); - - dragHandle1.dispatchEvent(dragStartEvent); - - // Wait for dragging class - await new Promise(resolve => setTimeout(resolve, 20)); - - // Simulate dragging down - const dragOverEvent = new DragEvent('dragover', { - dataTransfer: new DataTransfer(), - clientY: 150, // Move down past block 2 - bubbles: true, - cancelable: true - }); - - // Trigger the global drag over handler - element.dragDropHandler['handleGlobalDragOver'](dragOverEvent); - - // Check that transform is applied to dragged block - const transform = block1.style.transform; - console.log('Dragged block transform:', transform); - expect(transform).toContain('translateY'); - - // Check drop indicator position - const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement; - if (dropIndicator) { - const indicatorStyle = dropIndicator.style; - console.log('Drop indicator position:', indicatorStyle.top, 'display:', indicatorStyle.display); - } - - // Clean up - document.body.removeChild(element); -}); - -export default tap.start(); \ No newline at end of file diff --git a/test/test.wysiwyg-dragissue.chromium.ts b/test/test.wysiwyg-dragissue.chromium.ts deleted file mode 100644 index 6c4cff4..0000000 --- a/test/test.wysiwyg-dragissue.chromium.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { expect, tap } from '@git.zone/tstest/tapbundle'; -import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js'; - -// Initialize the element -DeesInputWysiwyg; - -tap.test('wysiwyg drag full flow without await', async () => { - const element = document.createElement('dees-input-wysiwyg'); - document.body.appendChild(element); - - await element.updateComplete; - - // Set initial content - element.blocks = [ - { id: 'block1', type: 'paragraph', content: 'Test block' }, - ]; - element.renderBlocksProgrammatically(); - - await element.updateComplete; - - // Mock drag event - const mockDragEvent = { - dataTransfer: { - effectAllowed: '', - setData: (type: string, data: string) => { - console.log('setData:', type, data); - }, - setDragImage: (img: any, x: number, y: number) => { - console.log('setDragImage'); - } - }, - clientY: 100, - preventDefault: () => {}, - } as any; - - console.log('Starting drag...'); - element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]); - console.log('Drag started'); - - // Check immediate state - expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1'); - - // Instead of await with setTimeout, use a done callback - return new Promise element
- const computedStyle = window.getComputedStyle(codeElement);
- // Font family may vary by platform, so just check it contains something
- expect(computedStyle.fontFamily).toBeTruthy();
-});
-
-tap.test('Phase 3: List block should render correctly', async () => {
- const editor: DeesInputWysiwyg = await webhelpers.fixture(
- webhelpers.html`
');
- expect(rendered).toContain('data-block-id="test-divider"');
- }
-});
-
-tap.test('Heading handlers should render with correct levels', async () => {
- const headingBlock = {
- id: 'test-h1',
- type: 'heading-1' as const,
- content: 'Test Heading'
- };
-
- const handler = BlockRegistry.getHandler('heading-1');
- expect(handler).toBeDefined();
-
- if (handler) {
- const rendered = handler.render(headingBlock, false);
- // The render() method returns the HTML template structure
- // Content is set later in setup()
- expect(rendered).toContain('class="block heading-1"');
- expect(rendered).toContain('contenteditable="true"');
- expect(rendered).toContain('data-block-id="test-h1"');
- expect(rendered).toContain('data-block-type="heading-1"');
- }
-});
-
-tap.test('getAllTypes should return all registered types', async () => {
- const allTypes = BlockRegistry.getAllTypes();
- expect(allTypes).toContain('divider');
- expect(allTypes).toContain('paragraph');
- expect(allTypes).toContain('heading-1');
- expect(allTypes).toContain('heading-2');
- expect(allTypes).toContain('heading-3');
- expect(allTypes.length).toBeGreaterThanOrEqual(5);
-});
-
-export default tap.start();
\ No newline at end of file
diff --git a/test/test.wysiwyg-selection-highlight.chromium.ts b/test/test.wysiwyg-selection-highlight.chromium.ts
deleted file mode 100644
index f212251..0000000
--- a/test/test.wysiwyg-selection-highlight.chromium.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
-
-tap.test('Selection highlighting should work consistently for all block types', async () => {
- const editor: DeesInputWysiwyg = await webhelpers.fixture(
- webhelpers.html` console.log('Power action:', e.detail.action)}
+ @menu-close=${() => console.log('Menu closed')}
+ >
+
+`;
diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-powermenu/eco-applauncher-powermenu.ts b/ts_web/elements/00group-applauncher/eco-applauncher-powermenu/eco-applauncher-powermenu.ts
new file mode 100644
index 0000000..84388f8
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-applauncher-powermenu/eco-applauncher-powermenu.ts
@@ -0,0 +1,261 @@
+import {
+ customElement,
+ DeesElement,
+ type TemplateResult,
+ html,
+ property,
+ css,
+ cssManager,
+} from '@design.estate/dees-element';
+import { DeesIcon } from '@design.estate/dees-catalog';
+import { demo } from './eco-applauncher-powermenu.demo.js';
+
+// Ensure dees-icon is registered
+DeesIcon;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'eco-applauncher-powermenu': EcoApplauncherPowermenu;
+ }
+}
+
+export type TPowerAction = 'lock' | 'lock-sleep' | 'reboot';
+
+@customElement('eco-applauncher-powermenu')
+export class EcoApplauncherPowermenu extends DeesElement {
+ public static demo = demo;
+ public static demoGroup = 'App Launcher';
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ position: relative;
+ pointer-events: none;
+ }
+
+ :host([open]) {
+ pointer-events: auto;
+ }
+
+ .menu-container {
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 10%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
+ border-radius: 12px;
+ box-shadow: ${cssManager.bdTheme(
+ '0 8px 32px rgba(0, 0, 0, 0.15)',
+ '0 8px 32px rgba(0, 0, 0, 0.4)'
+ )};
+ min-width: 200px;
+ overflow: hidden;
+ opacity: 0;
+ transform: scale(0.95) translateY(-8px);
+ transition: all 0.2s ease-out;
+ pointer-events: none;
+ }
+
+ :host([open]) .menu-container {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ pointer-events: auto;
+ }
+
+ .menu-header {
+ padding: 12px 16px;
+ border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ }
+
+ .menu-options {
+ padding: 8px 0;
+ }
+
+ .menu-option {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ cursor: pointer;
+ transition: background 0.15s ease;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ }
+
+ .menu-option:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(240 5% 15%)')};
+ }
+
+ .menu-option:active {
+ background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 18%)')};
+ }
+
+ .menu-option.danger {
+ color: ${cssManager.bdTheme('hsl(0 72% 45%)', 'hsl(0 72% 60%)')};
+ }
+
+ .menu-option.danger:hover {
+ background: ${cssManager.bdTheme('hsl(0 72% 97%)', 'hsl(0 50% 15%)')};
+ }
+
+ .option-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
+ background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 18%)')};
+ }
+
+ .menu-option.danger .option-icon {
+ background: ${cssManager.bdTheme('hsl(0 72% 94%)', 'hsl(0 50% 18%)')};
+ }
+
+ .option-text {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ .option-label {
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ .option-description {
+ font-size: 11px;
+ color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
+ }
+
+ .menu-divider {
+ height: 1px;
+ background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
+ margin: 4px 0;
+ }
+ `,
+ ];
+
+ @property({ type: Boolean, reflect: true })
+ accessor open = false;
+
+ private boundHandleClickOutside = this.handleClickOutside.bind(this);
+ private inactivityTimeout: ReturnType | null = null;
+ private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute
+ private lastActivityTime = 0;
+
+ public render(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private handleAction(action: TPowerAction): void {
+ this.dispatchEvent(new CustomEvent('power-action', {
+ detail: { action },
+ bubbles: true,
+ composed: true,
+ }));
+ this.closeMenu();
+ }
+
+ private handleClickOutside(e: MouseEvent): void {
+ if (this.open && !this.contains(e.target as Node)) {
+ this.closeMenu();
+ }
+ }
+
+ private resetInactivityTimer(): void {
+ const now = Date.now();
+ // Throttle: only reset if 5+ seconds since last reset
+ if (now - this.lastActivityTime < 5000) {
+ return;
+ }
+ this.lastActivityTime = now;
+ this.clearInactivityTimer();
+ if (this.open) {
+ this.inactivityTimeout = setTimeout(() => {
+ this.closeMenu();
+ }, this.INACTIVITY_TIMEOUT);
+ }
+ }
+
+ private clearInactivityTimer(): void {
+ if (this.inactivityTimeout) {
+ clearTimeout(this.inactivityTimeout);
+ this.inactivityTimeout = null;
+ }
+ }
+
+ private closeMenu(): void {
+ this.open = false;
+ this.dispatchEvent(new CustomEvent('menu-close', {
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ protected updated(changedProperties: Map): void {
+ if (changedProperties.has('open')) {
+ if (this.open) {
+ this.resetInactivityTimer();
+ } else {
+ this.clearInactivityTimer();
+ }
+ }
+ }
+
+ async connectedCallback(): Promise {
+ await super.connectedCallback();
+ setTimeout(() => {
+ document.addEventListener('click', this.boundHandleClickOutside);
+ }, 0);
+ }
+
+ async disconnectedCallback(): Promise {
+ await super.disconnectedCallback();
+ document.removeEventListener('click', this.boundHandleClickOutside);
+ this.clearInactivityTimer();
+ }
+}
diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-powermenu/index.ts b/ts_web/elements/00group-applauncher/eco-applauncher-powermenu/index.ts
new file mode 100644
index 0000000..8b36cfc
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-applauncher-powermenu/index.ts
@@ -0,0 +1 @@
+export * from './eco-applauncher-powermenu.js';
diff --git a/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.demo.ts b/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.demo.ts
index 9ccd9b5..6eb40ea 100644
--- a/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.demo.ts
+++ b/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.demo.ts
@@ -1,21 +1,18 @@
import { html } from '@design.estate/dees-element';
-import type { IAppIcon } from './eco-applauncher.js';
+import type { IAppIcon, ILoginConfig, ILoginCredentials, TApplauncherMode } from './eco-applauncher.js';
import type { IWifiNetwork } from '../eco-applauncher-wifimenu/index.js';
import type { IAudioDevice } from '../eco-applauncher-soundmenu/index.js';
+import '../../../views/eco-view-settings/eco-view-settings.js';
+import '../../../views/eco-view-peripherals/eco-view-peripherals.js';
+import '../../../views/eco-view-saasshare/eco-view-saasshare.js';
+import '../../../views/eco-view-system/eco-view-system.js';
+import type { EcoApplauncher } from './eco-applauncher.js';
const mockApps: IAppIcon[] = [
- { name: 'Settings', icon: 'lucide:settings', action: () => console.log('Settings clicked') },
- { name: 'Browser', icon: 'lucide:globe', action: () => console.log('Browser clicked') },
- { name: 'Terminal', icon: 'lucide:terminal', action: () => console.log('Terminal clicked') },
- { name: 'Files', icon: 'lucide:folder', action: () => console.log('Files clicked') },
- { name: 'Calendar', icon: 'lucide:calendar', action: () => console.log('Calendar clicked') },
- { name: 'Mail', icon: 'lucide:mail', action: () => console.log('Mail clicked') },
- { name: 'Music', icon: 'lucide:music', action: () => console.log('Music clicked') },
- { name: 'Photos', icon: 'lucide:image', action: () => console.log('Photos clicked') },
- { name: 'Notes', icon: 'lucide:fileText', action: () => console.log('Notes clicked') },
- { name: 'Calculator', icon: 'lucide:calculator', action: () => console.log('Calculator clicked') },
- { name: 'Weather', icon: 'lucide:cloudSun', action: () => console.log('Weather clicked') },
- { name: 'Maps', icon: 'lucide:map', action: () => console.log('Maps clicked') },
+ { name: 'SaaS Share', icon: 'lucide:share2', view: html` html`
.muted=${false}
.userName=${'John Doe'}
.notificationCount=${3}
+ @login-attempt=${handleLoginAttempt}
+ @login-success=${() => console.log('Login success event received')}
+ @login-failure=${(e: CustomEvent) => console.log('Login failure:', e.detail)}
@wifi-toggle=${(e: CustomEvent) => console.log('WiFi toggle:', e.detail)}
@network-select=${(e: CustomEvent) => console.log('Network selected:', e.detail)}
@wifi-settings-click=${() => console.log('WiFi settings clicked')}
@@ -69,3 +97,37 @@ export const demo = () => html`
>
`;
+demoHome.demoTitle = 'Home Mode';
+
+// Login mode demo
+const demoLogin = () => html`
+
+
+ console.log('Login success event received')}
+ @login-failure=${(e: CustomEvent) => console.log('Login failure:', e.detail)}
+ >
+
+`;
+demoLogin.demoTitle = 'Login Mode';
+
+// Export array of demo functions
+export const demo = [demoHome, demoLogin];
diff --git a/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts b/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts
index 37e2cf8..e7c8ada 100644
--- a/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts
+++ b/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts
@@ -14,6 +14,9 @@ import { EcoApplauncherWifimenu, type IWifiNetwork } from '../eco-applauncher-wi
import { EcoApplauncherBatterymenu } from '../eco-applauncher-batterymenu/index.js';
import { EcoApplauncherSoundmenu, type IAudioDevice } from '../eco-applauncher-soundmenu/index.js';
import { EcoApplauncherKeyboard } from '../eco-applauncher-keyboard/index.js';
+import { EcoApplauncherPowermenu, type TPowerAction } from '../eco-applauncher-powermenu/index.js';
+import { EcoViewHome } from '../../../views/eco-view-home/index.js';
+import { EcoViewLogin, type ILoginConfig, type ILoginCredentials } from '../../../views/eco-view-login/index.js';
// Ensure components are registered
DeesIcon;
@@ -21,6 +24,9 @@ EcoApplauncherWifimenu;
EcoApplauncherBatterymenu;
EcoApplauncherSoundmenu;
EcoApplauncherKeyboard;
+EcoApplauncherPowermenu;
+EcoViewHome;
+EcoViewLogin;
declare global {
interface HTMLElementTagNameMap {
@@ -28,12 +34,18 @@ declare global {
}
}
+export type TApplauncherMode = 'login' | 'home';
+
export interface IAppIcon {
name: string;
icon: string;
action?: () => void;
+ view?: TemplateResult;
}
+export type { ILoginConfig, ILoginCredentials } from '../../../views/eco-view-login/index.js';
+export type { TPowerAction } from '../eco-applauncher-powermenu/index.js';
+
export interface IStatusBarConfig {
showTime?: boolean;
showNetwork?: boolean;
@@ -153,6 +165,10 @@ export class EcoApplauncher extends DeesElement {
background: ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 15%)')};
}
+ .top-icon-button.active {
+ background: ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 18%)')};
+ }
+
.user-avatar {
width: 32px;
height: 32px;
@@ -195,9 +211,6 @@ export class EcoApplauncher extends DeesElement {
.apps-area {
flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
padding: 48px;
overflow-y: auto;
}
@@ -206,7 +219,6 @@ export class EcoApplauncher extends DeesElement {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 32px;
- max-width: 800px;
width: 100%;
}
@@ -415,6 +427,18 @@ export class EcoApplauncher extends DeesElement {
pointer-events: none;
}
+ .topbar-menu-wrapper {
+ position: relative;
+ }
+
+ .topbar-menu-popup {
+ position: absolute;
+ top: calc(100% + 8px);
+ right: 0;
+ z-index: 100;
+ pointer-events: none;
+ }
+
.keyboard-area {
flex-shrink: 0;
height: 0;
@@ -430,6 +454,53 @@ export class EcoApplauncher extends DeesElement {
overflow: visible;
}
+ .view-area {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
+ .view-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 24px;
+ background: ${cssManager.bdTheme('hsl(220 15% 94%)', 'hsl(240 6% 8%)')};
+ border-bottom: 1px solid ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 15%)')};
+ flex-shrink: 0;
+ }
+
+ .back-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 8px 14px;
+ background: ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 14%)')};
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background 0.15s ease;
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+ font-size: 13px;
+ font-weight: 500;
+ }
+
+ .back-button:hover {
+ background: ${cssManager.bdTheme('hsl(220 15% 82%)', 'hsl(240 5% 18%)')};
+ }
+
+ .view-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ }
+
+ .view-content {
+ flex: 1;
+ overflow: auto;
+ }
+
@media (max-width: 600px) {
.apps-area {
padding: 24px;
@@ -462,6 +533,16 @@ export class EcoApplauncher extends DeesElement {
`,
];
+ @property({ type: String })
+ accessor mode: TApplauncherMode = 'home';
+
+ @property({ type: Object })
+ accessor loginConfig: ILoginConfig = {
+ allowedMethods: ['pin', 'password', 'qr'],
+ pinLength: 4,
+ welcomeMessage: 'Welcome',
+ };
+
@property({ type: Array })
accessor apps: IAppIcon[] = [];
@@ -512,9 +593,18 @@ export class EcoApplauncher extends DeesElement {
@state()
accessor soundMenuOpen = false;
+ @state()
+ accessor powerMenuOpen = false;
+
@state()
accessor keyboardVisible = false;
+ @state()
+ accessor activeView: TemplateResult | null = null;
+
+ @state()
+ accessor activeViewName: string | null = null;
+
@property({ type: Array })
accessor networks: IWifiNetwork[] = [];
@@ -552,12 +642,8 @@ export class EcoApplauncher extends DeesElement {
public render(): TemplateResult {
return html`
- ${this.renderTopBar()}
-
-
- ${this.apps.map((app) => this.renderAppIcon(app))}
-
-
+ ${this.mode === 'login' ? '' : this.renderTopBar()}
+ ${this.renderMainContent()}
+ `;
+ }
+
+ private renderHomeView(): TemplateResult {
+ return html`
+
`;
@@ -831,15 +990,91 @@ export class EcoApplauncher extends DeesElement {
composed: true,
})
);
+
+ // If app has a view, open it inside the applauncher
+ if (app.view) {
+ this.activeView = app.view;
+ this.activeViewName = app.name;
+ return;
+ }
+
+ // Otherwise execute the action
if (app.action) {
app.action();
}
}
+ private handleHomeAppClick(e: CustomEvent): void {
+ const app = e.detail.app as IAppIcon;
+ this.handleAppClick(app);
+ }
+
+ private handleLoginAttempt(e: CustomEvent): void {
+ const credentials = e.detail as ILoginCredentials;
+ // Dispatch event for parent to handle validation
+ this.dispatchEvent(new CustomEvent('login-attempt', {
+ detail: credentials,
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ /**
+ * Set the login result after validation
+ * @param success Whether login was successful
+ * @param errorMessage Optional error message to display
+ */
+ public setLoginResult(success: boolean, errorMessage?: string): void {
+ const loginView = this.shadowRoot?.querySelector('eco-view-login') as EcoViewLogin | null;
+
+ if (success) {
+ this.mode = 'home';
+ this.dispatchEvent(new CustomEvent('login-success', {
+ bubbles: true,
+ composed: true,
+ }));
+ } else {
+ if (loginView && errorMessage) {
+ loginView.showErrorMessage(errorMessage);
+ }
+ this.dispatchEvent(new CustomEvent('login-failure', {
+ detail: { error: errorMessage },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+ }
+
+ /**
+ * Switch to login mode
+ */
+ public showLogin(): void {
+ this.mode = 'login';
+ this.activeView = null;
+ this.activeViewName = null;
+ }
+
+ /**
+ * Switch to home mode
+ */
+ public showHome(): void {
+ this.mode = 'home';
+ }
+
+ private handleBackClick(): void {
+ this.activeView = null;
+ this.activeViewName = null;
+ this.dispatchEvent(new CustomEvent('view-close', {
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
private handleNetworkClick(e: MouseEvent): void {
e.stopPropagation();
this.batteryMenuOpen = false;
this.soundMenuOpen = false;
+ this.powerMenuOpen = false;
this.wifiMenuOpen = !this.wifiMenuOpen;
}
@@ -847,6 +1082,7 @@ export class EcoApplauncher extends DeesElement {
e.stopPropagation();
this.wifiMenuOpen = false;
this.soundMenuOpen = false;
+ this.powerMenuOpen = false;
this.batteryMenuOpen = !this.batteryMenuOpen;
}
@@ -854,9 +1090,18 @@ export class EcoApplauncher extends DeesElement {
e.stopPropagation();
this.wifiMenuOpen = false;
this.batteryMenuOpen = false;
+ this.powerMenuOpen = false;
this.soundMenuOpen = !this.soundMenuOpen;
}
+ private handlePowerClick(e: MouseEvent): void {
+ e.stopPropagation();
+ this.wifiMenuOpen = false;
+ this.batteryMenuOpen = false;
+ this.soundMenuOpen = false;
+ this.powerMenuOpen = !this.powerMenuOpen;
+ }
+
private handleWifiMenuClose(): void {
this.wifiMenuOpen = false;
}
@@ -869,6 +1114,19 @@ export class EcoApplauncher extends DeesElement {
this.soundMenuOpen = false;
}
+ private handlePowerMenuClose(): void {
+ this.powerMenuOpen = false;
+ }
+
+ private handlePowerAction(e: CustomEvent): void {
+ const action = e.detail.action as TPowerAction;
+ this.dispatchEvent(new CustomEvent('power-action', {
+ detail: { action },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
private handleVolumeChange(e: CustomEvent): void {
this.soundLevel = e.detail.volume;
this.dispatchEvent(new CustomEvent('volume-change', {
@@ -953,6 +1211,7 @@ export class EcoApplauncher extends DeesElement {
this.wifiMenuOpen = false;
this.batteryMenuOpen = false;
this.soundMenuOpen = false;
+ this.powerMenuOpen = false;
}
this.dispatchEvent(new CustomEvent('keyboard-toggle', {
detail: { visible: this.keyboardVisible },
diff --git a/ts_web/elements/00group-applauncher/index.ts b/ts_web/elements/00group-applauncher/index.ts
index 1ce25b4..958b416 100644
--- a/ts_web/elements/00group-applauncher/index.ts
+++ b/ts_web/elements/00group-applauncher/index.ts
@@ -4,5 +4,4 @@ export * from './eco-applauncher-wifimenu/index.js';
export * from './eco-applauncher-batterymenu/index.js';
export * from './eco-applauncher-soundmenu/index.js';
export * from './eco-applauncher-keyboard/index.js';
-export * from './eco-settings/index.js';
-export * from './eco-peripherals/index.js';
+export * from './eco-applauncher-powermenu/index.js';
diff --git a/ts_web/views/eco-view-home/eco-view-home.demo.ts b/ts_web/views/eco-view-home/eco-view-home.demo.ts
new file mode 100644
index 0000000..1295645
--- /dev/null
+++ b/ts_web/views/eco-view-home/eco-view-home.demo.ts
@@ -0,0 +1,31 @@
+import { html } from '@design.estate/dees-element';
+import type { IAppIcon } from './eco-view-home.js';
+
+const mockApps: IAppIcon[] = [
+ { name: 'SaaS Share', icon: 'lucide:share2' },
+ { name: 'System', icon: 'lucide:activity' },
+ { name: 'Peripherals', icon: 'lucide:monitor' },
+ { name: 'Settings', icon: 'lucide:settings' },
+ { name: 'Files', icon: 'lucide:folder' },
+ { name: 'Terminal', icon: 'lucide:terminal' },
+ { name: 'Browser', icon: 'lucide:globe' },
+ { name: 'Camera', icon: 'lucide:camera' },
+];
+
+export const demo = () => html`
+
+
+ console.log('App clicked:', e.detail.app)}
+ >
+
+`;
diff --git a/ts_web/views/eco-view-home/eco-view-home.ts b/ts_web/views/eco-view-home/eco-view-home.ts
new file mode 100644
index 0000000..c03b44d
--- /dev/null
+++ b/ts_web/views/eco-view-home/eco-view-home.ts
@@ -0,0 +1,157 @@
+import {
+ customElement,
+ DeesElement,
+ type TemplateResult,
+ html,
+ property,
+ css,
+ cssManager,
+} from '@design.estate/dees-element';
+import { DeesIcon } from '@design.estate/dees-catalog';
+
+// Ensure icon component is registered
+DeesIcon;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'eco-view-home': EcoViewHome;
+ }
+}
+
+export interface IAppIcon {
+ name: string;
+ icon: string;
+ action?: () => void;
+ view?: TemplateResult;
+}
+
+@customElement('eco-view-home')
+export class EcoViewHome extends DeesElement {
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ }
+
+ .apps-area {
+ padding: 48px;
+ min-height: 100%;
+ box-sizing: border-box;
+ }
+
+ .apps-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+ gap: 32px;
+ width: 100%;
+ }
+
+ .app-icon {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ border-radius: 16px;
+ cursor: pointer;
+ transition: background 0.2s ease, transform 0.15s ease;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ .app-icon:hover {
+ background: ${cssManager.bdTheme('hsl(220 15% 92%)', 'hsl(240 5% 12%)')};
+ }
+
+ .app-icon:active {
+ transform: scale(0.95);
+ background: ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 16%)')};
+ }
+
+ .app-icon-circle {
+ width: 64px;
+ height: 64px;
+ border-radius: 16px;
+ background: ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 15%)')};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 80%)')};
+ }
+
+ .app-icon-circle dees-icon {
+ --dees-icon-size: 28px;
+ }
+
+ .app-icon-name {
+ font-size: 13px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 85%)')};
+ text-align: center;
+ max-width: 90px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ @media (max-width: 600px) {
+ .apps-area {
+ padding: 24px;
+ }
+
+ .apps-grid {
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+ gap: 16px;
+ }
+
+ .app-icon-circle {
+ width: 56px;
+ height: 56px;
+ font-size: 24px;
+ }
+
+ .app-icon-name {
+ font-size: 12px;
+ }
+ }
+ `,
+ ];
+
+ @property({ type: Array })
+ accessor apps: IAppIcon[] = [];
+
+ public render(): TemplateResult {
+ return html`
+
+
+ ${this.apps.map((app) => this.renderAppIcon(app))}
+
+
+ `;
+ }
+
+ private renderAppIcon(app: IAppIcon): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private handleAppClick(app: IAppIcon): void {
+ this.dispatchEvent(
+ new CustomEvent('app-click', {
+ detail: { app },
+ bubbles: true,
+ composed: true,
+ })
+ );
+ }
+}
diff --git a/ts_web/views/eco-view-home/index.ts b/ts_web/views/eco-view-home/index.ts
new file mode 100644
index 0000000..453039d
--- /dev/null
+++ b/ts_web/views/eco-view-home/index.ts
@@ -0,0 +1 @@
+export * from './eco-view-home.js';
diff --git a/ts_web/views/eco-view-login/eco-view-login.demo.ts b/ts_web/views/eco-view-login/eco-view-login.demo.ts
new file mode 100644
index 0000000..28d4149
--- /dev/null
+++ b/ts_web/views/eco-view-login/eco-view-login.demo.ts
@@ -0,0 +1,48 @@
+import { html } from '@design.estate/dees-element';
+import type { ILoginConfig, ILoginCredentials } from './eco-view-login.js';
+
+const handleLoginAttempt = (e: CustomEvent) => {
+ const { method, value } = e.detail;
+ console.log(`Login attempt via ${method}:`, value);
+
+ // Demo: Show success for PIN "1234" or password "demo"
+ const loginView = e.target as HTMLElement & { showErrorMessage: (msg: string) => void; clearInput: () => void };
+
+ if ((method === 'pin' && value === '1234') || (method === 'password' && value === 'demo')) {
+ console.log('Login successful!');
+ alert('Login successful! (Demo)');
+ loginView.clearInput();
+ } else {
+ loginView.showErrorMessage('Invalid credentials. Try PIN: 1234 or Password: demo');
+ }
+};
+
+const pinOnlyConfig: ILoginConfig = {
+ allowedMethods: ['pin'],
+ pinLength: 4,
+ welcomeMessage: 'Enter PIN',
+};
+
+const allMethodsConfig: ILoginConfig = {
+ allowedMethods: ['pin', 'password', 'qr'],
+ pinLength: 6,
+ welcomeMessage: 'Sign In',
+};
+
+export const demo = () => html`
+
+
+ 
`
+ : html`${this.config.welcomeMessage || 'Welcome'}
+ ${this.config.subtitle || 'Sign in to continue'}
+
+
+ ${this.config.allowedMethods.length > 1 ? this.renderMethodSelector() : ''}
+
+
+
+
+ ${this.getAuthTitle()}
+ ${this.showError ? html`` : ''}
+ ${this.selectedMethod === 'pin' ? this.renderPinInput(effectivePinLength) : ''}
+ ${this.selectedMethod === 'password' ? this.renderPasswordInput() : ''}
+ ${this.selectedMethod === 'qr' ? this.renderQrCode() : ''}
+
+
+
+ `;
+ }
+
+ private getAuthTitle(): string {
+ switch (this.selectedMethod) {
+ case 'pin':
+ return 'Enter your PIN';
+ case 'password':
+ return 'Enter your password';
+ case 'qr':
+ return 'Scan to sign in';
+ default:
+ return 'Sign in';
+ }
+ }
+
+ private renderMethodSelector(): TemplateResult {
+ const methods: Array<{ id: TAuthMethod; icon: string; name: string; description: string }> = [
+ { id: 'pin', icon: 'lucide:keySquare', name: 'PIN Code', description: 'Quick numeric access' },
+ { id: 'password', icon: 'lucide:key', name: 'Password', description: 'Traditional password' },
+ { id: 'qr', icon: 'lucide:qrCode', name: 'QR Code', description: 'Scan with mobile app' },
+ ];
+
+ const availableMethods = methods.filter((m) => this.config.allowedMethods.includes(m.id));
+
+ return html`
+
+ Sign in method
+ ${availableMethods.map((method) => html`
+ this.selectMethod(method.id)}
+ >
+
+
+ ${method.name}
+ ${method.description}
+
+
+ ${this.selectedMethod === method.id
+ ? html`
`
+ : html`QR Code`
+ }
+
+
+ Open your authenticator app and scan this code to sign in securely without typing a password.
+
+
+ `;
+ }
+
+ private selectMethod(method: TAuthMethod): void {
+ this.selectedMethod = method;
+ this.clearError();
+ this.pinValue = '';
+ this.passwordValue = '';
+ }
+
+ private handlePinInput(digit: string): void {
+ this.clearError();
+ const maxLength = this.config.pinLength || 4;
+ if (this.pinValue.length < maxLength) {
+ this.pinValue += digit;
+ this.dispatchKeyPress(digit);
+ }
+ }
+
+ private handleBackspace(): void {
+ this.clearError();
+ if (this.pinValue.length > 0) {
+ this.pinValue = this.pinValue.slice(0, -1);
+ this.dispatchEvent(new CustomEvent('backspace', {
+ bubbles: true,
+ composed: true,
+ }));
+ }
+ }
+
+ private handlePinSubmit(): void {
+ if (this.pinValue.length === 0) {
+ this.showErrorMessage('Please enter your PIN');
+ return;
+ }
+
+ this.dispatchLoginAttempt('pin', this.pinValue);
+ }
+
+ private handlePasswordInput(e: InputEvent): void {
+ this.clearError();
+ const input = e.target as HTMLInputElement;
+ this.passwordValue = input.value;
+ }
+
+ private handlePasswordKeydown(e: KeyboardEvent): void {
+ if (e.key === 'Enter') {
+ this.handlePasswordSubmit();
+ }
+ }
+
+ private handlePasswordSubmit(): void {
+ if (this.passwordValue.length === 0) {
+ this.showErrorMessage('Please enter your password');
+ return;
+ }
+
+ this.dispatchLoginAttempt('password', this.passwordValue);
+ }
+
+ private togglePasswordVisibility(): void {
+ this.showPassword = !this.showPassword;
+ }
+
+ private dispatchKeyPress(key: string): void {
+ this.dispatchEvent(new CustomEvent('key-press', {
+ detail: { key },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private dispatchLoginAttempt(method: TAuthMethod, value: string): void {
+ this.dispatchEvent(new CustomEvent('login-attempt', {
+ detail: { method, value } as ILoginCredentials,
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ public showErrorMessage(message: string): void {
+ this.error = message;
+ this.showError = true;
+ }
+
+ public clearError(): void {
+ this.error = '';
+ this.showError = false;
+ }
+
+ public clearInput(): void {
+ this.pinValue = '';
+ this.passwordValue = '';
+ }
+}
diff --git a/ts_web/views/eco-view-login/index.ts b/ts_web/views/eco-view-login/index.ts
new file mode 100644
index 0000000..e078d7a
--- /dev/null
+++ b/ts_web/views/eco-view-login/index.ts
@@ -0,0 +1 @@
+export * from './eco-view-login.js';
diff --git a/ts_web/views/eco-view-peripherals/eco-view-peripherals.demo.ts b/ts_web/views/eco-view-peripherals/eco-view-peripherals.demo.ts
index 26ae86d..9bd18ed 100644
--- a/ts_web/views/eco-view-peripherals/eco-view-peripherals.demo.ts
+++ b/ts_web/views/eco-view-peripherals/eco-view-peripherals.demo.ts
@@ -4,18 +4,18 @@ export const demo = () => html`
- console.log('Device selected:', e.detail)}
@scan-start=${() => console.log('Scanning started')}
@scan-complete=${() => console.log('Scanning complete')}
- >
+ >
`;
diff --git a/ts_web/views/eco-view-peripherals/eco-view-peripherals.ts b/ts_web/views/eco-view-peripherals/eco-view-peripherals.ts
index f70df0c..c5e2884 100644
--- a/ts_web/views/eco-view-peripherals/eco-view-peripherals.ts
+++ b/ts_web/views/eco-view-peripherals/eco-view-peripherals.ts
@@ -9,8 +9,8 @@ import {
state,
} from '@design.estate/dees-element';
import { DeesAppuiSecondarymenu, DeesIcon } from '@design.estate/dees-catalog';
-import type { ISecondaryMenuGroup, ISecondaryMenuItem } from '../../interfaces/secondarymenu.js';
-import { demo } from './eco-peripherals.demo.js';
+import type { ISecondaryMenuGroup, ISecondaryMenuItem } from '../../elements/interfaces/secondarymenu.js';
+import { demo } from './eco-view-peripherals.demo.js';
// Ensure components are registered
DeesAppuiSecondarymenu;
@@ -18,7 +18,7 @@ DeesIcon;
declare global {
interface HTMLElementTagNameMap {
- 'eco-peripherals': EcoPeripherals;
+ 'eco-view-peripherals': EcoViewPeripherals;
}
}
@@ -47,10 +47,10 @@ export interface IPeripheralDevice {
isDefault?: boolean;
}
-@customElement('eco-peripherals')
-export class EcoPeripherals extends DeesElement {
+@customElement('eco-view-peripherals')
+export class EcoViewPeripherals extends DeesElement {
public static demo = demo;
- public static demoGroup = 'App Launcher';
+ public static demoGroup = 'Views';
public static styles = [
cssManager.defaultStyles,
diff --git a/ts_web/views/eco-view-peripherals/index.ts b/ts_web/views/eco-view-peripherals/index.ts
index 030b4cb..3c6d074 100644
--- a/ts_web/views/eco-view-peripherals/index.ts
+++ b/ts_web/views/eco-view-peripherals/index.ts
@@ -1 +1 @@
-export * from './eco-peripherals.js';
+export * from './eco-view-peripherals.js';
diff --git a/ts_web/views/eco-view-saasshare/eco-view-saasshare.demo.ts b/ts_web/views/eco-view-saasshare/eco-view-saasshare.demo.ts
new file mode 100644
index 0000000..2f7e663
--- /dev/null
+++ b/ts_web/views/eco-view-saasshare/eco-view-saasshare.demo.ts
@@ -0,0 +1,20 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+
+
+ console.log('Request approved:', e.detail)}
+ @request-denied=${(e: CustomEvent) => console.log('Request denied:', e.detail)}
+ >
+
+`;
diff --git a/ts_web/views/eco-view-saasshare/eco-view-saasshare.ts b/ts_web/views/eco-view-saasshare/eco-view-saasshare.ts
new file mode 100644
index 0000000..5b289d3
--- /dev/null
+++ b/ts_web/views/eco-view-saasshare/eco-view-saasshare.ts
@@ -0,0 +1,1288 @@
+import {
+ customElement,
+ DeesElement,
+ type TemplateResult,
+ html,
+ property,
+ css,
+ cssManager,
+ state,
+} from '@design.estate/dees-element';
+import { DeesAppuiSecondarymenu, DeesIcon } from '@design.estate/dees-catalog';
+import type { ISecondaryMenuGroup, ISecondaryMenuItem } from '../../elements/interfaces/secondarymenu.js';
+import { demo } from './eco-view-saasshare.demo.js';
+
+// Ensure components are registered
+DeesAppuiSecondarymenu;
+DeesIcon;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'eco-view-saasshare': EcoViewSaasshare;
+ }
+}
+
+export type TSharePanel =
+ | 'apps'
+ | 'devices'
+ | 'permissions'
+ | 'requests'
+ | 'activity'
+ | 'security';
+
+export type TPermissionType =
+ | 'print'
+ | 'scan'
+ | 'storage'
+ | 'camera'
+ | 'audio'
+ | 'display'
+ | 'network';
+
+export interface ISaasApp {
+ id: string;
+ name: string;
+ domain: string;
+ icon?: string;
+ color?: string;
+ verified: boolean;
+ lastAccess?: Date;
+ permissions: ISaasPermission[];
+}
+
+export interface ISaasPermission {
+ type: TPermissionType;
+ deviceId?: string;
+ deviceName?: string;
+ granted: boolean;
+ grantedAt?: Date;
+ expiresAt?: Date;
+}
+
+export interface IAccessRequest {
+ id: string;
+ appId: string;
+ appName: string;
+ appDomain: string;
+ permissionType: TPermissionType;
+ deviceId?: string;
+ deviceName?: string;
+ requestedAt: Date;
+ status: 'pending' | 'approved' | 'denied';
+}
+
+export interface IAccessActivity {
+ id: string;
+ appId: string;
+ appName: string;
+ permissionType: TPermissionType;
+ deviceName?: string;
+ action: string;
+ timestamp: Date;
+}
+
+@customElement('eco-view-saasshare')
+export class EcoViewSaasshare extends DeesElement {
+ public static demo = demo;
+ public static demoGroup = 'Views';
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: ${cssManager.bdTheme('#f5f5f7', 'hsl(240 6% 10%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .share-container {
+ display: flex;
+ height: 100%;
+ }
+
+ dees-appui-secondarymenu {
+ flex-shrink: 0;
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
+ border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 15%)')};
+ }
+
+ .content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 32px 48px;
+ }
+
+ .panel-header {
+ margin-bottom: 32px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ }
+
+ .panel-header-left {
+ flex: 1;
+ }
+
+ .panel-title {
+ font-size: 28px;
+ font-weight: 600;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ margin-bottom: 8px;
+ }
+
+ .panel-description {
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ }
+
+ .header-action {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 20px;
+ background: hsl(217 91% 60%);
+ color: white;
+ border: none;
+ border-radius: 10px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background 0.15s ease;
+ }
+
+ .header-action:hover {
+ background: hsl(217 91% 55%);
+ }
+
+ .section {
+ background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+ border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ border-radius: 12px;
+ margin-bottom: 24px;
+ overflow: hidden;
+ }
+
+ .section-title {
+ padding: 16px 20px 12px;
+ font-size: 13px;
+ font-weight: 600;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .section-count {
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
+ padding: 2px 8px;
+ border-radius: 10px;
+ font-size: 12px;
+ font-weight: 600;
+ }
+
+ .app-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px;
+ border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+ transition: background 0.15s ease;
+ cursor: pointer;
+ }
+
+ .app-item:first-child {
+ border-top: none;
+ }
+
+ .app-item:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(240 5% 14%)')};
+ }
+
+ .app-left {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ }
+
+ .app-icon {
+ width: 44px;
+ height: 44px;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 20px;
+ font-weight: 600;
+ }
+
+ .app-info {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .app-name {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 15px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ }
+
+ .verified-badge {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 8px;
+ background: hsl(142 71% 45% / 0.15);
+ color: hsl(142 71% 40%);
+ border-radius: 4px;
+ font-size: 11px;
+ font-weight: 600;
+ }
+
+ .app-domain {
+ font-size: 13px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+ }
+
+ .app-right {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ }
+
+ .permission-badges {
+ display: flex;
+ gap: 6px;
+ }
+
+ .permission-badge {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
+ background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 18%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ }
+
+ .permission-badge.active {
+ background: hsl(217 91% 60% / 0.15);
+ color: hsl(217 91% 55%);
+ }
+
+ .last-access {
+ font-size: 12px;
+ color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
+ min-width: 100px;
+ text-align: right;
+ }
+
+ .request-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px;
+ border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+ background: ${cssManager.bdTheme('hsl(45 100% 97%)', 'hsl(45 30% 12%)')};
+ }
+
+ .request-item:first-child {
+ border-top: none;
+ }
+
+ .request-info {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .request-title {
+ font-size: 14px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ }
+
+ .request-detail {
+ font-size: 13px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+ }
+
+ .request-actions {
+ display: flex;
+ gap: 8px;
+ }
+
+ .btn {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 16px;
+ border: none;
+ border-radius: 8px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ }
+
+ .btn-approve {
+ background: hsl(142 71% 45%);
+ color: white;
+ }
+
+ .btn-approve:hover {
+ background: hsl(142 71% 40%);
+ }
+
+ .btn-deny {
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+ }
+
+ .btn-deny:hover {
+ background: hsl(0 72% 51%);
+ color: white;
+ }
+
+ .device-group {
+ margin-bottom: 24px;
+ }
+
+ .device-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 16px 20px;
+ background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(240 5% 14%)')};
+ border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+ }
+
+ .device-icon {
+ width: 36px;
+ height: 36px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+ }
+
+ .device-info h4 {
+ margin: 0;
+ font-size: 15px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ }
+
+ .device-info span {
+ font-size: 13px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+ }
+
+ .device-apps {
+ padding: 0;
+ }
+
+ .device-app {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 20px 12px 68px;
+ border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+ }
+
+ .device-app:first-child {
+ border-top: none;
+ }
+
+ .device-app-name {
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+ }
+
+ .toggle-switch {
+ position: relative;
+ width: 44px;
+ height: 24px;
+ background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+ border-radius: 12px;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ }
+
+ .toggle-switch.active {
+ background: hsl(217 91% 60%);
+ }
+
+ .toggle-switch::after {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 20px;
+ height: 20px;
+ background: white;
+ border-radius: 50%;
+ transition: transform 0.2s ease;
+ box-shadow: ${cssManager.bdTheme('0 1px 3px rgba(0,0,0,0.2)', 'none')};
+ }
+
+ .toggle-switch.active::after {
+ transform: translateX(20px);
+ }
+
+ .activity-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 14px;
+ padding: 14px 20px;
+ border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+ }
+
+ .activity-item:first-child {
+ border-top: none;
+ }
+
+ .activity-icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 18%)')};
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+ flex-shrink: 0;
+ }
+
+ .activity-content {
+ flex: 1;
+ }
+
+ .activity-title {
+ font-size: 14px;
+ color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+ margin-bottom: 2px;
+ }
+
+ .activity-title strong {
+ font-weight: 600;
+ }
+
+ .activity-time {
+ font-size: 12px;
+ color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
+ }
+
+ .settings-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 14px 20px;
+ border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+ }
+
+ .settings-item:first-child {
+ border-top: none;
+ }
+
+ .item-left {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ }
+
+ .item-icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ }
+
+ .item-icon.blue { background: hsl(217 91% 60%); }
+ .item-icon.green { background: hsl(142 71% 45%); }
+ .item-icon.orange { background: hsl(25 95% 53%); }
+ .item-icon.red { background: hsl(0 72% 51%); }
+ .item-icon.purple { background: hsl(262 83% 58%); }
+ .item-icon.gray { background: hsl(220 9% 46%); }
+
+ .item-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ .item-label {
+ font-size: 15px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ }
+
+ .item-sublabel {
+ font-size: 13px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+ }
+
+ .empty-state {
+ text-align: center;
+ padding: 48px 20px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+ }
+
+ .empty-state dees-icon {
+ margin-bottom: 16px;
+ opacity: 0.5;
+ }
+
+ .empty-state h3 {
+ margin: 0 0 8px;
+ font-size: 16px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 70%)')};
+ }
+
+ .empty-state p {
+ margin: 0;
+ font-size: 14px;
+ }
+
+ .permission-type-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 14px 20px;
+ border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+ }
+
+ .permission-type-row:first-child {
+ border-top: none;
+ }
+
+ .permission-type-info {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ }
+
+ .permission-type-details h4 {
+ margin: 0;
+ font-size: 15px;
+ font-weight: 500;
+ color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+ }
+
+ .permission-type-details span {
+ font-size: 13px;
+ color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+ }
+
+ .permission-apps-count {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 12px;
+ background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 18%)')};
+ border-radius: 6px;
+ font-size: 13px;
+ color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
+ cursor: pointer;
+ transition: background 0.15s ease;
+ }
+
+ .permission-apps-count:hover {
+ background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 22%)')};
+ }
+ `,
+ ];
+
+ @property({ type: String })
+ accessor activePanel: TSharePanel = 'apps';
+
+ @state()
+ accessor saasApps: ISaasApp[] = [
+ {
+ id: 'google-docs',
+ name: 'Google Docs',
+ domain: 'docs.google.com',
+ color: '#4285F4',
+ verified: true,
+ lastAccess: new Date(Date.now() - 1000 * 60 * 5),
+ permissions: [
+ { type: 'print', deviceName: 'HP LaserJet Pro', granted: true },
+ { type: 'storage', deviceName: 'Synology NAS', granted: true },
+ ],
+ },
+ {
+ id: 'figma',
+ name: 'Figma',
+ domain: 'figma.com',
+ color: '#F24E1E',
+ verified: true,
+ lastAccess: new Date(Date.now() - 1000 * 60 * 30),
+ permissions: [
+ { type: 'display', granted: true },
+ ],
+ },
+ {
+ id: 'zoom',
+ name: 'Zoom',
+ domain: 'zoom.us',
+ color: '#2D8CFF',
+ verified: true,
+ lastAccess: new Date(Date.now() - 1000 * 60 * 60 * 2),
+ permissions: [
+ { type: 'camera', deviceName: 'Logitech C920', granted: true },
+ { type: 'audio', deviceName: 'Built-in Microphone', granted: true },
+ { type: 'display', granted: true },
+ ],
+ },
+ {
+ id: 'notion',
+ name: 'Notion',
+ domain: 'notion.so',
+ color: '#000000',
+ verified: true,
+ lastAccess: new Date(Date.now() - 1000 * 60 * 60 * 24),
+ permissions: [
+ { type: 'print', deviceName: 'HP LaserJet Pro', granted: true },
+ ],
+ },
+ {
+ id: 'dropbox',
+ name: 'Dropbox',
+ domain: 'dropbox.com',
+ color: '#0061FF',
+ verified: true,
+ lastAccess: new Date(Date.now() - 1000 * 60 * 60 * 48),
+ permissions: [
+ { type: 'storage', deviceName: 'Synology NAS', granted: true },
+ { type: 'scan', deviceName: 'Epson Scanner', granted: true },
+ ],
+ },
+ ];
+
+ @state()
+ accessor accessRequests: IAccessRequest[] = [
+ {
+ id: 'req-1',
+ appId: 'slack',
+ appName: 'Slack',
+ appDomain: 'slack.com',
+ permissionType: 'camera',
+ deviceName: 'Logitech C920',
+ requestedAt: new Date(Date.now() - 1000 * 60 * 10),
+ status: 'pending',
+ },
+ {
+ id: 'req-2',
+ appId: 'canva',
+ appName: 'Canva',
+ appDomain: 'canva.com',
+ permissionType: 'print',
+ deviceName: 'HP LaserJet Pro',
+ requestedAt: new Date(Date.now() - 1000 * 60 * 25),
+ status: 'pending',
+ },
+ ];
+
+ @state()
+ accessor activities: IAccessActivity[] = [
+ {
+ id: 'act-1',
+ appId: 'google-docs',
+ appName: 'Google Docs',
+ permissionType: 'print',
+ deviceName: 'HP LaserJet Pro',
+ action: 'printed document "Q4 Report.pdf"',
+ timestamp: new Date(Date.now() - 1000 * 60 * 5),
+ },
+ {
+ id: 'act-2',
+ appId: 'zoom',
+ appName: 'Zoom',
+ permissionType: 'camera',
+ deviceName: 'Logitech C920',
+ action: 'accessed camera for video call',
+ timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2),
+ },
+ {
+ id: 'act-3',
+ appId: 'dropbox',
+ appName: 'Dropbox',
+ permissionType: 'scan',
+ deviceName: 'Epson Scanner',
+ action: 'scanned 3 pages',
+ timestamp: new Date(Date.now() - 1000 * 60 * 60 * 5),
+ },
+ {
+ id: 'act-4',
+ appId: 'figma',
+ appName: 'Figma',
+ permissionType: 'display',
+ action: 'shared screen to external display',
+ timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24),
+ },
+ ];
+
+ @state()
+ accessor requireApproval = true;
+
+ @state()
+ accessor autoRevokeInactive = true;
+
+ @state()
+ accessor activityLogging = true;
+
+ private getMenuGroups(): ISecondaryMenuGroup[] {
+ const pendingCount = this.accessRequests.filter(r => r.status === 'pending').length;
+
+ return [
+ {
+ name: 'Overview',
+ iconName: 'lucide:share2',
+ items: [
+ {
+ key: 'apps',
+ iconName: 'lucide:layoutGrid',
+ action: () => this.activePanel = 'apps',
+ badge: this.saasApps.length.toString(),
+ },
+ {
+ key: 'requests',
+ iconName: 'lucide:inbox',
+ action: () => this.activePanel = 'requests',
+ badge: pendingCount > 0 ? pendingCount.toString() : undefined,
+ },
+ ],
+ },
+ {
+ name: 'Browse',
+ iconName: 'lucide:folder',
+ items: [
+ {
+ key: 'devices',
+ iconName: 'lucide:hardDrive',
+ action: () => this.activePanel = 'devices',
+ },
+ {
+ key: 'permissions',
+ iconName: 'lucide:key',
+ action: () => this.activePanel = 'permissions',
+ },
+ ],
+ },
+ {
+ name: 'Monitor',
+ iconName: 'lucide:activity',
+ items: [
+ {
+ key: 'activity',
+ iconName: 'lucide:clock',
+ action: () => this.activePanel = 'activity',
+ },
+ {
+ key: 'security',
+ iconName: 'lucide:shield',
+ action: () => this.activePanel = 'security',
+ },
+ ],
+ },
+ ];
+ }
+
+ private getSelectedItem(): ISecondaryMenuItem | null {
+ for (const group of this.getMenuGroups()) {
+ for (const item of group.items) {
+ if ('key' in item && item.key === this.activePanel) {
+ return item;
+ }
+ }
+ }
+ return null;
+ }
+
+ public render(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private renderActivePanel(): TemplateResult {
+ switch (this.activePanel) {
+ case 'apps':
+ return this.renderAppsPanel();
+ case 'devices':
+ return this.renderDevicesPanel();
+ case 'permissions':
+ return this.renderPermissionsPanel();
+ case 'requests':
+ return this.renderRequestsPanel();
+ case 'activity':
+ return this.renderActivityPanel();
+ case 'security':
+ return this.renderSecurityPanel();
+ default:
+ return this.renderAppsPanel();
+ }
+ }
+
+ private renderAppsPanel(): TemplateResult {
+ return html`
+
+
+ Connected Apps
+ Manage SaaS applications with access to your peripherals
+
+
+
+
+ ${this.accessRequests.filter(r => r.status === 'pending').length > 0 ? html`
+
+
+ Pending Requests
+ ${this.accessRequests.filter(r => r.status === 'pending').length}
+
+ ${this.accessRequests.filter(r => r.status === 'pending').map(request => html`
+
+
+
+ ${request.appName} wants access to ${this.getPermissionLabel(request.permissionType)}
+
+
+ ${request.deviceName ? `Device: ${request.deviceName} • ` : ''}
+ Requested ${this.formatTimeAgo(request.requestedAt)}
+
+
+
+
+
+
+
+ `)}
+
+ ` : ''}
+
+
+
+ All Apps
+ ${this.saasApps.length}
+
+ ${this.saasApps.map(app => html`
+
+
+
+
+
+ ${app.name}
+ ${app.verified ? html`
+
+ ${device.name}
+ ${device.apps.length} app${device.apps.length !== 1 ? 's' : ''} with access
+
+
+
+ ${device.apps.map(appName => html`
+
+ ${appName}
+
+
+ `)}
+
+
+ `)}
+ `;
+ }
+
+ private renderPermissionsPanel(): TemplateResult {
+ const permissionTypes: { type: TPermissionType; icon: string; label: string; color: string; count: number }[] = [
+ { type: 'print', icon: 'lucide:printer', label: 'Printing', color: 'blue', count: 2 },
+ { type: 'scan', icon: 'lucide:scan', label: 'Scanning', color: 'purple', count: 1 },
+ { type: 'camera', icon: 'lucide:camera', label: 'Camera', color: 'green', count: 1 },
+ { type: 'audio', icon: 'lucide:mic', label: 'Microphone', color: 'red', count: 1 },
+ { type: 'storage', icon: 'lucide:hardDrive', label: 'Network Storage', color: 'orange', count: 2 },
+ { type: 'display', icon: 'lucide:monitor', label: 'Screen Sharing', color: 'gray', count: 2 },
+ ];
+
+ return html`
+
+
+ Permissions
+ Manage access by permission type
+
+
+
+
+ ${permissionTypes.map(perm => html`
+
+ `)}
+
+ `;
+ }
+
+ private renderRequestsPanel(): TemplateResult {
+ const pendingRequests = this.accessRequests.filter(r => r.status === 'pending');
+
+ return html`
+
+
+ Access Requests
+ Review and manage permission requests from SaaS applications
+
+
+
+ ${pendingRequests.length > 0 ? html`
+
+
+ Pending
+ ${pendingRequests.length}
+
+ ${pendingRequests.map(request => html`
+
+
+
+ ${request.appName} wants access to ${this.getPermissionLabel(request.permissionType)}
+
+
+ ${request.deviceName ? `Device: ${request.deviceName} • ` : ''}
+ ${request.appDomain} • Requested ${this.formatTimeAgo(request.requestedAt)}
+
+
+
+
+
+
+
+ `)}
+
+ ` : html`
+
+
+ No pending requests
+ When SaaS apps request access to your peripherals, they'll appear here
+
+
+ `}
+ `;
+ }
+
+ private renderActivityPanel(): TemplateResult {
+ return html`
+
+
+ Activity Log
+ Recent peripheral access by SaaS applications
+
+
+
+
+ Recent Activity
+ ${this.activities.map(activity => html`
+
+
+
+
+ ${activity.appName} ${activity.action}
+
+ ${this.formatTimeAgo(activity.timestamp)}
+
+
+ `)}
+
+ `;
+ }
+
+ private renderSecurityPanel(): TemplateResult {
+ return html`
+
+
+ Security Settings
+ Configure how SaaS apps can access your peripherals
+
+
+
+
+ Access Control
+
+
+
+
+ Require Approval
+ Ask before granting new app access
+
+
+ this.requireApproval = !this.requireApproval}
+ >
+
+
+
+
+
+ Auto-revoke Inactive Apps
+ Remove access after 30 days of inactivity
+
+
+ this.autoRevokeInactive = !this.autoRevokeInactive}
+ >
+
+
+
+
+ Logging
+
+
+
+
+ Activity Logging
+ Record all peripheral access events
+
+
+ this.activityLogging = !this.activityLogging}
+ >
+
+
+
+
+ Danger Zone
+
+
+
+
+ Revoke All Access
+ Remove all SaaS app permissions
+
+
+
+
+
+ `;
+ }
+
+ private renderPermissionBadges(permissions: ISaasPermission[]): TemplateResult[] {
+ const permissionIcons: Record = {
+ print: 'lucide:printer',
+ scan: 'lucide:scan',
+ storage: 'lucide:hardDrive',
+ camera: 'lucide:camera',
+ audio: 'lucide:mic',
+ display: 'lucide:monitor',
+ network: 'lucide:wifi',
+ };
+
+ return permissions.map(perm => html`
+
+ `);
+ }
+
+ private getPermissionLabel(type: TPermissionType): string {
+ const labels: Record = {
+ print: 'Printing',
+ scan: 'Scanning',
+ storage: 'Storage',
+ camera: 'Camera',
+ audio: 'Microphone',
+ display: 'Display',
+ network: 'Network',
+ };
+ return labels[type];
+ }
+
+ private getPermissionIcon(type: TPermissionType): string {
+ const icons: Record = {
+ print: 'lucide:printer',
+ scan: 'lucide:scan',
+ storage: 'lucide:hardDrive',
+ camera: 'lucide:camera',
+ audio: 'lucide:mic',
+ display: 'lucide:monitor',
+ network: 'lucide:wifi',
+ };
+ return icons[type];
+ }
+
+ private formatTimeAgo(date: Date): string {
+ const now = new Date();
+ const diff = now.getTime() - date.getTime();
+ const minutes = Math.floor(diff / 60000);
+ const hours = Math.floor(diff / 3600000);
+ const days = Math.floor(diff / 86400000);
+
+ if (minutes < 1) return 'Just now';
+ if (minutes < 60) return `${minutes}m ago`;
+ if (hours < 24) return `${hours}h ago`;
+ if (days < 7) return `${days}d ago`;
+ return date.toLocaleDateString();
+ }
+
+ private approveRequest(requestId: string): void {
+ this.accessRequests = this.accessRequests.map(r =>
+ r.id === requestId ? { ...r, status: 'approved' as const } : r
+ );
+ this.dispatchEvent(new CustomEvent('request-approved', {
+ detail: { requestId },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+
+ private denyRequest(requestId: string): void {
+ this.accessRequests = this.accessRequests.map(r =>
+ r.id === requestId ? { ...r, status: 'denied' as const } : r
+ );
+ this.dispatchEvent(new CustomEvent('request-denied', {
+ detail: { requestId },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+}
diff --git a/ts_web/views/eco-view-saasshare/index.ts b/ts_web/views/eco-view-saasshare/index.ts
new file mode 100644
index 0000000..421a95e
--- /dev/null
+++ b/ts_web/views/eco-view-saasshare/index.ts
@@ -0,0 +1 @@
+export * from './eco-view-saasshare.js';
diff --git a/ts_web/views/eco-view-settings/eco-view-settings.demo.ts b/ts_web/views/eco-view-settings/eco-view-settings.demo.ts
index 5acdb55..66f1a11 100644
--- a/ts_web/views/eco-view-settings/eco-view-settings.demo.ts
+++ b/ts_web/views/eco-view-settings/eco-view-settings.demo.ts
@@ -4,15 +4,15 @@ export const demo = () => html`
-