@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,664 @@
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, computed, input, DestroyRef, signal, viewChild, viewChildren, ElementRef, model, output, afterRenderEffect, untracked, afterNextRender, ChangeDetectionStrategy, Component, contentChild, TemplateRef, contentChildren, linkedSignal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { firstOrDefault, select } from '@mirei/ts-collections';
+import { cva } from 'class-variance-authority';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faChevronLeft, faChevronRight, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { Subject, switchMap, EMPTY, timer, interval, tap, asapScheduler } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+
+class TabCloseEvent extends PreventableEvent {
+    #index;
+    #selected;
+    constructor(index, selected, originalEvent) {
+        super("tabClose", originalEvent);
+        this.#index = index;
+        this.#selected = selected;
+    }
+    get index() {
+        return this.#index;
+    }
+    get selected() {
+        return this.#selected;
+    }
+}
+
+class TabSelectEvent extends PreventableEvent {
+    #index;
+    constructor(index, originalEvent) {
+        super("tabSelect", originalEvent);
+        this.#index = index;
+    }
+    get index() {
+        return this.#index;
+    }
+}
+
+class TabContentTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabContentTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: TabContentTemplateDirective, isStandalone: true, selector: "ng-template[monaTabContentTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaTabContentTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+class TabTitleTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: TabTitleTemplateDirective, isStandalone: true, selector: "ng-template[monaTabTitleTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabTitleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaTabTitleTemplate]",
+                    standalone: true
+                }]
+        }] });
+
+const tabListBaseVariants = cva(`
+        w-fit max-w-full
+        flex overflow-hidden
+        bg-accent
+        font-medium text-sm
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        },
+        size: {
+            small: "h-8",
+            medium: "h-9",
+            large: "h-10"
+        }
+    }
+});
+const tabListListWrapperVariants = cva(`w-full h-full overflow-hidden`);
+const tabListListVariants = cva(`
+        flex h-full w-full overflow-hidden
+        list-none cursor-default
+        select-none whitespace-nowrap
+        p-[3px]
+        transition-colors duration-300 ease-out
+    `);
+const tabListListItemVariants = cva(`
+        flex items-center justify-center
+        cursor-pointer
+        px-2 outline-none
+        focus-visible:ring-2 focus-visible:ring-primary/40
+    `, {
+    variants: {
+        active: {
+            true: "bg-background-dark text-foreground shadow-sm",
+            false: ""
+        },
+        disabled: {
+            true: "pointer-events-none cursor-not-allowed opacity-50 select-none",
+            false: ""
+        },
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        }
+    },
+    defaultVariants: {
+        rounded: "medium"
+    }
+});
+const tabListScrollButtonVariants = cva(`
+        flex items-center justify-center
+        h-full px-2
+    `);
+const tabContentVariants = cva(`
+        w-full overflow-auto flex-1
+        border border-border shadow-sm
+        bg-background
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        }
+    },
+    defaultVariants: {
+        rounded: "medium"
+    }
+});
+const tabsBaseVariants = cva(`
+        max-w-full
+        flex flex-col gap-2
+    `);
+
+const tabListBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tabListBaseVariants;
+        default:
+            return tabListBaseVariants;
+    }
+};
+const tabListListWrapperThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tabListListWrapperVariants;
+        default:
+            return tabListListWrapperVariants;
+    }
+};
+const tabListListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tabListListVariants;
+        default:
+            return tabListListVariants;
+    }
+};
+const tabListListItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tabListListItemVariants;
+        default:
+            return tabListListItemVariants;
+    }
+};
+const tabListScrollButtonThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tabListScrollButtonVariants;
+        default:
+            return tabListScrollButtonVariants;
+    }
+};
+const tabContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tabContentVariants;
+        default:
+            return tabContentVariants;
+    }
+};
+const tabsBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tabsBaseVariants;
+        default:
+            return tabsBaseVariants;
+    }
+};
+
+class TabListItemDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.listItemClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const active = this.active();
+            const disabled = this.disabled();
+            const rounded = this.rounded();
+            return tabListListItemThemeVariants(theme)({ active, disabled, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
+        this.active = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.disabled = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.rounded = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TabListItemDirective, isStandalone: true, selector: "li[monaTabListItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "listItemClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "li[monaTabListItem]",
+                    host: {
+                        "[class]": "listItemClass()"
+                    }
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
+
+class TabListComponent {
+    #destroyRef;
+    #themeService;
+    #keydown$;
+    #resizeObserver;
+    #scrollIntent$;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#themeService = inject(ThemeService);
+        this.#keydown$ = new Subject();
+        this.#resizeObserver = null;
+        this.#scrollIntent$ = new Subject();
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            return tabListBaseThemeVariants(theme)({ rounded, size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.listClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return tabListListThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.scrollButtonClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return tabListScrollButtonThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollButtonClass" }] : /* istanbul ignore next */ []));
+        this.scrollLeftIcon = faChevronLeft;
+        this.scrollRightIcon = faChevronRight;
+        this.scrollsVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollsVisible" }] : /* istanbul ignore next */ []));
+        this.tabCloseIcon = faXmark;
+        this.tabListElement = viewChild.required("tabListElement", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabListElement" }] : /* istanbul ignore next */ []));
+        this.tabListItems = viewChildren(TabListItemDirective, { ...(ngDevMode ? { debugName: "tabListItems" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.closable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.rounded = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.selectedTabId = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedTabId" }] : /* istanbul ignore next */ []));
+        this.size = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.tabClose = output();
+        this.tabSelect = output();
+        this.tabList = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabList" }] : /* istanbul ignore next */ []));
+        afterRenderEffect({
+            read: () => {
+                this.tabList();
+                untracked(() => {
+                    this.updateScrollVisibility();
+                });
+            }
+        });
+        afterNextRender({
+            write: () => {
+                const selectedTab = firstOrDefault(this.tabList(), t => t.id === this.selectedTabId());
+                if (selectedTab) {
+                    this.selectedTabId.set(selectedTab.id);
+                }
+            },
+            read: () => {
+                this.setupKeyboardNavigation();
+                this.setupResizeObserver();
+                this.setupScrolling();
+            }
+        });
+        inject(DestroyRef).onDestroy(() => this.#resizeObserver?.disconnect());
+    }
+    focusSelectedTab() {
+        const tabList = this.tabList();
+        const selectedTab = firstOrDefault(tabList, t => t.id === this.selectedTabId());
+        if (selectedTab) {
+            this.focusTab(selectedTab);
+        }
+    }
+    onKeydown(event) {
+        this.#keydown$.next(event);
+    }
+    onTabClick(tab, tabListElement, event) {
+        if (tab.id === this.selectedTabId()) {
+            return;
+        }
+        const selectEvent = new TabSelectEvent(tab.index, event);
+        this.tabSelect.emit(selectEvent);
+        if (selectEvent.isDefaultPrevented()) {
+            return;
+        }
+        this.selectTab(tab);
+        window.setTimeout(() => {
+            const listElement = tabListElement.querySelector("li[data-selected='true']");
+            if (listElement) {
+                listElement.scrollIntoView({ behavior: "auto", block: "center" });
+            }
+        });
+    }
+    onTabClose(tab, event) {
+        event.stopPropagation();
+        this.emitTabClose(tab, event);
+    }
+    startContinuousScroll(event, element, direction) {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this.startScrolling(element, direction, "continuous");
+    }
+    startScrolling(element, direction, type) {
+        this.#scrollIntent$.next({ element, direction, type });
+    }
+    stopScrolling() {
+        this.#scrollIntent$.next(null);
+    }
+    handleKeyboardEvents(event) {
+        const tabList = this.tabList();
+        const tabs = Array.from(tabList);
+        const selectedTab = tabs.find(t => t.id === this.selectedTabId());
+        if (!selectedTab) {
+            return;
+        }
+        if (event.key === "Tab") {
+            if (!event.shiftKey) {
+                this.handleTabKey(selectedTab, event);
+            }
+            return;
+        }
+        const listDisabled = this.disabled();
+        const enabledTabs = tabs.filter(t => !t.disabled && !listDisabled);
+        if (enabledTabs.length === 0) {
+            return;
+        }
+        const selectedEnabledIndex = enabledTabs.indexOf(selectedTab);
+        const selectedIndex = selectedEnabledIndex === -1 ? 0 : selectedEnabledIndex;
+        let nextIndex = selectedIndex;
+        switch (event.key) {
+            case "ArrowLeft":
+                nextIndex = selectedIndex === 0 ? enabledTabs.length - 1 : selectedIndex - 1;
+                this.activateTab(enabledTabs[nextIndex], event);
+                break;
+            case "ArrowRight":
+                nextIndex = selectedIndex === enabledTabs.length - 1 ? 0 : selectedIndex + 1;
+                this.activateTab(enabledTabs[nextIndex], event);
+                break;
+            case "Home":
+                this.activateTab(enabledTabs[0], event);
+                break;
+            case "End":
+                this.activateTab(enabledTabs[enabledTabs.length - 1], event);
+                break;
+            case "Delete":
+            case "Backspace":
+                if (!selectedTab.disabled && !listDisabled && (selectedTab.closable || this.closable())) {
+                    this.emitTabClose(selectedTab, event);
+                }
+                break;
+        }
+    }
+    activateTab(tab, event) {
+        const prevented = this.emitTabSelect(tab, event);
+        if (!prevented) {
+            this.selectTab(tab);
+            this.focusSelectedTab();
+        }
+    }
+    emitTabClose(tabItem, event) {
+        const selected = tabItem.id === this.selectedTabId();
+        const tabCloseEvent = new TabCloseEvent(tabItem.index, selected, event);
+        this.tabClose.emit(tabCloseEvent);
+        return tabCloseEvent.isDefaultPrevented();
+    }
+    emitTabSelect(tab, event) {
+        const selectEvent = new TabSelectEvent(tab.index, event);
+        this.tabSelect.emit(selectEvent);
+        return selectEvent.isDefaultPrevented();
+    }
+    focusTab(tab) {
+        const tabListItems = this.tabListItems();
+        const tabListItem = tabListItems.find(t => t.nativeElement.getAttribute("data-tab-id") === tab.id);
+        tabListItem?.nativeElement.focus();
+    }
+    handleTabKey(tab, event) {
+        event.preventDefault();
+        const panelId = tab.id + "-panel";
+        const panel = document.getElementById(panelId);
+        if (panel) {
+            panel.focus();
+        }
+    }
+    performScroll(element, direction) {
+        let left = 0;
+        switch (direction) {
+            case "left":
+                left = Math.max(element.scrollLeft - 100, 0);
+                element.scrollTo({ left, behavior: "smooth" });
+                break;
+            case "right":
+                left = Math.min(element.scrollLeft + 100, element.scrollWidth);
+                element.scrollTo({ left, behavior: "smooth" });
+                break;
+        }
+    }
+    selectTab(tab) {
+        this.selectedTabId.set(tab.id);
+    }
+    setupKeyboardNavigation() {
+        this.#keydown$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => this.handleKeyboardEvents(event));
+    }
+    setupResizeObserver() {
+        this.#resizeObserver = new ResizeObserver(entries => {
+            window.requestAnimationFrame(() => {
+                if (!Array.isArray(entries) || !entries.length) {
+                    return;
+                }
+                this.updateScrollVisibility();
+            });
+        });
+        this.#resizeObserver.observe(this.tabListElement().nativeElement);
+    }
+    setupScrolling() {
+        this.#scrollIntent$
+            .pipe(takeUntilDestroyed(this.#destroyRef), switchMap(intent => {
+            if (!intent) {
+                return EMPTY;
+            }
+            const { element, direction, type } = intent;
+            const timeFunction = type === "single" ? timer : interval;
+            return timeFunction(60).pipe(tap(() => this.performScroll(element, direction)));
+        }))
+            .subscribe();
+    }
+    updateScrollVisibility() {
+        asapScheduler.schedule(() => {
+            this.scrollsVisible.set(this.tabListElement().nativeElement.scrollWidth > this.tabListElement().nativeElement.clientWidth);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabListComponent, isStandalone: true, selector: "mona-tab-list", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, tabList: { classPropertyName: "tabList", publicName: "tabList", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedTabId: "selectedTabIdChange", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true, isSignal: true }, { propertyName: "tabListItems", predicate: TabListItemDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollLeftIcon\"></fa-icon>\r\n    </button>\r\n}\r\n<div class=\"w-full h-full overflow-hidden\">\r\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\r\n        @for (tab of tabList(); track tab) {\r\n            @let selected = tab.id === selectedTabId();\r\n            @let itemDisabled = tab.disabled || disabled();\r\n            <li\r\n                monaTabListItem\r\n                [id]=\"tab.id + '-tab'\"\r\n                [active]=\"selected\"\r\n                [disabled]=\"itemDisabled\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tab\"\r\n                [tabindex]=\"selected ? 0 : -1\"\r\n                [attr.aria-selected]=\"selected\"\r\n                [attr.aria-disabled]=\"itemDisabled\"\r\n                [attr.aria-controls]=\"tab.id + '-panel'\"\r\n                [attr.data-selected]=\"selected\"\r\n                [attr.data-tab-id]=\"tab.id\"\r\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\r\n                <div>\r\n                    @if (tab.titleTemplate) {\r\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ tab.title }}</span>\r\n                    }\r\n                </div>\r\n                @if (tab.closable || closable()) {\r\n                    <button\r\n                        monaButton\r\n                        look=\"link\"\r\n                        [disabled]=\"itemDisabled\"\r\n                        (click)=\"onTabClose(tab, $event)\"\r\n                        class=\"px-0 h-fit ml-1 w-min\"\r\n                        tabindex=\"-1\">\r\n                        <fa-icon [icon]=\"tabCloseIcon\" class=\"text-xs flex\"></fa-icon>\r\n                    </button>\r\n                }\r\n            </li>\r\n        }\r\n    </ul>\r\n</div>\r\n@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollRightIcon\"></fa-icon>\r\n    </button>\r\n}\r\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: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabListItemDirective, selector: "li[monaTabListItem]", inputs: ["active", "disabled", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-tab-list", imports: [ButtonDirective, FaIconComponent, NgTemplateOutlet, TabListItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class]": "baseClass()",
+                        "(keydown)": "onKeydown($event)"
+                    }, template: "@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'left', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'left')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollLeftIcon\"></fa-icon>\r\n    </button>\r\n}\r\n<div class=\"w-full h-full overflow-hidden\">\r\n    <ul [class]=\"listClass()\" #tabListElement role=\"tablist\">\r\n        @for (tab of tabList(); track tab) {\r\n            @let selected = tab.id === selectedTabId();\r\n            @let itemDisabled = tab.disabled || disabled();\r\n            <li\r\n                monaTabListItem\r\n                [id]=\"tab.id + '-tab'\"\r\n                [active]=\"selected\"\r\n                [disabled]=\"itemDisabled\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tab\"\r\n                [tabindex]=\"selected ? 0 : -1\"\r\n                [attr.aria-selected]=\"selected\"\r\n                [attr.aria-disabled]=\"itemDisabled\"\r\n                [attr.aria-controls]=\"tab.id + '-panel'\"\r\n                [attr.data-selected]=\"selected\"\r\n                [attr.data-tab-id]=\"tab.id\"\r\n                (click)=\"onTabClick(tab, tabListElement, $event)\">\r\n                <div>\r\n                    @if (tab.titleTemplate) {\r\n                        <ng-container [ngTemplateOutlet]=\"tab.titleTemplate\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ tab.title }}</span>\r\n                    }\r\n                </div>\r\n                @if (tab.closable || closable()) {\r\n                    <button\r\n                        monaButton\r\n                        look=\"link\"\r\n                        [disabled]=\"itemDisabled\"\r\n                        (click)=\"onTabClose(tab, $event)\"\r\n                        class=\"px-0 h-fit ml-1 w-min\"\r\n                        tabindex=\"-1\">\r\n                        <fa-icon [icon]=\"tabCloseIcon\" class=\"text-xs flex\"></fa-icon>\r\n                    </button>\r\n                }\r\n            </li>\r\n        }\r\n    </ul>\r\n</div>\r\n@if (scrollsVisible()) {\r\n    <button\r\n        monaButton\r\n        look=\"link\"\r\n        size=\"small\"\r\n        [class]=\"scrollButtonClass()\"\r\n        (click)=\"startScrolling(tabListElement, 'right', 'single')\"\r\n        (pointerdown)=\"startContinuousScroll($event, tabListElement, 'right')\"\r\n        (pointerup)=\"stopScrolling()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        tabindex=\"-1\">\r\n        <fa-icon [icon]=\"scrollRightIcon\"></fa-icon>\r\n    </button>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { tabListElement: [{ type: i0.ViewChild, args: ["tabListElement", { isSignal: true }] }], tabListItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TabListItemDirective), { ...{ read: ElementRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabId", required: false }] }, { type: i0.Output, args: ["selectedTabIdChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], tabList: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabList", required: true }] }] } });
+
+class TabComponent {
+    constructor() {
+        this.#id = createElementControlId();
+        this.#tabItem = computed(() => {
+            const closable = this.closable();
+            const contentTemplate = this.contentTemplate();
+            const disabled = this.disabled();
+            const selected = this.selected();
+            const titleTemplate = this.titleTemplate();
+            const title = this.title();
+            const id = this.#id;
+            const tabItem = {
+                closable,
+                contentTemplate,
+                disabled,
+                id,
+                index: 0,
+                selected,
+                title,
+                titleTemplate
+            };
+            return tabItem;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#tabItem" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = contentChild(TabContentTemplateDirective, { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.titleTemplate = contentChild(TabTitleTemplateDirective, { ...(ngDevMode ? { debugName: "titleTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Displays a close button on this tab. Overrides the parent `mona-tabs` component's `closable` input.
+         * @default false
+         */
+        this.closable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders this tab with reduced visual emphasis and removes pointer and keyboard interaction.
+         * Overrides the parent `mona-tabs` component's `disabled` input.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the tab is selected.
+         * @default false
+         */
+        this.selected = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Title text displayed on the tab.
+         * @default ""
+         */
+        this.title = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    }
+    #id;
+    #tabItem;
+    get tabItem() {
+        return this.#tabItem();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TabComponent, isStandalone: true, selector: "mona-tab", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TabContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: TabTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-tab",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabContentTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
+
+class TabsComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.tabListComponent = viewChild.required(TabListComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabListComponent" }] : /* istanbul ignore next */ []));
+        this.tabs = contentChildren(TabComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const variantClass = tabsBaseThemeVariants(theme)();
+            const userClass = this.userClass();
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.contentClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded() === "full" ? "large" : this.rounded();
+            return tabContentThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        this.selectedTabId = linkedSignal({ ...(ngDevMode ? { debugName: "selectedTabId" } : /* istanbul ignore next */ {}), source: () => this.tabList(),
+            computation: (tabList, previous) => {
+                const previousId = previous?.value;
+                if (previousId && tabList.any(t => t.id === previousId)) {
+                    return previousId;
+                }
+                return tabList.firstOrDefault()?.id ?? null;
+            } });
+        this.tabList = computed(() => {
+            const tabs = this.tabs();
+            return select(tabs, t => t.tabItem)
+                .tap((t, tx) => (t.index = tx))
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabList" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Displays a close button on each tab, unless overridden per tab.
+         * @default false
+         */
+        this.closable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders every tab with reduced visual emphasis and removes pointer and keyboard interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Keeps a tab's content in the DOM after it is deselected instead of removing it.
+         * @default true
+         */
+        this.keepTabContent = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keepTabContent" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the tabs and the tab content area.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the tabs' dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted with a {@link TabCloseEvent} when a tab is closed.
+         */
+        this.tabClose = output();
+        /**
+         * @description Emitted with a {@link TabSelectEvent} when a tab is selected. This event is preventable.
+         */
+        this.tabSelect = output();
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    handlePanelKeyDown(event) {
+        if (event.key === "Tab" && event.shiftKey) {
+            if (event.target !== event.currentTarget) {
+                return;
+            }
+            event.preventDefault();
+            this.tabListComponent().focusSelectedTab();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "mona-tabs", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepTabContent: { classPropertyName: "keepTabContent", publicName: "keepTabContent", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<mona-tab-list\r\n    [closable]=\"closable()\"\r\n    [disabled]=\"disabled()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [tabList]=\"tabList()\"\r\n    [selectedTabId]=\"selectedTabId()\"\r\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\r\n    (tabClose)=\"tabClose.emit($event)\"\r\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\r\n<div [class]=\"contentClass()\">\r\n    @for (tab of tabList(); track tab) {\r\n        @let selected = tab.id === selectedTabId();\r\n        @let tabLoaded = keepTabContent() || selected;\r\n        @let tabHidden = keepTabContent() && !selected;\r\n        @if (tabLoaded) {\r\n            <div\r\n                class=\"w-full h-full outline-none\"\r\n                [class.hidden]=\"tabHidden\"\r\n                role=\"tabpanel\"\r\n                [id]=\"tab.id + '-panel'\"\r\n                tabindex=\"0\"\r\n                (keydown)=\"handlePanelKeyDown($event)\"\r\n                [attr.aria-hidden]=\"tabHidden\"\r\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\r\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TabListComponent, selector: "mona-tab-list", inputs: ["closable", "disabled", "rounded", "selectedTabId", "size", "tabList"], outputs: ["selectedTabIdChange", "tabClose", "tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-tabs", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TabListComponent], host: {
+                        "[class]": "baseClass()"
+                    }, template: "<mona-tab-list\r\n    [closable]=\"closable()\"\r\n    [disabled]=\"disabled()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [tabList]=\"tabList()\"\r\n    [selectedTabId]=\"selectedTabId()\"\r\n    (selectedTabIdChange)=\"selectedTabId.set($event)\"\r\n    (tabClose)=\"tabClose.emit($event)\"\r\n    (tabSelect)=\"tabSelect.emit($event)\"></mona-tab-list>\r\n<div [class]=\"contentClass()\">\r\n    @for (tab of tabList(); track tab) {\r\n        @let selected = tab.id === selectedTabId();\r\n        @let tabLoaded = keepTabContent() || selected;\r\n        @let tabHidden = keepTabContent() && !selected;\r\n        @if (tabLoaded) {\r\n            <div\r\n                class=\"w-full h-full outline-none\"\r\n                [class.hidden]=\"tabHidden\"\r\n                role=\"tabpanel\"\r\n                [id]=\"tab.id + '-panel'\"\r\n                tabindex=\"0\"\r\n                (keydown)=\"handlePanelKeyDown($event)\"\r\n                [attr.aria-hidden]=\"tabHidden\"\r\n                [attr.aria-labelledby]=\"tab.id + '-tab'\">\r\n                <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n</div>\r\n" }]
+        }], propDecorators: { tabListComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TabListComponent), { isSignal: true }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keepTabContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepTabContent", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/tabs
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TabCloseEvent, TabComponent, TabContentTemplateDirective, TabSelectEvent, TabTitleTemplateDirective, TabsComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-tabs.mjs.map