@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/navigation-rail/navigation-rail.ts

@@ -21,7 +21,6 @@ export type NavigationRailMenuClickEvent = CustomEvent<void>
 
 export type NavigationRailFabClickEvent = CustomEvent<void>
 
-
 export type LabelVisibility = 'all' | 'selected' | 'none'
 
 /**
@@ -147,7 +146,6 @@ export class SchmancyNavigationRail extends SchmancyElement {
 	@property({ type: Boolean, reflect: true })
 	expanded = false
 
-
 	// State
 	@state()
 	private focusedIndex = -1
@@ -193,13 +191,15 @@ export class SchmancyNavigationRail extends SchmancyElement {
 			.subscribe()
 
 		// Listen to fullscreen events
-		fromEvent(window, 'fullscreen').pipe(
-			tap((event: Event) => {
-				const customEvent = event as CustomEvent
-				this.isFullscreen = customEvent.detail
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		fromEvent(window, 'fullscreen')
+			.pipe(
+				tap((event: Event) => {
+					const customEvent = event as CustomEvent
+					this.isFullscreen = customEvent.detail
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Watch the host's `class` attribute for layout utilities and forward them
 		// to the inner <nav>. The Observable wraps MutationObserver so teardown is
@@ -215,11 +215,15 @@ export class SchmancyNavigationRail extends SchmancyElement {
 			const mo = new MutationObserver(() => subscriber.next(extract()))
 			mo.observe(this, { attributes: true, attributeFilter: ['class'] })
 			return () => mo.disconnect()
-		}).pipe(
-			distinctUntilChanged(),
-			tap(layoutClasses => { this.hostLayoutClasses = layoutClasses }),
-			takeUntil(this.disconnecting),
-		).subscribe()
+		})
+			.pipe(
+				distinctUntilChanged(),
+				tap(layoutClasses => {
+					this.hostLayoutClasses = layoutClasses
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Listen for navigate events from child items
 		this.setupNavigateListener()
@@ -347,7 +351,6 @@ export class SchmancyNavigationRail extends SchmancyElement {
 		this.expanded = !this.expanded
 	}
 
-
 	private handleKeyDown(event: KeyboardEvent) {
 		const items = this.navigationItems
 		if (items.length === 0) return
@@ -453,7 +456,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 		// Header section classes - hidden when no content
 		const headerClasses = this.classMap({
 			'flex flex-col items-center gap-1': true,
-			'hidden': !this.hasHeaderContent,
+			hidden: !this.hasHeaderContent,
 		})
 
 		// Navigation container <nav> — holds a single <schmancy-scroll> child, so only
@@ -484,9 +487,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 		})
 
 		return html`
-			<div
-				class=${hostClasses}
-			>
+			<div class=${hostClasses}>
 				<div class=${railClasses} part="rail">
 					<div class=${headerClasses} part="header">
 						<slot name="fab" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>
@@ -530,9 +531,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 		const headerDiv = this.shadowRoot?.querySelector('[part="header"]')
 		if (headerDiv) {
 			const allSlots = headerDiv.querySelectorAll('slot')
-			this.hasHeaderContent = Array.from(allSlots).some(s =>
-				s.assignedNodes({ flatten: true }).length > 0
-			)
+			this.hasHeaderContent = Array.from(allSlots).some(s => s.assignedNodes({ flatten: true }).length > 0)
 		}
 	}
 

package/src/notification/index.ts

@@ -1,6 +1,6 @@
-export { default as SchmancyNotification } from './notification'
-export type { NotificationType } from './notification'
-export { $notify } from './notification-service'
-export type { NotificationOptions } from './notification-service'
-export { notify, notifyProgress } from './notify'
-export type { NotifyOptions } from './notify'
+export { default as SchmancyNotification } from './notification'
+export type { NotificationType } from './notification'
+export { $notify } from './notification-service'
+export type { NotificationOptions } from './notification-service'
+export { notify, notifyProgress } from './notify'
+export type { NotifyOptions } from './notify'

package/src/notification/notification-service.ts

@@ -136,7 +136,7 @@ export const $notify = {
 		show({ message, duration: 0, ...options }),
 
 	dismiss: (id?: string): void => {
-		const targetId = id ? (notificationStack.splice(notificationStack.indexOf(id), 1)[0]) : notificationStack.pop()
+		const targetId = id ? notificationStack.splice(notificationStack.indexOf(id), 1)[0] : notificationStack.pop()
 		if (targetId && currentNotification?.id === targetId) currentNotification.close()
 	},
 
@@ -147,4 +147,3 @@ export const $notify = {
 		if (options.type !== undefined) currentNotification.type = options.type
 	},
 }
-

package/src/notification/notification.scss

@@ -110,7 +110,11 @@
 
 /* Body message */
 .message {
-	font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+	font-family:
+		ui-sans-serif,
+		system-ui,
+		-apple-system,
+		sans-serif;
 	font-size: 13px;
 	line-height: 1.45;
 	opacity: 0.72;

package/src/notification/notification.ts

@@ -213,9 +213,7 @@ export default class SchmancyNotification extends SchmancyElement {
 					<div class="message">${this.message}</div>
 				</div>
 				${this.closable
-					? html`
-							<button class="close" aria-label="Close notification" @click=${this.close}>&#215;</button>
-						`
+					? html` <button class="close" aria-label="Close notification" @click=${this.close}>&#215;</button> `
 					: ''}
 			</div>
 		`

package/src/notification/notify.ts

@@ -1,207 +1,204 @@
-import { Observable, tap, finalize, catchError } from 'rxjs'
-import { $notify, NotificationOptions } from './notification-service'
-
-export interface NotifyOptions {
-	/**
-	 * Message to show while the operation is in progress
-	 */
-	loadingMessage?: string
-	/**
-	 * Message to show when the operation completes successfully
-	 */
-	successMessage?: string
-	/**
-	 * Message to show when the operation fails (can be a function to format error)
-	 */
-	errorMessage?: string | ((error: any) => string)
-	/**
-	 * Type of notification for loading state
-	 */
-	loadingType?: NotificationOptions['type']
-	/**
-	 * Type of notification for success state
-	 */
-	successType?: NotificationOptions['type']
-	/**
-	 * Type of notification for error state
-	 */
-	errorType?: NotificationOptions['type']
-	/**
-	 * Whether to auto-dismiss the loading notification on complete/error
-	 */
-	autoDismissLoading?: boolean
-	/**
-	 * Duration for success notification (ms). Use 0 for persistent
-	 */
-	successDuration?: number
-	/**
-	 * Duration for error notification (ms). Use 0 for persistent
-	 */
-	errorDuration?: number
-}
-
-/**
- * Wraps an Observable with notification lifecycle management.
- * Shows a loading notification with progress indicator, then auto-dismisses and shows success/error notification.
- * 
- * @example
- * ```typescript
- * // Basic usage with progress indicator
- * someApiCall().pipe(
- *   notify({
- *     loadingMessage: 'Loading data...',
- *     successMessage: 'Data loaded successfully!',
- *     errorMessage: 'Failed to load data'
- *   })
- * ).subscribe()
- * 
- * // With custom durations
- * saveData().pipe(
- *   notify({
- *     loadingMessage: 'Saving...',
- *     successMessage: 'Saved!',
- *     successDuration: 5000, // Success stays for 5 seconds
- *     errorMessage: (err) => `Save failed: ${err.message}`,
- *     errorDuration: 0 // Error is persistent until dismissed
- *   })
- * ).subscribe()
- * 
- * // Full configuration example
- * uploadFile().pipe(
- *   notify({
- *     loadingMessage: 'Uploading file...',
- *     loadingType: 'info',
- *     successMessage: 'Upload complete!',
- *     successType: 'success',
- *     successDuration: 3000,
- *     errorMessage: (err) => `Upload failed: ${err.message}`,
- *     errorType: 'error',
- *     errorDuration: 10000,
- *     autoDismissLoading: true
- *   })
- * ).subscribe()
- * ```
- */
-export function notify<T>(options: NotifyOptions) {
-	return (source: Observable<T>): Observable<T> => {
-		let loadingNotificationId: string | undefined
-
-		// Show loading notification if message provided
-		if (options.loadingMessage) {
-			loadingNotificationId = $notify.show({
-				message: options.loadingMessage,
-				type: options.loadingType || 'info',
-				duration: 0, // Persistent until dismissed
-				showProgress: true, // Show indeterminate progress by default
-			})
-		}
-
-		return source.pipe(
-			tap((value) => {
-				// Check if the emitted value contains progress information
-				// Common patterns: { progress: number }, { loaded: number, total: number }, etc.
-				if (loadingNotificationId && typeof value === 'object' && value !== null) {
-					let progress: number | undefined
-					
-					// Check for different progress patterns
-					if ('progress' in value && typeof (value as any).progress === 'number') {
-						progress = (value as any).progress
-					} else if ('loaded' in value && 'total' in value) {
-						const loaded = (value as any).loaded
-						const total = (value as any).total
-						if (typeof loaded === 'number' && typeof total === 'number' && total > 0) {
-							progress = (loaded / total) * 100
-						}
-					}
-					
-					// Update notification with progress if available
-					if (progress !== undefined) {
-						// We need to update the progress of the notification
-						// For now, we'll update the message to show progress percentage
-						$notify.update?.(loadingNotificationId, {
-							message: `${options.loadingMessage} (${Math.round(progress)}%)`,
-						})
-					}
-				}
-				
-				// Check if this is the final success emission (not a progress update)
-				// Typically file uploads emit progress events then a final result
-				const isProgressUpdate = typeof value === 'object' && value !== null && 
-					('progress' in value || ('loaded' in value && 'total' in value))
-				
-				if (!isProgressUpdate) {
-					// On successful final emission, dismiss loading and show success
-					if (loadingNotificationId && options.autoDismissLoading !== false) {
-						$notify.dismiss(loadingNotificationId)
-						loadingNotificationId = undefined
-					}
-
-					if (options.successMessage) {
-						$notify.show({
-							message: options.successMessage,
-							type: options.successType || 'success',
-							duration: options.successDuration ?? 2000,
-						})
-					}
-				}
-			}),
-			catchError((error) => {
-				// On error, dismiss loading and show error
-				if (loadingNotificationId && options.autoDismissLoading !== false) {
-					$notify.dismiss(loadingNotificationId)
-					loadingNotificationId = undefined
-				}
-
-				if (options.errorMessage) {
-					const message = typeof options.errorMessage === 'function' 
-						? options.errorMessage(error)
-						: options.errorMessage
-					
-					$notify.show({
-						message,
-						type: options.errorType || 'error',
-						duration: options.errorDuration ?? 3000,
-					})
-				}
-
-				// Re-throw the error to maintain the error flow
-				throw error
-			}),
-			finalize(() => {
-				// Clean up any remaining loading notification
-				if (loadingNotificationId && options.autoDismissLoading !== false) {
-					$notify.dismiss(loadingNotificationId)
-				}
-			})
-		)
-	}
-}
-
-/**
- * Simplified version for API calls that just need loading and auto-dismiss.
- * Perfect for fire-and-forget operations where you want to show progress.
- * 
- * @example
- * ```typescript
- * downloadData().pipe(
- *   notifyProgress('Downloading...')
- * ).subscribe()
- * 
- * // With custom messages
- * saveDocument().pipe(
- *   notifyProgress('Saving document...', 'Document saved!', 'Save failed')
- * ).subscribe()
- * ```
- */
-export function notifyProgress<T>(
-	loadingMessage: string,
-	successMessage?: string,
-	errorMessage?: string
-) {
-	return notify<T>({
-		loadingMessage,
-		successMessage: successMessage || undefined,
-		errorMessage: errorMessage || undefined,
-		autoDismissLoading: true,
-	})
-}
+import { Observable, tap, finalize, catchError } from 'rxjs'
+import { $notify, NotificationOptions } from './notification-service'
+
+export interface NotifyOptions {
+	/**
+	 * Message to show while the operation is in progress
+	 */
+	loadingMessage?: string
+	/**
+	 * Message to show when the operation completes successfully
+	 */
+	successMessage?: string
+	/**
+	 * Message to show when the operation fails (can be a function to format error)
+	 */
+	errorMessage?: string | ((error: any) => string)
+	/**
+	 * Type of notification for loading state
+	 */
+	loadingType?: NotificationOptions['type']
+	/**
+	 * Type of notification for success state
+	 */
+	successType?: NotificationOptions['type']
+	/**
+	 * Type of notification for error state
+	 */
+	errorType?: NotificationOptions['type']
+	/**
+	 * Whether to auto-dismiss the loading notification on complete/error
+	 */
+	autoDismissLoading?: boolean
+	/**
+	 * Duration for success notification (ms). Use 0 for persistent
+	 */
+	successDuration?: number
+	/**
+	 * Duration for error notification (ms). Use 0 for persistent
+	 */
+	errorDuration?: number
+}
+
+/**
+ * Wraps an Observable with notification lifecycle management.
+ * Shows a loading notification with progress indicator, then auto-dismisses and shows success/error notification.
+ *
+ * @example
+ * ```typescript
+ * // Basic usage with progress indicator
+ * someApiCall().pipe(
+ *   notify({
+ *     loadingMessage: 'Loading data...',
+ *     successMessage: 'Data loaded successfully!',
+ *     errorMessage: 'Failed to load data'
+ *   })
+ * ).subscribe()
+ *
+ * // With custom durations
+ * saveData().pipe(
+ *   notify({
+ *     loadingMessage: 'Saving...',
+ *     successMessage: 'Saved!',
+ *     successDuration: 5000, // Success stays for 5 seconds
+ *     errorMessage: (err) => `Save failed: ${err.message}`,
+ *     errorDuration: 0 // Error is persistent until dismissed
+ *   })
+ * ).subscribe()
+ *
+ * // Full configuration example
+ * uploadFile().pipe(
+ *   notify({
+ *     loadingMessage: 'Uploading file...',
+ *     loadingType: 'info',
+ *     successMessage: 'Upload complete!',
+ *     successType: 'success',
+ *     successDuration: 3000,
+ *     errorMessage: (err) => `Upload failed: ${err.message}`,
+ *     errorType: 'error',
+ *     errorDuration: 10000,
+ *     autoDismissLoading: true
+ *   })
+ * ).subscribe()
+ * ```
+ */
+export function notify<T>(options: NotifyOptions) {
+	return (source: Observable<T>): Observable<T> => {
+		let loadingNotificationId: string | undefined
+
+		// Show loading notification if message provided
+		if (options.loadingMessage) {
+			loadingNotificationId = $notify.show({
+				message: options.loadingMessage,
+				type: options.loadingType || 'info',
+				duration: 0, // Persistent until dismissed
+				showProgress: true, // Show indeterminate progress by default
+			})
+		}
+
+		return source.pipe(
+			tap(value => {
+				// Check if the emitted value contains progress information
+				// Common patterns: { progress: number }, { loaded: number, total: number }, etc.
+				if (loadingNotificationId && typeof value === 'object' && value !== null) {
+					let progress: number | undefined
+
+					// Check for different progress patterns
+					if ('progress' in value && typeof (value as any).progress === 'number') {
+						progress = (value as any).progress
+					} else if ('loaded' in value && 'total' in value) {
+						const loaded = (value as any).loaded
+						const total = (value as any).total
+						if (typeof loaded === 'number' && typeof total === 'number' && total > 0) {
+							progress = (loaded / total) * 100
+						}
+					}
+
+					// Update notification with progress if available
+					if (progress !== undefined) {
+						// We need to update the progress of the notification
+						// For now, we'll update the message to show progress percentage
+						$notify.update?.(loadingNotificationId, {
+							message: `${options.loadingMessage} (${Math.round(progress)}%)`,
+						})
+					}
+				}
+
+				// Check if this is the final success emission (not a progress update)
+				// Typically file uploads emit progress events then a final result
+				const isProgressUpdate =
+					typeof value === 'object' &&
+					value !== null &&
+					('progress' in value || ('loaded' in value && 'total' in value))
+
+				if (!isProgressUpdate) {
+					// On successful final emission, dismiss loading and show success
+					if (loadingNotificationId && options.autoDismissLoading !== false) {
+						$notify.dismiss(loadingNotificationId)
+						loadingNotificationId = undefined
+					}
+
+					if (options.successMessage) {
+						$notify.show({
+							message: options.successMessage,
+							type: options.successType || 'success',
+							duration: options.successDuration ?? 2000,
+						})
+					}
+				}
+			}),
+			catchError(error => {
+				// On error, dismiss loading and show error
+				if (loadingNotificationId && options.autoDismissLoading !== false) {
+					$notify.dismiss(loadingNotificationId)
+					loadingNotificationId = undefined
+				}
+
+				if (options.errorMessage) {
+					const message =
+						typeof options.errorMessage === 'function' ? options.errorMessage(error) : options.errorMessage
+
+					$notify.show({
+						message,
+						type: options.errorType || 'error',
+						duration: options.errorDuration ?? 3000,
+					})
+				}
+
+				// Re-throw the error to maintain the error flow
+				throw error
+			}),
+			finalize(() => {
+				// Clean up any remaining loading notification
+				if (loadingNotificationId && options.autoDismissLoading !== false) {
+					$notify.dismiss(loadingNotificationId)
+				}
+			}),
+		)
+	}
+}
+
+/**
+ * Simplified version for API calls that just need loading and auto-dismiss.
+ * Perfect for fire-and-forget operations where you want to show progress.
+ *
+ * @example
+ * ```typescript
+ * downloadData().pipe(
+ *   notifyProgress('Downloading...')
+ * ).subscribe()
+ *
+ * // With custom messages
+ * saveDocument().pipe(
+ *   notifyProgress('Saving document...', 'Document saved!', 'Save failed')
+ * ).subscribe()
+ * ```
+ */
+export function notifyProgress<T>(loadingMessage: string, successMessage?: string, errorMessage?: string) {
+	return notify<T>({
+		loadingMessage,
+		successMessage: successMessage || undefined,
+		errorMessage: errorMessage || undefined,
+		autoDismissLoading: true,
+	})
+}

package/src/option/index.ts

@@ -1 +1 @@
-export * from './option';
+export * from './option'

package/src/option/option.ts

@@ -10,28 +10,30 @@ import { fromEvent, takeUntil } from 'rxjs'
  */
 @customElement('schmancy-option')
 export default class SchmancyOption extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		cursor: pointer;
-		user-select: none;
-		outline: none;
-	}
-
-	:host(:focus-visible) {
-		outline: 2px solid var(--schmancy-sys-color-primary-default);
-		outline-offset: -2px;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-	:host([disabled]) {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				cursor: pointer;
+				user-select: none;
+				outline: none;
+			}
+
+			:host(:focus-visible) {
+				outline: 2px solid var(--schmancy-sys-color-primary-default);
+				outline-offset: -2px;
+			}
+
+			:host([hidden]) {
+				display: none;
+			}
+
+			:host([disabled]) {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+		`,
+	]
 	/**
 	 * The value of the option, will be used when selected.
 	 */
@@ -89,7 +91,7 @@ export default class SchmancyOption extends SchmancyElement {
 		// Make the option clickable
 		fromEvent<MouseEvent>(this, 'click')
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe((e) => {
+			.subscribe(e => {
 				e.stopPropagation()
 				if (this.disabled) return
 				// Dispatch a custom event with this option's value
@@ -104,7 +106,7 @@ export default class SchmancyOption extends SchmancyElement {
 
 		fromEvent<KeyboardEvent>(this, 'keydown')
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe((e) => {
+			.subscribe(e => {
 				// Handle space and enter as clicks
 				if (e.key === ' ' || e.key === 'Enter') {
 					e.preventDefault()
@@ -127,7 +129,6 @@ export default class SchmancyOption extends SchmancyElement {
 		super.disconnectedCallback()
 	}
 
-
 	render() {
 		const classes = {
 			'py-2': true,