@proximus/lavender-tabs 1.4.10-beta.4 → 1.4.10
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 -26
- 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 n = (r, t, e) => (
|
|
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(
|
|
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
10
|
const g = "px.lavender.tab.selected", $ = "px-tab-connected";
|
|
11
|
-
class
|
|
11
|
+
class T extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
var t;
|
|
14
14
|
super(), this.template = () => `
|
|
@@ -69,10 +69,10 @@ class E 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();
|
|
@@ -80,13 +80,13 @@ class k extends HTMLElement {
|
|
|
80
80
|
this.template = () => `
|
|
81
81
|
<div id="container">
|
|
82
82
|
<div id="tab-container">
|
|
83
|
-
<px-button-icon id="previous" aria-hidden="true"
|
|
83
|
+
<px-button-icon id="previous" aria-hidden="true">
|
|
84
84
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
85
85
|
</px-button-icon>
|
|
86
86
|
<div id="tablist">
|
|
87
87
|
<slot name="tabs"></slot>
|
|
88
88
|
</div>
|
|
89
|
-
<px-button-icon id="next"
|
|
89
|
+
<px-button-icon id="next" aria-hidden="true">
|
|
90
90
|
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
91
91
|
</px-button-icon>
|
|
92
92
|
</div>
|
|
@@ -118,7 +118,7 @@ class k extends HTMLElement {
|
|
|
118
118
|
);
|
|
119
119
|
break;
|
|
120
120
|
case "hide-controls":
|
|
121
|
-
n(this, o,
|
|
121
|
+
n(this, o, A).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
|
+
}, 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,15 +222,13 @@ o = new WeakSet(), d = function(e) {
|
|
|
222
222
|
this.ariaLabelPrevious || "Previous tab"
|
|
223
223
|
));
|
|
224
224
|
};
|
|
225
|
-
|
|
226
|
-
A.replaceSync(w);
|
|
227
|
-
class P extends HTMLElement {
|
|
225
|
+
class k extends HTMLElement {
|
|
228
226
|
constructor() {
|
|
229
227
|
super(), this.template = () => `
|
|
230
228
|
<div role="tabpanel" tabindex="0">
|
|
231
229
|
<slot></slot>
|
|
232
230
|
</div>
|
|
233
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u
|
|
231
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u];
|
|
234
232
|
}
|
|
235
233
|
static get observedAttributes() {
|
|
236
234
|
return ["name", "selected"];
|
|
@@ -257,7 +255,7 @@ class P extends HTMLElement {
|
|
|
257
255
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
258
256
|
}
|
|
259
257
|
}
|
|
260
|
-
class
|
|
258
|
+
class w extends L {
|
|
261
259
|
constructor() {
|
|
262
260
|
super();
|
|
263
261
|
}
|
|
@@ -268,21 +266,21 @@ class B extends k {
|
|
|
268
266
|
});
|
|
269
267
|
}
|
|
270
268
|
}
|
|
271
|
-
customElements.get("px-tabs") || customElements.define("px-tabs",
|
|
272
|
-
class
|
|
269
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", w);
|
|
270
|
+
class B extends T {
|
|
273
271
|
constructor() {
|
|
274
272
|
super();
|
|
275
273
|
}
|
|
276
274
|
}
|
|
277
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
278
|
-
class
|
|
275
|
+
customElements.get("px-tab") || customElements.define("px-tab", B);
|
|
276
|
+
class P extends k {
|
|
279
277
|
constructor() {
|
|
280
278
|
super();
|
|
281
279
|
}
|
|
282
280
|
}
|
|
283
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
281
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", P);
|
|
284
282
|
export {
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
283
|
+
B as PxTab,
|
|
284
|
+
P as PxTabPanel,
|
|
285
|
+
w as PxTabs
|
|
288
286
|
};
|