@mhmo91/schmancy 0.10.4 → 0.10.5

package/src/sheet/sheet.ts

@@ -1,238 +0,0 @@
-import { SchmancyElement } from '@mixins/index'
-import { area } from '../area'
-import { html, css } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { fromEvent, merge, takeUntil, tap, filter } from 'rxjs'
-import { on } from './hook'
-import { SchmancySheetPosition, sheet } from './sheet.service'
-import { BLACKBIRD_EASING, DURATION_ENTER, DURATION_EXIT, DURATION_BACKDROP, EASE_OUT, EASE_IN } from '../utils/animation'
-
-@customElement('schmancy-sheet')
-export default class SchmancySheet extends SchmancyElement {
-	static styles = [css`
-	:host {
-		position: fixed;
-		inset: 0;
-		z-index: var(--schmancy-overlay-z, 999);
-		display: none;
-	}
-	:host([open]) {
-		display: block;
-	}
-
-	/* Luminous edge glow on sheet panel */
-	.content {
-		box-shadow: -8px 0 40px -8px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
-	}
-
-	:host([position='bottom']) .content {
-		box-shadow: 0 -8px 40px -8px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.content { box-shadow: var(--schmancy-sys-elevation-3); }
-	}
-`]
-
-	// uid is inherited from $LitElement mixin - auto-generated or set via attribute
-	@property({ type: Boolean, reflect: true }) open = false
-	@property({ type: String, reflect: true }) position: SchmancySheetPosition = SchmancySheetPosition.Side
-	@property({ type: Boolean, reflect: true }) persist = false
-	@property({ type: Boolean, reflect: true }) lock = false
-	@property({ type: Boolean, reflect: true }) handleHistory = true
-
-	private lastFocusedElement: HTMLElement | null = null
-	@query('.overlay') private overlayEl!: HTMLDivElement
-	@query('.content') private contentEl!: HTMLDivElement
-
-	@on('open')
-	onOpenChange(_oldValue: boolean, newValue: boolean) {
-		if (newValue) {
-			this.lastFocusedElement = document.activeElement as HTMLElement
-			this.setBackgroundInert(true)
-			this.animateIn()
-			this.focus()
-		} else {
-			this.animateOut()
-			this.setBackgroundInert(false)
-			this.lastFocusedElement?.focus()
-			this.lastFocusedElement = null
-		}
-	}
-
-	private animateIn() {
-		if (!this.overlayEl || !this.contentEl) return
-
-		this.overlayEl.animate([{ opacity: 0 }, { opacity: 1 }], {
-			duration: DURATION_BACKDROP,
-			easing: EASE_OUT,
-			fill: 'forwards',
-		})
-
-		const animation =
-			this.position === SchmancySheetPosition.Side
-				? [
-						{ opacity: 0, transform: 'translateX(100%) scale(0.95)' },
-						{ opacity: 1, transform: 'translateX(0) scale(1)' },
-					]
-				: [
-						{ opacity: 0, transform: 'translateY(100%) scale(0.95)' },
-						{ opacity: 1, transform: 'translateY(0) scale(1)' },
-					]
-
-		this.contentEl.animate(animation, {
-			duration: DURATION_ENTER,
-			easing: BLACKBIRD_EASING,
-			fill: 'forwards',
-		})
-	}
-
-	private animateOut() {
-		if (!this.overlayEl || !this.contentEl) return
-
-		this.overlayEl.animate([{ opacity: 1 }, { opacity: 0 }], {
-			duration: DURATION_EXIT,
-			easing: EASE_OUT,
-			fill: 'forwards',
-		})
-
-		const animation =
-			this.position === SchmancySheetPosition.Side
-				? [
-						{ opacity: 1, transform: 'translateX(0) scale(1)' },
-						{ opacity: 0, transform: 'translateX(100%) scale(0.98)' },
-					]
-				: [
-						{ opacity: 1, transform: 'translateY(0) scale(1)' },
-						{ opacity: 0, transform: 'translateY(100%) scale(0.98)' },
-					]
-
-		this.contentEl.animate(animation, {
-			duration: DURATION_EXIT,
-			easing: EASE_IN,
-			fill: 'forwards',
-		})
-	}
-
-	connectedCallback() {
-		super.connectedCallback()
-		this.setupEventListeners()
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		this.disconnecting.next(true)
-	}
-
-	private setupEventListeners() {
-		// Handle browser back button
-		const popState$ = fromEvent<PopStateEvent>(window, 'popstate').pipe(
-			filter(() => this.handleHistory),
-			tap(e => {
-				e.preventDefault()
-				this.closeSheet()
-			}),
-		)
-
-		// Handle ESC key
-		const keyUp$ = fromEvent<KeyboardEvent>(this, 'keydown').pipe(
-			tap(event => {
-				if (event.key === 'Escape' && !this.lock && this.open) {
-					event.preventDefault()
-					event.stopPropagation()
-					sheet.dismiss(this.uid)
-				}
-			}),
-		)
-
-		// Handle render events from sheet service
-		const render$ = fromEvent<CustomEvent>(window, 'schmancy-sheet-render').pipe(
-			filter(e => e.detail.uid === this.uid),
-			tap(e => {
-				area.push({
-					area: this.uid,
-					component: e.detail.component,
-					props: e.detail.props,
-					historyStrategy: 'silent',
-				})
-			}),
-		)
-
-		// Handle dismiss events from sheet service
-		const dismiss$ = fromEvent<CustomEvent>(window, 'schmancy-sheet-dismiss').pipe(
-			filter(e => e.detail.uid === this.uid),
-			tap(() => {
-				this.closeSheet()
-			}),
-		)
-
-		merge(popState$, keyUp$, render$, dismiss$).pipe(takeUntil(this.disconnecting)).subscribe()
-	}
-
-	private setBackgroundInert(inert: boolean) {
-		const parent = this.parentElement
-		if (!parent) return
-
-		Array.from(parent.children).forEach(child => {
-			if (child !== this && child instanceof HTMLElement) {
-				child.toggleAttribute('inert', inert)
-			}
-		})
-	}
-
-	closeSheet() {
-		this.open = false
-		this.dispatchEvent(new CustomEvent('close'))
-	}
-
-	override focus() {
-		// delegatesFocus in shadowRootOptions handles automatic focus
-		// Just focus first element with autofocus attribute if present
-		const element = this.querySelector('[autofocus]')
-		if (element instanceof HTMLElement) {
-			element.focus()
-		}
-	}
-
-	private handleOverlayClick = (e: Event) => {
-		e.stopPropagation()
-		if (!this.lock) {
-			sheet.dismiss(this.uid)
-		}
-	}
-
-	render() {
-		const sheetClasses = `absolute inset-0 flex h-full`
-
-		const overlayClasses = `overlay absolute inset-0 bg-surface-container/10 backdrop-blur-lg backdrop-saturate-150 ${this.lock ? '' : 'cursor-pointer'}`
-
-		const contentClasses =
-			this.position === SchmancySheetPosition.Side
-				? 'content h-full min-w-[320px] max-w-[90vw] w-fit ml-auto z-10'
-				: 'content w-full mt-auto rounded-t-2xl max-h-[90vh] z-10'
-
-		const surfaceClasses =
-			this.position === SchmancySheetPosition.Side
-				? 'h-full overflow-auto'
-				: 'max-h-[90vh] overflow-auto'
-
-		return html`
-			<div class=${sheetClasses} role="dialog" aria-hidden=${!this.open} aria-modal=${this.open} tabindex="0">
-				<div class=${overlayClasses} @click=${this.handleOverlayClick}></div>
-				<div class=${contentClasses}>
-					<schmancy-surface rounded="left" fill="all" id="body" class=${surfaceClasses} type="solid">
-						<schmancy-area class="size-full overflow-auto" name=${this.uid}>
-							<slot></slot>
-						</schmancy-area>
-					</schmancy-surface>
-				</div>
-			</div>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-sheet': SchmancySheet
-	}
-}

package/types/src/dialog/dialog-base.mixin.d.ts

@@ -1,30 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from '../../mixins/constructor';
-import type { IBaseMixin } from '../../mixins/baseElement';
-export interface DialogPosition {
-    x: number;
-    y: number;
-}
-export interface VirtualReference {
-    getBoundingClientRect: () => DOMRect;
-}
-/**
- * Interface for the DialogBase mixin methods
- */
-export interface IDialogBaseMixin {
-    position: DialogPosition;
-    isMobile: boolean;
-    dragOffset: number;
-    show(positionOrEvent?: DialogPosition | MouseEvent | TouchEvent): Promise<boolean>;
-    hide(result?: boolean): Promise<void>;
-    isCentered(): boolean;
-    isAnimating(): boolean;
-}
-/**
- * Dialog mixin with smart positioning using Floating UI.
- *
- * On mobile (< 640px), automatically switches to bottom sheet mode
- * with swipe-to-dismiss gesture. On tablet/desktop, if content exceeds
- * a viewport-dependent threshold, also opens as bottom sheet.
- */
-export declare const DialogBase: <T extends Constructor<LitElement & IBaseMixin>>(superClass: T) => Constructor<IDialogBaseMixin> & T;

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

@@ -1,13 +0,0 @@
-export declare const DialogWhereAreYouRicky = "are-you-there-dialog";
-export declare const DialogHereMorty = "yes-dialog-here";
-export interface DialogWhereAreYouRickyEvent extends CustomEvent {
-    detail: {
-        uid: string;
-    };
-}
-export interface DialogHereMortyEvent extends CustomEvent {
-    detail: {
-        dialog: any;
-        theme?: any;
-    };
-}

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

@@ -1,91 +0,0 @@
-import { TemplateResult } from 'lit';
-/**
- * Dialog service options interface
- */
-export interface DialogOptions {
-    title?: string;
-    subtitle?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    variant?: 'default' | 'danger';
-    position?: {
-        x: number;
-        y: number;
-    } | MouseEvent | TouchEvent;
-    content?: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult);
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    hideActions?: boolean;
-    targetContainer?: HTMLElement;
-}
-/**
- * Prompt dialog options
- */
-export interface PromptOptions {
-    title?: string;
-    message?: string;
-    label?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    inputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    confirmText?: string;
-    cancelText?: string;
-    position?: {
-        x: number;
-        y: number;
-    } | MouseEvent | TouchEvent;
-}
-/**
- * Dialog service for centralized dialog management.
- * Uses a single unified SchmancyDialog component for all dialog types.
- */
-export declare class DialogService {
-    private static instance;
-    private static DEFAULT_OPTIONS;
-    private activeDialogs;
-    private dialogSubject;
-    private dismissSubject;
-    private lastClickPosition;
-    private clickTrackingInitialized;
-    private constructor();
-    private setupClickPositionTracking;
-    static getInstance(): DialogService;
-    private setupDialogOpeningLogic;
-    private setupDialogDismissLogic;
-    confirm(options: DialogOptions): Promise<boolean>;
-    component(content: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult), options?: Omit<DialogOptions, 'content' | 'message'>): Promise<boolean>;
-    dismiss(): boolean;
-    close(): boolean;
-    ask(message: string, event?: MouseEvent | TouchEvent): Promise<boolean>;
-    danger(options: Omit<DialogOptions, 'variant'>): Promise<boolean>;
-    /**
-     * Shows a prompt dialog with an input field.
-     * Returns the input value if confirmed, null if cancelled.
-     */
-    prompt(options: PromptOptions): Promise<string | null>;
-    private getDefaultPosition;
-}
-/**
- * Global dialog utility. Imperative modal API — open any element as a dialog,
- * or use the built-in `confirm` / `ask` / `danger` prompts. Returns Promises
- * that resolve when the user picks an action.
- *
- * @service
- * @summary Imperative modal dialogs and built-in confirm/ask/danger prompts.
- * @method confirm(options: DialogOptions) - Built-in confirm prompt. Returns Promise<boolean>.
- * @method ask(message, event?) - One-line yes/no prompt anchored to the triggering event.
- * @method danger(options) - Destructive-action confirm styled with the error palette.
- * @method component(element, options?) - Open any element as a modal.
- * @method dismiss(id?) - Dismiss a dialog by id, or the topmost dialog.
- */
-export declare const $dialog: {
-    confirm: (options: DialogOptions) => Promise<boolean>;
-    ask: (message: string, event?: MouseEvent | TouchEvent) => Promise<boolean>;
-    danger: (options: Omit<DialogOptions, "variant">) => Promise<boolean>;
-    prompt: (options: PromptOptions) => Promise<string | null>;
-    component: (content: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult), options?: Omit<DialogOptions, "content" | "message">) => Promise<boolean>;
-    dismiss: () => boolean;
-    close: () => boolean;
-};
-export default DialogService;

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

@@ -1,150 +0,0 @@
-declare const SchmancyDialog_base: import("@mixins/index").Constructor<import("./dialog-base.mixin").IDialogBaseMixin> & CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
-/**
- * Unified dialog component that handles both content-only and confirm modes.
- *
- * @element schmancy-dialog
- * @slot default - Content slot for dialog body (used in content mode)
- * @slot content - Named slot for custom content in confirm mode
- *
- * @example Content mode (no buttons):
- * ```html
- * <schmancy-dialog>
- *   <my-custom-content></my-custom-content>
- * </schmancy-dialog>
- * ```
- *
- * @example Confirm mode (with buttons):
- * ```html
- * <schmancy-dialog
- *   title="Confirm Action"
- *   message="Are you sure?"
- *   confirm-text="Yes"
- *   cancel-text="No"
- * ></schmancy-dialog>
- * ```
- */
-export declare class SchmancyDialog extends SchmancyDialog_base {
-    /**
-     * Unique identifier for the dialog instance
-     */
-    uid: string;
-    /**
-     * Dialog title (enables confirm mode when set)
-     */
-    title: string | undefined;
-    /**
-     * Dialog subtitle
-     */
-    subtitle: string | undefined;
-    /**
-     * Dialog message
-     */
-    message: string | undefined;
-    /**
-     * Text for confirm button (enables confirm mode when set with cancelText)
-     */
-    confirmText: string | undefined;
-    /**
-     * Text for cancel button
-     */
-    cancelText: string | undefined;
-    /**
-     * Dialog variant (affects button colors in confirm mode)
-     */
-    variant: 'default' | 'danger';
-    /**
-     * Whether to hide action buttons (force content mode)
-     */
-    hideActions: boolean;
-    /**
-     * Slotted children in the named "content" slot (confirm mode custom content)
-     */
-    private _contentSlotElements;
-    /**
-     * Ref to the confirm mode wrapper div
-     */
-    private _confirmDialogRef;
-    /**
-     * Ref to the content mode section element
-     */
-    private _contentDialogRef;
-    /**
-     * Ref to the backdrop element for animations
-     */
-    private _backdropRef;
-    /**
-     * Ref to the drag handle element for swipe gestures
-     */
-    private _dragHandleRef;
-    /**
-     * Stable per-instance id used for ARIA labelledby/describedby wiring
-     */
-    private readonly _a11yId;
-    private get _titleId();
-    private get _descId();
-    /**
-     * Return the dialog element for positioning/size measurement.
-     * In content mode, returns the first slotted child (the actual component).
-     * In confirm mode, returns the wrapper div.
-     */
-    protected getDialogElement(): HTMLElement | null;
-    /**
-     * Return the backdrop element for animations
-     */
-    protected getBackdropElement(): HTMLElement | null;
-    /**
-     * Return the drag handle element for swipe gestures
-     */
-    protected getDragHandleElement(): HTMLElement | null;
-    /**
-     * Check if dialog is in confirm mode (has buttons)
-     */
-    private get isConfirmMode();
-    /**
-     * Handle component connection to DOM
-     */
-    connectedCallback(): void;
-    /**
-     * Announce this dialog's presence to the service
-     */
-    private announcePresence;
-    /**
-     * Handle confirm action
-     */
-    private handleConfirm;
-    /**
-     * Handle cancel/close action
-     */
-    private handleClose;
-    /**
-     * Render drag handle for mobile bottom sheet
-     */
-    private renderDragHandle;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Static helper for confirm dialogs
-     */
-    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>;
-    /**
-     * Simple shorthand - just pass message and optionally an event
-     */
-    static ask(message: string, event?: MouseEvent | TouchEvent): Promise<boolean>;
-}
-export { SchmancyDialog as ConfirmDialog };
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-dialog': SchmancyDialog;
-    }
-}

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

@@ -1,3 +0,0 @@
-export * from './dialog-service';
-export * from './dialog.component';
-export * from './dialog-base.mixin';

package/types/src/sheet/hook.d.ts

@@ -1,5 +0,0 @@
-interface WatchOptions {
-    waitUntilFirstUpdate?: boolean;
-}
-export declare function on(propName: string, options?: WatchOptions): (protoOrDescriptor: any, name: string) => any;
-export {};

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

@@ -1,2 +0,0 @@
-export * from './sheet.service';
-export * from './sheet';

package/types/src/sheet/sheet.d.ts

@@ -1,29 +0,0 @@
-import { SchmancyElement } from '@mixins/index';
-import { SchmancySheetPosition } from './sheet.service';
-export default class SchmancySheet extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    open: boolean;
-    position: SchmancySheetPosition;
-    persist: boolean;
-    lock: boolean;
-    handleHistory: boolean;
-    private lastFocusedElement;
-    private overlayEl;
-    private contentEl;
-    onOpenChange(_oldValue: boolean, newValue: boolean): void;
-    private animateIn;
-    private animateOut;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private setupEventListeners;
-    private setBackgroundInert;
-    closeSheet(): void;
-    focus(): void;
-    private handleOverlayClick;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-sheet': SchmancySheet;
-    }
-}

package/types/src/sheet/sheet.service.d.ts

@@ -1,65 +0,0 @@
-import { Subject } from 'rxjs';
-import { ComponentType } from '../area/router.types';
-export declare enum SchmancySheetPosition {
-    Side = "side",
-    Bottom = "bottom"
-}
-export type SheetConfig = {
-    component: ComponentType;
-    uid?: string;
-    position?: SchmancySheetPosition;
-    persist?: boolean;
-    close?: () => void;
-    lock?: boolean;
-    onBeforeOpen?: (component: HTMLElement) => void;
-    onAfterOpen?: (component: HTMLElement) => void;
-    props?: Record<string, unknown>;
-};
-type BottomSheeetTarget = SheetConfig;
-declare class BottomSheetService {
-    bottomSheet: Subject<SheetConfig>;
-    private activeSheets;
-    private popStateListenerActive;
-    constructor();
-    /**
-     * Sets up the main sheet opening logic
-     */
-    private setupSheetOpeningLogic;
-    /**
-     * Sets up the popstate listener to handle browser back button
-     */
-    private setupPopStateListener;
-    /**
-     * Dismiss a sheet by uid, or dismiss the most recently opened sheet if no uid provided
-     */
-    dismiss(uid?: string): void;
-    /**
-     * Open a sheet with the given target configuration
-     * @deprecated Use `push` instead for consistency with area router API
-     */
-    open(target: BottomSheeetTarget): void;
-    /**
-     * Push a component to the sheet (recommended method)
-     * Follows the same API pattern as area.push for consistency
-     */
-    push(target: BottomSheeetTarget): void;
-    /**
-     * Check if a sheet is currently open by uid
-     */
-    isOpen(uid: string): boolean;
-    /**
-     * Close all open sheets
-     */
-    closeAll(): void;
-}
-/**
- * Bottom / side sheet service. Mounts any element as a sheet with a chosen
- * position (see `SchmancySheetPosition` enum).
- *
- * @service
- * @summary Imperative bottom / side sheet surface.
- * @method open({ component, position? }) - Mount an element as a sheet.
- * @method dismiss(id?) - Dismiss a sheet by id, or the topmost.
- */
-export declare const sheet: BottomSheetService;
-export {};