@mk-kit/ui 0.39.0 → 0.40.0

package/fesm2022/mk-kit-ui-data.mjs

@@ -376,7 +376,7 @@ class MkListItem {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkListItem, isStandalone: true, selector: "mk-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { attributes: { "role": "listitem" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class.mk-list-item--interactive": "interactive()", "class.mk-list-item--selected": "selected()", "class.mk-list-item--disabled": "disabled()", "attr.tabindex": "interactive() && !disabled() ? 0 : null", "attr.aria-selected": "interactive() ? selected() : null", "attr.aria-disabled": "disabled() ? 'true' : null" }, classAttribute: "mk-list-item" }, ngImport: i0, template: "<span class=\"mk-list-item__leading\"><ng-content select=\"[mkListLeading]\" /></span>\n<span class=\"mk-list-item__content\"><ng-content /></span>\n<span class=\"mk-list-item__trailing\"><ng-content select=\"[mkListTrailing]\" /></span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);min-height:2.75rem;border-top:var(--mk-border-width) solid var(--mk-list-item-border, transparent);color:var(--mk-text);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:first-child){border-top-color:transparent}.mk-list-item__leading,.mk-list-item__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--mk-text-muted)}.mk-list-item__leading:empty,.mk-list-item__trailing:empty{display:none}.mk-list-item__content{flex:1 1 auto;min-width:0;line-height:var(--mk-line-height-snug)}.mk-list-item__trailing{margin-inline-start:auto}:host(.mk-list-item--interactive){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-list-item--interactive:hover){background-color:var(--mk-neutral-subtle)}:host(.mk-list-item--interactive:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}:host(.mk-list-item--selected){background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}:host(.mk-list-item--disabled){cursor:not-allowed;opacity:.55;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkListItem, isStandalone: true, selector: "mk-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { attributes: { "role": "listitem" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class.mk-list-item--interactive": "interactive()", "class.mk-list-item--selected": "selected()", "class.mk-list-item--disabled": "disabled()", "attr.tabindex": "interactive() && !disabled() ? 0 : null", "attr.aria-current": "interactive() && selected() ? 'true' : null", "attr.aria-disabled": "disabled() ? 'true' : null" }, classAttribute: "mk-list-item" }, ngImport: i0, template: "<span class=\"mk-list-item__leading\"><ng-content select=\"[mkListLeading]\" /></span>\n<span class=\"mk-list-item__content\"><ng-content /></span>\n<span class=\"mk-list-item__trailing\"><ng-content select=\"[mkListTrailing]\" /></span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);min-height:2.75rem;border-top:var(--mk-border-width) solid var(--mk-list-item-border, transparent);color:var(--mk-text);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:first-child){border-top-color:transparent}.mk-list-item__leading,.mk-list-item__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--mk-text-muted)}.mk-list-item__leading:empty,.mk-list-item__trailing:empty{display:none}.mk-list-item__content{flex:1 1 auto;min-width:0;line-height:var(--mk-line-height-snug)}.mk-list-item__trailing{margin-inline-start:auto}:host(.mk-list-item--interactive){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-list-item--interactive:hover){background-color:var(--mk-neutral-subtle)}:host(.mk-list-item--interactive:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}:host(.mk-list-item--selected){background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}:host(.mk-list-item--disabled){cursor:not-allowed;opacity:.55;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListItem, decorators: [{
             type: Component,
@@ -387,7 +387,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-list-item--selected]': 'selected()',
                         '[class.mk-list-item--disabled]': 'disabled()',
                         '[attr.tabindex]': 'interactive() && !disabled() ? 0 : null',
-                        '[attr.aria-selected]': 'interactive() ? selected() : null',
+                        // `aria-selected` is not permitted on `listitem`; `aria-current` is the
+                        // ARIA way to mark the current row of a plain list.
+                        '[attr.aria-current]': "interactive() && selected() ? 'true' : null",
                         '[attr.aria-disabled]': "disabled() ? 'true' : null",
                         '(click)': 'onClick()',
                         '(keydown)': 'onKeydown($event)',
@@ -3383,6 +3385,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "@if (isDone() && finishedText()) {\n  <span class=\"mk-countdown__done\">{{ finishedText() }}</span>\n} @else {\n  @if (showDays()) {\n    <span class=\"mk-countdown__segment\">\n      <span class=\"mk-countdown__value\">{{ format(parts().days) }}</span>\n      @if (showLabels()) {\n        <span class=\"mk-countdown__label\">{{ i18n.countdownDays }}</span>\n      }\n    </span>\n    <span class=\"mk-countdown__sep\" aria-hidden=\"true\">:</span>\n  }\n  <span class=\"mk-countdown__segment\">\n    <span class=\"mk-countdown__value\">{{ format(parts().hours) }}</span>\n    @if (showLabels()) {\n      <span class=\"mk-countdown__label\">{{ i18n.countdownHours }}</span>\n    }\n  </span>\n  <span class=\"mk-countdown__sep\" aria-hidden=\"true\">:</span>\n  <span class=\"mk-countdown__segment\">\n    <span class=\"mk-countdown__value\">{{ format(parts().minutes) }}</span>\n    @if (showLabels()) {\n      <span class=\"mk-countdown__label\">{{ i18n.countdownMinutes }}</span>\n    }\n  </span>\n  <span class=\"mk-countdown__sep\" aria-hidden=\"true\">:</span>\n  <span class=\"mk-countdown__segment\">\n    <span class=\"mk-countdown__value\">{{ format(parts().seconds) }}</span>\n    @if (showLabels()) {\n      <span class=\"mk-countdown__label\">{{ i18n.countdownSeconds }}</span>\n    }\n  </span>\n}\n\n<!-- Minute-granular so the polite region doesn't re-announce every second. -->\n<span class=\"mk-countdown__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveText() }}</span>\n", styles: [":host{display:inline-flex;align-items:flex-start;gap:var(--mk-space-2);color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-countdown__segment{display:inline-flex;flex-direction:column;align-items:center;gap:var(--mk-space-1)}.mk-countdown__value{font-size:var(--mk-font-size-2xl);font-variant-numeric:tabular-nums;line-height:1}.mk-countdown__label{color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);text-transform:uppercase;letter-spacing:.05em}.mk-countdown__sep{color:var(--mk-text-muted);font-size:var(--mk-font-size-2xl);line-height:1}.mk-countdown__done{font-size:var(--mk-font-size-lg)}.mk-countdown__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], showDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDays", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], pad: [{ type: i0.Input, args: [{ isSignal: true, alias: "pad", required: false }] }], finishedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishedText", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }] } });
 
+/**
+ * A single term/detail row of {@link MkDescriptionList}: `term` becomes the
+ * `<dt>`, the projected content the `<dd>`. The row itself renders nothing —
+ * the list reads its rows and writes `<dt>`/`<dd>` as direct children of the
+ * `<dl>`, which is what HTML and assistive tech require (a wrapper element
+ * between `<dl>` and `<dt>` fails axe `definition-list` / `dlitem`).
+ */
+class MkDescItem {
+    /** The term (label) shown in the `<dt>`. */
+    term = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+    /** The row's detail content, rendered by the list inside its `<dd>`. @internal */
+    content = viewChild.required('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDescItem, isStandalone: true, selector: "mk-desc-item", inputs: { term: { classPropertyName: "term", publicName: "term", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-desc-item" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true, styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-desc-item', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-template #content><ng-content /></ng-template>`, host: { class: 'mk-desc-item' }, styles: [":host{display:none}\n"] }]
+        }], propDecorators: { term: [{ type: i0.Input, args: [{ isSignal: true, alias: "term", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 /**
  * DescriptionList — a semantic `<dl>` of term/detail pairs for entity-detail and
  * metadata panels. Project {@link MkDescItem} rows; values may be rich content
@@ -3395,6 +3418,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  *   <mk-desc-item term="Owner">Ada Lovelace</mk-desc-item>
  * </mk-description-list>
  * ```
+ *
+ * Only `mk-desc-item` children are rendered; the `<dl>` always contains plain
+ * `<dt>`/`<dd>` pairs.
  */
 class MkDescriptionList {
     /** `grid` aligns terms in a column; `stacked` puts each term above its value. */
@@ -3402,43 +3428,37 @@ class MkDescriptionList {
     ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     /** Draw a divider between rows. */
     divided = input(false, { ...(ngDevMode ? { debugName: "divided" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    items = contentChildren(MkDescItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkDescriptionList, isStandalone: true, selector: "mk-description-list", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-description-list" }, ngImport: i0, template: `<dl
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDescriptionList, isStandalone: true, selector: "mk-description-list", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-description-list" }, queries: [{ propertyName: "items", predicate: MkDescItem, isSignal: true }], ngImport: i0, template: `<dl
     class="mk-description-list__dl"
     [attr.data-layout]="layout()"
     [class.mk-description-list__dl--divided]="divided()"
   >
-    <ng-content />
-  </dl>`, isInline: true, styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-description-list__dl{margin:0}.mk-description-list__dl[data-layout=grid]{display:grid;grid-template-columns:minmax(6rem,max-content) 1fr;gap:var(--mk-space-2) var(--mk-space-4);align-items:baseline}.mk-description-list__dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--mk-space-3)}.mk-description-list__dl[data-layout=stacked] .mk-description-list__details{margin-top:var(--mk-space-1)}.mk-description-list__term{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted)}.mk-description-list__details{margin:0;font-size:var(--mk-font-size-md);color:var(--mk-text);min-width:0;overflow-wrap:break-word}.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__term,.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__details{padding-bottom:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-description-list__dl--divided[data-layout=stacked] .mk-description-list__details{padding-bottom:var(--mk-space-3);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    @for (item of items(); track item) {
+      <dt class="mk-description-list__term">{{ item.term() }}</dt>
+      <dd class="mk-description-list__details">
+        <ng-container *ngTemplateOutlet="item.content()" />
+      </dd>
+    }
+  </dl>`, isInline: true, styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-description-list__dl{margin:0}.mk-description-list__dl[data-layout=grid]{display:grid;grid-template-columns:minmax(6rem,max-content) 1fr;gap:var(--mk-space-2) var(--mk-space-4);align-items:baseline}.mk-description-list__dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--mk-space-3)}.mk-description-list__dl[data-layout=stacked] .mk-description-list__details{margin-top:var(--mk-space-1)}.mk-description-list__term{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted)}.mk-description-list__details{margin:0;font-size:var(--mk-font-size-md);color:var(--mk-text);min-width:0;overflow-wrap:break-word}.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__term,.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__details{padding-bottom:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-description-list__dl--divided[data-layout=stacked] .mk-description-list__details{padding-bottom:var(--mk-space-3);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescriptionList, decorators: [{
             type: Component,
-            args: [{ selector: 'mk-description-list', changeDetection: ChangeDetectionStrategy.OnPush, template: `<dl
+            args: [{ selector: 'mk-description-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: `<dl
     class="mk-description-list__dl"
     [attr.data-layout]="layout()"
     [class.mk-description-list__dl--divided]="divided()"
   >
-    <ng-content />
+    @for (item of items(); track item) {
+      <dt class="mk-description-list__term">{{ item.term() }}</dt>
+      <dd class="mk-description-list__details">
+        <ng-container *ngTemplateOutlet="item.content()" />
+      </dd>
+    }
   </dl>`, host: { class: 'mk-description-list' }, styles: [":host{display:block;font-family:var(--mk-font-sans)}.mk-description-list__dl{margin:0}.mk-description-list__dl[data-layout=grid]{display:grid;grid-template-columns:minmax(6rem,max-content) 1fr;gap:var(--mk-space-2) var(--mk-space-4);align-items:baseline}.mk-description-list__dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--mk-space-3)}.mk-description-list__dl[data-layout=stacked] .mk-description-list__details{margin-top:var(--mk-space-1)}.mk-description-list__term{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-muted)}.mk-description-list__details{margin:0;font-size:var(--mk-font-size-md);color:var(--mk-text);min-width:0;overflow-wrap:break-word}.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__term,.mk-description-list__dl--divided[data-layout=grid] .mk-description-list__details{padding-bottom:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-description-list__dl--divided[data-layout=stacked] .mk-description-list__details{padding-bottom:var(--mk-space-3);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}\n"] }]
-        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], divided: [{ type: i0.Input, args: [{ isSignal: true, alias: "divided", required: false }] }] } });
-/**
- * A single term/detail row inside {@link MkDescriptionList}. Renders a `<dt>`
- * (the `term`) and a `<dd>` (the projected value). The host is `display:contents`
- * so the `<dt>`/`<dd>` participate directly in the list's grid.
- */
-class MkDescItem {
-    /** The term (label) shown in the `<dt>`. */
-    term = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkDescItem, isStandalone: true, selector: "mk-desc-item", inputs: { term: { classPropertyName: "term", publicName: "term", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-desc-item" }, ngImport: i0, template: `<dt class="mk-description-list__term">{{ term() }}</dt>
-    <dd class="mk-description-list__details"><ng-content /></dd>`, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDescItem, decorators: [{
-            type: Component,
-            args: [{ selector: 'mk-desc-item', changeDetection: ChangeDetectionStrategy.OnPush, template: `<dt class="mk-description-list__term">{{ term() }}</dt>
-    <dd class="mk-description-list__details"><ng-content /></dd>`, host: { class: 'mk-desc-item' }, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { term: [{ type: i0.Input, args: [{ isSignal: true, alias: "term", required: false }] }] } });
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], divided: [{ type: i0.Input, args: [{ isSignal: true, alias: "divided", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDescItem), { isSignal: true }] }] } });
 
 /**
  * Code — a read-only, themed code block with syntax highlighting, an optional
@@ -3572,11 +3592,11 @@ class MkVirtualScroll {
         this.scrollTop.set(event.target.scrollTop);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkVirtualScroll, isStandalone: true, selector: "mk-virtual-scroll", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-virtual-scroll" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkVirtualScroll, isStandalone: true, selector: "mk-virtual-scroll", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-virtual-scroll" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}.mk-virtual-scroll__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring-color);outline-offset:calc(-1 * var(--mk-focus-ring-width))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkVirtualScroll, decorators: [{
             type: Component,
-            args: [{ selector: 'mk-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'mk-virtual-scroll' }, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}\n"] }]
+            args: [{ selector: 'mk-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'mk-virtual-scroll' }, template: "<div #viewport class=\"mk-virtual-scroll__viewport\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n  <div class=\"mk-virtual-scroll__spacer\" [style.height.px]=\"totalHeight()\">\n    <div\n      class=\"mk-virtual-scroll__content\"\n      [style.transform]=\"'translateY(' + offset() + 'px)'\"\n    >\n      @for (row of visibleItems(); track row.index) {\n        <div class=\"mk-virtual-scroll__item\" [style.height.px]=\"itemHeight()\">\n          <ng-container\n            [ngTemplateOutlet]=\"template() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: row.item, index: row.index }\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.mk-virtual-scroll__viewport{height:100%;overflow-y:auto;overflow-x:hidden;position:relative;contain:strict}.mk-virtual-scroll__spacer{position:relative;width:100%}.mk-virtual-scroll__content{position:absolute;top:0;left:0;right:0;will-change:transform}.mk-virtual-scroll__item{box-sizing:border-box;overflow:hidden}.mk-virtual-scroll__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring-color);outline-offset:calc(-1 * var(--mk-focus-ring-width))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /** Horizontal movement (px) before a pointer gesture commits to a swipe. */