@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-nav-group.mjs

@@ -0,0 +1,110 @@
+import * as i0 from '@angular/core';
+import { input, model, output, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { SidenavLinkComponent } from '@frame-kit/ui-ng/ui/sidenav-link';
+
+/**
+ * Expandable nav group — renders a trigger row (icon + label, optionally
+ * linked) and reveals projected children when `expanded` is true. Designed
+ * to sit inside a collapsible sidenav: when the outer shell is collapsed,
+ * clicking the row emits `requestOpen` so the host can pop the sidenav
+ * open, and the group auto-expands once it's visible.
+ */
+class NavGroupComponent {
+    // ===== INPUTS =====
+    /** Primary label text shown in the group trigger row. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional icon name shown to the leading side of the label. */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Size of the leading icon. */
+    iconSize = input('sm', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Optional router path; when set, the trigger navigates on click in expanded sidenav mode. */
+    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    /**
+     * True when the containing sidenav is in its collapsed rail state.
+     * In that mode, clicking the trigger BOTH navigates via
+     * `routerLink` AND emits `requestOpen` so the host can expand the
+     * outer shell — the user lands on the group's route with the
+     * sidenav already open. The trigger never expands its own children
+     * inside the rail (no horizontal room); the rail-to-expanded
+     * transition is what reveals them.
+     */
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * When true and the sidenav is in its expanded state, clicking the
+     * trigger row does NOT fold the group — children stay visible.
+     * Useful when the group's children are permanent navigation rather
+     * than a collapsible disclosure (e.g. a parent nav item that should
+     * always show its sub-pages while the sidenav is open). Clicks on
+     * the trigger still navigate via `routerLink`.
+     *
+     * Has no effect in collapsed (rail) mode — clicks there still
+     * navigate via `routerLink` and emit `requestOpen`, and `expanded`
+     * stays untouched regardless of this input.
+     */
+    lockedOpen = input(false, ...(ngDevMode ? [{ debugName: "lockedOpen" }] : /* istanbul ignore next */ []));
+    // ===== MODELS =====
+    /** Whether the group is currently expanded, showing projected child links. */
+    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /**
+     * Emitted when the group is clicked while the outer sidenav is
+     * collapsed. Hosts typically listen to open their collapsible shell
+     * so the projected children become visible.
+     */
+    requestOpen = output();
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return [
+            'fk-nav-group',
+            this.expanded() ? 'fk-nav-group--expanded' : '',
+            this.collapsed() ? 'fk-nav-group--collapsed' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    toggle() {
+        if (this.collapsed()) {
+            // In rail mode the children must not render inside the rail —
+            // there's no horizontal room and the visual hierarchy collapses.
+            // Just ask the host to expand the sidenav; once it does and
+            // `collapsed` flips to false, the consumer's `[expanded]`
+            // binding can push true and the children render in the now-open
+            // sidenav. We DO NOT set `expanded` here, so a click in rail
+            // mode never reveals children inside the rail itself.
+            this.requestOpen.emit();
+            return;
+        }
+        // Locked-open: in expanded sidenav mode, the trigger no longer
+        // folds the group on click. Navigation via `routerLink` still
+        // fires from the inner sidenav-link; this branch just suppresses
+        // the toggle behavior so children stay visible.
+        if (this.lockedOpen()) {
+            return;
+        }
+        this.expanded.update((v) => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NavGroupComponent, isStandalone: true, selector: "fk-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, lockedOpen: { classPropertyName: "lockedOpen", publicName: "lockedOpen", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", requestOpen: "requestOpen" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"fk-nav-group__row\" role=\"presentation\" (click)=\"toggle()\">\n  <fk-sidenav-link\n    class=\"fk-nav-group__link\"\n    [icon]=\"icon() ?? ''\"\n    [iconSize]=\"iconSize()\"\n    [label]=\"label()\"\n    [routerLink]=\"routerLink()\"\n  />\n</div>\n\n@if (expanded()) {\n  <!--\n    Stop child clicks from bubbling to the fk-nav-group host. When a\n    consumer binds [routerLink] on <fk-nav-group>, Angular attaches the\n    RouterLink directive to the host element in addition to our input \u2014\n    so an un-stopped child click would re-navigate to the parent URL\n    after the child's own RouterLink fires. This is an event absorber,\n    not an interactive element; keyboard activation fires click events\n    that bubble through the same path, so the a11y rules don't apply.\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-nav-group__children\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.fk-nav-group__row{display:flex;align-items:center;gap:var(--fk-nav-group-row-gap, var(--fk-rhythm-1, .25rem))}.fk-nav-group__link{flex:1;min-width:0}.fk-nav-group__children{display:flex;flex-direction:column;gap:var(--fk-nav-group-children-gap, var(--fk-rhythm-1, .25rem));padding-left:var(--fk-nav-group-children-indent, var(--fk-rhythm-6, 1.5rem));margin-top:var(--fk-nav-group-children-offset, var(--fk-rhythm-1, .25rem))}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SidenavLinkComponent, selector: "fk-sidenav-link", inputs: ["icon", "iconSize", "label", "routerLink", "exact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-nav-group', standalone: true, imports: [RouterModule, SidenavLinkComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-nav-group__row\" role=\"presentation\" (click)=\"toggle()\">\n  <fk-sidenav-link\n    class=\"fk-nav-group__link\"\n    [icon]=\"icon() ?? ''\"\n    [iconSize]=\"iconSize()\"\n    [label]=\"label()\"\n    [routerLink]=\"routerLink()\"\n  />\n</div>\n\n@if (expanded()) {\n  <!--\n    Stop child clicks from bubbling to the fk-nav-group host. When a\n    consumer binds [routerLink] on <fk-nav-group>, Angular attaches the\n    RouterLink directive to the host element in addition to our input \u2014\n    so an un-stopped child click would re-navigate to the parent URL\n    after the child's own RouterLink fires. This is an event absorber,\n    not an interactive element; keyboard activation fires click events\n    that bubble through the same path, so the a11y rules don't apply.\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-nav-group__children\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.fk-nav-group__row{display:flex;align-items:center;gap:var(--fk-nav-group-row-gap, var(--fk-rhythm-1, .25rem))}.fk-nav-group__link{flex:1;min-width:0}.fk-nav-group__children{display:flex;flex-direction:column;gap:var(--fk-nav-group-children-gap, var(--fk-rhythm-1, .25rem));padding-left:var(--fk-nav-group-children-indent, var(--fk-rhythm-6, 1.5rem));margin-top:var(--fk-nav-group-children-offset, var(--fk-rhythm-1, .25rem))}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], lockedOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedOpen", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], requestOpen: [{ type: i0.Output, args: ["requestOpen"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavGroupComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-nav-group.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-nav-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-nav-group.mjs","sources":["../../../../packages/ui-ng/ui/nav-group/nav-group.component.ts","../../../../packages/ui-ng/ui/nav-group/nav-group.component.html","../../../../packages/ui-ng/ui/nav-group/frame-kit-ui-ng-ui-nav-group.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\nimport type { IconSize } from '@frame-kit/ui-ng/core/icon';\nimport { SidenavLinkComponent } from '@frame-kit/ui-ng/ui/sidenav-link';\n\n/**\n * Expandable nav group — renders a trigger row (icon + label, optionally\n * linked) and reveals projected children when `expanded` is true. Designed\n * to sit inside a collapsible sidenav: when the outer shell is collapsed,\n * clicking the row emits `requestOpen` so the host can pop the sidenav\n * open, and the group auto-expands once it's visible.\n */\n@Component({\n  selector: 'fk-nav-group',\n  standalone: true,\n  imports: [RouterModule, SidenavLinkComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './nav-group.component.html',\n  styleUrl: './nav-group.component.scss',\n})\nexport class NavGroupComponent {\n  // ===== INPUTS =====\n  /** Primary label text shown in the group trigger row. */\n  readonly label = input.required<string>();\n  /** Optional icon name shown to the leading side of the label. */\n  readonly icon = input<string | null>(null);\n  /** Size of the leading icon. */\n  readonly iconSize = input<IconSize>('sm');\n  /** Optional router path; when set, the trigger navigates on click in expanded sidenav mode. */\n  readonly routerLink = input<string | string[] | null>(null);\n\n  /**\n   * True when the containing sidenav is in its collapsed rail state.\n   * In that mode, clicking the trigger BOTH navigates via\n   * `routerLink` AND emits `requestOpen` so the host can expand the\n   * outer shell — the user lands on the group's route with the\n   * sidenav already open. The trigger never expands its own children\n   * inside the rail (no horizontal room); the rail-to-expanded\n   * transition is what reveals them.\n   */\n  readonly collapsed = input<boolean>(false);\n\n  /**\n   * When true and the sidenav is in its expanded state, clicking the\n   * trigger row does NOT fold the group — children stay visible.\n   * Useful when the group's children are permanent navigation rather\n   * than a collapsible disclosure (e.g. a parent nav item that should\n   * always show its sub-pages while the sidenav is open). Clicks on\n   * the trigger still navigate via `routerLink`.\n   *\n   * Has no effect in collapsed (rail) mode — clicks there still\n   * navigate via `routerLink` and emit `requestOpen`, and `expanded`\n   * stays untouched regardless of this input.\n   */\n  readonly lockedOpen = input<boolean>(false);\n\n  // ===== MODELS =====\n  /** Whether the group is currently expanded, showing projected child links. */\n  readonly expanded = model<boolean>(false);\n\n  // ===== OUTPUTS =====\n  /**\n   * Emitted when the group is clicked while the outer sidenav is\n   * collapsed. Hosts typically listen to open their collapsible shell\n   * so the projected children become visible.\n   */\n  readonly requestOpen = output<void>();\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return [\n      'fk-nav-group',\n      this.expanded() ? 'fk-nav-group--expanded' : '',\n      this.collapsed() ? 'fk-nav-group--collapsed' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  protected toggle(): void {\n    if (this.collapsed()) {\n      // In rail mode the children must not render inside the rail —\n      // there's no horizontal room and the visual hierarchy collapses.\n      // Just ask the host to expand the sidenav; once it does and\n      // `collapsed` flips to false, the consumer's `[expanded]`\n      // binding can push true and the children render in the now-open\n      // sidenav. We DO NOT set `expanded` here, so a click in rail\n      // mode never reveals children inside the rail itself.\n      this.requestOpen.emit();\n\n      return;\n    }\n\n    // Locked-open: in expanded sidenav mode, the trigger no longer\n    // folds the group on click. Navigation via `routerLink` still\n    // fires from the inner sidenav-link; this branch just suppresses\n    // the toggle behavior so children stay visible.\n    if (this.lockedOpen()) {\n      return;\n    }\n\n    this.expanded.update((v) => !v);\n  }\n}\n","<div class=\"fk-nav-group__row\" role=\"presentation\" (click)=\"toggle()\">\n  <fk-sidenav-link\n    class=\"fk-nav-group__link\"\n    [icon]=\"icon() ?? ''\"\n    [iconSize]=\"iconSize()\"\n    [label]=\"label()\"\n    [routerLink]=\"routerLink()\"\n  />\n</div>\n\n@if (expanded()) {\n  <!--\n    Stop child clicks from bubbling to the fk-nav-group host. When a\n    consumer binds [routerLink] on <fk-nav-group>, Angular attaches the\n    RouterLink directive to the host element in addition to our input —\n    so an un-stopped child click would re-navigate to the parent URL\n    after the child's own RouterLink fires. This is an event absorber,\n    not an interactive element; keyboard activation fires click events\n    that bubble through the same path, so the a11y rules don't apply.\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-nav-group__children\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-ui-nav-separator.mjs

@@ -0,0 +1,91 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class NavSeparatorComponent {
+    // ===== INPUTS =====
+    /** Direction the separator line runs — vertical fills block height, horizontal fills inline width. */
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Custom length of the separator line as any CSS size value. */
+    length = input(null, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /** Custom thickness of the separator line as any CSS size value. */
+    thickness = input(null, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+    /** Custom margin around the separator as any CSS margin value. */
+    margin = input(null, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    /** Custom color of the separator line as any CSS color value. */
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** When true, the separator is hidden from assistive technology; when false it carries `role="separator"`. */
+    decorative = input(true, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return [
+            'fk-nav-separator',
+            `fk-nav-separator--${this.orientation()}`,
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostLength() {
+        return this.length();
+    }
+    get hostThickness() {
+        return this.thickness();
+    }
+    get hostMargin() {
+        return this.margin();
+    }
+    get hostColor() {
+        return this.color();
+    }
+    get hostAriaHidden() {
+        return this.decorative() ? 'true' : null;
+    }
+    get hostRole() {
+        return this.decorative() ? null : 'separator';
+    }
+    get hostAriaOrientation() {
+        return this.decorative() ? null : this.orientation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NavSeparatorComponent, isStandalone: true, selector: "fk-nav-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.--fk-nav-separator-length": "this.hostLength", "style.--fk-nav-separator-thickness": "this.hostThickness", "style.--fk-nav-separator-margin": "this.hostMargin", "style.--fk-nav-separator-color": "this.hostColor", "attr.aria-hidden": "this.hostAriaHidden", "attr.role": "this.hostRole", "attr.aria-orientation": "this.hostAriaOrientation" } }, ngImport: i0, template: '', isInline: true, styles: [":host{flex-shrink:0;background-color:var(--fk-nav-separator-color, var(--fk-color-border, #d9e2ee))}:host(.fk-nav-separator--vertical){display:inline-block;align-self:center;width:var(--fk-nav-separator-thickness, 1px);height:var(--fk-nav-separator-length, 1.5rem);margin:var(--fk-nav-separator-margin, 0 .75rem)}:host(.fk-nav-separator--horizontal){display:block;align-self:stretch;width:var(--fk-nav-separator-length, auto);height:var(--fk-nav-separator-thickness, 1px);margin:var(--fk-nav-separator-margin, .5rem 0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-nav-separator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: '', styles: [":host{flex-shrink:0;background-color:var(--fk-nav-separator-color, var(--fk-color-border, #d9e2ee))}:host(.fk-nav-separator--vertical){display:inline-block;align-self:center;width:var(--fk-nav-separator-thickness, 1px);height:var(--fk-nav-separator-length, 1.5rem);margin:var(--fk-nav-separator-margin, 0 .75rem)}:host(.fk-nav-separator--horizontal){display:block;align-self:stretch;width:var(--fk-nav-separator-length, auto);height:var(--fk-nav-separator-thickness, 1px);margin:var(--fk-nav-separator-margin, .5rem 0)}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostLength: [{
+                type: HostBinding,
+                args: ['style.--fk-nav-separator-length']
+            }], hostThickness: [{
+                type: HostBinding,
+                args: ['style.--fk-nav-separator-thickness']
+            }], hostMargin: [{
+                type: HostBinding,
+                args: ['style.--fk-nav-separator-margin']
+            }], hostColor: [{
+                type: HostBinding,
+                args: ['style.--fk-nav-separator-color']
+            }], hostAriaHidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaOrientation: [{
+                type: HostBinding,
+                args: ['attr.aria-orientation']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavSeparatorComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-nav-separator.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-nav-separator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-nav-separator.mjs","sources":["../../../../packages/ui-ng/ui/nav-separator/nav-separator.component.ts","../../../../packages/ui-ng/ui/nav-separator/frame-kit-ui-ng-ui-nav-separator.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { NavSeparatorOrientation } from './nav-separator.types';\n\n@Component({\n  selector: 'fk-nav-separator',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: '',\n  styleUrl: './nav-separator.component.scss',\n})\nexport class NavSeparatorComponent {\n  // ===== INPUTS =====\n  /** Direction the separator line runs — vertical fills block height, horizontal fills inline width. */\n  readonly orientation = input<NavSeparatorOrientation>('vertical');\n  /** Custom length of the separator line as any CSS size value. */\n  readonly length = input<string | null>(null);\n  /** Custom thickness of the separator line as any CSS size value. */\n  readonly thickness = input<string | null>(null);\n  /** Custom margin around the separator as any CSS margin value. */\n  readonly margin = input<string | null>(null);\n  /** Custom color of the separator line as any CSS color value. */\n  readonly color = input<string | null>(null);\n  /** When true, the separator is hidden from assistive technology; when false it carries `role=\"separator\"`. */\n  readonly decorative = input<boolean>(true);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return [\n      'fk-nav-separator',\n      `fk-nav-separator--${this.orientation()}`,\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('style.--fk-nav-separator-length')\n  get hostLength() {\n    return this.length();\n  }\n\n  @HostBinding('style.--fk-nav-separator-thickness')\n  get hostThickness() {\n    return this.thickness();\n  }\n\n  @HostBinding('style.--fk-nav-separator-margin')\n  get hostMargin() {\n    return this.margin();\n  }\n\n  @HostBinding('style.--fk-nav-separator-color')\n  get hostColor() {\n    return this.color();\n  }\n\n  @HostBinding('attr.aria-hidden')\n  get hostAriaHidden() {\n    return this.decorative() ? 'true' : null;\n  }\n\n  @HostBinding('attr.role')\n  get hostRole() {\n    return this.decorative() ? null : 'separator';\n  }\n\n  @HostBinding('attr.aria-orientation')\n  get hostAriaOrientation() {\n    return this.decorative() ? null : this.orientation();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAiBa,qBAAqB,CAAA;;;AAGvB,IAAA,WAAW,GAAG,KAAK,CAA0B,UAAU,kFAAC;;AAExD,IAAA,MAAM,GAAG,KAAK,CAAgB,IAAI,6EAAC;;AAEnC,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;AAEtC,IAAA,MAAM,GAAG,KAAK,CAAgB,IAAI,6EAAC;;AAEnC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;;AAElC,IAAA,UAAU,GAAG,KAAK,CAAU,IAAI,iFAAC;;AAGjC,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;;AAG7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;QAC/B,OAAO;YACL,kBAAkB;AAClB,YAAA,CAAA,kBAAA,EAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAE;YACzC,IAAI,CAAC,SAAS,EAAE;AACjB;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE;IACtB;AAEA,IAAA,IACI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;IACzB;AAEA,IAAA,IACI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE;IACtB;AAEA,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;IACrB;AAEA,IAAA,IACI,cAAc,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,GAAG,IAAI;IAC1C;AAEA,IAAA,IACI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,GAAG,WAAW;IAC/C;AAEA,IAAA,IACI,mBAAmB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;IACtD;uGAnEW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,82CAHtB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2gBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGD,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,cAChB,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,YACrC,EAAE,EAAA,MAAA,EAAA,CAAA,2gBAAA,CAAA,EAAA;;sBAgCX,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,iCAAiC;;sBAK7C,WAAW;uBAAC,oCAAoC;;sBAKhD,WAAW;uBAAC,iCAAiC;;sBAK7C,WAAW;uBAAC,gCAAgC;;sBAK5C,WAAW;uBAAC,kBAAkB;;sBAK9B,WAAW;uBAAC,WAAW;;sBAKvB,WAAW;uBAAC,uBAAuB;;;ACjFtC;;AAEG;;;;"}

package/fesm2022/frame-kit-ui-ng-ui-node-tree-breadcrumb.mjs

@@ -0,0 +1,86 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Builds an ancestry path from the root to the given node.
+ * Returns an array ordered root-first, selected-node-last.
+ */
+function buildAncestryPath(nodeId, nodes) {
+    const nodeMap = new Map();
+    for (const node of nodes) {
+        nodeMap.set(node.id, node);
+    }
+    const path = [];
+    let current = nodeMap.get(nodeId);
+    while (current) {
+        path.push({
+            id: current.id,
+            label: current.label,
+            icon: current.icon,
+        });
+        if (current.parentId) {
+            current = nodeMap.get(current.parentId);
+        }
+        else {
+            current = undefined;
+        }
+    }
+    path.reverse();
+    return path;
+}
+
+class NodeTreeBreadcrumbComponent {
+    // ===== INPUTS =====
+    /** Flat array of `TreeNode` objects used to compute the ancestry path. */
+    nodes = input.required(...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** ID of the node whose full ancestor path is displayed as breadcrumbs. */
+    selectedNodeId = input(...(ngDevMode ? [undefined, { debugName: "selectedNodeId" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the user clicks a breadcrumb, emitting that crumb's node data. */
+    nodeSelect = output();
+    // ===== COMPUTED =====
+    crumbs = computed(() => {
+        const id = this.selectedNodeId();
+        if (!id) {
+            return [];
+        }
+        return buildAncestryPath(id, this.nodes());
+    }, ...(ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return ['fk-node-tree-breadcrumb', this.className()]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    role = 'navigation';
+    ariaLabel = 'Breadcrumb';
+    onCrumbClick(crumb) {
+        this.nodeSelect.emit(crumb);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NodeTreeBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NodeTreeBreadcrumbComponent, isStandalone: true, selector: "fk-node-tree-breadcrumb", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect" }, host: { properties: { "class": "this.hostClass", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, ngImport: i0, template: "<ol class=\"fk-node-tree-breadcrumb__list\">\n  @for (crumb of crumbs(); track crumb.id; let last = $last) {\n    <li class=\"fk-node-tree-breadcrumb__item\">\n      @if (last) {\n        <span class=\"fk-node-tree-breadcrumb__current\" aria-current=\"location\">\n          {{ crumb.label }}\n        </span>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"fk-node-tree-breadcrumb__link\"\n          (click)=\"onCrumbClick(crumb)\"\n        >\n          {{ crumb.label }}\n        </button>\n\n        <svg\n          class=\"fk-node-tree-breadcrumb__separator\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </li>\n  }\n</ol>\n", styles: [".fk-node-tree-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fk-node-tree-breadcrumb-gap, var(--fk-rhythm-1, .25rem));margin:0;padding:0;list-style:none;font-size:var(--fk-node-tree-breadcrumb-font-size, var(--fk-typography-caption-font-size, .75rem));line-height:1.5}.fk-node-tree-breadcrumb__item{display:flex;align-items:center;gap:var(--fk-node-tree-breadcrumb-gap, var(--fk-rhythm-1, .25rem))}.fk-node-tree-breadcrumb__link{display:inline-flex;align-items:center;padding:0;border:none;background:none;color:var(--fk-node-tree-breadcrumb-link-color, var(--fk-color-muted, #64748b));font:inherit;text-transform:inherit;cursor:pointer}.fk-node-tree-breadcrumb__link:hover{color:var(--fk-node-tree-breadcrumb-link-color-hover, var(--fk-color-text, #1f2d3d));text-decoration:underline}.fk-node-tree-breadcrumb__link:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:2px;border-radius:var(--fk-radius-sm, .25rem)}.fk-node-tree-breadcrumb__current{display:inline-flex;align-items:center;color:var(--fk-node-tree-breadcrumb-current-color, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-node-tree-breadcrumb-current-font-weight, var(--fk-font-weight-medium, 500))}.fk-node-tree-breadcrumb__separator{display:flex;align-items:center;color:var(--fk-node-tree-breadcrumb-separator-color, var(--fk-color-muted, #64748b));-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NodeTreeBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-node-tree-breadcrumb', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"fk-node-tree-breadcrumb__list\">\n  @for (crumb of crumbs(); track crumb.id; let last = $last) {\n    <li class=\"fk-node-tree-breadcrumb__item\">\n      @if (last) {\n        <span class=\"fk-node-tree-breadcrumb__current\" aria-current=\"location\">\n          {{ crumb.label }}\n        </span>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"fk-node-tree-breadcrumb__link\"\n          (click)=\"onCrumbClick(crumb)\"\n        >\n          {{ crumb.label }}\n        </button>\n\n        <svg\n          class=\"fk-node-tree-breadcrumb__separator\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </li>\n  }\n</ol>\n", styles: [".fk-node-tree-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fk-node-tree-breadcrumb-gap, var(--fk-rhythm-1, .25rem));margin:0;padding:0;list-style:none;font-size:var(--fk-node-tree-breadcrumb-font-size, var(--fk-typography-caption-font-size, .75rem));line-height:1.5}.fk-node-tree-breadcrumb__item{display:flex;align-items:center;gap:var(--fk-node-tree-breadcrumb-gap, var(--fk-rhythm-1, .25rem))}.fk-node-tree-breadcrumb__link{display:inline-flex;align-items:center;padding:0;border:none;background:none;color:var(--fk-node-tree-breadcrumb-link-color, var(--fk-color-muted, #64748b));font:inherit;text-transform:inherit;cursor:pointer}.fk-node-tree-breadcrumb__link:hover{color:var(--fk-node-tree-breadcrumb-link-color-hover, var(--fk-color-text, #1f2d3d));text-decoration:underline}.fk-node-tree-breadcrumb__link:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:2px;border-radius:var(--fk-radius-sm, .25rem)}.fk-node-tree-breadcrumb__current{display:inline-flex;align-items:center;color:var(--fk-node-tree-breadcrumb-current-color, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-node-tree-breadcrumb-current-font-weight, var(--fk-font-weight-medium, 500))}.fk-node-tree-breadcrumb__separator{display:flex;align-items:center;color:var(--fk-node-tree-breadcrumb-separator-color, var(--fk-color-muted, #64748b));-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], selectedNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeId", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NodeTreeBreadcrumbComponent, buildAncestryPath };
+//# sourceMappingURL=frame-kit-ui-ng-ui-node-tree-breadcrumb.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-node-tree-breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-node-tree-breadcrumb.mjs","sources":["../../../../packages/ui-ng/ui/node-tree-breadcrumb/node-tree-breadcrumb.utils.ts","../../../../packages/ui-ng/ui/node-tree-breadcrumb/node-tree-breadcrumb.component.ts","../../../../packages/ui-ng/ui/node-tree-breadcrumb/node-tree-breadcrumb.component.html","../../../../packages/ui-ng/ui/node-tree-breadcrumb/frame-kit-ui-ng-ui-node-tree-breadcrumb.ts"],"sourcesContent":["import type { TreeNode } from '@frame-kit/ui-ng/ui/node-tree';\nimport type { NodeTreeBreadcrumbItem } from './node-tree-breadcrumb.types';\n\n/**\n * Builds an ancestry path from the root to the given node.\n * Returns an array ordered root-first, selected-node-last.\n */\nexport function buildAncestryPath(\n  nodeId: string,\n  nodes: TreeNode[],\n): NodeTreeBreadcrumbItem[] {\n  const nodeMap = new Map<string, TreeNode>();\n\n  for (const node of nodes) {\n    nodeMap.set(node.id, node);\n  }\n\n  const path: NodeTreeBreadcrumbItem[] = [];\n\n  let current = nodeMap.get(nodeId);\n\n  while (current) {\n    path.push({\n      id: current.id,\n      label: current.label,\n      icon: current.icon,\n    });\n\n    if (current.parentId) {\n      current = nodeMap.get(current.parentId);\n    } else {\n      current = undefined;\n    }\n  }\n\n  path.reverse();\n\n  return path;\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\n\nimport type { TreeNode } from '@frame-kit/ui-ng/ui/node-tree';\nimport type { NodeTreeBreadcrumbItem } from './node-tree-breadcrumb.types';\nimport { buildAncestryPath } from './node-tree-breadcrumb.utils';\n\n@Component({\n  selector: 'fk-node-tree-breadcrumb',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './node-tree-breadcrumb.component.html',\n  styleUrl: './node-tree-breadcrumb.component.scss',\n})\nexport class NodeTreeBreadcrumbComponent {\n  // ===== INPUTS =====\n  /** Flat array of `TreeNode` objects used to compute the ancestry path. */\n  readonly nodes = input.required<TreeNode[]>();\n  /** ID of the node whose full ancestor path is displayed as breadcrumbs. */\n  readonly selectedNodeId = input<string | undefined>();\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== OUTPUTS =====\n  /** Fires when the user clicks a breadcrumb, emitting that crumb's node data. */\n  readonly nodeSelect = output<NodeTreeBreadcrumbItem>();\n\n  // ===== COMPUTED =====\n  readonly crumbs = computed<NodeTreeBreadcrumbItem[]>(() => {\n    const id = this.selectedNodeId();\n\n    if (!id) {\n      return [];\n    }\n\n    return buildAncestryPath(id, this.nodes());\n  });\n\n  readonly classes = computed(() => {\n    return ['fk-node-tree-breadcrumb', this.className()]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.role')\n  readonly role = 'navigation';\n\n  @HostBinding('attr.aria-label')\n  readonly ariaLabel = 'Breadcrumb';\n\n  onCrumbClick(crumb: NodeTreeBreadcrumbItem): void {\n    this.nodeSelect.emit(crumb);\n  }\n}\n","<ol class=\"fk-node-tree-breadcrumb__list\">\n  @for (crumb of crumbs(); track crumb.id; let last = $last) {\n    <li class=\"fk-node-tree-breadcrumb__item\">\n      @if (last) {\n        <span class=\"fk-node-tree-breadcrumb__current\" aria-current=\"location\">\n          {{ crumb.label }}\n        </span>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"fk-node-tree-breadcrumb__link\"\n          (click)=\"onCrumbClick(crumb)\"\n        >\n          {{ crumb.label }}\n        </button>\n\n        <svg\n          class=\"fk-node-tree-breadcrumb__separator\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </li>\n  }\n</ol>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}