@nldd/design-system 0.8.37

package/dist/components/navigation/menu-bar-item/menu-bar-item.js

@@ -0,0 +1,207 @@
+/**
+ * Menu Bar Item Component (Lit + TypeScript)
+ *
+ * Interactief bouwblok voor gebruik in een menu bar. Rendert als <a> (met href)
+ * of <button> (zonder href). Ondersteunt icon, text, disclosure indicator,
+ * en expandable popover menu via slotted nldd-menu-item elementen.
+ *
+ * @element nldd-menu-bar-item
+ * @attr {string} text - Tekst van het item
+ * @attr {boolean} current - Markeer als actief/huidig item
+ * @attr {string} current-type - aria-current waarde als current is true ('page', 'step', 'location', 'true'). Standaard: 'page'
+ * @attr {string} href - Optionele link URL. Zonder href rendert als button.
+ * @attr {string} icon - Optioneel icon naam (nldd-icon)
+ * @attr {boolean} expandable - Toon disclosure icon en open popover bij klik
+ * @attr {boolean} icon-only - Verberg tekst visueel (altijd)
+ * @attr {'icon'|'text'} content-priority - Bepaalt wat zichtbaar blijft in compact modus: 'icon' verbergt tekst, 'text' verbergt icon
+ * @attr {boolean} compact - Activeert content-priority gedrag (gezet door parent nldd-menu-bar)
+ * @attr {boolean} disabled - Schakel interactie uit
+ * @attr {string} accessible-label - Overschrijf aria-label
+ * @attr {string} haspopup - aria-haspopup waarde (bijv. "menu", "dialog")
+ * @attr {boolean} open - Of het gekoppelde popover/menu open is
+ *
+ * @fires select - Bij klik op non-expandable button item (bubbles, composed)
+ *
+ * @slot - Slotted nldd-menu-item en nldd-menu-divider voor expandable popover.
+ *   Items worden gekloond naar het popover menu (cloneNode). JS event listeners
+ *   op slotted items worden niet meegenomen. Gebruik event delegation op een
+ *   parent element als custom click handlers nodig zijn.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { menuBarItemStyles } from './menu-bar-item.styles.js';
+import { template } from './menu-bar-item.template.js';
+import '../../content/icon/icon.js';
+import '../../lists-and-menus/menu/menu.js';
+import { POPOVER_REOPEN_GUARD_MS } from '../../../utilities/popover-guard.js';
+let NLDDMenuBarItem = class NLDDMenuBarItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.current = false;
+        this.currentType = 'page';
+        this.href = '';
+        this.icon = '';
+        this.expandable = false;
+        this.iconOnly = false;
+        this.contentPriority = '';
+        this.compact = false;
+        this.disabled = false;
+        this.accessibleLabel = '';
+        this.haspopup = '';
+        this.open = false;
+        // ## Menu popover state
+        this._menu = null;
+        this._menuOpen = false;
+        this._menuClosedAt = 0;
+        // ## Event handlers
+        this._handleClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            if (this.expandable && this._hasMenuItems()) {
+                event.preventDefault();
+                this._toggleMenu();
+                return;
+            }
+            if (!this.href) {
+                event.preventDefault();
+                this.dispatchEvent(new CustomEvent('select', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { item: this },
+                }));
+            }
+        };
+    }
+    // ## Lifecycle
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._handleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this._handleClick);
+        this._menu?.remove();
+        this._menu = null;
+    }
+    updated(changed) {
+        // Clean up menu when expandable is removed; creation is lazy in _toggleMenu()
+        if (changed.has('expandable') && !this.expandable && this._menu) {
+            this._menu.remove();
+            this._menu = null;
+        }
+    }
+    focus(options) {
+        const focusable = this.shadowRoot?.querySelector('button, a');
+        focusable?.focus(options);
+    }
+    // ## Helpers
+    _hasMenuItems() {
+        return this.querySelector('nldd-menu-item, nldd-menu-divider') !== null;
+    }
+    // ## Menu popover
+    _createMenu() {
+        if (this._menu || !this._hasMenuItems())
+            return;
+        if (typeof document === 'undefined')
+            return;
+        const menu = document.createElement('nldd-menu');
+        menu.setAttribute('placement', 'bottom-start');
+        menu.addEventListener('toggle', (event) => {
+            const open = event.newState === 'open';
+            this._menuOpen = open;
+            this.open = open;
+            if (!open)
+                this._menuClosedAt = Date.now();
+        });
+        document.body.appendChild(menu);
+        this._menu = menu;
+    }
+    /**
+     * Clone slotted menu items into the popover menu.
+     * Note: cloneNode(true) copies DOM structure and attributes but not JS event
+     * listeners. Custom click handlers on slotted nldd-menu-item elements won't
+     * fire in the popover. Use event delegation on a parent element instead.
+     */
+    _syncMenuItems() {
+        if (!this._menu)
+            return;
+        this._menu.replaceChildren();
+        const items = this.querySelectorAll('nldd-menu-item, nldd-menu-divider');
+        items.forEach(item => {
+            const clone = item.cloneNode(true);
+            this._menu.appendChild(clone);
+        });
+    }
+    _toggleMenu() {
+        if (!this._menu)
+            this._createMenu();
+        if (!this._menu)
+            return;
+        this._menu.anchorElement = this;
+        if (this._menuOpen) {
+            this._menu.hidePopover();
+        }
+        else if (Date.now() - this._menuClosedAt > POPOVER_REOPEN_GUARD_MS) {
+            this._syncMenuItems();
+            this._menu.showPopover();
+        }
+    }
+    render() {
+        return template(this);
+    }
+};
+NLDDMenuBarItem.styles = menuBarItemStyles;
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDMenuBarItem.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDMenuBarItem.prototype, "current", void 0);
+__decorate([
+    property({ type: String, attribute: 'current-type', reflect: true })
+], NLDDMenuBarItem.prototype, "currentType", void 0);
+__decorate([
+    property({ type: String })
+], NLDDMenuBarItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDMenuBarItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDMenuBarItem.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only', reflect: true })
+], NLDDMenuBarItem.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String, attribute: 'content-priority', reflect: true })
+], NLDDMenuBarItem.prototype, "contentPriority", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDMenuBarItem.prototype, "compact", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDMenuBarItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDMenuBarItem.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String })
+], NLDDMenuBarItem.prototype, "haspopup", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDMenuBarItem.prototype, "open", void 0);
+NLDDMenuBarItem = __decorate([
+    customElement('nldd-menu-bar-item')
+], NLDDMenuBarItem);
+export { NLDDMenuBarItem };
+//# sourceMappingURL=menu-bar-item.js.map

package/dist/components/navigation/menu-bar-item/menu-bar-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar-item.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.ts"],"names":[],"mappings":"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"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const menuBarItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=menu-bar-item.styles.d.ts.map

package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAyK7B,CAAC"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js

@@ -0,0 +1,172 @@
+import { css } from 'lit';
+export const menuBarItemStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_indicator-z-index: 0;
+		--_content-z-index: 1;
+		--_focus-z-index: 1;
+		display: inline-block;
+		position: relative;
+		isolation: isolate;
+		flex-grow: 0;
+		flex-shrink: 0;
+		flex-basis: auto;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.menu-bar-item {
+		appearance: none;
+		border: none;
+		margin: 0;
+		background: none;
+		text-decoration: none;
+		display: flex;
+		position: relative;
+		height: var(--semantics-controls-md-min-size);
+		min-width: var(--semantics-controls-md-min-size);
+		box-sizing: border-box;
+		justify-content: center;
+		align-items: center;
+		gap: var(--primitives-space-4);
+		font: var(--components-menu-bar-item-font);
+		color: var(--components-menu-bar-item-content-color);
+		text-align: center;
+		padding: 0 var(--components-menu-bar-item-inline-padding);
+		white-space: nowrap;
+	}
+
+	/* ## Hover indicator (::before) */
+
+	.menu-bar-item::before {
+		content: '';
+		position: absolute;
+		top: var(--primitives-space-6);
+		bottom: var(--primitives-space-6);
+		left: 0;
+		right: 0;
+		border-radius: var(--semantics-controls-sm-corner-radius);
+		pointer-events: none;
+		z-index: var(--_indicator-z-index);
+	}
+
+	.menu-bar-item:hover::before {
+		background-color: var(--components-menu-bar-item-is-hovered-indicator-background-color);
+	}
+
+	:host([open]) .menu-bar-item::before {
+		background-color: var(--components-menu-bar-item-is-open-indicator-background-color);
+	}
+
+	:host([open]) .menu-bar-item:hover::before {
+		background-color: var(--components-menu-bar-item-is-hovered-indicator-background-color);
+	}
+
+	/* ## Current indicator (::after) */
+
+	:host([current]) .menu-bar-item::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: var(--primitives-space-8);
+		right: var(--primitives-space-8);
+		height: var(--components-menu-bar-item-is-current-indicator-height);
+		background-color: var(--components-menu-bar-item-is-current-indicator-background-color);
+		pointer-events: none;
+		z-index: var(--_indicator-z-index);
+	}
+
+	/* ## Text */
+
+	.menu-bar-item__text {
+		position: relative;
+		z-index: var(--_content-z-index);
+	}
+
+	/* ## Icon */
+
+	.menu-bar-item__icon {
+		width: var(--primitives-space-20);
+		height: var(--primitives-space-20);
+		flex-shrink: 0;
+		z-index: var(--_content-z-index);
+	}
+
+	/* ## Disclosure icon */
+
+	.menu-bar-item__disclosure-icon {
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+		z-index: var(--_content-z-index);
+	}
+
+
+	/* # Focus */
+
+	:host(:focus-within) {
+		z-index: var(--_focus-z-index);
+	}
+
+	.menu-bar-item:focus-visible {
+		outline: none;
+	}
+
+	.menu-bar-item:focus-visible::before {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Slotted */
+
+	::slotted(nldd-menu-item),
+	::slotted(nldd-menu-divider) {
+		display: none;
+	}
+
+
+	/* # Disabled */
+
+	:host([disabled]) .menu-bar-item {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+
+	/* # Icon-only */
+
+	:host([icon-only]) .menu-bar-item,
+	:host([content-priority="icon"][compact][icon]:not([icon=""])) .menu-bar-item {
+		padding: var(--primitives-space-8);
+	}
+
+	:host([icon-only]) .menu-bar-item__text,
+	:host([content-priority="icon"][compact][icon]:not([icon=""])) .menu-bar-item__text {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* ## Text-only when compact */
+
+	:host([content-priority="text"][compact]) .menu-bar-item__icon {
+		display: none;
+	}
+`;
+//# sourceMappingURL=menu-bar-item.styles.js.map

package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar-item.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKnC,CAAC"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.d.ts

@@ -0,0 +1,3 @@
+import type { NLDDMenuBarItem } from './menu-bar-item.js';
+export declare function template(component: NLDDMenuBarItem): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=menu-bar-item.template.d.ts.map

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,wBAAgB,QAAQ,CAAC,SAAS,EAAE,eAAe,wCA+DlD"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js

@@ -0,0 +1,65 @@
+import { html, nothing } from 'lit';
+import { sanitizeUrl } from '../../../utilities/sanitize-url.js';
+export function template(component) {
+    const safeHref = sanitizeUrl(component.href);
+    const isLink = Boolean(safeHref);
+    const isIconOnly = Boolean((component.iconOnly || (component.contentPriority === 'icon' && component.compact)) && component.text);
+    const ariaLabel = component.accessibleLabel || (isIconOnly ? component.text : nothing);
+    const ariaCurrent = component.current ? component.currentType : nothing;
+    const ariaHaspopup = component.expandable ? 'menu' : (component.haspopup || nothing);
+    const ariaExpanded = (component.expandable || component.haspopup) ? String(component.open) : nothing;
+    if (isLink) {
+        return html `
+			<a class="menu-bar-item"
+				href=${safeHref}
+				aria-disabled=${component.disabled || nothing}
+				tabindex=${component.disabled ? '-1' : nothing}
+				aria-current=${ariaCurrent}
+				aria-label=${ariaLabel}
+				aria-haspopup=${ariaHaspopup}
+				aria-expanded=${ariaExpanded}
+			>
+				${component.icon ? html `
+					<span class="menu-bar-item__icon">
+						<nldd-icon name=${component.icon}></nldd-icon>
+					</span>
+				` : nothing}
+				<span class="menu-bar-item__text">
+					${component.text}
+				</span>
+				${component.expandable ? html `
+					<span class="menu-bar-item__disclosure-icon">
+						<nldd-icon name="chevron-down-small"></nldd-icon>
+					</span>
+				` : nothing}
+			</a>
+			<slot></slot>
+		`;
+    }
+    return html `
+		<button class="menu-bar-item"
+			type="button"
+			?disabled=${component.disabled}
+			aria-current=${ariaCurrent}
+			aria-label=${ariaLabel}
+			aria-haspopup=${ariaHaspopup}
+			aria-expanded=${ariaExpanded}
+		>
+			${component.icon ? html `
+				<span class="menu-bar-item__icon">
+					<nldd-icon name=${component.icon}></nldd-icon>
+				</span>
+			` : nothing}
+			<span class="menu-bar-item__text">
+				${component.text}
+			</span>
+			${component.expandable ? html `
+				<span class="menu-bar-item__disclosure-icon">
+					<nldd-icon name="chevron-down-small"></nldd-icon>
+				</span>
+			` : nothing}
+		</button>
+		<slot></slot>
+	`;
+}
+//# sourceMappingURL=menu-bar-item.template.js.map

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar-item.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,UAAU,QAAQ,CAAC,SAA0B;IAClD,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,eAAe,KAAK,MAAM,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAClI,MAAM,SAAS,GAAG,SAAS,CAAC,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvF,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;IACxE,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC;IACrF,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAErG,IAAI,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;;WAEF,QAAkB;oBACT,SAAS,CAAC,QAAQ,IAAI,OAAO;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;mBAC/B,WAAW;iBACb,SAAS;oBACN,YAAY;oBACZ,YAAY;;MAE1B,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEH,SAAS,CAAC,IAAI;;KAEjC,CAAC,CAAC,CAAC,OAAO;;OAER,SAAS,CAAC,IAAI;;MAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;KAI5B,CAAC,CAAC,CAAC,OAAO;;;GAGZ,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;;eAGG,SAAS,CAAC,QAAQ;kBACf,WAAW;gBACb,SAAS;mBACN,YAAY;mBACZ,YAAY;;KAE1B,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEH,SAAS,CAAC,IAAI;;IAEjC,CAAC,CAAC,CAAC,OAAO;;MAER,SAAS,CAAC,IAAI;;KAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;;EAGZ,CAAC;AACH,CAAC"}

package/dist/components/navigation/pagination/pagination.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Nederlandse Digitale Dienst Pagination Component (Lit + TypeScript)
+ *
+ * A pagination control for navigating between pages of content.
+ *
+ * @element nldd-pagination
+ * @attr {number} current - Currently active page (1-based)
+ * @attr {number} total - Total number of pages (recommended max: 200 for compact select performance)
+ * @attr {boolean} disabled - Disabled state
+ * @attr {boolean} full-width - Centreert de pagination in de container
+ * @attr {string} href-pattern - URL patroon met {page} placeholder, rendert links in plaats van buttons
+ *
+ * @fires page-change - Bij paginawisseling (detail: { page: number, href?: string }). Alleen cancelable in href-mode: preventDefault() voorkomt navigatie (SPA).
+ */
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import type { NLDDPaginationTranslations } from './pagination.i18n.js';
+export declare class NLDDPagination extends LitElement {
+    static styles: import("lit").CSSResult;
+    current: number;
+    total: number;
+    disabled: boolean;
+    fullWidth: boolean;
+    hrefPattern: string;
+    translations: Partial<NLDDPaginationTranslations>;
+    private _mergedTranslations;
+    willUpdate(changed: PropertyValues): void;
+    _t(key: keyof NLDDPaginationTranslations, params?: Record<string, string | number>): string;
+    _getVisiblePages(): (number | 'ellipsis')[];
+    _hrefForPage(page: number): string;
+    _goToPage(page: number): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-pagination': NLDDPagination;
+    }
+}
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/navigation/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAEvE,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,OAAO,SAAK;IAGZ,KAAK,SAAK;IAGV,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,WAAW,SAAM;IAGjB,YAAY,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAM;IAEvD,OAAO,CAAC,mBAAmB,CAAqC;IAEvD,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMlD,EAAE,CAAC,GAAG,EAAE,MAAM,0BAA0B,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM;IAU3F,gBAAgB,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,EAAE;IAqB3C,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAMlC,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IA2BpB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD"}

package/dist/components/navigation/pagination/pagination.i18n.d.ts

@@ -0,0 +1,9 @@
+export declare const nlddPaginationTranslations: {
+    'components.pagination.accessibility-label': string;
+    'components.pagination.previous-action': string;
+    'components.pagination.next-action': string;
+    'components.pagination.page-action': string;
+    'components.pagination.go-to-page-label': string;
+};
+export type NLDDPaginationTranslations = typeof nlddPaginationTranslations;
+//# sourceMappingURL=pagination.i18n.d.ts.map

package/dist/components/navigation/pagination/pagination.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;;;;;CAMtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC"}

package/dist/components/navigation/pagination/pagination.i18n.js

@@ -0,0 +1,8 @@
+export const nlddPaginationTranslations = {
+    'components.pagination.accessibility-label': 'Paginering',
+    'components.pagination.previous-action': 'Ga naar vorige pagina',
+    'components.pagination.next-action': 'Ga naar volgende pagina',
+    'components.pagination.page-action': 'Ga naar pagina {page}',
+    'components.pagination.go-to-page-label': 'Ga naar pagina',
+};
+//# sourceMappingURL=pagination.i18n.js.map

package/dist/components/navigation/pagination/pagination.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.i18n.js","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACzC,2CAA2C,EAAE,YAAY;IACzD,uCAAuC,EAAE,uBAAuB;IAChE,mCAAmC,EAAE,yBAAyB;IAC9D,mCAAmC,EAAE,uBAAuB;IAC5D,wCAAwC,EAAE,gBAAgB;CAC1D,CAAC"}

package/dist/components/navigation/pagination/pagination.js

@@ -0,0 +1,122 @@
+/**
+ * Nederlandse Digitale Dienst Pagination Component (Lit + TypeScript)
+ *
+ * A pagination control for navigating between pages of content.
+ *
+ * @element nldd-pagination
+ * @attr {number} current - Currently active page (1-based)
+ * @attr {number} total - Total number of pages (recommended max: 200 for compact select performance)
+ * @attr {boolean} disabled - Disabled state
+ * @attr {boolean} full-width - Centreert de pagination in de container
+ * @attr {string} href-pattern - URL patroon met {page} placeholder, rendert links in plaats van buttons
+ *
+ * @fires page-change - Bij paginawisseling (detail: { page: number, href?: string }). Alleen cancelable in href-mode: preventDefault() voorkomt navigatie (SPA).
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { paginationStyles } from './pagination.styles.js';
+import { paginationTemplate } from './pagination.template.js';
+import { nlddPaginationTranslations } from './pagination.i18n.js';
+let NLDDPagination = class NLDDPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.current = 1;
+        this.total = 1;
+        this.disabled = false;
+        this.fullWidth = false;
+        this.hrefPattern = '';
+        this.translations = {};
+        this._mergedTranslations = { ...nlddPaginationTranslations };
+    }
+    willUpdate(changed) {
+        if (changed.has('translations')) {
+            this._mergedTranslations = { ...nlddPaginationTranslations, ...this.translations };
+        }
+    }
+    _t(key, params) {
+        let text = this._mergedTranslations[key] ?? key;
+        if (params) {
+            for (const [k, v] of Object.entries(params)) {
+                text = text.replace(`{${k}}`, String(v));
+            }
+        }
+        return text;
+    }
+    _getVisiblePages() {
+        if (this.total <= 7) {
+            return Array.from({ length: this.total }, (_, i) => i + 1);
+        }
+        // Always show exactly 7 slots for consistent width
+        if (this.current <= 3) {
+            return [1, 2, 3, 4, 'ellipsis', this.total - 1, this.total];
+        }
+        if (this.current === 4) {
+            return [1, 2, 3, 4, 5, 'ellipsis', this.total];
+        }
+        if (this.current >= this.total - 3) {
+            return [1, 'ellipsis', this.total - 4, this.total - 3, this.total - 2, this.total - 1, this.total];
+        }
+        return [1, 'ellipsis', this.current - 1, this.current, this.current + 1, 'ellipsis', this.total];
+    }
+    _hrefForPage(page) {
+        const href = this.hrefPattern.replace('{page}', String(page));
+        if (/^(https?:\/\/|[^:]+$)/.test(href))
+            return href;
+        return '';
+    }
+    _goToPage(page) {
+        if (this.disabled || page < 1 || page > this.total || page === this.current) {
+            return;
+        }
+        const detail = { page };
+        if (this.hrefPattern) {
+            detail.href = this._hrefForPage(page);
+        }
+        const cancelable = !!this.hrefPattern;
+        const event = new CustomEvent('page-change', {
+            detail,
+            bubbles: true,
+            composed: true,
+            cancelable,
+        });
+        const proceeded = this.dispatchEvent(event);
+        this.current = page;
+        // In href mode, navigate unless consumer called preventDefault()
+        if (this.hrefPattern && proceeded && detail.href) {
+            window.location.href = detail.href;
+        }
+    }
+    render() {
+        return paginationTemplate(this);
+    }
+};
+NLDDPagination.styles = paginationStyles;
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDPagination.prototype, "current", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NLDDPagination.prototype, "total", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDPagination.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDPagination.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'href-pattern' })
+], NLDDPagination.prototype, "hrefPattern", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDPagination.prototype, "translations", void 0);
+NLDDPagination = __decorate([
+    customElement('nldd-pagination')
+], NLDDPagination);
+export { NLDDPagination };
+//# sourceMappingURL=pagination.js.map