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