@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-dropdown-menu.mjs

@@ -0,0 +1,398 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, ElementRef, input, output, signal, contentChild, viewChild, DestroyRef, computed, HostListener, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+const FK_DROPDOWN_PANEL = new InjectionToken('FK_DROPDOWN_PANEL');
+class DropdownPanelDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DropdownPanelDirective, isStandalone: true, selector: "[fkDropdownPanel]", providers: [
+            { provide: FK_DROPDOWN_PANEL, useExisting: DropdownPanelDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkDropdownPanel]',
+                    standalone: true,
+                    providers: [
+                        { provide: FK_DROPDOWN_PANEL, useExisting: DropdownPanelDirective },
+                    ],
+                }]
+        }] });
+
+const FK_DROPDOWN_TRIGGER = new InjectionToken('FK_DROPDOWN_TRIGGER');
+class DropdownTriggerDirective {
+    elRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DropdownTriggerDirective, isStandalone: true, selector: "[fkDropdownTrigger]", host: { attributes: { "aria-haspopup": "menu", "aria-expanded": "false" } }, providers: [
+            { provide: FK_DROPDOWN_TRIGGER, useExisting: DropdownTriggerDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkDropdownTrigger]',
+                    standalone: true,
+                    providers: [
+                        { provide: FK_DROPDOWN_TRIGGER, useExisting: DropdownTriggerDirective },
+                    ],
+                    host: {
+                        'aria-haspopup': 'menu',
+                        'aria-expanded': 'false',
+                    },
+                }]
+        }] });
+
+class DropdownMenuComponent {
+    // ===== INPUTS =====
+    /** Preferred placement of the panel relative to the trigger. */
+    placement = input('bottom-end', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** When true, the trigger is non-interactive and the panel cannot open. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** When true, the panel is appended to `document.body` instead of rendered inline. */
+    portal = input(false, ...(ngDevMode ? [{ debugName: "portal" }] : /* istanbul ignore next */ []));
+    /** Extra CSS class applied to the floating panel element. */
+    panelClass = input(null, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the dropdown panel opens. */
+    menuOpen = output();
+    /** Fires when the dropdown panel closes. */
+    menuClose = output();
+    // ===== STATE =====
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    // ===== REFS =====
+    triggerRef = contentChild(FK_DROPDOWN_TRIGGER, ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = contentChild(FK_DROPDOWN_PANEL, ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    menuPanelEl = viewChild('menuPanel', ...(ngDevMode ? [{ debugName: "menuPanelEl" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    portalCleanup = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.cleanupPortal();
+        });
+    }
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return [
+            'fk-dropdown-menu',
+            this.isOpen() ? 'fk-dropdown-menu--open' : '',
+            this.disabled() ? 'fk-dropdown-menu--disabled' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    // ===== HOST CLICK — captures clicks from projected trigger =====
+    onHostClick(event) {
+        const trigger = this.triggerRef();
+        if (!trigger) {
+            return;
+        }
+        const triggerEl = trigger.elRef.nativeElement;
+        if (triggerEl.contains(event.target)) {
+            this.toggle();
+        }
+    }
+    // ===== HOST KEYDOWN — captures keydown from projected trigger =====
+    onHostKeydown(event) {
+        const trigger = this.triggerRef();
+        if (!trigger) {
+            return;
+        }
+        const triggerEl = trigger.elRef.nativeElement;
+        if (triggerEl.contains(event.target)) {
+            this.onTriggerKeydown(event);
+        }
+    }
+    // ===== OUTSIDE CLICK =====
+    onDocumentClick(event) {
+        if (!this.isOpen()) {
+            return;
+        }
+        const host = this.elRef.nativeElement;
+        const panel = this.menuPanelEl()?.nativeElement;
+        if (host.contains(event.target)) {
+            return;
+        }
+        if (panel && panel.contains(event.target)) {
+            return;
+        }
+        this.close();
+    }
+    // ===== KEYBOARD =====
+    onDocumentKeydown(event) {
+        if (!this.isOpen()) {
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                this.focusTrigger();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNext();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusPrev();
+                break;
+            case 'Tab':
+                this.close();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusFirst();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusLast();
+                break;
+        }
+    }
+    // ===== ACTIONS =====
+    /** Toggles the dropdown panel open or closed if not disabled. */
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Opens the dropdown panel and positions it relative to the trigger. */
+    open() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isOpen.set(true);
+        this.updateTriggerAria(true);
+        this.menuOpen.emit();
+        requestAnimationFrame(() => {
+            if (this.portal()) {
+                this.attachPortal();
+            }
+            this.positionPanel();
+        });
+    }
+    /** Closes the dropdown panel and cleans up any portal attachment. */
+    close() {
+        this.cleanupPortal();
+        this.isOpen.set(false);
+        this.updateTriggerAria(false);
+        this.menuClose.emit();
+    }
+    onPanelItemSelect() {
+        this.close();
+    }
+    // ===== TRIGGER KEYBOARD =====
+    onTriggerKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+        }
+        if (event.key === 'ArrowDown' && !this.isOpen()) {
+            event.preventDefault();
+            this.open();
+            requestAnimationFrame(() => this.focusFirst());
+        }
+    }
+    // ===== FOCUS MANAGEMENT =====
+    getMenuItems() {
+        const panel = this.menuPanelEl()?.nativeElement;
+        if (!panel) {
+            return [];
+        }
+        return Array.from(panel.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+    }
+    focusNext() {
+        const items = this.getMenuItems();
+        const current = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));
+        const next = current + 1;
+        if (next < items.length) {
+            items[next].focus();
+        }
+    }
+    focusPrev() {
+        const items = this.getMenuItems();
+        const current = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));
+        const prev = current - 1;
+        if (prev >= 0) {
+            items[prev].focus();
+        }
+    }
+    focusFirst() {
+        const items = this.getMenuItems();
+        if (items.length > 0) {
+            items[0].focus();
+        }
+    }
+    focusLast() {
+        const items = this.getMenuItems();
+        if (items.length > 0) {
+            items[items.length - 1].focus();
+        }
+    }
+    focusTrigger() {
+        const trigger = this.triggerRef();
+        if (trigger) {
+            trigger.elRef.nativeElement.focus();
+        }
+    }
+    updateTriggerAria(open) {
+        const trigger = this.triggerRef();
+        if (trigger) {
+            trigger.elRef.nativeElement.setAttribute('aria-expanded', String(open));
+        }
+    }
+    // ===== PORTAL =====
+    attachPortal() {
+        const panel = this.menuPanelEl()?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        document.body.appendChild(panel);
+        panel.style.position = 'fixed';
+        panel.style.zIndex = '1000';
+        this.portalCleanup = () => {
+            if (panel.parentNode === document.body) {
+                document.body.removeChild(panel);
+            }
+        };
+    }
+    cleanupPortal() {
+        if (this.portalCleanup) {
+            this.portalCleanup();
+            this.portalCleanup = null;
+        }
+    }
+    // ===== PANEL POSITIONING =====
+    positionPanel() {
+        const panel = this.menuPanelEl()?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        const host = this.elRef.nativeElement;
+        const hostRect = host.getBoundingClientRect();
+        const panelRect = panel.getBoundingClientRect();
+        const viewportH = window.innerHeight;
+        const viewportW = window.innerWidth;
+        const gap = 4;
+        if (this.portal()) {
+            this.positionPortalPanel(panel, hostRect, panelRect, viewportH, viewportW, gap);
+        }
+        else {
+            this.positionInlinePanel(panel, hostRect, panelRect, viewportH, viewportW, gap);
+        }
+    }
+    positionPortalPanel(panel, hostRect, panelRect, viewportH, viewportW, gap) {
+        const spaceBelow = viewportH - hostRect.bottom;
+        const spaceAbove = hostRect.top;
+        if (spaceBelow >= panelRect.height + gap || spaceBelow >= spaceAbove) {
+            panel.style.top = hostRect.bottom + gap + 'px';
+            panel.style.bottom = '';
+        }
+        else {
+            panel.style.top = '';
+            panel.style.bottom = viewportH - hostRect.top + gap + 'px';
+        }
+        const preferred = this.placement();
+        if (preferred === 'bottom-end') {
+            const left = hostRect.right - panelRect.width;
+            panel.style.left = Math.max(0, left) + 'px';
+            panel.style.right = '';
+        }
+        else {
+            const left = hostRect.left;
+            if (left + panelRect.width > viewportW) {
+                panel.style.left = '';
+                panel.style.right = '0';
+            }
+            else {
+                panel.style.left = left + 'px';
+                panel.style.right = '';
+            }
+        }
+    }
+    positionInlinePanel(panel, hostRect, panelRect, viewportH, viewportW, gap) {
+        panel.style.top = '';
+        panel.style.bottom = '';
+        panel.style.left = '';
+        panel.style.right = '';
+        panel.style.marginTop = '';
+        panel.style.marginBottom = '';
+        const spaceBelow = viewportH - hostRect.bottom;
+        const spaceAbove = hostRect.top;
+        if (spaceBelow >= panelRect.height + gap || spaceBelow >= spaceAbove) {
+            panel.style.top = '100%';
+            panel.style.marginTop = gap + 'px';
+        }
+        else {
+            panel.style.bottom = '100%';
+            panel.style.marginBottom = gap + 'px';
+        }
+        const preferred = this.placement();
+        if (preferred === 'bottom-end') {
+            panel.style.right = '0';
+            const panelLeft = hostRect.right - panelRect.width;
+            if (panelLeft < 0) {
+                panel.style.right = '';
+                panel.style.left = -hostRect.left + 'px';
+            }
+        }
+        else {
+            panel.style.left = '0';
+            const panelRight = hostRect.left + panelRect.width;
+            if (panelRight > viewportW) {
+                panel.style.left = '';
+                panel.style.right = -(viewportW - hostRect.right) + 'px';
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownMenuComponent, isStandalone: true, selector: "fk-dropdown-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpen: "menuOpen", menuClose: "menuClose" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "document:click": "onDocumentClick($event)", "document:keydown": "onDocumentKeydown($event)" }, properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, queries: [{ propertyName: "triggerRef", first: true, predicate: FK_DROPDOWN_TRIGGER, descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: FK_DROPDOWN_PANEL, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuPanelEl", first: true, predicate: ["menuPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[fkDropdownTrigger]\" />\n\n@if (isOpen()) {\n  <div\n    #menuPanel\n    class=\"fk-dropdown-menu__panel\"\n    [class]=\"\n      'fk-dropdown-menu__panel' + (panelClass() ? ' ' + panelClass() : '')\n    \"\n    role=\"menu\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (fkmenuitemselect)=\"onPanelItemSelect()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelRef()?.templateRef ?? null\" />\n  </div>\n}\n", styles: [":host{display:inline-block;position:relative}:host.fk-dropdown-menu--disabled{pointer-events:none}.fk-dropdown-menu__panel{position:absolute;z-index:var(--fk-dropdown-menu-panel-z, 100);min-width:var(--fk-dropdown-menu-panel-min-width, 12rem);padding:var(--fk-dropdown-menu-panel-padding, var(--fk-rhythm-1, .25rem));border-radius:var(--fk-dropdown-menu-panel-radius, var(--fk-radius-lg, .75rem));background-color:var(--fk-dropdown-menu-panel-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-dropdown-menu-panel-border, var(--fk-color-border, #d9e2ee));box-shadow:var(--fk-dropdown-menu-panel-shadow, 0 4px 16px rgba(0, 0, 0, .08));animation:fk-dropdown-menu-enter var(--fk-dropdown-menu-enter-duration, var(--fk-motion-duration-fast, .12s)) var(--fk-dropdown-menu-enter-easing, var(--fk-motion-easing-out, ease-out))}@keyframes fk-dropdown-menu-enter{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.fk-dropdown-menu__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-dropdown-menu', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[fkDropdownTrigger]\" />\n\n@if (isOpen()) {\n  <div\n    #menuPanel\n    class=\"fk-dropdown-menu__panel\"\n    [class]=\"\n      'fk-dropdown-menu__panel' + (panelClass() ? ' ' + panelClass() : '')\n    \"\n    role=\"menu\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (fkmenuitemselect)=\"onPanelItemSelect()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelRef()?.templateRef ?? null\" />\n  </div>\n}\n", styles: [":host{display:inline-block;position:relative}:host.fk-dropdown-menu--disabled{pointer-events:none}.fk-dropdown-menu__panel{position:absolute;z-index:var(--fk-dropdown-menu-panel-z, 100);min-width:var(--fk-dropdown-menu-panel-min-width, 12rem);padding:var(--fk-dropdown-menu-panel-padding, var(--fk-rhythm-1, .25rem));border-radius:var(--fk-dropdown-menu-panel-radius, var(--fk-radius-lg, .75rem));background-color:var(--fk-dropdown-menu-panel-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-dropdown-menu-panel-border, var(--fk-color-border, #d9e2ee));box-shadow:var(--fk-dropdown-menu-panel-shadow, 0 4px 16px rgba(0, 0, 0, .08));animation:fk-dropdown-menu-enter var(--fk-dropdown-menu-enter-duration, var(--fk-motion-duration-fast, .12s)) var(--fk-dropdown-menu-enter-easing, var(--fk-motion-easing-out, ease-out))}@keyframes fk-dropdown-menu-enter{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.fk-dropdown-menu__panel{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], menuOpen: [{ type: i0.Output, args: ["menuOpen"] }], menuClose: [{ type: i0.Output, args: ["menuClose"] }], triggerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_DROPDOWN_TRIGGER), { isSignal: true }] }], panelRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_DROPDOWN_PANEL), { isSignal: true }] }], menuPanelEl: [{ type: i0.ViewChild, args: ['menuPanel', { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onHostKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownMenuComponent, DropdownPanelDirective, DropdownTriggerDirective, FK_DROPDOWN_PANEL, FK_DROPDOWN_TRIGGER };
+//# sourceMappingURL=frame-kit-ui-ng-ui-dropdown-menu.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-dropdown-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-dropdown-menu.mjs","sources":["../../../../packages/ui-ng/ui/dropdown-menu/dropdown-panel.directive.ts","../../../../packages/ui-ng/ui/dropdown-menu/dropdown-trigger.directive.ts","../../../../packages/ui-ng/ui/dropdown-menu/dropdown-menu.component.ts","../../../../packages/ui-ng/ui/dropdown-menu/dropdown-menu.component.html","../../../../packages/ui-ng/ui/dropdown-menu/frame-kit-ui-ng-ui-dropdown-menu.ts"],"sourcesContent":["import { Directive, inject, InjectionToken, TemplateRef } from '@angular/core';\n\nexport const FK_DROPDOWN_PANEL = new InjectionToken<DropdownPanelDirective>(\n  'FK_DROPDOWN_PANEL',\n);\n\n@Directive({\n  selector: '[fkDropdownPanel]',\n  standalone: true,\n  providers: [\n    { provide: FK_DROPDOWN_PANEL, useExisting: DropdownPanelDirective },\n  ],\n})\nexport class DropdownPanelDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, ElementRef, inject, InjectionToken } from '@angular/core';\n\nexport const FK_DROPDOWN_TRIGGER = new InjectionToken<DropdownTriggerDirective>(\n  'FK_DROPDOWN_TRIGGER',\n);\n\n@Directive({\n  selector: '[fkDropdownTrigger]',\n  standalone: true,\n  providers: [\n    { provide: FK_DROPDOWN_TRIGGER, useExisting: DropdownTriggerDirective },\n  ],\n  host: {\n    'aria-haspopup': 'menu',\n    'aria-expanded': 'false',\n  },\n})\nexport class DropdownTriggerDirective {\n  readonly elRef = inject(ElementRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  DestroyRef,\n  ElementRef,\n  HostBinding,\n  HostListener,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport type { DropdownPlacement } from './dropdown-menu.types';\nimport { FK_DROPDOWN_PANEL } from './dropdown-panel.directive';\nimport { FK_DROPDOWN_TRIGGER } from './dropdown-trigger.directive';\n\n@Component({\n  selector: 'fk-dropdown-menu',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './dropdown-menu.component.html',\n  styleUrl: './dropdown-menu.component.scss',\n})\nexport class DropdownMenuComponent {\n  // ===== INPUTS =====\n  /** Preferred placement of the panel relative to the trigger. */\n  readonly placement = input<DropdownPlacement>('bottom-end');\n  /** When true, the trigger is non-interactive and the panel cannot open. */\n  readonly disabled = input<boolean>(false);\n  /** When true, the panel is appended to `document.body` instead of rendered inline. */\n  readonly portal = input<boolean>(false);\n  /** Extra CSS class applied to the floating panel element. */\n  readonly panelClass = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n\n  // ===== OUTPUTS =====\n  /** Fires when the dropdown panel opens. */\n  readonly menuOpen = output<void>();\n  /** Fires when the dropdown panel closes. */\n  readonly menuClose = output<void>();\n\n  // ===== STATE =====\n  readonly isOpen = signal(false);\n\n  // ===== REFS =====\n  readonly triggerRef = contentChild(FK_DROPDOWN_TRIGGER);\n  readonly panelRef = contentChild(FK_DROPDOWN_PANEL);\n  readonly menuPanelEl = viewChild<ElementRef<HTMLElement>>('menuPanel');\n\n  private readonly elRef = inject(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n\n  private portalCleanup: (() => void) | null = null;\n\n  constructor() {\n    this.destroyRef.onDestroy(() => {\n      this.cleanupPortal();\n    });\n  }\n\n  // ===== COMPUTED =====\n\n  readonly classes = computed(() => {\n    return [\n      'fk-dropdown-menu',\n      this.isOpen() ? 'fk-dropdown-menu--open' : '',\n      this.disabled() ? 'fk-dropdown-menu--disabled' : '',\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('attr.id')\n  get hostId(): string | null {\n    return this.id();\n  }\n\n  // ===== HOST CLICK — captures clicks from projected trigger =====\n\n  @HostListener('click', ['$event'])\n  onHostClick(event: Event): void {\n    const trigger = this.triggerRef();\n\n    if (!trigger) {\n      return;\n    }\n\n    const triggerEl = trigger.elRef.nativeElement as HTMLElement;\n\n    if (triggerEl.contains(event.target as Node)) {\n      this.toggle();\n    }\n  }\n\n  // ===== HOST KEYDOWN — captures keydown from projected trigger =====\n\n  @HostListener('keydown', ['$event'])\n  onHostKeydown(event: KeyboardEvent): void {\n    const trigger = this.triggerRef();\n\n    if (!trigger) {\n      return;\n    }\n\n    const triggerEl = trigger.elRef.nativeElement as HTMLElement;\n\n    if (triggerEl.contains(event.target as Node)) {\n      this.onTriggerKeydown(event);\n    }\n  }\n\n  // ===== OUTSIDE CLICK =====\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.isOpen()) {\n      return;\n    }\n\n    const host = this.elRef.nativeElement as HTMLElement;\n    const panel = this.menuPanelEl()?.nativeElement;\n\n    if (host.contains(event.target as Node)) {\n      return;\n    }\n\n    if (panel && panel.contains(event.target as Node)) {\n      return;\n    }\n\n    this.close();\n  }\n\n  // ===== KEYBOARD =====\n\n  @HostListener('document:keydown', ['$event'])\n  onDocumentKeydown(event: KeyboardEvent): void {\n    if (!this.isOpen()) {\n      return;\n    }\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.close();\n        this.focusTrigger();\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusNext();\n        break;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusPrev();\n        break;\n\n      case 'Tab':\n        this.close();\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this.focusFirst();\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this.focusLast();\n        break;\n    }\n  }\n\n  // ===== ACTIONS =====\n\n  /** Toggles the dropdown panel open or closed if not disabled. */\n  toggle(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    if (this.isOpen()) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /** Opens the dropdown panel and positions it relative to the trigger. */\n  open(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    this.isOpen.set(true);\n    this.updateTriggerAria(true);\n    this.menuOpen.emit();\n\n    requestAnimationFrame(() => {\n      if (this.portal()) {\n        this.attachPortal();\n      }\n\n      this.positionPanel();\n    });\n  }\n\n  /** Closes the dropdown panel and cleans up any portal attachment. */\n  close(): void {\n    this.cleanupPortal();\n    this.isOpen.set(false);\n    this.updateTriggerAria(false);\n    this.menuClose.emit();\n  }\n\n  onPanelItemSelect(): void {\n    this.close();\n  }\n\n  // ===== TRIGGER KEYBOARD =====\n\n  private onTriggerKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggle();\n    }\n\n    if (event.key === 'ArrowDown' && !this.isOpen()) {\n      event.preventDefault();\n      this.open();\n      requestAnimationFrame(() => this.focusFirst());\n    }\n  }\n\n  // ===== FOCUS MANAGEMENT =====\n\n  private getMenuItems(): HTMLElement[] {\n    const panel = this.menuPanelEl()?.nativeElement;\n\n    if (!panel) {\n      return [];\n    }\n\n    return Array.from(\n      panel.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      ),\n    );\n  }\n\n  private focusNext(): void {\n    const items = this.getMenuItems();\n    const current = items.findIndex(\n      (el) =>\n        el === document.activeElement || el.contains(document.activeElement),\n    );\n\n    const next = current + 1;\n\n    if (next < items.length) {\n      items[next].focus();\n    }\n  }\n\n  private focusPrev(): void {\n    const items = this.getMenuItems();\n    const current = items.findIndex(\n      (el) =>\n        el === document.activeElement || el.contains(document.activeElement),\n    );\n\n    const prev = current - 1;\n\n    if (prev >= 0) {\n      items[prev].focus();\n    }\n  }\n\n  private focusFirst(): void {\n    const items = this.getMenuItems();\n\n    if (items.length > 0) {\n      items[0].focus();\n    }\n  }\n\n  private focusLast(): void {\n    const items = this.getMenuItems();\n\n    if (items.length > 0) {\n      items[items.length - 1].focus();\n    }\n  }\n\n  private focusTrigger(): void {\n    const trigger = this.triggerRef();\n\n    if (trigger) {\n      trigger.elRef.nativeElement.focus();\n    }\n  }\n\n  private updateTriggerAria(open: boolean): void {\n    const trigger = this.triggerRef();\n\n    if (trigger) {\n      trigger.elRef.nativeElement.setAttribute('aria-expanded', String(open));\n    }\n  }\n\n  // ===== PORTAL =====\n\n  private attachPortal(): void {\n    const panel = this.menuPanelEl()?.nativeElement;\n\n    if (!panel) {\n      return;\n    }\n\n    document.body.appendChild(panel);\n    panel.style.position = 'fixed';\n    panel.style.zIndex = '1000';\n\n    this.portalCleanup = () => {\n      if (panel.parentNode === document.body) {\n        document.body.removeChild(panel);\n      }\n    };\n  }\n\n  private cleanupPortal(): void {\n    if (this.portalCleanup) {\n      this.portalCleanup();\n      this.portalCleanup = null;\n    }\n  }\n\n  // ===== PANEL POSITIONING =====\n\n  private positionPanel(): void {\n    const panel = this.menuPanelEl()?.nativeElement;\n\n    if (!panel) {\n      return;\n    }\n\n    const host = this.elRef.nativeElement as HTMLElement;\n    const hostRect = host.getBoundingClientRect();\n    const panelRect = panel.getBoundingClientRect();\n    const viewportH = window.innerHeight;\n    const viewportW = window.innerWidth;\n    const gap = 4;\n\n    if (this.portal()) {\n      this.positionPortalPanel(\n        panel,\n        hostRect,\n        panelRect,\n        viewportH,\n        viewportW,\n        gap,\n      );\n    } else {\n      this.positionInlinePanel(\n        panel,\n        hostRect,\n        panelRect,\n        viewportH,\n        viewportW,\n        gap,\n      );\n    }\n  }\n\n  private positionPortalPanel(\n    panel: HTMLElement,\n    hostRect: DOMRect,\n    panelRect: DOMRect,\n    viewportH: number,\n    viewportW: number,\n    gap: number,\n  ): void {\n    const spaceBelow = viewportH - hostRect.bottom;\n    const spaceAbove = hostRect.top;\n\n    if (spaceBelow >= panelRect.height + gap || spaceBelow >= spaceAbove) {\n      panel.style.top = hostRect.bottom + gap + 'px';\n      panel.style.bottom = '';\n    } else {\n      panel.style.top = '';\n      panel.style.bottom = viewportH - hostRect.top + gap + 'px';\n    }\n\n    const preferred = this.placement();\n\n    if (preferred === 'bottom-end') {\n      const left = hostRect.right - panelRect.width;\n\n      panel.style.left = Math.max(0, left) + 'px';\n      panel.style.right = '';\n    } else {\n      const left = hostRect.left;\n\n      if (left + panelRect.width > viewportW) {\n        panel.style.left = '';\n        panel.style.right = '0';\n      } else {\n        panel.style.left = left + 'px';\n        panel.style.right = '';\n      }\n    }\n  }\n\n  private positionInlinePanel(\n    panel: HTMLElement,\n    hostRect: DOMRect,\n    panelRect: DOMRect,\n    viewportH: number,\n    viewportW: number,\n    gap: number,\n  ): void {\n    panel.style.top = '';\n    panel.style.bottom = '';\n    panel.style.left = '';\n    panel.style.right = '';\n    panel.style.marginTop = '';\n    panel.style.marginBottom = '';\n\n    const spaceBelow = viewportH - hostRect.bottom;\n    const spaceAbove = hostRect.top;\n\n    if (spaceBelow >= panelRect.height + gap || spaceBelow >= spaceAbove) {\n      panel.style.top = '100%';\n      panel.style.marginTop = gap + 'px';\n    } else {\n      panel.style.bottom = '100%';\n      panel.style.marginBottom = gap + 'px';\n    }\n\n    const preferred = this.placement();\n\n    if (preferred === 'bottom-end') {\n      panel.style.right = '0';\n\n      const panelLeft = hostRect.right - panelRect.width;\n\n      if (panelLeft < 0) {\n        panel.style.right = '';\n        panel.style.left = -hostRect.left + 'px';\n      }\n    } else {\n      panel.style.left = '0';\n\n      const panelRight = hostRect.left + panelRect.width;\n\n      if (panelRight > viewportW) {\n        panel.style.left = '';\n        panel.style.right = -(viewportW - hostRect.right) + 'px';\n      }\n    }\n  }\n}\n","<ng-content select=\"[fkDropdownTrigger]\" />\n\n@if (isOpen()) {\n  <div\n    #menuPanel\n    class=\"fk-dropdown-menu__panel\"\n    [class]=\"\n      'fk-dropdown-menu__panel' + (panelClass() ? ' ' + panelClass() : '')\n    \"\n    role=\"menu\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (fkmenuitemselect)=\"onPanelItemSelect()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelRef()?.templateRef ?? null\" />\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-editable-field.mjs

@@ -0,0 +1,125 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, viewChild, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconComponent } from '@frame-kit/ui-ng/core/icon';
+
+/**
+ * A single-line text field that lives in two states:
+ *
+ *   - **Display** — the field reads as a regular bordered input
+ *     showing the current value. A pencil icon sits inside the
+ *     trailing edge. Clicking anywhere on the field surface enters
+ *     edit mode.
+ *   - **Edit** — the field becomes a live `<input>`. The pencil slot
+ *     swaps to a cancel (✗) icon inside the trailing edge. A
+ *     separate Save button slides in as a sibling to the field's
+ *     right.
+ *
+ * Distinct from `fk-inline-edit`, which renders the value as a span +
+ * an Edit button as siblings. `fk-editable-field` is meant for form-
+ * shaped surfaces (billing details, profile pages) where every row
+ * should *look* like a regular input even in display mode.
+ *
+ * The save / cancel / pencil icons can be overridden via the named
+ * content slots `[editIcon]`, `[cancelIcon]`, and `[saveIcon]`.
+ */
+class EditableFieldComponent {
+    // ===== INPUTS =====
+    /** Current committed value displayed in read mode. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown in the input when the edit buffer is empty. */
+    placeholder = input('Enter a value…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Size variant controlling the font and spacing of the component. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Text displayed in read mode when the committed value is empty. */
+    emptyText = input('None', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the user saves an edit, emitting the trimmed new value. */
+    valueChange = output();
+    /** Fires when the component enters edit mode. */
+    editStart = output();
+    /** Fires when the user cancels an in-progress edit without saving. */
+    editCancel = output();
+    // ===== STATE =====
+    editing = signal(false, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    editValue = signal('', ...(ngDevMode ? [{ debugName: "editValue" }] : /* istanbul ignore next */ []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => [
+        'fk-editable-field',
+        `fk-editable-field--${this.size()}`,
+        this.editing() ? 'fk-editable-field--editing' : '',
+        this.disabled() ? 'fk-editable-field--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    // ===== METHODS =====
+    /** Enters edit mode and focuses the input, copying the current value into the edit buffer. */
+    startEdit() {
+        if (this.disabled()) {
+            return;
+        }
+        this.editValue.set(this.value());
+        this.editing.set(true);
+        this.editStart.emit();
+        setTimeout(() => {
+            this.inputRef()?.nativeElement.focus();
+        });
+    }
+    /** Commits the current edit buffer, exits edit mode, and emits the trimmed value. */
+    save() {
+        const trimmed = this.editValue().trim();
+        this.editing.set(false);
+        this.valueChange.emit(trimmed);
+    }
+    /** Discards the current edit buffer and exits edit mode. */
+    cancel() {
+        this.editing.set(false);
+        this.editCancel.emit();
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.save();
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancel();
+        }
+    }
+    onInput(event) {
+        const target = event.target;
+        this.editValue.set(target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EditableFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EditableFieldComponent, isStandalone: true, selector: "fk-editable-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", editStart: "editStart", editCancel: "editCancel" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <div class=\"fk-editable-field__container\">\n    <div class=\"fk-editable-field__field fk-editable-field__field--editing\">\n      <input\n        #inputEl\n        class=\"fk-editable-field__input\"\n        type=\"text\"\n        [value]=\"editValue()\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n      />\n\n      <button\n        class=\"fk-editable-field__inline-btn\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        (click)=\"cancel()\"\n      >\n        <ng-content select=\"[cancelIcon]\">\n          <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n        </ng-content>\n      </button>\n    </div>\n\n    <button\n      class=\"fk-editable-field__save\"\n      type=\"button\"\n      aria-label=\"Save\"\n      (click)=\"save()\"\n    >\n      <ng-content select=\"[saveIcon]\">\n        <span class=\"fk-editable-field__save-text\">Save</span>\n      </ng-content>\n    </button>\n  </div>\n} @else {\n  <button\n    class=\"fk-editable-field__field fk-editable-field__field--display\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() ? 'Edit ' + ariaLabel() : 'Edit'\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (click)=\"startEdit()\"\n  >\n    <span class=\"fk-editable-field__value\">\n      @if (value()) {\n        {{ value() }}\n      } @else {\n        <span class=\"fk-editable-field__empty\">{{ emptyText() }}</span>\n      }\n    </span>\n\n    @if (!disabled()) {\n      <span\n        class=\"fk-editable-field__inline-btn fk-editable-field__inline-btn--decoration\"\n      >\n        <ng-content select=\"[editIcon]\">\n          <fk-icon name=\"pen-outline\" size=\"sm\" />\n        </ng-content>\n      </span>\n    }\n  </button>\n}\n", styles: [":host{display:block}.fk-editable-field__container{display:flex;align-items:center;gap:var(--fk-editable-field-gap, var(--fk-rhythm-2, .5rem))}.fk-editable-field__field{flex:1;min-width:0;display:flex;align-items:center;width:100%;padding-right:var(--fk-editable-field-trailing-padding, var(--fk-rhythm-1, .25rem));font-family:inherit;text-align:start;background:var(--fk-editable-field-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-editable-field-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-editable-field-border-radius, var(--fk-radius-md, .375rem));transition:border-color .12s ease,box-shadow .12s ease}.fk-editable-field__field--display{cursor:pointer}.fk-editable-field__field--display:hover:not(:disabled){border-color:var(--fk-editable-field-hover-border, var(--fk-color-primary, #3b82f6))}.fk-editable-field__field--display:focus-visible{outline:none;border-color:var(--fk-editable-field-focus-border, var(--fk-color-primary, #3b82f6));box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-editable-field__field--display:disabled{cursor:default;opacity:var(--fk-editable-field-disabled-opacity, .6)}.fk-editable-field__field--editing:focus-within{border-color:var(--fk-editable-field-focus-border, var(--fk-color-primary, #3b82f6));box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-editable-field__input{flex:1;min-width:0;padding:var(--fk-editable-field-input-padding, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem));font-family:inherit;font-size:var(--fk-editable-field-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-editable-field-color, var(--fk-color-text, #1f2d3d));background:transparent;border:none;outline:none}.fk-editable-field__value{flex:1;min-width:0;padding:var(--fk-editable-field-input-padding, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem));font-size:var(--fk-editable-field-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-editable-field-color, var(--fk-color-text, #1f2d3d));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fk-editable-field__empty{color:var(--fk-editable-field-empty-color, var(--fk-color-muted, #8a98a8))}.fk-editable-field__inline-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fk-editable-field-inline-btn-size, 1.5rem);height:var(--fk-editable-field-inline-btn-size, 1.5rem);padding:0;background:none;border:none;color:var(--fk-editable-field-trigger-color, var(--fk-color-muted, #8a98a8));cursor:pointer}.fk-editable-field__inline-btn:hover{color:var(--fk-editable-field-trigger-hover-color, var(--fk-color-primary, #3b82f6))}.fk-editable-field__inline-btn:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-radius-sm, .25rem)}.fk-editable-field__inline-btn--decoration{pointer-events:none;cursor:inherit}.fk-editable-field__save{display:inline-flex;align-items:center;flex-shrink:0;padding:var(--fk-rhythm-1, .25rem) var(--fk-rhythm-3, .75rem);font-family:inherit;font-size:var(--fk-editable-field-action-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-font-weight-medium, 500);color:var(--fk-editable-field-save-color, #ffffff);background:var(--fk-editable-field-save-bg, var(--fk-color-primary, #3b82f6));border:1px solid var(--fk-editable-field-save-bg, var(--fk-color-primary, #3b82f6));border-radius:var(--fk-editable-field-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-editable-field__save:hover{opacity:.9}.fk-editable-field__save:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-editable-field__save-text{font:inherit}:host-context(.fk-editable-field--sm) .fk-editable-field__input,:host-context(.fk-editable-field--sm) .fk-editable-field__value{font-size:var(--fk-editable-field-sm-font-size, var(--fk-typography-small-font-size, .8125rem))}:host-context(.fk-editable-field--lg) .fk-editable-field__input,:host-context(.fk-editable-field--lg) .fk-editable-field__value{font-size:var(--fk-editable-field-lg-font-size, var(--fk-typography-heading-font-size, 1.25rem));font-weight:var(--fk-editable-field-lg-font-weight, var(--fk-font-weight-semibold, 600))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EditableFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-editable-field', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (editing()) {\n  <div class=\"fk-editable-field__container\">\n    <div class=\"fk-editable-field__field fk-editable-field__field--editing\">\n      <input\n        #inputEl\n        class=\"fk-editable-field__input\"\n        type=\"text\"\n        [value]=\"editValue()\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n      />\n\n      <button\n        class=\"fk-editable-field__inline-btn\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        (click)=\"cancel()\"\n      >\n        <ng-content select=\"[cancelIcon]\">\n          <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n        </ng-content>\n      </button>\n    </div>\n\n    <button\n      class=\"fk-editable-field__save\"\n      type=\"button\"\n      aria-label=\"Save\"\n      (click)=\"save()\"\n    >\n      <ng-content select=\"[saveIcon]\">\n        <span class=\"fk-editable-field__save-text\">Save</span>\n      </ng-content>\n    </button>\n  </div>\n} @else {\n  <button\n    class=\"fk-editable-field__field fk-editable-field__field--display\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() ? 'Edit ' + ariaLabel() : 'Edit'\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (click)=\"startEdit()\"\n  >\n    <span class=\"fk-editable-field__value\">\n      @if (value()) {\n        {{ value() }}\n      } @else {\n        <span class=\"fk-editable-field__empty\">{{ emptyText() }}</span>\n      }\n    </span>\n\n    @if (!disabled()) {\n      <span\n        class=\"fk-editable-field__inline-btn fk-editable-field__inline-btn--decoration\"\n      >\n        <ng-content select=\"[editIcon]\">\n          <fk-icon name=\"pen-outline\" size=\"sm\" />\n        </ng-content>\n      </span>\n    }\n  </button>\n}\n", styles: [":host{display:block}.fk-editable-field__container{display:flex;align-items:center;gap:var(--fk-editable-field-gap, var(--fk-rhythm-2, .5rem))}.fk-editable-field__field{flex:1;min-width:0;display:flex;align-items:center;width:100%;padding-right:var(--fk-editable-field-trailing-padding, var(--fk-rhythm-1, .25rem));font-family:inherit;text-align:start;background:var(--fk-editable-field-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-editable-field-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-editable-field-border-radius, var(--fk-radius-md, .375rem));transition:border-color .12s ease,box-shadow .12s ease}.fk-editable-field__field--display{cursor:pointer}.fk-editable-field__field--display:hover:not(:disabled){border-color:var(--fk-editable-field-hover-border, var(--fk-color-primary, #3b82f6))}.fk-editable-field__field--display:focus-visible{outline:none;border-color:var(--fk-editable-field-focus-border, var(--fk-color-primary, #3b82f6));box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-editable-field__field--display:disabled{cursor:default;opacity:var(--fk-editable-field-disabled-opacity, .6)}.fk-editable-field__field--editing:focus-within{border-color:var(--fk-editable-field-focus-border, var(--fk-color-primary, #3b82f6));box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-editable-field__input{flex:1;min-width:0;padding:var(--fk-editable-field-input-padding, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem));font-family:inherit;font-size:var(--fk-editable-field-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-editable-field-color, var(--fk-color-text, #1f2d3d));background:transparent;border:none;outline:none}.fk-editable-field__value{flex:1;min-width:0;padding:var(--fk-editable-field-input-padding, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem));font-size:var(--fk-editable-field-font-size, var(--fk-typography-body-font-size, .875rem));color:var(--fk-editable-field-color, var(--fk-color-text, #1f2d3d));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fk-editable-field__empty{color:var(--fk-editable-field-empty-color, var(--fk-color-muted, #8a98a8))}.fk-editable-field__inline-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fk-editable-field-inline-btn-size, 1.5rem);height:var(--fk-editable-field-inline-btn-size, 1.5rem);padding:0;background:none;border:none;color:var(--fk-editable-field-trigger-color, var(--fk-color-muted, #8a98a8));cursor:pointer}.fk-editable-field__inline-btn:hover{color:var(--fk-editable-field-trigger-hover-color, var(--fk-color-primary, #3b82f6))}.fk-editable-field__inline-btn:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-radius-sm, .25rem)}.fk-editable-field__inline-btn--decoration{pointer-events:none;cursor:inherit}.fk-editable-field__save{display:inline-flex;align-items:center;flex-shrink:0;padding:var(--fk-rhythm-1, .25rem) var(--fk-rhythm-3, .75rem);font-family:inherit;font-size:var(--fk-editable-field-action-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-font-weight-medium, 500);color:var(--fk-editable-field-save-color, #ffffff);background:var(--fk-editable-field-save-bg, var(--fk-color-primary, #3b82f6));border:1px solid var(--fk-editable-field-save-bg, var(--fk-color-primary, #3b82f6));border-radius:var(--fk-editable-field-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-editable-field__save:hover{opacity:.9}.fk-editable-field__save:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-editable-field__save-text{font:inherit}:host-context(.fk-editable-field--sm) .fk-editable-field__input,:host-context(.fk-editable-field--sm) .fk-editable-field__value{font-size:var(--fk-editable-field-sm-font-size, var(--fk-typography-small-font-size, .8125rem))}:host-context(.fk-editable-field--lg) .fk-editable-field__input,:host-context(.fk-editable-field--lg) .fk-editable-field__value{font-size:var(--fk-editable-field-lg-font-size, var(--fk-typography-heading-font-size, 1.25rem));font-weight:var(--fk-editable-field-lg-font-weight, var(--fk-font-weight-semibold, 600))}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], editStart: [{ type: i0.Output, args: ["editStart"] }], editCancel: [{ type: i0.Output, args: ["editCancel"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EditableFieldComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-editable-field.mjs.map