@blockquote-web-components/blockquote-base-embedded-webview 1.4.1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-base-embedded-webview",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
   "keywords": [
     "lit",
@@ -170,7 +170,7 @@
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.2",
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.3",
     "@blockquote-web-components/blockquote-foundations-sass": "^1.0.0",
     "@polymer/iron-test-helpers": "^3.0.1"
   },
@@ -178,5 +178,5 @@
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "66c59383666d74cc2f3d0b1e1655e820027a6d5e"
+  "gitHead": "f04990017fefa9a43d78e091ccaafe516f3c2c81"
 }

package/src/BlockquoteBaseEmbeddedWebview.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, render as LitHtmlRender } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import '../define/blockquote-base-embedded-webview-size.js';
 import '../define/blockquote-base-embedded-webview-resize.js';
@@ -195,7 +195,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     this._controlBottom = parseFloat(
       window.getComputedStyle(this._embeddedResizeRef.value).paddingBottom,
     );
-    this.append(this.embedded);
   }
 
   _updateSize({ detail }) {
@@ -217,7 +216,15 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
   }
 
   render() {
-    return html` ${this._headerTpl} ${this._mainTpl} `;
+    return html` ${this._headerTpl} ${this._mainTpl} ${this._litHtmlRender()}`;
+  }
+
+  _litHtmlRender() {
+    LitHtmlRender(this._lightDomTpl, this);
+  }
+
+  get _lightDomTpl() {
+    return this.embedded;
   }
 
   get _headerTpl() {

package/src/BlockquoteBaseEmbeddedWebviewElement.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, render as LitHtmlRender } from 'lit';
 import { styles } from './styles/blockquote-base-embedded-webview-element-styles.css.js';
 /**
   ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
@@ -70,21 +70,26 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
     });
 
     this._embeddedElement.addEventListener('load', this._onLoadElement);
-
-    // append element after add listener `load`
-    this.append(this._embeddedElement);
   }
 
   willUpdate(props) {
     super.willUpdate && super.willUpdate(props);
 
-    if (props.has('src') && this.src !== '') {
+    if ((props.has('src') || props.has('embeddedTitle')) && this.src !== '') {
       this._fetch(this.src);
     }
   }
 
   render() {
-    return html` ${this._embeddedTpl} `;
+    return html` ${this._embeddedTpl} ${this._litHtmlRender()} `;
+  }
+
+  _litHtmlRender() {
+    LitHtmlRender(this._lightDomTpl, this);
+  }
+
+  get _lightDomTpl() {
+    return this._embeddedElement;
   }
 
   get _loadResource() {

package/src/BlockquoteBaseEmbeddedWebviewSize.js

@@ -172,18 +172,19 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
   get _toolbarTpl() {
     return html`
       ${this.screenSizes.map(
-        (item, index) => html`<button
-          @click="${this._setSelected}"
-          id="${item.id}"
-          data-index="${index + 1}"
-          ?data-selected="${this.selected === index + 1}"
-          ?hidden="${!this.showOverflowSize && item.width > this.computedStyleWidth}"
-          style="${this.widthInPercent
-            ? `width: calc(100% / ${index + 1});`
-            : `width: ${item.width}px;`}"
-        >
-          <span>${item.id}</span>
-        </button>`,
+        (item, index) =>
+          html`<button
+            @click="${this._setSelected}"
+            id="${item.id}"
+            data-index="${index + 1}"
+            ?data-selected="${this.selected === index + 1}"
+            ?hidden="${!this.showOverflowSize && item.width > this.computedStyleWidth}"
+            style="${this.widthInPercent
+              ? `width: calc(100% / ${index + 1});`
+              : `width: ${item.width}px;`}"
+          >
+            <span>${item.id}</span>
+          </button>`,
       )}
     `;
   }