@proximus/lavender-tabs 1.4.11-alpha.7 → 1.4.11-alpha.8
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 +24 -22
- 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 S = (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 n = (r, t, e) => (
|
|
6
|
+
var n = (r, t, e) => (S(r, t, "access private method"), e);
|
|
7
7
|
import "@proximus/lavender-button-icon";
|
|
8
|
-
const
|
|
9
|
-
m.replaceSync(
|
|
8
|
+
const T = "*{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(T);
|
|
10
10
|
const g = "px.lavender.tab.selected", $ = "px-tab-connected";
|
|
11
|
-
class
|
|
11
|
+
class E extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
var t;
|
|
14
14
|
super(), this.template = () => `
|
|
@@ -69,10 +69,10 @@ class T 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 L = '*{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(L);
|
|
74
|
+
var o, d, y;
|
|
75
|
+
class k extends HTMLElement {
|
|
76
76
|
constructor() {
|
|
77
77
|
var e;
|
|
78
78
|
super();
|
|
@@ -118,7 +118,7 @@ class L extends HTMLElement {
|
|
|
118
118
|
);
|
|
119
119
|
break;
|
|
120
120
|
case "hide-controls":
|
|
121
|
-
n(this, o,
|
|
121
|
+
n(this, o, y).call(this, i);
|
|
122
122
|
break;
|
|
123
123
|
case "inverted":
|
|
124
124
|
n(this, o, d).call(this, i);
|
|
@@ -213,7 +213,7 @@ o = new WeakSet(), d = function(e) {
|
|
|
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
|
+
}, y = 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,13 +222,15 @@ o = new WeakSet(), d = function(e) {
|
|
|
222
222
|
this.ariaLabelPrevious || "Previous tab"
|
|
223
223
|
));
|
|
224
224
|
};
|
|
225
|
-
|
|
225
|
+
const w = ":host [role=tabpanel]{overflow-x:auto}", A = new CSSStyleSheet();
|
|
226
|
+
A.replaceSync(w);
|
|
227
|
+
class P extends HTMLElement {
|
|
226
228
|
constructor() {
|
|
227
229
|
super(), this.template = () => `
|
|
228
230
|
<div role="tabpanel" tabindex="0">
|
|
229
231
|
<slot></slot>
|
|
230
232
|
</div>
|
|
231
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u];
|
|
233
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u, A];
|
|
232
234
|
}
|
|
233
235
|
static get observedAttributes() {
|
|
234
236
|
return ["name", "selected"];
|
|
@@ -255,7 +257,7 @@ class k extends HTMLElement {
|
|
|
255
257
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
256
258
|
}
|
|
257
259
|
}
|
|
258
|
-
class
|
|
260
|
+
class B extends k {
|
|
259
261
|
constructor() {
|
|
260
262
|
super();
|
|
261
263
|
}
|
|
@@ -266,21 +268,21 @@ class w extends L {
|
|
|
266
268
|
});
|
|
267
269
|
}
|
|
268
270
|
}
|
|
269
|
-
customElements.get("px-tabs") || customElements.define("px-tabs",
|
|
270
|
-
class
|
|
271
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", B);
|
|
272
|
+
class C extends E {
|
|
271
273
|
constructor() {
|
|
272
274
|
super();
|
|
273
275
|
}
|
|
274
276
|
}
|
|
275
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
276
|
-
class
|
|
277
|
+
customElements.get("px-tab") || customElements.define("px-tab", C);
|
|
278
|
+
class N extends P {
|
|
277
279
|
constructor() {
|
|
278
280
|
super();
|
|
279
281
|
}
|
|
280
282
|
}
|
|
281
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
283
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", N);
|
|
282
284
|
export {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
285
|
+
C as PxTab,
|
|
286
|
+
N as PxTabPanel,
|
|
287
|
+
B as PxTabs
|
|
286
288
|
};
|