@oslokommune/punkt-elements 13.22.0 → 14.0.0

package/src/components/header/header-user-menu.ts

@@ -0,0 +1,215 @@
+import { PktElement } from '@/base-elements/element'
+import { html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import {
+  User,
+  Representing,
+  UserMenuItem,
+  TInternalMenuItem,
+  convertUserMenuItem,
+  Booleanish,
+  booleanishConverter,
+} from './types'
+
+import '@/components/icon'
+import '@/components/link'
+
+export interface IPktHeaderUserMenu {
+  user: User
+  formattedLastLoggedIn?: string
+  representing?: Representing
+  userMenu?: UserMenuItem[]
+  canChangeRepresentation?: Booleanish
+  logoutOnClick?: Booleanish
+}
+
+@customElement('pkt-header-user-menu')
+export class PktHeaderUserMenu
+  extends PktElement<IPktHeaderUserMenu>
+  implements IPktHeaderUserMenu
+{
+  @property({ type: Object }) user!: User
+  @property({ type: String, attribute: 'formatted-last-logged-in' }) formattedLastLoggedIn?: string
+  @property({ type: Object }) representing?: Representing
+  @property({ type: Array, attribute: 'user-menu' }) userMenu?: UserMenuItem[]
+  @property({
+    type: Boolean,
+    attribute: 'can-change-representation',
+    converter: booleanishConverter,
+  })
+  canChangeRepresentation: Booleanish = false
+  @property({ type: Boolean, attribute: 'logout-on-click', converter: booleanishConverter })
+  logoutOnClick: Booleanish = false
+
+  private handleChangeRepresentation() {
+    this.dispatchEvent(
+      new CustomEvent('change-representation', {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private handleLogout() {
+    this.dispatchEvent(
+      new CustomEvent('log-out', {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private handleMenuItemClick(item: TInternalMenuItem) {
+    if ('onClick' in item && typeof item.onClick === 'function') {
+      item.onClick()
+    }
+  }
+
+  private renderLinkOrButton(item: TInternalMenuItem, className?: string) {
+    const isLink = 'href' in item
+    const classes = classMap({
+      'pkt-user-menu__link': true,
+      'pkt-link-button': !isLink,
+      'pkt-link': !isLink,
+      'pkt-link--icon-left': !isLink,
+      [className || '']: !!className,
+    })
+
+    if (isLink) {
+      return html`
+        <pkt-link
+          icon-name=${item.iconName || nothing}
+          href=${item.href}
+          aria-hidden="true"
+          class="pkt-user-menu__link ${className || ''}"
+        >
+          ${item.title}
+        </pkt-link>
+      `
+    }
+
+    return html`
+      <button class=${classes} type="button" @click=${() => this.handleMenuItemClick(item)}>
+        ${item.iconName
+          ? html`<pkt-icon
+              name=${item.iconName}
+              class="pkt-link__icon"
+              aria-hidden="true"
+            ></pkt-icon>`
+          : nothing}
+        ${item.title}
+      </button>
+    `
+  }
+
+  private renderLinkSection(links: TInternalMenuItem[]) {
+    return html`
+      <ul class="pkt-user-menu__sublist">
+        ${links.map(
+          (item) => html`
+            <li class="pkt-user-menu__subitem">${this.renderLinkOrButton(item)}</li>
+          `,
+        )}
+      </ul>
+    `
+  }
+
+  render() {
+    const internalMenuItems = this.userMenu?.map(convertUserMenuItem)
+
+    return html`
+      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
+        <ul class="pkt-user-menu__list">
+          <!-- User section -->
+          ${this.user
+            ? html`
+                <li class="pkt-user-menu__item">
+                  <div class="pkt-user-menu__label">Pålogget som</div>
+                  <div class="pkt-user-menu__name" translate="no">${this.user.name}</div>
+                  ${this.formattedLastLoggedIn
+                    ? html`
+                        <div class="pkt-user-menu__last-logged-in">
+                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
+                        </div>
+                      `
+                    : nothing}
+                </li>
+              `
+            : nothing}
+
+          <!-- User menu items -->
+          ${internalMenuItems && internalMenuItems.length > 0
+            ? html`
+                <li class="pkt-user-menu__item">${this.renderLinkSection(internalMenuItems)}</li>
+              `
+            : nothing}
+
+          <!-- Representing section -->
+          ${this.representing
+            ? html`
+                <li class="pkt-user-menu__item">
+                  <div class="pkt-user-menu__label">Representerer</div>
+                  <div class="pkt-user-menu__name" translate="no">${this.representing.name}</div>
+                  ${this.representing.orgNumber
+                    ? html`<div class="pkt-user-menu__org-number">
+                        Org.nr. ${this.representing.orgNumber}
+                      </div>`
+                    : nothing}
+                  ${this.canChangeRepresentation
+                    ? html`
+                        <ul class="pkt-user-menu__sublist mt-size-16">
+                          <li class="pkt-user-menu__subitem">
+                            ${this.renderLinkOrButton({
+                              title: 'Endre organisasjon',
+                              iconName: 'cogwheel',
+                              onClick: () => this.handleChangeRepresentation(),
+                            })}
+                          </li>
+                        </ul>
+                      `
+                    : nothing}
+                </li>
+              `
+            : nothing}
+
+          <!-- Change representation without representing object -->
+          ${!this.representing && this.canChangeRepresentation
+            ? html`
+                <li class="pkt-user-menu__item">
+                  <ul class="pkt-user-menu__sublist">
+                    <li class="pkt-user-menu__subitem">
+                      ${this.renderLinkOrButton({
+                        title: 'Endre organisasjon',
+                        iconName: 'cogwheel',
+                        onClick: () => this.handleChangeRepresentation(),
+                      })}
+                    </li>
+                  </ul>
+                </li>
+              `
+            : nothing}
+
+          <!-- Logout -->
+          ${this.logoutOnClick
+            ? html`
+                <li class="pkt-user-menu__item">
+                  ${this.renderLinkOrButton({
+                    title: 'Logg ut',
+                    iconName: 'exit',
+                    onClick: () => this.handleLogout(),
+                  })}
+                </li>
+              `
+            : nothing}
+        </ul>
+      </nav>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pkt-header-user-menu': PktHeaderUserMenu
+  }
+}

package/src/components/header/header-utils.ts

@@ -0,0 +1,20 @@
+/**
+ * Format a Date or ISO string to a readable Norwegian date format
+ * @param date - Date object or ISO date string
+ * @returns Formatted date string like "22. januar 2026, 14:30"
+ */
+export const formatLastLoggedIn = (date: Date | string | undefined): string | undefined => {
+  if (!date) return undefined
+
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+
+  if (isNaN(dateObj.getTime())) return undefined
+
+  return dateObj.toLocaleDateString('nb-NO', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}

package/src/components/header/header.ts

@@ -0,0 +1,141 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { html, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import {
+  User,
+  Representing,
+  UserMenuItem,
+  TPktHeaderMenu,
+  TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+  IPktHeader,
+  Booleanish,
+  booleanishConverter,
+} from './types'
+
+import './header-service'
+
+/**
+ * PktHeader - Main header component for Oslo kommune services
+ *
+ * This component provides a complete header solution with:
+ * - Logo and service name
+ * - User menu with login/logout functionality
+ * - Search functionality
+ * - Responsive mobile menu
+ * - Fixed positioning with scroll-to-hide
+ *
+ * TODO: Add `type` prop to switch between `service` and `global` header types
+ */
+@customElement('pkt-header')
+export class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
+  defaultSlot: Ref<HTMLElement> = createRef()
+  slotController!: PktSlotController
+
+  @property({ type: String, attribute: 'service-name' }) serviceName?: string
+  @property({ type: String, attribute: 'service-link' }) serviceLink?: string
+  @property({ type: String, attribute: 'logo-link' }) logoLink?: string
+  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder = 'Søk'
+  @property({ type: String, attribute: 'search-value' }) searchValue = ''
+  @property({ type: Number, attribute: 'mobile-breakpoint' }) mobileBreakpoint: number = 768
+  @property({ type: Number, attribute: 'tablet-breakpoint' }) tabletBreakpoint: number = 1280
+  @property({ type: String, attribute: 'opened-menu' }) openedMenu: TPktHeaderMenu = 'none'
+  @property({ type: String, attribute: 'log-out-button-placement' })
+  logOutButtonPlacement: TLogOutButtonPlacement = 'none'
+  @property({ type: String }) position: THeaderPosition = 'fixed'
+  @property({ type: String, attribute: 'scroll-behavior' }) scrollBehavior: THeaderScrollBehavior =
+    'hide'
+
+  @property({ type: Boolean, attribute: 'hide-logo', converter: booleanishConverter })
+  hideLogo: Booleanish = false
+  @property({ type: Boolean, converter: booleanishConverter }) compact: Booleanish = false
+  @property({ type: Boolean, attribute: 'show-search', converter: booleanishConverter })
+  showSearch: Booleanish = false
+  @property({
+    type: Boolean,
+    attribute: 'can-change-representation',
+    converter: booleanishConverter,
+  })
+  canChangeRepresentation: Booleanish = false
+  @property({ type: Boolean, attribute: 'has-log-out', converter: booleanishConverter })
+  hasLogOut: Booleanish = false
+
+  @property({ type: Object }) user?: User
+  @property({ type: Array, attribute: 'user-menu' }) userMenu?: UserMenuItem[]
+  @property({ type: Object }) representing?: Representing
+
+  // Deprecated props - emit warnings
+  @property({ type: Array, attribute: 'user-menu-footer' }) userMenuFooter?: UserMenuItem[]
+  @property({ type: Array, attribute: 'user-options' }) userOptions?: UserMenuItem[]
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties)
+    this.emitDeprecationWarnings()
+  }
+
+  private emitDeprecationWarnings() {
+    if (this.userMenuFooter !== undefined) {
+      console.warn('[PktHeader] userMenuFooter is deprecated. Use userMenu instead.')
+    }
+    if (this.userOptions !== undefined) {
+      console.warn('[PktHeader] userOptions is deprecated. Use userMenu instead.')
+    }
+  }
+
+  /**
+   * Convert deprecated props to new props
+   */
+  private get effectiveUserMenu(): UserMenuItem[] | undefined {
+    const menu = this.userMenu || []
+    const footer = this.userMenuFooter || []
+    const options = this.userOptions || []
+
+    if (footer.length || options.length) {
+      return [...menu, ...options, ...footer]
+    }
+    return this.userMenu
+  }
+
+  render() {
+    return html`
+      <pkt-header-service
+        service-name=${ifDefined(this.serviceName)}
+        service-link=${ifDefined(this.serviceLink)}
+        logo-link=${ifDefined(this.logoLink)}
+        search-placeholder=${this.searchPlaceholder}
+        search-value=${this.searchValue}
+        mobile-breakpoint=${this.mobileBreakpoint}
+        tablet-breakpoint=${this.tabletBreakpoint}
+        opened-menu=${this.openedMenu}
+        log-out-button-placement=${this.logOutButtonPlacement}
+        position=${this.position}
+        scroll-behavior=${this.scrollBehavior}
+        .hideLogo=${this.hideLogo}
+        .compact=${this.compact}
+        .showSearch=${this.showSearch}
+        .canChangeRepresentation=${this.canChangeRepresentation}
+        .hasLogOut=${this.hasLogOut}
+        .user=${this.user}
+        .userMenu=${this.effectiveUserMenu}
+        .representing=${this.representing}
+      >
+        <div class="pkt-contents" ${ref(this.defaultSlot)}></div>
+      </pkt-header-service>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pkt-header': PktHeader
+  }
+}

package/src/components/header/index.ts

@@ -0,0 +1,15 @@
+export { PktHeader } from './header'
+export { PktHeaderService } from './header-service'
+export { PktHeaderUserMenu } from './header-user-menu'
+
+export type {
+  User,
+  Representing,
+  UserMenuItem,
+  TInternalMenuItem,
+  TPktHeaderMenu,
+  TLogOutButtonPlacement,
+  IPktHeader,
+} from './types'
+
+export { formatLastLoggedIn } from './header-utils'

package/src/components/header/types.ts

@@ -0,0 +1,151 @@
+import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
+
+/**
+ * Booleanish type that accepts boolean or string "true"/"false"
+ * This allows attributes to be set as strings in HTML
+ */
+export type Booleanish = boolean | 'true' | 'false'
+
+/**
+ * Converter for booleanish attributes
+ * Converts string "true"/"false" to boolean values
+ */
+export const booleanishConverter = {
+  fromAttribute(value: string | boolean | null): boolean {
+    if (value === null || value === undefined) return false
+    if (value === '' || value === 'true' || value === true) return true
+    if (value === 'false' || value === false) return false
+    return Boolean(value)
+  },
+  toAttribute(value: boolean): string | null {
+    return value ? 'true' : 'false'
+  },
+}
+
+/**
+ * User object containing information about the logged-in user
+ */
+export interface User {
+  /** Full name of the user */
+  name: string
+  /** Short name or initials (deprecated) */
+  shortname?: string
+  /** Last login timestamp (ISO string or Date) */
+  lastLoggedIn?: Date | string
+}
+
+/**
+ * Representation object containing information about the organization/entity being represented
+ */
+export interface Representing {
+  /** Name of the organization or entity */
+  name: string
+  /** Short name or initials (deprecated) */
+  shortname?: string
+  /** Organization number */
+  orgNumber?: string | number
+}
+
+/**
+ * Menu item in the user menu
+ */
+export interface UserMenuItem {
+  /** Icon name to display */
+  iconName?: PktIconName
+  /** Text for the menu item */
+  title: string
+  /** Link URL or click handler function */
+  target: string | (() => void)
+}
+
+/**
+ * Internal type for rendering links/buttons (supports both href and onClick)
+ */
+interface InternalMenuItemBase {
+  title: string
+  iconName?: PktIconName
+}
+
+interface InternalMenuLink extends InternalMenuItemBase {
+  href: string
+}
+
+interface InternalMenuButton extends InternalMenuItemBase {
+  onClick: () => void
+}
+
+export type TInternalMenuItem = InternalMenuLink | InternalMenuButton
+
+/**
+ * Helper to convert UserMenuItem (with target) to internal format
+ */
+export const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
+  if (typeof item.target === 'string') {
+    return { title: item.title, iconName: item.iconName, href: item.target }
+  }
+  return { title: item.title, iconName: item.iconName, onClick: item.target }
+}
+
+/**
+ * Type for which menu is currently open
+ */
+export type TPktHeaderMenu = 'none' | 'slot' | 'search' | 'user'
+
+/**
+ * Type for logout button placement
+ */
+export type TLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none'
+
+/**
+ * Position options for header
+ */
+export type THeaderPosition = 'fixed' | 'relative'
+
+/**
+ * Scroll behavior options for header
+ */
+export type THeaderScrollBehavior = 'hide' | 'none'
+
+/**
+ * Interface for the Header component props
+ */
+export interface IPktHeader {
+  /** Hide the Oslo logo */
+  hideLogo?: Booleanish
+  /** Logo link URL */
+  logoLink?: string
+  /** Service name displayed in the header */
+  serviceName?: string
+  /** Service link URL */
+  serviceLink?: string
+  /** Use compact header height */
+  compact?: Booleanish
+  /** Header position. 'fixed' fixes to top of viewport, 'relative' follows document flow. Default: 'fixed' */
+  position?: THeaderPosition
+  /** Scroll behavior. 'hide' hides header on scroll down, 'none' keeps it visible. Default: 'hide' */
+  scrollBehavior?: THeaderScrollBehavior
+  /** User object for logged-in user */
+  user?: User
+  /** User menu items */
+  userMenu?: UserMenuItem[]
+  /** Representation object */
+  representing?: Representing
+  /** Allow user to change representation */
+  canChangeRepresentation?: Booleanish
+  /** Logout button placement */
+  logOutButtonPlacement?: TLogOutButtonPlacement
+  /** Whether there's a logout handler attached (required for logout button to show) */
+  hasLogOut?: Booleanish
+  /** Show search field */
+  showSearch?: Booleanish
+  /** Search field placeholder */
+  searchPlaceholder?: string
+  /** Controlled search value */
+  searchValue?: string
+  /** Custom breakpoint for responsive behavior in pixels. Default: 1024 */
+  mobileBreakpoint?: number
+  /** Custom breakpoint for tablet responsive behavior in pixels. Default: 1280 */
+  tabletBreakpoint?: number
+  /** Which menu is initially open */
+  openedMenu?: TPktHeaderMenu
+}

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { PktCheckbox } from '@/components/checkbox'
 export { PktComponent } from '../base-elements/component-template.js'
 export { PktDateTags } from '@/components/datepicker/date-tags.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
+export { PktHeader, PktHeaderService, PktHeaderUserMenu } from '@/components/header'
 export { PktHelptext } from '@/components/helptext'
 export { PktHeading } from '@/components/heading'
 export { PktIcon } from '@/components/icon'
@@ -44,6 +45,15 @@ export type {
   TPktButtonType,
 } from '@/components/button'
 
+export type {
+  User as IPktHeaderUser,
+  Representing as IPktHeaderRepresenting,
+  UserMenuItem as IPktHeaderUserMenuItem,
+  TPktHeaderMenu,
+  TLogOutButtonPlacement as TPktHeaderLogOutButtonPlacement,
+  IPktHeader,
+} from '@/components/header'
+
 export type {
   IPktProgressbar,
   TProgressbarRole,