@proximus/lavender-tabs 1.4.14-beta.2 → 1.4.15-alpha.2
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 +8 -4
- package/dist/TabPanel.d.ts +2 -2
- package/dist/Tabs.d.ts +5 -2
- package/dist/events.d.ts +11 -0
- package/dist/index.es.js +231 -285
- package/package.json +1 -1
package/dist/Tab.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
export declare const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
|
|
2
2
|
export declare const TAB_CONNECTED_EVENT = "px-tab-connected";
|
|
3
|
+
export type TabSelectedDetail = {
|
|
4
|
+
tabName: string | null;
|
|
5
|
+
forName: string | null;
|
|
6
|
+
};
|
|
3
7
|
export declare class Tab extends HTMLElement {
|
|
4
8
|
internals: ElementInternals;
|
|
5
9
|
template: () => string;
|
|
@@ -11,9 +15,9 @@ export declare class Tab extends HTMLElement {
|
|
|
11
15
|
get selected(): boolean;
|
|
12
16
|
set selected(value: boolean);
|
|
13
17
|
get inverted(): boolean;
|
|
14
|
-
set name(value: string);
|
|
15
|
-
get name(): string;
|
|
16
|
-
set for(value: string);
|
|
17
|
-
get for(): string;
|
|
18
|
+
set name(value: string | null);
|
|
19
|
+
get name(): string | null;
|
|
20
|
+
set for(value: string | null);
|
|
21
|
+
get for(): string | null;
|
|
18
22
|
handleSelected(value: string): void;
|
|
19
23
|
}
|
package/dist/TabPanel.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ export declare class TabPanel extends HTMLElement {
|
|
|
4
4
|
constructor();
|
|
5
5
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
6
6
|
connectedCallback(): void;
|
|
7
|
-
get name(): string;
|
|
8
|
-
set name(value: string);
|
|
7
|
+
get name(): string | null;
|
|
8
|
+
set name(value: string | null);
|
|
9
9
|
set selected(value: boolean);
|
|
10
10
|
get selected(): boolean;
|
|
11
11
|
get $panel(): HTMLElement;
|
package/dist/Tabs.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import '@proximus/lavender-button-icon';
|
|
2
2
|
import { type Tab } from './Tab.ts';
|
|
3
3
|
import { type TabPanel } from './TabPanel.ts';
|
|
4
|
+
import type { TabsEventMap } from './events.ts';
|
|
4
5
|
export declare class Tabs extends HTMLElement {
|
|
5
6
|
#private;
|
|
6
7
|
internals: ElementInternals;
|
|
8
|
+
/** Narrows listener types for the Tabs specific custom events. */
|
|
9
|
+
addEventListener: <K extends keyof TabsEventMap>(type: K, listener: (ev: TabsEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions) => void;
|
|
7
10
|
template: () => string;
|
|
8
11
|
static get observedAttributes(): string[];
|
|
9
12
|
constructor();
|
|
@@ -24,6 +27,6 @@ export declare class Tabs extends HTMLElement {
|
|
|
24
27
|
get $prefixButton(): HTMLButtonElement;
|
|
25
28
|
get $suffixButton(): HTMLButtonElement;
|
|
26
29
|
get inverted(): boolean;
|
|
27
|
-
get ariaLabelNext(): string;
|
|
28
|
-
get ariaLabelPrevious(): string;
|
|
30
|
+
get ariaLabelNext(): string | null;
|
|
31
|
+
get ariaLabelPrevious(): string | null;
|
|
29
32
|
}
|
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,288 +1,234 @@
|
|
|
1
|
-
var f = (r) => {
|
|
2
|
-
throw TypeError(r);
|
|
3
|
-
};
|
|
4
|
-
var S = (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) => (S(r, t, "access private method"), e);
|
|
7
1
|
import "@proximus/lavender-button-icon";
|
|
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
|
-
class
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</px-button-icon
|
|
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
|
-
|
|
2
|
+
import { booleanPropertyToAttributeSetter as e, propertyToAttributeSetter as t } from "@proximus/lavender-common";
|
|
3
|
+
//#region src/tab.css?inline
|
|
4
|
+
var n = "*{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{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])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]){background-color:var(--px-color-background-container-default-inverted)}: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]){background-color:var(--px-color-background-state-active-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 screen and (width>=48rem){button{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet)}:host[selected]>button{padding-block:var(--px-padding-m-tablet)}}@media screen and (width>=64.0625rem){button{padding:var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop)}:host[selected]>button{padding-block:var(--px-padding-m-laptop)}}", r = new CSSStyleSheet();
|
|
5
|
+
r.replaceSync(n);
|
|
6
|
+
var i = "px.lavender.tab.selected", a = "px-tab-connected", o = class extends HTMLElement {
|
|
7
|
+
static get observedAttributes() {
|
|
8
|
+
return [
|
|
9
|
+
"selected",
|
|
10
|
+
"for",
|
|
11
|
+
"name",
|
|
12
|
+
"inverted"
|
|
13
|
+
];
|
|
14
|
+
}
|
|
15
|
+
constructor() {
|
|
16
|
+
super(), this.template = () => "\n <button type=\"button\" tabindex=\"-1\" >\n <span><slot></slot></span>\n </button>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r], this.internals = this.attachInternals?.();
|
|
17
|
+
}
|
|
18
|
+
connectedCallback() {
|
|
19
|
+
this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(new CustomEvent(a, {
|
|
20
|
+
bubbles: !0,
|
|
21
|
+
composed: !0
|
|
22
|
+
})), this.addEventListener("click", () => {
|
|
23
|
+
this.selected = !0;
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
attributeChangedCallback(e, t, n) {
|
|
27
|
+
e === "selected" ? this.handleSelected(n) : e === "name" ? this.$button.setAttribute("id", n) : e === "for" ? this.setAttribute("aria-controls", n) : e === "inverted" && (n === "" ? this.$button.setAttribute("inverted", "") : this.$button.removeAttribute("inverted"));
|
|
28
|
+
}
|
|
29
|
+
get $button() {
|
|
30
|
+
return this.shadowRoot.querySelector("button");
|
|
31
|
+
}
|
|
32
|
+
get selected() {
|
|
33
|
+
return this.hasAttribute("selected");
|
|
34
|
+
}
|
|
35
|
+
set selected(t) {
|
|
36
|
+
e(this, "selected", t);
|
|
37
|
+
}
|
|
38
|
+
get inverted() {
|
|
39
|
+
return this.hasAttribute("inverted");
|
|
40
|
+
}
|
|
41
|
+
set name(e) {
|
|
42
|
+
t(this, "name", e);
|
|
43
|
+
}
|
|
44
|
+
get name() {
|
|
45
|
+
return this.getAttribute("name");
|
|
46
|
+
}
|
|
47
|
+
set for(e) {
|
|
48
|
+
t(this, "for", e);
|
|
49
|
+
}
|
|
50
|
+
get for() {
|
|
51
|
+
return this.getAttribute("for");
|
|
52
|
+
}
|
|
53
|
+
handleSelected(e) {
|
|
54
|
+
e === "" ? (setTimeout(() => {
|
|
55
|
+
this.dispatchEvent(new CustomEvent(i, {
|
|
56
|
+
bubbles: !0,
|
|
57
|
+
composed: !0,
|
|
58
|
+
detail: {
|
|
59
|
+
tabName: this.name,
|
|
60
|
+
forName: this.for
|
|
61
|
+
}
|
|
62
|
+
}));
|
|
63
|
+
}), 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");
|
|
64
|
+
}
|
|
65
|
+
}, s = "*{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-tablet)}#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-laptop)}#tablist{margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1);padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}", c = new CSSStyleSheet();
|
|
66
|
+
c.replaceSync(s);
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/Tabs.ts
|
|
69
|
+
var l = class extends HTMLElement {
|
|
70
|
+
static get observedAttributes() {
|
|
71
|
+
return [
|
|
72
|
+
"inverted",
|
|
73
|
+
"aria-label-next",
|
|
74
|
+
"aria-label-previous",
|
|
75
|
+
"hide-controls"
|
|
76
|
+
];
|
|
77
|
+
}
|
|
78
|
+
constructor() {
|
|
79
|
+
super(), this.template = () => "\n <div id=\"container\">\n <div id=\"tab-container\">\n <px-button-icon id=\"previous\" aria-hidden=\"true\" hidden--mobile hidden--tablet>\n <px-icon name=\"chevron_left\" from=\"lavender\"></px-icon>\n </px-button-icon>\n <div id=\"tablist\">\n <slot name=\"tabs\"></slot>\n </div>\n <px-button-icon id=\"next\" aria-hidden=\"true\" hidden--mobile hidden--tablet>\n <px-icon name=\"chevron_right\" from=\"lavender\"></px-icon>\n </px-button-icon>\n </div>\n <div id=\"panels\">\n <slot name=\"tabpanels\"></slot>\n </div>\n </div>\n ", 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" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c], this.internals = this.attachInternals?.();
|
|
82
|
+
}
|
|
83
|
+
attributeChangedCallback(e, t, n) {
|
|
84
|
+
switch (e) {
|
|
85
|
+
case "aria-label-next":
|
|
86
|
+
this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", n || "Next tab");
|
|
87
|
+
break;
|
|
88
|
+
case "aria-label-previous":
|
|
89
|
+
this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute("aria-label", n || "Previous tab");
|
|
90
|
+
break;
|
|
91
|
+
case "hide-controls":
|
|
92
|
+
this.#t(n);
|
|
93
|
+
break;
|
|
94
|
+
case "inverted": this.#e(n);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
connectedCallback() {
|
|
98
|
+
this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(i, (e) => {
|
|
99
|
+
[...this.$tabPanels].forEach((t) => {
|
|
100
|
+
t.getAttribute("name") !== e.detail.forName && t.hasAttribute("selected") && (t.removeAttribute("selected"), t.removeAttribute("aria-labelledby")), t.getAttribute("name") === e.detail.forName && (t.setAttribute("selected", ""), e.detail.tabName && t.setAttribute("aria-labelledby", e.detail.tabName));
|
|
101
|
+
}), [...this.$tabs].forEach((t) => {
|
|
102
|
+
t.getAttribute("name") !== e.detail.tabName && t.hasAttribute("selected") && t.removeAttribute("selected");
|
|
103
|
+
});
|
|
104
|
+
}), this.addEventListener(a, () => {
|
|
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.ariaLabelNext || "Next tab"), this.$prefixButton.setAttribute("aria-label", this.ariaLabelPrevious || "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(`[name="${this.$activeTab?.for}"]`);
|
|
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 inverted() {
|
|
172
|
+
return this.hasAttribute("inverted");
|
|
173
|
+
}
|
|
174
|
+
get ariaLabelNext() {
|
|
175
|
+
return this.getAttribute("aria-label-next");
|
|
176
|
+
}
|
|
177
|
+
get ariaLabelPrevious() {
|
|
178
|
+
return this.getAttribute("aria-label-previous");
|
|
179
|
+
}
|
|
180
|
+
}, u = ":host [role=tabpanel]{overflow-x:auto}", d = new CSSStyleSheet();
|
|
181
|
+
d.replaceSync(u);
|
|
182
|
+
var f = class extends HTMLElement {
|
|
183
|
+
static get observedAttributes() {
|
|
184
|
+
return ["name", "selected"];
|
|
185
|
+
}
|
|
186
|
+
constructor() {
|
|
187
|
+
super(), this.template = () => "\n <div role=\"tabpanel\" tabindex=\"0\">\n <slot></slot>\n </div>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c, d];
|
|
188
|
+
}
|
|
189
|
+
attributeChangedCallback(e, t, n) {
|
|
190
|
+
e === "name" ? this.$panel.setAttribute("aria-labelledby", n) : e === "selected" && (n === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
191
|
+
}
|
|
192
|
+
connectedCallback() {
|
|
193
|
+
this.slot = "tabpanels", this.$panel.style.display = "none";
|
|
194
|
+
}
|
|
195
|
+
get name() {
|
|
196
|
+
return this.getAttribute("name");
|
|
197
|
+
}
|
|
198
|
+
set name(e) {
|
|
199
|
+
t(this, "name", e);
|
|
200
|
+
}
|
|
201
|
+
set selected(t) {
|
|
202
|
+
e(this, "selected", t);
|
|
203
|
+
}
|
|
204
|
+
get selected() {
|
|
205
|
+
return this.hasAttribute("selected");
|
|
206
|
+
}
|
|
207
|
+
get $panel() {
|
|
208
|
+
return this.shadowRoot.querySelector("[role=\"tabpanel\"]");
|
|
209
|
+
}
|
|
210
|
+
}, p = class extends l {
|
|
211
|
+
constructor() {
|
|
212
|
+
super();
|
|
213
|
+
}
|
|
214
|
+
connectedCallback() {
|
|
215
|
+
super.connectedCallback?.(), this.querySelectorAll("px-tab").forEach((e) => {
|
|
216
|
+
e.setAttribute("slot", "tabs");
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
};
|
|
220
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", p);
|
|
221
|
+
var m = class extends o {
|
|
222
|
+
constructor() {
|
|
223
|
+
super();
|
|
224
|
+
}
|
|
224
225
|
};
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<div role="tabpanel" tabindex="0">
|
|
231
|
-
<slot></slot>
|
|
232
|
-
</div>
|
|
233
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u, A];
|
|
234
|
-
}
|
|
235
|
-
static get observedAttributes() {
|
|
236
|
-
return ["name", "selected"];
|
|
237
|
-
}
|
|
238
|
-
attributeChangedCallback(t, e, s) {
|
|
239
|
-
t === "name" ? this.$panel.setAttribute("aria-labelledby", s) : t === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
240
|
-
}
|
|
241
|
-
connectedCallback() {
|
|
242
|
-
this.slot = "tabpanels", this.$panel.style.display = "none";
|
|
243
|
-
}
|
|
244
|
-
get name() {
|
|
245
|
-
return this.getAttribute("name");
|
|
246
|
-
}
|
|
247
|
-
set name(t) {
|
|
248
|
-
this.setAttribute("name", t);
|
|
249
|
-
}
|
|
250
|
-
set selected(t) {
|
|
251
|
-
t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
252
|
-
}
|
|
253
|
-
get selected() {
|
|
254
|
-
return this.hasAttribute("selected");
|
|
255
|
-
}
|
|
256
|
-
get $panel() {
|
|
257
|
-
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
class B extends k {
|
|
261
|
-
constructor() {
|
|
262
|
-
super();
|
|
263
|
-
}
|
|
264
|
-
connectedCallback() {
|
|
265
|
-
var t;
|
|
266
|
-
(t = super.connectedCallback) == null || t.call(this), this.querySelectorAll("px-tab").forEach((e) => {
|
|
267
|
-
e.setAttribute("slot", "tabs");
|
|
268
|
-
});
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
customElements.get("px-tabs") || customElements.define("px-tabs", B);
|
|
272
|
-
class C extends E {
|
|
273
|
-
constructor() {
|
|
274
|
-
super();
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
customElements.get("px-tab") || customElements.define("px-tab", C);
|
|
278
|
-
class N extends P {
|
|
279
|
-
constructor() {
|
|
280
|
-
super();
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", N);
|
|
284
|
-
export {
|
|
285
|
-
C as PxTab,
|
|
286
|
-
N as PxTabPanel,
|
|
287
|
-
B as PxTabs
|
|
226
|
+
customElements.get("px-tab") || customElements.define("px-tab", m);
|
|
227
|
+
var h = class extends f {
|
|
228
|
+
constructor() {
|
|
229
|
+
super();
|
|
230
|
+
}
|
|
288
231
|
};
|
|
232
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", h);
|
|
233
|
+
//#endregion
|
|
234
|
+
export { m as PxTab, h as PxTabPanel, p as PxTabs };
|