@proximus/lavender-tabs 2.0.0-alpha.21 → 2.0.0-alpha.210
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/Tab.d.ts +9 -5
- package/dist/TabPanel.d.ts +4 -3
- package/dist/Tabs.d.ts +17 -15
- package/dist/events.d.ts +11 -0
- package/dist/index.es.js +250 -277
- package/package.json +1 -1
package/dist/Tab.d.ts
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
|
+
export declare const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
|
|
2
|
+
export declare const TAB_CONNECTED_EVENT = "px-tab-connected";
|
|
3
|
+
export type TabSelectedDetail = {
|
|
4
|
+
tabId: string;
|
|
5
|
+
targetId: string;
|
|
6
|
+
};
|
|
1
7
|
export declare class Tab extends HTMLElement {
|
|
8
|
+
protected static readonly template: HTMLTemplateElement;
|
|
2
9
|
internals: ElementInternals;
|
|
3
|
-
template: () => string;
|
|
4
10
|
static get observedAttributes(): string[];
|
|
5
11
|
constructor();
|
|
6
12
|
connectedCallback(): void;
|
|
@@ -9,9 +15,7 @@ export declare class Tab extends HTMLElement {
|
|
|
9
15
|
get selected(): boolean;
|
|
10
16
|
set selected(value: boolean);
|
|
11
17
|
get inverted(): boolean;
|
|
12
|
-
set
|
|
13
|
-
get
|
|
14
|
-
set target(value: string);
|
|
15
|
-
get target(): string;
|
|
18
|
+
set target(value: string | null);
|
|
19
|
+
get target(): string | null;
|
|
16
20
|
handleSelected(value: string): void;
|
|
17
21
|
}
|
package/dist/TabPanel.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
export declare class TabPanel extends HTMLElement {
|
|
2
|
-
template:
|
|
2
|
+
protected static readonly template: HTMLTemplateElement;
|
|
3
3
|
static get observedAttributes(): string[];
|
|
4
4
|
constructor();
|
|
5
5
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
6
6
|
connectedCallback(): void;
|
|
7
|
-
get panelId(): string;
|
|
8
|
-
set panelId(value: string);
|
|
7
|
+
get panelId(): string | null;
|
|
8
|
+
set panelId(value: string | null);
|
|
9
9
|
set selected(value: boolean);
|
|
10
|
+
get selected(): boolean;
|
|
10
11
|
get $panel(): HTMLElement;
|
|
11
12
|
}
|
package/dist/Tabs.d.ts
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import '@proximus/lavender-button-icon';
|
|
2
|
-
import { Tab } from './Tab.ts';
|
|
3
|
-
import { TabPanel } from './TabPanel.ts';
|
|
2
|
+
import { type Tab } from './Tab.ts';
|
|
3
|
+
import { type TabPanel } from './TabPanel.ts';
|
|
4
|
+
import type { TabsEventMap } from './events.ts';
|
|
4
5
|
export declare class Tabs extends HTMLElement {
|
|
6
|
+
#private;
|
|
7
|
+
protected static readonly template: HTMLTemplateElement;
|
|
5
8
|
internals: ElementInternals;
|
|
6
|
-
|
|
7
|
-
|
|
9
|
+
/** Narrows listener types for the Tabs specific custom events. */
|
|
10
|
+
addEventListener: <K extends keyof TabsEventMap>(type: K, listener: (ev: TabsEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions) => void;
|
|
8
11
|
static get observedAttributes(): string[];
|
|
9
12
|
constructor();
|
|
10
13
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
11
14
|
connectedCallback(): void;
|
|
12
|
-
|
|
15
|
+
disconnectedCallback(): void;
|
|
13
16
|
navigateToTab(direction: 'left' | 'right'): void;
|
|
14
|
-
handleNextPreviousDisplay()
|
|
15
|
-
allTabsConnected(): boolean;
|
|
17
|
+
handleNextPreviousDisplay: () => void;
|
|
16
18
|
shouldDisplayScrollRightButton(): boolean;
|
|
17
19
|
shouldDisplayScrollLeftButton(): boolean;
|
|
18
20
|
get $activeTab(): Tab;
|
|
@@ -20,16 +22,16 @@ export declare class Tabs extends HTMLElement {
|
|
|
20
22
|
get $previousTab(): Tab;
|
|
21
23
|
get $activePanel(): TabPanel;
|
|
22
24
|
get $tabList(): HTMLElement;
|
|
25
|
+
get $tabs(): NodeListOf<Tab>;
|
|
26
|
+
get $tabPanels(): NodeListOf<TabPanel>;
|
|
23
27
|
get $prefixButton(): HTMLButtonElement;
|
|
24
|
-
get $prefixButtonIcon(): HTMLElement;
|
|
25
28
|
get $suffixButton(): HTMLButtonElement;
|
|
26
|
-
get
|
|
27
|
-
|
|
28
|
-
set tablistAriaLabelledby(value: string);
|
|
29
|
+
get hideControls(): boolean;
|
|
30
|
+
set hideControls(value: boolean);
|
|
29
31
|
get inverted(): boolean;
|
|
30
32
|
set inverted(value: boolean);
|
|
31
|
-
get nextAriaLabel(): string;
|
|
32
|
-
set nextAriaLabel(value: string);
|
|
33
|
-
get previousAriaLabel(): string;
|
|
34
|
-
set previousAriaLabel(value: string);
|
|
33
|
+
get nextAriaLabel(): string | null;
|
|
34
|
+
set nextAriaLabel(value: string | null);
|
|
35
|
+
get previousAriaLabel(): string | null;
|
|
36
|
+
set previousAriaLabel(value: string | null);
|
|
35
37
|
}
|
package/dist/events.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { TAB_CONNECTED_EVENT, TAB_SELECTED_EVENT, type TabSelectedDetail } from './Tab.ts';
|
|
2
|
+
export type { TabSelectedDetail };
|
|
3
|
+
/**
|
|
4
|
+
* Custom events handled by the Tabs, on top of the standard DOM events.
|
|
5
|
+
* Declared locally (instead of augmenting the global `HTMLElementEventMap`)
|
|
6
|
+
* so these event names are only typed on the elements that actually use them.
|
|
7
|
+
*/
|
|
8
|
+
export interface TabsEventMap extends HTMLElementEventMap {
|
|
9
|
+
[TAB_SELECTED_EVENT]: CustomEvent<TabSelectedDetail>;
|
|
10
|
+
[TAB_CONNECTED_EVENT]: CustomEvent;
|
|
11
|
+
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,279 +1,252 @@
|
|
|
1
1
|
import "@proximus/lavender-button-icon";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
l.
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
}
|
|
238
|
-
get panelId() {
|
|
239
|
-
return this.getAttribute("panel-id");
|
|
240
|
-
}
|
|
241
|
-
set panelId(t) {
|
|
242
|
-
this.setAttribute("panel-id", t);
|
|
243
|
-
}
|
|
244
|
-
set selected(t) {
|
|
245
|
-
t ? this.$panel.style.display = "block" : this.$panel.style.display = "none";
|
|
246
|
-
}
|
|
247
|
-
get $panel() {
|
|
248
|
-
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
class f extends u {
|
|
252
|
-
constructor() {
|
|
253
|
-
super();
|
|
254
|
-
}
|
|
255
|
-
connectedCallback() {
|
|
256
|
-
var t;
|
|
257
|
-
(t = super.connectedCallback) == null || t.call(this), this.querySelectorAll("px-tab").forEach((i) => {
|
|
258
|
-
i.setAttribute("slot", "tabs");
|
|
259
|
-
});
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
customElements.get("px-tabs") || customElements.define("px-tabs", f);
|
|
263
|
-
class x extends p {
|
|
264
|
-
constructor() {
|
|
265
|
-
super();
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
customElements.get("px-tab") || customElements.define("px-tab", x);
|
|
269
|
-
class g extends v {
|
|
270
|
-
constructor() {
|
|
271
|
-
super();
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", g);
|
|
275
|
-
export {
|
|
276
|
-
x as PxTab,
|
|
277
|
-
g as PxTabPanel,
|
|
278
|
-
f as PxTabs
|
|
2
|
+
import { booleanPropertyToAttributeSetter as e, createTemplate as t, propertyToAttributeSetter as n, renderTemplate as r } from "@proximus/lavender-common";
|
|
3
|
+
//#region src/tab.css?inline
|
|
4
|
+
var i = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) .tab-btn{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) .tab-btn{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])>.tab-btn{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}.tab-btn{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);background:0 0;border:none;outline:none;margin:0}: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])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .tab-btn{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted][selected]) .tab-btn{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media screen and (width>=48rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}@media screen and (width>=64.0625rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}", a = new CSSStyleSheet();
|
|
5
|
+
a.replaceSync(i);
|
|
6
|
+
var o = "px.lavender.tab.selected", s = "px-tab-connected", c = class i extends HTMLElement {
|
|
7
|
+
static {
|
|
8
|
+
this.template = t("<div class=\"tab-btn\"><slot></slot></div>");
|
|
9
|
+
}
|
|
10
|
+
static get observedAttributes() {
|
|
11
|
+
return [
|
|
12
|
+
"selected",
|
|
13
|
+
"target",
|
|
14
|
+
"id",
|
|
15
|
+
"inverted"
|
|
16
|
+
];
|
|
17
|
+
}
|
|
18
|
+
constructor() {
|
|
19
|
+
super(), this.attachShadow({ mode: "open" }), r(this.shadowRoot, i.template), this.shadowRoot.adoptedStyleSheets = [a], this.internals = this.attachInternals?.();
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(new CustomEvent(s, {
|
|
23
|
+
bubbles: !0,
|
|
24
|
+
composed: !0
|
|
25
|
+
})), this.addEventListener("click", () => {
|
|
26
|
+
this.selected = !0;
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
attributeChangedCallback(e, t, n) {
|
|
30
|
+
e === "selected" ? this.handleSelected(n) : e === "id" ? this.$tabBtn.setAttribute("id", n) : e === "target" ? this.setAttribute("aria-controls", n) : e === "inverted" && (n === "" ? this.$tabBtn.setAttribute("inverted", "") : this.$tabBtn.removeAttribute("inverted"));
|
|
31
|
+
}
|
|
32
|
+
get $tabBtn() {
|
|
33
|
+
return this.shadowRoot.querySelector(".tab-btn");
|
|
34
|
+
}
|
|
35
|
+
get selected() {
|
|
36
|
+
return this.hasAttribute("selected");
|
|
37
|
+
}
|
|
38
|
+
set selected(t) {
|
|
39
|
+
e(this, "selected", t);
|
|
40
|
+
}
|
|
41
|
+
get inverted() {
|
|
42
|
+
return this.hasAttribute("inverted");
|
|
43
|
+
}
|
|
44
|
+
set target(e) {
|
|
45
|
+
n(this, "target", e);
|
|
46
|
+
}
|
|
47
|
+
get target() {
|
|
48
|
+
return this.getAttribute("target");
|
|
49
|
+
}
|
|
50
|
+
handleSelected(e) {
|
|
51
|
+
e === "" ? (setTimeout(() => {
|
|
52
|
+
this.target && this.dispatchEvent(new CustomEvent(o, {
|
|
53
|
+
bubbles: !0,
|
|
54
|
+
composed: !0,
|
|
55
|
+
detail: {
|
|
56
|
+
tabId: this.id,
|
|
57
|
+
targetId: this.target
|
|
58
|
+
}
|
|
59
|
+
}));
|
|
60
|
+
}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true") : (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false");
|
|
61
|
+
}
|
|
62
|
+
}, l = "*{font-family:var(--px-font-family)}#container{align-items:flex-start;gap:var(--px-spacing-default-mobile);flex-direction:column;display:flex}#tab-container{width:100%;position:relative}#tab-container>#previous{position:absolute;top:12px;left:-24px}#tab-container>#next{position:absolute;top:12px;right:-24px}#panels{width:100%}#tablist{scrollbar-width:none;box-sizing:border-box;width:100%;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));align-items:center;display:flex;overflow:scroll}#tablist::-webkit-scrollbar{display:none}: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 screen and (width>=48rem){#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 screen and (width>=64.0625rem){#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))}}", u = new CSSStyleSheet();
|
|
63
|
+
u.replaceSync(l);
|
|
64
|
+
//#endregion
|
|
65
|
+
//#region src/Tabs.ts
|
|
66
|
+
var d = class e extends HTMLElement {
|
|
67
|
+
static {
|
|
68
|
+
this.template = t("<div id=\"container\"><div id=\"tab-container\"><px-button-icon id=\"previous\" hidden--mobile hidden--tablet><px-icon name=\"chevron_left\" from=\"lavender\"></px-icon></px-button-icon><div id=\"tablist\"><slot name=\"tabs\"></slot></div><px-button-icon id=\"next\" hidden--mobile hidden--tablet><px-icon name=\"chevron_right\" from=\"lavender\"></px-icon></px-button-icon></div><div id=\"panels\"><slot name=\"tabpanels\"></slot></div></div>");
|
|
69
|
+
}
|
|
70
|
+
static get observedAttributes() {
|
|
71
|
+
return [
|
|
72
|
+
"inverted",
|
|
73
|
+
"next-aria-label",
|
|
74
|
+
"previous-aria-label",
|
|
75
|
+
"hide-controls"
|
|
76
|
+
];
|
|
77
|
+
}
|
|
78
|
+
constructor() {
|
|
79
|
+
super(), this.handleNextPreviousDisplay = () => {
|
|
80
|
+
this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
|
|
81
|
+
}, this.attachShadow({ mode: "open" }), r(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [u], this.internals = this.attachInternals?.();
|
|
82
|
+
}
|
|
83
|
+
attributeChangedCallback(e, t, n) {
|
|
84
|
+
switch (e) {
|
|
85
|
+
case "next-aria-label":
|
|
86
|
+
this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", n);
|
|
87
|
+
break;
|
|
88
|
+
case "previous-aria-label":
|
|
89
|
+
this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute("aria-label", n);
|
|
90
|
+
break;
|
|
91
|
+
case "hide-controls":
|
|
92
|
+
this.#t(n);
|
|
93
|
+
break;
|
|
94
|
+
case "inverted": this.#e(n);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
connectedCallback() {
|
|
98
|
+
this.$tabList.role = "tablist", this.addEventListener(o, (e) => {
|
|
99
|
+
[...this.$tabPanels].forEach((t) => {
|
|
100
|
+
t.getAttribute("panel-id") !== e.detail.targetId && t.hasAttribute("selected") && (t.removeAttribute("selected"), t.removeAttribute("aria-labelledby")), t.getAttribute("panel-id") === e.detail.targetId && (t.setAttribute("selected", ""), t.setAttribute("aria-labelledby", e.detail.tabId));
|
|
101
|
+
}), [...this.$tabs].forEach((t) => {
|
|
102
|
+
t.getAttribute("id") !== e.detail.tabId && t.hasAttribute("selected") && t.removeAttribute("selected");
|
|
103
|
+
});
|
|
104
|
+
}), this.addEventListener(s, () => {
|
|
105
|
+
this.handleNextPreviousDisplay(), this.inverted && this.#e(this.getAttribute("inverted"));
|
|
106
|
+
}), this.handleNextPreviousDisplay(), this.#e(this.getAttribute("inverted")), this.addEventListener("keydown", (e) => {
|
|
107
|
+
(e.key === "ArrowRight" || e.key === "ArrowLeft") && document.activeElement?.localName?.endsWith("-tab") && this.navigateToTab(e.key === "ArrowRight" ? "right" : "left");
|
|
108
|
+
}), this.$prefixButton?.addEventListener("click", (e) => {
|
|
109
|
+
e.stopPropagation(), this.$tabList.scrollTo({
|
|
110
|
+
left: this.$tabList.scrollLeft - 100,
|
|
111
|
+
behavior: "smooth"
|
|
112
|
+
});
|
|
113
|
+
}), this.$suffixButton?.addEventListener("click", (e) => {
|
|
114
|
+
e.stopPropagation(), this.$tabList.scrollTo({
|
|
115
|
+
left: this.$tabList.scrollLeft + 100,
|
|
116
|
+
behavior: "smooth"
|
|
117
|
+
});
|
|
118
|
+
}), window.addEventListener("resize", this.handleNextPreviousDisplay), this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
|
|
119
|
+
}
|
|
120
|
+
disconnectedCallback() {
|
|
121
|
+
window.addEventListener("resize", this.handleNextPreviousDisplay);
|
|
122
|
+
}
|
|
123
|
+
#e(e) {
|
|
124
|
+
e === "" ? (this.$prefixButton?.setAttribute("inverted", ""), this.$suffixButton?.setAttribute("inverted", ""), this.$activePanel?.setAttribute("inverted", ""), this.$activeTab?.setAttribute("inverted", ""), [...this.$tabs].forEach((e) => {
|
|
125
|
+
e.setAttribute("inverted", "");
|
|
126
|
+
})) : (this.$prefixButton?.removeAttribute("inverted"), this.$suffixButton?.removeAttribute("inverted"), this.$activePanel?.removeAttribute("inverted"), this.$activeTab?.removeAttribute("inverted"), [...this.$tabs].forEach((e) => {
|
|
127
|
+
e.removeAttribute("inverted");
|
|
128
|
+
}));
|
|
129
|
+
}
|
|
130
|
+
#t(e) {
|
|
131
|
+
e === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute("aria-label", this.nextAriaLabel || "Next tab"), this.$prefixButton.setAttribute("aria-label", this.previousAriaLabel || "Previous tab"));
|
|
132
|
+
}
|
|
133
|
+
navigateToTab(e) {
|
|
134
|
+
let t = this.$nextTab, n = this.$previousTab;
|
|
135
|
+
this.$activePanel.selected = !1, this.$activeTab.selected = !1, e === "right" ? (t.selected = !0, t.focus()) : e === "left" && (n.selected = !0, n.focus()), this.$activePanel.selected = !0;
|
|
136
|
+
}
|
|
137
|
+
shouldDisplayScrollRightButton() {
|
|
138
|
+
return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
|
|
139
|
+
}
|
|
140
|
+
shouldDisplayScrollLeftButton() {
|
|
141
|
+
return this.$tabList.scrollLeft > 0;
|
|
142
|
+
}
|
|
143
|
+
get $activeTab() {
|
|
144
|
+
return this.querySelector("[selected=\"\"][slot=\"tabs\"]");
|
|
145
|
+
}
|
|
146
|
+
get $nextTab() {
|
|
147
|
+
let e = this.$activeTab.nextElementSibling;
|
|
148
|
+
return e?.slot === "tabs" ? e : this.querySelector("[slot=\"tabs\"]");
|
|
149
|
+
}
|
|
150
|
+
get $previousTab() {
|
|
151
|
+
return this.$activeTab.previousElementSibling || Array.from(this.querySelectorAll("[slot=\"tabs\"]")).pop();
|
|
152
|
+
}
|
|
153
|
+
get $activePanel() {
|
|
154
|
+
return this.querySelector(`[panel-id="${this.$activeTab?.target}"]`);
|
|
155
|
+
}
|
|
156
|
+
get $tabList() {
|
|
157
|
+
return this.shadowRoot.querySelector("#tablist");
|
|
158
|
+
}
|
|
159
|
+
get $tabs() {
|
|
160
|
+
return this.querySelectorAll("[slot=\"tabs\"]");
|
|
161
|
+
}
|
|
162
|
+
get $tabPanels() {
|
|
163
|
+
return this.querySelectorAll("[slot=\"tabpanels\"]");
|
|
164
|
+
}
|
|
165
|
+
get $prefixButton() {
|
|
166
|
+
return this.shadowRoot.querySelector("#previous");
|
|
167
|
+
}
|
|
168
|
+
get $suffixButton() {
|
|
169
|
+
return this.shadowRoot.querySelector("#next");
|
|
170
|
+
}
|
|
171
|
+
get hideControls() {
|
|
172
|
+
return this.hasAttribute("hide-controls");
|
|
173
|
+
}
|
|
174
|
+
set hideControls(e) {
|
|
175
|
+
e ? this.setAttribute("hide-controls", "") : this.removeAttribute("hide-controls");
|
|
176
|
+
}
|
|
177
|
+
get inverted() {
|
|
178
|
+
return this.hasAttribute("inverted");
|
|
179
|
+
}
|
|
180
|
+
set inverted(e) {
|
|
181
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
182
|
+
}
|
|
183
|
+
get nextAriaLabel() {
|
|
184
|
+
return this.getAttribute("next-aria-label");
|
|
185
|
+
}
|
|
186
|
+
set nextAriaLabel(e) {
|
|
187
|
+
n(this, "next-aria-label", e);
|
|
188
|
+
}
|
|
189
|
+
get previousAriaLabel() {
|
|
190
|
+
return this.getAttribute("previous-aria-label");
|
|
191
|
+
}
|
|
192
|
+
set previousAriaLabel(e) {
|
|
193
|
+
n(this, "previous-aria-label", e);
|
|
194
|
+
}
|
|
195
|
+
}, f = ":host [role=tabpanel]{overflow-x:auto}", p = new CSSStyleSheet();
|
|
196
|
+
p.replaceSync(f);
|
|
197
|
+
var m = class i extends HTMLElement {
|
|
198
|
+
static {
|
|
199
|
+
this.template = t("<div role=\"tabpanel\" tabindex=\"0\"><slot></slot></div>");
|
|
200
|
+
}
|
|
201
|
+
static get observedAttributes() {
|
|
202
|
+
return ["id", "selected"];
|
|
203
|
+
}
|
|
204
|
+
constructor() {
|
|
205
|
+
super(), this.attachShadow({ mode: "open" }), r(this.shadowRoot, i.template), this.shadowRoot.adoptedStyleSheets = [u, p];
|
|
206
|
+
}
|
|
207
|
+
attributeChangedCallback(e, t, n) {
|
|
208
|
+
e === "panel-id" ? this.$panel.setAttribute("id", n) : e === "selected" && (n === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
209
|
+
}
|
|
210
|
+
connectedCallback() {
|
|
211
|
+
this.slot = "tabpanels", this.$panel.style.display = "none";
|
|
212
|
+
}
|
|
213
|
+
get panelId() {
|
|
214
|
+
return this.getAttribute("panel-id");
|
|
215
|
+
}
|
|
216
|
+
set panelId(e) {
|
|
217
|
+
n(this, "panel-id", e);
|
|
218
|
+
}
|
|
219
|
+
set selected(t) {
|
|
220
|
+
e(this, "selected", t);
|
|
221
|
+
}
|
|
222
|
+
get selected() {
|
|
223
|
+
return this.hasAttribute("selected");
|
|
224
|
+
}
|
|
225
|
+
get $panel() {
|
|
226
|
+
return this.shadowRoot.querySelector("[role=\"tabpanel\"]");
|
|
227
|
+
}
|
|
228
|
+
}, h = class extends d {
|
|
229
|
+
constructor() {
|
|
230
|
+
super();
|
|
231
|
+
}
|
|
232
|
+
connectedCallback() {
|
|
233
|
+
super.connectedCallback?.(), this.querySelectorAll("px-tab").forEach((e) => {
|
|
234
|
+
e.setAttribute("slot", "tabs");
|
|
235
|
+
});
|
|
236
|
+
}
|
|
279
237
|
};
|
|
238
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", h);
|
|
239
|
+
var g = class extends c {
|
|
240
|
+
constructor() {
|
|
241
|
+
super();
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
customElements.get("px-tab") || customElements.define("px-tab", g);
|
|
245
|
+
var _ = class extends m {
|
|
246
|
+
constructor() {
|
|
247
|
+
super();
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", _);
|
|
251
|
+
//#endregion
|
|
252
|
+
export { g as PxTab, _ as PxTabPanel, h as PxTabs };
|