@oslokommune/punkt-elements 13.22.0 → 14.0.0

package/CHANGELOG.md

@@ -5,6 +5,50 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [14.0.0](https://github.com/oslokommune/punkt/compare/13.22.0...14.0.0) (2026-02-02)
+
+### ⚠ BREAKING CHANGES
+* Header (Service) (#3192) Nå også som custom element!. BREAKING CHANGE: Fjernet 'logIn' event (kun 'logOut' støttes nå)
+  BREAKING CHANGE: Erstattet 'fixed' prop med 'position' (verdier: 'fixed' | 'relative', default: 'fixed')
+  BREAKING CHANGE: Erstattet 'scrollToHide' prop med 'scrollBehavior' (verdier: 'hide' | 'none', default: 'hide')
+  BREAKING CHANGE: Erstattet 'showLogOutButton' med 'logOutButtonPlacement' (verdier: 'userMenu' | 'header' | 'both' | 'none', default: 'none')
+  BREAKING CHANGE: Fjernet 'showMenuButton' prop
+  BREAKING CHANGE: Fjernet 'user.shortname' fra user-objektet
+  BREAKING CHANGE: Fjernet 'representing.shortname' fra representing-objektet
+  BREAKING CHANGE: Endret 'userMenu.items.target' type fra 'string' til 'string | function'
+  BREAKING CHANGE: Utdatert 'userMenuFooter' og 'userOptions' props (bruk 'userMenu' i stedet)
+  BREAKING CHANGE: Fjernet default verdi for 'logoLink' (var `https://www.oslo.kommune.no/`)
+  
+  NYE FEATURES:
+  - Lagt til søkefunksjonalitet med props: 'showSearch', 'searchPlaceholder', 'searchValue'
+  - Nye events: 'onSearch' og 'onSearchChange' for søkeinteraksjon
+  - Nye events: 'logoClick' og 'serviceClick' for klikkhåndtering
+  - Nye React-props: 'logoClick' og 'serviceClick' callbacks
+  - Lagt til 'serviceLink' prop for tjenestenavnlenke
+  - Lagt til 'hideLogo' prop for å skjule Oslo-logoen
+  - Lagt til 'compact' prop for kompakt header-høyde
+  - Lagt til 'mobileBreakpoint' prop (default: 768px) for mobil-layout
+  - Lagt til 'tabletBreakpoint' prop (default: 1280px) for tablet-layout
+  - Lagt til 'openedMenu' prop for å kontrollere hvilken meny som er åpen ved oppstart
+  
+  FUNKSJONELLE ENDRINGER:
+  - Alle events har nå 'attribute' felt for custom element-støtte
+  - Forbedret type-dokumentasjon for 'user.lastLoggedIn' (string | Date)
+  - Forbedret type-dokumentasjon for 'representing.orgNumber' (string | number)
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.22.0](https://github.com/oslokommune/punkt/compare/13.21.0...13.22.0) (2026-01-30)
 
 ### ⚠ BREAKING CHANGES

package/dist/header.d.ts

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

package/dist/index.d.ts

@@ -11,8 +11,14 @@ declare type Booleanish = boolean | 'true' | 'false';
 
 declare type Booleanish_2 = boolean | 'true' | 'false';
 
+/**
+ * Booleanish type that accepts boolean or string "true"/"false"
+ * This allows attributes to be set as strings in HTML
+ */
 declare type Booleanish_3 = boolean | 'true' | 'false';
 
+declare type Booleanish_4 = boolean | 'true' | 'false';
+
 /**
  * We define all props as optional. Native HTML attributes are optional by default,
  * but the TS definition require either null or value. This way we can support showing a value as optional
@@ -207,6 +213,95 @@ export declare interface IPktConsent {
     triggerText?: string | null;
 }
 
+/**
+ * Interface for the Header component props
+ */
+export declare interface IPktHeader {
+    /** Hide the Oslo logo */
+    hideLogo?: Booleanish_3;
+    /** Logo link URL */
+    logoLink?: string;
+    /** Service name displayed in the header */
+    serviceName?: string;
+    /** Service link URL */
+    serviceLink?: string;
+    /** Use compact header height */
+    compact?: Booleanish_3;
+    /** 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?: IPktHeaderUser;
+    /** User menu items */
+    userMenu?: IPktHeaderUserMenuItem[];
+    /** Representation object */
+    representing?: IPktHeaderRepresenting;
+    /** Allow user to change representation */
+    canChangeRepresentation?: Booleanish_3;
+    /** Logout button placement */
+    logOutButtonPlacement?: TPktHeaderLogOutButtonPlacement;
+    /** Whether there's a logout handler attached (required for logout button to show) */
+    hasLogOut?: Booleanish_3;
+    /** Show search field */
+    showSearch?: Booleanish_3;
+    /** 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;
+}
+
+/**
+ * Representation object containing information about the organization/entity being represented
+ */
+export declare interface IPktHeaderRepresenting {
+    /** Name of the organization or entity */
+    name: string;
+    /** Short name or initials (deprecated) */
+    shortname?: string;
+    /** Organization number */
+    orgNumber?: string | number;
+}
+
+/**
+ * User object containing information about the logged-in user
+ */
+export declare interface IPktHeaderUser {
+    /** Full name of the user */
+    name: string;
+    /** Short name or initials (deprecated) */
+    shortname?: string;
+    /** Last login timestamp (ISO string or Date) */
+    lastLoggedIn?: Date | string;
+}
+
+declare interface IPktHeaderUserMenu {
+    user: IPktHeaderUser;
+    formattedLastLoggedIn?: string;
+    representing?: IPktHeaderRepresenting;
+    userMenu?: IPktHeaderUserMenuItem[];
+    canChangeRepresentation?: Booleanish_3;
+    logoutOnClick?: Booleanish_3;
+}
+
+/**
+ * Menu item in the user menu
+ */
+export declare interface IPktHeaderUserMenuItem {
+    /** Icon name to display */
+    iconName?: PktIconName;
+    /** Text for the menu item */
+    title: string;
+    /** Link URL or click handler function */
+    target: string | (() => void);
+}
+
 export declare interface IPktHeading {
     size?: TPktHeadingSize;
     level?: TPktHeadingLevel;
@@ -899,6 +994,149 @@ declare class PktElement<T = {}> extends PktShadowElement<T> {
     createRenderRoot(): this;
 }
 
+/**
+ * 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
+ */
+export declare class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
+    defaultSlot: Ref<HTMLElement>;
+    slotController: PktSlotController;
+    serviceName?: string;
+    serviceLink?: string;
+    logoLink?: string;
+    searchPlaceholder: string;
+    searchValue: string;
+    mobileBreakpoint: number;
+    tabletBreakpoint: number;
+    openedMenu: TPktHeaderMenu;
+    logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
+    position: THeaderPosition;
+    scrollBehavior: THeaderScrollBehavior;
+    hideLogo: Booleanish_3;
+    compact: Booleanish_3;
+    showSearch: Booleanish_3;
+    canChangeRepresentation: Booleanish_3;
+    hasLogOut: Booleanish_3;
+    user?: IPktHeaderUser;
+    userMenu?: IPktHeaderUserMenuItem[];
+    representing?: IPktHeaderRepresenting;
+    userMenuFooter?: IPktHeaderUserMenuItem[];
+    userOptions?: IPktHeaderUserMenuItem[];
+    constructor();
+    firstUpdated(changedProperties: PropertyValues): void;
+    private emitDeprecationWarnings;
+    /**
+     * Convert deprecated props to new props
+     */
+    private get effectiveUserMenu();
+    render(): TemplateResult<1>;
+}
+
+export declare class PktHeaderService extends PktElement<IPktHeader> implements IPktHeader {
+    serviceName?: string;
+    serviceLink?: string;
+    logoLink?: string;
+    searchPlaceholder: string;
+    searchValue: string;
+    mobileBreakpoint: number;
+    tabletBreakpoint: number;
+    openedMenu: TPktHeaderMenu;
+    logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
+    position: THeaderPosition;
+    scrollBehavior: THeaderScrollBehavior;
+    hideLogo: Booleanish_3;
+    compact: Booleanish_3;
+    showSearch: Booleanish_3;
+    canChangeRepresentation: Booleanish_3;
+    hasLogOut: Booleanish_3;
+    user?: IPktHeaderUser;
+    userMenu?: IPktHeaderUserMenuItem[];
+    representing?: IPktHeaderRepresenting;
+    private isMobile;
+    private isTablet;
+    private openMenu;
+    private isHidden;
+    private componentWidth;
+    private hasSlotContent;
+    private alignSlotRight;
+    private alignSearchRight;
+    defaultSlot: Ref<HTMLElement>;
+    slotController: PktSlotController;
+    private headerRef;
+    private userContainerRef;
+    private slotContainerRef;
+    private searchContainerRef;
+    private slotContentRef;
+    private searchMenuRef;
+    private resizeObserver?;
+    private lastScrollPosition;
+    private savedScrollY;
+    private lastFocusedElement;
+    private shouldRestoreFocus;
+    constructor();
+    updateSlots(filledSlots: Set<string | null | undefined>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private updateIsMobile;
+    private updateIsTablet;
+    private updateScrollLock;
+    private lockScroll;
+    private unlockScroll;
+    private setupScrollListener;
+    private handleScroll;
+    private handleClickOutside;
+    private handleFocusOut;
+    private handleEscapeKey;
+    private restoreFocus;
+    private checkDropdownAlignment;
+    private handleMenuToggle;
+    private handleLogoClick;
+    private handleServiceClick;
+    private handleLogout;
+    private handleSearch;
+    private handleSearchChange;
+    private handleSearchInputChange;
+    private handleSearchKeyDown;
+    private get formattedLastLoggedIn();
+    private get isFixed();
+    private get shouldHideOnScroll();
+    private get showLogoutInHeader();
+    private get showLogoutInUserMenu();
+    private renderLogo;
+    private renderServiceName;
+    private renderSlotContainer;
+    private renderSearch;
+    private renderUserButton;
+    private renderHeader;
+    render(): TemplateResult<1>;
+}
+
+export declare class PktHeaderUserMenu extends PktElement<IPktHeaderUserMenu> implements IPktHeaderUserMenu {
+    user: IPktHeaderUser;
+    formattedLastLoggedIn?: string;
+    representing?: IPktHeaderRepresenting;
+    userMenu?: IPktHeaderUserMenuItem[];
+    canChangeRepresentation: Booleanish_3;
+    logoutOnClick: Booleanish_3;
+    private handleChangeRepresentation;
+    private handleLogout;
+    private handleMenuItemClick;
+    private renderLinkOrButton;
+    private renderLinkSection;
+    render(): TemplateResult<1>;
+}
+
 export declare class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
     size: TPktHeadingSize | undefined;
     level: TPktHeadingLevel;
@@ -1026,7 +1264,7 @@ export declare class PktInputWrapper extends PktElement<Props_6> {
     ariaDescribedby: string | undefined;
     hasFieldset: boolean;
     role: string | null;
-    useWrapper: Booleanish_3;
+    useWrapper: Booleanish_4;
     protected updated(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     private toggleDropdown;
@@ -1460,6 +1698,16 @@ declare type TCounterPosition = 'top' | 'bottom';
 
 declare type TDay = `${number}${number}`;
 
+/**
+ * Position options for header
+ */
+declare type THeaderPosition = 'fixed' | 'relative';
+
+/**
+ * Scroll behavior options for header
+ */
+declare type THeaderScrollBehavior = 'hide' | 'none';
+
 declare type TISODate = `${TYear}-${TMonth}-${TDay}`;
 
 declare type TLayout = 'vertical' | 'horizontal';
@@ -1488,6 +1736,16 @@ export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right
 
 export declare type TPktComboboxTagPlacement = 'inside' | 'outside';
 
+/**
+ * Type for logout button placement
+ */
+export declare type TPktHeaderLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
+
+/**
+ * Type for which menu is currently open
+ */
+export declare type TPktHeaderMenu = 'none' | 'slot' | 'search' | 'user';
+
 export declare type TPktHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export declare type TPktHeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';