@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-note.mjs

@@ -0,0 +1,56 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class NoteComponent {
+    // ===== INPUTS =====
+    /** Semantic variant driving the color of the note text. */
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** When true, renders the note text in italic style. */
+    italic = input(false, ...(ngDevMode ? [{ debugName: "italic" }] : /* 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 */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return [
+            'fk-note',
+            `fk-note--${this.variant()}`,
+            this.italic() ? 'fk-note--italic' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NoteComponent, isStandalone: true, selector: "fk-note", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", 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.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;padding-block:var(--fk-note-padding-block, var(--fk-rhythm-2, .5rem));padding-inline-start:var(--fk-note-padding-inline-start, var(--fk-rhythm-4, 1rem));border-inline-start:var(--fk-note-border-width, 3px) solid var(--fk-note-info-accent, var(--fk-color-primary, #0a84ff));color:var(--fk-note-color, var(--fk-color-text, #1f2d3d));font-size:var(--fk-note-font-size, var(--fk-typography-body-font-size, .875rem));line-height:var(--fk-note-line-height, var(--fk-typography-body-line-height, 1.5))}:host.fk-note--info{border-inline-start-color:var(--fk-note-info-accent, var(--fk-color-primary, #0a84ff))}:host.fk-note--success{border-inline-start-color:var(--fk-note-success-accent, var(--fk-color-success, #10b981))}:host.fk-note--warning{border-inline-start-color:var(--fk-note-warning-accent, var(--fk-color-warning, #f59e0b))}:host.fk-note--danger{border-inline-start-color:var(--fk-note-danger-accent, var(--fk-color-danger, #e02424))}:host.fk-note--italic{font-style:italic}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-note', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:block;padding-block:var(--fk-note-padding-block, var(--fk-rhythm-2, .5rem));padding-inline-start:var(--fk-note-padding-inline-start, var(--fk-rhythm-4, 1rem));border-inline-start:var(--fk-note-border-width, 3px) solid var(--fk-note-info-accent, var(--fk-color-primary, #0a84ff));color:var(--fk-note-color, var(--fk-color-text, #1f2d3d));font-size:var(--fk-note-font-size, var(--fk-typography-body-font-size, .875rem));line-height:var(--fk-note-line-height, var(--fk-typography-body-line-height, 1.5))}:host.fk-note--info{border-inline-start-color:var(--fk-note-info-accent, var(--fk-color-primary, #0a84ff))}:host.fk-note--success{border-inline-start-color:var(--fk-note-success-accent, var(--fk-color-success, #10b981))}:host.fk-note--warning{border-inline-start-color:var(--fk-note-warning-accent, var(--fk-color-warning, #f59e0b))}:host.fk-note--danger{border-inline-start-color:var(--fk-note-danger-accent, var(--fk-color-danger, #e02424))}:host.fk-note--italic{font-style:italic}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], italic: [{ type: i0.Input, args: [{ isSignal: true, alias: "italic", 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']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NoteComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-note.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-note.mjs","sources":["../../../../packages/ui-ng/ui/note/note.component.ts","../../../../packages/ui-ng/ui/note/note.component.html","../../../../packages/ui-ng/ui/note/frame-kit-ui-ng-ui-note.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { NoteVariant } from './note.types';\n\n@Component({\n  selector: 'fk-note',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './note.component.html',\n  styleUrl: './note.component.scss',\n})\nexport class NoteComponent {\n  // ===== INPUTS =====\n  /** Semantic variant driving the color of the note text. */\n  readonly variant = input<NoteVariant>('info');\n  /** When true, renders the note text in italic style. */\n  readonly italic = input<boolean>(false);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return [\n      'fk-note',\n      `fk-note--${this.variant()}`,\n      this.italic() ? 'fk-note--italic' : '',\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() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n}\n","<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAkBa,aAAa,CAAA;;;AAGf,IAAA,OAAO,GAAG,KAAK,CAAc,MAAM,8EAAC;;AAEpC,IAAA,MAAM,GAAG,KAAK,CAAU,KAAK,6EAAC;;AAG9B,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;AAGtC,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;QAC/B,OAAO;YACL,SAAS;AACT,YAAA,CAAA,SAAA,EAAY,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE;YAC5B,IAAI,CAAC,MAAM,EAAE,GAAG,iBAAiB,GAAG,EAAE;YACtC,IAAI,CAAC,SAAS,EAAE;AACjB;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,MAAM,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,EAAE,EAAE;IAClB;AAEA,IAAA,IACI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;IACzB;uGArCW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,uzBClB1B,kBACA,EAAA,MAAA,EAAA,CAAA,0+BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDiBa,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,cACP,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,0+BAAA,CAAA,EAAA;;sBA4B9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,SAAS;;sBAKrB,WAAW;uBAAC,iBAAiB;;;AEpDhC;;AAEG;;;;"}

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

@@ -0,0 +1,105 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+const NUMBERED_LIST_PARENT = new InjectionToken('NUMBERED_LIST_PARENT');
+
+class NumberedListItemComponent {
+    // When rendered inside an `fk-numbered-list`, we look up the parent
+    // via its `NUMBERED_LIST_PARENT` token and treat its inputs as
+    // defaults for items that don't override them. Outside a list, the
+    // item stands alone with its own defaults. The token indirection
+    // breaks the circular ES-module import that a direct
+    // `NumberedListComponent` type reference would create.
+    parent = inject(NUMBERED_LIST_PARENT, { optional: true });
+    // ===== INPUTS =====
+    /** Size for this item; falls back to the parent numbered-list's `size` when null. */
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* 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 */ []));
+    // ===== COMPUTED =====
+    resolvedSize = computed(() => this.size() ?? this.parent?.size() ?? 'md', ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-numbered-list-item',
+            `fk-numbered-list-item--${this.resolvedSize()}`,
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    // Only carry `role="listitem"` when we're actually inside a list
+    // container. Outside a list the item is presentational and should
+    // not advertise list semantics — screen readers would otherwise
+    // announce an orphan listitem.
+    get hostRole() {
+        return this.parent ? 'listitem' : null;
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberedListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NumberedListItemComponent, isStandalone: true, selector: "fk-numbered-list-item", inputs: { size: { classPropertyName: "size", publicName: "size", 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.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<span class=\"fk-numbered-list-item__badge\" aria-hidden=\"true\"></span>\n<span class=\"fk-numbered-list-item__label\">\n  <ng-content />\n</span>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--fk-numbered-list-item-gap, var(--fk-rhythm-3, .75rem));color:var(--fk-numbered-list-item-color, var(--fk-color-text, #1f2d3d));line-height:var(--fk-numbered-list-item-line-height, var(--fk-typography-body-line-height, 1.5));counter-increment:fk-numbered-list-counter}.fk-numbered-list-item__badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-numbered-list-badge-size, 1.5rem);height:var(--fk-numbered-list-badge-size, 1.5rem);border-radius:var(--fk-numbered-list-badge-radius, 50%);background:var(--fk-numbered-list-badge-bg, var(--fk-color-primary-light, #eaf4ff));color:var(--fk-numbered-list-badge-color, var(--fk-color-primary, #0a84ff));font-size:var(--fk-numbered-list-badge-font-size, .75rem);font-weight:var(--fk-numbered-list-badge-font-weight, var(--fk-font-weight-semibold, 600))}.fk-numbered-list-item__badge:before{content:counter(fk-numbered-list-counter)}.fk-numbered-list-item__label{min-width:0}:host.fk-numbered-list-item--sm{font-size:var(--fk-numbered-list-item-sm-font-size, var(--fk-typography-small-font-size, .8125rem))}:host.fk-numbered-list-item--md{font-size:var(--fk-numbered-list-item-md-font-size, var(--fk-typography-body-font-size, .9375rem))}:host.fk-numbered-list-item--lg{font-size:var(--fk-numbered-list-item-lg-font-size, var(--fk-typography-lead-font-size, 1rem))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberedListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-numbered-list-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fk-numbered-list-item__badge\" aria-hidden=\"true\"></span>\n<span class=\"fk-numbered-list-item__label\">\n  <ng-content />\n</span>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--fk-numbered-list-item-gap, var(--fk-rhythm-3, .75rem));color:var(--fk-numbered-list-item-color, var(--fk-color-text, #1f2d3d));line-height:var(--fk-numbered-list-item-line-height, var(--fk-typography-body-line-height, 1.5));counter-increment:fk-numbered-list-counter}.fk-numbered-list-item__badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-numbered-list-badge-size, 1.5rem);height:var(--fk-numbered-list-badge-size, 1.5rem);border-radius:var(--fk-numbered-list-badge-radius, 50%);background:var(--fk-numbered-list-badge-bg, var(--fk-color-primary-light, #eaf4ff));color:var(--fk-numbered-list-badge-color, var(--fk-color-primary, #0a84ff));font-size:var(--fk-numbered-list-badge-font-size, .75rem);font-weight:var(--fk-numbered-list-badge-font-weight, var(--fk-font-weight-semibold, 600))}.fk-numbered-list-item__badge:before{content:counter(fk-numbered-list-counter)}.fk-numbered-list-item__label{min-width:0}:host.fk-numbered-list-item--sm{font-size:var(--fk-numbered-list-item-sm-font-size, var(--fk-typography-small-font-size, .8125rem))}:host.fk-numbered-list-item--md{font-size:var(--fk-numbered-list-item-md-font-size, var(--fk-typography-body-font-size, .9375rem))}:host.fk-numbered-list-item--lg{font-size:var(--fk-numbered-list-item-lg-font-size, var(--fk-typography-lead-font-size, 1rem))}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+class NumberedListComponent {
+    // ===== INPUTS =====
+    /** Optional array of items to render declaratively; when null, projected `fk-numbered-list-item` elements are used. */
+    items = input(null, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Size applied to every item in the list. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* 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 */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return ['fk-numbered-list', 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: NumberedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NumberedListComponent, isStandalone: true, selector: "fk-numbered-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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" } }, providers: [
+            { provide: NUMBERED_LIST_PARENT, useExisting: NumberedListComponent },
+        ], ngImport: i0, template: "<div\n  class=\"fk-numbered-list__list\"\n  role=\"list\"\n  [id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @if (items(); as rows) {\n    @for (row of rows; track $index) {\n      <fk-numbered-list-item>\n        {{ row.label }}\n      </fk-numbered-list-item>\n    }\n  } @else {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:block;margin-top:var(--fk-numbered-list-margin-top, var(--fk-rhythm-4, 1rem))}.fk-numbered-list__list{counter-reset:fk-numbered-list-counter;display:flex;flex-direction:column;gap:var(--fk-numbered-list-row-gap, var(--fk-rhythm-3, .75rem))}\n"], dependencies: [{ kind: "component", type: NumberedListItemComponent, selector: "fk-numbered-list-item", inputs: ["size", "className", "id", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberedListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-numbered-list', standalone: true, imports: [NumberedListItemComponent], providers: [
+                        { provide: NUMBERED_LIST_PARENT, useExisting: NumberedListComponent },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fk-numbered-list__list\"\n  role=\"list\"\n  [id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @if (items(); as rows) {\n    @for (row of rows; track $index) {\n      <fk-numbered-list-item>\n        {{ row.label }}\n      </fk-numbered-list-item>\n    }\n  } @else {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:block;margin-top:var(--fk-numbered-list-margin-top, var(--fk-rhythm-4, 1rem))}.fk-numbered-list__list{counter-reset:fk-numbered-list-counter;display:flex;flex-direction:column;gap:var(--fk-numbered-list-row-gap, var(--fk-rhythm-3, .75rem))}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NumberedListComponent, NumberedListItemComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-numbered-list.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-numbered-list.mjs","sources":["../../../../packages/ui-ng/ui/numbered-list/numbered-list.token.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list-item.component.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list-item.component.html","../../../../packages/ui-ng/ui/numbered-list/numbered-list.component.ts","../../../../packages/ui-ng/ui/numbered-list/numbered-list.component.html","../../../../packages/ui-ng/ui/numbered-list/frame-kit-ui-ng-ui-numbered-list.ts"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core';\n\nimport type { NumberedListSize } from './numbered-list.types';\n\n/**\n * Parent contract exposed by `fk-numbered-list` to `fk-numbered-list-item`\n * children. Lives in its own file so the two components can reference it\n * without the circular ES-module import that a direct\n * `NumberedListComponent` type import would create (item -> list -> item).\n */\nexport interface NumberedListParent {\n  readonly size: Signal<NumberedListSize>;\n}\n\nexport const NUMBERED_LIST_PARENT = new InjectionToken<NumberedListParent>(\n  'NUMBERED_LIST_PARENT',\n);\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  inject,\n  input,\n} from '@angular/core';\n\nimport { NUMBERED_LIST_PARENT } from './numbered-list.token';\nimport type { NumberedListSize } from './numbered-list.types';\n\n@Component({\n  selector: 'fk-numbered-list-item',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './numbered-list-item.component.html',\n  styleUrl: './numbered-list-item.component.scss',\n})\nexport class NumberedListItemComponent {\n  // When rendered inside an `fk-numbered-list`, we look up the parent\n  // via its `NUMBERED_LIST_PARENT` token and treat its inputs as\n  // defaults for items that don't override them. Outside a list, the\n  // item stands alone with its own defaults. The token indirection\n  // breaks the circular ES-module import that a direct\n  // `NumberedListComponent` type reference would create.\n  private readonly parent = inject(NUMBERED_LIST_PARENT, { optional: true });\n\n  // ===== INPUTS =====\n  /** Size for this item; falls back to the parent numbered-list's `size` when null. */\n  readonly size = input<NumberedListSize | null>(null);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== COMPUTED =====\n  protected readonly resolvedSize = computed<NumberedListSize>(\n    () => this.size() ?? this.parent?.size() ?? 'md',\n  );\n\n  readonly classes = computed(() => {\n    return [\n      'fk-numbered-list-item',\n      `fk-numbered-list-item--${this.resolvedSize()}`,\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  // Only carry `role=\"listitem\"` when we're actually inside a list\n  // container. Outside a list the item is presentational and should\n  // not advertise list semantics — screen readers would otherwise\n  // announce an orphan listitem.\n  @HostBinding('attr.role')\n  get hostRole(): string | null {\n    return this.parent ? 'listitem' : null;\n  }\n\n  @HostBinding('attr.id')\n  get hostId(): string | null {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel(): string | null {\n    return this.ariaLabel();\n  }\n}\n","<span class=\"fk-numbered-list-item__badge\" aria-hidden=\"true\"></span>\n<span class=\"fk-numbered-list-item__label\">\n  <ng-content />\n</span>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport {\n  NUMBERED_LIST_PARENT,\n  type NumberedListParent,\n} from './numbered-list.token';\nimport type { NumberedListItem, NumberedListSize } from './numbered-list.types';\nimport { NumberedListItemComponent } from './numbered-list-item.component';\n\n@Component({\n  selector: 'fk-numbered-list',\n  standalone: true,\n  imports: [NumberedListItemComponent],\n  providers: [\n    { provide: NUMBERED_LIST_PARENT, useExisting: NumberedListComponent },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './numbered-list.component.html',\n  styleUrl: './numbered-list.component.scss',\n})\nexport class NumberedListComponent implements NumberedListParent {\n  // ===== INPUTS =====\n  /** Optional array of items to render declaratively; when null, projected `fk-numbered-list-item` elements are used. */\n  readonly items = input<readonly NumberedListItem[] | null>(null);\n  /** Size applied to every item in the list. */\n  readonly size = input<NumberedListSize>('md');\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return ['fk-numbered-list', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n}\n","<div\n  class=\"fk-numbered-list__list\"\n  role=\"list\"\n  [id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @if (items(); as rows) {\n    @for (row of rows; track $index) {\n      <fk-numbered-list-item>\n        {{ row.label }}\n      </fk-numbered-list-item>\n    }\n  } @else {\n    <ng-content />\n  }\n</div>\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-pagination.mjs

@@ -0,0 +1,110 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconComponent } from '@frame-kit/ui-ng/core/icon';
+
+let nextPaginationId = 0;
+class PaginationComponent {
+    // ===== INPUTS =====
+    /** Current 1-based page number. */
+    page = input.required(...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /** Number of items shown per page (the page size). */
+    take = input.required(...(ngDevMode ? [{ debugName: "take" }] : /* istanbul ignore next */ []));
+    /** Total count of items across all pages used to compute `pageCount`. */
+    itemCount = input.required(...(ngDevMode ? [{ debugName: "itemCount" }] : /* istanbul ignore next */ []));
+    /** Available page-size values shown in the per-page selector. */
+    pageSizeOptions = input([10, 20, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    /** When true, renders first-page and last-page navigation buttons. */
+    showFirstLast = input(false, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : /* 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 */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the user navigates to a new page or changes the page size, emitting the new page and take. */
+    pageChange = output();
+    // ===== INTERNAL =====
+    selectId = `fk-pagination-take-${nextPaginationId++}`;
+    // ===== COMPUTED =====
+    /** Always >= 1. Empty datasets show "1 / 1" rather than "1 / 0". */
+    pageCount = computed(() => {
+        const count = this.itemCount();
+        const size = this.take();
+        return Math.ceil(count / size) || 1;
+    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    hasPreviousPage = computed(() => this.page() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : /* istanbul ignore next */ []));
+    hasNextPage = computed(() => this.page() < this.pageCount(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : /* istanbul ignore next */ []));
+    rangeStart = computed(() => {
+        const count = this.itemCount();
+        if (count === 0) {
+            return 0;
+        }
+        return (this.page() - 1) * this.take() + 1;
+    }, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = computed(() => {
+        return Math.min(this.page() * this.take(), this.itemCount());
+    }, ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return ['fk-pagination', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    // ===== ACTIONS =====
+    /** Navigates to the first page if the current page is not already the first. */
+    goToFirst() {
+        if (this.hasPreviousPage()) {
+            this.pageChange.emit({ page: 1, take: this.take() });
+        }
+    }
+    /** Navigates to the previous page if one exists. */
+    goToPrevious() {
+        if (this.hasPreviousPage()) {
+            this.pageChange.emit({ page: this.page() - 1, take: this.take() });
+        }
+    }
+    /** Navigates to the next page if one exists. */
+    goToNext() {
+        if (this.hasNextPage()) {
+            this.pageChange.emit({ page: this.page() + 1, take: this.take() });
+        }
+    }
+    /** Navigates to the last page if the current page is not already the last. */
+    goToLast() {
+        if (this.hasNextPage()) {
+            this.pageChange.emit({ page: this.pageCount(), take: this.take() });
+        }
+    }
+    onPageSizeChange(event) {
+        const select = event.target;
+        const newTake = Number(select.value);
+        this.pageChange.emit({ page: 1, take: newTake });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PaginationComponent, isStandalone: true, selector: "fk-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, take: { classPropertyName: "take", publicName: "take", isSignal: true, isRequired: true, transformFunction: null }, itemCount: { classPropertyName: "itemCount", publicName: "itemCount", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", 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 } }, outputs: { pageChange: "pageChange" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} \u2013 {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <fk-icon name=\"circleHalfArrowLeftFill\" size=\"sm\" />\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <fk-icon name=\"circleHalfArrowRightFill\" size=\"sm\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-pagination-gap, var(--fk-rhythm-4, 1rem));padding:var(--fk-pagination-padding, var(--fk-rhythm-3, .75rem)) var(--fk-pagination-padding-inline, var(--fk-rhythm-4, 1rem));font-family:var(--fk-pagination-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial));font-size:var(--fk-pagination-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-pagination-color, var(--fk-color-muted, #8a98a8));border-top:var(--fk-pagination-border-width, 0) solid var(--fk-pagination-border-color, var(--fk-color-border, #d9e2ee))}.fk-pagination__summary{white-space:nowrap}.fk-pagination__controls{display:flex;align-items:center;gap:var(--fk-pagination-controls-gap, var(--fk-rhythm-4, 1rem))}.fk-pagination__page-size{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-pagination__page-size-label{white-space:nowrap;color:var(--fk-pagination-label-color, var(--fk-color-muted, #8a98a8))}.fk-pagination__page-size-select{padding:var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-right, 1.25rem) var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-left, var(--fk-rhythm-2, .5rem));font-size:inherit;font-family:inherit;color:var(--fk-pagination-select-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-select-bg, var(--fk-color-surface, #ffffff)) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat right var(--fk-pagination-select-chevron-offset, .375rem) center;appearance:none;border:1px solid var(--fk-pagination-select-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-select-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-pagination__page-size-select:focus{outline:none;border-color:var(--fk-pagination-select-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-select-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__nav{display:flex;align-items:center;gap:var(--fk-pagination-nav-gap, var(--fk-rhythm-1, .25rem))}.fk-pagination__page-info{min-width:var(--fk-pagination-page-info-min-width, 3rem);text-align:center;white-space:nowrap;color:var(--fk-pagination-page-info-color, var(--fk-color-text, #1f2d3d))}.fk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-pagination-btn-size, 2rem);height:var(--fk-pagination-btn-size, 2rem);padding:0;color:var(--fk-pagination-btn-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-btn-bg, none);border:1px solid var(--fk-pagination-btn-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-btn-border-radius, var(--fk-radius-md, .375rem));cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.fk-pagination__btn:hover:not(:disabled){background-color:var(--fk-pagination-btn-bg-hover, var(--fk-color-surface-hover, #f5f7fa));border-color:var(--fk-pagination-btn-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-pagination__btn:disabled{opacity:var(--fk-pagination-btn-disabled-opacity, var(--fk-input-disabled-opacity, .4));cursor:not-allowed}.fk-pagination__btn:focus-visible{outline:none;border-color:var(--fk-pagination-btn-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-btn-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__arrow{width:var(--fk-pagination-arrow-size, .625rem);height:var(--fk-pagination-arrow-size, .625rem)}\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: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-pagination', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} \u2013 {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <fk-icon name=\"circleHalfArrowLeftFill\" size=\"sm\" />\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <fk-icon name=\"circleHalfArrowRightFill\" size=\"sm\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-pagination-gap, var(--fk-rhythm-4, 1rem));padding:var(--fk-pagination-padding, var(--fk-rhythm-3, .75rem)) var(--fk-pagination-padding-inline, var(--fk-rhythm-4, 1rem));font-family:var(--fk-pagination-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial));font-size:var(--fk-pagination-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-pagination-color, var(--fk-color-muted, #8a98a8));border-top:var(--fk-pagination-border-width, 0) solid var(--fk-pagination-border-color, var(--fk-color-border, #d9e2ee))}.fk-pagination__summary{white-space:nowrap}.fk-pagination__controls{display:flex;align-items:center;gap:var(--fk-pagination-controls-gap, var(--fk-rhythm-4, 1rem))}.fk-pagination__page-size{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-pagination__page-size-label{white-space:nowrap;color:var(--fk-pagination-label-color, var(--fk-color-muted, #8a98a8))}.fk-pagination__page-size-select{padding:var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-right, 1.25rem) var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-left, var(--fk-rhythm-2, .5rem));font-size:inherit;font-family:inherit;color:var(--fk-pagination-select-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-select-bg, var(--fk-color-surface, #ffffff)) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat right var(--fk-pagination-select-chevron-offset, .375rem) center;appearance:none;border:1px solid var(--fk-pagination-select-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-select-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-pagination__page-size-select:focus{outline:none;border-color:var(--fk-pagination-select-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-select-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__nav{display:flex;align-items:center;gap:var(--fk-pagination-nav-gap, var(--fk-rhythm-1, .25rem))}.fk-pagination__page-info{min-width:var(--fk-pagination-page-info-min-width, 3rem);text-align:center;white-space:nowrap;color:var(--fk-pagination-page-info-color, var(--fk-color-text, #1f2d3d))}.fk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-pagination-btn-size, 2rem);height:var(--fk-pagination-btn-size, 2rem);padding:0;color:var(--fk-pagination-btn-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-btn-bg, none);border:1px solid var(--fk-pagination-btn-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-btn-border-radius, var(--fk-radius-md, .375rem));cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.fk-pagination__btn:hover:not(:disabled){background-color:var(--fk-pagination-btn-bg-hover, var(--fk-color-surface-hover, #f5f7fa));border-color:var(--fk-pagination-btn-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-pagination__btn:disabled{opacity:var(--fk-pagination-btn-disabled-opacity, var(--fk-input-disabled-opacity, .4));cursor:not-allowed}.fk-pagination__btn:focus-visible{outline:none;border-color:var(--fk-pagination-btn-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-btn-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__arrow{width:var(--fk-pagination-arrow-size, .625rem);height:var(--fk-pagination-arrow-size, .625rem)}\n"] }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], take: [{ type: i0.Input, args: [{ isSignal: true, alias: "take", required: true }] }], itemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCount", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", 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 }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PaginationComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-pagination.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-pagination.mjs","sources":["../../../../packages/ui-ng/ui/pagination/pagination.component.ts","../../../../packages/ui-ng/ui/pagination/pagination.component.html","../../../../packages/ui-ng/ui/pagination/frame-kit-ui-ng-ui-pagination.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport type { PageChangeEvent } from './pagination.types';\n\nlet nextPaginationId = 0;\n\n@Component({\n  selector: 'fk-pagination',\n  standalone: true,\n  imports: [IconComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './pagination.component.html',\n  styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n  // ===== INPUTS =====\n  /** Current 1-based page number. */\n  readonly page = input.required<number>();\n  /** Number of items shown per page (the page size). */\n  readonly take = input.required<number>();\n  /** Total count of items across all pages used to compute `pageCount`. */\n  readonly itemCount = input.required<number>();\n  /** Available page-size values shown in the per-page selector. */\n  readonly pageSizeOptions = input<number[]>([10, 20, 50, 100]);\n  /** When true, renders first-page and last-page navigation buttons. */\n  readonly showFirstLast = input<boolean>(false);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user navigates to a new page or changes the page size, emitting the new page and take. */\n  readonly pageChange = output<PageChangeEvent>();\n\n  // ===== INTERNAL =====\n  readonly selectId = `fk-pagination-take-${nextPaginationId++}`;\n\n  // ===== COMPUTED =====\n  /** Always >= 1. Empty datasets show \"1 / 1\" rather than \"1 / 0\". */\n  readonly pageCount = computed(() => {\n    const count = this.itemCount();\n    const size = this.take();\n\n    return Math.ceil(count / size) || 1;\n  });\n\n  readonly hasPreviousPage = computed(() => this.page() > 1);\n\n  readonly hasNextPage = computed(() => this.page() < this.pageCount());\n\n  readonly rangeStart = computed(() => {\n    const count = this.itemCount();\n\n    if (count === 0) {\n      return 0;\n    }\n\n    return (this.page() - 1) * this.take() + 1;\n  });\n\n  readonly rangeEnd = computed(() => {\n    return Math.min(this.page() * this.take(), this.itemCount());\n  });\n\n  readonly classes = computed(() => {\n    return ['fk-pagination', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n\n  // ===== ACTIONS =====\n\n  /** Navigates to the first page if the current page is not already the first. */\n  goToFirst(): void {\n    if (this.hasPreviousPage()) {\n      this.pageChange.emit({ page: 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the previous page if one exists. */\n  goToPrevious(): void {\n    if (this.hasPreviousPage()) {\n      this.pageChange.emit({ page: this.page() - 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the next page if one exists. */\n  goToNext(): void {\n    if (this.hasNextPage()) {\n      this.pageChange.emit({ page: this.page() + 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the last page if the current page is not already the last. */\n  goToLast(): void {\n    if (this.hasNextPage()) {\n      this.pageChange.emit({ page: this.pageCount(), take: this.take() });\n    }\n  }\n\n  onPageSizeChange(event: Event): void {\n    const select = event.target as HTMLSelectElement;\n    const newTake = Number(select.value);\n\n    this.pageChange.emit({ page: 1, take: newTake });\n  }\n}\n","<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} – {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <fk-icon name=\"circleHalfArrowLeftFill\" size=\"sm\" />\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <fk-icon name=\"circleHalfArrowRightFill\" size=\"sm\" />\n      </button>\n    }\n  </div>\n</div>\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-progress-bar.mjs

@@ -0,0 +1,129 @@
+import { DecimalPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class ProgressBarComponent {
+    // ===== INPUTS =====
+    /** Current progress value; clamped between 0 and `max`. */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Maximum value representing 100% completion. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Whether the bar shows a determinate fill or an indeterminate animation. */
+    mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Size preset controlling the bar height. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Color variant applied to the progress fill. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Custom fill color as a CSS value, overriding the variant token. */
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Custom track (background) color as a CSS value. */
+    trackColor = input(null, ...(ngDevMode ? [{ debugName: "trackColor" }] : /* istanbul ignore next */ []));
+    /** Custom height of the bar as a CSS size value, overriding the size preset. */
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** When true, renders a text label showing the current percentage. */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /** When true, applies an animated striped pattern to the fill. */
+    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    clampedValue = computed(() => {
+        return Math.max(0, Math.min(this.value(), this.max()));
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    percentage = computed(() => {
+        const m = this.max();
+        if (m <= 0) {
+            return 0;
+        }
+        return (this.clampedValue() / m) * 100;
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
+    valueText = computed(() => {
+        if (this.mode() === 'indeterminate') {
+            return 'Loading...';
+        }
+        return `${Math.round(this.percentage())}%`;
+    }, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-progress-bar',
+            `fk-progress-bar--${this.size()}`,
+            `fk-progress-bar--${this.variant()}`,
+            `fk-progress-bar--${this.mode()}`,
+            this.striped() ? 'fk-progress-bar--striped' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ===== HOST BINDINGS =====
+    get hostClass() {
+        return this.classes();
+    }
+    get hostRole() {
+        return 'progressbar';
+    }
+    get hostAriaValueMin() {
+        return this.mode() === 'indeterminate' ? null : 0;
+    }
+    get hostAriaValueMax() {
+        return this.mode() === 'indeterminate' ? null : this.max();
+    }
+    get hostAriaValueNow() {
+        return this.mode() === 'indeterminate' ? null : this.clampedValue();
+    }
+    get hostAriaValueText() {
+        return this.valueText();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    get hostAriaDescribedBy() {
+        return this.ariaDescribedBy();
+    }
+    get hostId() {
+        return this.id();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ProgressBarComponent, isStandalone: true, selector: "fk-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.role": "this.hostRole", "attr.aria-valuemin": "this.hostAriaValueMin", "attr.aria-valuemax": "this.hostAriaValueMax", "attr.aria-valuenow": "this.hostAriaValueNow", "attr.aria-valuetext": "this.hostAriaValueText", "attr.aria-label": "this.hostAriaLabel", "attr.aria-describedby": "this.hostAriaDescribedBy", "attr.id": "this.hostId" } }, ngImport: i0, template: "<div\n  class=\"fk-progress-bar__track\"\n  [style.background-color]=\"trackColor()\"\n  [style.height]=\"height()\"\n>\n  <div\n    class=\"fk-progress-bar__fill\"\n    [style.width.%]=\"mode() === 'determinate' ? percentage() : null\"\n    [style.background-color]=\"color()\"\n  ></div>\n</div>\n\n@if (showValue() && mode() === 'determinate') {\n  <span class=\"fk-progress-bar__label\">\n    {{ percentage() | number: '1.0-0' }}%\n  </span>\n}\n", styles: [":host{display:flex;align-items:center;gap:var(--fk-progress-bar-label-gap, var(--fk-rhythm-2, .5rem));width:100%}.fk-progress-bar__track{flex:1;border-radius:var(--fk-progress-bar-radius, var(--fk-radius-full, 9999px));overflow:hidden;background:var(--fk-progress-bar-bg, var(--fk-color-surface-muted, #f1f5f9))}.fk-progress-bar__fill{height:100%;border-radius:inherit;transition:width var(--fk-progress-bar-transition, .3s ease)}.fk-progress-bar__label{font-size:var(--fk-progress-bar-label-size, var(--fk-typography-caption-font-size, .75rem));font-weight:var(--fk-progress-bar-label-weight, var(--fk-font-weight-medium, 500));color:var(--fk-progress-bar-label-color, var(--fk-color-text, #1f2d3d));white-space:nowrap;flex-shrink:0}:host.fk-progress-bar--sm .fk-progress-bar__track{height:var(--fk-progress-bar-height-sm, var(--fk-rhythm-1, .25rem))}:host.fk-progress-bar--md .fk-progress-bar__track{height:var(--fk-progress-bar-height-md, var(--fk-rhythm-2, .5rem))}:host.fk-progress-bar--lg .fk-progress-bar__track{height:var(--fk-progress-bar-height-lg, var(--fk-rhythm-3, .75rem))}:host.fk-progress-bar--default .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill, var(--fk-color-primary, #0a84ff))}:host.fk-progress-bar--success .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill-success, var(--fk-color-success, #10b981))}:host.fk-progress-bar--warning .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill-warning, var(--fk-color-warning, #f59e0b))}:host.fk-progress-bar--danger .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill-danger, var(--fk-color-danger, #e02424))}:host.fk-progress-bar--indeterminate .fk-progress-bar__fill{width:40%!important;animation:fk-progress-bar-indeterminate var(--fk-progress-bar-animation-duration, 1.5s) cubic-bezier(.65,.815,.735,.395) infinite}@keyframes fk-progress-bar-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}:host.fk-progress-bar--striped .fk-progress-bar__fill{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:fk-progress-bar-stripe 1s linear infinite}@keyframes fk-progress-bar-stripe{0%{background-position:1rem 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){:host.fk-progress-bar--indeterminate .fk-progress-bar__fill,:host.fk-progress-bar--striped .fk-progress-bar__fill{animation:none}}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-progress-bar', standalone: true, imports: [DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fk-progress-bar__track\"\n  [style.background-color]=\"trackColor()\"\n  [style.height]=\"height()\"\n>\n  <div\n    class=\"fk-progress-bar__fill\"\n    [style.width.%]=\"mode() === 'determinate' ? percentage() : null\"\n    [style.background-color]=\"color()\"\n  ></div>\n</div>\n\n@if (showValue() && mode() === 'determinate') {\n  <span class=\"fk-progress-bar__label\">\n    {{ percentage() | number: '1.0-0' }}%\n  </span>\n}\n", styles: [":host{display:flex;align-items:center;gap:var(--fk-progress-bar-label-gap, var(--fk-rhythm-2, .5rem));width:100%}.fk-progress-bar__track{flex:1;border-radius:var(--fk-progress-bar-radius, var(--fk-radius-full, 9999px));overflow:hidden;background:var(--fk-progress-bar-bg, var(--fk-color-surface-muted, #f1f5f9))}.fk-progress-bar__fill{height:100%;border-radius:inherit;transition:width var(--fk-progress-bar-transition, .3s ease)}.fk-progress-bar__label{font-size:var(--fk-progress-bar-label-size, var(--fk-typography-caption-font-size, .75rem));font-weight:var(--fk-progress-bar-label-weight, var(--fk-font-weight-medium, 500));color:var(--fk-progress-bar-label-color, var(--fk-color-text, #1f2d3d));white-space:nowrap;flex-shrink:0}:host.fk-progress-bar--sm .fk-progress-bar__track{height:var(--fk-progress-bar-height-sm, var(--fk-rhythm-1, .25rem))}:host.fk-progress-bar--md .fk-progress-bar__track{height:var(--fk-progress-bar-height-md, var(--fk-rhythm-2, .5rem))}:host.fk-progress-bar--lg .fk-progress-bar__track{height:var(--fk-progress-bar-height-lg, var(--fk-rhythm-3, .75rem))}:host.fk-progress-bar--default .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill, var(--fk-color-primary, #0a84ff))}:host.fk-progress-bar--success .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill-success, var(--fk-color-success, #10b981))}:host.fk-progress-bar--warning .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill-warning, var(--fk-color-warning, #f59e0b))}:host.fk-progress-bar--danger .fk-progress-bar__fill{background-color:var(--fk-progress-bar-fill-danger, var(--fk-color-danger, #e02424))}:host.fk-progress-bar--indeterminate .fk-progress-bar__fill{width:40%!important;animation:fk-progress-bar-indeterminate var(--fk-progress-bar-animation-duration, 1.5s) cubic-bezier(.65,.815,.735,.395) infinite}@keyframes fk-progress-bar-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}:host.fk-progress-bar--striped .fk-progress-bar__fill{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:fk-progress-bar-stripe 1s linear infinite}@keyframes fk-progress-bar-stripe{0%{background-position:1rem 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){:host.fk-progress-bar--indeterminate .fk-progress-bar__fill,:host.fk-progress-bar--striped .fk-progress-bar__fill{animation:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaValueMin: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], hostAriaValueMax: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }], hostAriaValueNow: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], hostAriaValueText: [{
+                type: HostBinding,
+                args: ['attr.aria-valuetext']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostAriaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ProgressBarComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-progress-bar.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-progress-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-progress-bar.mjs","sources":["../../../../packages/ui-ng/ui/progress-bar/progress-bar.component.ts","../../../../packages/ui-ng/ui/progress-bar/progress-bar.component.html","../../../../packages/ui-ng/ui/progress-bar/frame-kit-ui-ng-ui-progress-bar.ts"],"sourcesContent":["import { DecimalPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type {\n  ProgressBarMode,\n  ProgressBarSize,\n  ProgressBarVariant,\n} from './progress-bar.types';\n\n@Component({\n  selector: 'fk-progress-bar',\n  standalone: true,\n  imports: [DecimalPipe],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './progress-bar.component.scss',\n  templateUrl: './progress-bar.component.html',\n})\nexport class ProgressBarComponent {\n  // ===== INPUTS =====\n  /** Current progress value; clamped between 0 and `max`. */\n  readonly value = input<number>(0);\n  /** Maximum value representing 100% completion. */\n  readonly max = input<number>(100);\n  /** Whether the bar shows a determinate fill or an indeterminate animation. */\n  readonly mode = input<ProgressBarMode>('determinate');\n  /** Size preset controlling the bar height. */\n  readonly size = input<ProgressBarSize>('md');\n  /** Color variant applied to the progress fill. */\n  readonly variant = input<ProgressBarVariant>('default');\n  /** Custom fill color as a CSS value, overriding the variant token. */\n  readonly color = input<string | null>(null);\n  /** Custom track (background) color as a CSS value. */\n  readonly trackColor = input<string | null>(null);\n  /** Custom height of the bar as a CSS size value, overriding the size preset. */\n  readonly height = input<string | null>(null);\n  /** When true, renders a text label showing the current percentage. */\n  readonly showValue = input<boolean>(false);\n  /** When true, applies an animated striped pattern to the fill. */\n  readonly striped = input<boolean>(false);\n\n  // ===== BASE PROPS =====\n  readonly ariaLabel = input<string | null>(null);\n  readonly ariaDescribedBy = input<string | null>(null);\n  readonly id = input<string | null>(null);\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly clampedValue = computed(() => {\n    return Math.max(0, Math.min(this.value(), this.max()));\n  });\n\n  readonly percentage = computed(() => {\n    const m = this.max();\n\n    if (m <= 0) {\n      return 0;\n    }\n\n    return (this.clampedValue() / m) * 100;\n  });\n\n  readonly valueText = computed(() => {\n    if (this.mode() === 'indeterminate') {\n      return 'Loading...';\n    }\n\n    return `${Math.round(this.percentage())}%`;\n  });\n\n  readonly classes = computed(() => {\n    return [\n      'fk-progress-bar',\n      `fk-progress-bar--${this.size()}`,\n      `fk-progress-bar--${this.variant()}`,\n      `fk-progress-bar--${this.mode()}`,\n      this.striped() ? 'fk-progress-bar--striped' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  // ===== HOST BINDINGS =====\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.role')\n  get hostRole() {\n    return 'progressbar';\n  }\n\n  @HostBinding('attr.aria-valuemin')\n  get hostAriaValueMin() {\n    return this.mode() === 'indeterminate' ? null : 0;\n  }\n\n  @HostBinding('attr.aria-valuemax')\n  get hostAriaValueMax() {\n    return this.mode() === 'indeterminate' ? null : this.max();\n  }\n\n  @HostBinding('attr.aria-valuenow')\n  get hostAriaValueNow() {\n    return this.mode() === 'indeterminate' ? null : this.clampedValue();\n  }\n\n  @HostBinding('attr.aria-valuetext')\n  get hostAriaValueText() {\n    return this.valueText();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n\n  @HostBinding('attr.aria-describedby')\n  get hostAriaDescribedBy() {\n    return this.ariaDescribedBy();\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n}\n","<div\n  class=\"fk-progress-bar__track\"\n  [style.background-color]=\"trackColor()\"\n  [style.height]=\"height()\"\n>\n  <div\n    class=\"fk-progress-bar__fill\"\n    [style.width.%]=\"mode() === 'determinate' ? percentage() : null\"\n    [style.background-color]=\"color()\"\n  ></div>\n</div>\n\n@if (showValue() && mode() === 'determinate') {\n  <span class=\"fk-progress-bar__label\">\n    {{ percentage() | number: '1.0-0' }}%\n  </span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}