@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-list-editor.mjs

@@ -0,0 +1,135 @@
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import * as i0 from '@angular/core';
+import { model, input, output, signal, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { IconComponent } from '@frame-kit/ui-ng/core/icon';
+import { ButtonComponent, FkButtonIconStartDirective } from '@frame-kit/ui-ng/ui/button';
+
+class ListEditorComponent {
+    // ===== INPUTS =====
+    /** The current list of string items; two-way bindable via `[(items)]`. */
+    items = model([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Placeholder text for the new-item input field. */
+    placeholder = input('Add an item...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Message displayed when the list is empty. */
+    emptyMessage = input('No items added yet.', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Label for the add button. */
+    addLabel = input('Add', ...(ngDevMode ? [{ debugName: "addLabel" }] : /* istanbul ignore next */ []));
+    /** When true, items can be reordered via drag-and-drop. */
+    orderable = input(true, ...(ngDevMode ? [{ debugName: "orderable" }] : /* istanbul ignore next */ []));
+    /** When true, shows a numeric position indicator next to each item. */
+    showOrder = input(true, ...(ngDevMode ? [{ debugName: "showOrder" }] : /* istanbul ignore next */ []));
+    /** Size variant controlling the spacing and font of the component. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Items that cannot be removed by the user (matched case-insensitively). */
+    lockedItems = input([], ...(ngDevMode ? [{ debugName: "lockedItems" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires whenever the items array changes, emitting the full updated array. */
+    itemsChange = output();
+    /** Fires when a new item is successfully added, emitting the added value. */
+    itemAdded = output();
+    /** Fires when an item is removed, emitting the removed value and its former index. */
+    itemRemoved = output();
+    // ===== LOCAL STATE =====
+    newItemValue = signal('', ...(ngDevMode ? [{ debugName: "newItemValue" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    canAdd = computed(() => {
+        const value = this.newItemValue().trim();
+        if (!value) {
+            return false;
+        }
+        const existing = this.items().map((n) => n.trim().toLowerCase());
+        return !existing.includes(value.toLowerCase());
+    }, ...(ngDevMode ? [{ debugName: "canAdd" }] : /* istanbul ignore next */ []));
+    hasDuplicates = computed(() => {
+        const names = this.items().map((n) => n.trim().toLowerCase());
+        return new Set(names).size !== names.length;
+    }, ...(ngDevMode ? [{ debugName: "hasDuplicates" }] : /* istanbul ignore next */ []));
+    hasEmptyItems = computed(() => {
+        return this.items().some((n) => n.trim() === '');
+    }, ...(ngDevMode ? [{ debugName: "hasEmptyItems" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-list-editor',
+        `fk-list-editor--${this.size()}`,
+        this.disabled() ? 'fk-list-editor--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    // ===== ACTIONS =====
+    /** Adds the current input value as a new item if it is non-empty and not a duplicate. */
+    addItem() {
+        const value = this.newItemValue().trim();
+        if (!value || !this.canAdd() || this.disabled()) {
+            return;
+        }
+        this.items.update((prev) => [...prev, value]);
+        this.newItemValue.set('');
+        this.itemsChange.emit(this.items());
+        this.itemAdded.emit(value);
+    }
+    /** Removes the item at the given index unless it is locked or the component is disabled. */
+    removeItem(index) {
+        const item = this.items()[index];
+        if (this.disabled() || this.isLocked(item)) {
+            return;
+        }
+        this.items.update((prev) => prev.filter((_, i) => i !== index));
+        this.itemsChange.emit(this.items());
+        this.itemRemoved.emit({ item, index });
+    }
+    /** Updates the item at the given index with a new value and emits the changed array. */
+    updateItem(index, value) {
+        this.items.update((prev) => prev.map((item, i) => (i === index ? value : item)));
+        this.itemsChange.emit(this.items());
+    }
+    onDrop(event) {
+        const updated = [...this.items()];
+        moveItemInArray(updated, event.previousIndex, event.currentIndex);
+        this.items.set(updated);
+        this.itemsChange.emit(this.items());
+    }
+    /** Returns true if the given item matches any entry in `lockedItems`. */
+    isLocked(item) {
+        return this.lockedItems().includes(item.trim().toLowerCase());
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.addItem();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ListEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ListEditorComponent, isStandalone: true, selector: "fk-list-editor", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, orderable: { classPropertyName: "orderable", publicName: "orderable", isSignal: true, isRequired: false, transformFunction: null }, showOrder: { classPropertyName: "showOrder", publicName: "showOrder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, lockedItems: { classPropertyName: "lockedItems", publicName: "lockedItems", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", itemsChange: "itemsChange", itemAdded: "itemAdded", itemRemoved: "itemRemoved" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div\n  cdkDropList\n  [cdkDropListDisabled]=\"disabled() || !orderable()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"fk-list-editor__list\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @for (item of items(); track $index) {\n    <div\n      cdkDrag\n      [cdkDragDisabled]=\"disabled() || !orderable()\"\n      class=\"fk-list-editor__item\"\n    >\n      @if (orderable()) {\n        <span class=\"fk-list-editor__handle\" cdkDragHandle>\n          <fk-icon name=\"dots-outline\" size=\"sm\" color=\"muted\" />\n        </span>\n      }\n\n      @if (showOrder()) {\n        <span class=\"fk-list-editor__order\">{{ $index + 1 }}</span>\n      }\n\n      <input\n        class=\"fk-list-editor__input\"\n        type=\"text\"\n        [value]=\"item\"\n        [disabled]=\"disabled() || isLocked(item)\"\n        (input)=\"updateItem($index, $any($event.target).value)\"\n      />\n\n      <button\n        class=\"fk-list-editor__remove\"\n        type=\"button\"\n        [disabled]=\"disabled() || isLocked(item)\"\n        [title]=\"isLocked(item) ? 'This item cannot be removed' : 'Remove item'\"\n        (click)=\"removeItem($index)\"\n      >\n        <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n      </button>\n\n      <div *cdkDragPlaceholder class=\"fk-list-editor__placeholder\"></div>\n    </div>\n  }\n</div>\n\n@if (items().length === 0 && emptyMessage()) {\n  <p class=\"fk-list-editor__empty\">{{ emptyMessage() }}</p>\n}\n\n<div class=\"fk-list-editor__add\">\n  <div class=\"fk-list-editor__add-input\">\n    <input\n      class=\"fk-list-editor__input\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"newItemValue()\"\n      (ngModelChange)=\"newItemValue.set($event)\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    @if (newItemValue() && !disabled()) {\n      <button\n        class=\"fk-list-editor__add-clear\"\n        type=\"button\"\n        aria-label=\"Clear input\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"newItemValue.set('')\"\n      >\n        <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n      </button>\n    }\n  </div>\n\n  <fk-button\n    variant=\"outline\"\n    size=\"sm\"\n    [disabled]=\"!canAdd() || disabled()\"\n    (click)=\"addItem()\"\n  >\n    <fk-icon name=\"add\" fkButtonIconStart />\n    {{ addLabel() }}\n  </fk-button>\n</div>\n\n@if (hasDuplicates()) {\n  <p class=\"fk-list-editor__error\">Item names must be unique.</p>\n}\n", styles: [":host{display:block}.fk-list-editor__list{display:flex;flex-direction:column;gap:var(--fk-list-editor-row-gap, var(--fk-rhythm-2, .5rem))}.fk-list-editor__item{display:flex;align-items:center;gap:var(--fk-list-editor-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-list-editor-item-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));background:var(--fk-list-editor-item-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-list-editor-item-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-list-editor-item-radius, var(--fk-radius-md, .5rem));transition:box-shadow .15s ease}.fk-list-editor__item:hover{box-shadow:var(--fk-list-editor-item-hover-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.fk-list-editor__handle{display:flex;cursor:grab;padding:var(--fk-list-editor-handle-padding, var(--fk-rhythm-1, .25rem))}.fk-list-editor__handle:active{cursor:grabbing}.fk-list-editor__order{display:flex;align-items:center;justify-content:center;width:var(--fk-list-editor-order-size, 1.5rem);height:var(--fk-list-editor-order-size, 1.5rem);border-radius:var(--fk-list-editor-order-radius, 50%);background:var(--fk-list-editor-order-bg, var(--fk-color-primary-light, #e0f2fe));color:var(--fk-list-editor-order-color, var(--fk-color-primary, #0a84ff));font-size:var(--fk-list-editor-order-font-size, .75rem);font-weight:var(--fk-list-editor-order-font-weight, var(--fk-font-weight-semibold, 600));flex-shrink:0}.fk-list-editor__input{flex:1;min-width:0;padding:var(--fk-list-editor-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border:1px solid var(--fk-list-editor-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-list-editor-input-radius, var(--fk-radius-md, .5rem));font-size:var(--fk-list-editor-input-font-size, .875rem);color:var(--fk-list-editor-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-list-editor-input-bg, var(--fk-color-surface, #ffffff));outline:none;transition:border-color .15s ease}.fk-list-editor__input:focus{border-color:var(--fk-list-editor-input-focus-border-color, var(--fk-color-primary, #0a84ff))}.fk-list-editor__input:disabled{opacity:var(--fk-list-editor-disabled-opacity, var(--fk-input-disabled-opacity, .5));cursor:not-allowed}.fk-list-editor__remove{display:flex;align-items:center;padding:var(--fk-list-editor-remove-padding, var(--fk-rhythm-1, .25rem));border:none;background:transparent;cursor:pointer;color:var(--fk-list-editor-remove-color, var(--fk-color-muted, #8a98a8));transition:color .15s ease}.fk-list-editor__remove:hover:not(:disabled){color:var(--fk-list-editor-remove-hover-color, var(--fk-color-danger, #e02424))}.fk-list-editor__remove:focus-visible{outline:none;box-shadow:var(--fk-list-editor-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-list-editor__remove:disabled{opacity:.35;cursor:not-allowed}.fk-list-editor__placeholder{height:var(--fk-list-editor-placeholder-height, 3rem);border:2px dashed var(--fk-list-editor-placeholder-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-list-editor-item-radius, var(--fk-radius-md, .5rem));background:var(--fk-list-editor-placeholder-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-list-editor__empty{padding:var(--fk-list-editor-empty-padding, var(--fk-rhythm-4, 1rem));text-align:var(--fk-list-editor-empty-text-align, left);color:var(--fk-list-editor-empty-color, var(--fk-color-muted, #8a98a8));font-size:var(--fk-list-editor-empty-font-size, var(--fk-typography-small-font-size, .875rem))}.fk-list-editor__add{display:flex;align-items:center;gap:var(--fk-list-editor-row-gap, var(--fk-rhythm-2, .5rem));margin-top:var(--fk-list-editor-add-gap, var(--fk-rhythm-3, .75rem))}.fk-list-editor__add-input{position:relative;display:flex;flex:1;min-width:0}.fk-list-editor__add-input .fk-list-editor__input{padding-right:var(--fk-list-editor-add-clear-reserve, var(--fk-rhythm-7, 1.75rem))}.fk-list-editor__add-clear{position:absolute;top:50%;right:var(--fk-list-editor-add-clear-offset, var(--fk-rhythm-2, .5rem));transform:translateY(-50%);display:flex;align-items:center;justify-content:center;padding:var(--fk-list-editor-add-clear-padding, .125rem);border:0;background:transparent;border-radius:var(--fk-list-editor-add-clear-radius, var(--fk-radius-sm, .25rem));color:var(--fk-list-editor-remove-color, var(--fk-color-muted, #8a98a8));cursor:pointer;transition:color .15s ease}.fk-list-editor__add-clear:hover{color:var(--fk-list-editor-remove-hover-color, var(--fk-color-danger, #e02424))}.fk-list-editor__add-clear:focus-visible{outline:none;box-shadow:var(--fk-list-editor-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-list-editor__error{margin-top:var(--fk-list-editor-error-gap, var(--fk-rhythm-2, .5rem));color:var(--fk-list-editor-error-color, var(--fk-color-danger, #e02424));font-size:var(--fk-list-editor-error-font-size, var(--fk-typography-small-font-size, .875rem))}:host.fk-list-editor--sm .fk-list-editor__input{font-size:var(--fk-list-editor-input-font-size-sm, .8125rem);padding:var(--fk-list-editor-input-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-list-editor--sm .fk-list-editor__item{padding:var(--fk-list-editor-item-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-list-editor--disabled{opacity:var(--fk-list-editor-disabled-opacity, var(--fk-input-disabled-opacity, .5));pointer-events:none}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.fk-list-editor__list.cdk-drop-list-dragging .fk-list-editor__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview.fk-list-editor__item{box-shadow:var(--fk-list-editor-drag-shadow, 0 4px 12px rgba(0, 0, 0, .12));border-color:var(--fk-list-editor-drag-border-color, var(--fk-color-primary, #0a84ff))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: ButtonComponent, selector: "fk-button", inputs: ["variant", "size", "loading", "disabled", "type", "fullWidth", "id", "className", "ariaLabel", "ariaDescribedBy"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: FkButtonIconStartDirective, selector: "[fkButtonIconStart]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ListEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-list-editor', standalone: true, imports: [
+                        FormsModule,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDragPlaceholder,
+                        ButtonComponent,
+                        IconComponent,
+                        FkButtonIconStartDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  cdkDropList\n  [cdkDropListDisabled]=\"disabled() || !orderable()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"fk-list-editor__list\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @for (item of items(); track $index) {\n    <div\n      cdkDrag\n      [cdkDragDisabled]=\"disabled() || !orderable()\"\n      class=\"fk-list-editor__item\"\n    >\n      @if (orderable()) {\n        <span class=\"fk-list-editor__handle\" cdkDragHandle>\n          <fk-icon name=\"dots-outline\" size=\"sm\" color=\"muted\" />\n        </span>\n      }\n\n      @if (showOrder()) {\n        <span class=\"fk-list-editor__order\">{{ $index + 1 }}</span>\n      }\n\n      <input\n        class=\"fk-list-editor__input\"\n        type=\"text\"\n        [value]=\"item\"\n        [disabled]=\"disabled() || isLocked(item)\"\n        (input)=\"updateItem($index, $any($event.target).value)\"\n      />\n\n      <button\n        class=\"fk-list-editor__remove\"\n        type=\"button\"\n        [disabled]=\"disabled() || isLocked(item)\"\n        [title]=\"isLocked(item) ? 'This item cannot be removed' : 'Remove item'\"\n        (click)=\"removeItem($index)\"\n      >\n        <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n      </button>\n\n      <div *cdkDragPlaceholder class=\"fk-list-editor__placeholder\"></div>\n    </div>\n  }\n</div>\n\n@if (items().length === 0 && emptyMessage()) {\n  <p class=\"fk-list-editor__empty\">{{ emptyMessage() }}</p>\n}\n\n<div class=\"fk-list-editor__add\">\n  <div class=\"fk-list-editor__add-input\">\n    <input\n      class=\"fk-list-editor__input\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"newItemValue()\"\n      (ngModelChange)=\"newItemValue.set($event)\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    @if (newItemValue() && !disabled()) {\n      <button\n        class=\"fk-list-editor__add-clear\"\n        type=\"button\"\n        aria-label=\"Clear input\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"newItemValue.set('')\"\n      >\n        <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n      </button>\n    }\n  </div>\n\n  <fk-button\n    variant=\"outline\"\n    size=\"sm\"\n    [disabled]=\"!canAdd() || disabled()\"\n    (click)=\"addItem()\"\n  >\n    <fk-icon name=\"add\" fkButtonIconStart />\n    {{ addLabel() }}\n  </fk-button>\n</div>\n\n@if (hasDuplicates()) {\n  <p class=\"fk-list-editor__error\">Item names must be unique.</p>\n}\n", styles: [":host{display:block}.fk-list-editor__list{display:flex;flex-direction:column;gap:var(--fk-list-editor-row-gap, var(--fk-rhythm-2, .5rem))}.fk-list-editor__item{display:flex;align-items:center;gap:var(--fk-list-editor-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-list-editor-item-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));background:var(--fk-list-editor-item-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-list-editor-item-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-list-editor-item-radius, var(--fk-radius-md, .5rem));transition:box-shadow .15s ease}.fk-list-editor__item:hover{box-shadow:var(--fk-list-editor-item-hover-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.fk-list-editor__handle{display:flex;cursor:grab;padding:var(--fk-list-editor-handle-padding, var(--fk-rhythm-1, .25rem))}.fk-list-editor__handle:active{cursor:grabbing}.fk-list-editor__order{display:flex;align-items:center;justify-content:center;width:var(--fk-list-editor-order-size, 1.5rem);height:var(--fk-list-editor-order-size, 1.5rem);border-radius:var(--fk-list-editor-order-radius, 50%);background:var(--fk-list-editor-order-bg, var(--fk-color-primary-light, #e0f2fe));color:var(--fk-list-editor-order-color, var(--fk-color-primary, #0a84ff));font-size:var(--fk-list-editor-order-font-size, .75rem);font-weight:var(--fk-list-editor-order-font-weight, var(--fk-font-weight-semibold, 600));flex-shrink:0}.fk-list-editor__input{flex:1;min-width:0;padding:var(--fk-list-editor-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border:1px solid var(--fk-list-editor-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-list-editor-input-radius, var(--fk-radius-md, .5rem));font-size:var(--fk-list-editor-input-font-size, .875rem);color:var(--fk-list-editor-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-list-editor-input-bg, var(--fk-color-surface, #ffffff));outline:none;transition:border-color .15s ease}.fk-list-editor__input:focus{border-color:var(--fk-list-editor-input-focus-border-color, var(--fk-color-primary, #0a84ff))}.fk-list-editor__input:disabled{opacity:var(--fk-list-editor-disabled-opacity, var(--fk-input-disabled-opacity, .5));cursor:not-allowed}.fk-list-editor__remove{display:flex;align-items:center;padding:var(--fk-list-editor-remove-padding, var(--fk-rhythm-1, .25rem));border:none;background:transparent;cursor:pointer;color:var(--fk-list-editor-remove-color, var(--fk-color-muted, #8a98a8));transition:color .15s ease}.fk-list-editor__remove:hover:not(:disabled){color:var(--fk-list-editor-remove-hover-color, var(--fk-color-danger, #e02424))}.fk-list-editor__remove:focus-visible{outline:none;box-shadow:var(--fk-list-editor-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-list-editor__remove:disabled{opacity:.35;cursor:not-allowed}.fk-list-editor__placeholder{height:var(--fk-list-editor-placeholder-height, 3rem);border:2px dashed var(--fk-list-editor-placeholder-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-list-editor-item-radius, var(--fk-radius-md, .5rem));background:var(--fk-list-editor-placeholder-bg, var(--fk-color-surface-muted, #f7f9fb))}.fk-list-editor__empty{padding:var(--fk-list-editor-empty-padding, var(--fk-rhythm-4, 1rem));text-align:var(--fk-list-editor-empty-text-align, left);color:var(--fk-list-editor-empty-color, var(--fk-color-muted, #8a98a8));font-size:var(--fk-list-editor-empty-font-size, var(--fk-typography-small-font-size, .875rem))}.fk-list-editor__add{display:flex;align-items:center;gap:var(--fk-list-editor-row-gap, var(--fk-rhythm-2, .5rem));margin-top:var(--fk-list-editor-add-gap, var(--fk-rhythm-3, .75rem))}.fk-list-editor__add-input{position:relative;display:flex;flex:1;min-width:0}.fk-list-editor__add-input .fk-list-editor__input{padding-right:var(--fk-list-editor-add-clear-reserve, var(--fk-rhythm-7, 1.75rem))}.fk-list-editor__add-clear{position:absolute;top:50%;right:var(--fk-list-editor-add-clear-offset, var(--fk-rhythm-2, .5rem));transform:translateY(-50%);display:flex;align-items:center;justify-content:center;padding:var(--fk-list-editor-add-clear-padding, .125rem);border:0;background:transparent;border-radius:var(--fk-list-editor-add-clear-radius, var(--fk-radius-sm, .25rem));color:var(--fk-list-editor-remove-color, var(--fk-color-muted, #8a98a8));cursor:pointer;transition:color .15s ease}.fk-list-editor__add-clear:hover{color:var(--fk-list-editor-remove-hover-color, var(--fk-color-danger, #e02424))}.fk-list-editor__add-clear:focus-visible{outline:none;box-shadow:var(--fk-list-editor-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-list-editor__error{margin-top:var(--fk-list-editor-error-gap, var(--fk-rhythm-2, .5rem));color:var(--fk-list-editor-error-color, var(--fk-color-danger, #e02424));font-size:var(--fk-list-editor-error-font-size, var(--fk-typography-small-font-size, .875rem))}:host.fk-list-editor--sm .fk-list-editor__input{font-size:var(--fk-list-editor-input-font-size-sm, .8125rem);padding:var(--fk-list-editor-input-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-list-editor--sm .fk-list-editor__item{padding:var(--fk-list-editor-item-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-list-editor--disabled{opacity:var(--fk-list-editor-disabled-opacity, var(--fk-input-disabled-opacity, .5));pointer-events:none}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.fk-list-editor__list.cdk-drop-list-dragging .fk-list-editor__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview.fk-list-editor__item{box-shadow:var(--fk-list-editor-drag-shadow, 0 4px 12px rgba(0, 0, 0, .12));border-color:var(--fk-list-editor-drag-border-color, var(--fk-color-primary, #0a84ff))}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], addLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addLabel", required: false }] }], orderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderable", required: false }] }], showOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOrder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], lockedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedItems", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemsChange: [{ type: i0.Output, args: ["itemsChange"] }], itemAdded: [{ type: i0.Output, args: ["itemAdded"] }], itemRemoved: [{ type: i0.Output, args: ["itemRemoved"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListEditorComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-list-editor.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-list-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-list-editor.mjs","sources":["../../../../packages/ui-ng/ui/list-editor/list-editor.component.ts","../../../../packages/ui-ng/ui/list-editor/list-editor.component.html","../../../../packages/ui-ng/ui/list-editor/frame-kit-ui-ng-ui-list-editor.ts"],"sourcesContent":["import {\n  CdkDrag,\n  CdkDragDrop,\n  CdkDragHandle,\n  CdkDragPlaceholder,\n  CdkDropList,\n  moveItemInArray,\n} from '@angular/cdk/drag-drop';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport { ButtonComponent } from '@frame-kit/ui-ng/ui/button';\nimport { FkButtonIconStartDirective } from '@frame-kit/ui-ng/ui/button';\nimport type { ListEditorSize } from './list-editor.types';\n\n@Component({\n  selector: 'fk-list-editor',\n  standalone: true,\n  imports: [\n    FormsModule,\n    CdkDropList,\n    CdkDrag,\n    CdkDragHandle,\n    CdkDragPlaceholder,\n    ButtonComponent,\n    IconComponent,\n    FkButtonIconStartDirective,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './list-editor.component.html',\n  styleUrl: './list-editor.component.scss',\n})\nexport class ListEditorComponent {\n  // ===== INPUTS =====\n  /** The current list of string items; two-way bindable via `[(items)]`. */\n  readonly items = model<string[]>([]);\n  /** Placeholder text for the new-item input field. */\n  readonly placeholder = input('Add an item...');\n  /** Message displayed when the list is empty. */\n  readonly emptyMessage = input('No items added yet.');\n  /** Label for the add button. */\n  readonly addLabel = input('Add');\n  /** When true, items can be reordered via drag-and-drop. */\n  readonly orderable = input(true);\n  /** When true, shows a numeric position indicator next to each item. */\n  readonly showOrder = input(true);\n  /** Size variant controlling the spacing and font of the component. */\n  readonly size = input<ListEditorSize>('md');\n  /** Items that cannot be removed by the user (matched case-insensitively). */\n  readonly lockedItems = input<string[]>([]);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly disabled = input(false);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== OUTPUTS =====\n  /** Fires whenever the items array changes, emitting the full updated array. */\n  readonly itemsChange = output<string[]>();\n  /** Fires when a new item is successfully added, emitting the added value. */\n  readonly itemAdded = output<string>();\n  /** Fires when an item is removed, emitting the removed value and its former index. */\n  readonly itemRemoved = output<{ item: string; index: number }>();\n\n  // ===== LOCAL STATE =====\n  readonly newItemValue = signal('');\n\n  // ===== COMPUTED =====\n  readonly canAdd = computed(() => {\n    const value = this.newItemValue().trim();\n\n    if (!value) {\n      return false;\n    }\n\n    const existing = this.items().map((n) => n.trim().toLowerCase());\n\n    return !existing.includes(value.toLowerCase());\n  });\n\n  readonly hasDuplicates = computed(() => {\n    const names = this.items().map((n) => n.trim().toLowerCase());\n\n    return new Set(names).size !== names.length;\n  });\n\n  readonly hasEmptyItems = computed(() => {\n    return this.items().some((n) => n.trim() === '');\n  });\n\n  readonly classes = computed(() =>\n    [\n      'fk-list-editor',\n      `fk-list-editor--${this.size()}`,\n      this.disabled() ? 'fk-list-editor--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  // ===== ACTIONS =====\n\n  /** Adds the current input value as a new item if it is non-empty and not a duplicate. */\n  addItem(): void {\n    const value = this.newItemValue().trim();\n\n    if (!value || !this.canAdd() || this.disabled()) {\n      return;\n    }\n\n    this.items.update((prev) => [...prev, value]);\n    this.newItemValue.set('');\n    this.itemsChange.emit(this.items());\n    this.itemAdded.emit(value);\n  }\n\n  /** Removes the item at the given index unless it is locked or the component is disabled. */\n  removeItem(index: number): void {\n    const item = this.items()[index];\n\n    if (this.disabled() || this.isLocked(item)) {\n      return;\n    }\n\n    this.items.update((prev) => prev.filter((_, i) => i !== index));\n    this.itemsChange.emit(this.items());\n    this.itemRemoved.emit({ item, index });\n  }\n\n  /** Updates the item at the given index with a new value and emits the changed array. */\n  updateItem(index: number, value: string): void {\n    this.items.update((prev) =>\n      prev.map((item, i) => (i === index ? value : item)),\n    );\n    this.itemsChange.emit(this.items());\n  }\n\n  onDrop(event: CdkDragDrop<string[]>): void {\n    const updated = [...this.items()];\n\n    moveItemInArray(updated, event.previousIndex, event.currentIndex);\n    this.items.set(updated);\n    this.itemsChange.emit(this.items());\n  }\n\n  /** Returns true if the given item matches any entry in `lockedItems`. */\n  isLocked(item: string): boolean {\n    return this.lockedItems().includes(item.trim().toLowerCase());\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.addItem();\n    }\n  }\n}\n","<div\n  cdkDropList\n  [cdkDropListDisabled]=\"disabled() || !orderable()\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"fk-list-editor__list\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @for (item of items(); track $index) {\n    <div\n      cdkDrag\n      [cdkDragDisabled]=\"disabled() || !orderable()\"\n      class=\"fk-list-editor__item\"\n    >\n      @if (orderable()) {\n        <span class=\"fk-list-editor__handle\" cdkDragHandle>\n          <fk-icon name=\"dots-outline\" size=\"sm\" color=\"muted\" />\n        </span>\n      }\n\n      @if (showOrder()) {\n        <span class=\"fk-list-editor__order\">{{ $index + 1 }}</span>\n      }\n\n      <input\n        class=\"fk-list-editor__input\"\n        type=\"text\"\n        [value]=\"item\"\n        [disabled]=\"disabled() || isLocked(item)\"\n        (input)=\"updateItem($index, $any($event.target).value)\"\n      />\n\n      <button\n        class=\"fk-list-editor__remove\"\n        type=\"button\"\n        [disabled]=\"disabled() || isLocked(item)\"\n        [title]=\"isLocked(item) ? 'This item cannot be removed' : 'Remove item'\"\n        (click)=\"removeItem($index)\"\n      >\n        <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n      </button>\n\n      <div *cdkDragPlaceholder class=\"fk-list-editor__placeholder\"></div>\n    </div>\n  }\n</div>\n\n@if (items().length === 0 && emptyMessage()) {\n  <p class=\"fk-list-editor__empty\">{{ emptyMessage() }}</p>\n}\n\n<div class=\"fk-list-editor__add\">\n  <div class=\"fk-list-editor__add-input\">\n    <input\n      class=\"fk-list-editor__input\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"newItemValue()\"\n      (ngModelChange)=\"newItemValue.set($event)\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    @if (newItemValue() && !disabled()) {\n      <button\n        class=\"fk-list-editor__add-clear\"\n        type=\"button\"\n        aria-label=\"Clear input\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"newItemValue.set('')\"\n      >\n        <fk-icon name=\"circle-xmark-outline\" size=\"sm\" />\n      </button>\n    }\n  </div>\n\n  <fk-button\n    variant=\"outline\"\n    size=\"sm\"\n    [disabled]=\"!canAdd() || disabled()\"\n    (click)=\"addItem()\"\n  >\n    <fk-icon name=\"add\" fkButtonIconStart />\n    {{ addLabel() }}\n  </fk-button>\n</div>\n\n@if (hasDuplicates()) {\n  <p class=\"fk-list-editor__error\">Item names must be unique.</p>\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-loader.mjs

@@ -0,0 +1,81 @@
+import * as i0 from '@angular/core';
+import { Directive, input, computed, HostBinding, ContentChild, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FkLoaderIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkLoaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkLoaderIconDirective, isStandalone: true, selector: "[fkLoaderIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkLoaderIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkLoaderIcon]',
+                    standalone: true,
+                }]
+        }] });
+class LoaderComponent {
+    customIcon;
+    hasCustomIcon = false;
+    // ===== INPUTS =====
+    /** Size of the spinning loader indicator. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Color of the spinner; "inherit" adopts the nearest ancestor's color. */
+    color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return [
+            'fk-loader',
+            `fk-loader--${this.size()}`,
+            this.color() !== 'inherit' ? `fk-loader--${this.color()}` : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostRole() {
+        return 'status';
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    get hostId() {
+        return this.id();
+    }
+    ngAfterContentInit() {
+        this.hasCustomIcon = !!this.customIcon;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LoaderComponent, isStandalone: true, selector: "fk-loader", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 } }, host: { properties: { "class": "this.hostClass", "attr.role": "this.hostRole", "attr.aria-label": "this.hostAriaLabel", "attr.id": "this.hostId" } }, queries: [{ propertyName: "customIcon", first: true, predicate: FkLoaderIconDirective, descendants: true }], ngImport: i0, template: "<span class=\"fk-loader__spinner\">\n  <ng-content select=\"[fkLoaderIcon]\" />\n\n  @if (!hasCustomIcon) {\n    <svg\n      class=\"fk-loader__default-svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.5\"\n      stroke-linecap=\"round\"\n    >\n      <path\n        d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\n        opacity=\"0.3\"\n      />\n      <path d=\"M12 2v4\" stroke-width=\"3\" />\n    </svg>\n  }\n</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.fk-loader__spinner{display:inline-flex;align-items:center;justify-content:center;animation:fk-loader-spin var(--fk-loader-animation-duration, .8s) linear infinite}.fk-loader__spinner svg{width:1em;height:1em;display:block}.fk-loader__default-svg{width:1em;height:1em;display:block}@keyframes fk-loader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host.fk-loader--xs{font-size:var(--fk-loader-size-xs, var(--fk-font-size-xs, .75rem))}:host.fk-loader--sm{font-size:var(--fk-loader-size-sm, var(--fk-font-size-sm, 1rem))}:host.fk-loader--md{font-size:var(--fk-loader-size-md, var(--fk-font-size-md, 1.25rem))}:host.fk-loader--lg{font-size:var(--fk-loader-size-lg, var(--fk-font-size-lg, 1.5rem))}:host.fk-loader--xl{font-size:var(--fk-loader-size-xl, var(--fk-font-size-xl, 2rem))}:host.fk-loader--default{color:var(--fk-icon-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-loader--muted{color:var(--fk-icon-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-loader--primary{color:var(--fk-icon-color-primary, var(--fk-color-primary, #0a84ff))}:host.fk-loader--danger{color:var(--fk-icon-color-danger, var(--fk-color-danger, #e02424))}:host.fk-loader--success{color:var(--fk-icon-color-success, var(--fk-color-success, #10b981))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-loader', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fk-loader__spinner\">\n  <ng-content select=\"[fkLoaderIcon]\" />\n\n  @if (!hasCustomIcon) {\n    <svg\n      class=\"fk-loader__default-svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.5\"\n      stroke-linecap=\"round\"\n    >\n      <path\n        d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\n        opacity=\"0.3\"\n      />\n      <path d=\"M12 2v4\" stroke-width=\"3\" />\n    </svg>\n  }\n</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.fk-loader__spinner{display:inline-flex;align-items:center;justify-content:center;animation:fk-loader-spin var(--fk-loader-animation-duration, .8s) linear infinite}.fk-loader__spinner svg{width:1em;height:1em;display:block}.fk-loader__default-svg{width:1em;height:1em;display:block}@keyframes fk-loader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host.fk-loader--xs{font-size:var(--fk-loader-size-xs, var(--fk-font-size-xs, .75rem))}:host.fk-loader--sm{font-size:var(--fk-loader-size-sm, var(--fk-font-size-sm, 1rem))}:host.fk-loader--md{font-size:var(--fk-loader-size-md, var(--fk-font-size-md, 1.25rem))}:host.fk-loader--lg{font-size:var(--fk-loader-size-lg, var(--fk-font-size-lg, 1.5rem))}:host.fk-loader--xl{font-size:var(--fk-loader-size-xl, var(--fk-font-size-xl, 2rem))}:host.fk-loader--default{color:var(--fk-icon-color-default, var(--fk-color-text, #1f2d3d))}:host.fk-loader--muted{color:var(--fk-icon-color-muted, var(--fk-color-muted, #8a98a8))}:host.fk-loader--primary{color:var(--fk-icon-color-primary, var(--fk-color-primary, #0a84ff))}:host.fk-loader--danger{color:var(--fk-icon-color-danger, var(--fk-color-danger, #e02424))}:host.fk-loader--success{color:var(--fk-icon-color-success, var(--fk-color-success, #10b981))}\n"] }]
+        }], propDecorators: { customIcon: [{
+                type: ContentChild,
+                args: [FkLoaderIconDirective]
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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 }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FkLoaderIconDirective, LoaderComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-loader.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-loader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-loader.mjs","sources":["../../../../packages/ui-ng/ui/loader/loader.component.ts","../../../../packages/ui-ng/ui/loader/loader.component.html","../../../../packages/ui-ng/ui/loader/frame-kit-ui-ng-ui-loader.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ContentChild,\n  Directive,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { LoaderColor, LoaderSize } from './loader.types';\n\n@Directive({\n  selector: '[fkLoaderIcon]',\n  standalone: true,\n})\nexport class FkLoaderIconDirective {}\n\n@Component({\n  selector: 'fk-loader',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './loader.component.html',\n  styleUrl: './loader.component.scss',\n})\nexport class LoaderComponent implements AfterContentInit {\n  @ContentChild(FkLoaderIconDirective)\n  private customIcon?: FkLoaderIconDirective;\n\n  hasCustomIcon = false;\n\n  // ===== INPUTS =====\n  /** Size of the spinning loader indicator. */\n  readonly size = input<LoaderSize>('md');\n  /** Color of the spinner; \"inherit\" adopts the nearest ancestor's color. */\n  readonly color = input<LoaderColor>('inherit');\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string>('Loading');\n\n  // ===== COMPUTED =====\n\n  readonly classes = computed(() => {\n    return [\n      'fk-loader',\n      `fk-loader--${this.size()}`,\n      this.color() !== 'inherit' ? `fk-loader--${this.color()}` : '',\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.role')\n  get hostRole(): string {\n    return 'status';\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel(): string {\n    return this.ariaLabel();\n  }\n\n  @HostBinding('attr.id')\n  get hostId(): string | null {\n    return this.id();\n  }\n\n  ngAfterContentInit(): void {\n    this.hasCustomIcon = !!this.customIcon;\n  }\n}\n","<span class=\"fk-loader__spinner\">\n  <ng-content select=\"[fkLoaderIcon]\" />\n\n  @if (!hasCustomIcon) {\n    <svg\n      class=\"fk-loader__default-svg\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.5\"\n      stroke-linecap=\"round\"\n    >\n      <path\n        d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\n        opacity=\"0.3\"\n      />\n      <path d=\"M12 2v4\" stroke-width=\"3\" />\n    </svg>\n  }\n</span>\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-menu-item.mjs

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, ElementRef, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconComponent } from '@frame-kit/ui-ng/core/icon';
+
+class MenuItemComponent {
+    // ===== INPUTS =====
+    /** Optional icon name rendered to the leading side of the label. */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** When true, applies destructive (danger) color styling to the item. */
+    danger = input(false, ...(ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []));
+    /** When true, prevents interaction and applies disabled styling. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the user activates the item via click or keyboard. */
+    itemClick = output();
+    // ===== REFS =====
+    elRef = inject(ElementRef);
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return [
+            'fk-menu-item',
+            this.danger() ? 'fk-menu-item--danger' : '',
+            this.disabled() ? 'fk-menu-item--disabled' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    // ===== ACTIONS =====
+    onClick() {
+        if (this.disabled()) {
+            return;
+        }
+        this.itemClick.emit();
+        this.elRef.nativeElement.dispatchEvent(new CustomEvent('fkmenuitemselect', { bubbles: true }));
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.onClick();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuItemComponent, isStandalone: true, selector: "fk-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-disabled": "disabled() ? \"true\" : null", "class": "this.hostClass" } }, ngImport: i0, template: "@if (icon()) {\n  <fk-icon [name]=\"icon()!\" size=\"sm\" />\n}\n<span class=\"fk-menu-item__label\">\n  <ng-content />\n</span>\n", styles: [":host{box-sizing:border-box;display:flex;align-items:center;gap:var(--fk-menu-item-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-menu-item-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border-radius:var(--fk-menu-item-radius, var(--fk-radius-md, .375rem));background:transparent;font-family:var(--fk-menu-item-font-family, var(--fk-font-family-base, sans-serif));font-size:var(--fk-menu-item-font-size, .875rem);color:var(--fk-menu-item-color, var(--fk-color-text, #1f2d3d));text-align:left;cursor:pointer;transition:background-color var(--fk-menu-item-transition-duration, var(--fk-motion-duration-fast, .12s)) var(--fk-menu-item-transition-easing, var(--fk-motion-easing-default, ease));outline:none;border:none}:host:hover:not(.fk-menu-item--disabled){background-color:var(--fk-menu-item-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host:focus-visible{box-shadow:var(--fk-menu-item-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host.fk-menu-item--danger{color:var(--fk-menu-item-danger-color, var(--fk-color-danger, #e02424))}:host.fk-menu-item--danger:hover:not(.fk-menu-item--disabled){background-color:var(--fk-menu-item-danger-bg-hover, var(--fk-color-danger-surface, #fef2f2))}.fk-menu-item--disabled{opacity:var(--fk-menu-item-opacity-disabled, .5);cursor:not-allowed}.fk-menu-item__label{flex:1;white-space:nowrap}\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: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-menu-item', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'menuitem',
+                        '[attr.tabindex]': 'disabled() ? null : -1',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: "@if (icon()) {\n  <fk-icon [name]=\"icon()!\" size=\"sm\" />\n}\n<span class=\"fk-menu-item__label\">\n  <ng-content />\n</span>\n", styles: [":host{box-sizing:border-box;display:flex;align-items:center;gap:var(--fk-menu-item-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-menu-item-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border-radius:var(--fk-menu-item-radius, var(--fk-radius-md, .375rem));background:transparent;font-family:var(--fk-menu-item-font-family, var(--fk-font-family-base, sans-serif));font-size:var(--fk-menu-item-font-size, .875rem);color:var(--fk-menu-item-color, var(--fk-color-text, #1f2d3d));text-align:left;cursor:pointer;transition:background-color var(--fk-menu-item-transition-duration, var(--fk-motion-duration-fast, .12s)) var(--fk-menu-item-transition-easing, var(--fk-motion-easing-default, ease));outline:none;border:none}:host:hover:not(.fk-menu-item--disabled){background-color:var(--fk-menu-item-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host:focus-visible{box-shadow:var(--fk-menu-item-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host.fk-menu-item--danger{color:var(--fk-menu-item-danger-color, var(--fk-color-danger, #e02424))}:host.fk-menu-item--danger:hover:not(.fk-menu-item--disabled){background-color:var(--fk-menu-item-danger-bg-hover, var(--fk-color-danger-surface, #fef2f2))}.fk-menu-item--disabled{opacity:var(--fk-menu-item-opacity-disabled, .5);cursor:not-allowed}.fk-menu-item__label{flex:1;white-space:nowrap}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MenuSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: MenuSeparatorComponent, isStandalone: true, selector: "fk-menu-separator", host: { attributes: { "role": "separator" }, classAttribute: "fk-menu-separator" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:1px;margin:var(--fk-rhythm-1, .25rem) 0;background-color:var(--fk-menu-separator-color, var(--fk-color-border, #d9e2ee))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-menu-separator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: '', host: {
+                        role: 'separator',
+                        class: 'fk-menu-separator',
+                    }, styles: [":host{display:block;height:1px;margin:var(--fk-rhythm-1, .25rem) 0;background-color:var(--fk-menu-separator-color, var(--fk-color-border, #d9e2ee))}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenuItemComponent, MenuSeparatorComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-menu-item.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-menu-item.mjs","sources":["../../../../packages/ui-ng/ui/menu-item/menu-item.component.ts","../../../../packages/ui-ng/ui/menu-item/menu-item.component.html","../../../../packages/ui-ng/ui/menu-item/menu-separator.component.ts","../../../../packages/ui-ng/ui/menu-item/frame-kit-ui-ng-ui-menu-item.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\n\n@Component({\n  selector: 'fk-menu-item',\n  standalone: true,\n  imports: [IconComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './menu-item.component.html',\n  styleUrl: './menu-item.component.scss',\n  host: {\n    role: 'menuitem',\n    '[attr.tabindex]': 'disabled() ? null : -1',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n    '(click)': 'onClick()',\n    '(keydown)': 'onKeydown($event)',\n  },\n})\nexport class MenuItemComponent {\n  // ===== INPUTS =====\n  /** Optional icon name rendered to the leading side of the label. */\n  readonly icon = input<string | null>(null);\n  /** When true, applies destructive (danger) color styling to the item. */\n  readonly danger = input<boolean>(false);\n  /** When true, prevents interaction and applies disabled styling. */\n  readonly disabled = input<boolean>(false);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user activates the item via click or keyboard. */\n  readonly itemClick = output<void>();\n\n  // ===== REFS =====\n  readonly elRef = inject(ElementRef);\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return [\n      'fk-menu-item',\n      this.danger() ? 'fk-menu-item--danger' : '',\n      this.disabled() ? 'fk-menu-item--disabled' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  // ===== ACTIONS =====\n\n  onClick(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    this.itemClick.emit();\n    this.elRef.nativeElement.dispatchEvent(\n      new CustomEvent('fkmenuitemselect', { bubbles: true }),\n    );\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onClick();\n    }\n  }\n}\n","@if (icon()) {\n  <fk-icon [name]=\"icon()!\" size=\"sm\" />\n}\n<span class=\"fk-menu-item__label\">\n  <ng-content />\n</span>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'fk-menu-separator',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: '',\n  styleUrl: './menu-separator.component.scss',\n  host: {\n    role: 'separator',\n    class: 'fk-menu-separator',\n  },\n})\nexport class MenuSeparatorComponent {}\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-brand.mjs

@@ -0,0 +1,40 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+class NavBrandComponent {
+    // ===== REQUIRED =====
+    /** Brand or application name rendered as the nav logo text. */
+    brandText = input.required(...(ngDevMode ? [{ debugName: "brandText" }] : /* istanbul ignore next */ []));
+    // ===== OPTIONAL =====
+    /** Router path the brand link navigates to when clicked. */
+    href = input('/', ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return ['fk-nav-brand', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NavBrandComponent, isStandalone: true, selector: "fk-nav-brand", inputs: { brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<a\n  class=\"fk-nav-brand__link\"\n  [routerLink]=\"href()\"\n  [attr.id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <span class=\"fk-nav-brand__logo\">\n    <ng-content select=\"[navLogo]\"></ng-content>\n  </span>\n  <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n</a>\n", styles: [":host{display:inline-block}.fk-nav-brand__link{display:inline-flex;align-items:center;gap:var(--fk-nav-brand-gap, .5rem);text-decoration:none;color:var(--fk-nav-brand-color, inherit)}.fk-nav-brand__link:hover{color:var(--fk-nav-brand-color-hover, inherit)}.fk-nav-brand__text{font-size:var(--fk-nav-brand-font-size, 1.125rem);font-weight:var(--fk-nav-brand-font-weight, 600);line-height:var(--fk-nav-brand-line-height, 1);white-space:nowrap}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavBrandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-nav-brand', standalone: true, imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"fk-nav-brand__link\"\n  [routerLink]=\"href()\"\n  [attr.id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <span class=\"fk-nav-brand__logo\">\n    <ng-content select=\"[navLogo]\"></ng-content>\n  </span>\n  <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n</a>\n", styles: [":host{display:inline-block}.fk-nav-brand__link{display:inline-flex;align-items:center;gap:var(--fk-nav-brand-gap, .5rem);text-decoration:none;color:var(--fk-nav-brand-color, inherit)}.fk-nav-brand__link:hover{color:var(--fk-nav-brand-color-hover, inherit)}.fk-nav-brand__text{font-size:var(--fk-nav-brand-font-size, 1.125rem);font-weight:var(--fk-nav-brand-font-weight, 600);line-height:var(--fk-nav-brand-line-height, 1);white-space:nowrap}\n"] }]
+        }], propDecorators: { brandText: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandText", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavBrandComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-nav-brand.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-nav-brand.mjs","sources":["../../../../packages/ui-ng/ui/nav-brand/nav-brand.component.ts","../../../../packages/ui-ng/ui/nav-brand/nav-brand.component.html","../../../../packages/ui-ng/ui/nav-brand/frame-kit-ui-ng-ui-nav-brand.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n  selector: 'fk-nav-brand',\n  standalone: true,\n  imports: [RouterModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './nav-brand.component.html',\n  styleUrl: './nav-brand.component.scss',\n})\nexport class NavBrandComponent {\n  // ===== REQUIRED =====\n  /** Brand or application name rendered as the nav logo text. */\n  readonly brandText = input.required<string>();\n\n  // ===== OPTIONAL =====\n  /** Router path the brand link navigates to when clicked. */\n  readonly href = input<string>('/');\n\n  // ===== BASE PROPS =====\n  readonly id = input<string | null>(null);\n  readonly className = input<string>('');\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return ['fk-nav-brand', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n}\n","<a\n  class=\"fk-nav-brand__link\"\n  [routerLink]=\"href()\"\n  [attr.id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <span class=\"fk-nav-brand__logo\">\n    <ng-content select=\"[navLogo]\"></ng-content>\n  </span>\n  <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAiBa,iBAAiB,CAAA;;;AAGnB,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,+EAAU;;;AAIpC,IAAA,IAAI,GAAG,KAAK,CAAS,GAAG,2EAAC;;AAGzB,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;AAGtC,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACrE,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;uGAtBW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjB9B,0SAWA,EAAA,MAAA,EAAA,CAAA,6bAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDCY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKX,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,eAAA,EACN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,0SAAA,EAAA,MAAA,EAAA,CAAA,6bAAA,CAAA,EAAA;;sBAuB9C,WAAW;uBAAC,OAAO;;;AEpCtB;;AAEG;;;;"}