@blockquote-web-components/blockquote-base-embedded-webview 1.10.0 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-base-embedded-webview",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
   "keywords": [
     "lit",
@@ -70,14 +70,14 @@
     "build": "echo \"This is not a TypeScript project, so no need to build.\"",
     "dev:vite": "vite build",
     "format": "npm run format:eslint && npm run format:prettier && npm run format:stylelint",
-    "format:eslint": "eslint \"**/*.{js,ts,html}\" --fix --ignore-path .eslintignore",
-    "format:prettier": "prettier \"**/*.{js,ts,json,html}\" --write --ignore-path .eslintignore",
-    "format:stylelint": "stylelint \"**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .eslintignore",
+    "format:eslint": "eslint . --fix",
+    "format:prettier": "prettier \"**/*.{js,ts,json,html}\" --write --ignore-path .prettierignore",
+    "format:stylelint": "stylelint \"**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .prettierignore",
     "postinstall": "npm run sort:package",
     "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:stylelint",
-    "lint:eslint": "eslint \"**/*.{js,ts,html}\" --ignore-path .eslintignore",
-    "lint:prettier": "prettier \"**/*.{js,ts,json,html}\" --check --ignore-path .eslintignore",
-    "lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .eslintignore",
+    "lint:eslint": "eslint .",
+    "lint:prettier": "prettier \"**/*.{js,ts,json,html}\" --check --ignore-path .prettierignore",
+    "lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .prettierignore",
     "preview:vite": "vite preview",
     "sass:watch": "sass-style-template",
     "sort:package": "npx sort-package-json",
@@ -99,6 +99,8 @@
   },
   "prettier": {
     "arrowParens": "avoid",
+    "bracketSameLine": true,
+    "htmlWhitespaceSensitivity": "ignore",
     "printWidth": 100,
     "singleQuote": true,
     "trailingComma": "all",
@@ -112,58 +114,6 @@
       }
     ]
   },
-  "eslintConfig": {
-    "parserOptions": {
-      "ecmaVersion": "latest"
-    },
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
-    "rules": {
-      "class-methods-use-this": "off",
-      "indent": [
-        "error",
-        2,
-        {
-          "SwitchCase": 1,
-          "ignoredNodes": [
-            "PropertyDefinition",
-            "TemplateLiteral > *"
-          ]
-        }
-      ],
-      "no-unused-expressions": [
-        "error",
-        {
-          "allowShortCircuit": true,
-          "allowTernary": true
-        }
-      ],
-      "object-curly-newline": "off",
-      "import/extensions": [
-        "error",
-        "always",
-        {
-          "ignorePackages": true
-        }
-      ],
-      "import/no-extraneous-dependencies": [
-        "error",
-        {
-          "devDependencies": [
-            "**/test/**/*.{js,ts}",
-            "**/*.config.{js,ts,mjs,cjs}",
-            "**/*.conf.{js,ts,mjs,cjs}"
-          ]
-        }
-      ],
-      "import/no-unresolved": "off",
-      "import/prefer-default-export": "off",
-      "lit/no-classfield-shadowing": "off",
-      "lit/no-native-attributes": "off"
-    }
-  },
   "stylelint": {
     "extends": "stylelint-config-standard-scss",
     "rules": {
@@ -177,12 +127,12 @@
     "lit": "^3.1.1"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.8.0",
-    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.2"
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.9.1",
+    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "4e3daa3414a4aa6eaf6cc0d792d3b86fa6fbb36b"
+  "gitHead": "7edc86cd16ada68f0d940336b43bfc9ba9389b0a"
 }

package/src/BlockquoteBaseEmbeddedWebview.js

@@ -5,17 +5,18 @@ 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';
 
-const chevronDownIcon = html`<svg
-  aria-hidden="true"
-  viewBox="0 0 24 24"
-  stroke-width="2"
-  stroke="currentcolor"
-  fill="none"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <polyline points="6 9 12 15 18 9" />
-</svg>`;
+const chevronDownIcon = html`
+  <svg
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentcolor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round">
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+`;
 
 // https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/Images/src/open-externally.svg
 const openExternallyIcon = html`
@@ -25,11 +26,9 @@ const openExternallyIcon = html`
     fill="currentcolor"
     preserveAspectRatio="xMidYMid meet"
     focusable="false"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+    xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M4.5 17C4.08333 17 3.72933 16.854 3.438 16.562C3.146 16.2707 3 15.9167 3 15.5V4.5C3 4.08333 3.146 3.72933 3.438 3.438C3.72933 3.146 4.08333 3 4.5 3H10V4.5H4.5V15.5H15.5V10H17V15.5C17 15.9167 16.854 16.2707 16.562 16.562C16.2707 16.854 15.9167 17 15.5 17H4.5ZM8.062 13L7 11.938L14.438 4.5H12V3H17V8H15.5V5.562L8.062 13Z"
-    />
+      d="M4.5 17C4.08333 17 3.72933 16.854 3.438 16.562C3.146 16.2707 3 15.9167 3 15.5V4.5C3 4.08333 3.146 3.72933 3.438 3.438C3.72933 3.146 4.08333 3 4.5 3H10V4.5H4.5V15.5H15.5V10H17V15.5C17 15.9167 16.854 16.2707 16.562 16.562C16.2707 16.854 15.9167 17 15.5 17H4.5ZM8.062 13L7 11.938L14.438 4.5H12V3H17V8H15.5V5.562L8.062 13Z" />
   </svg>
 `;
 
@@ -217,7 +216,9 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
   }
 
   render() {
-    return html` ${this._headerTpl} ${this._mainTpl} ${this._litHtmlRender()}`;
+    return html`
+      ${this._headerTpl} ${this._mainTpl} ${this._litHtmlRender()}
+    `;
   }
 
   _litHtmlRender() {
@@ -241,11 +242,15 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
   }
 
   get _headingTpl() {
-    return html`<div aria-level="${this._headingLevel}" role="heading">${this.heading}</div>`;
+    return html`
+      <div aria-level="${this._headingLevel}" role="heading">${this.heading}</div>
+    `;
   }
 
   get _navigationDemosTpl() {
-    return html` <div>${this._selectTpl}${this._externalLinkTpl}</div> `;
+    return html`
+      <div>${this._selectTpl}${this._externalLinkTpl}</div>
+    `;
   }
 
   get _selectTpl() {
@@ -270,14 +275,18 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
   }
 
   get _externalLinkTpl() {
-    return html`<a href="${this._src || '#'}" target="_blank" class="open-externally">
-      <span class="sr-only">View demo in a new tab</span
-      ><span aria-hidden="true">${openExternallyIcon}</span></a
-    >`;
+    return html`
+      <a href="${this._src || '#'}" target="_blank" class="open-externally">
+        <span class="sr-only">View demo in a new tab</span>
+        <span aria-hidden="true">${openExternallyIcon}</span>
+      </a>
+    `;
   }
 
   get _descriptionTpl() {
-    return html` <p class="description">${this._sources[this.selected].description}</p>`;
+    return html`
+      <p class="description">${this._sources[this.selected].description}</p>
+    `;
   }
 
   get _readDataPosTpl() {
@@ -285,8 +294,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
       <div
         aria-hidden="true"
         class="read-data-pos"
-        style="opacity:${this.__readDataPos.resizing ? 1 : 0}"
-      >
+        style="opacity:${this.__readDataPos.resizing ? 1 : 0}">
         <span>${this.__readDataPos.x}</span>
         <span>x</span>
         <span>${this.__readDataPos.y}</span>
@@ -295,31 +303,33 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
   }
 
   get _screenSizeTpl() {
-    return html` <blockquote-base-embedded-webview-size
-      .disabledSelectedSizeText="${this.__resetResizing}"
-      @click="${this._updateSize}"
-      @selectedchange="${this._updateSize}"
-      .selected="${this.screenSizeSelected}"
-    ></blockquote-base-embedded-webview-size>`;
+    return html`
+      <blockquote-base-embedded-webview-size
+        .disabledSelectedSizeText="${this.__resetResizing}"
+        @click="${this._updateSize}"
+        @selectedchange="${this._updateSize}"
+        .selected="${this.screenSizeSelected}"></blockquote-base-embedded-webview-size>
+    `;
   }
 
   get _mainTpl() {
     return html`
       <div class="main">
         <blockquote-base-embedded-webview-resize ${ref(this._embeddedResizeRef)}>
-          <slot name="embedded"> ${this._embeddedSlotTpl} </slot>
+          <slot name="embedded">${this._embeddedSlotTpl}</slot>
         </blockquote-base-embedded-webview-resize>
       </div>
     `;
   }
 
   get _embeddedSlotTpl() {
-    return html` <blockquote-base-embedded-webview-element
-      slot="embedded"
-      .src="${this._src || ''}"
-      .embeddedTitle="${this._sources[this.selected].option || 'Demo'}"
-    >
-    </blockquote-base-embedded-webview-element>`;
+    return html`
+      <blockquote-base-embedded-webview-element
+        slot="embedded"
+        .src="${this._src || ''}"
+        .embeddedTitle="${this._sources[this.selected].option ||
+        'Demo'}"></blockquote-base-embedded-webview-element>
+    `;
   }
 
   _onChangeFile({ target }) {

package/src/BlockquoteBaseEmbeddedWebviewElement.js

@@ -73,7 +73,9 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
   }
 
   render() {
-    return html` ${this._embeddedTpl} ${this._litHtmlRender()} `;
+    return html`
+      ${this._embeddedTpl} ${this._litHtmlRender()}
+    `;
   }
 
   _litHtmlRender() {
@@ -89,7 +91,9 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
   }
 
   get _embeddedTpl() {
-    return html`<slot name="embedded"></slot>`;
+    return html`
+      <slot name="embedded"></slot>
+    `;
   }
 
   _fetch(resource) {

package/src/BlockquoteBaseEmbeddedWebviewSize.js

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

package/src/styles/blockquote-base-embedded-webview-resize-styles.css.js

@@ -17,7 +17,7 @@ export const styles = css`:host {
   flex-direction: column;
   align-items: center;
   height: inherit;
-  padding: calc(var(--__resizer-factor) * 1) 0 calc(var(--__resizer-factor) * 2) 0;
+  padding: calc(var(--__resizer-factor) * 1) 0 calc(var(--__resizer-factor) * 2);
 }
 
 :host([hidden]),