mirror of
https://github.com/zoriya/v10.git
synced 2026-08-09 07:37:48 +00:00
3cffb4d59a
Resolves TypeScript TS4094 error "Property may not be private or protected" in exported anonymous classes created by factory functions. Changes: - #mediaStore → _mediaStore (public with underscore convention) - #mediaSlot → _mediaSlot (public with underscore convention) - #handleMediaSlotChange → _handleMediaSlotChange (public with underscore) The underscore prefix indicates internal/private usage by convention while avoiding TypeScript restrictions on anonymous class exports. Affected files: - media-mute-button.ts: 5 field references updated - media-play-button.ts: 5 field references updated - media-container.ts: 10 field references updated All HTML packages now build successfully without TS4094 errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { ConsumerMixin } from '@open-wc/context-protocol';
|
|
|
|
export function getTemplateHTML() {
|
|
return /* html */`
|
|
<slot name="media"></slot>
|
|
<slot></slot>
|
|
`;
|
|
}
|
|
|
|
// @ts-ignore - Custom element constructor compatibility
|
|
export class MediaContainer extends ConsumerMixin(HTMLElement) {
|
|
static shadowRootOptions = { mode: 'open' as ShadowRootMode };
|
|
static getTemplateHTML = getTemplateHTML;
|
|
|
|
_mediaStore: any;
|
|
_mediaSlot: HTMLSlotElement;
|
|
|
|
contexts = {
|
|
mediaStore: (mediaStore: any) => {
|
|
this._mediaStore = mediaStore;
|
|
this._handleMediaSlotChange();
|
|
},
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
// @ts-ignore - Shadow DOM property access
|
|
if (!this.shadowRoot) {
|
|
// @ts-ignore - Shadow DOM property access
|
|
this.attachShadow((this.constructor as typeof MediaContainer).shadowRootOptions);
|
|
// @ts-ignore - Shadow DOM property access
|
|
this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainer).getTemplateHTML();
|
|
}
|
|
|
|
// @ts-ignore - Shadow DOM property access
|
|
this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
|
|
this._mediaSlot.addEventListener('slotchange', this._handleMediaSlotChange);
|
|
}
|
|
|
|
_handleMediaSlotChange = () => {
|
|
const media = this._mediaSlot.assignedElements({ flatten: true })[0];
|
|
this._mediaStore.dispatch({ type: 'mediaelementchangerequest', detail: media });
|
|
};
|
|
}
|
|
|
|
// @ts-ignore - Custom elements type compatibility
|
|
customElements.define('media-container', MediaContainer);
|