@yuuvis/client-framework 2.19.0 → 2.20.0

package/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/breadcrumb/breadcrumb.component';
+export * from './lib/models';

package/breadcrumb/lib/breadcrumb/breadcrumb.component.d.ts

@@ -0,0 +1,94 @@
+import { BreadcrumbItem } from '../models';
+import * as i0 from "@angular/core";
+/**
+ * A generic, accessible breadcrumb navigation component.
+ *
+ * Renders a flat list of navigation items where the last item always represents
+ * the current location (non-clickable) and all preceding items are interactive links.
+ * Each link is individually focusable via standard Tab navigation.
+ *
+ * Key behaviors
+ * - Items are rendered left-to-right, separated by a `/` divider
+ * - The **last item** is always the current page — displayed as plain text (no link, no click handler)
+ * - All **preceding items** are rendered as `<a>` links that emit the `navigate` output on click or Enter
+ * - The component performs **no routing** — the parent handles all navigation logic via the emitted `BreadcrumbItem`
+ * - Empty `items` array renders nothing (the host element stays in the DOM but is visually empty)
+ *
+ * Usage
+ *
+ * The parent builds the `BreadcrumbItem[]` and passes it as input. Typically this
+ * array mirrors the object hierarchy the user navigated through (e.g. Case → Phase → Document).
+ *
+ * ```ts
+ * // Parent component
+ * breadcrumbItems: BreadcrumbItem[] = [
+ *   { id: 'case-42',  name: 'Case #42' },      // ← clickable link
+ *   { id: 'phase-3',  name: 'Review' },          // ← clickable link
+ *   { id: 'doc-7',    name: 'Contract.pdf' }     // ← current location (non-clickable)
+ * ];
+ *
+ * onBreadcrumbNavigate(item: BreadcrumbItem): void {
+ *   // item.id is the domain-specific key — use it to navigate
+ *   this.router.navigate(['/objects', item.id]);
+ * }
+ * ```
+ *
+ * ```html
+ * <yuv-breadcrumb
+ *   [items]="breadcrumbItems"
+ *   (navigate)="onBreadcrumbNavigate($event)" />
+ * ```
+ *
+ * Renders visually as:
+ * ```
+ * Case #42  /  Review  /  Contract.pdf
+ * [link]       [link]      [current]
+ * ```
+ */
+export declare class YuuvisBreadcrumbComponent {
+    /**
+     * Ordered list of breadcrumb items to display.
+     *
+     * Each `BreadcrumbItem` has `{ id: string; name: string }` — where `id` is a unique key
+     * (typically an object/route ID) and `name` is the display label rendered in the trail.
+     *
+     * Position determines rendering behavior:
+     * - All items except the last → clickable `<a>` links
+     * - Last item → non-clickable text (current location)
+     *
+     * Defaults to an empty array, which renders nothing.
+     *
+     * @example
+     * ```ts
+     * // Case → Document trail
+     * [items]="[
+     *   { id: 'case-42', name: 'Case #42' },
+     *   { id: 'doc-7',   name: 'Invoice.pdf' }
+     * ]"
+     * ```
+     */
+    items: import("@angular/core").InputSignal<BreadcrumbItem[]>;
+    /**
+     * Emitted when the user activates a clickable breadcrumb item (click or Enter key).
+     *
+     * The emitted value is the full `BreadcrumbItem` object (`{ id, name }`) that was activated.
+     * Never emitted for the last item since it is non-clickable.
+     * The parent is responsible for performing the actual navigation using `item.id`.
+     *
+     * @example
+     * ```ts
+     * onBreadcrumbNavigate(item: BreadcrumbItem): void {
+     *   // item = { id: 'case-42', name: 'Case #42' }
+     *   this.router.navigate(['/objects', item.id]);
+     * }
+     * ```
+     */
+    navigate: import("@angular/core").OutputEmitterRef<BreadcrumbItem>;
+    /**
+     * Handles click on a breadcrumb link and forwards the item to the parent via `navigate` output.
+     * Called only for non-last items (the template guards against calling this for the current location).
+     */
+    protected onItemClick(item: BreadcrumbItem): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<YuuvisBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YuuvisBreadcrumbComponent, "yuv-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/breadcrumb/lib/models/breadcrumb-item.model.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A single item in the breadcrumb trail.
+ *
+ * `id` is used as the `@for` track expression and emitted back on click.
+ * `name` is rendered as-is — no truncation, translation, or fallback applied.
+ * Position in the array determines the role: all items except the last are clickable links;
+ * the last item is rendered as non-clickable text representing the current location.
+ */
+export interface BreadcrumbItem {
+    /** Unique identifier — emitted via `navigate` output when the item is activated. */
+    id: string;
+    /** Display label shown in the breadcrumb trail. */
+    name: string;
+}

package/breadcrumb/lib/models/index.d.ts

@@ -0,0 +1 @@
+export * from './breadcrumb-item.model';

package/fesm2022/yuuvis-client-framework-breadcrumb.mjs

@@ -0,0 +1,117 @@
+import * as i0 from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@yuuvis/client-core';
+import { TranslateModule } from '@yuuvis/client-core';
+
+/**
+ * A generic, accessible breadcrumb navigation component.
+ *
+ * Renders a flat list of navigation items where the last item always represents
+ * the current location (non-clickable) and all preceding items are interactive links.
+ * Each link is individually focusable via standard Tab navigation.
+ *
+ * Key behaviors
+ * - Items are rendered left-to-right, separated by a `/` divider
+ * - The **last item** is always the current page — displayed as plain text (no link, no click handler)
+ * - All **preceding items** are rendered as `<a>` links that emit the `navigate` output on click or Enter
+ * - The component performs **no routing** — the parent handles all navigation logic via the emitted `BreadcrumbItem`
+ * - Empty `items` array renders nothing (the host element stays in the DOM but is visually empty)
+ *
+ * Usage
+ *
+ * The parent builds the `BreadcrumbItem[]` and passes it as input. Typically this
+ * array mirrors the object hierarchy the user navigated through (e.g. Case → Phase → Document).
+ *
+ * ```ts
+ * // Parent component
+ * breadcrumbItems: BreadcrumbItem[] = [
+ *   { id: 'case-42',  name: 'Case #42' },      // ← clickable link
+ *   { id: 'phase-3',  name: 'Review' },          // ← clickable link
+ *   { id: 'doc-7',    name: 'Contract.pdf' }     // ← current location (non-clickable)
+ * ];
+ *
+ * onBreadcrumbNavigate(item: BreadcrumbItem): void {
+ *   // item.id is the domain-specific key — use it to navigate
+ *   this.router.navigate(['/objects', item.id]);
+ * }
+ * ```
+ *
+ * ```html
+ * <yuv-breadcrumb
+ *   [items]="breadcrumbItems"
+ *   (navigate)="onBreadcrumbNavigate($event)" />
+ * ```
+ *
+ * Renders visually as:
+ * ```
+ * Case #42  /  Review  /  Contract.pdf
+ * [link]       [link]      [current]
+ * ```
+ */
+class YuuvisBreadcrumbComponent {
+    constructor() {
+        // #region Angular stuff (inputs, outputs)
+        /**
+         * Ordered list of breadcrumb items to display.
+         *
+         * Each `BreadcrumbItem` has `{ id: string; name: string }` — where `id` is a unique key
+         * (typically an object/route ID) and `name` is the display label rendered in the trail.
+         *
+         * Position determines rendering behavior:
+         * - All items except the last → clickable `<a>` links
+         * - Last item → non-clickable text (current location)
+         *
+         * Defaults to an empty array, which renders nothing.
+         *
+         * @example
+         * ```ts
+         * // Case → Document trail
+         * [items]="[
+         *   { id: 'case-42', name: 'Case #42' },
+         *   { id: 'doc-7',   name: 'Invoice.pdf' }
+         * ]"
+         * ```
+         */
+        this.items = input([]);
+        /**
+         * Emitted when the user activates a clickable breadcrumb item (click or Enter key).
+         *
+         * The emitted value is the full `BreadcrumbItem` object (`{ id, name }`) that was activated.
+         * Never emitted for the last item since it is non-clickable.
+         * The parent is responsible for performing the actual navigation using `item.id`.
+         *
+         * @example
+         * ```ts
+         * onBreadcrumbNavigate(item: BreadcrumbItem): void {
+         *   // item = { id: 'case-42', name: 'Case #42' }
+         *   this.router.navigate(['/objects', item.id]);
+         * }
+         * ```
+         */
+        this.navigate = output();
+    }
+    // #endregion
+    // #region UI Responses
+    /**
+     * Handles click on a breadcrumb link and forwards the item to the parent via `navigate` output.
+     * Called only for non-last items (the template guards against calling this for the current location).
+     */
+    onItemClick(item) {
+        this.navigate.emit(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuuvisBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YuuvisBreadcrumbComponent, isStandalone: true, selector: "yuv-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { classAttribute: "yuv-breadcrumb" }, ngImport: i0, template: "<nav [attr.aria-label]=\"'yuv.framework.breadcrumb.nav-label' | translate\">\n  <ol class=\"yuv-breadcrumb__list\">\n    @for (item of items(); track item.id) {\n      @if ($last) {\n        <li class=\"yuv-breadcrumb__item yuv-breadcrumb__item--current\" aria-current=\"page\">\n          {{ item.name }}\n        </li>\n      } @else {\n        <li class=\"yuv-breadcrumb__item\">\n          <a\n            class=\"yuv-breadcrumb__link\"\n            role=\"link\"\n            tabindex=\"0\"\n            (click)=\"onItemClick(item)\"\n            (keydown.enter)=\"onItemClick(item)\"\n          >\n            {{ item.name }}\n          </a>\n          <span class=\"yuv-breadcrumb__separator\" aria-hidden=\"true\">/</span>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}.yuv-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}.yuv-breadcrumb__item{display:flex;align-items:center}.yuv-breadcrumb__item--current{color:var(--yuv-breadcrumb-current-color, currentColor);font-weight:500}.yuv-breadcrumb__separator{margin:0 .375rem;color:var(--yuv-breadcrumb-separator-color, currentColor);opacity:.4;-webkit-user-select:none;user-select:none}.yuv-breadcrumb__link{color:var(--yuv-breadcrumb-link-color, inherit);text-decoration:none;border-radius:2px;cursor:pointer}.yuv-breadcrumb__link:hover{text-decoration:underline}.yuv-breadcrumb__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuuvisBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-breadcrumb', imports: [TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'yuv-breadcrumb'
+                    }, template: "<nav [attr.aria-label]=\"'yuv.framework.breadcrumb.nav-label' | translate\">\n  <ol class=\"yuv-breadcrumb__list\">\n    @for (item of items(); track item.id) {\n      @if ($last) {\n        <li class=\"yuv-breadcrumb__item yuv-breadcrumb__item--current\" aria-current=\"page\">\n          {{ item.name }}\n        </li>\n      } @else {\n        <li class=\"yuv-breadcrumb__item\">\n          <a\n            class=\"yuv-breadcrumb__link\"\n            role=\"link\"\n            tabindex=\"0\"\n            (click)=\"onItemClick(item)\"\n            (keydown.enter)=\"onItemClick(item)\"\n          >\n            {{ item.name }}\n          </a>\n          <span class=\"yuv-breadcrumb__separator\" aria-hidden=\"true\">/</span>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}.yuv-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}.yuv-breadcrumb__item{display:flex;align-items:center}.yuv-breadcrumb__item--current{color:var(--yuv-breadcrumb-current-color, currentColor);font-weight:500}.yuv-breadcrumb__separator{margin:0 .375rem;color:var(--yuv-breadcrumb-separator-color, currentColor);opacity:.4;-webkit-user-select:none;user-select:none}.yuv-breadcrumb__link{color:var(--yuv-breadcrumb-link-color, inherit);text-decoration:none;border-radius:2px;cursor:pointer}.yuv-breadcrumb__link:hover{text-decoration:underline}.yuv-breadcrumb__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { YuuvisBreadcrumbComponent };
+//# sourceMappingURL=yuuvis-client-framework-breadcrumb.mjs.map

package/fesm2022/yuuvis-client-framework-breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-breadcrumb.mjs","sources":["../../../../../libs/yuuvis/client-framework/breadcrumb/src/lib/breadcrumb/breadcrumb.component.ts","../../../../../libs/yuuvis/client-framework/breadcrumb/src/lib/breadcrumb/breadcrumb.component.html","../../../../../libs/yuuvis/client-framework/breadcrumb/src/yuuvis-client-framework-breadcrumb.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { TranslateModule } from '@yuuvis/client-core';\nimport { BreadcrumbItem } from '../models';\n\n/**\n * A generic, accessible breadcrumb navigation component.\n *\n * Renders a flat list of navigation items where the last item always represents\n * the current location (non-clickable) and all preceding items are interactive links.\n * Each link is individually focusable via standard Tab navigation.\n *\n * Key behaviors\n * - Items are rendered left-to-right, separated by a `/` divider\n * - The **last item** is always the current page — displayed as plain text (no link, no click handler)\n * - All **preceding items** are rendered as `<a>` links that emit the `navigate` output on click or Enter\n * - The component performs **no routing** — the parent handles all navigation logic via the emitted `BreadcrumbItem`\n * - Empty `items` array renders nothing (the host element stays in the DOM but is visually empty)\n *\n * Usage\n *\n * The parent builds the `BreadcrumbItem[]` and passes it as input. Typically this\n * array mirrors the object hierarchy the user navigated through (e.g. Case → Phase → Document).\n *\n * ```ts\n * // Parent component\n * breadcrumbItems: BreadcrumbItem[] = [\n *   { id: 'case-42',  name: 'Case #42' },      // ← clickable link\n *   { id: 'phase-3',  name: 'Review' },          // ← clickable link\n *   { id: 'doc-7',    name: 'Contract.pdf' }     // ← current location (non-clickable)\n * ];\n *\n * onBreadcrumbNavigate(item: BreadcrumbItem): void {\n *   // item.id is the domain-specific key — use it to navigate\n *   this.router.navigate(['/objects', item.id]);\n * }\n * ```\n *\n * ```html\n * <yuv-breadcrumb\n *   [items]=\"breadcrumbItems\"\n *   (navigate)=\"onBreadcrumbNavigate($event)\" />\n * ```\n *\n * Renders visually as:\n * ```\n * Case #42  /  Review  /  Contract.pdf\n * [link]       [link]      [current]\n * ```\n */\n@Component({\n  selector: 'yuv-breadcrumb',\n  imports: [TranslateModule],\n  templateUrl: './breadcrumb.component.html',\n  styleUrl: './breadcrumb.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'yuv-breadcrumb'\n  }\n})\nexport class YuuvisBreadcrumbComponent {\n  // #region Angular stuff (inputs, outputs)\n\n  /**\n   * Ordered list of breadcrumb items to display.\n   *\n   * Each `BreadcrumbItem` has `{ id: string; name: string }` — where `id` is a unique key\n   * (typically an object/route ID) and `name` is the display label rendered in the trail.\n   *\n   * Position determines rendering behavior:\n   * - All items except the last → clickable `<a>` links\n   * - Last item → non-clickable text (current location)\n   *\n   * Defaults to an empty array, which renders nothing.\n   *\n   * @example\n   * ```ts\n   * // Case → Document trail\n   * [items]=\"[\n   *   { id: 'case-42', name: 'Case #42' },\n   *   { id: 'doc-7',   name: 'Invoice.pdf' }\n   * ]\"\n   * ```\n   */\n  items = input<BreadcrumbItem[]>([]);\n\n  /**\n   * Emitted when the user activates a clickable breadcrumb item (click or Enter key).\n   *\n   * The emitted value is the full `BreadcrumbItem` object (`{ id, name }`) that was activated.\n   * Never emitted for the last item since it is non-clickable.\n   * The parent is responsible for performing the actual navigation using `item.id`.\n   *\n   * @example\n   * ```ts\n   * onBreadcrumbNavigate(item: BreadcrumbItem): void {\n   *   // item = { id: 'case-42', name: 'Case #42' }\n   *   this.router.navigate(['/objects', item.id]);\n   * }\n   * ```\n   */\n  navigate = output<BreadcrumbItem>();\n\n  // #endregion\n\n  // #region UI Responses\n\n  /**\n   * Handles click on a breadcrumb link and forwards the item to the parent via `navigate` output.\n   * Called only for non-last items (the template guards against calling this for the current location).\n   */\n  protected onItemClick(item: BreadcrumbItem): void {\n    this.navigate.emit(item);\n  }\n\n  // #endregion\n}\n","<nav [attr.aria-label]=\"'yuv.framework.breadcrumb.nav-label' | translate\">\n  <ol class=\"yuv-breadcrumb__list\">\n    @for (item of items(); track item.id) {\n      @if ($last) {\n        <li class=\"yuv-breadcrumb__item yuv-breadcrumb__item--current\" aria-current=\"page\">\n          {{ item.name }}\n        </li>\n      } @else {\n        <li class=\"yuv-breadcrumb__item\">\n          <a\n            class=\"yuv-breadcrumb__link\"\n            role=\"link\"\n            tabindex=\"0\"\n            (click)=\"onItemClick(item)\"\n            (keydown.enter)=\"onItemClick(item)\"\n          >\n            {{ item.name }}\n          </a>\n          <span class=\"yuv-breadcrumb__separator\" aria-hidden=\"true\">/</span>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;MAWU,yBAAyB,CAAA;AAVtC,IAAA,WAAA,GAAA;;AAaE;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAmB,EAAE,CAAC;AAEnC;;;;;;;;;;;;;;AAcG;QACH,IAAA,CAAA,QAAQ,GAAG,MAAM,EAAkB;AAepC,IAAA;;;AATC;;;AAGG;AACO,IAAA,WAAW,CAAC,IAAoB,EAAA;AACxC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;IAC1B;+GArDW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3DtC,8wBAwBA,EAAA,MAAA,EAAA,CAAA,gsBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED2BY,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAQd,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;+BACE,gBAAgB,EAAA,OAAA,EACjB,CAAC,eAAe,CAAC,mBAGT,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE;AACR,qBAAA,EAAA,QAAA,EAAA,8wBAAA,EAAA,MAAA,EAAA,CAAA,gsBAAA,CAAA,EAAA;;;AEzDH;;AAEG;;;;"}