@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/notification/notify.ts

@@ -0,0 +1,207 @@
+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/notification/outlet.ts

@@ -0,0 +1,16 @@
+import { TailwindElement } from '@mixins/index'
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('schmancy-notification-outlet')
+export class SchmancyNotificationOutlet extends TailwindElement() {
+	render() {
+		return html` <slot></slot> `
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-notification-outlet': SchmancyNotificationOutlet
+	}
+}

package/src/option/index.ts

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

package/src/option/option.ts

@@ -0,0 +1,180 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { fromEvent, takeUntil } from 'rxjs'
+
+/**
+ * `schmancy-option` is an option element for schmancy-select and schmancy-autocomplete components.
+ *
+ * @fires click - When the option is clicked
+ */
+@customElement('schmancy-option')
+export default class SchmancyOption extends TailwindElement(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.
+	 */
+	@property({ type: String })
+	value: string = ''
+
+	/**
+	 * The human-readable label for the option.
+	 */
+	@property({ type: String })
+	label: string = ''
+
+	/**
+	 * Whether the option is currently selected.
+	 */
+	@property({ type: Boolean, reflect: true })
+	selected: boolean = false
+
+	/**
+	 * Whether the option is disabled.
+	 */
+	@property({ type: Boolean, reflect: true })
+	disabled: boolean = false
+
+	/**
+	 * Optional group this option belongs to (for option grouping).
+	 */
+	@property({ type: String })
+	group: string = ''
+
+	/**
+	 * Optional icon or image to display before the label.
+	 */
+	@property({ type: String })
+	icon: string = ''
+
+	connectedCallback() {
+		super.connectedCallback()
+
+		// Ensure the option has an ID for accessibility
+		if (!this.id) {
+			this.id = `schmancy-option-${Math.random().toString(36).substring(2, 9)}`
+		}
+
+		// If no label was provided, use the text content or value
+		if (!this.label) {
+			this.label = this.textContent?.trim() || this.value
+		}
+
+		// If value wasn't set but there's text content, use that as the value
+		if (!this.value && this.textContent) {
+			this.value = this.textContent.trim()
+		}
+
+		// Make the option clickable
+		fromEvent<MouseEvent>(this, 'click')
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe((e) => {
+				e.stopPropagation()
+				if (this.disabled) return
+				// Dispatch a custom event with this option's value
+				this.dispatchEvent(
+					new CustomEvent('option-select', {
+						bubbles: true,
+						composed: true,
+						detail: { value: this.value },
+					}),
+				)
+			})
+
+		fromEvent<KeyboardEvent>(this, 'keydown')
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe((e) => {
+				// Handle space and enter as clicks
+				if (e.key === ' ' || e.key === 'Enter') {
+					e.preventDefault()
+					e.stopPropagation()
+					if (this.disabled) return
+					// Dispatch a custom event with this option's value
+					this.dispatchEvent(
+						new CustomEvent('option-select', {
+							bubbles: true,
+							composed: true,
+							detail: { value: this.value },
+						}),
+					)
+				}
+			})
+	}
+
+	disconnectedCallback() {
+		// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)
+		super.disconnectedCallback()
+	}
+
+
+	render() {
+		const classes = {
+			'py-2': true,
+			'px-3': true,
+			rounded: true,
+			'text-sm': true,
+			'w-full': true,
+			flex: true,
+			'items-center': true,
+			'gap-2': true,
+			// Selected state
+			'bg-primary-container': this.selected,
+			'text-primary-onContainer': this.selected,
+			// Hover state (when not selected)
+			'hover:bg-surface-high': !this.selected,
+			// Focus state
+			'focus:outline-none': true,
+		}
+
+		return html`
+			<div class=${this.classMap(classes)} role="option" aria-selected=${this.selected} aria-disabled=${this.disabled}>
+				${this.icon ? html`<span class="icon">${this.icon}</span>` : ''}
+				<span class="flex-1">${this.label || this.value}</span>
+				${this.selected
+					? html`
+							<span class="check">
+								<svg
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<polyline points="20 6 9 17 4 12"></polyline>
+								</svg>
+							</span>
+						`
+					: ''}
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-option': SchmancyOption
+	}
+}

package/src/page/index.ts

@@ -0,0 +1 @@
+export * from './page'

package/src/page/page.ts

@@ -0,0 +1,135 @@
+import { $LitElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import '../layout/scroll/scroll'
+import { Subject, fromEvent, merge, EMPTY, timer, combineLatest } from 'rxjs'
+import { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith } from 'rxjs/operators'
+import { theme } from '../theme/theme.service'
+import { fromResizeObserver } from '../directives/layout'
+
+/**
+ * Native mobile-like page container.
+ * Prevents double-tap zoom, pull-to-refresh, rubber-banding.
+ * Automatically fills remaining viewport height.
+ *
+ * @element schmancy-page
+ *
+ * @example
+ * html`
+ *   <schmancy-page rows="1fr_2fr_auto">
+ *     <header>App Bar</header>
+ *     <main>Scrollable content</main>
+ *     <footer>Navigation</footer>
+ *   </schmancy-page>
+ * `
+ */
+@customElement('schmancy-page')
+export class SchmancyPage extends $LitElement(css`
+	:host {
+		display: block;
+		box-sizing: border-box;
+		touch-action: pan-x pan-y;
+		overscroll-behavior: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+`) {
+	/** Custom grid-template-rows using underscores (e.g. "1fr_2fr_auto") */
+	@property({ type: String })
+	rows = 'auto_1fr_auto'
+
+	@property({ type: Boolean, attribute: 'show-scrollbar' })
+	showScrollbar = false
+
+	@property({ type: Boolean, attribute: 'no-select' })
+	noSelect = false
+
+	private heightDisconnecting$ = new Subject<void>()
+
+	private calculateHeight(): number {
+		const viewportHeight = window.visualViewport?.height ?? window.innerHeight
+		const topOffset = this.getBoundingClientRect().top
+		return Math.max(0, viewportHeight - topOffset)
+	}
+
+	private applyHeight(height: number, bottomPadding: number) {
+		this.style.height = `${height}px`
+		this.style.paddingBottom = `${bottomPadding}px`
+	}
+
+	private setupHeightStream() {
+		// Shared resize stream
+		const windowResize$ = fromEvent(window, 'resize', { passive: true })
+		const viewportEvents$ = window.visualViewport
+			? merge(
+					fromEvent(window.visualViewport, 'resize', { passive: true }),
+					fromEvent(window.visualViewport, 'scroll', { passive: true })
+				)
+			: windowResize$
+		const orientation$ = fromEvent(window, 'orientationchange')
+		const focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(
+			switchMap(() => timer(100))
+		)
+
+		const globalEvents$ = merge(windowResize$, viewportEvents$, orientation$, focusOut$).pipe(
+			debounceTime(16)
+		)
+
+		// Parent resize detects layout shifts
+		const parentResize$ = this.parentElement
+			? fromResizeObserver(this.parentElement)
+			: EMPTY
+
+		// Combine all sources, calculate height and padding, dedupe, apply
+		combineLatest([
+			merge(parentResize$, globalEvents$).pipe(startWith(null)),
+			theme.bottomOffset$,
+			theme.fullscreen$
+		]).pipe(
+			map(([, bottomOffset, isFullscreen]) => ({
+				height: this.calculateHeight(),
+				padding: isFullscreen ? 0 : bottomOffset
+			})),
+			distinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),
+			tap(({ height, padding }) => this.applyHeight(height, padding)),
+			takeUntil(this.heightDisconnecting$)
+		).subscribe()
+	}
+
+	connectedCallback() {
+		super.connectedCallback()
+		// Auto-assign semantic elements to slots
+		this.querySelectorAll(':scope > header').forEach(el => el.setAttribute('slot', 'header'))
+		this.querySelectorAll(':scope > footer').forEach(el => el.setAttribute('slot', 'footer'))
+		// Setup fullHeight on host
+		this.setupHeightStream()
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback()
+		this.heightDisconnecting$.next()
+	}
+
+	protected render() {
+		return html`
+			<section
+				class=${this.classMap({
+					'grid overflow-hidden h-full': true,
+					'select-none': this.noSelect,
+				})}
+				style="grid-template-rows: ${this.rows.replace(/_/g, ' ')}"
+			>
+				<slot name="header"></slot>
+				<schmancy-scroll ?hide=${!this.showScrollbar}><slot></slot></schmancy-scroll>
+				<schmancy-scroll ?hide=${!this.showScrollbar}>
+					<slot name="footer"></slot>
+				</schmancy-scroll>
+			</section>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-page': SchmancyPage
+	}
+}

package/src/progress/index.ts

@@ -0,0 +1 @@
+export * from './progress'

package/src/progress/progress.ts

@@ -0,0 +1,143 @@
+import { $LitElement } from '@mixins/litElement.mixin'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { styleMap } from 'lit/directives/style-map.js'
+
+@customElement('schmancy-progress')
+export default class SchmancyProgress extends $LitElement(css`
+  :host {
+    display: block;
+  }
+
+  /* Blackbird-style indeterminate animation with organic easing */
+  @keyframes indeterminate {
+    0% {
+      left: -30%;
+      width: 20%;
+      opacity: 0.6;
+    }
+    25% {
+      width: 35%;
+      opacity: 1;
+    }
+    50% {
+      left: 40%;
+      width: 30%;
+    }
+    75% {
+      width: 25%;
+      opacity: 0.9;
+    }
+    100% {
+      left: 100%;
+      width: 20%;
+      opacity: 0.6;
+    }
+  }
+
+  .indeterminate-animation {
+    animation: indeterminate 1.8s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
+  }
+`) {
+  @property({ type: Number, reflect: true })
+  value = 0
+
+  @property({ type: Number, reflect: true })
+  max = 100
+
+  @property({ type: Boolean, reflect: true })
+  indeterminate = false
+
+  // M3 aligned track heights: xs=1px, sm=2px, md=4px, lg=8px
+  @property({ type: String, reflect: true })
+  size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
+
+  @property({ type: String, reflect: true })
+  color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' = 'primary'
+
+  @property({ type: Boolean, reflect: true })
+  glass = false
+
+  private get percentage(): number {
+    if (this.indeterminate) return 0
+    return Math.min(100, Math.max(0, (this.value / this.max) * 100))
+  }
+
+  protected render() {
+    const containerClasses = {
+      'w-full': true,
+      'relative': true,
+      'overflow-hidden': true,
+      'rounded-full': true,
+      'h-px': this.size === 'xs',   // 1px - M3 linear indicator track
+      'h-0.5': this.size === 'sm',  // 2px
+      'h-1': this.size === 'md',    // 4px - M3 default
+      'h-2': this.size === 'lg',    // 8px
+      // Glass effect background
+      'backdrop-blur-xl': this.glass,
+      'backdrop-saturate-150': this.glass,
+      'bg-surface-container/20': this.glass && !this.indeterminate,
+      'bg-surface-container': !this.glass,
+      'shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.1)]': this.glass,
+      'border': this.glass,
+      'border-outline/20': this.glass
+    }
+
+    const barClasses = {
+      'h-full': true,
+      'rounded-full': true,
+      'transition-all': true,
+      'duration-300': true,
+      'ease-in-out': true,
+      'relative': true,
+      'bg-primary-default': this.color === 'primary' && !this.glass,
+      'bg-secondary-default': this.color === 'secondary' && !this.glass,
+      'bg-tertiary-default': this.color === 'tertiary' && !this.glass,
+      'bg-error-default': this.color === 'error' && !this.glass,
+      'bg-success-default': this.color === 'success' && !this.glass,
+      'absolute': this.indeterminate,
+      'indeterminate-animation': this.indeterminate
+    }
+
+    const barStyles = this.indeterminate 
+      ? {} 
+      : { width: `${this.percentage}%` }
+
+    // Glass effect bar classes
+    const glassBarClasses = {
+      'backdrop-blur-sm': this.glass,
+      'shadow-[0_0_20px_rgba(0,0,0,0.1)]': this.glass,
+      // Use semi-transparent background colors for glass effect
+      'bg-primary-default/70': this.glass && this.color === 'primary',
+      'bg-secondary-default/70': this.glass && this.color === 'secondary',
+      'bg-tertiary-default/70': this.glass && this.color === 'tertiary',
+      'bg-error-default/70': this.glass && this.color === 'error',
+      'bg-success-default/70': this.glass && this.color === 'success',
+    }
+
+    return html`
+      <div class="${classMap(containerClasses)}">
+        <div 
+          class="${classMap({...barClasses, ...glassBarClasses})}"
+          style="${styleMap(barStyles)}"
+          role="progressbar"
+          aria-valuenow="${this.value}"
+          aria-valuemin="0"
+          aria-valuemax="${this.max}"
+        >
+          ${this.glass ? html`
+            <!-- Glass shine effect -->
+            <div class="absolute inset-0 bg-linear-to-b from-surface-on/20 to-transparent rounded-full"></div>
+          ` : ''}
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'schmancy-progress': SchmancyProgress
+  }
+}

package/src/qr-scanner/index.ts

@@ -0,0 +1 @@
+export * from './qr-scanner'