@blockquote-web-components/blockquote-base-embedded-webview 1.11.0 → 1.11.2

package/README.md

@@ -201,17 +201,16 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
 ```html
 <blockquote-base-embedded-webview-size
   screen-sizes="[
-   { width: 360, height: 640, id: '360x640' },
-   { width: 360, height: 800, id: '360x800' },
-   { width: 414, height: 896, id: '414x896' },
-   { width: 768, height: 1024, id: '768x1024' },
-   { width: 810, height: 1080, id: '810x1080' },
-   { width: 1280, height: 800, id: '1280x800' },
-   { width: 1366, height: 768, id: '1366x768' },
-   { width: 1536, height: 864, id: '1536x864' },
-   { width: 1920, height: 1080, id: '1920x1080' },
-  ]"
-></blockquote-base-embedded-webview-size>
+    { width: 360, height: 800, id: '360x800' },
+    { width: 390, height: 864, id: '390x864' },
+    { width: 414, height: 896, id: '414x896' },
+    { width: 768, height: 1024, id: '768x1024' },
+    { width: 810, height: 1080, id: '810x1080' },
+    { width: 1280, height: 720, id: '1280x800' },
+    { width: 1366, height: 768, id: '1366x768' },
+    { width: 1536, height: 864, id: '1536x864' },
+    { width: 1920, height: 1080, id: '1920x1080' },
+  ]"></blockquote-base-embedded-webview-size>
 ```
 
 

package/define/blockquote-base-embedded-webview-element.js

@@ -1,6 +1,6 @@
-import { BlockquoteBaseEmbeddedWebviewElement } from '../src/BlockquoteBaseEmbeddedWebviewElement.js';
+import {BlockquoteBaseEmbeddedWebviewElement} from '../src/BlockquoteBaseEmbeddedWebviewElement.js';
 
 window.customElements.define(
   'blockquote-base-embedded-webview-element',
-  BlockquoteBaseEmbeddedWebviewElement,
+  BlockquoteBaseEmbeddedWebviewElement
 );

package/define/blockquote-base-embedded-webview-resize.js

@@ -1,6 +1,6 @@
-import { BlockquoteBaseEmbeddedWebviewResize } from '../src/BlockquoteBaseEmbeddedWebviewResize.js';
+import {BlockquoteBaseEmbeddedWebviewResize} from '../src/BlockquoteBaseEmbeddedWebviewResize.js';
 
 window.customElements.define(
   'blockquote-base-embedded-webview-resize',
-  BlockquoteBaseEmbeddedWebviewResize,
+  BlockquoteBaseEmbeddedWebviewResize
 );

package/define/blockquote-base-embedded-webview-size.js

@@ -1,6 +1,6 @@
-import { BlockquoteBaseEmbeddedWebviewSize } from '../src/BlockquoteBaseEmbeddedWebviewSize.js';
+import {BlockquoteBaseEmbeddedWebviewSize} from '../src/BlockquoteBaseEmbeddedWebviewSize.js';
 
 window.customElements.define(
   'blockquote-base-embedded-webview-size',
-  BlockquoteBaseEmbeddedWebviewSize,
+  BlockquoteBaseEmbeddedWebviewSize
 );

package/define/blockquote-base-embedded-webview.js

@@ -1,3 +1,3 @@
-import { BlockquoteBaseEmbeddedWebview } from '../src/BlockquoteBaseEmbeddedWebview.js';
+import {BlockquoteBaseEmbeddedWebview} from '../src/BlockquoteBaseEmbeddedWebview.js';
 
 window.customElements.define('blockquote-base-embedded-webview', BlockquoteBaseEmbeddedWebview);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-base-embedded-webview",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
   "keywords": [
     "lit",
@@ -98,12 +98,12 @@
     ]
   },
   "prettier": {
-    "arrowParens": "avoid",
     "bracketSameLine": true,
+    "bracketSpacing": false,
     "htmlWhitespaceSensitivity": "ignore",
     "printWidth": 100,
     "singleQuote": true,
-    "trailingComma": "all",
+    "trailingComma": "es5",
     "overrides": [
       {
         "files": "*.{scss,css}",
@@ -128,11 +128,11 @@
   },
   "devDependencies": {
     "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.9.1",
-    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.3"
+    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.4"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "015e61740035c23471a5164f460ce03b05adab32"
+  "gitHead": "0d8e9582b65cca369553640cc72d2ca93f2c0a61"
 }

package/src/BlockquoteBaseEmbeddedWebview.js

@@ -1,9 +1,9 @@
-import { html, LitElement, render as LitHtmlRender } from 'lit';
-import { ref, createRef } from 'lit/directives/ref.js';
+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';
 import '../define/blockquote-base-embedded-webview-element.js';
-import { styles } from './styles/blockquote-base-embedded-webview-styles.css.js';
+import {styles} from './styles/blockquote-base-embedded-webview-styles.css.js';
 
 const chevronDownIcon = html`
   <svg
@@ -143,9 +143,9 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     this.heading = '';
     this.__resetResizing = false;
     this.__selectArrow = chevronDownIcon;
-    this.__readDataPos = { x: '0', y: '0', resizing: false, cursor: '' };
+    this.__readDataPos = {x: '0', y: '0', resizing: false, cursor: ''};
     this.limitHeight = false;
-    this._sources = [{ src: '', option: '', description: '' }];
+    this._sources = [{src: '', option: '', description: ''}];
     this._embeddedResizeRef = createRef();
   }
 
@@ -153,8 +153,8 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     super.connectedCallback?.();
     await this.updateComplete;
 
-    this.shadowRoot?.addEventListener('webviewresize', ev => {
-      const { detail } = /** @type {CustomEvent} */ (ev);
+    this.shadowRoot?.addEventListener('webviewresize', (ev) => {
+      const {detail} = /** @type {CustomEvent} */ (ev);
 
       Object.assign(this.__readDataPos, detail);
       this.__resetResizing = true;
@@ -173,8 +173,8 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
 
     const _sources = Array.from(this.querySelectorAll('template'));
     if (_sources.length) {
-      this._sources = _sources.map(item => {
-        const { src = '', option = '', description = '' } = item.dataset;
+      this._sources = _sources.map((item) => {
+        const {src = '', option = '', description = ''} = item.dataset;
         return {
           src,
           option,
@@ -188,19 +188,19 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     this.embedded = this.shadowRoot?.querySelector('[slot="embedded"]');
     if (this._embeddedResizeRef.value) {
       this._controlBottom = parseFloat(
-        window.getComputedStyle(this._embeddedResizeRef.value).paddingBottom,
+        window.getComputedStyle(this._embeddedResizeRef.value).paddingBottom
       );
     }
   }
 
-  _updateSize = ({ detail }) => {
+  _updateSize = ({detail}) => {
     /** @type {HTMLElement} */ (this._embeddedResizeRef?.value)?.style.setProperty(
       '--blockquote-base-embedded-webview-resize-rect-width',
-      `${detail.width}px`,
+      `${detail.width}px`
     );
     /** @type {HTMLElement} */ (this._embeddedResizeRef?.value)?.style.setProperty(
       '--blockquote-base-embedded-webview-resize-rect-height',
-      this.limitHeight ? '100%' : `${detail.height}px`,
+      this.limitHeight ? '100%' : `${detail.height}px`
     );
 
     this.__resetResizing = false;
@@ -218,7 +218,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
   }
 
   _litHtmlRender() {
-    LitHtmlRender(this._lightDomTpl, this, { host: this });
+    LitHtmlRender(this._lightDomTpl, this, {host: this});
   }
 
   get _lightDomTpl() {
@@ -251,7 +251,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
 
   get _selectTpl() {
     return html`
-      ${this._sources.some(options => options.option)
+      ${this._sources.some((options) => options.option)
         ? html`
             <div class="select">
               <select @change="${this._onChangeFile}" aria-label="Cases">
@@ -260,7 +260,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
                     <option ?selected="${this.selected === index}" value="${index}">
                       ${item.option}
                     </option>
-                  `,
+                  `
                 )}
               </select>
               ${this.__selectArrow}
@@ -328,7 +328,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     `;
   }
 
-  _onChangeFile({ target }) {
+  _onChangeFile({target}) {
     this.selected = target.selectedIndex;
     this._src = this._sources[this.selected].src;
   }

package/src/BlockquoteBaseEmbeddedWebviewElement.js

@@ -1,5 +1,5 @@
-import { html, LitElement, render as LitHtmlRender } from 'lit';
-import { styles } from './styles/blockquote-base-embedded-webview-element-styles.css.js';
+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-3.0.0-blue.svg)
@@ -78,7 +78,7 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
   }
 
   _litHtmlRender() {
-    LitHtmlRender(this._lightDomTpl, this, { host: this });
+    LitHtmlRender(this._lightDomTpl, this, {host: this});
   }
 
   get _lightDomTpl() {
@@ -104,7 +104,7 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
           allowFullscreen: true,
           loading: 'lazy',
         },
-        this.embeddedTitle && { title: this.embeddedTitle },
+        this.embeddedTitle && {title: this.embeddedTitle}
       );
 
       Object.assign(this._embeddedElement ?? {}, {
@@ -117,12 +117,12 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
         this._embeddedElement?.style ?? {},
         resource.indexOf('http') !== 0 && {
           opacity: 0,
-        },
+        }
       );
     }
   }
 
-  _onLoadElement = ({ target }) => {
+  _onLoadElement = ({target}) => {
     if (!target.contentDocument || !target.contentDocument.head.childNodes.length) {
       return;
     }

package/src/BlockquoteBaseEmbeddedWebviewResize.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { styles } from './styles/blockquote-base-embedded-webview-resize-styles.css.js';
+import {html, LitElement} from 'lit';
+import {styles} from './styles/blockquote-base-embedded-webview-resize-styles.css.js';
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value - window.scrollY to get a bounding rectangle which is independent from the current scrolling position.
 // https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design
@@ -86,21 +86,21 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
     this._getBoundingClientRecDOMRect = DOMRect;
     this._getBoundingClientRectWidth = this._getBoundingClientRect('width');
     this._getBoundingClientRectHeight = this._getBoundingClientRect('height');
-    const { target, pointerId, clientX: trackDistanceX, clientY: trackDistanceY } = ev;
+    const {target, pointerId, clientX: trackDistanceX, clientY: trackDistanceY} = ev;
 
     /** @type {Element} */ (target)?.setPointerCapture(pointerId);
 
     /**
      * @param {!PointerEvent} moveEvent
      */
-    const addResizer = ({ clientX, clientY }) => {
+    const addResizer = ({clientX, clientY}) => {
       const dx = Math.floor(clientX - trackDistanceX);
       const dy = Math.floor(clientY - trackDistanceY);
-      this._resize({ detail: { dx, dy } });
+      this._resize({detail: {dx, dy}});
     };
     target?.addEventListener(
       'pointermove',
-      /** @type {EventListenerOrEventListenerObject} */ (addResizer),
+      /** @type {EventListenerOrEventListenerObject} */ (addResizer)
     );
 
     const removeResizer = () => {
@@ -108,7 +108,7 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
       /** @type {Element} */ (target)?.releasePointerCapture(pointerId);
       target?.removeEventListener(
         'pointermove',
-        /** @type {EventListenerOrEventListenerObject} */ (addResizer),
+        /** @type {EventListenerOrEventListenerObject} */ (addResizer)
       );
       target?.removeEventListener('pointerup', removeResizer);
 
@@ -117,7 +117,7 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
     target?.addEventListener('pointerup', removeResizer);
   }
 
-  _resize({ detail }) {
+  _resize({detail}) {
     let cssOffsetX;
     let cssOffsetY;
     const dx = Math.floor(detail.dx * 2.04);
@@ -164,10 +164,10 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
       bubbles: true,
       detail: {
         x: getComputedStyle(this).getPropertyValue(
-          '--blockquote-base-embedded-webview-resize-rect-width',
+          '--blockquote-base-embedded-webview-resize-rect-width'
         ),
         y: getComputedStyle(this).getPropertyValue(
-          '--blockquote-base-embedded-webview-resize-rect-height',
+          '--blockquote-base-embedded-webview-resize-rect-height'
         ),
         resizing: this.hasAttribute('resizing'),
         cursor: this._cursor,

package/src/BlockquoteBaseEmbeddedWebviewSize.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { styles } from './styles/blockquote-base-embedded-webview-size-styles.css.js';
+import {html, LitElement} from 'lit';
+import {styles} from './styles/blockquote-base-embedded-webview-size-styles.css.js';
 // https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/emulation/DeviceModeView.ts;l=164
 
 /**
@@ -11,17 +11,16 @@ import { styles } from './styles/blockquote-base-embedded-webview-size-styles.cs
  * ```html
  * <blockquote-base-embedded-webview-size
  *   screen-sizes="[
- *    { width: 360, height: 640, id: '360x640' },
- *    { width: 360, height: 800, id: '360x800' },
- *    { width: 414, height: 896, id: '414x896' },
- *    { width: 768, height: 1024, id: '768x1024' },
- *    { width: 810, height: 1080, id: '810x1080' },
- *    { width: 1280, height: 800, id: '1280x800' },
- *    { width: 1366, height: 768, id: '1366x768' },
- *    { width: 1536, height: 864, id: '1536x864' },
- *    { width: 1920, height: 1080, id: '1920x1080' },
- *   ]"
- * ></blockquote-base-embedded-webview-size>
+ *     { width: 360, height: 800, id: '360x800' },
+ *     { width: 390, height: 864, id: '390x864' },
+ *     { width: 414, height: 896, id: '414x896' },
+ *     { width: 768, height: 1024, id: '768x1024' },
+ *     { width: 810, height: 1080, id: '810x1080' },
+ *     { width: 1280, height: 720, id: '1280x800' },
+ *     { width: 1366, height: 768, id: '1366x768' },
+ *     { width: 1536, height: 864, id: '1536x864' },
+ *     { width: 1920, height: 1080, id: '1920x1080' },
+ *   ]"></blockquote-base-embedded-webview-size>
  * ```
  *
  * @attribute screen-sizes
@@ -82,15 +81,15 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
     this.selected = 0;
     this.disabledSelectedSizeText = false;
     this.screenSizes = [
-      { width: 360, height: 800, id: '360x800' },
-      { width: 390, height: 864, id: '390x864' },
-      { width: 414, height: 896, id: '414x896' },
-      { width: 768, height: 1024, id: '768x1024' },
-      { width: 810, height: 1080, id: '810x1080' },
-      { width: 1280, height: 720, id: '1280x800' },
-      { width: 1366, height: 768, id: '1366x768' },
-      { width: 1536, height: 864, id: '1536x864' },
-      { width: 1920, height: 1080, id: '1920x1080' },
+      {width: 360, height: 800, id: '360x800'},
+      {width: 390, height: 864, id: '390x864'},
+      {width: 414, height: 896, id: '414x896'},
+      {width: 768, height: 1024, id: '768x1024'},
+      {width: 810, height: 1080, id: '810x1080'},
+      {width: 1280, height: 720, id: '1280x800'},
+      {width: 1366, height: 768, id: '1366x768'},
+      {width: 1536, height: 864, id: '1536x864'},
+      {width: 1920, height: 1080, id: '1920x1080'},
     ];
     this.widthInPercent = false;
   }
@@ -100,7 +99,7 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
   }
 
   get selectedDetail() {
-    return { ...this.selectedSize, ...{ index: this.selected } };
+    return {...this.selectedSize, ...{index: this.selected}};
   }
 
   get computedStyleWidth() {
@@ -173,7 +172,7 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
               : `width: ${item.width}px;`}">
             <span>${item.id}</span>
           </button>
-        `,
+        `
       )}
     `;
   }
@@ -186,7 +185,7 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
     `;
   }
 
-  _onResize = ev => {
+  _onResize = (ev) => {
     ev.preventDefault();
     ev.stopPropagation();
     window.requestAnimationFrame(() => {

package/src/index.js

@@ -1,4 +1,4 @@
-export { BlockquoteBaseEmbeddedWebview } from './BlockquoteBaseEmbeddedWebview.js';
-export { BlockquoteBaseEmbeddedWebviewSize } from './BlockquoteBaseEmbeddedWebviewSize.js';
-export { BlockquoteBaseEmbeddedWebviewResize } from './BlockquoteBaseEmbeddedWebviewResize.js';
-export { BlockquoteBaseEmbeddedWebviewElement } from './BlockquoteBaseEmbeddedWebviewElement.js';
+export {BlockquoteBaseEmbeddedWebview} from './BlockquoteBaseEmbeddedWebview.js';
+export {BlockquoteBaseEmbeddedWebviewSize} from './BlockquoteBaseEmbeddedWebviewSize.js';
+export {BlockquoteBaseEmbeddedWebviewResize} from './BlockquoteBaseEmbeddedWebviewResize.js';
+export {BlockquoteBaseEmbeddedWebviewElement} from './BlockquoteBaseEmbeddedWebviewElement.js';