@proximus/lavender-tabs 2.0.0-alpha.6 → 2.0.0-alpha.61

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.
Files changed (6) hide show
  1. package/dist/PxTabs.d.ts +1 -0
  2. package/dist/Tab.d.ts +7 -5
  3. package/dist/TabPanel.d.ts +3 -2
  4. package/dist/Tabs.d.ts +14 -9
  5. package/dist/index.es.js +192 -146
  6. package/package.json +1 -1
package/dist/PxTabs.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Tab } from './Tab.ts';
3
3
  import { TabPanel } from './TabPanel.ts';
4
4
  export declare class PxTabs extends Tabs {
5
5
  constructor();
6
+ connectedCallback(): void;
6
7
  }
7
8
  export declare class PxTab extends Tab {
8
9
  constructor();
package/dist/Tab.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ export declare const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
2
+ export declare const TAB_CONNECTED_EVENT = "px-tab-connected";
1
3
  export declare class Tab extends HTMLElement {
2
4
  internals: ElementInternals;
3
5
  template: () => string;
@@ -5,13 +7,13 @@ export declare class Tab extends HTMLElement {
5
7
  constructor();
6
8
  connectedCallback(): void;
7
9
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
8
- get $button(): HTMLButtonElement;
10
+ get $tabBtn(): HTMLSpanElement;
9
11
  get selected(): boolean;
10
12
  set selected(value: boolean);
11
13
  get inverted(): boolean;
12
- set name(value: string);
13
- get name(): string;
14
- set for(value: string);
15
- get for(): string;
14
+ set id(value: string);
15
+ get id(): string;
16
+ set target(value: string);
17
+ get target(): string;
16
18
  handleSelected(value: string): void;
17
19
  }
package/dist/TabPanel.d.ts CHANGED
@@ -4,8 +4,9 @@ export declare class TabPanel extends HTMLElement {
4
4
  constructor();
5
5
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
6
6
  connectedCallback(): void;
7
- get name(): string;
8
- set name(value: string);
7
+ get panelId(): string;
8
+ set panelId(value: string);
9
9
  set selected(value: boolean);
10
+ get selected(): boolean;
10
11
  get $panel(): HTMLElement;
11
12
  }
package/dist/Tabs.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import '@proximus/lavender-button-icon';
2
- import { Tab } from './Tab.ts';
3
- import { TabPanel } from './TabPanel.ts';
2
+ import { type Tab } from './Tab.ts';
3
+ import { type TabPanel } from './TabPanel.ts';
4
4
  export declare class Tabs extends HTMLElement {
5
- private readonly _label;
5
+ #private;
6
6
  internals: ElementInternals;
7
7
  tabsConnected: number;
8
8
  template: () => string;
@@ -10,9 +10,9 @@ export declare class Tabs extends HTMLElement {
10
10
  constructor();
11
11
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
12
12
  connectedCallback(): void;
13
- checkNextPreviousButtonsVisibility(): void;
13
+ disconnectedCallback(): void;
14
14
  navigateToTab(direction: 'left' | 'right'): void;
15
- handleNextPreviousDisplay(): void;
15
+ handleNextPreviousDisplay: () => void;
16
16
  allTabsConnected(): boolean;
17
17
  shouldDisplayScrollRightButton(): boolean;
18
18
  shouldDisplayScrollLeftButton(): boolean;
@@ -21,11 +21,16 @@ export declare class Tabs extends HTMLElement {
21
21
  get $previousTab(): Tab;
22
22
  get $activePanel(): TabPanel;
23
23
  get $tabList(): HTMLElement;
24
+ get $tabs(): NodeListOf<Tab>;
25
+ get $tabPanels(): NodeListOf<TabPanel>;
24
26
  get $prefixButton(): HTMLButtonElement;
25
27
  get $suffixButton(): HTMLButtonElement;
26
- get label(): string;
27
- set label(value: string);
28
+ get hideControls(): boolean;
29
+ set hideControls(value: boolean);
28
30
  get inverted(): boolean;
29
- get ariaLabelNext(): string;
30
- get ariaLabelPrevious(): string;
31
+ set inverted(value: boolean);
32
+ get nextAriaLabel(): string;
33
+ set nextAriaLabel(value: string);
34
+ get previousAriaLabel(): string;
35
+ set previousAriaLabel(value: string);
31
36
  }
package/dist/index.es.js CHANGED
@@ -1,20 +1,90 @@
1
+ var f = (r) => {
2
+ throw TypeError(r);
3
+ };
4
+ var y = (r, e, t) => e.has(r) || f("Cannot " + t);
5
+ var x = (r, e, t) => e.has(r) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t);
6
+ var n = (r, e, t) => (y(r, e, "access private method"), t);
1
7
  import "@proximus/lavender-button-icon";
2
- import { isFalsy as c } from "@proximus/lavender-common";
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 {
8
+ const k = "*{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{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])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-default)}: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]) .tab-btn{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){.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 only screen and (min-width: 1025px){.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)}}", g = new CSSStyleSheet();
9
+ g.replaceSync(k);
10
+ const m = "px.lavender.tab.selected", A = "px-tab-connected";
11
+ class S extends HTMLElement {
12
+ constructor() {
13
+ var e;
14
+ super(), this.template = () => `
15
+ <div class="tab-btn"><slot></slot></div>
16
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [g], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
17
+ }
18
+ static get observedAttributes() {
19
+ return ["selected", "target", "id", "inverted"];
20
+ }
21
+ connectedCallback() {
22
+ this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(
23
+ new CustomEvent(A, { bubbles: !0, composed: !0 })
24
+ ), this.addEventListener("click", () => {
25
+ this.selected = !0;
26
+ });
27
+ }
28
+ attributeChangedCallback(e, t, s) {
29
+ e === "selected" ? this.handleSelected(s) : e === "id" ? this.$tabBtn.setAttribute("id", s) : e === "target" ? this.setAttribute("aria-controls", s) : e === "inverted" && (s === "" ? this.$tabBtn.setAttribute("inverted", "") : this.$tabBtn.removeAttribute("inverted"));
30
+ }
31
+ get $tabBtn() {
32
+ return this.shadowRoot.querySelector(".tab-btn");
33
+ }
34
+ get selected() {
35
+ return this.hasAttribute("selected");
36
+ }
37
+ set selected(e) {
38
+ e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
39
+ }
40
+ get inverted() {
41
+ return this.hasAttribute("inverted");
42
+ }
43
+ set id(e) {
44
+ this.setAttribute("id", e);
45
+ }
46
+ get id() {
47
+ return this.getAttribute("id");
48
+ }
49
+ set target(e) {
50
+ this.setAttribute("target", e);
51
+ }
52
+ get target() {
53
+ return this.getAttribute("target");
54
+ }
55
+ handleSelected(e) {
56
+ e !== "" ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (setTimeout(() => {
57
+ this.dispatchEvent(
58
+ new CustomEvent(m, {
59
+ bubbles: !0,
60
+ composed: !0,
61
+ detail: {
62
+ tabId: this.id,
63
+ targetId: this.target
64
+ }
65
+ })
66
+ );
67
+ }), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
68
+ }
69
+ }
70
+ const T = '*{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(T);
72
+ var o, d, $;
73
+ class L extends HTMLElement {
6
74
  constructor() {
7
75
  var t;
8
- super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
76
+ super();
77
+ x(this, o);
78
+ this.tabsConnected = 0, this.template = () => `
9
79
  <div id="container">
10
80
  <div id="tab-container">
11
- <px-button-icon id="previous" aria-hidden="true">
81
+ <px-button-icon id="previous">
12
82
  <px-icon name="chevron_left" from="lavender"></px-icon>
13
83
  </px-button-icon>
14
- <div id="tablist" aria-labelledby="${this._label}">
84
+ <div id="tablist">
15
85
  <slot name="tabs"></slot>
16
86
  </div>
17
- <px-button-icon id="next" aria-hidden="true">
87
+ <px-button-icon id="next" >
18
88
  <px-icon name="chevron_right" from="lavender"></px-icon>
19
89
  </px-button-icon>
20
90
  </div>
@@ -22,75 +92,71 @@ class u extends HTMLElement {
22
92
  <slot name="tabpanels"></slot>
23
93
  </div>
24
94
  </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.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener("px-tab-connected", () => {
26
- this.tabsConnected++, this.handleNextPreviousDisplay();
27
- }), window.addEventListener("resize", () => {
28
- this.handleNextPreviousDisplay();
29
- }), this.$tabList.addEventListener("scroll", () => {
30
- this.handleNextPreviousDisplay();
31
- });
95
+ `, this.handleNextPreviousDisplay = () => {
96
+ this.allTabsConnected() && this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
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);
32
98
  }
33
99
  static get observedAttributes() {
34
- return ["label", "inverted", "aria-label-next", "aria-label-previous"];
35
- }
36
- attributeChangedCallback(t, i, e) {
100
+ return [
101
+ "inverted",
102
+ "next-aria-label",
103
+ "previous-aria-label",
104
+ "hide-controls"
105
+ ];
106
+ }
107
+ attributeChangedCallback(t, s, i) {
37
108
  switch (t) {
38
- case "label":
39
- this.label = e;
109
+ case "next-aria-label":
110
+ this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", i);
111
+ break;
112
+ case "previous-aria-label":
113
+ this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute("aria-label", i);
40
114
  break;
41
- case "aria-label-next":
42
- this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", e || "Next tab");
115
+ case "hide-controls":
116
+ n(this, o, $).call(this, i);
43
117
  break;
44
- case "aria-label-previous":
45
- this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute(
46
- "aria-label",
47
- e || "Previous tab"
48
- );
118
+ case "inverted":
119
+ n(this, o, d).call(this, i);
49
120
  break;
50
121
  }
51
122
  }
52
123
  connectedCallback() {
53
- var t, i, e, n;
54
- this.checkNextPreviousButtonsVisibility(), this.addEventListener("click", (s) => {
55
- var o;
56
- if ((o = s.target.localName) != null && o.endsWith("-tab")) {
57
- this.$activePanel.selected = !1, this.$activeTab.selected = !1;
58
- const r = s.target;
59
- r && (r.selected = !0), this.$activePanel ? this.$activePanel.selected = !0 : console.error("No panel found for this tab");
124
+ var t, s;
125
+ this.$tabList.role = "tablist", this.addEventListener(
126
+ m,
127
+ (i) => {
128
+ [...this.$tabPanels].forEach((a) => {
129
+ a.getAttribute("panel-id") !== i.detail.targetId && a.hasAttribute("selected") && (a.removeAttribute("selected"), a.removeAttribute("aria-labelledby")), a.getAttribute("panel-id") === i.detail.targetId && (a.setAttribute("selected", ""), a.setAttribute("aria-labelledby", i.detail.tabId));
130
+ }), [...this.$tabs].forEach((a) => {
131
+ a.getAttribute("id") !== i.detail.tabId && a.hasAttribute("selected") && a.removeAttribute("selected");
132
+ });
60
133
  }
61
- }), this.addEventListener("keydown", (s) => {
62
- var o, r;
63
- (s.key === "ArrowRight" || s.key === "ArrowLeft") && ((r = (o = document.activeElement) == null ? void 0 : o.localName) != null && r.endsWith("-tab")) && this.navigateToTab(s.key === "ArrowRight" ? "right" : "left");
64
- }), (t = this.$prefixButton) == null || t.addEventListener("click", (s) => {
65
- s.stopPropagation(), this.$tabList.scrollTo({
134
+ ), this.addEventListener(A, () => {
135
+ this.tabsConnected++, this.handleNextPreviousDisplay(), this.allTabsConnected() && this.inverted && n(this, o, d).call(this, this.getAttribute("inverted"));
136
+ }), this.allTabsConnected() && n(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
137
+ var a, l;
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
+ }), (t = this.$prefixButton) == null || t.addEventListener("click", (i) => {
140
+ i.stopPropagation(), this.$tabList.scrollTo({
66
141
  left: this.$tabList.scrollLeft - 100,
67
142
  behavior: "smooth"
68
143
  });
69
- }), (i = this.$suffixButton) == null || i.addEventListener("click", (s) => {
70
- s.stopPropagation(), this.$tabList.scrollTo({
144
+ }), (s = this.$suffixButton) == null || s.addEventListener("click", (i) => {
145
+ i.stopPropagation(), this.$tabList.scrollTo({
71
146
  left: this.$tabList.scrollLeft + 100,
72
147
  behavior: "smooth"
73
148
  });
74
- }), this.inverted && ((e = this.$prefixButton) == null || e.setAttribute("inverted", ""), (n = this.$suffixButton) == null || n.setAttribute("inverted", "")), this.hasAttribute("hide-controls") || (this.$suffixButton.setAttribute(
75
- "aria-label",
76
- this.ariaLabelNext || "Next tab"
77
- ), this.$prefixButton.setAttribute(
78
- "aria-label",
79
- this.ariaLabelPrevious || "Previous tab"
80
- ));
149
+ }), window.addEventListener("resize", this.handleNextPreviousDisplay), this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
81
150
  }
82
- checkNextPreviousButtonsVisibility() {
83
- (this.getAttribute("hide-controls") === "" || this.getAttribute("hide-controls") === "true") && (this.$prefixButton.remove(), this.$suffixButton.remove());
151
+ disconnectedCallback() {
152
+ window.addEventListener("resize", this.handleNextPreviousDisplay);
84
153
  }
85
154
  navigateToTab(t) {
86
- const i = this.$nextTab, e = this.$previousTab;
87
- this.$activePanel.selected = !1, this.$activeTab.selected = !1, t === "right" ? (i.selected = !0, i.focus()) : t === "left" && (e.selected = !0, e.focus()), this.$activePanel.selected = !0;
88
- }
89
- handleNextPreviousDisplay() {
90
- this.allTabsConnected() && this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
155
+ const s = this.$nextTab, i = this.$previousTab;
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;
91
157
  }
92
158
  allTabsConnected() {
93
- return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length;
159
+ return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length || [...this.$tabs].every((t) => t.isConnected);
94
160
  }
95
161
  shouldDisplayScrollRightButton() {
96
162
  return this.allTabsConnected() && this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
@@ -110,146 +176,126 @@ class u extends HTMLElement {
110
176
  return t || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
111
177
  }
112
178
  get $activePanel() {
113
- return this.querySelector(`[name="${this.$activeTab.for}"]`);
179
+ var t;
180
+ return this.querySelector(
181
+ `[panel-id="${(t = this.$activeTab) == null ? void 0 : t.target}"]`
182
+ );
114
183
  }
115
184
  get $tabList() {
116
185
  return this.shadowRoot.querySelector("#tablist");
117
186
  }
187
+ get $tabs() {
188
+ return this.querySelectorAll('[slot="tabs"]');
189
+ }
190
+ get $tabPanels() {
191
+ return this.querySelectorAll('[slot="tabpanels"]');
192
+ }
118
193
  get $prefixButton() {
119
194
  return this.shadowRoot.querySelector("#previous");
120
195
  }
121
196
  get $suffixButton() {
122
197
  return this.shadowRoot.querySelector("#next");
123
198
  }
124
- get label() {
125
- return this.$tabList.getAttribute("aria-labelledby");
126
- }
127
- set label(t) {
128
- this.$tabList.setAttribute("aria-labelledby", t);
129
- }
130
- get inverted() {
131
- return this.hasAttribute("inverted");
132
- }
133
- get ariaLabelNext() {
134
- return this.getAttribute("aria-label-next");
135
- }
136
- get ariaLabelPrevious() {
137
- return this.getAttribute("aria-label-previous");
138
- }
139
- }
140
- const h = "*{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 only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}", d = new CSSStyleSheet();
141
- d.replaceSync(h);
142
- class p extends HTMLElement {
143
- constructor() {
144
- var t;
145
- super(), this.template = () => `
146
- <button type="button" tabindex="-1" >
147
- <span><slot></slot></span>
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.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`;
150
- }
151
- static get observedAttributes() {
152
- return ["selected", "for", "name"];
153
- }
154
- connectedCallback() {
155
- this.name || console.error("Tab needs a name attribute"), this.for || console.error("Tab needs a for attribute"), this.slot = "tabs", this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$button.setAttribute("inverted", "")), this.dispatchEvent(
156
- new CustomEvent("px-tab-connected", { bubbles: !0, composed: !0 })
157
- );
158
- }
159
- attributeChangedCallback(t, i, e) {
160
- t === "selected" ? this.handleSelected(e) : t === "name" ? this.$button.setAttribute("id", e) : t === "for" && this.setAttribute("aria-controls", e);
199
+ get hideControls() {
200
+ return this.hasAttribute("hide-controls");
161
201
  }
162
- get $button() {
163
- return this.shadowRoot.querySelector("button");
164
- }
165
- get selected() {
166
- return !!this.hasAttribute("selected");
167
- }
168
- set selected(t) {
169
- t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
202
+ set hideControls(t) {
203
+ t ? this.setAttribute("hide-controls", "") : this.removeAttribute("hide-controls");
170
204
  }
171
205
  get inverted() {
172
206
  return this.hasAttribute("inverted");
173
207
  }
174
- set name(t) {
175
- this.setAttribute("name", t);
208
+ set inverted(t) {
209
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
176
210
  }
177
- get name() {
178
- return this.getAttribute("name");
211
+ get nextAriaLabel() {
212
+ return this.getAttribute("next-aria-label");
179
213
  }
180
- set for(t) {
181
- this.setAttribute("for", t);
214
+ set nextAriaLabel(t) {
215
+ this.setAttribute("next-aria-label", t);
182
216
  }
183
- get for() {
184
- return this.getAttribute("for");
217
+ get previousAriaLabel() {
218
+ return this.getAttribute("previous-aria-label");
185
219
  }
186
- handleSelected(t) {
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");
220
+ set previousAriaLabel(t) {
221
+ this.setAttribute("previous-aria-label", t);
188
222
  }
189
223
  }
190
- class f extends HTMLElement {
224
+ o = new WeakSet(), d = function(t) {
225
+ var s, i, a, l, h, u, p, v;
226
+ t === "" ? ((s = this.$prefixButton) == null || s.setAttribute("inverted", ""), (i = this.$suffixButton) == null || i.setAttribute("inverted", ""), (a = this.$activePanel) == null || a.setAttribute("inverted", ""), (l = this.$activeTab) == null || l.setAttribute("inverted", ""), [...this.$tabs].forEach((c) => {
227
+ c.setAttribute("inverted", "");
228
+ })) : ((h = this.$prefixButton) == null || h.removeAttribute("inverted"), (u = this.$suffixButton) == null || u.removeAttribute("inverted"), (p = this.$activePanel) == null || p.removeAttribute("inverted"), (v = this.$activeTab) == null || v.removeAttribute("inverted"), [...this.$tabs].forEach((c) => {
229
+ c.removeAttribute("inverted");
230
+ }));
231
+ }, $ = function(t) {
232
+ t === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
233
+ "aria-label",
234
+ this.nextAriaLabel || "Next tab"
235
+ ), this.$prefixButton.setAttribute(
236
+ "aria-label",
237
+ this.previousAriaLabel || "Previous tab"
238
+ ));
239
+ };
240
+ class E extends HTMLElement {
191
241
  constructor() {
192
242
  super(), this.template = () => `
193
- <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
243
+ <div role="tabpanel" id="${this.panelId}" tabindex="0">
194
244
  <slot></slot>
195
245
  </div>
196
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l];
246
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b];
197
247
  }
198
248
  static get observedAttributes() {
199
- return ["name"];
249
+ return ["id", "selected"];
200
250
  }
201
- attributeChangedCallback(t, i, e) {
202
- t === "name" && this.$panel.setAttribute("aria-labelledby", e);
251
+ attributeChangedCallback(e, t, s) {
252
+ e === "panel-id" ? this.$panel.setAttribute("id", s) : e === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
203
253
  }
204
254
  connectedCallback() {
205
- this.name || console.error("TabPanel needs a name attribute"), this.slot = "tabpanels";
206
- const t = this.parentElement.querySelector(
207
- `[for="${this.getAttribute("name")}"]`
208
- );
209
- t ? this.$panel.setAttribute(
210
- "aria-labelledby",
211
- t.getAttribute("name")
212
- ) : console.error("No tab found for this panel");
213
- const i = this.parentElement.querySelector(
214
- `[for="${this.name}"]`
215
- );
216
- c(i.selected) ? this.selected = !1 : this.selected = !0;
255
+ this.slot = "tabpanels", this.$panel.style.display = "none";
217
256
  }
218
- get name() {
219
- return this.getAttribute("name");
257
+ get panelId() {
258
+ return this.getAttribute("panel-id");
220
259
  }
221
- set name(t) {
222
- this.setAttribute("name", t);
260
+ set panelId(e) {
261
+ this.setAttribute("panel-id", e);
223
262
  }
224
- set selected(t) {
225
- t ? this.$panel.style.display = "block" : this.$panel.style.display = "none";
263
+ set selected(e) {
264
+ e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
265
+ }
266
+ get selected() {
267
+ return this.hasAttribute("selected");
226
268
  }
227
269
  get $panel() {
228
270
  return this.shadowRoot.querySelector('[role="tabpanel"]');
229
271
  }
230
272
  }
231
- class v extends u {
273
+ class w extends L {
232
274
  constructor() {
233
- super(), this.querySelectorAll("px-tab").forEach((t) => {
275
+ super();
276
+ }
277
+ connectedCallback() {
278
+ var e;
279
+ (e = super.connectedCallback) == null || e.call(this), this.querySelectorAll("px-tab").forEach((t) => {
234
280
  t.setAttribute("slot", "tabs");
235
281
  });
236
282
  }
237
283
  }
238
- customElements.get("px-tabs") || customElements.define("px-tabs", v);
239
- class x extends p {
284
+ customElements.get("px-tabs") || customElements.define("px-tabs", w);
285
+ class C extends S {
240
286
  constructor() {
241
287
  super();
242
288
  }
243
289
  }
244
- customElements.get("px-tab") || customElements.define("px-tab", x);
245
- class m extends f {
290
+ customElements.get("px-tab") || customElements.define("px-tab", C);
291
+ class B extends E {
246
292
  constructor() {
247
293
  super();
248
294
  }
249
295
  }
250
- customElements.get("px-tab-panel") || customElements.define("px-tab-panel", m);
296
+ customElements.get("px-tab-panel") || customElements.define("px-tab-panel", B);
251
297
  export {
252
- x as PxTab,
253
- m as PxTabPanel,
254
- v as PxTabs
298
+ C as PxTab,
299
+ B as PxTabPanel,
300
+ w as PxTabs
255
301
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-tabs",
3
- "version": "2.0.0-alpha.6",
3
+ "version": "2.0.0-alpha.61",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",