@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,2 @@
+export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs';
+//# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

package/fesm2022/nanahoshi-mona-ui-internal-filter-input.mjs

@@ -0,0 +1,87 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, signal, input, output, effect, untracked, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
+import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
+import { Subject, fromEvent, debounceTime } from 'rxjs';
+
+class FilterInputComponent {
+    #destroyRef;
+    #hostElementRef;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject((ElementRef));
+        this.filter$ = new Subject();
+        this.filterText = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+        this.debounce = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
+        this.filter = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.filterChange = output();
+        this.inputBlur = output();
+        this.inputFocus = output();
+        this.placeholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const filter = this.filter();
+            untracked(() => this.filterText.set(filter));
+        });
+        afterNextRender({
+            read: () => {
+                const input = this.#hostElementRef.nativeElement.querySelector("input");
+                input.focus();
+                fromEvent(input, "keydown")
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe((event) => {
+                    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                        event.preventDefault();
+                        const input = event.target;
+                        input.selectionStart = input.selectionEnd = input.value.length;
+                    }
+                    else if (event.key !== "Escape" && event.key !== "Enter") {
+                        event.stopPropagation();
+                    }
+                });
+            }
+        });
+    }
+    focus() {
+        const input = this.#hostElementRef.nativeElement.querySelector("input");
+        input.focus();
+    }
+    ngOnInit() {
+        this.setSubscriptions();
+    }
+    setSubscriptions() {
+        this.filter$.pipe(debounceTime(this.debounce()), takeUntilDestroyed(this.#destroyRef)).subscribe(value => {
+            const event = new FilterChangeEvent(value);
+            this.filterChange.emit(event);
+            if (!event.isDefaultPrevented()) {
+                this.filterText.set(value);
+            }
+            this.focus();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: FilterInputComponent, isStandalone: true, selector: "mona-filter-input", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, ngImport: i0, template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <i class=\"ri-search-line\"></i>\n        </div>\n    </ng-template>\n</mona-text-box>\n", dependencies: [{ kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-filter-input", imports: [TextBoxComponent, FormsModule, TextBoxPrefixTemplateDirective], template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <i class=\"ri-search-line\"></i>\n        </div>\n    </ng-template>\n</mona-text-box>\n" }]
+        }], ctorParameters: () => [], propDecorators: { debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/filter-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FilterInputComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-internal-filter-input.mjs.map

package/fesm2022/nanahoshi-mona-ui-internal-indicator-icon.mjs

@@ -0,0 +1,154 @@
+import * as i0 from '@angular/core';
+import { inject, computed, signal, viewChild, output, input, afterRenderEffect, untracked, Component } from '@angular/core';
+import { LucideLoader, LucideChevronDown, LucideX, LucideDynamicIcon } from '@lucide/angular';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const indicatorIconHostVariants = cva(`h-full aspect-square flex-none inline-flex items-center justify-center self-stretch`, {
+    variants: {
+        interactive: {
+            true: "opacity-50 hover:opacity-90 focus:ring-1 focus:ring-primary/40 focus:outline-none",
+            false: ""
+        },
+        preset: {
+            clear: "",
+            dropdown: "opacity-50",
+            loading: ""
+        }
+    },
+    defaultVariants: {
+        interactive: false
+    }
+});
+const indicatorIconSvgVariants = cva(``, {
+    variants: {
+        loading: {
+            true: "animate-[spin_2s_linear_infinite]",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        loading: false
+    }
+});
+
+const indicatorIconHostThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return indicatorIconHostVariants;
+        default:
+            return indicatorIconHostVariants;
+    }
+};
+const indicatorIconSvgThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return indicatorIconSvgVariants;
+        default:
+            return indicatorIconSvgVariants;
+    }
+};
+
+class IndicatorIconComponent {
+    #themeService;
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const interactive = this.interactive();
+            const preset = this.preset();
+            return twMerge(indicatorIconHostThemeVariants(theme)({ interactive, preset }), this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.hasProjectedContent = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasProjectedContent" }] : /* istanbul ignore next */ []));
+        this.iconClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const loading = this.preset() === "loading";
+            return indicatorIconSvgThemeVariants(theme)({ loading });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        this.iconToRender = computed(() => {
+            switch (this.preset()) {
+                case "clear":
+                    return LucideX;
+                case "dropdown":
+                    return LucideChevronDown;
+                case "loading":
+                    return LucideLoader;
+                default:
+                    return this.icon();
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconToRender" }] : /* istanbul ignore next */ []));
+        this.projectedContent = viewChild("projectedContent", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "projectedContent" }] : /* istanbul ignore next */ []));
+        this.activate = output();
+        this.icon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.interactive = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.preset = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+        this.size = input(16, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        afterRenderEffect({
+            read: () => {
+                const element = this.projectedContent();
+                const hasContent = element ? this.hasContent(element.nativeElement) : false;
+                untracked(() => {
+                    if (this.hasProjectedContent() !== hasContent) {
+                        this.hasProjectedContent.set(hasContent);
+                    }
+                });
+            }
+        });
+    }
+    onActivate(event) {
+        if (!this.interactive()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.activate.emit(event);
+    }
+    hasContent(element) {
+        return Array.from(element.childNodes).some(node => {
+            if (node.nodeType === Node.COMMENT_NODE) {
+                return false;
+            }
+            return node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IndicatorIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: IndicatorIconComponent, isStandalone: true, selector: "mona-indicator-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { listeners: { "click": "onActivate($event)", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.aria-hidden": "interactive() ? null : true", "attr.aria-label": "interactive() ? label() || null : null", "attr.role": "interactive() ? 'button' : null", "attr.tabindex": "interactive() ? 0 : null", "attr.title": "interactive() ? label() || null : null", "class": "baseClass()" } }, viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<span #projectedContent class=\"contents\">\n    <ng-content></ng-content>\n</span>\n\n@let renderedIcon = iconToRender();\n@if (!hasProjectedContent() && renderedIcon) {\n    <svg [lucideIcon]=\"renderedIcon\" [size]=\"size()\" [class]=\"iconClass()\"></svg>\n}\n", dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IndicatorIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-indicator-icon", imports: [LucideDynamicIcon], host: {
+                        "[attr.aria-hidden]": "interactive() ? null : true",
+                        "[attr.aria-label]": "interactive() ? label() || null : null",
+                        "[attr.role]": "interactive() ? 'button' : null",
+                        "[attr.tabindex]": "interactive() ? 0 : null",
+                        "[attr.title]": "interactive() ? label() || null : null",
+                        "[class]": "baseClass()",
+                        "(click)": "onActivate($event)",
+                        "(keydown.enter)": "onActivate($event)",
+                        "(keydown.space)": "onActivate($event)"
+                    }, template: "<span #projectedContent class=\"contents\">\n    <ng-content></ng-content>\n</span>\n\n@let renderedIcon = iconToRender();\n@if (!hasProjectedContent() && renderedIcon) {\n    <svg [lucideIcon]=\"renderedIcon\" [size]=\"size()\" [class]=\"iconClass()\"></svg>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { projectedContent: [{ type: i0.ViewChild, args: ["projectedContent", { isSignal: true }] }], activate: [{ type: i0.Output, args: ["activate"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/indicator-icon
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IndicatorIconComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-internal-indicator-icon.mjs.map