@proximus/lavender-tabs 1.4.5-alpha.9 → 1.4.5-beta.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 +2 -0
- package/dist/TabPanel.d.ts +1 -0
- package/dist/Tabs.d.ts +7 -4
- package/dist/index.es.js +171 -131
- package/package.json +1 -1
package/dist/Tab.d.ts
CHANGED
package/dist/TabPanel.d.ts
CHANGED
package/dist/Tabs.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
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
4
|
export declare class Tabs extends HTMLElement {
|
|
5
|
+
#private;
|
|
5
6
|
private readonly _label;
|
|
6
7
|
internals: ElementInternals;
|
|
7
8
|
tabsConnected: number;
|
|
@@ -10,9 +11,9 @@ export declare class Tabs extends HTMLElement {
|
|
|
10
11
|
constructor();
|
|
11
12
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
12
13
|
connectedCallback(): void;
|
|
13
|
-
|
|
14
|
+
disconnectedCallback(): void;
|
|
14
15
|
navigateToTab(direction: 'left' | 'right'): void;
|
|
15
|
-
handleNextPreviousDisplay()
|
|
16
|
+
handleNextPreviousDisplay: () => void;
|
|
16
17
|
allTabsConnected(): boolean;
|
|
17
18
|
shouldDisplayScrollRightButton(): boolean;
|
|
18
19
|
shouldDisplayScrollLeftButton(): boolean;
|
|
@@ -21,6 +22,8 @@ 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
29
|
get label(): string;
|
package/dist/index.es.js
CHANGED
|
@@ -1,11 +1,83 @@
|
|
|
1
|
+
var f = (r) => {
|
|
2
|
+
throw TypeError(r);
|
|
3
|
+
};
|
|
4
|
+
var $ = (r, e, t) => e.has(r) || f("Cannot " + t);
|
|
5
|
+
var x = (r, e, t) => e.has(r) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t);
|
|
6
|
+
var n = (r, e, t) => ($(r, e, "access private method"), t);
|
|
1
7
|
import "@proximus/lavender-button-icon";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
class
|
|
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
|
+
m.replaceSync(k);
|
|
10
|
+
const g = "px.lavender.tab.selected", y = "px-tab-connected";
|
|
11
|
+
class S extends HTMLElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
var e;
|
|
14
|
+
super(), this.template = () => `
|
|
15
|
+
<button type="button" tabindex="-1" >
|
|
16
|
+
<span><slot></slot></span>
|
|
17
|
+
</button>
|
|
18
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
|
|
19
|
+
}
|
|
20
|
+
static get observedAttributes() {
|
|
21
|
+
return ["selected", "for", "name", "inverted"];
|
|
22
|
+
}
|
|
23
|
+
connectedCallback() {
|
|
24
|
+
this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(
|
|
25
|
+
new CustomEvent(y, { bubbles: !0, composed: !0 })
|
|
26
|
+
), this.addEventListener("click", () => {
|
|
27
|
+
this.selected = !0;
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
attributeChangedCallback(e, t, s) {
|
|
31
|
+
e === "selected" ? this.handleSelected(s) : e === "name" ? this.$button.setAttribute("id", s) : e === "for" ? this.setAttribute("aria-controls", s) : e === "inverted" && (s === "" ? this.$button.setAttribute("inverted", "") : this.$button.removeAttribute("inverted"));
|
|
32
|
+
}
|
|
33
|
+
get $button() {
|
|
34
|
+
return this.shadowRoot.querySelector("button");
|
|
35
|
+
}
|
|
36
|
+
get selected() {
|
|
37
|
+
return this.hasAttribute("selected");
|
|
38
|
+
}
|
|
39
|
+
set selected(e) {
|
|
40
|
+
e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
41
|
+
}
|
|
42
|
+
get inverted() {
|
|
43
|
+
return this.hasAttribute("inverted");
|
|
44
|
+
}
|
|
45
|
+
set name(e) {
|
|
46
|
+
this.setAttribute("name", e);
|
|
47
|
+
}
|
|
48
|
+
get name() {
|
|
49
|
+
return this.getAttribute("name");
|
|
50
|
+
}
|
|
51
|
+
set for(e) {
|
|
52
|
+
this.setAttribute("for", e);
|
|
53
|
+
}
|
|
54
|
+
get for() {
|
|
55
|
+
return this.getAttribute("for");
|
|
56
|
+
}
|
|
57
|
+
handleSelected(e) {
|
|
58
|
+
e !== "" ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (setTimeout(() => {
|
|
59
|
+
this.dispatchEvent(
|
|
60
|
+
new CustomEvent(g, {
|
|
61
|
+
bubbles: !0,
|
|
62
|
+
composed: !0,
|
|
63
|
+
detail: {
|
|
64
|
+
tabName: this.name,
|
|
65
|
+
forName: this.for
|
|
66
|
+
}
|
|
67
|
+
})
|
|
68
|
+
);
|
|
69
|
+
}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
const T = '*{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(T);
|
|
74
|
+
var o, d, A;
|
|
75
|
+
class L extends HTMLElement {
|
|
6
76
|
constructor() {
|
|
7
77
|
var t;
|
|
8
|
-
super()
|
|
78
|
+
super();
|
|
79
|
+
x(this, o);
|
|
80
|
+
this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
|
|
9
81
|
<div id="container">
|
|
10
82
|
<div id="tab-container">
|
|
11
83
|
<px-button-icon id="previous" aria-hidden="true">
|
|
@@ -22,75 +94,78 @@ class b extends HTMLElement {
|
|
|
22
94
|
<slot name="tabpanels"></slot>
|
|
23
95
|
</div>
|
|
24
96
|
</div>
|
|
25
|
-
`, this.
|
|
26
|
-
this.
|
|
27
|
-
}
|
|
28
|
-
this.handleNextPreviousDisplay();
|
|
29
|
-
}), this.$tabList.addEventListener("scroll", () => {
|
|
30
|
-
this.handleNextPreviousDisplay();
|
|
31
|
-
});
|
|
97
|
+
`, this.handleNextPreviousDisplay = () => {
|
|
98
|
+
this.allTabsConnected() && 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 = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
32
100
|
}
|
|
33
101
|
static get observedAttributes() {
|
|
34
|
-
return [
|
|
35
|
-
|
|
36
|
-
|
|
102
|
+
return [
|
|
103
|
+
"label",
|
|
104
|
+
"inverted",
|
|
105
|
+
"aria-label-next",
|
|
106
|
+
"aria-label-previous",
|
|
107
|
+
"hide-controls"
|
|
108
|
+
];
|
|
109
|
+
}
|
|
110
|
+
attributeChangedCallback(t, s, i) {
|
|
37
111
|
switch (t) {
|
|
38
112
|
case "label":
|
|
39
|
-
this.label =
|
|
113
|
+
this.label = i;
|
|
40
114
|
break;
|
|
41
115
|
case "aria-label-next":
|
|
42
|
-
this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label",
|
|
116
|
+
this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", i || "Next tab");
|
|
43
117
|
break;
|
|
44
118
|
case "aria-label-previous":
|
|
45
119
|
this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute(
|
|
46
120
|
"aria-label",
|
|
47
|
-
|
|
121
|
+
i || "Previous tab"
|
|
48
122
|
);
|
|
49
123
|
break;
|
|
124
|
+
case "hide-controls":
|
|
125
|
+
n(this, o, A).call(this, i);
|
|
126
|
+
break;
|
|
127
|
+
case "inverted":
|
|
128
|
+
n(this, o, d).call(this, i);
|
|
129
|
+
break;
|
|
50
130
|
}
|
|
51
131
|
}
|
|
52
132
|
connectedCallback() {
|
|
53
|
-
var t,
|
|
54
|
-
this.shadowRoot.querySelector("#tablist").setAttribute("aria-labelledby", this._label), this.getAttribute("label") && (this.label = this.getAttribute("label")), this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
this.$
|
|
58
|
-
|
|
59
|
-
|
|
133
|
+
var t, s;
|
|
134
|
+
this.shadowRoot.querySelector("#tablist").setAttribute("aria-labelledby", this._label), this.getAttribute("label") && (this.label = this.getAttribute("label")), this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(
|
|
135
|
+
g,
|
|
136
|
+
(i) => {
|
|
137
|
+
[...this.$tabPanels].forEach((a) => {
|
|
138
|
+
a.getAttribute("name") !== i.detail.forName && a.hasAttribute("selected") && (a.removeAttribute("selected"), a.removeAttribute("aria-labelledby")), a.getAttribute("name") === i.detail.forName && (a.setAttribute("selected", ""), a.setAttribute("aria-labelledby", i.detail.tabName));
|
|
139
|
+
}), [...this.$tabs].forEach((a) => {
|
|
140
|
+
a.getAttribute("name") !== i.detail.tabName && a.hasAttribute("selected") && a.removeAttribute("selected");
|
|
141
|
+
});
|
|
60
142
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
143
|
+
), this.addEventListener(y, () => {
|
|
144
|
+
this.tabsConnected++, this.handleNextPreviousDisplay(), this.allTabsConnected() && this.inverted && n(this, o, d).call(this, this.getAttribute("inverted"));
|
|
145
|
+
}), this.allTabsConnected() && n(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
|
|
146
|
+
var a, l;
|
|
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
|
+
}), (t = this.$prefixButton) == null || t.addEventListener("click", (i) => {
|
|
149
|
+
i.stopPropagation(), this.$tabList.scrollTo({
|
|
66
150
|
left: this.$tabList.scrollLeft - 100,
|
|
67
151
|
behavior: "smooth"
|
|
68
152
|
});
|
|
69
|
-
}), (
|
|
70
|
-
|
|
153
|
+
}), (s = this.$suffixButton) == null || s.addEventListener("click", (i) => {
|
|
154
|
+
i.stopPropagation(), this.$tabList.scrollTo({
|
|
71
155
|
left: this.$tabList.scrollLeft + 100,
|
|
72
156
|
behavior: "smooth"
|
|
73
157
|
});
|
|
74
|
-
}),
|
|
75
|
-
"aria-label",
|
|
76
|
-
this.ariaLabelNext || "Next tab"
|
|
77
|
-
), this.$prefixButton.setAttribute(
|
|
78
|
-
"aria-label",
|
|
79
|
-
this.ariaLabelPrevious || "Previous tab"
|
|
80
|
-
));
|
|
158
|
+
}), window.addEventListener("resize", this.handleNextPreviousDisplay), this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
|
|
81
159
|
}
|
|
82
|
-
|
|
83
|
-
|
|
160
|
+
disconnectedCallback() {
|
|
161
|
+
window.addEventListener("resize", this.handleNextPreviousDisplay);
|
|
84
162
|
}
|
|
85
163
|
navigateToTab(t) {
|
|
86
|
-
const
|
|
87
|
-
this.$activePanel.selected = !1, this.$activeTab.selected = !1, t === "right" ? (
|
|
88
|
-
}
|
|
89
|
-
handleNextPreviousDisplay() {
|
|
90
|
-
this.allTabsConnected() && this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
|
|
164
|
+
const s = this.$nextTab, i = this.$previousTab;
|
|
165
|
+
this.$activePanel.selected = !1, this.$activeTab.selected = !1, t === "right" ? (s.selected = !0, s.focus()) : t === "left" && (i.selected = !0, i.focus()), this.$activePanel.selected = !0;
|
|
91
166
|
}
|
|
92
167
|
allTabsConnected() {
|
|
93
|
-
return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length;
|
|
168
|
+
return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length || [...this.$tabs].every((t) => t.isConnected);
|
|
94
169
|
}
|
|
95
170
|
shouldDisplayScrollRightButton() {
|
|
96
171
|
return this.allTabsConnected() && this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
|
|
@@ -110,11 +185,18 @@ class b extends HTMLElement {
|
|
|
110
185
|
return t || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
|
|
111
186
|
}
|
|
112
187
|
get $activePanel() {
|
|
113
|
-
|
|
188
|
+
var t;
|
|
189
|
+
return this.querySelector(`[name="${(t = this.$activeTab) == null ? void 0 : t.for}"]`);
|
|
114
190
|
}
|
|
115
191
|
get $tabList() {
|
|
116
192
|
return this.shadowRoot.querySelector("#tablist");
|
|
117
193
|
}
|
|
194
|
+
get $tabs() {
|
|
195
|
+
return this.querySelectorAll('[slot="tabs"]');
|
|
196
|
+
}
|
|
197
|
+
get $tabPanels() {
|
|
198
|
+
return this.querySelectorAll('[slot="tabpanels"]');
|
|
199
|
+
}
|
|
118
200
|
get $prefixButton() {
|
|
119
201
|
return this.shadowRoot.querySelector("#previous");
|
|
120
202
|
}
|
|
@@ -137,123 +219,81 @@ class b extends HTMLElement {
|
|
|
137
219
|
return this.getAttribute("aria-label-previous");
|
|
138
220
|
}
|
|
139
221
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
);
|
|
158
|
-
}
|
|
159
|
-
attributeChangedCallback(t, i, e) {
|
|
160
|
-
t === "selected" ? this.handleSelected(e) : t === "name" ? this.$button.setAttribute("id", e) : t === "for" && this.setAttribute("aria-controls", e);
|
|
161
|
-
}
|
|
162
|
-
get $button() {
|
|
163
|
-
return this.shadowRoot.querySelector("button");
|
|
164
|
-
}
|
|
165
|
-
get selected() {
|
|
166
|
-
return !!this.hasAttribute("selected");
|
|
167
|
-
}
|
|
168
|
-
set selected(t) {
|
|
169
|
-
t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
170
|
-
}
|
|
171
|
-
get inverted() {
|
|
172
|
-
return this.hasAttribute("inverted");
|
|
173
|
-
}
|
|
174
|
-
set name(t) {
|
|
175
|
-
this.setAttribute("name", t);
|
|
176
|
-
}
|
|
177
|
-
get name() {
|
|
178
|
-
return this.getAttribute("name");
|
|
179
|
-
}
|
|
180
|
-
set for(t) {
|
|
181
|
-
this.setAttribute("for", t);
|
|
182
|
-
}
|
|
183
|
-
get for() {
|
|
184
|
-
return this.getAttribute("for");
|
|
185
|
-
}
|
|
186
|
-
handleSelected(t) {
|
|
187
|
-
t === null ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
class f extends HTMLElement {
|
|
222
|
+
o = new WeakSet(), d = function(t) {
|
|
223
|
+
var s, i, a, l, u, h, p, v;
|
|
224
|
+
t === "" ? ((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
|
+
c.setAttribute("inverted", "");
|
|
226
|
+
})) : ((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
|
+
c.removeAttribute("inverted");
|
|
228
|
+
}));
|
|
229
|
+
}, A = function(t) {
|
|
230
|
+
t === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
|
|
231
|
+
"aria-label",
|
|
232
|
+
this.ariaLabelNext || "Next tab"
|
|
233
|
+
), this.$prefixButton.setAttribute(
|
|
234
|
+
"aria-label",
|
|
235
|
+
this.ariaLabelPrevious || "Previous tab"
|
|
236
|
+
));
|
|
237
|
+
};
|
|
238
|
+
class E extends HTMLElement {
|
|
191
239
|
constructor() {
|
|
192
240
|
super(), this.template = () => `
|
|
193
241
|
<div role="tabpanel" tabindex="0">
|
|
194
242
|
<slot></slot>
|
|
195
243
|
</div>
|
|
196
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
244
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b];
|
|
197
245
|
}
|
|
198
246
|
static get observedAttributes() {
|
|
199
|
-
return ["name"];
|
|
247
|
+
return ["name", "selected"];
|
|
200
248
|
}
|
|
201
|
-
attributeChangedCallback(
|
|
202
|
-
|
|
249
|
+
attributeChangedCallback(e, t, s) {
|
|
250
|
+
e === "name" ? this.$panel.setAttribute("aria-labelledby", s) : e === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
203
251
|
}
|
|
204
252
|
connectedCallback() {
|
|
205
|
-
this.
|
|
206
|
-
const t = this.parentElement.querySelector(
|
|
207
|
-
`[for="${this.getAttribute("name")}"]`
|
|
208
|
-
);
|
|
209
|
-
t && this.$panel.setAttribute(
|
|
210
|
-
"aria-labelledby",
|
|
211
|
-
t.getAttribute("name")
|
|
212
|
-
);
|
|
213
|
-
const i = this.parentElement.querySelector(
|
|
214
|
-
`[for="${this.name}"]`
|
|
215
|
-
);
|
|
216
|
-
c(i.selected) ? this.selected = !1 : this.selected = !0;
|
|
253
|
+
this.slot = "tabpanels", this.$panel.style.display = "none";
|
|
217
254
|
}
|
|
218
255
|
get name() {
|
|
219
256
|
return this.getAttribute("name");
|
|
220
257
|
}
|
|
221
|
-
set name(
|
|
222
|
-
this.setAttribute("name",
|
|
258
|
+
set name(e) {
|
|
259
|
+
this.setAttribute("name", e);
|
|
260
|
+
}
|
|
261
|
+
set selected(e) {
|
|
262
|
+
e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
223
263
|
}
|
|
224
|
-
|
|
225
|
-
|
|
264
|
+
get selected() {
|
|
265
|
+
return this.hasAttribute("selected");
|
|
226
266
|
}
|
|
227
267
|
get $panel() {
|
|
228
268
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
229
269
|
}
|
|
230
270
|
}
|
|
231
|
-
class
|
|
271
|
+
class w extends L {
|
|
232
272
|
constructor() {
|
|
233
273
|
super();
|
|
234
274
|
}
|
|
235
275
|
connectedCallback() {
|
|
236
|
-
var
|
|
237
|
-
(
|
|
238
|
-
|
|
276
|
+
var e;
|
|
277
|
+
(e = super.connectedCallback) == null || e.call(this), this.querySelectorAll("px-tab").forEach((t) => {
|
|
278
|
+
t.setAttribute("slot", "tabs");
|
|
239
279
|
});
|
|
240
280
|
}
|
|
241
281
|
}
|
|
242
|
-
customElements.get("px-tabs") || customElements.define("px-tabs",
|
|
243
|
-
class
|
|
282
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", w);
|
|
283
|
+
class C extends S {
|
|
244
284
|
constructor() {
|
|
245
285
|
super();
|
|
246
286
|
}
|
|
247
287
|
}
|
|
248
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
249
|
-
class
|
|
288
|
+
customElements.get("px-tab") || customElements.define("px-tab", C);
|
|
289
|
+
class B extends E {
|
|
250
290
|
constructor() {
|
|
251
291
|
super();
|
|
252
292
|
}
|
|
253
293
|
}
|
|
254
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
294
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", B);
|
|
255
295
|
export {
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
296
|
+
C as PxTab,
|
|
297
|
+
B as PxTabPanel,
|
|
298
|
+
w as PxTabs
|
|
259
299
|
};
|