@blockquote-web-components/blockquote-tabs 1.3.2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +65 -65
  2. package/package.json +4 -4
  3. package/src/BlockquoteTabs.js +8 -10
  4. package/src/tab/BlockquoteTab.js +4 -4
  5. package/src/tabpanel/BlockquoteTabPanel.js +1 -1
package/README.md CHANGED
@@ -48,43 +48,43 @@ Tabs are a set of layered sections of content, known as tab panels, that display
48
48
 
49
49
  ##### Fields
50
50
 
51
- | Name | Privacy | Type | Default | Description | Inherited From |
52
- | --------------------------- | ------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------- |
53
- | `_selectedTab` | | | | | |
54
- | `_selectedTabIndex` | | | | | |
55
- | `_selectedTabIndexFromOne` | | | | | |
56
- | `_getTabListLength` | | | | | |
57
- | `_scrollContentTpl` | | | | | |
58
- | `_tablistTpl` | | | | | |
59
- | `_separatorTpl` | | | | | |
60
- | `_indicatorsTpl` | | | | | |
61
- | `_holdTpl` | | | | | |
62
- | `_tabpanelTpl` | | | | | |
63
- | `autofocus` | public | `boolean` | `false` | If present, the tab automatically have focus | |
64
- | `label` | public | `string` | `''` | \`aria-label\` for tabs group | |
65
- | `selected` | public | `number` | `1` | The tab selected. | |
66
- | `_tabList` | | `array` | `[]` | | |
67
- | `_tabpanelList` | | `array` | `[]` | | |
68
- | `_selectTabLast` | | | `undefined` | | |
69
- | `_selectTabpanelLast` | | | `undefined` | | |
70
- | `_observedFocus` | | `boolean` | `false` | | |
71
- | `_observeScrollBehavior` | | `boolean` | `false` | | |
72
- | `_slotChangesCount` | | `number` | `0` | | |
73
- | `_slotNodesCount` | | | `undefined` | | |
74
- | `_scrollContentRef` | | | | | |
75
- | `_resizeControllerObserver` | | | `new ResizeController(this, { callback: () => { this._onResizeObserverChange(); }, skipInitial: true, })` | | |
76
- | `_hasScrollLeftIndicator` | public | `boolean` | | | |
77
- | `_hasScrollRightIndicator` | public | `boolean` | | | |
51
+ | Name | Privacy | Type | Default | Description | Inherited From |
52
+ | --------------------------- | ------- | --------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------- |
53
+ | `_selectedTab` | | | | | |
54
+ | `_selectedTabIndex` | | | | | |
55
+ | `_selectedTabIndexFromOne` | | | | | |
56
+ | `_getTabListLength` | | | | | |
57
+ | `_onSlotChanges` | | | | | |
58
+ | `_scrollContentTpl` | | | | | |
59
+ | `_tablistTpl` | | | | | |
60
+ | `_separatorTpl` | | | | | |
61
+ | `_indicatorsTpl` | | | | | |
62
+ | `_holdTpl` | | | | | |
63
+ | `_tabpanelTpl` | | | | | |
64
+ | `_onTabClick` | | | | | |
65
+ | `_onTabKeyDown` | | | | | |
66
+ | `autofocus` | public | `boolean` | `false` | If present, the tab automatically have focus | |
67
+ | `label` | public | `string` | `''` | \`aria-label\` for tabs group | |
68
+ | `selected` | public | `number` | `1` | The tab selected. | |
69
+ | `_tabList` | | `array` | `[]` | | |
70
+ | `_tabpanelList` | | `array` | `[]` | | |
71
+ | `_selectTabLast` | | | `undefined` | | |
72
+ | `_selectTabpanelLast` | | | `undefined` | | |
73
+ | `_observedFocus` | | `boolean` | `false` | | |
74
+ | `_observeScrollBehavior` | | `boolean` | `false` | | |
75
+ | `_slotChangesCount` | | `number` | `0` | | |
76
+ | `_slotNodesCount` | | | `undefined` | | |
77
+ | `_scrollContentRef` | | | | | |
78
+ | `_resizeControllerObserver` | | | `new ResizeController(this, { callback: () => { this._onResizeObserverChange(); }, skipInitial: true, })` | | |
79
+ | `_hasScrollLeftIndicator` | public | `boolean` | | | |
80
+ | `_hasScrollRightIndicator` | public | `boolean` | | | |
78
81
 
79
82
  ##### Methods
80
83
 
81
84
  | Name | Privacy | Description | Parameters | Return | Inherited From |
82
85
  | --------------------------- | ------- | ----------- | ------------------------------------------- | ------ | -------------- |
83
86
  | `_selectedIsInRange` | | | `idx` | | |
84
- | `_onSlotChanges` | | | `ev` | | |
85
87
  | `_scrollEdge` | | | `{ target = this._scrollContentRef.value }` | | |
86
- | `_onTabClick` | | | `ev` | | |
87
- | `_onTabKeyDown` | | | `ev` | | |
88
88
  | `_selectTab` | | | | | |
89
89
  | `_moveFocusSelectedTab` | | | `selectedTab` | | |
90
90
  | `_requestFocusUpdate` | | | | | |
@@ -145,20 +145,27 @@ Tabs are a set of layered sections of content, known as tab panels, that display
145
145
 
146
146
  ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
147
147
 
148
- `<blockquote-tabpanel>`
148
+ `<blockquote-tab>`
149
149
  A tab element that can be used inside a `blockquote-tabs` element.
150
150
 
151
151
 
152
- ### `src/tabpanel/BlockquoteTabPanel.js`:
152
+ ### `src/tab/BlockquoteTab.js`:
153
153
 
154
- #### class: `BlockquoteTabPanel`, `blockquote-tabpanel`
154
+ #### class: `BlockquoteTab`, `blockquote-tab`
155
+
156
+ ##### Mixins
157
+
158
+ | Name | Module | Package |
159
+ | ---------------------------- | ------ | -------------------------------------------------------- |
160
+ | `BlockquoteMixinSlotContent` | | @blockquote-web-components/blockquote-mixin-slot-content |
155
161
 
156
162
  ##### Fields
157
163
 
158
- | Name | Privacy | Type | Default | Description | Inherited From |
159
- | ---------------------- | ------- | --------- | ------------------------------------------------------------------------ | -------------------------------------------- | -------------- |
160
- | `selected` | public | `boolean` | `false` | Whether or not the tabpanel is \`selected\`. | |
161
- | `globalRootAttributes` | | `object` | `{ role: 'tabpanel', slot: 'tabpanel', tabindex: 0, }` | | |
164
+ | Name | Privacy | Type | Default | Description | Inherited From |
165
+ | ---------------------- | ------- | --------- | -------------------------------------------- | --------------------------------------- | -------------- |
166
+ | `_onSlotChanges` | | | | | |
167
+ | `selected` | public | `boolean` | `false` | Whether or not the tab is \`selected\`. | |
168
+ | `globalRootAttributes` | | `object` | `{ role: 'tab', slot: 'tab', tabindex: 0, }` | | |
162
169
 
163
170
  ##### Methods
164
171
 
@@ -176,38 +183,31 @@ A tab element that can be used inside a `blockquote-tabs` element.
176
183
 
177
184
  #### Exports
178
185
 
179
- | Kind | Name | Declaration | Module | Package |
180
- | ---- | -------------------- | ------------------ | ---------------------------------- | ------- |
181
- | `js` | `BlockquoteTabPanel` | BlockquoteTabPanel | src/tabpanel/BlockquoteTabPanel.js | |
186
+ | Kind | Name | Declaration | Module | Package |
187
+ | ---- | --------------- | ------------- | ------------------------ | ------- |
188
+ | `js` | `BlockquoteTab` | BlockquoteTab | src/tab/BlockquoteTab.js | |
182
189
 
183
190
  ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
184
191
 
185
- `<blockquote-tab>`
192
+ `<blockquote-tabpanel>`
186
193
  A tab element that can be used inside a `blockquote-tabs` element.
187
194
 
188
195
 
189
- ### `src/tab/BlockquoteTab.js`:
190
-
191
- #### class: `BlockquoteTab`, `blockquote-tab`
192
-
193
- ##### Mixins
196
+ ### `src/tabpanel/BlockquoteTabPanel.js`:
194
197
 
195
- | Name | Module | Package |
196
- | ---------------------------- | ------ | -------------------------------------------------------- |
197
- | `BlockquoteMixinSlotContent` | | @blockquote-web-components/blockquote-mixin-slot-content |
198
+ #### class: `BlockquoteTabPanel`, `blockquote-tabpanel`
198
199
 
199
200
  ##### Fields
200
201
 
201
- | Name | Privacy | Type | Default | Description | Inherited From |
202
- | ---------------------- | ------- | --------- | -------------------------------------------------------------- | --------------------------------------- | -------------- |
203
- | `selected` | public | `boolean` | `false` | Whether or not the tab is \`selected\`. | |
204
- | `globalRootAttributes` | | `object` | `{ role: 'tab', slot: 'tab', tabindex: 0, }` | | |
202
+ | Name | Privacy | Type | Default | Description | Inherited From |
203
+ | ---------------------- | ------- | --------- | ------------------------------------------------------ | -------------------------------------------- | -------------- |
204
+ | `selected` | public | `boolean` | `false` | Whether or not the tabpanel is \`selected\`. | |
205
+ | `globalRootAttributes` | | `object` | `{ role: 'tabpanel', slot: 'tabpanel', tabindex: 0, }` | | |
205
206
 
206
207
  ##### Methods
207
208
 
208
209
  | Name | Privacy | Description | Parameters | Return | Inherited From |
209
210
  | -------------------- | ------- | ------------------------------- | ----------------------- | ------ | -------------- |
210
- | `_onSlotChanges` | | | `ev` | | |
211
211
  | `__setArrayAttibute` | | Sets attributes on the element. | `entries: Record<*, *>` | | |
212
212
 
213
213
  ##### Attributes
@@ -220,11 +220,11 @@ A tab element that can be used inside a `blockquote-tabs` element.
220
220
 
221
221
  #### Exports
222
222
 
223
- | Kind | Name | Declaration | Module | Package |
224
- | ---- | --------------- | ------------- | ------------------------ | ------- |
225
- | `js` | `BlockquoteTab` | BlockquoteTab | src/tab/BlockquoteTab.js | |
223
+ | Kind | Name | Declaration | Module | Package |
224
+ | ---- | -------------------- | ------------------ | ---------------------------------- | ------- |
225
+ | `js` | `BlockquoteTabPanel` | BlockquoteTabPanel | src/tabpanel/BlockquoteTabPanel.js | |
226
226
 
227
- ### `src/tabpanel/styles/blockquote-tabpanel-styles.css.js`:
227
+ ### `src/tab/styles/blockquote-tab-styles.css.js`:
228
228
 
229
229
  #### Variables
230
230
 
@@ -236,11 +236,11 @@ A tab element that can be used inside a `blockquote-tabs` element.
236
236
 
237
237
  #### Exports
238
238
 
239
- | Kind | Name | Declaration | Module | Package |
240
- | ---- | -------- | ----------- | ----------------------------------------------------- | ------- |
241
- | `js` | `styles` | styles | src/tabpanel/styles/blockquote-tabpanel-styles.css.js | |
239
+ | Kind | Name | Declaration | Module | Package |
240
+ | ---- | -------- | ----------- | ------------------------------------------- | ------- |
241
+ | `js` | `styles` | styles | src/tab/styles/blockquote-tab-styles.css.js | |
242
242
 
243
- ### `src/tab/styles/blockquote-tab-styles.css.js`:
243
+ ### `src/tabpanel/styles/blockquote-tabpanel-styles.css.js`:
244
244
 
245
245
  #### Variables
246
246
 
@@ -252,9 +252,9 @@ A tab element that can be used inside a `blockquote-tabs` element.
252
252
 
253
253
  #### Exports
254
254
 
255
- | Kind | Name | Declaration | Module | Package |
256
- | ---- | -------- | ----------- | ------------------------------------------- | ------- |
257
- | `js` | `styles` | styles | src/tab/styles/blockquote-tab-styles.css.js | |
255
+ | Kind | Name | Declaration | Module | Package |
256
+ | ---- | -------- | ----------- | ----------------------------------------------------- | ------- |
257
+ | `js` | `styles` | styles | src/tabpanel/styles/blockquote-tabpanel-styles.css.js | |
258
258
 
259
259
  ### `define/blockquote-tab.js`:
260
260
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockquote-web-components/blockquote-tabs",
3
- "version": "1.3.2",
3
+ "version": "1.4.0",
4
4
  "description": "Webcomponent blockquote-tabs following open-wc recommendations",
5
5
  "keywords": [
6
6
  "lit",
@@ -115,19 +115,19 @@
115
115
  }
116
116
  },
117
117
  "dependencies": {
118
- "@blockquote-web-components/blockquote-mixin-slot-content": "^1.5.2",
118
+ "@blockquote-web-components/blockquote-mixin-slot-content": "^1.6.0",
119
119
  "@juggle/resize-observer": "^3.4.0",
120
120
  "@lit-labs/observers": "^2.0.0",
121
121
  "lit": "^3.1.1"
122
122
  },
123
123
  "devDependencies": {
124
124
  "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.9.1",
125
- "@blockquote-web-components/blockquote-base-embedded-webview": "^1.10.2",
125
+ "@blockquote-web-components/blockquote-base-embedded-webview": "^1.11.0",
126
126
  "@blockquote-web-components/blockquote-foundations-sass": "^1.1.3"
127
127
  },
128
128
  "publishConfig": {
129
129
  "access": "public"
130
130
  },
131
131
  "customElements": "custom-elements.json",
132
- "gitHead": "7edc86cd16ada68f0d940336b43bfc9ba9389b0a"
132
+ "gitHead": "015e61740035c23471a5164f460ce03b05adab32"
133
133
  }
package/src/BlockquoteTabs.js CHANGED
@@ -115,8 +115,6 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
115
115
  this._slotNodesCount = undefined;
116
116
 
117
117
  this._scrollContentRef = createRef();
118
- this._onTabClick = this._onTabClick.bind(this);
119
- this._onTabKeyDown = this._onTabKeyDown.bind(this);
120
118
 
121
119
  // @ts-ignore
122
120
  this._resizeControllerObserver = new ResizeController(this, {
@@ -148,8 +146,8 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
148
146
  }
149
147
 
150
148
  connectedCallback() {
151
- super.connectedCallback && super.connectedCallback();
152
- this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges.bind(this));
149
+ super.connectedCallback?.();
150
+ this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges);
153
151
  }
154
152
 
155
153
  firstUpdated(props) {
@@ -184,7 +182,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
184
182
  }
185
183
  }
186
184
 
187
- _onSlotChanges(ev) {
185
+ _onSlotChanges = ev => {
188
186
  ev.stopPropagation();
189
187
  ev.preventDefault();
190
188
 
@@ -206,7 +204,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
206
204
  ) {
207
205
  this._requestPropertyUpdate('selected');
208
206
  }
209
- }
207
+ };
210
208
 
211
209
  get _scrollContentTpl() {
212
210
  return html`
@@ -269,7 +267,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
269
267
  this._hasScrollRightIndicator = scrollLeft < overflowingWidth;
270
268
  }
271
269
 
272
- _onTabClick(ev) {
270
+ _onTabClick = ev => {
273
271
  const findSelectedTab = ev
274
272
  .composedPath()
275
273
  .find(tab => tab instanceof Element && tab.slot === 'tab');
@@ -281,9 +279,9 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
281
279
  }
282
280
 
283
281
  this.selected = findSelectedTabIdxFromOne;
284
- }
282
+ };
285
283
 
286
- _onTabKeyDown(ev) {
284
+ _onTabKeyDown = ev => {
287
285
  let idx = '';
288
286
 
289
287
  switch (ev.key) {
@@ -312,7 +310,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
312
310
  default:
313
311
  break;
314
312
  }
315
- }
313
+ };
316
314
 
317
315
  _selectTab() {
318
316
  const newSelectedTab = this._tabList[this._selectedTabIndex];
package/src/tab/BlockquoteTab.js CHANGED
@@ -37,8 +37,8 @@ export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
37
37
  }
38
38
 
39
39
  connectedCallback() {
40
- super.connectedCallback && super.connectedCallback();
41
- this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges.bind(this));
40
+ super.connectedCallback?.();
41
+ this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges);
42
42
 
43
43
  this.__setArrayAttibute(this.globalRootAttributes);
44
44
  }
@@ -58,13 +58,13 @@ export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
58
58
  }
59
59
  }
60
60
 
61
- _onSlotChanges(ev) {
61
+ _onSlotChanges = ev => {
62
62
  const { detail } = ev;
63
63
  ev.stopPropagation();
64
64
  ev.preventDefault();
65
65
  const assignedNodesList = detail.assignedSlotContent.assignedSlot;
66
66
  Object.assign(assignedNodesList.dataset, { text: this.textContent });
67
- }
67
+ };
68
68
 
69
69
  render() {
70
70
  return html`
package/src/tabpanel/BlockquoteTabPanel.js CHANGED
@@ -36,7 +36,7 @@ export class BlockquoteTabPanel extends LitElement {
36
36
  }
37
37
 
38
38
  connectedCallback() {
39
- super.connectedCallback && super.connectedCallback();
39
+ super.connectedCallback?.();
40
40
  // https://www.scottohara.me/blog/2021/07/23/aria-idl.html
41
41
  // https://wpt.fyi/results/html/dom/aria-attribute-reflection.html?label=master&label=experimental&aligned&view=subtest&q=aria-attribute-reflection
42
42
  this.__setArrayAttibute(this.globalRootAttributes);