@proximus/lavender-tabs 2.0.0-alpha.203 → 2.0.0-alpha.204
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/Tab.d.ts +1 -1
- package/dist/TabPanel.d.ts +1 -1
- package/dist/Tabs.d.ts +1 -1
- package/dist/index.es.js +38 -33
- package/package.json +1 -1
package/dist/Tab.d.ts
CHANGED
|
@@ -5,8 +5,8 @@ export type TabSelectedDetail = {
|
|
|
5
5
|
targetId: string;
|
|
6
6
|
};
|
|
7
7
|
export declare class Tab extends HTMLElement {
|
|
8
|
+
protected static readonly template: HTMLTemplateElement;
|
|
8
9
|
internals: ElementInternals;
|
|
9
|
-
template: () => string;
|
|
10
10
|
static get observedAttributes(): string[];
|
|
11
11
|
constructor();
|
|
12
12
|
connectedCallback(): void;
|
package/dist/TabPanel.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare class TabPanel extends HTMLElement {
|
|
2
|
-
template:
|
|
2
|
+
protected static readonly template: HTMLTemplateElement;
|
|
3
3
|
static get observedAttributes(): string[];
|
|
4
4
|
constructor();
|
|
5
5
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
package/dist/Tabs.d.ts
CHANGED
|
@@ -4,10 +4,10 @@ import { type TabPanel } from './TabPanel.ts';
|
|
|
4
4
|
import type { TabsEventMap } from './events.ts';
|
|
5
5
|
export declare class Tabs extends HTMLElement {
|
|
6
6
|
#private;
|
|
7
|
+
protected static readonly template: HTMLTemplateElement;
|
|
7
8
|
internals: ElementInternals;
|
|
8
9
|
/** Narrows listener types for the Tabs specific custom events. */
|
|
9
10
|
addEventListener: <K extends keyof TabsEventMap>(type: K, listener: (ev: TabsEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions) => void;
|
|
10
|
-
template: () => string;
|
|
11
11
|
static get observedAttributes(): string[];
|
|
12
12
|
constructor();
|
|
13
13
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
package/dist/index.es.js
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import "@proximus/lavender-button-icon";
|
|
2
|
-
import { booleanPropertyToAttributeSetter as e,
|
|
2
|
+
import { booleanPropertyToAttributeSetter as e, createTemplate as t, propertyToAttributeSetter as n, renderTemplate as r } from "@proximus/lavender-common";
|
|
3
3
|
//#region src/tab.css?inline
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
var
|
|
4
|
+
var i = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) .tab-btn{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) .tab-btn{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])>.tab-btn{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}.tab-btn{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);background:0 0;border:none;outline:none;margin:0}: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])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .tab-btn{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted][selected]) .tab-btn{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media screen and (width>=48rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}@media screen and (width>=64.0625rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}", a = new CSSStyleSheet();
|
|
5
|
+
a.replaceSync(i);
|
|
6
|
+
var o = "px.lavender.tab.selected", s = "px-tab-connected", c = class i extends HTMLElement {
|
|
7
|
+
static {
|
|
8
|
+
this.template = t("<div class=\"tab-btn\"><slot></slot></div>");
|
|
9
|
+
}
|
|
7
10
|
static get observedAttributes() {
|
|
8
11
|
return [
|
|
9
12
|
"selected",
|
|
@@ -13,10 +16,10 @@ var i = "px.lavender.tab.selected", a = "px-tab-connected", o = class extends HT
|
|
|
13
16
|
];
|
|
14
17
|
}
|
|
15
18
|
constructor() {
|
|
16
|
-
super(), this.
|
|
19
|
+
super(), this.attachShadow({ mode: "open" }), r(this.shadowRoot, i.template), this.shadowRoot.adoptedStyleSheets = [a], this.internals = this.attachInternals?.();
|
|
17
20
|
}
|
|
18
21
|
connectedCallback() {
|
|
19
|
-
this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(new CustomEvent(
|
|
22
|
+
this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(new CustomEvent(s, {
|
|
20
23
|
bubbles: !0,
|
|
21
24
|
composed: !0
|
|
22
25
|
})), this.addEventListener("click", () => {
|
|
@@ -39,14 +42,14 @@ var i = "px.lavender.tab.selected", a = "px-tab-connected", o = class extends HT
|
|
|
39
42
|
return this.hasAttribute("inverted");
|
|
40
43
|
}
|
|
41
44
|
set target(e) {
|
|
42
|
-
|
|
45
|
+
n(this, "target", e);
|
|
43
46
|
}
|
|
44
47
|
get target() {
|
|
45
48
|
return this.getAttribute("target");
|
|
46
49
|
}
|
|
47
50
|
handleSelected(e) {
|
|
48
51
|
e === "" ? (setTimeout(() => {
|
|
49
|
-
this.target && this.dispatchEvent(new CustomEvent(
|
|
52
|
+
this.target && this.dispatchEvent(new CustomEvent(o, {
|
|
50
53
|
bubbles: !0,
|
|
51
54
|
composed: !0,
|
|
52
55
|
detail: {
|
|
@@ -56,11 +59,14 @@ var i = "px.lavender.tab.selected", a = "px-tab-connected", o = class extends HT
|
|
|
56
59
|
}));
|
|
57
60
|
}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true") : (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false");
|
|
58
61
|
}
|
|
59
|
-
},
|
|
60
|
-
|
|
62
|
+
}, l = "*{font-family:var(--px-font-family)}#container{align-items:flex-start;gap:var(--px-spacing-default-mobile);flex-direction:column;display:flex}#tab-container{width:100%;position:relative}#tab-container>#previous{position:absolute;top:12px;left:-24px}#tab-container>#next{position:absolute;top:12px;right:-24px}#panels{width:100%}#tablist{scrollbar-width:none;box-sizing:border-box;width:100%;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));align-items:center;display:flex;overflow:scroll}#tablist::-webkit-scrollbar{display:none}: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 (width>=48rem){#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 screen and (width>=64.0625rem){#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))}}", u = new CSSStyleSheet();
|
|
63
|
+
u.replaceSync(l);
|
|
61
64
|
//#endregion
|
|
62
65
|
//#region src/Tabs.ts
|
|
63
|
-
var
|
|
66
|
+
var d = class e extends HTMLElement {
|
|
67
|
+
static {
|
|
68
|
+
this.template = t("<div id=\"container\"><div id=\"tab-container\"><px-button-icon id=\"previous\" hidden--mobile hidden--tablet><px-icon name=\"chevron_left\" from=\"lavender\"></px-icon></px-button-icon><div id=\"tablist\"><slot name=\"tabs\"></slot></div><px-button-icon id=\"next\" hidden--mobile hidden--tablet><px-icon name=\"chevron_right\" from=\"lavender\"></px-icon></px-button-icon></div><div id=\"panels\"><slot name=\"tabpanels\"></slot></div></div>");
|
|
69
|
+
}
|
|
64
70
|
static get observedAttributes() {
|
|
65
71
|
return [
|
|
66
72
|
"inverted",
|
|
@@ -70,9 +76,9 @@ var l = class extends HTMLElement {
|
|
|
70
76
|
];
|
|
71
77
|
}
|
|
72
78
|
constructor() {
|
|
73
|
-
super(), this.
|
|
79
|
+
super(), this.handleNextPreviousDisplay = () => {
|
|
74
80
|
this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
|
|
75
|
-
}, this.attachShadow({ mode: "open" }), this.shadowRoot
|
|
81
|
+
}, this.attachShadow({ mode: "open" }), r(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [u], this.internals = this.attachInternals?.();
|
|
76
82
|
}
|
|
77
83
|
attributeChangedCallback(e, t, n) {
|
|
78
84
|
switch (e) {
|
|
@@ -89,13 +95,13 @@ var l = class extends HTMLElement {
|
|
|
89
95
|
}
|
|
90
96
|
}
|
|
91
97
|
connectedCallback() {
|
|
92
|
-
this.$tabList.role = "tablist", this.addEventListener(
|
|
98
|
+
this.$tabList.role = "tablist", this.addEventListener(o, (e) => {
|
|
93
99
|
[...this.$tabPanels].forEach((t) => {
|
|
94
100
|
t.getAttribute("panel-id") !== e.detail.targetId && t.hasAttribute("selected") && (t.removeAttribute("selected"), t.removeAttribute("aria-labelledby")), t.getAttribute("panel-id") === e.detail.targetId && (t.setAttribute("selected", ""), t.setAttribute("aria-labelledby", e.detail.tabId));
|
|
95
101
|
}), [...this.$tabs].forEach((t) => {
|
|
96
102
|
t.getAttribute("id") !== e.detail.tabId && t.hasAttribute("selected") && t.removeAttribute("selected");
|
|
97
103
|
});
|
|
98
|
-
}), this.addEventListener(
|
|
104
|
+
}), this.addEventListener(s, () => {
|
|
99
105
|
this.handleNextPreviousDisplay(), this.inverted && this.#e(this.getAttribute("inverted"));
|
|
100
106
|
}), this.handleNextPreviousDisplay(), this.#e(this.getAttribute("inverted")), this.addEventListener("keydown", (e) => {
|
|
101
107
|
(e.key === "ArrowRight" || e.key === "ArrowLeft") && document.activeElement?.localName?.endsWith("-tab") && this.navigateToTab(e.key === "ArrowRight" ? "right" : "left");
|
|
@@ -178,26 +184,25 @@ var l = class extends HTMLElement {
|
|
|
178
184
|
return this.getAttribute("next-aria-label");
|
|
179
185
|
}
|
|
180
186
|
set nextAriaLabel(e) {
|
|
181
|
-
|
|
187
|
+
n(this, "next-aria-label", e);
|
|
182
188
|
}
|
|
183
189
|
get previousAriaLabel() {
|
|
184
190
|
return this.getAttribute("previous-aria-label");
|
|
185
191
|
}
|
|
186
192
|
set previousAriaLabel(e) {
|
|
187
|
-
|
|
193
|
+
n(this, "previous-aria-label", e);
|
|
194
|
+
}
|
|
195
|
+
}, f = ":host [role=tabpanel]{overflow-x:auto}", p = new CSSStyleSheet();
|
|
196
|
+
p.replaceSync(f);
|
|
197
|
+
var m = class i extends HTMLElement {
|
|
198
|
+
static {
|
|
199
|
+
this.template = t("<div role=\"tabpanel\" tabindex=\"0\"><slot></slot></div>");
|
|
188
200
|
}
|
|
189
|
-
}, u = ":host [role=tabpanel]{overflow-x:auto}", d = new CSSStyleSheet();
|
|
190
|
-
d.replaceSync(u);
|
|
191
|
-
var f = class extends HTMLElement {
|
|
192
201
|
static get observedAttributes() {
|
|
193
202
|
return ["id", "selected"];
|
|
194
203
|
}
|
|
195
204
|
constructor() {
|
|
196
|
-
super(), this.
|
|
197
|
-
<div role="tabpanel" id="${this.panelId}" tabindex="0">
|
|
198
|
-
<slot></slot>
|
|
199
|
-
</div>
|
|
200
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c, d];
|
|
205
|
+
super(), this.attachShadow({ mode: "open" }), r(this.shadowRoot, i.template), this.shadowRoot.adoptedStyleSheets = [u, p];
|
|
201
206
|
}
|
|
202
207
|
attributeChangedCallback(e, t, n) {
|
|
203
208
|
e === "panel-id" ? this.$panel.setAttribute("id", n) : e === "selected" && (n === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
@@ -209,7 +214,7 @@ var f = class extends HTMLElement {
|
|
|
209
214
|
return this.getAttribute("panel-id");
|
|
210
215
|
}
|
|
211
216
|
set panelId(e) {
|
|
212
|
-
|
|
217
|
+
n(this, "panel-id", e);
|
|
213
218
|
}
|
|
214
219
|
set selected(t) {
|
|
215
220
|
e(this, "selected", t);
|
|
@@ -220,7 +225,7 @@ var f = class extends HTMLElement {
|
|
|
220
225
|
get $panel() {
|
|
221
226
|
return this.shadowRoot.querySelector("[role=\"tabpanel\"]");
|
|
222
227
|
}
|
|
223
|
-
},
|
|
228
|
+
}, h = class extends d {
|
|
224
229
|
constructor() {
|
|
225
230
|
super();
|
|
226
231
|
}
|
|
@@ -230,18 +235,18 @@ var f = class extends HTMLElement {
|
|
|
230
235
|
});
|
|
231
236
|
}
|
|
232
237
|
};
|
|
233
|
-
customElements.get("px-tabs") || customElements.define("px-tabs",
|
|
234
|
-
var
|
|
238
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", h);
|
|
239
|
+
var g = class extends c {
|
|
235
240
|
constructor() {
|
|
236
241
|
super();
|
|
237
242
|
}
|
|
238
243
|
};
|
|
239
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
240
|
-
var
|
|
244
|
+
customElements.get("px-tab") || customElements.define("px-tab", g);
|
|
245
|
+
var _ = class extends m {
|
|
241
246
|
constructor() {
|
|
242
247
|
super();
|
|
243
248
|
}
|
|
244
249
|
};
|
|
245
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
250
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", _);
|
|
246
251
|
//#endregion
|
|
247
|
-
export {
|
|
252
|
+
export { g as PxTab, _ as PxTabPanel, h as PxTabs };
|