@videojs/html 10.0.0-alpha.9 → 10.0.0-beta.10

package/dist/dev/define/skin-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin-mixin.js","names":["#resolveSlots"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method and resolves `<slot name=\"media\">` placeholders\n * by replacing them with the actual media element children.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(BaseClass: Base): Base {\n  class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n    constructor(...args: any[]) {\n      super(...args);\n\n      const ctor = this.constructor as { getTemplateHTML?: () => string };\n\n      if (ctor.getTemplateHTML) {\n        const children = [...this.childNodes];\n        this.innerHTML = ctor.getTemplateHTML();\n        this.#resolveSlots(children);\n      }\n    }\n\n    override connectedCallback(): void {\n      // During innerHTML parsing, children aren't available in the constructor.\n      // Resolve any remaining slotted elements before the container connects.\n      this.#resolveSlots();\n      super.connectedCallback();\n    }\n\n    #resolveSlots(nodes?: ChildNode[]): void {\n      const slot = this.querySelector('slot[name=\"media\"]');\n      if (!slot) return;\n\n      // Collect media from either the provided node list (constructor) or\n      // from direct children that haven't been placed yet (connectedCallback).\n      const media = nodes\n        ? nodes.filter((n): n is HTMLElement => n instanceof HTMLElement && n.getAttribute('slot') === 'media')\n        : [...this.querySelectorAll<HTMLElement>(':scope > [slot=\"media\"]')];\n\n      for (const el of media) slot.before(el);\n      slot.remove();\n    }\n  }\n\n  return SkinElement as unknown as Base;\n}\n"],"mappings":";;;;;;AAQA,SAAgB,UAAqD,WAAuB;CAC1F,MAAM,oBAAqB,UAA2C;EACpE,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;GAEd,MAAM,OAAO,KAAK;AAElB,OAAI,KAAK,iBAAiB;IACxB,MAAM,WAAW,CAAC,GAAG,KAAK,WAAW;AACrC,SAAK,YAAY,KAAK,iBAAiB;AACvC,UAAKA,aAAc,SAAS;;;EAIhC,AAAS,oBAA0B;AAGjC,SAAKA,cAAe;AACpB,SAAM,mBAAmB;;EAG3B,cAAc,OAA2B;GACvC,MAAM,OAAO,KAAK,cAAc,uBAAqB;AACrD,OAAI,CAAC,KAAM;GAIX,MAAM,QAAQ,QACV,MAAM,QAAQ,MAAwB,aAAa,eAAe,EAAE,aAAa,OAAO,KAAK,QAAQ,GACrG,CAAC,GAAG,KAAK,iBAA8B,4BAA0B,CAAC;AAEtE,QAAK,MAAM,MAAM,MAAO,MAAK,OAAO,GAAG;AACvC,QAAK,QAAQ;;;AAIjB,QAAO"}
+{"version":3,"file":"skin-mixin.js","names":["rootStyles","sharedStyles"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\nimport rootStyles from './base.css?inline';\nimport sharedStyles from './shared.css?inline';\n\nconst STYLES_ID = '__media-styles';\n\nfunction ensureRootStyles(): void {\n  if (document.getElementById(STYLES_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLES_ID;\n  style.textContent = rootStyles;\n  document.head.appendChild(style);\n}\n\nconst sharedSheet = new CSSStyleSheet();\nsharedSheet.replaceSync(sharedStyles);\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the\n * shadow root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n  BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n  class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n    static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n    static styles?: CSSStyleSheet;\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      ensureRootStyles();\n\n      if (!this.shadowRoot) {\n        const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n        this.attachShadow(ctor.shadowRootOptions);\n\n        const sheets: CSSStyleSheet[] = [sharedSheet];\n        if (ctor.styles) {\n          sheets.push(ctor.styles);\n        }\n        this.shadowRoot!.adoptedStyleSheets = sheets;\n\n        if (ctor.getTemplateHTML) {\n          this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n        }\n      }\n    }\n  }\n\n  return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(css);\n  return sheet;\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,SAAS,mBAAyB;AAChC,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,MAAM,cAAc,IAAI,eAAe;AACvC,YAAY,YAAYC,eAAa;;;;;;;;;AAUrC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,qBAAkB;AAElB,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;IAEzC,MAAM,SAA0B,CAAC,YAAY;AAC7C,QAAI,KAAK,OACP,QAAO,KAAK,KAAK,OAAO;AAE1B,SAAK,WAAY,qBAAqB;AAEtC,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}