@proximus/lavender-tabs 2.0.0-alpha.62 → 2.0.0-alpha.64
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/Tabs.d.ts +0 -2
- package/dist/index.es.js +15 -18
- package/package.json +1 -1
package/dist/Tabs.d.ts
CHANGED
|
@@ -4,7 +4,6 @@ import { type TabPanel } from './TabPanel.ts';
|
|
|
4
4
|
export declare class Tabs extends HTMLElement {
|
|
5
5
|
#private;
|
|
6
6
|
internals: ElementInternals;
|
|
7
|
-
tabsConnected: number;
|
|
8
7
|
template: () => string;
|
|
9
8
|
static get observedAttributes(): string[];
|
|
10
9
|
constructor();
|
|
@@ -13,7 +12,6 @@ export declare class Tabs extends HTMLElement {
|
|
|
13
12
|
disconnectedCallback(): void;
|
|
14
13
|
navigateToTab(direction: 'left' | 'right'): void;
|
|
15
14
|
handleNextPreviousDisplay: () => void;
|
|
16
|
-
allTabsConnected(): boolean;
|
|
17
15
|
shouldDisplayScrollRightButton(): boolean;
|
|
18
16
|
shouldDisplayScrollLeftButton(): boolean;
|
|
19
17
|
get $activeTab(): Tab;
|
package/dist/index.es.js
CHANGED
|
@@ -67,15 +67,15 @@ class S extends HTMLElement {
|
|
|
67
67
|
}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
const
|
|
71
|
-
b.replaceSync(
|
|
70
|
+
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 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(L);
|
|
72
72
|
var o, d, $;
|
|
73
|
-
class
|
|
73
|
+
class T extends HTMLElement {
|
|
74
74
|
constructor() {
|
|
75
75
|
var t;
|
|
76
76
|
super();
|
|
77
77
|
x(this, o);
|
|
78
|
-
this.
|
|
78
|
+
this.template = () => `
|
|
79
79
|
<div id="container">
|
|
80
80
|
<div id="tab-container">
|
|
81
81
|
<px-button-icon id="previous">
|
|
@@ -93,7 +93,7 @@ class L extends HTMLElement {
|
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
95
95
|
`, this.handleNextPreviousDisplay = () => {
|
|
96
|
-
this
|
|
96
|
+
this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
|
|
97
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);
|
|
98
98
|
}
|
|
99
99
|
static get observedAttributes() {
|
|
@@ -132,8 +132,8 @@ class L extends HTMLElement {
|
|
|
132
132
|
});
|
|
133
133
|
}
|
|
134
134
|
), this.addEventListener(A, () => {
|
|
135
|
-
this.
|
|
136
|
-
}), this.
|
|
135
|
+
this.handleNextPreviousDisplay(), this.inverted && n(this, o, d).call(this, this.getAttribute("inverted"));
|
|
136
|
+
}), this.handleNextPreviousDisplay(), n(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
|
|
137
137
|
var a, l;
|
|
138
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
139
|
}), (t = this.$prefixButton) == null || t.addEventListener("click", (i) => {
|
|
@@ -155,11 +155,8 @@ class L extends HTMLElement {
|
|
|
155
155
|
const s = this.$nextTab, i = this.$previousTab;
|
|
156
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;
|
|
157
157
|
}
|
|
158
|
-
allTabsConnected() {
|
|
159
|
-
return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length || [...this.$tabs].every((t) => t.isConnected);
|
|
160
|
-
}
|
|
161
158
|
shouldDisplayScrollRightButton() {
|
|
162
|
-
return this
|
|
159
|
+
return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
|
|
163
160
|
}
|
|
164
161
|
shouldDisplayScrollLeftButton() {
|
|
165
162
|
return this.$tabList.scrollLeft > 0;
|
|
@@ -270,7 +267,7 @@ class E extends HTMLElement {
|
|
|
270
267
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
271
268
|
}
|
|
272
269
|
}
|
|
273
|
-
class w extends
|
|
270
|
+
class w extends T {
|
|
274
271
|
constructor() {
|
|
275
272
|
super();
|
|
276
273
|
}
|
|
@@ -282,20 +279,20 @@ class w extends L {
|
|
|
282
279
|
}
|
|
283
280
|
}
|
|
284
281
|
customElements.get("px-tabs") || customElements.define("px-tabs", w);
|
|
285
|
-
class
|
|
282
|
+
class B extends S {
|
|
286
283
|
constructor() {
|
|
287
284
|
super();
|
|
288
285
|
}
|
|
289
286
|
}
|
|
290
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
291
|
-
class
|
|
287
|
+
customElements.get("px-tab") || customElements.define("px-tab", B);
|
|
288
|
+
class C extends E {
|
|
292
289
|
constructor() {
|
|
293
290
|
super();
|
|
294
291
|
}
|
|
295
292
|
}
|
|
296
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
293
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", C);
|
|
297
294
|
export {
|
|
298
|
-
|
|
299
|
-
|
|
295
|
+
B as PxTab,
|
|
296
|
+
C as PxTabPanel,
|
|
300
297
|
w as PxTabs
|
|
301
298
|
};
|