@blockquote-web-components/blockquote-tabs 1.4.3 → 1.4.5

package/define/blockquote-tab.js

@@ -1,3 +1,3 @@
-import { BlockquoteTab } from '../src/tab/BlockquoteTab.js';
+import {BlockquoteTab} from '../src/tab/BlockquoteTab.js';
 
 window.customElements.define('blockquote-tab', BlockquoteTab);

package/define/blockquote-tabpanel.js

@@ -1,3 +1,3 @@
-import { BlockquoteTabPanel } from '../src/tabpanel/BlockquoteTabPanel.js';
+import {BlockquoteTabPanel} from '../src/tabpanel/BlockquoteTabPanel.js';
 
 window.customElements.define('blockquote-tabpanel', BlockquoteTabPanel);

package/define/blockquote-tabs.js

@@ -1,4 +1,4 @@
-import { BlockquoteTabs } from '../src/BlockquoteTabs.js';
+import {BlockquoteTabs} from '../src/BlockquoteTabs.js';
 import './blockquote-tab.js';
 import './blockquote-tabpanel.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-tabs",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Webcomponent blockquote-tabs following open-wc recommendations",
   "keywords": [
     "lit",
@@ -89,12 +89,12 @@
     ]
   },
   "prettier": {
-    "arrowParens": "avoid",
     "bracketSameLine": true,
+    "bracketSpacing": false,
     "htmlWhitespaceSensitivity": "ignore",
     "printWidth": 100,
     "singleQuote": true,
-    "trailingComma": "all",
+    "trailingComma": "es5",
     "overrides": [
       {
         "files": "*.{scss,css}",
@@ -115,19 +115,19 @@
     }
   },
   "dependencies": {
-    "@blockquote-web-components/blockquote-mixin-slot-content": "^1.7.0",
+    "@blockquote-web-components/blockquote-mixin-slot-content": "^1.7.2",
     "@juggle/resize-observer": "^3.4.0",
     "@lit-labs/observers": "^2.0.0",
     "lit": "^3.1.1"
   },
   "devDependencies": {
     "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.9.1",
-    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.11.1",
-    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.3"
+    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.11.2",
+    "@blockquote-web-components/blockquote-foundations-sass": "^1.1.4"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "d98f72302c8c62b588e7c6baf1842ed876ff21d3"
+  "gitHead": "0d8e9582b65cca369553640cc72d2ca93f2c0a61"
 }

package/src/BlockquoteTabs.js

@@ -1,9 +1,9 @@
-import { html, LitElement, nothing } from 'lit';
-import { ref, createRef } from 'lit/directives/ref.js';
-import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
-import { ResizeController } from '@lit-labs/observers/resize-controller.js';
-import { BlockquoteMixinSlotContent } from '@blockquote-web-components/blockquote-mixin-slot-content';
-import { styles } from './styles/blockquote-tabs-styles.css.js';
+import {html, LitElement, nothing} from 'lit';
+import {ref, createRef} from 'lit/directives/ref.js';
+import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {BlockquoteMixinSlotContent} from '@blockquote-web-components/blockquote-mixin-slot-content';
+import {styles} from './styles/blockquote-tabs-styles.css.js';
 
 /* A minimal library which polyfills the ResizeObserver */
 window.ResizeObserver || /* c8 ignore next */ (window.ResizeObserver = ResizeObserverPolyfill);
@@ -123,6 +123,8 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
       },
       skipInitial: true,
     });
+
+    this.addEventListener('slotchanges', this._onSlotChanges);
   }
 
   _selectedIsInRange(idx) {
@@ -145,11 +147,6 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
     return this._tabList.length;
   }
 
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges);
-  }
-
   firstUpdated(props) {
     super.firstUpdated && super.firstUpdated(props);
     const tabSlot = this.shadowRoot?.querySelector('[name="tab"]');
@@ -182,13 +179,13 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
     }
   }
 
-  _onSlotChanges = ev => {
+  _onSlotChanges = (ev) => {
     ev.stopPropagation();
     ev.preventDefault();
 
     this._slotChangesCount += 1;
 
-    const { detail } = ev;
+    const {detail} = ev;
     const assignedNodesList = detail.assignedNodesContent.assignedNodes;
 
     if (detail.assignedSlotContent.slotName === 'tab') {
@@ -259,18 +256,18 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
     `;
   }
 
-  _scrollEdge({ target = this._scrollContentRef.value } = {}) {
+  _scrollEdge({target = this._scrollContentRef.value} = {}) {
     // @ts-ignore
-    const { scrollLeft, scrollWidth, offsetWidth } = target;
+    const {scrollLeft, scrollWidth, offsetWidth} = target;
     const overflowingWidth = scrollWidth - offsetWidth;
     this._hasScrollLeftIndicator = scrollLeft > 0;
     this._hasScrollRightIndicator = scrollLeft < overflowingWidth;
   }
 
-  _onTabClick = ev => {
+  _onTabClick = (ev) => {
     const findSelectedTab = ev
       .composedPath()
-      .find(tab => tab instanceof Element && tab.slot === 'tab');
+      .find((tab) => tab instanceof Element && tab.slot === 'tab');
 
     const findSelectedTabIdxFromOne = this._tabList.indexOf(findSelectedTab) + 1;
 
@@ -281,7 +278,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
     this.selected = findSelectedTabIdxFromOne;
   };
 
-  _onTabKeyDown = ev => {
+  _onTabKeyDown = (ev) => {
     let idx = '';
 
     switch (ev.key) {
@@ -352,23 +349,23 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
 
   _scrollIntoViewWithOffset(
     tabScroller = this._selectedTab,
-    behavior = this._observeScrollBehavior ? 'smooth' : 'auto',
+    behavior = this._observeScrollBehavior ? 'smooth' : 'auto'
   ) {
     const scrollContentNode = this._scrollContentRef.value;
     if (!scrollContentNode) {
       return;
     }
     const [rootA, rootB] = this._indicators || [];
-    const { right: boundaryight } = scrollContentNode.getBoundingClientRect();
-    const { offsetLeft: scrollerLeft } = tabScroller;
+    const {right: boundaryight} = scrollContentNode.getBoundingClientRect();
+    const {offsetLeft: scrollerLeft} = tabScroller;
     const {
       left: tabScrollerXLeft,
       right: tabScrollerXRight,
       width: tabScrollerWidth,
     } = tabScroller.getBoundingClientRect();
 
-    const { right: rootARight } = rootA.getBoundingClientRect();
-    const { width: rootBWidth, left: rootBLeft } = rootB.getBoundingClientRect();
+    const {right: rootARight} = rootA.getBoundingClientRect();
+    const {width: rootBWidth, left: rootBLeft} = rootB.getBoundingClientRect();
 
     if (tabScrollerXRight > rootBLeft || tabScrollerXLeft < rootARight) {
       const left =

package/src/index.js

@@ -1,3 +1,3 @@
-export { BlockquoteTabs } from './BlockquoteTabs.js';
-export { BlockquoteTab } from './tab/BlockquoteTab.js';
-export { BlockquoteTabPanel } from './tabpanel/BlockquoteTabPanel.js';
+export {BlockquoteTabs} from './BlockquoteTabs.js';
+export {BlockquoteTab} from './tab/BlockquoteTab.js';
+export {BlockquoteTabPanel} from './tabpanel/BlockquoteTabPanel.js';

package/src/tab/BlockquoteTab.js

@@ -1,6 +1,6 @@
-import { html, LitElement } from 'lit';
-import { BlockquoteMixinSlotContent } from '@blockquote-web-components/blockquote-mixin-slot-content';
-import { styles } from './styles/blockquote-tab-styles.css.js';
+import {html, LitElement} from 'lit';
+import {BlockquoteMixinSlotContent} from '@blockquote-web-components/blockquote-mixin-slot-content';
+import {styles} from './styles/blockquote-tab-styles.css.js';
 
 /**
  * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
@@ -30,6 +30,8 @@ export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
       slot: 'tab',
       tabindex: 0,
     };
+
+    this.addEventListener('slotchanges', this._onSlotChanges);
   }
 
   static get styles() {
@@ -38,8 +40,6 @@ export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
 
   connectedCallback() {
     super.connectedCallback?.();
-    this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges);
-
     this.__setArrayAttibute(this.globalRootAttributes);
   }
 
@@ -58,12 +58,12 @@ export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
     }
   }
 
-  _onSlotChanges = ev => {
-    const { detail } = ev;
+  _onSlotChanges = (ev) => {
+    const {detail} = ev;
     ev.stopPropagation();
     ev.preventDefault();
     const assignedNodesList = detail.assignedSlotContent.assignedSlot;
-    Object.assign(assignedNodesList.dataset, { text: this.textContent });
+    Object.assign(assignedNodesList.dataset, {text: this.textContent});
   };
 
   render() {

package/src/tabpanel/BlockquoteTabPanel.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { styles } from './styles/blockquote-tabpanel-styles.css.js';
+import {html, LitElement} from 'lit';
+import {styles} from './styles/blockquote-tabpanel-styles.css.js';
 
 /**
  * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)