@proximus/lavender-tabs 1.0.0-alpha.16

package/dist/index.js

@@ -0,0 +1,175 @@
+import { isFalsy as r } from "@proximus/lavender-common";
+const o = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-component-default-vertical)}#panels{width:100%}div[role=tablist]{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:80vw;box-sizing:border-box}div[role=tablist] ::slotted(px-tab){background-color:var(--px-color-bg-container-weak-default)}div[role=tablist] ::slotted(px-tab[inverted=""]){background-color:var(--px-color-bg-container-weak-inverted)}div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-color-bg-action-active-default);padding-block:var(--px-padding-m);border-radius:var(--px-radius-main)!important}div[role=tablist] ::slotted(px-tab[selected=""][inverted=""]){background-color:var(--px-color-bg-action-active-inverted)}div[role=tablist] ::slotted(px-tab:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}div[role=tablist] ::slotted(px-tab:last-of-type){border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}div[role=tablist]::-webkit-scrollbar{display:none}button[role=tab]{background:none;border:none;padding:0;margin:0;cursor:pointer;height:inherit;width:inherit;padding:var(--px-padding-s);font-size:var(--px-text-size-base-mobile);font-weight:700;text-wrap:nowrap;color:var(--px-color-txt-body-default);outline:none}button[role=tab][inverted=""]{color:var(--px-color-txt-body-inverted)}@media screen and (min-width: 768px){button[role=tab]{font-size:var(--px-text-size-base-tablet)}}@media screen and (min-width: 1025px){button[role=tab]{font-size:var(--px-text-size-base-laptop)}}@media screen and (min-width: 1441px){button[role=tab]{font-size:var(--px-text-size-base-desktop)}}button[aria-selected=""]{padding-block:0;cursor:auto;color:var(--px-color-txt-primary-inverted)}button[aria-selected=""][inverted=""]{color:var(--px-color-txt-primary-default)}', i = new CSSStyleSheet();
+i.replaceSync(o);
+class l extends HTMLElement {
+  constructor() {
+    super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.template = () => `
+    <div id="container">
+      <div role="tablist" aria-labelledby="${this._label}">
+        <slot name="tabs"></slot> 
+      </div>
+      <div id="panels">
+        <slot name="tabpanels"></slot>
+      </div>
+    </div>
+  `, this.attachShadow({ mode: "open" }), this.getAttribute("label") && (this._label = this.getAttribute("label")), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
+  }
+  static get observedAttributes() {
+    return ["label", "inverted"];
+  }
+  attributeChangedCallback(t, a, e) {
+    t === "label" && (this.label = e);
+  }
+  connectedCallback() {
+    this.addEventListener("click", (t) => {
+      var a;
+      if ((a = t.target.localName) != null && a.endsWith("-tab")) {
+        this.$activePanel.selected = !1, this.$activeTab.selected = "false";
+        const e = t.target;
+        e && (e.selected = ""), this.$activePanel ? this.$activePanel.selected = !0 : console.error("No panel found for this tab");
+      }
+    }), this.addEventListener("keydown", (t) => {
+      if (t.key === "ArrowRight" || t.key === "ArrowLeft") {
+        const a = this.$nextTab, e = this.$previousTab;
+        this.$activePanel.selected = !1, this.$activeTab.selected = "false", t.key === "ArrowRight" ? a.selected = "" : t.key === "ArrowLeft" && (e.selected = ""), this.$activePanel.selected = !0;
+      }
+    });
+  }
+  get $activeTab() {
+    return this.querySelector('[selected=""][slot="tabs"]');
+  }
+  get $nextTab() {
+    const t = this.$activeTab.nextElementSibling;
+    return t.slot !== "tabs" ? this.querySelector('[slot="tabs"]') : t;
+  }
+  get $previousTab() {
+    const t = this.$activeTab.previousElementSibling;
+    return t || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
+  }
+  get $activePanel() {
+    return this.querySelector(`[name="${this.$activeTab.for}"]`);
+  }
+  get $tabList() {
+    return this.shadowRoot.querySelector('[role="tablist"]');
+  }
+  get label() {
+    return this.$tabList.getAttribute("aria-labelledby");
+  }
+  set label(t) {
+    this.$tabList.setAttribute("aria-labelledby", t);
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+}
+class n extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+    <button role="tab" aria-selected="false" type="button" tabindex="-1">
+      <span><slot></slot></span>
+    </button>
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
+  }
+  static get observedAttributes() {
+    return ["selected", "for", "name"];
+  }
+  connectedCallback() {
+    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", ""));
+  }
+  attributeChangedCallback(t, a, e) {
+    t === "selected" ? this.handleSelected(e) : t === "name" ? this.$button.setAttribute("id", e) : t === "for" && this.$button.setAttribute("aria-controls", e);
+  }
+  get $button() {
+    return this.shadowRoot.querySelector("button");
+  }
+  get selected() {
+    return this.$button.getAttribute("aria-selected");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set name(t) {
+    this.setAttribute("name", t);
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set for(t) {
+    this.setAttribute("for", t);
+  }
+  get for() {
+    return this.getAttribute("for");
+  }
+  handleSelected(t) {
+    r(t) ? (this.$button.removeAttribute("aria-selected"), this.$button.tabIndex = -1) : (this.$button.setAttribute("aria-selected", t), this.$button.removeAttribute("tabindex"), this.$button.focus());
+  }
+  set selected(t) {
+    this.setAttribute("selected", t);
+  }
+}
+class d extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+    <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
+      <slot></slot>
+    </div>
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
+  }
+  static get observedAttributes() {
+    return ["name"];
+  }
+  attributeChangedCallback(t, a, e) {
+    t === "name" && this.$panel.setAttribute("aria-labelledby", e);
+  }
+  connectedCallback() {
+    this.name || console.error("TabPanel needs a name attribute"), this.slot = "tabpanels";
+    const t = this.parentElement.querySelector(
+      `[for="${this.getAttribute("name")}"]`
+    );
+    t ? this.$panel.setAttribute(
+      "aria-labelledby",
+      t.getAttribute("name")
+    ) : console.error("No tab found for this panel");
+    const a = this.parentElement.querySelector(
+      `[for="${this.name}"]`
+    );
+    r(a.selected) ? this.selected = !1 : this.selected = !0;
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(t) {
+    this.setAttribute("name", t);
+  }
+  set selected(t) {
+    t ? this.$panel.style.display = "block" : this.$panel.style.display = "none";
+  }
+  get $panel() {
+    return this.shadowRoot.querySelector('[role="tabpanel"]');
+  }
+}
+class b extends l {
+  constructor() {
+    super(), this.querySelectorAll("px-tab").forEach((t) => {
+      t.setAttribute("slot", "tabs");
+    });
+  }
+}
+customElements.get("px-tabs") || customElements.define("px-tabs", b);
+class c extends n {
+  constructor() {
+    super();
+  }
+}
+customElements.get("px-tab") || customElements.define("px-tab", c);
+class u extends d {
+  constructor() {
+    super();
+  }
+}
+customElements.get("px-tab-panel") || customElements.define("px-tab-panel", u);
+export {
+  c as PxTab,
+  u as PxTabPanel,
+  b as PxTabs
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-tabs",
+  "version": "1.0.0-alpha.16",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "15a231df98020f83813279639a9a7712a5a5e759",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}