@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-list-view.mjs

@@ -0,0 +1,527 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, output, effect, untracked, afterRenderEffect, Optional, SkipSelf, Component, afterNextRender } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ListService, ListComponent, ListHeaderTemplateDirective, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
+import { PagerComponent } from '@nanahoshi/mona-ui/pager';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { ImmutableSet } from '@mirei/ts-collections';
+import { fromEvent, filter } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class ListViewFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListViewFooterTemplateDirective, isStandalone: true, selector: "ng-template[monaListViewFooterTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListViewFooterTemplate]"
+                }]
+        }] });
+
+class ListViewGroupHeaderTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewGroupHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListViewGroupHeaderTemplateDirective, isStandalone: true, selector: "ng-template[monaListViewGroupHeaderTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewGroupHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListViewGroupHeaderTemplate]"
+                }]
+        }] });
+
+class ListViewHeaderTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListViewHeaderTemplateDirective, isStandalone: true, selector: "ng-template[monaListViewHeaderTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListViewHeaderTemplate]"
+                }]
+        }] });
+
+class ListViewItemTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListViewItemTemplateDirective, isStandalone: true, selector: "ng-template[monaListViewItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListViewItemTemplate]"
+                }]
+        }] });
+
+class ListViewNoDataTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewNoDataTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListViewNoDataTemplateDirective, isStandalone: true, selector: "ng-template[monaListViewNoDataTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewNoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaListViewNoDataTemplate]"
+                }]
+        }] });
+
+const listViewBaseVariants = cva(`
+        flex flex-col h-full
+        outline-none overflow-hidden
+        bg-background text-foreground
+        border border-border
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        },
+        size: {
+            small: "text-sm",
+            medium: "text-base",
+            large: "text-lg"
+        }
+    }
+});
+
+const listViewBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return listViewBaseVariants;
+        default:
+            return listViewBaseVariants;
+    }
+};
+
+class ListViewComponent {
+    #destroyRef;
+    #hostElementRef;
+    #scrollBottomEnabled;
+    #themeService;
+    #scrollSubscription;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject((ElementRef));
+        this.#scrollBottomEnabled = computed(() => {
+            const pageableOptions = this.listService.pageableOptions();
+            return !pageableOptions.enabled;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#scrollBottomEnabled" }] : /* istanbul ignore next */ []));
+        this.#themeService = inject(ThemeService);
+        this.#scrollSubscription = null;
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const variantClasses = listViewBaseThemeVariants(theme)({ rounded, size });
+            const userClass = this.userClass();
+            return twMerge(variantClasses, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = contentChild(ListViewFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.groupHeaderTemplate = contentChild(ListViewGroupHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "groupHeaderTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.headerTemplate = contentChild(ListViewHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.itemCount = computed(() => this.listItems().size(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemCount" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(ListViewItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.listHeight = computed(() => {
+            const height = this.height();
+            return typeof height === "number" ? `${height}px` : height;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []));
+        this.listItems = computed(() => {
+            const items = this.items();
+            return ImmutableSet.create(items);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItems" }] : /* istanbul ignore next */ []));
+        this.listMaxHeight = computed(() => {
+            const maxHeight = this.maxHeight();
+            return typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listMaxHeight" }] : /* istanbul ignore next */ []));
+        this.listMaxWidth = computed(() => {
+            const maxWidth = this.maxWidth();
+            return typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listMaxWidth" }] : /* istanbul ignore next */ []));
+        this.listService = inject(ListService);
+        this.listWidth = computed(() => {
+            const width = this.width();
+            return typeof width === "number" ? `${width}px` : width;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
+        this.noDataTemplate = contentChild(ListViewNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.viewItems = computed(() => this.listItems(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewItems" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the list view's `listbox` element. Describe what the list represents.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Sets the height of the list view.
+         * @default 100%
+         */
+        this.height = input("100%", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the classes of the inner UL element.
+         * @default ""
+         */
+        this.listClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the classes of the list items.
+         * @default ""
+         */
+        this.listItemClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the style of the list items.
+         * @default {}
+         */
+        this.listItemStyle = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemStyle" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the style of the list.
+         * @default {}
+         */
+        this.listStyle = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Collection of items to render.
+         * @default []
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum height of the list.
+         * @default ""
+         */
+        this.maxHeight = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum width of the list.
+         * @default ""
+         */
+        this.maxWidth = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the component.
+         * @default medium
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the list is scrolled to the bottom.
+         */
+        this.scrollBottom = output();
+        /**
+         * @description Size preset controlling the component's dimensions.
+         * @default medium
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Property name or accessor used to derive the display text from a data item.
+         * @default ""
+         */
+        this.textField = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Sets the width of the list view.
+         * @default 100%
+         */
+        this.width = input("100%", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const textField = this.textField();
+            untracked(() => this.listService.setTextField(textField ?? ""));
+        });
+        afterRenderEffect({
+            read: () => this.setScrollBottomEvent()
+        });
+    }
+    onPageChange(event) {
+        this.listService.pageState.update(s => ({ ...s, page: event.page, skip: event.skip }));
+    }
+    onPageSizeChange(event) {
+        this.listService.pageState.update(s => ({ ...s, page: 1, skip: 0, take: event.newPageSize }));
+    }
+    setScrollBottomEvent() {
+        let element;
+        const virtualScrollEnabled = this.listService.virtualScrollOptions().enabled;
+        if (virtualScrollEnabled) {
+            element = this.#hostElementRef.nativeElement.querySelector(".cdk-virtual-scroll-viewport");
+        }
+        else {
+            element = this.#hostElementRef.nativeElement.querySelector("mona-list > ul");
+        }
+        this.#scrollSubscription?.unsubscribe();
+        if (!element) {
+            return;
+        }
+        this.#scrollSubscription = fromEvent(element, "scroll")
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(event => {
+            if (!this.#scrollBottomEnabled()) {
+                return false;
+            }
+            const target = event.target;
+            return Math.abs(target.scrollHeight - target.scrollTop - target.clientHeight) < 3.0;
+        }))
+            .subscribe(event => this.scrollBottom.emit(event));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListViewComponent, isStandalone: true, selector: "mona-list-view", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, listClass: { classPropertyName: "listClass", publicName: "listClass", isSignal: true, isRequired: false, transformFunction: null }, listItemClass: { classPropertyName: "listItemClass", publicName: "listItemClass", isSignal: true, isRequired: false, transformFunction: null }, listItemStyle: { classPropertyName: "listItemStyle", publicName: "listItemStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollBottom: "scrollBottom" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "-1" } }, providers: [
+            {
+                provide: ListService,
+                useFactory: (parentListService) => {
+                    return parentListService ?? new ListService();
+                },
+                deps: [[new Optional(), new SkipSelf(), ListService]]
+            }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListViewFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListViewGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListViewHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListViewItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListViewNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [data]=\"viewItems()\"\r\n    [height]=\"listHeight()\"\r\n    [width]=\"listWidth()\"\r\n    [maxHeight]=\"listMaxHeight()\"\r\n    [maxWidth]=\"listMaxWidth()\"\r\n    [listItemClass]=\"listItemClass()\"\r\n    [listItemStyle]=\"listItemStyle()\"\r\n    [listClass]=\"listClass()\"\r\n    [listStyle]=\"listStyle()\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (groupHeaderTemplate()) {\r\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list>\r\n\r\n@let pageableOptions = listService.pageableOptions();\r\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\r\n    @let pageState = listService.pageState();\r\n    <div class=\"mona-list-view-pager\">\r\n        <mona-pager\r\n            [firstLast]=\"pageableOptions.firstLast\"\r\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\r\n            [visiblePages]=\"pageableOptions.visiblePages\"\r\n            [total]=\"itemCount()\"\r\n            [skip]=\"pageState.skip\"\r\n            [responsive]=\"false\"\r\n            [rounded]=\"rounded()\"\r\n            [pageSize]=\"pageState.take\"\r\n            [previousNext]=\"pageableOptions.previousNext\"\r\n            [showInfo]=\"pageableOptions.showInfo\"\r\n            (pageChange)=\"onPageChange($event)\"\r\n            (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\r\n    </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-list-view", providers: [
+                        {
+                            provide: ListService,
+                            useFactory: (parentListService) => {
+                                return parentListService ?? new ListService();
+                            },
+                            deps: [[new Optional(), new SkipSelf(), ListService]]
+                        }
+                    ], imports: [
+                        NgTemplateOutlet,
+                        PagerComponent,
+                        ListComponent,
+                        ListHeaderTemplateDirective,
+                        ListFooterTemplateDirective,
+                        ListGroupHeaderTemplateDirective,
+                        ListItemTemplateDirective,
+                        ListNoDataTemplateDirective
+                    ], host: {
+                        "[class]": "baseClasses()",
+                        "[attr.tabindex]": "-1"
+                    }, template: "<mona-list\r\n    [ariaLabel]=\"ariaLabel()\"\r\n    [data]=\"viewItems()\"\r\n    [height]=\"listHeight()\"\r\n    [width]=\"listWidth()\"\r\n    [maxHeight]=\"listMaxHeight()\"\r\n    [maxWidth]=\"listMaxWidth()\"\r\n    [listItemClass]=\"listItemClass()\"\r\n    [listItemStyle]=\"listItemStyle()\"\r\n    [listClass]=\"listClass()\"\r\n    [listStyle]=\"listStyle()\">\r\n    @if (footerTemplate()) {\r\n        <ng-template monaListFooterTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (groupHeaderTemplate()) {\r\n        <ng-template monaListGroupHeaderTemplate let-groupHeader>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (headerTemplate()) {\r\n        <ng-template monaListHeaderTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (itemTemplate()) {\r\n        <ng-template monaListItemTemplate let-dataItem>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (noDataTemplate()) {\r\n        <ng-template monaListNoDataTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-list>\r\n\r\n@let pageableOptions = listService.pageableOptions();\r\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\r\n    @let pageState = listService.pageState();\r\n    <div class=\"mona-list-view-pager\">\r\n        <mona-pager\r\n            [firstLast]=\"pageableOptions.firstLast\"\r\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\r\n            [visiblePages]=\"pageableOptions.visiblePages\"\r\n            [total]=\"itemCount()\"\r\n            [skip]=\"pageState.skip\"\r\n            [responsive]=\"false\"\r\n            [rounded]=\"rounded()\"\r\n            [pageSize]=\"pageState.take\"\r\n            [previousNext]=\"pageableOptions.previousNext\"\r\n            [showInfo]=\"pageableOptions.showInfo\"\r\n            (pageChange)=\"onPageChange($event)\"\r\n            (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\r\n    </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], listClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listClass", required: false }] }], listItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemClass", required: false }] }], listItemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemStyle", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], scrollBottom: [{ type: i0.Output, args: ["scrollBottom"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+class ListViewGroupableDirective {
+    #defaultOptions;
+    #listService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true
+        };
+        this.#listService = inject((ListService));
+        this.groupBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaListViewGroupable" });
+        effect(() => {
+            const groupBy = this.groupBy();
+            untracked(() => {
+                this.#listService.setGroupBy(groupBy ?? "");
+            });
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#listService.setGroupableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#listService.setGroupableOptions({
+                        ...this.#defaultOptions,
+                        ...options,
+                        enabled: options.enabled ?? this.#defaultOptions.enabled
+                    });
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewGroupableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewGroupableDirective, isStandalone: true, selector: "mona-list-view[monaListViewGroupable]", inputs: { groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaListViewGroupable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewGroupableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-list-view[monaListViewGroupable]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewGroupable", required: false }] }] } });
+
+class ListViewNavigableDirective {
+    #defaultOptions;
+    #listService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true,
+            mode: "select",
+            wrap: false
+        };
+        this.#listService = inject(ListService);
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaListViewNavigable" });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#listService.setNavigableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#listService.setNavigableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewNavigableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewNavigableDirective, isStandalone: true, selector: "mona-list-view[monaListViewNavigable]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewNavigable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewNavigableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-list-view[monaListViewNavigable]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewNavigable", required: false }] }] } });
+
+class ListViewPageableDirective {
+    #defaultOptions;
+    #listService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true,
+            showInfo: false,
+            firstLast: false,
+            type: "numeric",
+            previousNext: true,
+            pageSizeValues: [5, 10, 20, 25, 50, 100],
+            visiblePages: 5
+        };
+        this.#listService = inject(ListService);
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaListViewPageable" });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#listService.setPageableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#listService.setPageableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewPageableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewPageableDirective, isStandalone: true, selector: "mona-list-view[monaListViewPageable]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewPageable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewPageableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-list-view[monaListViewPageable]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewPageable", required: false }] }] } });
+
+class ListViewSelectableDirective {
+    #defaultOptions;
+    #destroyRef;
+    #listService;
+    constructor() {
+        this.#defaultOptions = {
+            mode: "single",
+            enabled: true,
+            toggleable: false
+        };
+        this.#destroyRef = inject(DestroyRef);
+        this.#listService = inject(ListService);
+        this.selectedKeysChange = output();
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaListViewSelectable" });
+        this.selectBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectBy" }] : /* istanbul ignore next */ []));
+        this.selectedKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const selectBy = this.selectBy();
+            untracked(() => {
+                this.#listService.setValueField(selectBy ?? "");
+            });
+        });
+        effect(() => {
+            const selectedKeys = this.selectedKeys();
+            untracked(() => {
+                this.#listService.setSelectedKeys(selectedKeys ?? []);
+            });
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#listService.setSelectableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#listService.setSelectableOptions({
+                        ...this.#defaultOptions,
+                        ...options
+                    });
+                }
+            });
+        });
+        afterNextRender({
+            read: () => {
+                this.#listService.selectedKeysChange$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(keys => {
+                    this.selectedKeysChange.emit(keys);
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewSelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewSelectableDirective, isStandalone: true, selector: "mona-list-view[monaListViewSelectable]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewSelectable", isSignal: true, isRequired: false, transformFunction: null }, selectBy: { classPropertyName: "selectBy", publicName: "selectBy", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedKeysChange: "selectedKeysChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewSelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-list-view[monaListViewSelectable]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { selectedKeysChange: [{ type: i0.Output, args: ["selectedKeysChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewSelectable", required: false }] }], selectBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectBy", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }] } });
+
+class ListViewVirtualScrollDirective {
+    #listService;
+    constructor() {
+        this.#listService = inject((ListService));
+        this.options = input.required({ ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaListViewVirtualScroll" });
+        effect(() => {
+            const options = this.options();
+            untracked(() => this.#listService.setVirtualScrollOptions(options));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewVirtualScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewVirtualScrollDirective, isStandalone: true, selector: "mona-list-view[monaListViewVirtualScroll]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewVirtualScroll", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewVirtualScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-list-view[monaListViewVirtualScroll]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewVirtualScroll", required: true }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/list-view
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListViewComponent, ListViewFooterTemplateDirective, ListViewGroupHeaderTemplateDirective, ListViewGroupableDirective, ListViewHeaderTemplateDirective, ListViewItemTemplateDirective, ListViewNavigableDirective, ListViewNoDataTemplateDirective, ListViewPageableDirective, ListViewSelectableDirective, ListViewVirtualScrollDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-list-view.mjs.map

package/fesm2022/nanahoshi-mona-ui-list.mjs

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=nanahoshi-mona-ui-list.mjs.map