@mhmo91/schmancy 0.10.36 → 0.10.38

package/src/expand/expand.component.ts

@@ -63,11 +63,11 @@ export default class SchmancyExpand extends SchmancyElement {
 
 	@property({ type: Boolean }) inline = false
 
-	private _summaryRef = createRef<HTMLElement>()
-	private _contentSlotRef = createRef<HTMLSlotElement>()
-	private _root: SchmancyExpandRoot | null = null
-	private _movedNodes: Element[] = []
-	private _currentIndicatorAnim: Animation | undefined
+	private summaryRef = createRef<HTMLElement>()
+	private contentSlotRef = createRef<HTMLSlotElement>()
+	private root: SchmancyExpandRoot | null = null
+	private movedNodes: Element[] = []
+	private currentIndicatorAnim: Animation | undefined
 
 	connectedCallback() {
 		super.connectedCallback()
@@ -77,7 +77,7 @@ export default class SchmancyExpand extends SchmancyElement {
 			.pipe(
 				filter(e => e.key === 'Escape'),
 				filter(() => this.open),
-				tap(() => void this._handleClose()),
+				tap(() => void this.handleClose()),
 				takeUntil(this.disconnecting),
 			)
 			.subscribe()
@@ -86,8 +86,8 @@ export default class SchmancyExpand extends SchmancyElement {
 		fromEvent<PointerEvent>(document, 'pointerdown')
 			.pipe(
 				filter(() => this.open),
-				filter(e => !!this._root && !e.composedPath().includes(this._root)),
-				tap(() => void this._handleClose()),
+				filter(e => !!this.root && !e.composedPath().includes(this.root)),
+				tap(() => void this.handleClose()),
 				takeUntil(this.disconnecting),
 			)
 			.subscribe()
@@ -95,17 +95,17 @@ export default class SchmancyExpand extends SchmancyElement {
 
 	disconnectedCallback() {
 		super.disconnectedCallback()
-		if (this._movedNodes.length > 0) {
-			this._movedNodes.forEach(n => this.appendChild(n))
-			this._movedNodes = []
+		if (this.movedNodes.length > 0) {
+			this.movedNodes.forEach(n => this.appendChild(n))
+			this.movedNodes = []
 		}
-		if (this._root && this._root.children.length === 0) {
-			this._root.remove()
-			this._root = null
+		if (this.root && this.root.children.length === 0) {
+			this.root.remove()
+			this.root = null
 		}
 	}
 
-	private async _getOrCreateRoot(): Promise<SchmancyExpandRoot> {
+	private async getOrCreateRoot(): Promise<SchmancyExpandRoot> {
 		const theme = await lastValueFrom(this.discover<HTMLElement>('schmancy-theme'))
 		const container: HTMLElement = theme ?? document.querySelector('schmancy-theme') ?? document.body
 		let root = container.querySelector('schmancy-expand-root') as SchmancyExpandRoot | null
@@ -118,47 +118,47 @@ export default class SchmancyExpand extends SchmancyElement {
 
 	/** Close the expand portal, animating back to the summary position. */
 	public close(): void {
-		void this._handleClose()
+		void this.handleClose()
 	}
 
 	/** Programmatically open the expand portal. */
 	public expand(): void {
 		if (this.open) return
-		void this._expand()
+		void this.expandPortal()
 	}
 
 	protected override updated(changed: Map<PropertyKey, unknown>) {
 		super.updated(changed)
-		if (changed.has('open') && this.open && !this.inline && !this._root) {
-			void this._expand()
+		if (changed.has('open') && this.open && !this.inline && !this.root) {
+			void this.expandPortal()
 		}
 	}
 
-	private _toggle() {
+	private toggle() {
 		if (this.inline) {
 			this.open = !this.open
-			this._animateIndicator(this.open)
+			this.animateIndicator(this.open)
 		} else if (!this.open) {
-			void this._expand()
+			void this.expandPortal()
 		}
 	}
 
-	private _handleSummaryClick(e: MouseEvent) {
+	private handleSummaryClick(e: MouseEvent) {
 		e.preventDefault()
-		this._toggle()
+		this.toggle()
 	}
 
-	private async _expand() {
+	private async expandPortal() {
 		if (this.inline) {
 			this.open = true
-			this._animateIndicator(true)
+			this.animateIndicator(true)
 			return
 		}
 
-		const root = await this._getOrCreateRoot()
-		this._root = root
-		const summary = this._summaryRef.value
-		const contentSlot = this._contentSlotRef.value
+		const root = await this.getOrCreateRoot()
+		this.root = root
+		const summary = this.summaryRef.value
+		const contentSlot = this.contentSlotRef.value
 		if (!summary || !contentSlot) return
 
 		const summaryRect = summary.getBoundingClientRect()
@@ -167,44 +167,44 @@ export default class SchmancyExpand extends SchmancyElement {
 
 		root.prepare(summaryRect, this, this.hideIndicator, this.backdrop)
 
-		this._movedNodes = [...nodes]
-		this._movedNodes.forEach(n => root.appendChild(n))
+		this.movedNodes = [...nodes]
+		this.movedNodes.forEach(n => root.appendChild(n))
 
 		root.triggerOpen()
 
-		this._animateIndicator(true)
+		this.animateIndicator(true)
 		this.open = true
 	}
 
-	async _handleClose() {
+	async handleClose() {
 		if (this.inline) {
-			this._animateIndicator(false)
+			this.animateIndicator(false)
 			this.open = false
 			return
 		}
 
-		const root = this._root
-		const summary = this._summaryRef.value
+		const root = this.root
+		const summary = this.summaryRef.value
 		if (!root || !summary) return
 
 		const summaryRect = summary.getBoundingClientRect()
-		this._animateIndicator(false)
+		this.animateIndicator(false)
 
 		await root.triggerClose(summaryRect)
 
-		this._movedNodes.forEach(n => this.appendChild(n))
-		this._movedNodes = []
+		this.movedNodes.forEach(n => this.appendChild(n))
+		this.movedNodes = []
 		this.open = false
 	}
 
-	private _animateIndicator(isOpen: boolean) {
+	private animateIndicator(isOpen: boolean) {
 		if (reducedMotion$.value) return
 
 		const indicator = this.shadowRoot?.querySelector('.indicator') as HTMLElement | null
 		if (!indicator) return
 
-		this._currentIndicatorAnim?.cancel()
-		this._currentIndicatorAnim = indicator.animate(
+		this.currentIndicatorAnim?.cancel()
+		this.currentIndicatorAnim = indicator.animate(
 			[
 				{ transform: `rotate(${isOpen ? '0deg' : `${this.indicatorRotate}deg`})` },
 				{ transform: `rotate(${isOpen ? `${this.indicatorRotate}deg` : '0deg'})` },
@@ -228,15 +228,15 @@ export default class SchmancyExpand extends SchmancyElement {
 		return html`
 			<div class="w-full rounded-xl">
 				<div
-					${ref(this._summaryRef)}
+					${ref(this.summaryRef)}
 					class=${summaryClasses}
 					tabindex="0"
 					role="button"
-					@click=${this._handleSummaryClick}
+					@click=${this.handleSummaryClick}
 					@keydown=${(e: KeyboardEvent) => {
 						if (e.key === 'Enter' || e.key === ' ') {
 							e.preventDefault()
-							this._toggle()
+							this.toggle()
 						}
 					}}
 				>
@@ -267,13 +267,13 @@ export default class SchmancyExpand extends SchmancyElement {
 					? html`
 						<div class="inline-grid" ?data-open=${this.open}>
 							<div class="inner">
-								<slot ${ref(this._contentSlotRef)}></slot>
+								<slot ${ref(this.contentSlotRef)}></slot>
 							</div>
 						</div>
 					`
 					: html`
 						<div style=${styleMap(this.open ? {} : { display: 'none' })}>
-							<slot ${ref(this._contentSlotRef)}></slot>
+							<slot ${ref(this.contentSlotRef)}></slot>
 						</div>
 					`}
 			</div>