@proximus/lavender-tabs 2.0.0-alpha.2 → 2.0.0-alpha.200
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/PxTabs.d.ts +1 -0
- package/dist/Tab.d.ts +9 -5
- package/dist/TabPanel.d.ts +3 -2
- package/dist/Tabs.d.ts +17 -11
- package/dist/events.d.ts +11 -0
- package/dist/index.es.js +243 -251
- package/package.json +1 -1
package/dist/PxTabs.d.ts
CHANGED
package/dist/Tab.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
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 {
|
|
2
8
|
internals: ElementInternals;
|
|
3
9
|
template: () => string;
|
|
@@ -5,13 +11,11 @@ export declare class Tab extends HTMLElement {
|
|
|
5
11
|
constructor();
|
|
6
12
|
connectedCallback(): void;
|
|
7
13
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
8
|
-
get $
|
|
14
|
+
get $tabBtn(): HTMLSpanElement;
|
|
9
15
|
get selected(): boolean;
|
|
10
16
|
set selected(value: boolean);
|
|
11
17
|
get inverted(): boolean;
|
|
12
|
-
set
|
|
13
|
-
get
|
|
14
|
-
set for(value: string);
|
|
15
|
-
get for(): 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
|
@@ -4,8 +4,9 @@ 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
|
|
8
|
-
set
|
|
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,19 +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 {
|
|
5
|
-
private
|
|
6
|
+
#private;
|
|
6
7
|
internals: ElementInternals;
|
|
7
|
-
|
|
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;
|
|
8
10
|
template: () => string;
|
|
9
11
|
static get observedAttributes(): string[];
|
|
10
12
|
constructor();
|
|
11
13
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
12
14
|
connectedCallback(): void;
|
|
13
|
-
|
|
15
|
+
disconnectedCallback(): void;
|
|
14
16
|
navigateToTab(direction: 'left' | 'right'): void;
|
|
15
|
-
handleNextPreviousDisplay()
|
|
16
|
-
allTabsConnected(): boolean;
|
|
17
|
+
handleNextPreviousDisplay: () => void;
|
|
17
18
|
shouldDisplayScrollRightButton(): boolean;
|
|
18
19
|
shouldDisplayScrollLeftButton(): boolean;
|
|
19
20
|
get $activeTab(): Tab;
|
|
@@ -21,11 +22,16 @@ export declare class Tabs extends HTMLElement {
|
|
|
21
22
|
get $previousTab(): Tab;
|
|
22
23
|
get $activePanel(): TabPanel;
|
|
23
24
|
get $tabList(): HTMLElement;
|
|
25
|
+
get $tabs(): NodeListOf<Tab>;
|
|
26
|
+
get $tabPanels(): NodeListOf<TabPanel>;
|
|
24
27
|
get $prefixButton(): HTMLButtonElement;
|
|
25
28
|
get $suffixButton(): HTMLButtonElement;
|
|
26
|
-
get
|
|
27
|
-
set
|
|
29
|
+
get hideControls(): boolean;
|
|
30
|
+
set hideControls(value: boolean);
|
|
28
31
|
get inverted(): boolean;
|
|
29
|
-
|
|
30
|
-
get
|
|
32
|
+
set inverted(value: boolean);
|
|
33
|
+
get nextAriaLabel(): string | null;
|
|
34
|
+
set nextAriaLabel(value: string | null);
|
|
35
|
+
get previousAriaLabel(): string | null;
|
|
36
|
+
set previousAriaLabel(value: string | null);
|
|
31
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,255 +1,247 @@
|
|
|
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
|
-
|
|
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) .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)}}", 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
|
+
"target",
|
|
11
|
+
"id",
|
|
12
|
+
"inverted"
|
|
13
|
+
];
|
|
14
|
+
}
|
|
15
|
+
constructor() {
|
|
16
|
+
super(), this.template = () => "\n <div class=\"tab-btn\"><slot></slot></div>\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 === "id" ? this.$tabBtn.setAttribute("id", n) : e === "target" ? this.setAttribute("aria-controls", n) : e === "inverted" && (n === "" ? this.$tabBtn.setAttribute("inverted", "") : this.$tabBtn.removeAttribute("inverted"));
|
|
28
|
+
}
|
|
29
|
+
get $tabBtn() {
|
|
30
|
+
return this.shadowRoot.querySelector(".tab-btn");
|
|
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 target(e) {
|
|
42
|
+
t(this, "target", e);
|
|
43
|
+
}
|
|
44
|
+
get target() {
|
|
45
|
+
return this.getAttribute("target");
|
|
46
|
+
}
|
|
47
|
+
handleSelected(e) {
|
|
48
|
+
e === "" ? (setTimeout(() => {
|
|
49
|
+
this.target && this.dispatchEvent(new CustomEvent(i, {
|
|
50
|
+
bubbles: !0,
|
|
51
|
+
composed: !0,
|
|
52
|
+
detail: {
|
|
53
|
+
tabId: this.id,
|
|
54
|
+
targetId: this.target
|
|
55
|
+
}
|
|
56
|
+
}));
|
|
57
|
+
}), 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");
|
|
58
|
+
}
|
|
59
|
+
}, 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-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))}}", c = new CSSStyleSheet();
|
|
60
|
+
c.replaceSync(s);
|
|
61
|
+
//#endregion
|
|
62
|
+
//#region src/Tabs.ts
|
|
63
|
+
var l = class extends HTMLElement {
|
|
64
|
+
static get observedAttributes() {
|
|
65
|
+
return [
|
|
66
|
+
"inverted",
|
|
67
|
+
"next-aria-label",
|
|
68
|
+
"previous-aria-label",
|
|
69
|
+
"hide-controls"
|
|
70
|
+
];
|
|
71
|
+
}
|
|
72
|
+
constructor() {
|
|
73
|
+
super(), this.template = () => "\n <div id=\"container\">\n <div id=\"tab-container\">\n <px-button-icon id=\"previous\" 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\" 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 = () => {
|
|
74
|
+
this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
|
|
75
|
+
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c], this.internals = this.attachInternals?.();
|
|
76
|
+
}
|
|
77
|
+
attributeChangedCallback(e, t, n) {
|
|
78
|
+
switch (e) {
|
|
79
|
+
case "next-aria-label":
|
|
80
|
+
this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", n);
|
|
81
|
+
break;
|
|
82
|
+
case "previous-aria-label":
|
|
83
|
+
this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute("aria-label", n);
|
|
84
|
+
break;
|
|
85
|
+
case "hide-controls":
|
|
86
|
+
this.#t(n);
|
|
87
|
+
break;
|
|
88
|
+
case "inverted": this.#e(n);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
connectedCallback() {
|
|
92
|
+
this.$tabList.role = "tablist", this.addEventListener(i, (e) => {
|
|
93
|
+
[...this.$tabPanels].forEach((t) => {
|
|
94
|
+
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));
|
|
95
|
+
}), [...this.$tabs].forEach((t) => {
|
|
96
|
+
t.getAttribute("id") !== e.detail.tabId && t.hasAttribute("selected") && t.removeAttribute("selected");
|
|
97
|
+
});
|
|
98
|
+
}), this.addEventListener(a, () => {
|
|
99
|
+
this.handleNextPreviousDisplay(), this.inverted && this.#e(this.getAttribute("inverted"));
|
|
100
|
+
}), this.handleNextPreviousDisplay(), this.#e(this.getAttribute("inverted")), this.addEventListener("keydown", (e) => {
|
|
101
|
+
(e.key === "ArrowRight" || e.key === "ArrowLeft") && document.activeElement?.localName?.endsWith("-tab") && this.navigateToTab(e.key === "ArrowRight" ? "right" : "left");
|
|
102
|
+
}), this.$prefixButton?.addEventListener("click", (e) => {
|
|
103
|
+
e.stopPropagation(), this.$tabList.scrollTo({
|
|
104
|
+
left: this.$tabList.scrollLeft - 100,
|
|
105
|
+
behavior: "smooth"
|
|
106
|
+
});
|
|
107
|
+
}), this.$suffixButton?.addEventListener("click", (e) => {
|
|
108
|
+
e.stopPropagation(), this.$tabList.scrollTo({
|
|
109
|
+
left: this.$tabList.scrollLeft + 100,
|
|
110
|
+
behavior: "smooth"
|
|
111
|
+
});
|
|
112
|
+
}), window.addEventListener("resize", this.handleNextPreviousDisplay), this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
|
|
113
|
+
}
|
|
114
|
+
disconnectedCallback() {
|
|
115
|
+
window.addEventListener("resize", this.handleNextPreviousDisplay);
|
|
116
|
+
}
|
|
117
|
+
#e(e) {
|
|
118
|
+
e === "" ? (this.$prefixButton?.setAttribute("inverted", ""), this.$suffixButton?.setAttribute("inverted", ""), this.$activePanel?.setAttribute("inverted", ""), this.$activeTab?.setAttribute("inverted", ""), [...this.$tabs].forEach((e) => {
|
|
119
|
+
e.setAttribute("inverted", "");
|
|
120
|
+
})) : (this.$prefixButton?.removeAttribute("inverted"), this.$suffixButton?.removeAttribute("inverted"), this.$activePanel?.removeAttribute("inverted"), this.$activeTab?.removeAttribute("inverted"), [...this.$tabs].forEach((e) => {
|
|
121
|
+
e.removeAttribute("inverted");
|
|
122
|
+
}));
|
|
123
|
+
}
|
|
124
|
+
#t(e) {
|
|
125
|
+
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"));
|
|
126
|
+
}
|
|
127
|
+
navigateToTab(e) {
|
|
128
|
+
let t = this.$nextTab, n = this.$previousTab;
|
|
129
|
+
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;
|
|
130
|
+
}
|
|
131
|
+
shouldDisplayScrollRightButton() {
|
|
132
|
+
return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
|
|
133
|
+
}
|
|
134
|
+
shouldDisplayScrollLeftButton() {
|
|
135
|
+
return this.$tabList.scrollLeft > 0;
|
|
136
|
+
}
|
|
137
|
+
get $activeTab() {
|
|
138
|
+
return this.querySelector("[selected=\"\"][slot=\"tabs\"]");
|
|
139
|
+
}
|
|
140
|
+
get $nextTab() {
|
|
141
|
+
let e = this.$activeTab.nextElementSibling;
|
|
142
|
+
return e?.slot === "tabs" ? e : this.querySelector("[slot=\"tabs\"]");
|
|
143
|
+
}
|
|
144
|
+
get $previousTab() {
|
|
145
|
+
return this.$activeTab.previousElementSibling || Array.from(this.querySelectorAll("[slot=\"tabs\"]")).pop();
|
|
146
|
+
}
|
|
147
|
+
get $activePanel() {
|
|
148
|
+
return this.querySelector(`[panel-id="${this.$activeTab?.target}"]`);
|
|
149
|
+
}
|
|
150
|
+
get $tabList() {
|
|
151
|
+
return this.shadowRoot.querySelector("#tablist");
|
|
152
|
+
}
|
|
153
|
+
get $tabs() {
|
|
154
|
+
return this.querySelectorAll("[slot=\"tabs\"]");
|
|
155
|
+
}
|
|
156
|
+
get $tabPanels() {
|
|
157
|
+
return this.querySelectorAll("[slot=\"tabpanels\"]");
|
|
158
|
+
}
|
|
159
|
+
get $prefixButton() {
|
|
160
|
+
return this.shadowRoot.querySelector("#previous");
|
|
161
|
+
}
|
|
162
|
+
get $suffixButton() {
|
|
163
|
+
return this.shadowRoot.querySelector("#next");
|
|
164
|
+
}
|
|
165
|
+
get hideControls() {
|
|
166
|
+
return this.hasAttribute("hide-controls");
|
|
167
|
+
}
|
|
168
|
+
set hideControls(e) {
|
|
169
|
+
e ? this.setAttribute("hide-controls", "") : this.removeAttribute("hide-controls");
|
|
170
|
+
}
|
|
171
|
+
get inverted() {
|
|
172
|
+
return this.hasAttribute("inverted");
|
|
173
|
+
}
|
|
174
|
+
set inverted(e) {
|
|
175
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
176
|
+
}
|
|
177
|
+
get nextAriaLabel() {
|
|
178
|
+
return this.getAttribute("next-aria-label");
|
|
179
|
+
}
|
|
180
|
+
set nextAriaLabel(e) {
|
|
181
|
+
t(this, "next-aria-label", e);
|
|
182
|
+
}
|
|
183
|
+
get previousAriaLabel() {
|
|
184
|
+
return this.getAttribute("previous-aria-label");
|
|
185
|
+
}
|
|
186
|
+
set previousAriaLabel(e) {
|
|
187
|
+
t(this, "previous-aria-label", e);
|
|
188
|
+
}
|
|
189
|
+
}, u = ":host [role=tabpanel]{overflow-x:auto}", d = new CSSStyleSheet();
|
|
190
|
+
d.replaceSync(u);
|
|
191
|
+
var f = class extends HTMLElement {
|
|
192
|
+
static get observedAttributes() {
|
|
193
|
+
return ["id", "selected"];
|
|
194
|
+
}
|
|
195
|
+
constructor() {
|
|
196
|
+
super(), this.template = () => `
|
|
197
|
+
<div role="tabpanel" id="${this.panelId}" tabindex="0">
|
|
194
198
|
<slot></slot>
|
|
195
199
|
</div>
|
|
196
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
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
|
-
|
|
239
|
-
|
|
240
|
-
constructor() {
|
|
241
|
-
super();
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
customElements.get("px-tab") || customElements.define("px-tab", x);
|
|
245
|
-
class m extends f {
|
|
246
|
-
constructor() {
|
|
247
|
-
super();
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", m);
|
|
251
|
-
export {
|
|
252
|
-
x as PxTab,
|
|
253
|
-
m as PxTabPanel,
|
|
254
|
-
v as PxTabs
|
|
200
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c, d];
|
|
201
|
+
}
|
|
202
|
+
attributeChangedCallback(e, t, n) {
|
|
203
|
+
e === "panel-id" ? this.$panel.setAttribute("id", n) : e === "selected" && (n === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
204
|
+
}
|
|
205
|
+
connectedCallback() {
|
|
206
|
+
this.slot = "tabpanels", this.$panel.style.display = "none";
|
|
207
|
+
}
|
|
208
|
+
get panelId() {
|
|
209
|
+
return this.getAttribute("panel-id");
|
|
210
|
+
}
|
|
211
|
+
set panelId(e) {
|
|
212
|
+
t(this, "panel-id", e);
|
|
213
|
+
}
|
|
214
|
+
set selected(t) {
|
|
215
|
+
e(this, "selected", t);
|
|
216
|
+
}
|
|
217
|
+
get selected() {
|
|
218
|
+
return this.hasAttribute("selected");
|
|
219
|
+
}
|
|
220
|
+
get $panel() {
|
|
221
|
+
return this.shadowRoot.querySelector("[role=\"tabpanel\"]");
|
|
222
|
+
}
|
|
223
|
+
}, p = class extends l {
|
|
224
|
+
constructor() {
|
|
225
|
+
super();
|
|
226
|
+
}
|
|
227
|
+
connectedCallback() {
|
|
228
|
+
super.connectedCallback?.(), this.querySelectorAll("px-tab").forEach((e) => {
|
|
229
|
+
e.setAttribute("slot", "tabs");
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
};
|
|
233
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", p);
|
|
234
|
+
var m = class extends o {
|
|
235
|
+
constructor() {
|
|
236
|
+
super();
|
|
237
|
+
}
|
|
238
|
+
};
|
|
239
|
+
customElements.get("px-tab") || customElements.define("px-tab", m);
|
|
240
|
+
var h = class extends f {
|
|
241
|
+
constructor() {
|
|
242
|
+
super();
|
|
243
|
+
}
|
|
255
244
|
};
|
|
245
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", h);
|
|
246
|
+
//#endregion
|
|
247
|
+
export { m as PxTab, h as PxTabPanel, p as PxTabs };
|