@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,83 @@
+import * as i0 from '@angular/core';
+import { inject, computed, input, Component } from '@angular/core';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const placeholderBaseVariants = cva(`
+        flex items-center justify-center
+        w-full h-full
+        p-2
+    `);
+const placeholderTextVariants = cva(`
+        text-muted-foreground
+        uppercase
+    `);
+
+const placeholderBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return placeholderBaseVariants;
+        default:
+            return placeholderBaseVariants;
+    }
+};
+const placeholderTextThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return placeholderTextVariants;
+        default:
+            return placeholderTextVariants;
+    }
+};
+
+class PlaceholderComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const variantClass = placeholderBaseThemeVariants(theme)();
+            const userClass = this.userClass();
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.textClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return placeholderTextThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The text to display inside the placeholder.
+         * Takes precedence over projected content if both are provided.
+         * @default ""
+         */
+        this.text = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * Bind this input with the public `class` alias.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PlaceholderComponent, isStandalone: true, selector: "mona-placeholder", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (text()) {\r\n    <span [class]=\"textClass()\">{{ text() }}</span>\r\n} @else {\r\n    <ng-content></ng-content>\r\n}\r\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-placeholder", host: {
+                        "[class]": "baseClass()"
+                    }, template: "@if (text()) {\r\n    <span [class]=\"textClass()\">{{ text() }}</span>\r\n} @else {\r\n    <ng-content></ng-content>\r\n}\r\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/placeholder
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PlaceholderComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-placeholder.mjs.map

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

@@ -0,0 +1,325 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, Renderer2, computed, contentChild, TemplateRef, viewChild, input, output, effect, ElementRef, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { PopupService, fadePopupAnimation } from '@nanahoshi/mona-ui/popup';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { tooltipArrowThemeVariants, getPositionConnectionPoints, getOffsetForPosition } from '@nanahoshi/mona-ui/tooltip';
+import { takeUntil, take, fromEvent, filter, tap } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { v4 } from 'uuid';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { cva } from 'class-variance-authority';
+
+class PopoverFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PopoverFooterTemplateDirective, isStandalone: true, selector: "ng-template[monaPopoverFooterTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPopoverFooterTemplate]"
+                }]
+        }] });
+
+class PopoverTitleTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "ng-template[monaPopoverTitleTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPopoverTitleTemplate]"
+                }]
+        }] });
+
+class PopoverHideEvent extends PreventableEvent {
+    constructor(target, popupRef) {
+        super("popoverHide");
+        this.target = target;
+        this.popupRef = popupRef;
+    }
+}
+
+class PopoverShowEvent extends PreventableEvent {
+    constructor(target) {
+        super("popoverShow");
+        this.target = target;
+    }
+}
+
+class PopoverShownEvent {
+    constructor(target, popupRef) {
+        this.target = target;
+        this.popupRef = popupRef;
+    }
+}
+
+const popoverBaseVariants = cva(`
+        flex flex-col items-center justify-center relative
+        bg-background border border-border
+        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
+    `, {
+    variants: {
+        rounded: {
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const popoverHeaderVariants = cva(`
+        flex items-center justify-between w-full
+        font-semibold overflow-hidden
+    `, {
+    variants: {
+        rounded: {
+            large: "rounded-t-lg",
+            medium: "rounded-t-md",
+            none: "rounded-t-none",
+            small: "rounded-t-sm"
+        }
+    }
+});
+const popoverContentVariants = cva(`
+        flex-1 w-full h-full
+        overflow-hidden
+    `);
+
+const popoverBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popoverBaseVariants;
+        default:
+            return popoverBaseVariants;
+    }
+};
+const popoverHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popoverHeaderVariants;
+        default:
+            return popoverHeaderVariants;
+    }
+};
+const popoverContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popoverContentVariants;
+        default:
+            return popoverContentVariants;
+    }
+};
+const popoverArrowThemeVariants = (theme) => {
+    return tooltipArrowThemeVariants(theme);
+};
+
+class PopoverComponent {
+    #destroyRef;
+    #popupService;
+    #renderer;
+    #themeService;
+    #subscription;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#popupService = inject(PopupService);
+        this.#renderer = inject(Renderer2);
+        this.#themeService = inject(ThemeService);
+        this.#subscription = null;
+        this.arrowClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return popoverArrowThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return popoverBaseThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.contentClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return popoverContentThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+        this.currentArrowPosition = computed(() => this.position(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentArrowPosition" }] : /* istanbul ignore next */ []));
+        this.footerTemplateRef = contentChild(PopoverFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.headerClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const hasTemplate = !!this.titleTemplateRef();
+            const padding = hasTemplate ? "p-0" : "p-2";
+            const variants = popoverHeaderThemeVariants(theme)({ rounded });
+            return twMerge(variants, padding);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+        this.headerId = computed(() => this.title() || this.titleTemplateRef() ? `${this.uid}-title` : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
+        this.titleTemplateRef = contentChild(PopoverTitleTemplateDirective, { ...(ngDevMode ? { debugName: "titleTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+        this.uid = v4();
+        this.popupRef = null;
+        /**
+         * @description Display the arrow of the popover.
+         */
+        this.displayArrow = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayArrow" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the popover is about to be closed.
+         * This event is preventable.
+         */
+        this.hide = output();
+        /**
+         * @description Emits when the popover is hidden.
+         */
+        this.hidden = output();
+        /**
+         * @description The position of the popover relative to the target element.
+         */
+        this.position = input("top", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The border radius of the popover.
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the popover is about to be shown.
+         * This event is preventable.
+         */
+        this.show = output();
+        /**
+         * @description Emits when the popover is shown.
+         */
+        this.shown = output();
+        /**
+         * @description The target element or ElementRef to which the popover is attached.
+         */
+        this.target = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The title of the popover.
+         */
+        this.title = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The trigger that opens/closes the popover.
+         * "click" toggles on click, "hover" opens on pointer enter and closes on
+         * pointer leave, "none" disables automatic triggering (use `open()`/`close()`
+         * instead). Any other DOM event name is also accepted and used as-is.
+         */
+        this.trigger = input("click", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            if (this.#subscription) {
+                this.#subscription.unsubscribe();
+                this.#subscription = null;
+            }
+            this.#setSubscriptions();
+        });
+    }
+    close() {
+        if (this.popupRef) {
+            this.popupRef.close();
+        }
+    }
+    open() {
+        if (this.popupRef) {
+            return;
+        }
+        this.#createPopover();
+    }
+    #createPopover() {
+        const position = this.position();
+        const connectionPoints = getPositionConnectionPoints(position);
+        const offset = getOffsetForPosition(position, this.displayArrow());
+        const anchor = this.target();
+        const content = this.templateRef();
+        const targetElement = this.#popoverTargetElement;
+        this.popupRef = this.#popupService.create({
+            anchor,
+            anchorConnectionPoint: connectionPoints.anchor,
+            animation: fadePopupAnimation,
+            closeOnMouseLeave: this.trigger() === "hover",
+            closeOnOutsideClick: true,
+            content,
+            hasBackdrop: false,
+            offset,
+            popupConnectionPoint: connectionPoints.popup,
+            withPush: true
+        });
+        this.#renderer.setAttribute(targetElement, "aria-haspopup", "dialog");
+        this.#renderer.setAttribute(targetElement, "aria-controls", this.uid);
+        this.#renderer.setAttribute(targetElement, "aria-expanded", "true");
+        this.popupRef.beforeClose.pipe(takeUntil(this.popupRef.closed)).subscribe(event => {
+            const hideEvent = new PopoverHideEvent(this.#popoverTargetElement, this.popupRef);
+            this.hide.emit(hideEvent);
+            if (hideEvent.isDefaultPrevented()) {
+                event.preventDefault();
+                return;
+            }
+        });
+        this.popupRef.closed.pipe(take(1)).subscribe(() => {
+            this.popupRef = null;
+            this.#renderer.setAttribute(targetElement, "aria-expanded", "false");
+            this.hidden.emit();
+        });
+    }
+    #openViaTrigger() {
+        const showEvent = new PopoverShowEvent(this.#popoverTargetElement);
+        this.show.emit(showEvent);
+        if (showEvent.isDefaultPrevented()) {
+            return;
+        }
+        this.#createPopover();
+        if (this.popupRef) {
+            const shownEvent = new PopoverShownEvent(this.#popoverTargetElement, this.popupRef);
+            this.shown.emit(shownEvent);
+        }
+    }
+    #setSubscriptions() {
+        const trigger = this.trigger();
+        if (trigger === "none") {
+            return;
+        }
+        if (trigger === "hover") {
+            this.#subscription = fromEvent(this.#popoverTargetElement, "pointerenter")
+                .pipe(filter(() => !this.popupRef), tap(() => this.#openViaTrigger()), takeUntilDestroyed(this.#destroyRef))
+                .subscribe();
+            return;
+        }
+        this.#subscription = fromEvent(this.#popoverTargetElement, trigger)
+            .pipe(tap(event => event.preventDefault()), filter(() => {
+            if (this.popupRef) {
+                this.close();
+                return false;
+            }
+            return true;
+        }), tap(() => this.#openViaTrigger()), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
+    }
+    get #popoverTargetElement() {
+        const target = this.target();
+        return target instanceof ElementRef ? target.nativeElement : target;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopoverComponent, isStandalone: true, selector: "mona-popover", inputs: { displayArrow: { classPropertyName: "displayArrow", publicName: "displayArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hide: "hide", hidden: "hidden", show: "show", shown: "shown" }, queries: [{ propertyName: "footerTemplateRef", first: true, predicate: PopoverFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplateRef", first: true, predicate: PopoverTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["monaPopover"], ngImport: i0, template: "<ng-template>\r\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\r\n        <div>\r\n            @if (title() || titleTemplateRef()) {\r\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\r\n                    @if (titleTemplateRef()) {\r\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ title() }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n            <div [class]=\"contentClasses()\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            @if (footerTemplateRef()) {\r\n                <div class=\"mona-popover-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\r\n                </div>\r\n            }\r\n        </div>\r\n        @if (displayArrow()) {\r\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-popover", exportAs: "monaPopover", imports: [NgTemplateOutlet], template: "<ng-template>\r\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\r\n        <div>\r\n            @if (title() || titleTemplateRef()) {\r\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\r\n                    @if (titleTemplateRef()) {\r\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ title() }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n            <div [class]=\"contentClasses()\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            @if (footerTemplateRef()) {\r\n                <div class=\"mona-popover-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\r\n                </div>\r\n            }\r\n        </div>\r\n        @if (displayArrow()) {\r\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { footerTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], displayArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayArrow", required: false }] }], hide: [{ type: i0.Output, args: ["hide"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], show: [{ type: i0.Output, args: ["show"] }], shown: [{ type: i0.Output, args: ["shown"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/popover
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PopoverComponent, PopoverFooterTemplateDirective, PopoverHideEvent, PopoverShowEvent, PopoverShownEvent, PopoverTitleTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-popover.mjs.map