@proximus/lavender-tabs 1.4.9-alpha.9 → 1.4.9-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/index.es.js +25 -25
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
var f = (r) => {
|
|
2
2
|
throw TypeError(r);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
4
|
+
var y = (r, t, e) => t.has(r) || f("Cannot " + e);
|
|
5
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
|
|
6
|
+
var n = (r, t, e) => (y(r, t, "access private method"), e);
|
|
7
7
|
import "@proximus/lavender-button-icon";
|
|
8
|
-
const
|
|
9
|
-
m.replaceSync(
|
|
10
|
-
const g = "px.lavender.tab.selected",
|
|
11
|
-
class
|
|
8
|
+
const S = "*{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 screen and (min-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 (min-width: 64.0625rem){button{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)}}", m = new CSSStyleSheet();
|
|
9
|
+
m.replaceSync(S);
|
|
10
|
+
const g = "px.lavender.tab.selected", $ = "px-tab-connected";
|
|
11
|
+
class T extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
var t;
|
|
14
14
|
super(), this.template = () => `
|
|
@@ -22,7 +22,7 @@ class S extends HTMLElement {
|
|
|
22
22
|
}
|
|
23
23
|
connectedCallback() {
|
|
24
24
|
this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(
|
|
25
|
-
new CustomEvent(
|
|
25
|
+
new CustomEvent($, { bubbles: !0, composed: !0 })
|
|
26
26
|
), this.addEventListener("click", () => {
|
|
27
27
|
this.selected = !0;
|
|
28
28
|
});
|
|
@@ -69,10 +69,10 @@ class S extends HTMLElement {
|
|
|
69
69
|
}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
|
-
const
|
|
73
|
-
u.replaceSync(
|
|
74
|
-
var o, d,
|
|
75
|
-
class
|
|
72
|
+
const E = '*{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:12px;left:-24px}#tab-container>#next{position:absolute;top:12px;right:-24px}#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 screen and (min-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 (min-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))}}', u = new CSSStyleSheet();
|
|
73
|
+
u.replaceSync(E);
|
|
74
|
+
var o, d, A;
|
|
75
|
+
class L extends HTMLElement {
|
|
76
76
|
constructor() {
|
|
77
77
|
var e;
|
|
78
78
|
super();
|
|
@@ -118,10 +118,10 @@ class E extends HTMLElement {
|
|
|
118
118
|
);
|
|
119
119
|
break;
|
|
120
120
|
case "hide-controls":
|
|
121
|
-
|
|
121
|
+
n(this, o, A).call(this, i);
|
|
122
122
|
break;
|
|
123
123
|
case "inverted":
|
|
124
|
-
|
|
124
|
+
n(this, o, d).call(this, i);
|
|
125
125
|
break;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
@@ -136,11 +136,11 @@ class E extends HTMLElement {
|
|
|
136
136
|
a.getAttribute("name") !== i.detail.tabName && a.hasAttribute("selected") && a.removeAttribute("selected");
|
|
137
137
|
});
|
|
138
138
|
}
|
|
139
|
-
), this.addEventListener(
|
|
140
|
-
this.handleNextPreviousDisplay(), this.inverted &&
|
|
141
|
-
}), this.handleNextPreviousDisplay(),
|
|
142
|
-
var a,
|
|
143
|
-
(i.key === "ArrowRight" || i.key === "ArrowLeft") && ((
|
|
139
|
+
), this.addEventListener($, () => {
|
|
140
|
+
this.handleNextPreviousDisplay(), this.inverted && n(this, o, d).call(this, this.getAttribute("inverted"));
|
|
141
|
+
}), this.handleNextPreviousDisplay(), n(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
|
|
142
|
+
var a, l;
|
|
143
|
+
(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");
|
|
144
144
|
}), (e = this.$prefixButton) == null || e.addEventListener("click", (i) => {
|
|
145
145
|
i.stopPropagation(), this.$tabList.scrollTo({
|
|
146
146
|
left: this.$tabList.scrollLeft - 100,
|
|
@@ -207,13 +207,13 @@ class E extends HTMLElement {
|
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
o = new WeakSet(), d = function(e) {
|
|
210
|
-
var s, i, a,
|
|
211
|
-
e === "" ? ((s = this.$prefixButton) == null || s.setAttribute("inverted", ""), (i = this.$suffixButton) == null || i.setAttribute("inverted", ""), (a = this.$activePanel) == null || a.setAttribute("inverted", ""), (
|
|
210
|
+
var s, i, a, l, b, h, p, v;
|
|
211
|
+
e === "" ? ((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) => {
|
|
212
212
|
c.setAttribute("inverted", "");
|
|
213
213
|
})) : ((b = this.$prefixButton) == null || b.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) => {
|
|
214
214
|
c.removeAttribute("inverted");
|
|
215
215
|
}));
|
|
216
|
-
},
|
|
216
|
+
}, A = function(e) {
|
|
217
217
|
e === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
|
|
218
218
|
"aria-label",
|
|
219
219
|
this.ariaLabelNext || "Next tab"
|
|
@@ -222,7 +222,7 @@ o = new WeakSet(), d = function(e) {
|
|
|
222
222
|
this.ariaLabelPrevious || "Previous tab"
|
|
223
223
|
));
|
|
224
224
|
};
|
|
225
|
-
class
|
|
225
|
+
class k extends HTMLElement {
|
|
226
226
|
constructor() {
|
|
227
227
|
super(), this.template = () => `
|
|
228
228
|
<div role="tabpanel" tabindex="0">
|
|
@@ -255,7 +255,7 @@ class L extends HTMLElement {
|
|
|
255
255
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
256
256
|
}
|
|
257
257
|
}
|
|
258
|
-
class w extends
|
|
258
|
+
class w extends L {
|
|
259
259
|
constructor() {
|
|
260
260
|
super();
|
|
261
261
|
}
|
|
@@ -267,13 +267,13 @@ class w extends E {
|
|
|
267
267
|
}
|
|
268
268
|
}
|
|
269
269
|
customElements.get("px-tabs") || customElements.define("px-tabs", w);
|
|
270
|
-
class B extends
|
|
270
|
+
class B extends T {
|
|
271
271
|
constructor() {
|
|
272
272
|
super();
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
275
|
customElements.get("px-tab") || customElements.define("px-tab", B);
|
|
276
|
-
class P extends
|
|
276
|
+
class P extends k {
|
|
277
277
|
constructor() {
|
|
278
278
|
super();
|
|
279
279
|
}
|