@proximus/lavender-tabs 2.0.0-alpha.3 → 2.0.0-alpha.30

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 +5 -5
  3. package/dist/TabPanel.d.ts +2 -2
  4. package/dist/Tabs.d.ts +9 -5
  5. package/dist/index.es.js +97 -73
  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
@@ -5,13 +5,13 @@ export declare class Tab extends HTMLElement {
5
5
  constructor();
6
6
  connectedCallback(): void;
7
7
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
8
- get $button(): HTMLButtonElement;
8
+ get $tabBtn(): HTMLSpanElement;
9
9
  get selected(): boolean;
10
10
  set selected(value: boolean);
11
11
  get inverted(): boolean;
12
- set name(value: string);
13
- get name(): string;
14
- set for(value: string);
15
- get for(): string;
12
+ set id(value: string);
13
+ get id(): string;
14
+ set target(value: string);
15
+ get target(): string;
16
16
  handleSelected(value: string): void;
17
17
  }
package/dist/TabPanel.d.ts CHANGED
@@ -4,8 +4,8 @@ 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
10
  get $panel(): HTMLElement;
11
11
  }
package/dist/Tabs.d.ts CHANGED
@@ -2,7 +2,6 @@ import '@proximus/lavender-button-icon';
2
2
  import { Tab } from './Tab.ts';
3
3
  import { TabPanel } from './TabPanel.ts';
4
4
  export declare class Tabs extends HTMLElement {
5
- private readonly _label;
6
5
  internals: ElementInternals;
7
6
  tabsConnected: number;
8
7
  template: () => string;
@@ -22,10 +21,15 @@ export declare class Tabs extends HTMLElement {
22
21
  get $activePanel(): TabPanel;
23
22
  get $tabList(): HTMLElement;
24
23
  get $prefixButton(): HTMLButtonElement;
24
+ get $prefixButtonIcon(): HTMLElement;
25
25
  get $suffixButton(): HTMLButtonElement;
26
- get label(): string;
27
- set label(value: string);
26
+ get $suffixButtonIcon(): HTMLElement;
27
+ get tablistAriaLabelledby(): string;
28
+ set tablistAriaLabelledby(value: string);
28
29
  get inverted(): boolean;
29
- get ariaLabelNext(): string;
30
- get ariaLabelPrevious(): string;
30
+ set inverted(value: boolean);
31
+ get nextAriaLabel(): string;
32
+ set nextAriaLabel(value: string);
33
+ get previousAriaLabel(): string;
34
+ set previousAriaLabel(value: string);
31
35
  }
package/dist/index.es.js CHANGED
@@ -5,16 +5,16 @@ l.replaceSync(b);
5
5
  class u extends HTMLElement {
6
6
  constructor() {
7
7
  var t;
8
- super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
8
+ super(), this.tabsConnected = 0, this.template = () => `
9
9
  <div id="container">
10
10
  <div id="tab-container">
11
- <px-button-icon id="previous" aria-hidden="true">
11
+ <px-button-icon id="previous">
12
12
  <px-icon name="chevron_left" from="lavender"></px-icon>
13
13
  </px-button-icon>
14
- <div id="tablist" aria-labelledby="${this._label}">
14
+ <div id="tablist">
15
15
  <slot name="tabs"></slot>
16
16
  </div>
17
- <px-button-icon id="next" aria-hidden="true">
17
+ <px-button-icon id="next" >
18
18
  <px-icon name="chevron_right" from="lavender"></px-icon>
19
19
  </px-button-icon>
20
20
  </div>
@@ -22,7 +22,7 @@ class u 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.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener("px-tab-connected", () => {
25
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.addEventListener("px-tab-connected", () => {
26
26
  this.tabsConnected++, this.handleNextPreviousDisplay();
27
27
  }), window.addEventListener("resize", () => {
28
28
  this.handleNextPreviousDisplay();
@@ -31,36 +31,41 @@ class u extends HTMLElement {
31
31
  });
32
32
  }
33
33
  static get observedAttributes() {
34
- return ["label", "inverted", "aria-label-next", "aria-label-previous"];
34
+ return [
35
+ "tablist-aria-labelledby",
36
+ "inverted",
37
+ "next-aria-label",
38
+ "previous-aria-label"
39
+ ];
35
40
  }
36
41
  attributeChangedCallback(t, i, e) {
37
42
  switch (t) {
38
- case "label":
39
- this.label = e;
43
+ case "tablist-aria-labelledby":
44
+ this.$tabList.setAttribute("aria-labelledby", e);
40
45
  break;
41
- case "aria-label-next":
42
- this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", e || "Next tab");
46
+ case "next-aria-label":
47
+ this.hasAttribute("hide-controls") || this.$suffixButtonIcon.setAttribute("aria-label", e);
43
48
  break;
44
- case "aria-label-previous":
45
- this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute(
46
- "aria-label",
47
- e || "Previous tab"
48
- );
49
+ case "previous-aria-label":
50
+ this.hasAttribute("hide-controls") || this.$prefixButtonIcon.setAttribute("aria-label", e);
49
51
  break;
50
52
  }
51
53
  }
52
54
  connectedCallback() {
53
55
  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")) {
56
+ this.getAttribute("tablist-aria-labelledby") && this.$tabList.setAttribute(
57
+ "aria-labelledby",
58
+ this.getAttribute("tablist-aria-labelledby")
59
+ ), this.$tabList.role = "tablist", this.checkNextPreviousButtonsVisibility(), this.addEventListener("click", (s) => {
60
+ var r;
61
+ if ((r = s.target.localName) != null && r.endsWith("-tab")) {
57
62
  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");
63
+ const o = s.target;
64
+ o && (o.selected = !0), this.$activePanel && (this.$activePanel.selected = !0);
60
65
  }
61
66
  }), 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");
67
+ var r, o;
68
+ (s.key === "ArrowRight" || s.key === "ArrowLeft") && ((o = (r = document.activeElement) == null ? void 0 : r.localName) != null && o.endsWith("-tab")) && this.navigateToTab(s.key === "ArrowRight" ? "right" : "left");
64
69
  }), (t = this.$prefixButton) == null || t.addEventListener("click", (s) => {
65
70
  s.stopPropagation(), this.$tabList.scrollTo({
66
71
  left: this.$tabList.scrollLeft - 100,
@@ -71,12 +76,12 @@ class u extends HTMLElement {
71
76
  left: this.$tabList.scrollLeft + 100,
72
77
  behavior: "smooth"
73
78
  });
74
- }), this.inverted && ((e = this.$prefixButton) == null || e.setAttribute("inverted", ""), (n = this.$suffixButton) == null || n.setAttribute("inverted", "")), this.hasAttribute("hide-controls") || (this.$suffixButton.setAttribute(
79
+ }), this.inverted && ((e = this.$prefixButton) == null || e.setAttribute("inverted", ""), (n = this.$suffixButton) == null || n.setAttribute("inverted", "")), this.hasAttribute("hide-controls") || (this.$suffixButtonIcon.setAttribute(
75
80
  "aria-label",
76
- this.ariaLabelNext || "Next tab"
77
- ), this.$prefixButton.setAttribute(
81
+ this.nextAriaLabel || "Next tab"
82
+ ), this.$prefixButtonIcon.setAttribute(
78
83
  "aria-label",
79
- this.ariaLabelPrevious || "Previous tab"
84
+ this.previousAriaLabel || "Previous tab"
80
85
  ));
81
86
  }
82
87
  checkNextPreviousButtonsVisibility() {
@@ -110,7 +115,9 @@ class u extends HTMLElement {
110
115
  return t || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
111
116
  }
112
117
  get $activePanel() {
113
- return this.querySelector(`[name="${this.$activeTab.for}"]`);
118
+ return this.querySelector(
119
+ `[panel-id="${this.$activeTab.target}"]`
120
+ );
114
121
  }
115
122
  get $tabList() {
116
123
  return this.shadowRoot.querySelector("#tablist");
@@ -118,49 +125,62 @@ class u extends HTMLElement {
118
125
  get $prefixButton() {
119
126
  return this.shadowRoot.querySelector("#previous");
120
127
  }
128
+ get $prefixButtonIcon() {
129
+ return this.shadowRoot.querySelector("#previous px-icon");
130
+ }
121
131
  get $suffixButton() {
122
132
  return this.shadowRoot.querySelector("#next");
123
133
  }
124
- get label() {
134
+ get $suffixButtonIcon() {
135
+ return this.shadowRoot.querySelector("#next px-icon");
136
+ }
137
+ get tablistAriaLabelledby() {
125
138
  return this.$tabList.getAttribute("aria-labelledby");
126
139
  }
127
- set label(t) {
140
+ set tablistAriaLabelledby(t) {
128
141
  this.$tabList.setAttribute("aria-labelledby", t);
129
142
  }
130
143
  get inverted() {
131
144
  return this.hasAttribute("inverted");
132
145
  }
133
- get ariaLabelNext() {
134
- return this.getAttribute("aria-label-next");
146
+ set inverted(t) {
147
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
148
+ }
149
+ get nextAriaLabel() {
150
+ return this.getAttribute("next-aria-label");
151
+ }
152
+ set nextAriaLabel(t) {
153
+ this.setAttribute("next-aria-label", t);
135
154
  }
136
- get ariaLabelPrevious() {
137
- return this.getAttribute("aria-label-previous");
155
+ get previousAriaLabel() {
156
+ return this.getAttribute("previous-aria-label");
157
+ }
158
+ set previousAriaLabel(t) {
159
+ this.setAttribute("previous-aria-label", t);
138
160
  }
139
161
  }
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();
162
+ const h = "*{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)}}", d = new CSSStyleSheet();
141
163
  d.replaceSync(h);
142
164
  class p extends HTMLElement {
143
165
  constructor() {
144
166
  var t;
145
167
  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}`;
168
+ <div class="tab-btn"><slot></slot></div>
169
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
150
170
  }
151
171
  static get observedAttributes() {
152
- return ["selected", "for", "name"];
172
+ return ["selected", "target", "id"];
153
173
  }
154
174
  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(
175
+ this.slot = "tabs", this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$tabBtn.setAttribute("inverted", "")), this.dispatchEvent(
156
176
  new CustomEvent("px-tab-connected", { bubbles: !0, composed: !0 })
157
177
  );
158
178
  }
159
179
  attributeChangedCallback(t, i, e) {
160
- t === "selected" ? this.handleSelected(e) : t === "name" ? this.$button.setAttribute("id", e) : t === "for" && this.setAttribute("aria-controls", e);
180
+ t === "selected" ? this.handleSelected(e) : t === "target" && this.setAttribute("aria-controls", e);
161
181
  }
162
- get $button() {
163
- return this.shadowRoot.querySelector("button");
182
+ get $tabBtn() {
183
+ return this.shadowRoot.querySelector(".tab-btn");
164
184
  }
165
185
  get selected() {
166
186
  return !!this.hasAttribute("selected");
@@ -171,55 +191,55 @@ class p extends HTMLElement {
171
191
  get inverted() {
172
192
  return this.hasAttribute("inverted");
173
193
  }
174
- set name(t) {
175
- this.setAttribute("name", t);
194
+ set id(t) {
195
+ this.setAttribute("id", t);
176
196
  }
177
- get name() {
178
- return this.getAttribute("name");
197
+ get id() {
198
+ return this.getAttribute("id");
179
199
  }
180
- set for(t) {
181
- this.setAttribute("for", t);
200
+ set target(t) {
201
+ this.setAttribute("target", t);
182
202
  }
183
- get for() {
184
- return this.getAttribute("for");
203
+ get target() {
204
+ return this.getAttribute("target");
185
205
  }
186
206
  handleSelected(t) {
187
207
  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
208
  }
189
209
  }
190
- class f extends HTMLElement {
210
+ class v extends HTMLElement {
191
211
  constructor() {
192
212
  super(), this.template = () => `
193
- <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
213
+ <div role="tabpanel" tabindex="0">
194
214
  <slot></slot>
195
215
  </div>
196
216
  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l];
197
217
  }
198
218
  static get observedAttributes() {
199
- return ["name"];
219
+ return ["id"];
200
220
  }
201
221
  attributeChangedCallback(t, i, e) {
202
- t === "name" && this.$panel.setAttribute("aria-labelledby", e);
222
+ t === "panel-id" && this.$panel.setAttribute("id", e);
203
223
  }
204
224
  connectedCallback() {
205
- this.name || console.error("TabPanel needs a name attribute"), this.slot = "tabpanels";
225
+ this.slot = "tabpanels", this.panelId && this.$panel.setAttribute("id", this.panelId);
206
226
  const t = this.parentElement.querySelector(
207
- `[for="${this.getAttribute("name")}"]`
227
+ `[target="${this.panelId}"]`
208
228
  );
209
- t ? this.$panel.setAttribute(
229
+ t && this.$panel.setAttribute(
210
230
  "aria-labelledby",
211
- t.getAttribute("name")
212
- ) : console.error("No tab found for this panel");
231
+ t.getAttribute("id")
232
+ );
213
233
  const i = this.parentElement.querySelector(
214
- `[for="${this.name}"]`
234
+ `[target="${this.panelId}"]`
215
235
  );
216
236
  c(i.selected) ? this.selected = !1 : this.selected = !0;
217
237
  }
218
- get name() {
219
- return this.getAttribute("name");
238
+ get panelId() {
239
+ return this.getAttribute("panel-id");
220
240
  }
221
- set name(t) {
222
- this.setAttribute("name", t);
241
+ set panelId(t) {
242
+ this.setAttribute("panel-id", t);
223
243
  }
224
244
  set selected(t) {
225
245
  t ? this.$panel.style.display = "block" : this.$panel.style.display = "none";
@@ -228,28 +248,32 @@ class f extends HTMLElement {
228
248
  return this.shadowRoot.querySelector('[role="tabpanel"]');
229
249
  }
230
250
  }
231
- class v extends u {
251
+ class f extends u {
232
252
  constructor() {
233
- super(), this.querySelectorAll("px-tab").forEach((t) => {
234
- t.setAttribute("slot", "tabs");
253
+ super();
254
+ }
255
+ connectedCallback() {
256
+ var t;
257
+ (t = super.connectedCallback) == null || t.call(this), this.querySelectorAll("px-tab").forEach((i) => {
258
+ i.setAttribute("slot", "tabs");
235
259
  });
236
260
  }
237
261
  }
238
- customElements.get("px-tabs") || customElements.define("px-tabs", v);
262
+ customElements.get("px-tabs") || customElements.define("px-tabs", f);
239
263
  class x extends p {
240
264
  constructor() {
241
265
  super();
242
266
  }
243
267
  }
244
268
  customElements.get("px-tab") || customElements.define("px-tab", x);
245
- class m extends f {
269
+ class g extends v {
246
270
  constructor() {
247
271
  super();
248
272
  }
249
273
  }
250
- customElements.get("px-tab-panel") || customElements.define("px-tab-panel", m);
274
+ customElements.get("px-tab-panel") || customElements.define("px-tab-panel", g);
251
275
  export {
252
276
  x as PxTab,
253
- m as PxTabPanel,
254
- v as PxTabs
277
+ g as PxTabPanel,
278
+ f as PxTabs
255
279
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-tabs",
3
- "version": "2.0.0-alpha.3",
3
+ "version": "2.0.0-alpha.30",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",