@proximus/lavender-tabs 1.4.17-alpha.7 → 1.4.17-beta.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/Tab.d.ts +1 -1
- package/dist/TabPanel.d.ts +1 -1
- package/dist/Tabs.d.ts +1 -1
- package/dist/index.es.js +37 -28
- package/package.json +1 -1
package/dist/Tab.d.ts
CHANGED
|
@@ -5,8 +5,8 @@ export type TabSelectedDetail = {
|
|
|
5
5
|
forName: string | null;
|
|
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) 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{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])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]){background-color:var(--px-color-background-container-default-inverted)}: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]){background-color:var(--px-color-background-state-active-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 (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 (width>=64.0625rem){button{padding:var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);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)}}", 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("<button type=\"button\" tabindex=\"-1\" ><span><slot></slot></span></button>");
|
|
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,20 +42,20 @@ 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 name(e) {
|
|
42
|
-
|
|
45
|
+
n(this, "name", e);
|
|
43
46
|
}
|
|
44
47
|
get name() {
|
|
45
48
|
return this.getAttribute("name");
|
|
46
49
|
}
|
|
47
50
|
set for(e) {
|
|
48
|
-
|
|
51
|
+
n(this, "for", e);
|
|
49
52
|
}
|
|
50
53
|
get for() {
|
|
51
54
|
return this.getAttribute("for");
|
|
52
55
|
}
|
|
53
56
|
handleSelected(e) {
|
|
54
57
|
e === "" ? (setTimeout(() => {
|
|
55
|
-
this.dispatchEvent(new CustomEvent(
|
|
58
|
+
this.dispatchEvent(new CustomEvent(o, {
|
|
56
59
|
bubbles: !0,
|
|
57
60
|
composed: !0,
|
|
58
61
|
detail: {
|
|
@@ -62,11 +65,14 @@ var i = "px.lavender.tab.selected", a = "px-tab-connected", o = class extends HT
|
|
|
62
65
|
}));
|
|
63
66
|
}), 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");
|
|
64
67
|
}
|
|
65
|
-
},
|
|
66
|
-
|
|
68
|
+
}, 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-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 (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();
|
|
69
|
+
u.replaceSync(l);
|
|
67
70
|
//#endregion
|
|
68
71
|
//#region src/Tabs.ts
|
|
69
|
-
var
|
|
72
|
+
var d = class e extends HTMLElement {
|
|
73
|
+
static {
|
|
74
|
+
this.template = t("<div id=\"container\"><div id=\"tab-container\"><px-button-icon id=\"previous\" aria-hidden=\"true\" 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\" aria-hidden=\"true\" 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>");
|
|
75
|
+
}
|
|
70
76
|
static get observedAttributes() {
|
|
71
77
|
return [
|
|
72
78
|
"inverted",
|
|
@@ -76,9 +82,9 @@ var l = class extends HTMLElement {
|
|
|
76
82
|
];
|
|
77
83
|
}
|
|
78
84
|
constructor() {
|
|
79
|
-
super(), this.
|
|
85
|
+
super(), this.handleNextPreviousDisplay = () => {
|
|
80
86
|
this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
|
|
81
|
-
}, this.attachShadow({ mode: "open" }), this.shadowRoot
|
|
87
|
+
}, this.attachShadow({ mode: "open" }), r(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [u], this.internals = this.attachInternals?.();
|
|
82
88
|
}
|
|
83
89
|
attributeChangedCallback(e, t, n) {
|
|
84
90
|
switch (e) {
|
|
@@ -95,13 +101,13 @@ var l = class extends HTMLElement {
|
|
|
95
101
|
}
|
|
96
102
|
}
|
|
97
103
|
connectedCallback() {
|
|
98
|
-
this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(
|
|
104
|
+
this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(o, (e) => {
|
|
99
105
|
[...this.$tabPanels].forEach((t) => {
|
|
100
106
|
t.getAttribute("name") !== e.detail.forName && t.hasAttribute("selected") && (t.removeAttribute("selected"), t.removeAttribute("aria-labelledby")), t.getAttribute("name") === e.detail.forName && (t.setAttribute("selected", ""), e.detail.tabName && t.setAttribute("aria-labelledby", e.detail.tabName));
|
|
101
107
|
}), [...this.$tabs].forEach((t) => {
|
|
102
108
|
t.getAttribute("name") !== e.detail.tabName && t.hasAttribute("selected") && t.removeAttribute("selected");
|
|
103
109
|
});
|
|
104
|
-
}), this.addEventListener(
|
|
110
|
+
}), this.addEventListener(s, () => {
|
|
105
111
|
this.handleNextPreviousDisplay(), this.inverted && this.#e(this.getAttribute("inverted"));
|
|
106
112
|
}), this.handleNextPreviousDisplay(), this.#e(this.getAttribute("inverted")), this.addEventListener("keydown", (e) => {
|
|
107
113
|
(e.key === "ArrowRight" || e.key === "ArrowLeft") && document.activeElement?.localName?.endsWith("-tab") && this.navigateToTab(e.key === "ArrowRight" ? "right" : "left");
|
|
@@ -177,14 +183,17 @@ var l = class extends HTMLElement {
|
|
|
177
183
|
get ariaLabelPrevious() {
|
|
178
184
|
return this.getAttribute("aria-label-previous");
|
|
179
185
|
}
|
|
180
|
-
},
|
|
181
|
-
|
|
182
|
-
var
|
|
186
|
+
}, f = ":host [role=tabpanel]{overflow-x:auto}", p = new CSSStyleSheet();
|
|
187
|
+
p.replaceSync(f);
|
|
188
|
+
var m = class i extends HTMLElement {
|
|
189
|
+
static {
|
|
190
|
+
this.template = t("<div role=\"tabpanel\" tabindex=\"0\"><slot></slot></div>");
|
|
191
|
+
}
|
|
183
192
|
static get observedAttributes() {
|
|
184
193
|
return ["name", "selected"];
|
|
185
194
|
}
|
|
186
195
|
constructor() {
|
|
187
|
-
super(), this.
|
|
196
|
+
super(), this.attachShadow({ mode: "open" }), r(this.shadowRoot, i.template), this.shadowRoot.adoptedStyleSheets = [u, p];
|
|
188
197
|
}
|
|
189
198
|
attributeChangedCallback(e, t, n) {
|
|
190
199
|
e === "name" ? this.$panel.setAttribute("aria-labelledby", n) : e === "selected" && (n === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
|
|
@@ -196,7 +205,7 @@ var f = class extends HTMLElement {
|
|
|
196
205
|
return this.getAttribute("name");
|
|
197
206
|
}
|
|
198
207
|
set name(e) {
|
|
199
|
-
|
|
208
|
+
n(this, "name", e);
|
|
200
209
|
}
|
|
201
210
|
set selected(t) {
|
|
202
211
|
e(this, "selected", t);
|
|
@@ -207,7 +216,7 @@ var f = class extends HTMLElement {
|
|
|
207
216
|
get $panel() {
|
|
208
217
|
return this.shadowRoot.querySelector("[role=\"tabpanel\"]");
|
|
209
218
|
}
|
|
210
|
-
},
|
|
219
|
+
}, h = class extends d {
|
|
211
220
|
constructor() {
|
|
212
221
|
super();
|
|
213
222
|
}
|
|
@@ -217,18 +226,18 @@ var f = class extends HTMLElement {
|
|
|
217
226
|
});
|
|
218
227
|
}
|
|
219
228
|
};
|
|
220
|
-
customElements.get("px-tabs") || customElements.define("px-tabs",
|
|
221
|
-
var
|
|
229
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", h);
|
|
230
|
+
var g = class extends c {
|
|
222
231
|
constructor() {
|
|
223
232
|
super();
|
|
224
233
|
}
|
|
225
234
|
};
|
|
226
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
227
|
-
var
|
|
235
|
+
customElements.get("px-tab") || customElements.define("px-tab", g);
|
|
236
|
+
var _ = class extends m {
|
|
228
237
|
constructor() {
|
|
229
238
|
super();
|
|
230
239
|
}
|
|
231
240
|
};
|
|
232
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
241
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", _);
|
|
233
242
|
//#endregion
|
|
234
|
-
export {
|
|
243
|
+
export { g as PxTab, _ as PxTabPanel, h as PxTabs };
|