@brightspace-ui/core 3.150.5 → 3.150.6
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.
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import '../tab.js';
|
|
2
|
+
import '../tabs.js';
|
|
3
|
+
import '../tab-panel.js';
|
|
4
|
+
import { html, LitElement } from 'lit';
|
|
5
|
+
|
|
6
|
+
class TabsArray extends LitElement {
|
|
7
|
+
|
|
8
|
+
static get properties() {
|
|
9
|
+
return {
|
|
10
|
+
_tabs: { type: Array }
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
constructor() {
|
|
15
|
+
super();
|
|
16
|
+
this._tabs = [{ text: 'Tab 1', selected: true }, { text: 'Tab 2' }, { text: 'Tab 3' }];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
render() {
|
|
20
|
+
return html`
|
|
21
|
+
<d2l-tabs @d2l-tab-selected="${this._handleTabSelected}">
|
|
22
|
+
${this._tabs.map((tab, index) => html`
|
|
23
|
+
<d2l-tab text="${tab.text}" ?selected="${tab.selected}" slot="tabs" id="tab-${index}"></d2l-tab>
|
|
24
|
+
<d2l-tab-panel labelled-by="tab-${index}" slot="panels">
|
|
25
|
+
${tab.text} content goes here.
|
|
26
|
+
</d2l-tab-panel>`
|
|
27
|
+
)}
|
|
28
|
+
</d2l-tabs>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
_handleTabSelected(e) {
|
|
33
|
+
const selectedTab = e.target;
|
|
34
|
+
this._tabs = this._tabs.map(tab => {
|
|
35
|
+
return {
|
|
36
|
+
...tab,
|
|
37
|
+
selected: tab.text === selectedTab.text
|
|
38
|
+
};
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
customElements.define('d2l-tabs-array', TabsArray);
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
import '../tabs.js';
|
|
17
17
|
import '../tab-panel.js';
|
|
18
18
|
import './tab-custom.js';
|
|
19
|
+
import './tabs-array.js';
|
|
19
20
|
</script>
|
|
20
21
|
</head>
|
|
21
22
|
<body unresolved>
|
|
@@ -337,6 +338,14 @@
|
|
|
337
338
|
</template>
|
|
338
339
|
</d2l-demo-snippet>
|
|
339
340
|
|
|
341
|
+
<h2>Tabs (array)</h2>
|
|
342
|
+
|
|
343
|
+
<d2l-demo-snippet>
|
|
344
|
+
<template>
|
|
345
|
+
<d2l-tabs-array></d2l-tabs-array>
|
|
346
|
+
</template>
|
|
347
|
+
</d2l-demo-snippet>
|
|
348
|
+
|
|
340
349
|
<h2>Tabs (deprecated structure)</h2>
|
|
341
350
|
|
|
342
351
|
<d2l-demo-snippet>
|
|
@@ -121,6 +121,11 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
|
|
|
121
121
|
this.dispatchEvent(new CustomEvent(
|
|
122
122
|
'd2l-tab-selected', { bubbles: true, composed: true }
|
|
123
123
|
));
|
|
124
|
+
} else {
|
|
125
|
+
/** @ignore */
|
|
126
|
+
this.dispatchEvent(new CustomEvent(
|
|
127
|
+
'd2l-tab-deselected', { bubbles: true }
|
|
128
|
+
));
|
|
124
129
|
}
|
|
125
130
|
}
|
|
126
131
|
}
|
package/components/tabs/tabs.js
CHANGED
|
@@ -19,6 +19,7 @@ import { styleMap } from 'lit/directives/style-map.js';
|
|
|
19
19
|
|
|
20
20
|
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
21
21
|
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
22
|
+
const newTabStructure = getFlag('GAUD-7146-tabs-new-structure', true);
|
|
22
23
|
|
|
23
24
|
const scrollButtonWidth = 56;
|
|
24
25
|
|
|
@@ -371,6 +372,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
371
372
|
<div class="d2l-tabs-container-list"
|
|
372
373
|
@d2l-tab-content-change="${this._handleTabContentChange}"
|
|
373
374
|
@d2l-tab-selected="${this._handleTabSelected}"
|
|
375
|
+
@d2l-tab-deselected="${this.#handleTabDeselected}"
|
|
374
376
|
@focusout="${this._handleFocusOut}"
|
|
375
377
|
aria-label="${ifDefined(this.text)}"
|
|
376
378
|
role="tablist"
|
|
@@ -1195,6 +1197,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
1195
1197
|
}, 0);
|
|
1196
1198
|
}
|
|
1197
1199
|
|
|
1200
|
+
#handleTabDeselected(e) {
|
|
1201
|
+
if (!newTabStructure) return;
|
|
1202
|
+
|
|
1203
|
+
const panel = this._getPanel(e.target.id);
|
|
1204
|
+
if (panel) panel.selected = false;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1198
1207
|
#isRTL() {
|
|
1199
1208
|
return document.documentElement.getAttribute('dir') === 'rtl';
|
|
1200
1209
|
}
|
package/custom-elements.json
CHANGED
|
@@ -13890,6 +13890,10 @@
|
|
|
13890
13890
|
}
|
|
13891
13891
|
]
|
|
13892
13892
|
},
|
|
13893
|
+
{
|
|
13894
|
+
"name": "d2l-tabs-array",
|
|
13895
|
+
"path": "./components/tabs/demo/tabs-array.js"
|
|
13896
|
+
},
|
|
13893
13897
|
{
|
|
13894
13898
|
"name": "d2l-tab-internal",
|
|
13895
13899
|
"path": "./components/tabs/tab-internal.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.150.
|
|
3
|
+
"version": "3.150.6",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|