@proximus/lavender-tabs 1.4.7-alpha.6 → 1.4.7-alpha.8
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.
- package/dist/Tabs.d.ts +0 -2
- package/dist/index.es.js +65 -68
- package/package.json +1 -1
package/dist/Tabs.d.ts
CHANGED
|
@@ -5,7 +5,6 @@ export declare class Tabs extends HTMLElement {
|
|
|
5
5
|
#private;
|
|
6
6
|
private readonly _label;
|
|
7
7
|
internals: ElementInternals;
|
|
8
|
-
tabsConnected: number;
|
|
9
8
|
template: () => string;
|
|
10
9
|
static get observedAttributes(): string[];
|
|
11
10
|
constructor();
|
|
@@ -14,7 +13,6 @@ export declare class Tabs extends HTMLElement {
|
|
|
14
13
|
disconnectedCallback(): void;
|
|
15
14
|
navigateToTab(direction: 'left' | 'right'): void;
|
|
16
15
|
handleNextPreviousDisplay: () => void;
|
|
17
|
-
allTabsConnected(): boolean;
|
|
18
16
|
shouldDisplayScrollRightButton(): boolean;
|
|
19
17
|
shouldDisplayScrollLeftButton(): boolean;
|
|
20
18
|
get $activeTab(): Tab;
|
package/dist/index.es.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
var f = (r) => {
|
|
2
2
|
throw TypeError(r);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var x = (r,
|
|
6
|
-
var n = (r,
|
|
4
|
+
var A = (r, t, e) => t.has(r) || f("Cannot " + e);
|
|
5
|
+
var x = (r, t, e) => t.has(r) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e);
|
|
6
|
+
var n = (r, t, e) => (A(r, t, "access private method"), e);
|
|
7
7
|
import "@proximus/lavender-button-icon";
|
|
8
8
|
const k = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) button{border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type),:host(:last-of-type) button{border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}button{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}:host(:focus-visible){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host(:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) button{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) button{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}", m = new CSSStyleSheet();
|
|
9
9
|
m.replaceSync(k);
|
|
10
|
-
const g = "px.lavender.tab.selected",
|
|
10
|
+
const g = "px.lavender.tab.selected", $ = "px-tab-connected";
|
|
11
11
|
class S extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
13
|
-
var
|
|
13
|
+
var t;
|
|
14
14
|
super(), this.template = () => `
|
|
15
15
|
<button type="button" tabindex="-1" >
|
|
16
16
|
<span><slot></slot></span>
|
|
17
17
|
</button>
|
|
18
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m], this.internals = (
|
|
18
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
19
19
|
}
|
|
20
20
|
static get observedAttributes() {
|
|
21
21
|
return ["selected", "for", "name", "inverted"];
|
|
22
22
|
}
|
|
23
23
|
connectedCallback() {
|
|
24
24
|
this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(
|
|
25
|
-
new CustomEvent(
|
|
25
|
+
new CustomEvent($, { bubbles: !0, composed: !0 })
|
|
26
26
|
), this.addEventListener("click", () => {
|
|
27
27
|
this.selected = !0;
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
|
-
attributeChangedCallback(
|
|
31
|
-
|
|
30
|
+
attributeChangedCallback(t, e, s) {
|
|
31
|
+
t === "selected" ? this.handleSelected(s) : t === "name" ? this.$button.setAttribute("id", s) : t === "for" ? this.setAttribute("aria-controls", s) : t === "inverted" && (s === "" ? this.$button.setAttribute("inverted", "") : this.$button.removeAttribute("inverted"));
|
|
32
32
|
}
|
|
33
33
|
get $button() {
|
|
34
34
|
return this.shadowRoot.querySelector("button");
|
|
@@ -36,26 +36,26 @@ class S extends HTMLElement {
|
|
|
36
36
|
get selected() {
|
|
37
37
|
return this.hasAttribute("selected");
|
|
38
38
|
}
|
|
39
|
-
set selected(
|
|
40
|
-
|
|
39
|
+
set selected(t) {
|
|
40
|
+
t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
41
41
|
}
|
|
42
42
|
get inverted() {
|
|
43
43
|
return this.hasAttribute("inverted");
|
|
44
44
|
}
|
|
45
|
-
set name(
|
|
46
|
-
this.setAttribute("name",
|
|
45
|
+
set name(t) {
|
|
46
|
+
this.setAttribute("name", t);
|
|
47
47
|
}
|
|
48
48
|
get name() {
|
|
49
49
|
return this.getAttribute("name");
|
|
50
50
|
}
|
|
51
|
-
set for(
|
|
52
|
-
this.setAttribute("for",
|
|
51
|
+
set for(t) {
|
|
52
|
+
this.setAttribute("for", t);
|
|
53
53
|
}
|
|
54
54
|
get for() {
|
|
55
55
|
return this.getAttribute("for");
|
|
56
56
|
}
|
|
57
|
-
handleSelected(
|
|
58
|
-
|
|
57
|
+
handleSelected(t) {
|
|
58
|
+
t !== "" ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (setTimeout(() => {
|
|
59
59
|
this.dispatchEvent(
|
|
60
60
|
new CustomEvent(g, {
|
|
61
61
|
bubbles: !0,
|
|
@@ -69,15 +69,15 @@ class S extends HTMLElement {
|
|
|
69
69
|
}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
|
-
const
|
|
73
|
-
b.replaceSync(
|
|
74
|
-
var o, d,
|
|
75
|
-
class
|
|
72
|
+
const L = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:.75em;left:-1.5em}#tab-container>#next{position:absolute;top:.75em;right:-1.5em}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box;margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1);padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1);padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1);padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', b = new CSSStyleSheet();
|
|
73
|
+
b.replaceSync(L);
|
|
74
|
+
var o, d, y;
|
|
75
|
+
class T extends HTMLElement {
|
|
76
76
|
constructor() {
|
|
77
|
-
var
|
|
77
|
+
var e;
|
|
78
78
|
super();
|
|
79
79
|
x(this, o);
|
|
80
|
-
this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.
|
|
80
|
+
this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.template = () => `
|
|
81
81
|
<div id="container">
|
|
82
82
|
<div id="tab-container">
|
|
83
83
|
<px-button-icon id="previous" aria-hidden="true">
|
|
@@ -95,8 +95,8 @@ class L extends HTMLElement {
|
|
|
95
95
|
</div>
|
|
96
96
|
</div>
|
|
97
97
|
`, this.handleNextPreviousDisplay = () => {
|
|
98
|
-
this
|
|
99
|
-
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b], this.internals = (
|
|
98
|
+
this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
|
|
99
|
+
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
|
|
100
100
|
}
|
|
101
101
|
static get observedAttributes() {
|
|
102
102
|
return [
|
|
@@ -107,8 +107,8 @@ class L extends HTMLElement {
|
|
|
107
107
|
"hide-controls"
|
|
108
108
|
];
|
|
109
109
|
}
|
|
110
|
-
attributeChangedCallback(
|
|
111
|
-
switch (
|
|
110
|
+
attributeChangedCallback(e, s, i) {
|
|
111
|
+
switch (e) {
|
|
112
112
|
case "label":
|
|
113
113
|
this.label = i;
|
|
114
114
|
break;
|
|
@@ -122,7 +122,7 @@ class L extends HTMLElement {
|
|
|
122
122
|
);
|
|
123
123
|
break;
|
|
124
124
|
case "hide-controls":
|
|
125
|
-
n(this, o,
|
|
125
|
+
n(this, o, y).call(this, i);
|
|
126
126
|
break;
|
|
127
127
|
case "inverted":
|
|
128
128
|
n(this, o, d).call(this, i);
|
|
@@ -130,8 +130,8 @@ class L extends HTMLElement {
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
connectedCallback() {
|
|
133
|
-
var
|
|
134
|
-
this.
|
|
133
|
+
var e, s;
|
|
134
|
+
this.$tabList.hasAttribute("aria-labelledby") || this.$tabList.setAttribute("aria-labelledby", this._label), this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(
|
|
135
135
|
g,
|
|
136
136
|
(i) => {
|
|
137
137
|
[...this.$tabPanels].forEach((a) => {
|
|
@@ -140,12 +140,12 @@ class L extends HTMLElement {
|
|
|
140
140
|
a.getAttribute("name") !== i.detail.tabName && a.hasAttribute("selected") && a.removeAttribute("selected");
|
|
141
141
|
});
|
|
142
142
|
}
|
|
143
|
-
), this.addEventListener(
|
|
144
|
-
this.
|
|
145
|
-
}), this.
|
|
143
|
+
), this.addEventListener($, () => {
|
|
144
|
+
this.handleNextPreviousDisplay(), this.inverted && n(this, o, d).call(this, this.getAttribute("inverted"));
|
|
145
|
+
}), this.handleNextPreviousDisplay(), n(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
|
|
146
146
|
var a, l;
|
|
147
147
|
(i.key === "ArrowRight" || i.key === "ArrowLeft") && ((l = (a = document.activeElement) == null ? void 0 : a.localName) != null && l.endsWith("-tab")) && this.navigateToTab(i.key === "ArrowRight" ? "right" : "left");
|
|
148
|
-
}), (
|
|
148
|
+
}), (e = this.$prefixButton) == null || e.addEventListener("click", (i) => {
|
|
149
149
|
i.stopPropagation(), this.$tabList.scrollTo({
|
|
150
150
|
left: this.$tabList.scrollLeft - 100,
|
|
151
151
|
behavior: "smooth"
|
|
@@ -160,15 +160,12 @@ class L extends HTMLElement {
|
|
|
160
160
|
disconnectedCallback() {
|
|
161
161
|
window.addEventListener("resize", this.handleNextPreviousDisplay);
|
|
162
162
|
}
|
|
163
|
-
navigateToTab(
|
|
163
|
+
navigateToTab(e) {
|
|
164
164
|
const s = this.$nextTab, i = this.$previousTab;
|
|
165
|
-
this.$activePanel.selected = !1, this.$activeTab.selected = !1,
|
|
166
|
-
}
|
|
167
|
-
allTabsConnected() {
|
|
168
|
-
return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length || [...this.$tabs].every((t) => t.isConnected);
|
|
165
|
+
this.$activePanel.selected = !1, this.$activeTab.selected = !1, e === "right" ? (s.selected = !0, s.focus()) : e === "left" && (i.selected = !0, i.focus()), this.$activePanel.selected = !0;
|
|
169
166
|
}
|
|
170
167
|
shouldDisplayScrollRightButton() {
|
|
171
|
-
return this
|
|
168
|
+
return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
|
|
172
169
|
}
|
|
173
170
|
shouldDisplayScrollLeftButton() {
|
|
174
171
|
return this.$tabList.scrollLeft > 0;
|
|
@@ -177,16 +174,16 @@ class L extends HTMLElement {
|
|
|
177
174
|
return this.querySelector('[selected=""][slot="tabs"]');
|
|
178
175
|
}
|
|
179
176
|
get $nextTab() {
|
|
180
|
-
const
|
|
181
|
-
return
|
|
177
|
+
const e = this.$activeTab.nextElementSibling;
|
|
178
|
+
return e.slot !== "tabs" ? this.querySelector('[slot="tabs"]') : e;
|
|
182
179
|
}
|
|
183
180
|
get $previousTab() {
|
|
184
|
-
const
|
|
185
|
-
return
|
|
181
|
+
const e = this.$activeTab.previousElementSibling;
|
|
182
|
+
return e || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
|
|
186
183
|
}
|
|
187
184
|
get $activePanel() {
|
|
188
|
-
var
|
|
189
|
-
return this.querySelector(`[name="${(
|
|
185
|
+
var e;
|
|
186
|
+
return this.querySelector(`[name="${(e = this.$activeTab) == null ? void 0 : e.for}"]`);
|
|
190
187
|
}
|
|
191
188
|
get $tabList() {
|
|
192
189
|
return this.shadowRoot.querySelector("#tablist");
|
|
@@ -206,8 +203,8 @@ class L extends HTMLElement {
|
|
|
206
203
|
get label() {
|
|
207
204
|
return this.$tabList.getAttribute("aria-labelledby");
|
|
208
205
|
}
|
|
209
|
-
set label(
|
|
210
|
-
this.$tabList.setAttribute("aria-labelledby",
|
|
206
|
+
set label(e) {
|
|
207
|
+
this.$tabList.setAttribute("aria-labelledby", e);
|
|
211
208
|
}
|
|
212
209
|
get inverted() {
|
|
213
210
|
return this.hasAttribute("inverted");
|
|
@@ -219,15 +216,15 @@ class L extends HTMLElement {
|
|
|
219
216
|
return this.getAttribute("aria-label-previous");
|
|
220
217
|
}
|
|
221
218
|
}
|
|
222
|
-
o = new WeakSet(), d = function(
|
|
219
|
+
o = new WeakSet(), d = function(e) {
|
|
223
220
|
var s, i, a, l, u, h, p, v;
|
|
224
|
-
|
|
221
|
+
e === "" ? ((s = this.$prefixButton) == null || s.setAttribute("inverted", ""), (i = this.$suffixButton) == null || i.setAttribute("inverted", ""), (a = this.$activePanel) == null || a.setAttribute("inverted", ""), (l = this.$activeTab) == null || l.setAttribute("inverted", ""), [...this.$tabs].forEach((c) => {
|
|
225
222
|
c.setAttribute("inverted", "");
|
|
226
223
|
})) : ((u = this.$prefixButton) == null || u.removeAttribute("inverted"), (h = this.$suffixButton) == null || h.removeAttribute("inverted"), (p = this.$activePanel) == null || p.removeAttribute("inverted"), (v = this.$activeTab) == null || v.removeAttribute("inverted"), [...this.$tabs].forEach((c) => {
|
|
227
224
|
c.removeAttribute("inverted");
|
|
228
225
|
}));
|
|
229
|
-
},
|
|
230
|
-
|
|
226
|
+
}, y = function(e) {
|
|
227
|
+
e === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
|
|
231
228
|
"aria-label",
|
|
232
229
|
this.ariaLabelNext || "Next tab"
|
|
233
230
|
), this.$prefixButton.setAttribute(
|
|
@@ -246,8 +243,8 @@ class E extends HTMLElement {
|
|
|
246
243
|
static get observedAttributes() {
|
|
247
244
|
return ["name", "selected"];
|
|
248
245
|
}
|
|
249
|
-
attributeChangedCallback(
|
|
250
|
-
|
|
246
|
+
attributeChangedCallback(t, e, s) {
|
|
247
|
+
t === "name" ? this.$panel.setAttribute("aria-labelledby", s) : t === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
251
248
|
}
|
|
252
249
|
connectedCallback() {
|
|
253
250
|
this.slot = "tabpanels", this.$panel.style.display = "none";
|
|
@@ -255,11 +252,11 @@ class E extends HTMLElement {
|
|
|
255
252
|
get name() {
|
|
256
253
|
return this.getAttribute("name");
|
|
257
254
|
}
|
|
258
|
-
set name(
|
|
259
|
-
this.setAttribute("name",
|
|
255
|
+
set name(t) {
|
|
256
|
+
this.setAttribute("name", t);
|
|
260
257
|
}
|
|
261
|
-
set selected(
|
|
262
|
-
|
|
258
|
+
set selected(t) {
|
|
259
|
+
t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
263
260
|
}
|
|
264
261
|
get selected() {
|
|
265
262
|
return this.hasAttribute("selected");
|
|
@@ -268,32 +265,32 @@ class E extends HTMLElement {
|
|
|
268
265
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
269
266
|
}
|
|
270
267
|
}
|
|
271
|
-
class w extends
|
|
268
|
+
class w extends T {
|
|
272
269
|
constructor() {
|
|
273
270
|
super();
|
|
274
271
|
}
|
|
275
272
|
connectedCallback() {
|
|
276
|
-
var
|
|
277
|
-
(
|
|
278
|
-
|
|
273
|
+
var t;
|
|
274
|
+
(t = super.connectedCallback) == null || t.call(this), this.querySelectorAll("px-tab").forEach((e) => {
|
|
275
|
+
e.setAttribute("slot", "tabs");
|
|
279
276
|
});
|
|
280
277
|
}
|
|
281
278
|
}
|
|
282
279
|
customElements.get("px-tabs") || customElements.define("px-tabs", w);
|
|
283
|
-
class
|
|
280
|
+
class B extends S {
|
|
284
281
|
constructor() {
|
|
285
282
|
super();
|
|
286
283
|
}
|
|
287
284
|
}
|
|
288
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
289
|
-
class
|
|
285
|
+
customElements.get("px-tab") || customElements.define("px-tab", B);
|
|
286
|
+
class P extends E {
|
|
290
287
|
constructor() {
|
|
291
288
|
super();
|
|
292
289
|
}
|
|
293
290
|
}
|
|
294
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
291
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", P);
|
|
295
292
|
export {
|
|
296
|
-
|
|
297
|
-
|
|
293
|
+
B as PxTab,
|
|
294
|
+
P as PxTabPanel,
|
|
298
295
|
w as PxTabs
|
|
299
296
|
};
|