@frame-ui-ng/components 0.1.0-beta.0

package/fesm2022/frame-ui-ng-components-sidebar.mjs

@@ -0,0 +1,628 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, signal, input, booleanAttribute, output, computed, effect, HostListener, Directive, NgModule } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+const FR_SIDEBAR_SIDES = ['left', 'right'];
+const FR_SIDEBAR_VARIANTS = ['sidebar', 'floating', 'inset'];
+const FR_SIDEBAR_COLLAPSIBLES = ['offcanvas', 'icon', 'none'];
+const FR_SIDEBAR_MENU_BUTTON_SIZES = ['default', 'sm', 'lg'];
+const FR_SIDEBAR_MENU_BUTTON_VARIANTS = ['default', 'outline'];
+const FR_SIDEBAR_PROVIDER = new InjectionToken('FR_SIDEBAR_PROVIDER');
+function coerceSide(value) {
+    return value === 'right' ? 'right' : 'left';
+}
+function coerceVariant(value) {
+    return value === 'floating' || value === 'inset' ? value : 'sidebar';
+}
+function coerceCollapsible(value) {
+    return value === 'icon' || value === 'none' ? value : 'offcanvas';
+}
+function coerceMenuButtonSize(value) {
+    return value === 'sm' || value === 'lg' ? value : 'default';
+}
+function coerceMenuButtonVariant(value) {
+    return value === 'outline' ? 'outline' : 'default';
+}
+class FrSidebarProvider {
+    document = inject(DOCUMENT);
+    elementRef = inject(ElementRef);
+    internalOpen = signal(true, ...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
+    internalOpenMobile = signal(false, ...(ngDevMode ? [{ debugName: "internalOpenMobile" }] : /* istanbul ignore next */ []));
+    resizing = signal(false, ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+    defaultOpen = input(true, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    openInput = input(null, { ...(ngDevMode ? { debugName: "openInput" } : /* istanbul ignore next */ {}), alias: 'open' });
+    openChange = output();
+    openMobileChange = output();
+    shortcut = input('b', ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    keyboardShortcut = input(true, { ...(ngDevMode ? { debugName: "keyboardShortcut" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    open = computed(() => this.openInput() ?? this.internalOpen(), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    openMobile = computed(() => this.internalOpenMobile(), ...(ngDevMode ? [{ debugName: "openMobile" }] : /* istanbul ignore next */ []));
+    state = computed(() => (this.open() ? 'expanded' : 'collapsed'), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.internalOpen.set(this.defaultOpen());
+        effect(() => {
+            if (this.openInput() === null) {
+                this.internalOpen.set(this.defaultOpen());
+            }
+        });
+        effect(() => {
+            this.elementRef.nativeElement.style.setProperty('--frame-sidebar-state', this.state());
+        });
+        const defaultView = this.document.defaultView;
+        if (!defaultView?.matchMedia) {
+            return;
+        }
+        const mediaQuery = defaultView.matchMedia('(max-width: 768px)');
+        const updateMobile = () => this.isMobile.set(mediaQuery.matches);
+        updateMobile();
+        mediaQuery.addEventListener?.('change', updateMobile);
+    }
+    setOpen(open) {
+        if (this.openInput() === null) {
+            this.internalOpen.set(open);
+        }
+        this.openChange.emit(open);
+    }
+    setOpenMobile(open) {
+        this.internalOpenMobile.set(open);
+        this.openMobileChange.emit(open);
+    }
+    setSidebarWidth(width) {
+        this.elementRef.nativeElement.style.setProperty('--frame-sidebar-width', `${width}px`);
+    }
+    setResizing(resizing) {
+        this.resizing.set(resizing);
+    }
+    toggleSidebar() {
+        if (this.isMobile()) {
+            this.setOpenMobile(!this.openMobile());
+            return;
+        }
+        this.setOpen(!this.open());
+    }
+    handleKeydown(event) {
+        if (!this.keyboardShortcut()) {
+            return;
+        }
+        const key = this.shortcut().toLowerCase();
+        if (event.key.toLowerCase() !== key || (!event.metaKey && !event.ctrlKey)) {
+            return;
+        }
+        event.preventDefault();
+        this.toggleSidebar();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarProvider, isStandalone: true, selector: "[frSidebarProvider], frame-sidebar-provider", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, openInput: { classPropertyName: "openInput", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, keyboardShortcut: { classPropertyName: "keyboardShortcut", publicName: "keyboardShortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", openMobileChange: "openMobileChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "attr.data-state": "state()", "attr.data-open": "open()", "attr.data-mobile-open": "openMobile()", "attr.data-mobile": "isMobile() ? \"\" : null", "attr.data-resizing": "resizing() ? \"\" : null" }, classAttribute: "frame-sidebar-provider" }, providers: [
+            {
+                provide: FR_SIDEBAR_PROVIDER,
+                useExisting: FrSidebarProvider,
+            },
+        ], exportAs: ["frSidebarProvider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarProvider], frame-sidebar-provider',
+                    exportAs: 'frSidebarProvider',
+                    providers: [
+                        {
+                            provide: FR_SIDEBAR_PROVIDER,
+                            useExisting: FrSidebarProvider,
+                        },
+                    ],
+                    host: {
+                        class: 'frame-sidebar-provider',
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-open]': 'open()',
+                        '[attr.data-mobile-open]': 'openMobile()',
+                        '[attr.data-mobile]': 'isMobile() ? "" : null',
+                        '[attr.data-resizing]': 'resizing() ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], openInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], openMobileChange: [{ type: i0.Output, args: ["openMobileChange"] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], keyboardShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardShortcut", required: false }] }], handleKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+class FrSidebar {
+    elementRef = inject(ElementRef);
+    provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
+    side = input('left', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), transform: coerceSide });
+    variant = input('sidebar', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: coerceVariant });
+    collapsible = input('offcanvas', { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: coerceCollapsible });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebar, isStandalone: true, selector: "[frSidebar], frame-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-side": "side()", "attr.data-variant": "variant()", "attr.data-collapsible": "collapsible()", "attr.data-state": "provider?.state() ?? \"expanded\"", "attr.data-mobile-open": "provider?.openMobile() ?? false" }, classAttribute: "frame-sidebar" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebar], frame-sidebar',
+                    host: {
+                        class: 'frame-sidebar',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-collapsible]': 'collapsible()',
+                        '[attr.data-state]': 'provider?.state() ?? "expanded"',
+                        '[attr.data-mobile-open]': 'provider?.openMobile() ?? false',
+                    },
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }] } });
+class FrSidebarTrigger {
+    provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
+    ariaLabel = input('Toggle sidebar', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    toggle() {
+        this.provider?.toggleSidebar();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarTrigger, isStandalone: true, selector: "[frSidebarTrigger]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-expanded": "provider?.open() ?? true", "attr.aria-label": "ariaLabel()" }, classAttribute: "frame-sidebar__trigger" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarTrigger]',
+                    host: {
+                        class: 'frame-sidebar__trigger',
+                        type: 'button',
+                        '[attr.aria-expanded]': 'provider?.open() ?? true',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '(click)': 'toggle()',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+class FrSidebarRail {
+    document = inject(DOCUMENT);
+    sidebar = inject(FrSidebar, { optional: true });
+    startX = 0;
+    startWidth = 0;
+    dragging = false;
+    suppressClick = false;
+    frameId = -1;
+    pendingWidth = 0;
+    provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
+    toggle() {
+        if (this.suppressClick) {
+            return;
+        }
+        this.provider?.toggleSidebar();
+    }
+    startResize(event) {
+        if (!this.sidebar || !this.provider || this.provider.isMobile()) {
+            return;
+        }
+        this.startX = event.clientX;
+        this.startWidth = this.sidebar.elementRef.nativeElement.getBoundingClientRect().width;
+        this.dragging = false;
+        this.pendingWidth = this.startWidth;
+        this.provider.setResizing(true);
+        event.preventDefault();
+        const move = (moveEvent) => this.resize(moveEvent);
+        const up = () => {
+            this.document.removeEventListener('pointermove', move);
+            this.document.removeEventListener('pointerup', up);
+            this.flushResize();
+            this.provider?.setResizing(false);
+            this.suppressClick = this.dragging;
+            this.dragging = false;
+            this.pendingWidth = 0;
+            setTimeout(() => {
+                this.suppressClick = false;
+            });
+        };
+        this.document.addEventListener('pointermove', move);
+        this.document.addEventListener('pointerup', up, { once: true });
+    }
+    resize(event) {
+        if (!this.sidebar || !this.provider) {
+            return;
+        }
+        const delta = event.clientX - this.startX;
+        const direction = this.sidebar.side() === 'right' ? -1 : 1;
+        const nextWidth = Math.min(Math.max(this.startWidth + delta * direction, 192), 384);
+        if (Math.abs(delta) > 3) {
+            this.dragging = true;
+        }
+        this.pendingWidth = nextWidth;
+        if (this.frameId !== -1) {
+            return;
+        }
+        this.frameId = requestAnimationFrame(() => {
+            this.provider?.setSidebarWidth(this.pendingWidth);
+            this.frameId = -1;
+        });
+    }
+    flushResize() {
+        if (this.frameId !== -1) {
+            cancelAnimationFrame(this.frameId);
+            this.frameId = -1;
+        }
+        if (this.pendingWidth) {
+            this.provider?.setSidebarWidth(this.pendingWidth);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarRail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarRail, isStandalone: true, selector: "[frSidebarRail], frame-sidebar-rail", host: { attributes: { "role": "separator", "tabindex": "0", "aria-label": "Resize sidebar", "aria-orientation": "vertical" }, listeners: { "click": "toggle()", "pointerdown": "startResize($event)", "keydown.enter": "toggle()", "keydown.space": "toggle(); $event.preventDefault()" }, classAttribute: "frame-sidebar__rail" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarRail, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarRail], frame-sidebar-rail',
+                    host: {
+                        class: 'frame-sidebar__rail',
+                        role: 'separator',
+                        tabindex: '0',
+                        'aria-label': 'Resize sidebar',
+                        'aria-orientation': 'vertical',
+                        '(click)': 'toggle()',
+                        '(pointerdown)': 'startResize($event)',
+                        '(keydown.enter)': 'toggle()',
+                        '(keydown.space)': 'toggle(); $event.preventDefault()',
+                    },
+                }]
+        }] });
+class FrSidebarInset {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarInset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarInset, isStandalone: true, selector: "[frSidebarInset], frame-sidebar-inset", host: { classAttribute: "frame-sidebar-inset" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarInset, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarInset], frame-sidebar-inset',
+                    host: {
+                        class: 'frame-sidebar-inset',
+                    },
+                }]
+        }] });
+class FrSidebarHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarHeader, isStandalone: true, selector: "[frSidebarHeader], frame-sidebar-header", host: { classAttribute: "frame-sidebar__header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarHeader], frame-sidebar-header',
+                    host: {
+                        class: 'frame-sidebar__header',
+                    },
+                }]
+        }] });
+class FrSidebarFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarFooter, isStandalone: true, selector: "[frSidebarFooter], frame-sidebar-footer", host: { classAttribute: "frame-sidebar__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarFooter], frame-sidebar-footer',
+                    host: {
+                        class: 'frame-sidebar__footer',
+                    },
+                }]
+        }] });
+class FrSidebarContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarContent, isStandalone: true, selector: "[frSidebarContent], frame-sidebar-content", host: { classAttribute: "frame-sidebar__content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarContent], frame-sidebar-content',
+                    host: {
+                        class: 'frame-sidebar__content',
+                    },
+                }]
+        }] });
+class FrSidebarGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroup, isStandalone: true, selector: "[frSidebarGroup], frame-sidebar-group", host: { classAttribute: "frame-sidebar__group" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarGroup], frame-sidebar-group',
+                    host: {
+                        class: 'frame-sidebar__group',
+                    },
+                }]
+        }] });
+class FrSidebarGroupLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroupLabel, isStandalone: true, selector: "[frSidebarGroupLabel], frame-sidebar-group-label", host: { classAttribute: "frame-sidebar__group-label" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarGroupLabel], frame-sidebar-group-label',
+                    host: {
+                        class: 'frame-sidebar__group-label',
+                    },
+                }]
+        }] });
+class FrSidebarGroupAction {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroupAction, isStandalone: true, selector: "[frSidebarGroupAction], frame-sidebar-group-action", host: { attributes: { "type": "button" }, classAttribute: "frame-sidebar__group-action" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarGroupAction], frame-sidebar-group-action',
+                    host: {
+                        class: 'frame-sidebar__group-action',
+                        type: 'button',
+                    },
+                }]
+        }] });
+class FrSidebarGroupContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroupContent, isStandalone: true, selector: "[frSidebarGroupContent], frame-sidebar-group-content", host: { classAttribute: "frame-sidebar__group-content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarGroupContent], frame-sidebar-group-content',
+                    host: {
+                        class: 'frame-sidebar__group-content',
+                    },
+                }]
+        }] });
+class FrSidebarMenu {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenu, isStandalone: true, selector: "[frSidebarMenu], frame-sidebar-menu", host: { attributes: { "role": "list" }, classAttribute: "frame-sidebar__menu" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenu], frame-sidebar-menu',
+                    host: {
+                        class: 'frame-sidebar__menu',
+                        role: 'list',
+                    },
+                }]
+        }] });
+class FrSidebarMenuItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuItem, isStandalone: true, selector: "[frSidebarMenuItem], frame-sidebar-menu-item", host: { attributes: { "role": "listitem" }, classAttribute: "frame-sidebar__menu-item" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuItem], frame-sidebar-menu-item',
+                    host: {
+                        class: 'frame-sidebar__menu-item',
+                        role: 'listitem',
+                    },
+                }]
+        }] });
+class FrSidebarMenuButton {
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('default', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: coerceMenuButtonSize });
+    variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: coerceMenuButtonVariant });
+    tooltip = input(null, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    handleClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarMenuButton, isStandalone: true, selector: "[frSidebarMenuButton], a[frSidebarMenuButton], button[frSidebarMenuButton]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.data-active": "active() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? -1 : null" }, classAttribute: "frame-sidebar__menu-button" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuButton], a[frSidebarMenuButton], button[frSidebarMenuButton]',
+                    host: {
+                        class: 'frame-sidebar__menu-button',
+                        '[attr.data-active]': 'active() ? "" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.tabindex]': 'disabled() ? -1 : null',
+                        '(click)': 'handleClick($event)',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
+class FrSidebarMenuAction {
+    showOnHover = input(false, { ...(ngDevMode ? { debugName: "showOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarMenuAction, isStandalone: true, selector: "[frSidebarMenuAction], frame-sidebar-menu-action", inputs: { showOnHover: { classPropertyName: "showOnHover", publicName: "showOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-show-on-hover": "showOnHover() ? \"\" : null" }, classAttribute: "frame-sidebar__menu-action" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuAction], frame-sidebar-menu-action',
+                    host: {
+                        class: 'frame-sidebar__menu-action',
+                        type: 'button',
+                        '[attr.data-show-on-hover]': 'showOnHover() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { showOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnHover", required: false }] }] } });
+class FrSidebarMenuBadge {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuBadge, isStandalone: true, selector: "[frSidebarMenuBadge], frame-sidebar-menu-badge", host: { classAttribute: "frame-sidebar__menu-badge" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuBadge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuBadge], frame-sidebar-menu-badge',
+                    host: {
+                        class: 'frame-sidebar__menu-badge',
+                    },
+                }]
+        }] });
+class FrSidebarMenuSub {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuSub, isStandalone: true, selector: "[frSidebarMenuSub], frame-sidebar-menu-sub", host: { attributes: { "role": "list" }, classAttribute: "frame-sidebar__menu-sub" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSub, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuSub], frame-sidebar-menu-sub',
+                    host: {
+                        class: 'frame-sidebar__menu-sub',
+                        role: 'list',
+                    },
+                }]
+        }] });
+class FrSidebarMenuSubItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSubItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuSubItem, isStandalone: true, selector: "[frSidebarMenuSubItem], frame-sidebar-menu-sub-item", host: { attributes: { "role": "listitem" }, classAttribute: "frame-sidebar__menu-sub-item" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSubItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuSubItem], frame-sidebar-menu-sub-item',
+                    host: {
+                        class: 'frame-sidebar__menu-sub-item',
+                        role: 'listitem',
+                    },
+                }]
+        }] });
+class FrSidebarMenuSubButton {
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    handleClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSubButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarMenuSubButton, isStandalone: true, selector: "[frSidebarMenuSubButton], a[frSidebarMenuSubButton], button[frSidebarMenuSubButton]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.data-active": "active() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" }, classAttribute: "frame-sidebar__menu-sub-button" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSubButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuSubButton], a[frSidebarMenuSubButton], button[frSidebarMenuSubButton]',
+                    host: {
+                        class: 'frame-sidebar__menu-sub-button',
+                        '[attr.data-active]': 'active() ? "" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '(click)': 'handleClick($event)',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+class FrSidebarMenuSkeleton {
+    showIcon = input(false, { ...(ngDevMode ? { debugName: "showIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    width = input('72%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarMenuSkeleton, isStandalone: true, selector: "[frSidebarMenuSkeleton], frame-sidebar-menu-skeleton", inputs: { showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-show-icon": "showIcon() ? \"\" : null", "style.--frame-sidebar-skeleton-width": "width()" }, classAttribute: "frame-sidebar__menu-skeleton" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSkeleton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frSidebarMenuSkeleton], frame-sidebar-menu-skeleton',
+                    host: {
+                        class: 'frame-sidebar__menu-skeleton',
+                        '[attr.data-show-icon]': 'showIcon() ? "" : null',
+                        '[style.--frame-sidebar-skeleton-width]': 'width()',
+                    },
+                }]
+        }], propDecorators: { showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+class FrSidebarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarModule, imports: [FrSidebar,
+            FrSidebarContent,
+            FrSidebarFooter,
+            FrSidebarGroup,
+            FrSidebarGroupAction,
+            FrSidebarGroupContent,
+            FrSidebarGroupLabel,
+            FrSidebarHeader,
+            FrSidebarInset,
+            FrSidebarMenu,
+            FrSidebarMenuAction,
+            FrSidebarMenuBadge,
+            FrSidebarMenuButton,
+            FrSidebarMenuItem,
+            FrSidebarMenuSkeleton,
+            FrSidebarMenuSub,
+            FrSidebarMenuSubButton,
+            FrSidebarMenuSubItem,
+            FrSidebarProvider,
+            FrSidebarRail,
+            FrSidebarTrigger], exports: [FrSidebar,
+            FrSidebarContent,
+            FrSidebarFooter,
+            FrSidebarGroup,
+            FrSidebarGroupAction,
+            FrSidebarGroupContent,
+            FrSidebarGroupLabel,
+            FrSidebarHeader,
+            FrSidebarInset,
+            FrSidebarMenu,
+            FrSidebarMenuAction,
+            FrSidebarMenuBadge,
+            FrSidebarMenuButton,
+            FrSidebarMenuItem,
+            FrSidebarMenuSkeleton,
+            FrSidebarMenuSub,
+            FrSidebarMenuSubButton,
+            FrSidebarMenuSubItem,
+            FrSidebarProvider,
+            FrSidebarRail,
+            FrSidebarTrigger] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FrSidebar,
+                        FrSidebarContent,
+                        FrSidebarFooter,
+                        FrSidebarGroup,
+                        FrSidebarGroupAction,
+                        FrSidebarGroupContent,
+                        FrSidebarGroupLabel,
+                        FrSidebarHeader,
+                        FrSidebarInset,
+                        FrSidebarMenu,
+                        FrSidebarMenuAction,
+                        FrSidebarMenuBadge,
+                        FrSidebarMenuButton,
+                        FrSidebarMenuItem,
+                        FrSidebarMenuSkeleton,
+                        FrSidebarMenuSub,
+                        FrSidebarMenuSubButton,
+                        FrSidebarMenuSubItem,
+                        FrSidebarProvider,
+                        FrSidebarRail,
+                        FrSidebarTrigger,
+                    ],
+                    exports: [
+                        FrSidebar,
+                        FrSidebarContent,
+                        FrSidebarFooter,
+                        FrSidebarGroup,
+                        FrSidebarGroupAction,
+                        FrSidebarGroupContent,
+                        FrSidebarGroupLabel,
+                        FrSidebarHeader,
+                        FrSidebarInset,
+                        FrSidebarMenu,
+                        FrSidebarMenuAction,
+                        FrSidebarMenuBadge,
+                        FrSidebarMenuButton,
+                        FrSidebarMenuItem,
+                        FrSidebarMenuSkeleton,
+                        FrSidebarMenuSub,
+                        FrSidebarMenuSubButton,
+                        FrSidebarMenuSubItem,
+                        FrSidebarProvider,
+                        FrSidebarRail,
+                        FrSidebarTrigger,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FR_SIDEBAR_COLLAPSIBLES, FR_SIDEBAR_MENU_BUTTON_SIZES, FR_SIDEBAR_MENU_BUTTON_VARIANTS, FR_SIDEBAR_PROVIDER, FR_SIDEBAR_SIDES, FR_SIDEBAR_VARIANTS, FrSidebar, FrSidebarContent, FrSidebarFooter, FrSidebarGroup, FrSidebarGroupAction, FrSidebarGroupContent, FrSidebarGroupLabel, FrSidebarHeader, FrSidebarInset, FrSidebarMenu, FrSidebarMenuAction, FrSidebarMenuBadge, FrSidebarMenuButton, FrSidebarMenuItem, FrSidebarMenuSkeleton, FrSidebarMenuSub, FrSidebarMenuSubButton, FrSidebarMenuSubItem, FrSidebarModule, FrSidebarProvider, FrSidebarRail, FrSidebarTrigger };
+//# sourceMappingURL=frame-ui-ng-components-sidebar.mjs.map