@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/form/fields/chips/input-chip.ts

@@ -30,87 +30,89 @@ import { map, takeUntil, tap } from 'rxjs/operators'
  */
 @customElement('schmancy-input-chip')
 export class SchmancyInputChip extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-block;
-		outline: none;
-		width: fit-content;
-		min-width: fit-content;
-	}
-
-	:host([disabled]) {
-		pointer-events: none;
-	}
-
-	button {
-		font-family: inherit;
-	}
-
-	.avatar-img {
-		width: 20px;
-		height: 20px;
-		object-fit: cover;
-	}
-
-	/* Material Symbols font for icons */
-	.material-symbols-outlined {
-		font-family: 'Material Symbols Outlined';
-		font-weight: normal;
-		font-style: normal;
-		font-size: 18px;
-		line-height: 1;
-		letter-spacing: normal;
-		text-transform: none;
-		display: inline-block;
-		white-space: nowrap;
-		word-wrap: normal;
-		direction: ltr;
-		-webkit-font-smoothing: antialiased;
-		text-rendering: optimizeLegibility;
-		-moz-osx-font-smoothing: grayscale;
-		font-feature-settings: 'liga';
-		vertical-align: middle;
-	}
-
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: rgba(0, 0, 0, 0.08);
-		pointer-events: none;
-	}
-
-	@keyframes ripple {
-		to {
-			transform: scale(4);
-			opacity: 0;
-		}
-	}
-
-	/* State layer for M3 hover/focus/pressed states */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		background-color: currentColor;
-		opacity: 0;
-		transition: opacity 200ms ease;
-	}
-
-	:host(:not([disabled])) .chip-container:hover .state-layer {
-		opacity: 0.08;
-	}
-
-	:host(:not([disabled])) .chip-container:focus-visible .state-layer {
-		opacity: 0.1;
-	}
-
-	:host(:not([disabled])) .chip-container:active .state-layer {
-		opacity: 0.1;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline-block;
+				outline: none;
+				width: fit-content;
+				min-width: fit-content;
+			}
+
+			:host([disabled]) {
+				pointer-events: none;
+			}
+
+			button {
+				font-family: inherit;
+			}
+
+			.avatar-img {
+				width: 20px;
+				height: 20px;
+				object-fit: cover;
+			}
+
+			/* Material Symbols font for icons */
+			.material-symbols-outlined {
+				font-family: 'Material Symbols Outlined';
+				font-weight: normal;
+				font-style: normal;
+				font-size: 18px;
+				line-height: 1;
+				letter-spacing: normal;
+				text-transform: none;
+				display: inline-block;
+				white-space: nowrap;
+				word-wrap: normal;
+				direction: ltr;
+				-webkit-font-smoothing: antialiased;
+				text-rendering: optimizeLegibility;
+				-moz-osx-font-smoothing: grayscale;
+				font-feature-settings: 'liga';
+				vertical-align: middle;
+			}
+
+			.ripple {
+				position: absolute;
+				border-radius: 50%;
+				transform: scale(0);
+				animation: ripple 600ms linear;
+				background-color: rgba(0, 0, 0, 0.08);
+				pointer-events: none;
+			}
+
+			@keyframes ripple {
+				to {
+					transform: scale(4);
+					opacity: 0;
+				}
+			}
+
+			/* State layer for M3 hover/focus/pressed states */
+			.state-layer {
+				position: absolute;
+				inset: 0;
+				border-radius: inherit;
+				pointer-events: none;
+				background-color: currentColor;
+				opacity: 0;
+				transition: opacity 200ms ease;
+			}
+
+			:host(:not([disabled])) .chip-container:hover .state-layer {
+				opacity: 0.08;
+			}
+
+			:host(:not([disabled])) .chip-container:focus-visible .state-layer {
+				opacity: 0.1;
+			}
+
+			:host(:not([disabled])) .chip-container:active .state-layer {
+				opacity: 0.1;
+			}
+		`,
+	]
 	/** Value identifier for the chip */
 	@property({ type: String, reflect: true })
 	value: string = ''
@@ -142,11 +144,11 @@ export class SchmancyInputChip extends SchmancyElement {
 	private pressed$ = new BehaviorSubject<boolean>(false)
 
 	// UI state from combined streams
-	@state()  uiState = {
+	@state() uiState = {
 		chipHover: false,
 		removeHover: false,
 		focused: false,
-		pressed: false
+		pressed: false,
 	}
 
 	// Ripple effects
@@ -184,23 +186,20 @@ export class SchmancyInputChip extends SchmancyElement {
 		super.connectedCallback()
 
 		// Combine all UI state streams
-		combineLatest([
-			this.chipHover$,
-			this.removeHover$,
-			this.focused$,
-			this.pressed$
-		]).pipe(
-			map(([chipHover, removeHover, focused, pressed]) => ({
-				chipHover,
-				removeHover,
-				focused,
-				pressed
-			})),
-			tap(state => {
-				this.uiState = state
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		combineLatest([this.chipHover$, this.removeHover$, this.focused$, this.pressed$])
+			.pipe(
+				map(([chipHover, removeHover, focused, pressed]) => ({
+					chipHover,
+					removeHover,
+					focused,
+					pressed,
+				})),
+				tap(state => {
+					this.uiState = state
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 	}
 
 	private handleChipClick = (e: MouseEvent) => {
@@ -228,7 +227,7 @@ export class SchmancyInputChip extends SchmancyElement {
 				detail: { value: this.value },
 				bubbles: true,
 				composed: true,
-			})
+			}),
 		)
 	}
 
@@ -243,7 +242,7 @@ export class SchmancyInputChip extends SchmancyElement {
 				detail: { value: this.value },
 				bubbles: true,
 				composed: true,
-			})
+			}),
 		)
 	}
 
@@ -262,7 +261,7 @@ export class SchmancyInputChip extends SchmancyElement {
 				bubbles: true,
 				cancelable: true,
 				clientX: 0,
-				clientY: 0
+				clientY: 0,
 			})
 			this.handleChipClick(clickEvent)
 		}
@@ -277,7 +276,7 @@ export class SchmancyInputChip extends SchmancyElement {
 	}
 
 	protected render(): unknown {
-		const hasLeadingIcon = this.avatar || this.icon;
+		const hasLeadingIcon = this.avatar || this.icon
 
 		const chipClasses = {
 			'chip-container': true,
@@ -293,7 +292,7 @@ export class SchmancyInputChip extends SchmancyElement {
 			'select-none': true,
 			'text-sm': true, // M3: 14px Label Large
 			'font-medium': true, // M3: 500 weight
-			'relative': true,
+			relative: true,
 			'overflow-hidden': true,
 
 			// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon
@@ -315,12 +314,12 @@ export class SchmancyInputChip extends SchmancyElement {
 
 			// Disabled state
 			'opacity-38': this.disabled, // M3 disabled opacity
-			'cursor-not-allowed': this.disabled
+			'cursor-not-allowed': this.disabled,
 		}
 
 		const removeButtonClasses = {
 			'size-[18px]': true, // M3: 18px icon size
-			'flex': true,
+			flex: true,
 			'items-center': true,
 			'justify-center': true,
 			'rounded-full': true,
@@ -331,7 +330,7 @@ export class SchmancyInputChip extends SchmancyElement {
 
 			// Hover state for remove button
 			'hover:bg-surface-containerHighest': !this.disabled,
-			'opacity-50': this.disabled
+			'opacity-50': this.disabled,
 		}
 
 		return html`
@@ -351,20 +350,12 @@ export class SchmancyInputChip extends SchmancyElement {
 				aria-label=${this.value}
 			>
 				<!-- Avatar image (if provided) -->
-				${this.avatar ? html`
-					<img
-						src=${this.avatar}
-						alt=""
-						class="avatar-img rounded-full size-5"
-					/>
-				` : ''}
+				${this.avatar ? html` <img src=${this.avatar} alt="" class="avatar-img rounded-full size-5" /> ` : ''}
 
 				<!-- Icon (if provided and no avatar) -->
-				${this.icon && !this.avatar ? html`
-					<span class="material-symbols-outlined text-[18px] shrink-0">
-						${this.icon}
-					</span>
-				` : ''}
+				${this.icon && !this.avatar
+					? html` <span class="material-symbols-outlined text-[18px] shrink-0"> ${this.icon} </span> `
+					: ''}
 
 				<!-- Chip content -->
 				<span class="text-sm font-medium leading-5">
@@ -372,29 +363,26 @@ export class SchmancyInputChip extends SchmancyElement {
 				</span>
 
 				<!-- Remove button (shown by default for input chips) -->
-				${this.removable ? html`
-					<button
-						class=${classMap(removeButtonClasses)}
-						@click=${this.handleRemove}
-						@mouseenter=${() => this.removeHover$.next(true)}
-						@mouseleave=${() => this.removeHover$.next(false)}
-						aria-label="Remove"
-						tabindex="-1"
-						?disabled=${this.disabled}
-					>
-						<span class="material-symbols-outlined text-[18px]">
-							close
-						</span>
-					</button>
-				` : ''}
+				${this.removable
+					? html`
+							<button
+								class=${classMap(removeButtonClasses)}
+								@click=${this.handleRemove}
+								@mouseenter=${() => this.removeHover$.next(true)}
+								@mouseleave=${() => this.removeHover$.next(false)}
+								aria-label="Remove"
+								tabindex="-1"
+								?disabled=${this.disabled}
+							>
+								<span class="material-symbols-outlined text-[18px]"> close </span>
+							</button>
+						`
+					: ''}
 
 				<!-- Ripple effects -->
-				${this.ripples.map(ripple => html`
-					<span
-						class="ripple"
-						style="left: ${ripple.x}px; top: ${ripple.y}px;"
-					></span>
-				`)}
+				${this.ripples.map(
+					ripple => html` <span class="ripple" style="left: ${ripple.x}px; top: ${ripple.y}px;"></span> `,
+				)}
 
 				<!-- State layer for M3 hover/focus/pressed states -->
 				<div class="state-layer"></div>
@@ -410,4 +398,4 @@ declare global {
 }
 
 export type InputChipClickEvent = { value: string }
-export type InputChipRemoveEvent = { value: string }
+export type InputChipRemoveEvent = { value: string }

package/src/form/fields/chips/suggestion-chip.ts

@@ -16,57 +16,59 @@ import { takeUntil } from 'rxjs/operators'
  */
 @customElement('schmancy-suggestion-chip')
 export class SchmancySuggestionChip extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-block;
-		outline: none;
-		width: fit-content;
-		min-width: fit-content;
-	}
+	static styles = [
+		css`
+			:host {
+				display: inline-block;
+				outline: none;
+				width: fit-content;
+				min-width: fit-content;
+			}
 
-	:host([disabled]) {
-		pointer-events: none;
-	}
+			:host([disabled]) {
+				pointer-events: none;
+			}
 
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: rgba(0, 0, 0, 0.08);
-		pointer-events: none;
-	}
+			.ripple {
+				position: absolute;
+				border-radius: 50%;
+				transform: scale(0);
+				animation: ripple 600ms linear;
+				background-color: rgba(0, 0, 0, 0.08);
+				pointer-events: none;
+			}
 
-	@keyframes ripple {
-		to {
-			transform: scale(4);
-			opacity: 0;
-		}
-	}
+			@keyframes ripple {
+				to {
+					transform: scale(4);
+					opacity: 0;
+				}
+			}
 
-	/* State layer for M3 hover/focus/pressed states */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		background-color: currentColor;
-		opacity: 0;
-		transition: opacity 200ms ease;
-	}
+			/* State layer for M3 hover/focus/pressed states */
+			.state-layer {
+				position: absolute;
+				inset: 0;
+				border-radius: inherit;
+				pointer-events: none;
+				background-color: currentColor;
+				opacity: 0;
+				transition: opacity 200ms ease;
+			}
 
-	:host(:not([disabled])) button:hover .state-layer {
-		opacity: 0.08;
-	}
+			:host(:not([disabled])) button:hover .state-layer {
+				opacity: 0.08;
+			}
 
-	:host(:not([disabled])) button:focus-visible .state-layer {
-		opacity: 0.1;
-	}
+			:host(:not([disabled])) button:focus-visible .state-layer {
+				opacity: 0.1;
+			}
 
-	:host(:not([disabled])) button:active .state-layer {
-		opacity: 0.1;
-	}
-`];
+			:host(:not([disabled])) button:active .state-layer {
+				opacity: 0.1;
+			}
+		`,
+	]
 	/** Value identifier for the chip */
 	@property({ reflect: true }) value = ''
 
@@ -103,15 +105,13 @@ export class SchmancySuggestionChip extends SchmancyElement {
 		// Stream management for future extensions
 		// Currently, states are handled directly in event handlers
 		// This pipeline can be extended for more complex state interactions
-		combineLatest([
-			this.hover$,
-			this.pressed$,
-			this.focused$
-		]).pipe(
-			// States are managed through event handlers directly
-			// This pipeline is kept for potential future state combinations
-			takeUntil(this.disconnecting)
-		).subscribe()
+		combineLatest([this.hover$, this.pressed$, this.focused$])
+			.pipe(
+				// States are managed through event handlers directly
+				// This pipeline is kept for potential future state combinations
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 	}
 
 	private handleClick = (e: MouseEvent) => {
@@ -143,11 +143,13 @@ export class SchmancySuggestionChip extends SchmancyElement {
 		}
 
 		// Dispatch action event
-		this.dispatchEvent(new CustomEvent('action', {
-			detail: { value: this.value },
-			bubbles: true,
-			composed: true
-		}))
+		this.dispatchEvent(
+			new CustomEvent('action', {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true,
+			}),
+		)
 	}
 
 	private handleKeyDown = (e: KeyboardEvent) => {
@@ -162,7 +164,7 @@ export class SchmancySuggestionChip extends SchmancyElement {
 				bubbles: true,
 				cancelable: true,
 				clientX: 0,
-				clientY: 0
+				clientY: 0,
 			})
 			this.handleClick(clickEvent)
 
@@ -179,10 +181,10 @@ export class SchmancySuggestionChip extends SchmancyElement {
 	}
 
 	protected render(): unknown {
-		const hasIcon = !!this.icon;
+		const hasIcon = !!this.icon
 
 		const classes = {
-			'relative': true,
+			relative: true,
 			'inline-flex': true,
 			'items-center': true,
 			'gap-2': true,
@@ -214,7 +216,7 @@ export class SchmancySuggestionChip extends SchmancyElement {
 
 			// Disabled
 			'opacity-38': this.disabled, // M3 disabled opacity
-			'cursor-not-allowed': this.disabled
+			'cursor-not-allowed': this.disabled,
 		}
 
 		return html`
@@ -235,20 +237,15 @@ export class SchmancySuggestionChip extends SchmancyElement {
 				aria-disabled=${this.disabled}
 				aria-label=${this.value}
 			>
-				${this.icon ? html`
-					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
-				` : ''}
+				${this.icon ? html` <schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon> ` : ''}
 				<span class="text-sm font-medium leading-5">
 					<slot></slot>
 				</span>
 
 				<!-- Ripple effects -->
-				${this.ripples.map(ripple => html`
-					<span
-						class="ripple"
-						style="left: ${ripple.x}px; top: ${ripple.y}px;"
-					></span>
-				`)}
+				${this.ripples.map(
+					ripple => html` <span class="ripple" style="left: ${ripple.x}px; top: ${ripple.y}px;"></span> `,
+				)}
 
 				<!-- State layer for M3 hover/focus/pressed states -->
 				<div class="state-layer"></div>
@@ -263,4 +260,4 @@ declare global {
 	}
 }
 
-export type SuggestionChipActionEvent = { value: string }
+export type SuggestionChipActionEvent = { value: string }