@mhmo91/schmancy 0.9.27 → 0.10.1

package/src/typewriter/typewriter.ts

@@ -1,410 +0,0 @@
-import { consume } from '@lit/context'
-import { $LitElement } from '@mixins/index'
-import { delayContext } from '@schmancy/delay'
-import hashContent from '@schmancy/utils/hashContent'
-import { intersection$ } from '@schmancy/utils/intersection'
-import { css, html, TemplateResult } from 'lit'
-import { customElement, property, query, queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js'
-// TypeIt is loaded lazily on first render — see ADR 0014 in the parent
-// monorepo. The static import was replaced with a type-only import plus a
-// memoised dynamic loader so the ~15 KB gzipped vendor chunk stays out of
-// the agent bundle's first paint for pages that don't render a typewriter.
-import type { Options as TypeItOptions } from 'typeit'
-type TypeItCtor = typeof import('typeit').default
-type TypeItInstance = InstanceType<TypeItCtor>
-
-let typeItPromise: Promise<TypeItCtor> | null = null
-function loadTypeIt(): Promise<TypeItCtor> {
-	if (typeItPromise) return typeItPromise
-	typeItPromise = import('typeit').then(m => m.default)
-	return typeItPromise
-}
-
-/**
- * Typewriter effect — animates text typing/deletion with a cursor. Wraps the TypeIt library, lazy-loaded on first render.
- *
- * @element schmancy-typewriter
- * @summary Drop string content as the default slot or use `<p>` / `<span>` with `cycle="A|B|C"` attribute children for cycling phrases. Set `loop` for infinite cycling, `once` to remember completion across sessions via sessionStorage.
- * @example
- * <schmancy-typewriter speed="35" cursor-char="|">
- *   Hello, world.
- * </schmancy-typewriter>
- * @platform span - Animated text container. Degrades to its raw text content if the tag never registers — animation is lost but content stays visible.
- * @fires typeit-complete - When the animation finishes typing all content. Fires after the final `afterComplete` callback in the underlying TypeIt instance.
- */
-@customElement('schmancy-typewriter')
-export class TypewriterElement extends $LitElement(css`
-	:host {
-		display: inline-block;
-	}
-
-	#typewriter {
-		position: relative;
-	}
-
-	/* Enhanced cursor with glow effect */
-	#typewriter :global(.ti-cursor) {
-		animation: cursor-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-		color: currentColor;
-		filter: drop-shadow(0 0 8px currentColor);
-	}
-
-	@keyframes cursor-pulse {
-		0%, 100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.3;
-			transform: scale(0.95);
-		}
-	}
-
-	/* Character entrance animation */
-	#typewriter :global(.ti-container *) {
-		animation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
-	}
-
-	@keyframes char-entrance {
-		0% {
-			opacity: 0;
-			transform: scale(0.3) translateY(10px);
-			filter: blur(4px);
-		}
-		50% {
-			opacity: 0.8;
-			transform: scale(1.1) translateY(-2px);
-		}
-		100% {
-			opacity: 1;
-			transform: scale(1) translateY(0);
-			filter: blur(0);
-		}
-	}
-
-	/* Subtle character wobble on appear */
-	#typewriter :global(.ti-container *:nth-child(odd)) {
-		animation: char-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
-		           char-wobble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
-	}
-
-	@keyframes char-wobble {
-		0%, 100% {
-			transform: rotate(0deg);
-		}
-		25% {
-			transform: rotate(2deg);
-		}
-		75% {
-			transform: rotate(-2deg);
-		}
-	}
-
-	/* Deletion animation - fade out and scale down */
-	#typewriter :global(.ti-container .deleting) {
-		animation: char-delete 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
-	}
-
-	@keyframes char-delete {
-		0% {
-			opacity: 1;
-			transform: scale(1);
-			filter: blur(0);
-		}
-		50% {
-			opacity: 0.5;
-			transform: scale(0.8) translateY(-3px);
-		}
-		100% {
-			opacity: 0;
-			transform: scale(0.4) translateY(-8px);
-			filter: blur(3px);
-		}
-	}
-
-	/* Gradient text effect on typed text */
-	#typewriter :global(.ti-container) {
-		background: linear-gradient(
-			90deg,
-			currentColor 0%,
-			currentColor 70%,
-			transparent 100%
-		);
-		-webkit-background-clip: text;
-		background-clip: text;
-		animation: gradient-shift 3s ease-in-out infinite;
-	}
-
-	@keyframes gradient-shift {
-		0%, 100% {
-			filter: brightness(1) saturate(1);
-		}
-		50% {
-			filter: brightness(1.15) saturate(1.2);
-		}
-	}
-
-	/* Smooth transitions for all text */
-	#typewriter * {
-		transition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-`) {
-	/**
-	 * Typing speed in milliseconds per character.
-	 */
-	@property({ type: Number })
-	speed: number = 35
-
-	/**
-	 * Delay before typing starts (ms).
-	 */
-	@consume({ context: delayContext, subscribe: true })
-	@property({ type: Number })
-	delay: number = 0
-
-	/**
-	 * Automatically start typing on initialization.
-	 */
-	@property({ type: Boolean })
-	autoStart: boolean = true
-
-	/**
-	 * The cursor character.
-	 */
-	@property({ type: String })
-	cursorChar: string = ''
-
-	/**
-	 * Typing speed for deletions (ms per character).
-	 */
-	@property({ type: Number })
-	deleteSpeed: number = 20
-
-	/**
-	 * Only animate once per session.
-	 */
-	@property({ type: Boolean }) once = true
-
-	/**
-	 * Loop the animation infinitely (overrides once).
-	 */
-	@property({ type: Boolean }) loop = false
-
-	/**
-	 * Default pause duration for cycling (ms).
-	 */
-	@property({ type: Number }) cyclePause = 1500
-	/**
-	 * TypeIt instance. Populated after `loadTypeIt()` resolves inside
-	 * `_startTyping()` — null until then, which is correct for a cold start
-	 * where the vendor chunk hasn't loaded yet.
-	 */
-	private typeItInstance: TypeItInstance | null = null
-
-	/**
-	 * Reference to the typewriter container.
-	 */
-	@query('#typewriter')
-	private typewriterContainer!: HTMLElement
-
-	@queryAssignedNodes({
-		flatten: true,
-	})
-	private _getSlottedNodes!: Node[]
-
-	@queryAssignedElements({
-		flatten: true,
-	})
-	private _getSlottedElements!: HTMLElement[]
-	/**
-	 * Lifecycle method called when the component is disconnected from the DOM.
-	 * Ensures that TypeIt instances are properly cleaned up.
-	 */
-
-	private sessionKey = ''
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		this._destroyTypeIt()
-	}
-
-	/**
-	 * Initializes the TypeIt instance with the provided slotted content.
-	 * Async because TypeIt itself is lazy-loaded on first render.
-	 */
-	private async _startTyping() {
-		// Destroy any existing TypeIt instance
-		this._destroyTypeIt()
-
-		this.sessionKey = this.generateSessionKey()
-
-		if (this.once && sessionStorage.getItem(this.sessionKey) === 'true') {
-			// Skip delay and render immediately if once is set and already rendered
-			this.shadowRoot?.querySelector('slot')?.removeAttribute('hidden')
-			return
-		}
-
-		if (!this.typewriterContainer) {
-			console.warn('Typewriter container not found.')
-			return
-		}
-
-		// Configure TypeIt options
-		const typeItOptions: TypeItOptions = {
-			speed: this.speed,
-			startDelay: this.delay,
-			cursor: !!this.cursorChar,
-			cursorChar: this.cursorChar,
-			deleteSpeed: this.deleteSpeed,
-			loop: this.loop,
-			afterComplete: () => {
-				if (this.once && !this.loop) {
-					try {
-						sessionStorage.setItem(this.sessionKey, 'true')
-					} catch (error) {
-						console.error('Error saving to session storage:', error)
-					}
-				}
-				// Dispatch the custom event
-				this.dispatchEvent(new CustomEvent('typeit-complete', { bubbles: true, composed: true }))
-
-				// Hide the cursor (unless looping)
-				if (!this.loop) {
-					this.typewriterContainer.style.setProperty('--ti-cursor-display', 'none')
-				}
-			},
-		}
-
-		// Load TypeIt lazily on first call (module-scope memoised promise).
-		const TypeIt = await loadTypeIt()
-		// Bail if we were disconnected during the load — avoids attaching to
-		// a detached host.
-		if (!this.isConnected) return
-
-		// Initialize TypeIt
-		this.typeItInstance = new TypeIt(this.typewriterContainer, typeItOptions)
-
-		// Process slotted content as actions
-		const slottedNodes = this._getSlottedNodes
-		slottedNodes.forEach(node => {
-			if (node.nodeType === Node.TEXT_NODE) {
-				// Handle plain text - skip whitespace-only text nodes
-				const textContent = node.textContent || ''
-				if (textContent.trim()) {
-					this.typeItInstance?.type(textContent)
-				}
-			} else if (node instanceof HTMLElement) {
-				// Handle custom element
-				this._processCustomElement(node)
-			}
-		})
-
-		// Start the typing animation if autoStart is enabled
-		// use rxjs to detect once we are in the view port
-		intersection$(this.shadowRoot?.host as Element).subscribe(() => {
-			// alert('in view')
-			this.typeItInstance?.go()
-		})
-		// Start the typing animation if autoStart is enabled
-	}
-
-	private generateSessionKey(): string {
-		const slotContent = this._getSlottedElements.map(el => el.outerHTML).join('')
-		return this.once ? hashContent(slotContent) : ''
-	}
-	/**
-	 * Destroys the current TypeIt instance if it exists.
-	 */
-	private _destroyTypeIt() {
-		if (this.typeItInstance) {
-			try {
-				this.typeItInstance.destroy()
-			} catch (error) {
-				console.error('Error destroying TypeIt instance:', error)
-			}
-			this.typeItInstance = null
-		}
-	}
-
-	/**
-	 * Processes a custom element for its typing behavior.
-	 */
-	private _processCustomElement(element: HTMLElement) {
-		const action = element.getAttribute('action')
-		const value = element.getAttribute('value')
-		const cycle = element.getAttribute('cycle')
-
-		// Handle cycle attribute - simple pipe-separated list
-		if (cycle) {
-			const items = cycle.split('|').map(item => item.trim())
-			this._processCycle(items, element)
-			return
-		}
-
-		switch (action) {
-			case 'pause':
-				this.typeItInstance?.pause(parseInt(value || '0', 10))
-				break
-			case 'delete':
-				this.typeItInstance?.delete(parseInt(value || '0', 10))
-				break
-			default:
-				if (element.tagName === 'P') {
-					this.typeItInstance?.break()
-				}
-				// Treat as text if no action is defined
-				this.typeItInstance?.type(element.textContent || '')
-				break
-		}
-	}
-
-	/**
-	 * Processes cycling text with auto-calculated delete counts.
-	 */
-	private _processCycle(items: string[], element: HTMLElement) {
-		if (items.length === 0) return
-
-		const customPause = element.getAttribute('pause')
-		const pauseDuration = customPause ? parseInt(customPause, 10) : this.cyclePause
-
-		// Type each item with automatic deletion
-		items.forEach((item, index) => {
-			// Type the item
-			this.typeItInstance?.type(item)
-
-			// Pause after typing (except after last item when not looping)
-			if (index < items.length - 1 || this.loop) {
-				this.typeItInstance?.pause(pauseDuration)
-			}
-
-			// Delete back to start (except for last item when not looping)
-			if (index < items.length - 1) {
-				this.typeItInstance?.delete(item.length)
-			} else if (this.loop) {
-				// For looping, delete and start over
-				this.typeItInstance?.delete(item.length)
-			}
-		})
-	}
-
-	/**
-	 * Renders the component's HTML.
-	 */
-	render(): TemplateResult {
-		return html`<div id="typewriter" aria-live="polite"></div>
-
-			<div class="typewriter">
-				<slot
-					hidden
-					@slotchange=${() => {
-						this._startTyping()
-					}}
-				></slot>
-			</div> `
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-typewriter': TypewriterElement
-	}
-}

package/types/src/area/route.test.d.ts

@@ -1,20 +0,0 @@
-import './area.component';
-import './area-route.component';
-declare const TestHome_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-declare class TestHome extends TestHome_base {
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare const TestAbout_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-declare class TestAbout extends TestAbout_base {
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare const TestUser_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-declare class TestUser extends TestUser_base {
-    userId?: string;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare const TestApp_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-declare class TestApp extends TestApp_base {
-    render(): import("lit-html").TemplateResult<1>;
-}
-export { TestApp, TestHome, TestAbout, TestUser };

package/types/src/button/button.test.d.ts

@@ -1 +0,0 @@
-import './button';

package/types/src/chips/chip.d.ts

@@ -1,3 +0,0 @@
-// This file re-exports types from filter-chip since schmancy-chip is now an alias
-export { SchmancyFilterChip as default, SchmancyFilterChip as SchmancyChip } from './filter-chip';
-export type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip';

package/types/src/components/index.d.ts

@@ -1 +0,0 @@
-export * from './form-elements';

package/types/src/content-drawer/$sheet.d.ts

@@ -1,14 +0,0 @@
-type TRef = Element | Window;
-type TRenderRequest = HTMLElement;
-export type TRenderCustomEvent = CustomEvent<{
-    component: TRenderRequest;
-    title?: string;
-}>;
-declare class Drawer {
-    private $drawer;
-    constructor();
-    dimiss(ref: TRef): void;
-    render(ref: TRef, component: TRenderRequest, title?: string): void;
-}
-export declare const schmancyContentDrawer: Drawer;
-export {};

package/types/src/dialog/dailog.d.ts

@@ -1,116 +0,0 @@
-declare const ConfirmDialog_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-/**
- * A confirm dialog web component with custom content support
- *
- * @element confirm-dialog
- * @slot content - Optional slot for custom content
- */
-export declare class ConfirmDialog extends ConfirmDialog_base {
-    /**
-     * Dialog title
-     */
-    title: any;
-    /**
-     * Dialog subtitle
-     */
-    subtitle: any;
-    /**
-     * Dialog message
-     */
-    message: any;
-    /**
-     * Text for confirm button
-     */
-    confirmText: string;
-    /**
-     * Text for cancel button
-     */
-    cancelText: string;
-    /**
-     * Dialog variant (affects button colors)
-     */
-    variant: 'default' | 'danger';
-    /**
-     * Current position of the dialog
-     */
-    private position;
-    /**
-     * Current active promise resolver
-     */
-    private resolvePromise?;
-    /**
-     * Store cleanup function for position auto-updates
-     */
-    private cleanupAutoUpdate?;
-    /**
-     * Store resize subscription
-     */
-    private resizeSubscription?;
-    /**
-     * Virtual element to use as reference for positioning
-     */
-    private virtualReference?;
-    /**
-     * Simple API: Show the dialog at a specific position
-     * @returns Promise that resolves to true (confirm) or false (cancel)
-     */
-    show(positionOrEvent?: {
-        x: number;
-        y: number;
-    } | MouseEvent | TouchEvent): Promise<boolean>;
-    /**
-     * Simple API: Hide the dialog
-     */
-    hide(confirmed?: boolean): void;
-    /**
-     * Set up position auto-updating when dialog content changes or window resizes
-     */
-    private setupPositioning;
-    /**
-     * Update dialog position using Floating UI with smart height-aware repositioning
-     */
-    private updatePosition;
-    /**
-     * Handle component disconnection from DOM
-     */
-    disconnectedCallback(): void;
-    /**
-     * Handle lifecycle callback when dialog is first rendered
-     */
-    firstUpdated(): void;
-    /**
-     * Handle confirm action
-     */
-    private handleConfirm;
-    /**
-     * Handle cancel action
-     */
-    private handleCancel;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Static helper for even simpler API
-     */
-    static confirm(options: {
-        title?: string;
-        subtitle?: string;
-        message?: string;
-        confirmText?: string;
-        cancelText?: string;
-        variant?: 'default' | 'danger';
-        position?: {
-            x: number;
-            y: number;
-        } | MouseEvent | TouchEvent;
-        width?: string;
-    }): Promise<boolean>;
-    /**
-     * Even simpler shorthand method - just pass message and optionally an event
-     */
-    static ask(message: string, event?: MouseEvent | TouchEvent): Promise<boolean>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'confirm-dialog': ConfirmDialog;
-    }
-}
-export {};

package/types/src/dialog/dialog-content.d.ts

@@ -1,17 +0,0 @@
-declare const SchmancyDialogContent_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-/**
- * A basic dialog content component that doesn't add any padding or styling
- * Used for rendering raw content in a dialog
- *
- * @element schmancy-dialog-content
- * @slot default - Content slot for dialog content without any styling
- */
-export declare class SchmancyDialogContent extends SchmancyDialogContent_base {
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-dialog-content': SchmancyDialogContent;
-    }
-}
-export {};

package/types/src/directives/guard.d.ts

@@ -1 +0,0 @@
-export { guard } from 'lit/directives/guard.js';

package/types/src/directives/visibility.d.ts

@@ -1,11 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { Subject } from 'rxjs';
-export default class VisibilityController implements ReactiveController {
-    host: ReactiveControllerHost & HTMLElement;
-    magicKey: string;
-    toggler: ' ' | 'ctrl+space' | string;
-    disconnecting: Subject<void>;
-    constructor(host: ReactiveControllerHost | HTMLElement, magicKey: string, toggler: string, defaultVisibility?: 'visible' | 'hidden');
-    hostConnected(): void;
-    hostDisconnected(): void;
-}

package/types/src/form/form-v2.d.ts

@@ -1,22 +0,0 @@
-import SchmancyForm from './form';
-export type { FormElement, CheckableFormElement, ValidatableFormElement, FormControlConfig, FormEventMap, } from './form';
-/**
- * @deprecated Use `<schmancy-form>` (`SchmancyForm`) from `./form`. The
- * canonical form implementation now discovers fields via the `FormFieldMixin`
- * brand + a small compat registry, which makes the `sch-form` tag redundant.
- * This class remains as an alias so any existing `<sch-form>` markup or
- * `SchmancyFormV2` imports continue to work, and will be removed in a future
- * major.
- */
-export default class SchmancyFormV2 extends SchmancyForm {
-    static readonly tagName = "sch-form";
-    /**
-     * @deprecated Use `SchmancyForm.registerControl()` instead.
-     */
-    static registerFormControl: typeof SchmancyForm.registerControl;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sch-form': SchmancyFormV2;
-    }
-}