@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,453 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, output, model, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LucideCircleX } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { fromEvent, filter } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+/**
+ * @description Apply to an `<ng-template>` directly inside `<mona-chip>` to render prefix content
+ * (e.g., an avatar or icon) before the chip label or projected content. The template receives no context.
+ */
+class ChipPrefixTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipPrefixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ChipPrefixTemplateDirective, isStandalone: true, selector: "ng-template[monaChipPrefixTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipPrefixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaChipPrefixTemplate]"
+                }]
+        }] });
+
+const chipVariants = cva(`
+        inline-flex items-center justify-between gap-1.5
+        text-xs font-medium cursor-pointer shrink-0
+        outline-none shadow-xs
+        transition-colors duration-200 ease-in-out
+    `, {
+    variants: {
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            false: ""
+        },
+        look: {
+            default: `
+                    bg-background text-foreground
+                    border border-border
+                    hover:bg-hover hover:text-accent-foreground
+                    active:bg-active active:text-accent-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            primary: `
+                    bg-primary text-primary-foreground
+                    hover:bg-primary-hover hover:text-primary-foreground
+                    active:bg-primary-active active:text-primary-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            success: `
+                    bg-success text-success-foreground
+                    hover:bg-success-hover hover:text-success-foreground
+                    active:bg-success-active active:text-success-foreground
+                    focus-visible:ring-2 focus-visible:ring-success/40
+                `,
+            error: `
+                    bg-error text-error-foreground
+                    hover:bg-error-hover hover:text-error-foreground
+                    active:bg-error-active active:text-error-foreground
+                    focus-visible:ring-2 focus-visible:ring-error/40
+                `,
+            warning: `
+                    bg-warning text-warning-foreground
+                    hover:bg-warning-hover hover:text-warning-foreground
+                    active:bg-warning-active active:text-warning-foreground
+                    focus-visible:ring-2 focus-visible:ring-warning/40
+                `,
+            info: `
+                    bg-info text-info-foreground
+                    hover:bg-info-hover hover:text-info-foreground
+                    active:bg-info-active active:text-info-foreground
+                    focus-visible:ring-2 focus-visible:ring-info/40
+                `,
+            outline: `
+                    border border-border
+                    hover:bg-accent hover:text-accent-foreground
+                    active:bg-accent-dark active:text-accent-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            secondary: `
+                    bg-secondary text-secondary-foreground
+                    hover:bg-secondary-hover hover:text-secondary-foreground
+                    active:bg-secondary-active active:text-secondary-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            ghost: `
+                    hover:bg-secondary-hover hover:text-secondary-foreground
+                    active:bg-secondary-active active:text-secondary-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `
+        },
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            small: `
+                    ps-1 pe-1 py-0.5
+                    [&_button[data-chip-remove='true']]:w-3
+                    [&_button[data-chip-remove='true']]:h-3
+                `,
+            medium: `
+                    ps-1.5 pe-1.5 py-1
+                    [&_button[data-chip-remove='true']]:w-4
+                    [&_button[data-chip-remove='true']]:h-4
+                `,
+            large: `
+                    ps-2 pe-2 py-1.5
+                    [&_button[data-chip-remove='true']]:w-5
+                    [&_button[data-chip-remove='true']]:h-5
+                `
+        },
+        selected: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            look: "default",
+            selected: true,
+            class: `
+                    bg-selected text-foreground
+                    hover:bg-selected/95 hover:text-foreground
+                    active:bg-selected/100 active:text-foreground
+                `
+        },
+        {
+            look: "primary",
+            selected: true,
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
+                `
+        },
+        {
+            look: "secondary",
+            selected: true,
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                `
+        },
+        {
+            look: "success",
+            selected: true,
+            class: `
+                    bg-success-selected text-success-foreground
+                    hover:bg-success-selected/95 hover:text-success-foreground
+                    active:bg-success-selected/100 active:text-success-foreground
+                `
+        },
+        {
+            look: "error",
+            selected: true,
+            class: `
+                    bg-error-selected text-error-foreground
+                    hover:bg-error-selected/95 hover:text-error-foreground
+                    active:bg-error-selected/100 active:text-error-foreground
+                `
+        },
+        {
+            look: "warning",
+            selected: true,
+            class: `
+                    bg-warning-selected text-warning-foreground
+                    hover:bg-warning-selected/95 hover:text-warning-foreground
+                    active:bg-warning-selected/100 active:text-warning-foreground
+                `
+        },
+        {
+            look: "info",
+            selected: true,
+            class: `
+                    bg-info-selected text-info-foreground
+                    hover:bg-info-selected/95 hover:text-info-foreground
+                    active:bg-info-selected/100 active:text-info-foreground
+                `
+        },
+        {
+            look: "outline",
+            selected: true,
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
+                `
+        },
+        {
+            look: "ghost",
+            selected: true,
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                `
+        }
+    ],
+    defaultVariants: {
+        selected: false
+    }
+});
+
+const chipThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return chipVariants;
+        default:
+            return chipVariants;
+    }
+};
+
+class ChipComponent {
+    #destroyRef;
+    #elementRef;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#elementRef = inject(ElementRef);
+        this.#themeService = inject(ThemeService);
+        this.ariaChecked = computed(() => {
+            if (!this.toggleable()) {
+                return undefined;
+            }
+            return this.selected() ? "true" : "false";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            const look = this.look();
+            const rounded = this.rounded();
+            const size = this.size();
+            const selected = this.selected();
+            const userClass = this.userClass();
+            const variantClasses = chipThemeVariants(theme)({ disabled, look, rounded, size, selected });
+            return twMerge(variantClasses, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.effectiveAriaLabel = computed(() => {
+            const explicitLabel = this.ariaLabel();
+            if (explicitLabel) {
+                return explicitLabel;
+            }
+            const label = this.label();
+            if (label) {
+                return label;
+            }
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+        this.effectiveTabIndex = computed(() => {
+            if (this.disabled()) {
+                return -1;
+            }
+            const explicitTabindex = this.tabindex();
+            if (explicitTabindex != null) {
+                return explicitTabindex;
+            }
+            if (this.toggleable() || this.removable()) {
+                return 0;
+            }
+            return -1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveTabIndex" }] : /* istanbul ignore next */ []));
+        this.iconSize = computed(() => {
+            const size = this.size();
+            switch (size) {
+                case "small":
+                    return 13;
+                case "medium":
+                    return 14;
+                case "large":
+                    return 16;
+                default:
+                    return 14;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        this.prefixTemplate = contentChild(ChipPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.role = computed(() => {
+            if (this.toggleable()) {
+                return "checkbox";
+            }
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the host element. Describe what the chip represents.
+         * When empty, assistive technology announces the role without a label.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Emitted when the chip body is clicked or activated via Enter or Space.
+         * Not emitted when the remove button is activated.
+         */
+        this.contentClick = output();
+        /**
+         * @description Renders the chip with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Text label displayed inside the chip. When non-empty, takes precedence over projected content.
+         * @default ""
+         */
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual style variant controlling the chip's background color, border, and interaction states.
+         * @default "default"
+         */
+        this.look = input("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders a remove button inside the chip. When activated, emits the `remove` output.
+         * @default false
+         */
+        this.removable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the remove button is clicked. Only fires when `removable` is `true`.
+         * Emits the originating `Event`.
+         */
+        this.remove = output();
+        /**
+         * @description Accessible label for the remove button, overriding the auto-computed `"Remove, <label>"` fallback.
+         * Use when the chip shows only projected content and the default label is not descriptive enough.
+         * @default undefined
+         */
+        this.removeLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Tab index for the remove button, independent of the chip host's own tabindex.
+         * Set to `-1` to exclude the remove button from tab order when an equivalent keyboard path exists elsewhere.
+         * @default 0
+         */
+        this.removeTabIndex = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "removeTabIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the chip.
+         * @default "full"
+         */
+        this.rounded = input("full", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the chip is selected. When `toggleable` is `true`, each activation flips this value.
+         * Supports two-way binding via `[(selected)]`.
+         * @default false
+         */
+        this.selected = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the chip's padding and remove button dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Tab index override for the chip host element. When not set, computed automatically:
+         * `0` when `toggleable` or `removable` is `true`, `-1` otherwise. Overridden to `-1` when `disabled` is `true`.
+         * @default undefined
+         */
+        this.tabindex = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "tabindex" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Enables toggle behavior. When `true`, each activation flips `selected`
+         * and the host receives `role="checkbox"` with `aria-checked`.
+         * @default false
+         */
+        this.toggleable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleable" }] : /* 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 Arbitrary value associated with this chip.
+         * Useful for identifying which chip was selected or removed in a collection.
+         * @default undefined
+         */
+        this.value = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => this.#setSubscriptions()
+        });
+    }
+    onRemoveClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event.stopPropagation();
+        this.remove.emit(event);
+    }
+    #handleActivation() {
+        if (this.toggleable()) {
+            this.selected.set(!this.selected());
+        }
+        this.contentClick.emit();
+    }
+    #setSubscriptions() {
+        const element = this.#elementRef.nativeElement;
+        fromEvent(element, "keydown")
+            .pipe(filter(event => !this.disabled() && (event.key === "Enter" || event.key === " ")), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const target = event.target;
+            if (target.closest("button[data-chip-remove]")) {
+                return;
+            }
+            event.preventDefault();
+            this.#handleActivation();
+        });
+        fromEvent(element, "click")
+            .pipe(filter(() => !this.disabled()), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.#handleActivation();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-chip", imports: [ButtonDirective, NgTemplateOutlet, LucideCircleX], host: {
+                        "[class]": "baseClass()",
+                        "[attr.tabindex]": "effectiveTabIndex()",
+                        "[attr.aria-disabled]": "disabled() ? 'true' : undefined",
+                        "[attr.role]": "role()",
+                        "[attr.aria-checked]": "ariaChecked()",
+                        "[attr.aria-label]": "effectiveAriaLabel()"
+                    }, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], contentClick: [{ type: i0.Output, args: ["contentClick"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removeTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTabIndex", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/chip
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChipComponent, ChipPrefixTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-chip.mjs.map