@nanahoshi/mona-ui 0.18.2 → 0.18.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -734,9 +734,10 @@ const listGroupHeaderTextThemeVariants = cva(`select-none text-muted-foreground`
|
|
|
734
734
|
}
|
|
735
735
|
});
|
|
736
736
|
const listItemBaseThemeVariants = cva(`flex h-full w-full items-center gap-2`);
|
|
737
|
-
const listItemContentThemeVariants = cva(`relative flex cursor-default select-none items-center px-3 py-1 text-foreground outline-none
|
|
737
|
+
const listItemContentThemeVariants = cva(`relative flex cursor-default select-none items-center px-3 py-1 text-foreground outline-none`, {
|
|
738
738
|
variants: {
|
|
739
739
|
checkboxes: { true: "gap-2", false: "" },
|
|
740
|
+
selectable: { true: "hover:bg-hover focus:bg-hover", false: "" },
|
|
740
741
|
highlighted: {
|
|
741
742
|
true: "bg-hover text-foreground inset-ring-1 inset-ring-focus-indicator/35",
|
|
742
743
|
false: ""
|
|
@@ -744,10 +745,15 @@ const listItemContentThemeVariants = cva(`relative flex cursor-default select-no
|
|
|
744
745
|
selected: { true: "bg-(--color-selected) text-(--color-selected-foreground)", false: "" },
|
|
745
746
|
disabled: {
|
|
746
747
|
true: "pointer-events-none cursor-default bg-(--mona-list-disabled-background) text-disabled-foreground",
|
|
747
|
-
false: "
|
|
748
|
+
false: ""
|
|
748
749
|
}
|
|
749
750
|
},
|
|
750
751
|
compoundVariants: [
|
|
752
|
+
{
|
|
753
|
+
selectable: true,
|
|
754
|
+
disabled: false,
|
|
755
|
+
class: "cursor-pointer"
|
|
756
|
+
},
|
|
751
757
|
{
|
|
752
758
|
selected: true,
|
|
753
759
|
checkboxes: false,
|
|
@@ -789,12 +795,14 @@ class ListItemDirective {
|
|
|
789
795
|
const disabled = this.disabled();
|
|
790
796
|
const highlighted = this.highlighted();
|
|
791
797
|
const selected = this.selected();
|
|
792
|
-
const
|
|
798
|
+
const selectableOptions = this.#listService.selectableOptions();
|
|
799
|
+
const checkboxes = selectableOptions.checkboxes;
|
|
793
800
|
const classes = listItemContentThemeVariants({
|
|
794
801
|
disabled,
|
|
795
802
|
highlighted,
|
|
796
803
|
selected,
|
|
797
|
-
checkboxes
|
|
804
|
+
checkboxes,
|
|
805
|
+
selectable: selectableOptions.enabled
|
|
798
806
|
});
|
|
799
807
|
return twMerge(classes);
|
|
800
808
|
}, /* @ts-ignore */
|
|
@@ -274,7 +274,7 @@ class ListViewComponent {
|
|
|
274
274
|
},
|
|
275
275
|
deps: [[new Optional(), new SkipSelf(), ListService]]
|
|
276
276
|
}
|
|
277
|
-
], 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\n [ariaLabel]=\"ariaLabel()\"\n [data]=\"viewItems()\"\n [height]=\"listHeight()\"\n [width]=\"listWidth()\"\n [maxHeight]=\"listMaxHeight()\"\n [maxWidth]=\"listMaxWidth()\"\n [listItemClass]=\"listItemClass()\"\n [listItemStyle]=\"listItemStyle()\"\n [listClass]=\"listClass()\"\n [listStyle]=\"listStyle()\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-groupHeader>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n @let pageState = listService.pageState();\n <div class=\"mona-list-view-pager\">\n <mona-pager\n [firstLast]=\"pageableOptions.firstLast\"\n [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n [visiblePages]=\"pageableOptions.visiblePages\"\n [total]=\"itemCount()\"\n [skip]=\"pageState.skip\"\n [responsive]=\"false\"\n [rounded]=\"rounded()\"\n [pageSize]=\"pageState.take\"\n [previousNext]=\"pageableOptions.previousNext\"\n [showInfo]=\"pageableOptions.showInfo\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n </div>\n}\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]" }] }); }
|
|
277
|
+
], 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\n [ariaLabel]=\"ariaLabel()\"\n [data]=\"viewItems()\"\n [height]=\"listHeight()\"\n [width]=\"listWidth()\"\n [maxHeight]=\"listMaxHeight()\"\n [maxWidth]=\"listMaxWidth()\"\n [listItemClass]=\"listItemClass()\"\n [listItemStyle]=\"listItemStyle()\"\n [listClass]=\"listClass()\"\n [listStyle]=\"listStyle()\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-groupHeader>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n @let pageState = listService.pageState();\n <div class=\"mona-list-view-pager\">\n <mona-pager\n [firstLast]=\"pageableOptions.firstLast\"\n [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n [visiblePages]=\"pageableOptions.visiblePages\"\n [total]=\"itemCount()\"\n [skip]=\"pageState.skip\"\n [responsive]=\"false\"\n [rounded]=\"rounded()\"\n [pageSize]=\"pageState.take\"\n [previousNext]=\"pageableOptions.previousNext\"\n [showInfo]=\"pageableOptions.showInfo\"\n [size]=\"size()\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n </div>\n}\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]" }] }); }
|
|
278
278
|
}
|
|
279
279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
280
280
|
type: Component,
|
|
@@ -298,7 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
298
298
|
], host: {
|
|
299
299
|
"[class]": "baseClasses()",
|
|
300
300
|
"[attr.tabindex]": "-1"
|
|
301
|
-
}, template: "<mona-list\n [ariaLabel]=\"ariaLabel()\"\n [data]=\"viewItems()\"\n [height]=\"listHeight()\"\n [width]=\"listWidth()\"\n [maxHeight]=\"listMaxHeight()\"\n [maxWidth]=\"listMaxWidth()\"\n [listItemClass]=\"listItemClass()\"\n [listItemStyle]=\"listItemStyle()\"\n [listClass]=\"listClass()\"\n [listStyle]=\"listStyle()\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-groupHeader>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n @let pageState = listService.pageState();\n <div class=\"mona-list-view-pager\">\n <mona-pager\n [firstLast]=\"pageableOptions.firstLast\"\n [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n [visiblePages]=\"pageableOptions.visiblePages\"\n [total]=\"itemCount()\"\n [skip]=\"pageState.skip\"\n [responsive]=\"false\"\n [rounded]=\"rounded()\"\n [pageSize]=\"pageState.take\"\n [previousNext]=\"pageableOptions.previousNext\"\n [showInfo]=\"pageableOptions.showInfo\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n </div>\n}\n" }]
|
|
301
|
+
}, template: "<mona-list\n [ariaLabel]=\"ariaLabel()\"\n [data]=\"viewItems()\"\n [height]=\"listHeight()\"\n [width]=\"listWidth()\"\n [maxHeight]=\"listMaxHeight()\"\n [maxWidth]=\"listMaxWidth()\"\n [listItemClass]=\"listItemClass()\"\n [listItemStyle]=\"listItemStyle()\"\n [listClass]=\"listClass()\"\n [listStyle]=\"listStyle()\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-groupHeader>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n </ng-template>\n }\n</mona-list>\n\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n @let pageState = listService.pageState();\n <div class=\"mona-list-view-pager\">\n <mona-pager\n [firstLast]=\"pageableOptions.firstLast\"\n [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n [visiblePages]=\"pageableOptions.visiblePages\"\n [total]=\"itemCount()\"\n [skip]=\"pageState.skip\"\n [responsive]=\"false\"\n [rounded]=\"rounded()\"\n [pageSize]=\"pageState.take\"\n [previousNext]=\"pageableOptions.previousNext\"\n [showInfo]=\"pageableOptions.showInfo\"\n [size]=\"size()\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n class=\"border-b-0 border-l-0 border-r-0 rounded-t-none\"></mona-pager>\n </div>\n}\n" }]
|
|
302
302
|
}], 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 }] }] } });
|
|
303
303
|
|
|
304
304
|
class ListViewGroupableDirective {
|