@oslokommune/punkt-elements 13.7.0 → 13.9.0

package/dist/tabitem-NV2fzs_-.js

@@ -0,0 +1,332 @@
+import { P as $, x as p, n as h, a as y } from "./element-CRDRygXu.js";
+import { P as C } from "./pkt-slot-controller-BPGj-LC5.js";
+import { r as w } from "./state-DS_kr2Fy.js";
+import { e as x, n as f } from "./ref-Xa5dbh--.js";
+import { o as u } from "./if-defined-BWZGb3bh.js";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let P = class extends Event {
+  constructor(t, s, i, e) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s, this.callback = i, this.subscribe = e ?? !1;
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let m = class {
+  constructor(t, s, i, e) {
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (a, r) => {
+      this.unsubscribe && (this.unsubscribe !== r && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = a, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(a, r)), this.unsubscribe = r;
+    }, this.host = t, s.context !== void 0) {
+      const a = s;
+      this.context = a.context, this.callback = a.callback, this.subscribe = a.subscribe ?? !1;
+    } else this.context = s, this.callback = i, this.subscribe = e ?? !1;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    this.dispatchRequest();
+  }
+  hostDisconnected() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+  }
+  dispatchRequest() {
+    this.host.dispatchEvent(new P(this.context, this.host, this.t, this.subscribe));
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class N {
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, s = !1) {
+    const i = s || !Object.is(t, this.o);
+    this.o = t, i && this.updateObservers();
+  }
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [s, { disposer: i }] of this.subscriptions) s(this.o, i);
+    }, t !== void 0 && (this.value = t);
+  }
+  addCallback(t, s, i) {
+    if (!i) return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: s });
+    const { disposer: e } = this.subscriptions.get(t);
+    t(this.value, e);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let _ = class extends Event {
+  constructor(t, s) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s;
+  }
+};
+class g extends N {
+  constructor(t, s, i) {
+    var e, a;
+    super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (r) => {
+      if (r.context !== this.context) return;
+      const n = r.contextTarget ?? r.composedPath()[0];
+      n !== this.host && (r.stopPropagation(), this.addCallback(r.callback, n, r.subscribe));
+    }, this.onProviderRequest = (r) => {
+      if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
+      const n = /* @__PURE__ */ new Set();
+      for (const [v, { consumerHost: k }] of this.subscriptions) n.has(v) || (n.add(v), k.dispatchEvent(new P(this.context, k, v, !0)));
+      r.stopPropagation();
+    }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), (a = (e = this.host).addController) == null || a.call(e, this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new _(this.context, this.host));
+  }
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function R({ context: o }) {
+  return (t, s) => {
+    const i = /* @__PURE__ */ new WeakMap();
+    if (typeof s == "object") return { get() {
+      return t.get.call(this);
+    }, set(e) {
+      return i.get(this).setValue(e), t.set.call(this, e);
+    }, init(e) {
+      return i.set(this, new g(this, { context: o, initialValue: e })), e;
+    } };
+    {
+      t.constructor.addInitializer(((r) => {
+        i.set(r, new g(r, { context: o }));
+      }));
+      const e = Object.getOwnPropertyDescriptor(t, s);
+      let a;
+      if (e === void 0) {
+        const r = /* @__PURE__ */ new WeakMap();
+        a = { get() {
+          return r.get(this);
+        }, set(n) {
+          i.get(this).setValue(n), r.set(this, n);
+        }, configurable: !0, enumerable: !0 };
+      } else {
+        const r = e.set;
+        a = { ...e, set(n) {
+          i.get(this).setValue(n), r == null || r.call(this, n);
+        } };
+      }
+      return void Object.defineProperty(t, s, a);
+    }
+  };
+}
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function A({ context: o, subscribe: t }) {
+  return (s, i) => {
+    typeof i == "object" ? i.addInitializer((function() {
+      new m(this, { context: o, callback: (e) => {
+        s.set.call(this, e);
+      }, subscribe: t });
+    })) : s.constructor.addInitializer(((e) => {
+      new m(e, { context: o, callback: (a) => {
+        e[i] = a;
+      }, subscribe: t });
+    }));
+  };
+}
+const S = Symbol("pkt-tabs-context");
+var O = Object.defineProperty, T = Object.getOwnPropertyDescriptor, d = (o, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? T(t, s) : t, a = o.length - 1, r; a >= 0; a--)
+    (r = o[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
+  return i && e && O(t, s, e), e;
+};
+let b = class extends $ {
+  constructor() {
+    super(), this.arrowNav = !0, this.disableArrowNav = !1, this.tabRefs = [], this.tabCount = 0, this.defaultSlot = x(), this.context = {
+      useArrowNav: this.useArrowNav,
+      registerTab: this.registerTab.bind(this),
+      handleClick: this.handleClick.bind(this),
+      handleKeyUp: this.handleKeyUp.bind(this)
+    }, this.slotController = new C(this, this.defaultSlot);
+  }
+  get useArrowNav() {
+    return this.arrowNav && !this.disableArrowNav;
+  }
+  // Update context when properties change
+  updated(o) {
+    (o.has("arrowNav") || o.has("disableArrowNav")) && (this.context = {
+      ...this.context,
+      useArrowNav: this.useArrowNav
+    });
+  }
+  registerTab(o, t) {
+    this.tabRefs[t] = o, this.tabCount = Math.max(this.tabCount, t + 1);
+  }
+  handleClick(o) {
+    this.dispatchEvent(
+      new CustomEvent("tab-selected", {
+        detail: { index: o },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyUp(o, t) {
+    var s, i;
+    this.useArrowNav && (o.code === "ArrowLeft" && t !== 0 && ((s = this.tabRefs[t - 1]) == null || s.focus()), o.code === "ArrowRight" && t < this.tabCount - 1 && ((i = this.tabRefs[t + 1]) == null || i.focus()), (o.code === "ArrowDown" || o.code === "Space") && this.dispatchEvent(
+      new CustomEvent("tab-selected", {
+        detail: { index: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  render() {
+    const o = this.useArrowNav ? "tablist" : "navigation";
+    return p`
+      <div class="pkt-tabs">
+        <div class="pkt-tabs__list" role=${o} ${f(this.defaultSlot)}></div>
+      </div>
+    `;
+  }
+};
+d([
+  h({ type: Boolean, reflect: !0, attribute: "arrow-nav" })
+], b.prototype, "arrowNav", 2);
+d([
+  h({ type: Boolean, reflect: !0, attribute: "disable-arrow-nav" })
+], b.prototype, "disableArrowNav", 2);
+d([
+  w()
+], b.prototype, "tabRefs", 2);
+d([
+  w()
+], b.prototype, "tabCount", 2);
+d([
+  R({ context: S }),
+  w()
+], b.prototype, "context", 2);
+b = d([
+  y("pkt-tabs")
+], b);
+const M = b;
+var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (o, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? q(t, s) : t, a = o.length - 1, r; a >= 0; a--)
+    (r = o[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
+  return i && e && j(t, s, e), e;
+};
+let c = class extends $ {
+  constructor() {
+    super(), this.active = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = x(), this.defaultSlot = x(), this.slotController = new C(this, this.defaultSlot);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateComplete.then(() => {
+      this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index);
+    });
+  }
+  handleClick() {
+    this.context && this.context.handleClick(this.index);
+  }
+  handleKeyUp(o) {
+    this.context && this.context.handleKeyUp(o, this.index);
+  }
+  render() {
+    var r;
+    const o = ((r = this.context) == null ? void 0 : r.useArrowNav) ?? !0, t = this.active ? "active" : "", s = o ? "tab" : void 0, i = o ? this.active : void 0, e = this.active || !o ? void 0 : -1, a = p`
+      ${this.icon ? p`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ""}
+      <span ${f(this.defaultSlot)}></span>
+      ${this.tag ? p`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
+    `;
+    return this.href ? p`
+        <a
+          ${f(this.elementRef)}
+          href=${this.href}
+          class="pkt-tabs__link ${t}"
+          role=${u(s)}
+          aria-selected=${u(i)}
+          aria-controls=${u(this.controls || void 0)}
+          tabindex=${u(e)}
+          @click=${this.handleClick}
+          @keyup=${this.handleKeyUp}
+        >
+          ${a}
+        </a>
+      ` : p`
+      <button
+        ${f(this.elementRef)}
+        type="button"
+        class="pkt-tabs__button pkt-link-button ${t}"
+        role=${u(s)}
+        aria-selected=${u(i)}
+        aria-controls=${u(this.controls || void 0)}
+        tabindex=${u(e)}
+        @click=${this.handleClick}
+        @keyup=${this.handleKeyUp}
+      >
+        ${a}
+      </button>
+    `;
+  }
+};
+l([
+  h({ type: Boolean, reflect: !0 })
+], c.prototype, "active", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "href", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "icon", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "controls", 2);
+l([
+  h({ type: String, reflect: !0 })
+], c.prototype, "tag", 2);
+l([
+  h({ type: String, reflect: !0, attribute: "tag-skin" })
+], c.prototype, "tagSkin", 2);
+l([
+  h({ type: Number, reflect: !0 })
+], c.prototype, "index", 2);
+l([
+  A({ context: S, subscribe: !0 }),
+  h({ attribute: !1 })
+], c.prototype, "context", 2);
+c = l([
+  y("pkt-tab-item")
+], c);
+const B = c;
+export {
+  M as P,
+  B as a
+};

package/dist/tabs.d.ts

@@ -0,0 +1 @@
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.7.0",
+  "version": "13.9.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,6 +29,7 @@
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
     "@lit-labs/router": "^0.1.3",
+    "@lit/context": "^1.1.6",
     "@types/node": "^20.17.30",
     "date-fns": "^4.1.0",
     "dialog-polyfill": "^0.5.6",
@@ -43,7 +44,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.6.3",
-    "@oslokommune/punkt-css": "^13.6.15",
+    "@oslokommune/punkt-css": "^13.9.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
@@ -80,5 +81,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "cfe27c04046718ff79f60e3babba60062296f05b"
+  "gitHead": "8bafc95c82ea1e49d1d1811b573baf02de2ef3d5"
 }

package/src/components/icon/icon.ts

@@ -71,7 +71,7 @@ export class PktIcon extends PktElement<Props> {
   name: PktIconName = ''
 
   @property({ type: SVGElement })
-  private icon: any = unsafeSVG(errorSvg)
+  private icon: ReturnType<typeof unsafeSVG> = unsafeSVG(errorSvg)
 
   @property({ type: Array, noAccessor: true })
   private _updatedProps: string[] = []

package/src/components/index.ts

@@ -25,6 +25,7 @@ export { PktRadioButton } from '@/components/radiobutton'
 // TODO: Avklar om RadioButton kan eksporteres som *kun* PktRadiobutton
 export { PktRadioButton as PktRadiobutton } from '@/components/radiobutton'
 export { PktTag } from '@/components/tag'
+export { PktTabs, PktTabItem } from '@/components/tabs'
 export { PktTextarea } from '@/components/textarea'
 export { PktTextinput } from '@/components/textinput'
 export { PktSelect } from '@/components/select'
@@ -62,6 +63,8 @@ export type { IPktHeading, TPktHeadingSize, TPktHeadingLevel } from '@/component
 
 export type { TTagSkin, TTagType } from '@/components/tag'
 
+export type { IPktTabs, IPktTabItem, TSkin as TTabItemSkin } from '@/components/tabs'
+
 export type { TSelectOption } from '@/components/select'
 
 export type { IPktBackLink } from '@/components/backlink'

package/src/components/tabs/index.ts

@@ -0,0 +1,8 @@
+import PktTabs from './tabs'
+import type { IPktTabs } from './tabs'
+import PktTabItem from './tabitem'
+import type { IPktTabItem, TSkin } from './tabitem'
+
+export { PktTabs, PktTabItem }
+export type { IPktTabs, IPktTabItem, TSkin }
+export default PktTabs

package/src/components/tabs/tabitem.ts

@@ -0,0 +1,117 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { tabsContext, type TabsContext } from './tabs-context'
+
+export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
+
+export interface IPktTabItem {
+  active?: boolean
+  href?: string
+  icon?: string
+  controls?: string
+  tag?: string
+  tagSkin?: TSkin
+  index?: number
+}
+
+@customElement('pkt-tab-item')
+export class PktTabItem extends PktElement<IPktTabItem> implements IPktTabItem {
+  @property({ type: Boolean, reflect: true }) active: boolean = false
+  @property({ type: String, reflect: true }) href: string = ''
+  @property({ type: String, reflect: true }) icon: string = ''
+  @property({ type: String, reflect: true }) controls: string = ''
+  @property({ type: String, reflect: true }) tag: string = ''
+  @property({ type: String, reflect: true, attribute: 'tag-skin' }) tagSkin: TSkin = 'blue'
+  @property({ type: Number, reflect: true }) index: number = 0
+
+  // Consume context from parent pkt-tabs
+  @consume({ context: tabsContext, subscribe: true })
+  @property({ attribute: false })
+  context?: TabsContext
+
+  elementRef: Ref<HTMLAnchorElement | HTMLButtonElement> = createRef()
+  defaultSlot: Ref<HTMLElement> = createRef()
+  slotController!: PktSlotController
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    // Wait for element to be fully initialized
+    this.updateComplete.then(() => {
+      if (this.elementRef.value && this.context) {
+        this.context.registerTab(this.elementRef.value, this.index)
+      }
+    })
+  }
+
+  private handleClick() {
+    if (this.context) {
+      this.context.handleClick(this.index)
+    }
+  }
+
+  private handleKeyUp(event: KeyboardEvent) {
+    if (this.context) {
+      this.context.handleKeyUp(event, this.index)
+    }
+  }
+
+  render() {
+    const useArrowNav = this.context?.useArrowNav ?? true
+    const commonClasses = this.active ? 'active' : ''
+    const role = useArrowNav ? 'tab' : undefined
+    const ariaSelected = useArrowNav ? this.active : undefined
+    const tabIndex = this.active || !useArrowNav ? undefined : -1
+
+    const content = html`
+      ${this.icon ? html`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ''}
+      <span ${ref(this.defaultSlot)}></span>
+      ${this.tag ? html`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ''}
+    `
+
+    if (this.href) {
+      return html`
+        <a
+          ${ref(this.elementRef)}
+          href=${this.href}
+          class="pkt-tabs__link ${commonClasses}"
+          role=${ifDefined(role)}
+          aria-selected=${ifDefined(ariaSelected)}
+          aria-controls=${ifDefined(this.controls || undefined)}
+          tabindex=${ifDefined(tabIndex)}
+          @click=${this.handleClick}
+          @keyup=${this.handleKeyUp}
+        >
+          ${content}
+        </a>
+      `
+    }
+
+    return html`
+      <button
+        ${ref(this.elementRef)}
+        type="button"
+        class="pkt-tabs__button pkt-link-button ${commonClasses}"
+        role=${ifDefined(role)}
+        aria-selected=${ifDefined(ariaSelected)}
+        aria-controls=${ifDefined(this.controls || undefined)}
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleClick}
+        @keyup=${this.handleKeyUp}
+      >
+        ${content}
+      </button>
+    `
+  }
+}
+
+export default PktTabItem

package/src/components/tabs/tabs-context.ts

@@ -0,0 +1,25 @@
+import { createContext } from '@lit/context'
+
+export interface TabsContext {
+  /**
+   * Whether arrow navigation is enabled (computed from arrowNav && !disableArrowNav)
+   */
+  useArrowNav: boolean
+
+  /**
+   * Register a tab item with the parent tabs container
+   */
+  registerTab: (element: HTMLElement, index: number) => void
+
+  /**
+   * Handle click event from a tab item
+   */
+  handleClick: (index: number) => void
+
+  /**
+   * Handle keyboard event from a tab item
+   */
+  handleKeyUp: (event: KeyboardEvent, index: number) => void
+}
+
+export const tabsContext = createContext<TabsContext>(Symbol('pkt-tabs-context'))