@proximus/lavender-tabs 1.4.1-beta.1 → 1.4.1
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 +7 -7
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "@proximus/lavender-button-icon";
|
|
2
2
|
import { isFalsy as c } from "@proximus/lavender-common";
|
|
3
|
-
const
|
|
4
|
-
l.replaceSync(
|
|
5
|
-
class
|
|
3
|
+
const b = '*{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))}}', l = new CSSStyleSheet();
|
|
4
|
+
l.replaceSync(b);
|
|
5
|
+
class u extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
var t;
|
|
8
8
|
super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
|
|
@@ -22,7 +22,7 @@ class b extends HTMLElement {
|
|
|
22
22
|
<slot name="tabpanels"></slot>
|
|
23
23
|
</div>
|
|
24
24
|
</div>
|
|
25
|
-
`, this.attachShadow({ mode: "open" }), this.getAttribute("label") && (this._label = this.getAttribute("label")), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "tablist"), this.addEventListener("px-tab-connected", () => {
|
|
25
|
+
`, this.attachShadow({ mode: "open" }), this.getAttribute("label") && (this._label = this.getAttribute("label")), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener("px-tab-connected", () => {
|
|
26
26
|
this.tabsConnected++, this.handleNextPreviousDisplay();
|
|
27
27
|
}), window.addEventListener("resize", () => {
|
|
28
28
|
this.handleNextPreviousDisplay();
|
|
@@ -146,7 +146,7 @@ class p extends HTMLElement {
|
|
|
146
146
|
<button type="button" tabindex="-1" >
|
|
147
147
|
<span><slot></slot></span>
|
|
148
148
|
</button>
|
|
149
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "tab")
|
|
149
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`;
|
|
150
150
|
}
|
|
151
151
|
static get observedAttributes() {
|
|
152
152
|
return ["selected", "for", "name"];
|
|
@@ -184,7 +184,7 @@ class p extends HTMLElement {
|
|
|
184
184
|
return this.getAttribute("for");
|
|
185
185
|
}
|
|
186
186
|
handleSelected(t) {
|
|
187
|
-
t === null ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false")) : (this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"));
|
|
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
188
|
}
|
|
189
189
|
}
|
|
190
190
|
class f extends HTMLElement {
|
|
@@ -228,7 +228,7 @@ class f extends HTMLElement {
|
|
|
228
228
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
|
-
class v extends
|
|
231
|
+
class v extends u {
|
|
232
232
|
constructor() {
|
|
233
233
|
super(), this.querySelectorAll("px-tab").forEach((t) => {
|
|
234
234
|
t.setAttribute("slot", "tabs");
|