import * as i0 from '@angular/core';
import { inject, ElementRef, Renderer2, input, booleanAttribute, effect, Component } from '@angular/core';
import * as i1 from '@ngstarter-ui/components/core';
import { Ripple } from '@ngstarter-ui/components/core';

class CommandBar {
    _elementRef = inject(ElementRef);
    _renderer = inject(Renderer2);
    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
    constructor() {
        effect(() => {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-command-bar-position', this.position());
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: CommandBar, isStandalone: true, selector: "ngs-command-bar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-open": "open()" }, classAttribute: "ngs-command-bar" }, exportAs: ["ngsCommandBar"], ngImport: i0, template: "<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n", styles: [":host{--ngs-command-bar-height: calc(var(--spacing, .25rem) * 12);--ngs-command-bar-padding: 0 calc(var(--spacing, .25rem) * 1);--ngs-command-bar-margin: calc(var(--spacing, .25rem) * 8) 0;--ngs-command-bar-zindex: 50;--ngs-command-bar-bg: var(--ngs-color-neutral-950);--ngs-command-bar-color: var(--ngs-color-neutral-200);--ngs-command-bar-border: 1px solid var(--ngs-color-neutral-700);--ngs-command-bar-shadow: var(--ngs-shadow-lg);--ngs-command-bar-border-radius: calc(infinity * 1px);--ngs-command-bar-command-height: calc(var(--spacing, .25rem) * 10);--ngs-command-bar-command-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-command-bar-command-font-size: var(--ngs-font-size-sm);--ngs-command-bar-command-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-hover-color: var(--ngs-color-neutral-100);--ngs-command-bar-command-hover-bg: var(--ngs-color-neutral-800);--ngs-command-bar-value-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-gap: calc(var(--spacing, .25rem) * 3);--ngs-command-bar-content-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-command-bar-font-size: var(--ngs-font-size-sm);--ngs-command-bar-divider-width: 1px;--ngs-command-bar-divider-height: calc(var(--spacing, .25rem) * 6);--ngs-command-bar-divider-bg: var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-bg: var(--ngs-color-neutral-700);--ngs-command-bar-command-shortcut-border-radius: var(--ngs-radius-lg);--ngs-command-bar-command-shortcut-font-size: var(--ngs-font-size-xs);--ngs-command-bar-command-shortcut-color: var(--ngs-color-neutral-300);--ngs-command-bar-command-shortcut-padding: 0 5px;--ngs-command-bar-command-shortcut-border: 1px solid var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-size: calc(var(--spacing, .25rem) * 5);left:50%;translate:-50% 0;height:var(--ngs-command-bar-height);border:var(--ngs-command-bar-border);box-shadow:var(--ngs-command-bar-shadow);border-radius:var(--ngs-command-bar-border-radius);z-index:-1;font-size:var(--ngs-command-bar-font-size);color:var(--ngs-command-bar-color);padding:var(--ngs-command-bar-padding);overflow:hidden;opacity:0;display:flex;align-items:center;width:min-content;position:fixed;background:var(--ngs-command-bar-bg);margin:var(--ngs-command-bar-margin);gap:calc(var(--spacing, .25rem) * 1)}:host .content:empty{display:none}:host .content{white-space:nowrap;padding:var(--ngs-command-bar-content-padding)}:host.is-open{opacity:1;z-index:var(--ngs-command-bar-zindex)}:host[ngs-command-bar-position=top]{top:0}:host[ngs-command-bar-position=top].is-open{animation:.3s ngs-command-bar-animation-from-top}:host[ngs-command-bar-position=bottom]{bottom:0}:host[ngs-command-bar-position=bottom].is-open{animation:.3s ngs-command-bar-animation-from-bottom}@keyframes ngs-command-bar-animation-from-top{0%{transform:translateY(-150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes ngs-command-bar-animation-from-bottom{0%{transform:translateY(150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}:host-context(html.dark){--ngs-command-bar-bg: var(--ngs-color-primary-200);--ngs-command-bar-color: var(--ngs-color-neutral-950);--ngs-command-bar-command-color: var(--ngs-color-neutral-950)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBar, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-command-bar', exportAs: 'ngsCommandBar', standalone: true, host: {
                        'class': 'ngs-command-bar',
                        '[class.is-open]': 'open()',
                    }, template: "<div class=\"content\"><ng-content/></div>\n<ng-content select=\"ngs-command-bar-command,[ngs-command-bar-command],ngs-command-bar-divider\" />\n", styles: [":host{--ngs-command-bar-height: calc(var(--spacing, .25rem) * 12);--ngs-command-bar-padding: 0 calc(var(--spacing, .25rem) * 1);--ngs-command-bar-margin: calc(var(--spacing, .25rem) * 8) 0;--ngs-command-bar-zindex: 50;--ngs-command-bar-bg: var(--ngs-color-neutral-950);--ngs-command-bar-color: var(--ngs-color-neutral-200);--ngs-command-bar-border: 1px solid var(--ngs-color-neutral-700);--ngs-command-bar-shadow: var(--ngs-shadow-lg);--ngs-command-bar-border-radius: calc(infinity * 1px);--ngs-command-bar-command-height: calc(var(--spacing, .25rem) * 10);--ngs-command-bar-command-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-command-bar-command-font-size: var(--ngs-font-size-sm);--ngs-command-bar-command-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-hover-color: var(--ngs-color-neutral-100);--ngs-command-bar-command-hover-bg: var(--ngs-color-neutral-800);--ngs-command-bar-value-color: var(--ngs-color-neutral-200);--ngs-command-bar-command-gap: calc(var(--spacing, .25rem) * 3);--ngs-command-bar-content-padding: 0 calc(var(--spacing, .25rem) * 4);--ngs-command-bar-font-size: var(--ngs-font-size-sm);--ngs-command-bar-divider-width: 1px;--ngs-command-bar-divider-height: calc(var(--spacing, .25rem) * 6);--ngs-command-bar-divider-bg: var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-bg: var(--ngs-color-neutral-700);--ngs-command-bar-command-shortcut-border-radius: var(--ngs-radius-lg);--ngs-command-bar-command-shortcut-font-size: var(--ngs-font-size-xs);--ngs-command-bar-command-shortcut-color: var(--ngs-color-neutral-300);--ngs-command-bar-command-shortcut-padding: 0 5px;--ngs-command-bar-command-shortcut-border: 1px solid var(--ngs-color-neutral-600);--ngs-command-bar-command-shortcut-size: calc(var(--spacing, .25rem) * 5);left:50%;translate:-50% 0;height:var(--ngs-command-bar-height);border:var(--ngs-command-bar-border);box-shadow:var(--ngs-command-bar-shadow);border-radius:var(--ngs-command-bar-border-radius);z-index:-1;font-size:var(--ngs-command-bar-font-size);color:var(--ngs-command-bar-color);padding:var(--ngs-command-bar-padding);overflow:hidden;opacity:0;display:flex;align-items:center;width:min-content;position:fixed;background:var(--ngs-command-bar-bg);margin:var(--ngs-command-bar-margin);gap:calc(var(--spacing, .25rem) * 1)}:host .content:empty{display:none}:host .content{white-space:nowrap;padding:var(--ngs-command-bar-content-padding)}:host.is-open{opacity:1;z-index:var(--ngs-command-bar-zindex)}:host[ngs-command-bar-position=top]{top:0}:host[ngs-command-bar-position=top].is-open{animation:.3s ngs-command-bar-animation-from-top}:host[ngs-command-bar-position=bottom]{bottom:0}:host[ngs-command-bar-position=bottom].is-open{animation:.3s ngs-command-bar-animation-from-bottom}@keyframes ngs-command-bar-animation-from-top{0%{transform:translateY(-150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes ngs-command-bar-animation-from-bottom{0%{transform:translateY(150%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}:host-context(html.dark){--ngs-command-bar-bg: var(--ngs-color-primary-200);--ngs-command-bar-color: var(--ngs-color-neutral-950);--ngs-command-bar-command-color: var(--ngs-color-neutral-950)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });

class CommandBarDivider {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CommandBarDivider, isStandalone: true, selector: "ngs-command-bar-divider", host: { classAttribute: "ngs-command-bar-divider" }, exportAs: ["ngsCommandBarDivider"], ngImport: i0, template: "\n", styles: [":host{display:block;width:var(--ngs-command-bar-divider-width);height:var(--ngs-command-bar-divider-height);background:var(--ngs-command-bar-divider-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarDivider, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-command-bar-divider', exportAs: 'ngsCommandBarDivider', host: {
                        'class': 'ngs-command-bar-divider'
                    }, template: "\n", styles: [":host{display:block;width:var(--ngs-command-bar-divider-width);height:var(--ngs-command-bar-divider-height);background:var(--ngs-command-bar-divider-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class CommandBarCommand {
    shortcut = input('', ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CommandBarCommand, isStandalone: true, selector: "ngs-command-bar-command,[ngs-command-bar-command]", inputs: { shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-command-bar-command" }, exportAs: ["ngsCommandBarCommand"], hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: "<ng-content/>\n@if (shortcut()) {\n  <div class=\"shortcut\">{{ shortcut() }}</div>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;padding:var(--ngs-command-bar-command-padding);font-size:var(--ngs-command-bar-command-font-size);cursor:pointer;gap:var(--ngs-command-bar-command-gap);color:var(--ngs-command-bar-command-color);-webkit-user-select:none;user-select:none;border-radius:calc(infinity * 1px);height:var(--ngs-command-bar-command-height)}:host:hover{color:var(--ngs-command-bar-command-hover-color);background:var(--ngs-command-bar-command-hover-bg)}:host .shortcut{text-transform:uppercase;display:flex;align-items:center;justify-content:center;background:var(--ngs-command-bar-command-shortcut-bg);border-radius:var(--ngs-command-bar-command-shortcut-border-radius);font-size:var(--ngs-command-bar-command-shortcut-font-size);color:var(--ngs-command-bar-command-shortcut-color);padding:var(--ngs-command-bar-command-shortcut-padding);border:var(--ngs-command-bar-command-shortcut-border);flex:none;width:var(--ngs-command-bar-command-shortcut-size);height:var(--ngs-command-bar-command-shortcut-size)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CommandBarCommand, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-command-bar-command,[ngs-command-bar-command]', exportAs: 'ngsCommandBarCommand', standalone: true, hostDirectives: [
                        Ripple,
                    ], host: {
                        'class': 'ngs-command-bar-command'
                    }, template: "<ng-content/>\n@if (shortcut()) {\n  <div class=\"shortcut\">{{ shortcut() }}</div>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;padding:var(--ngs-command-bar-command-padding);font-size:var(--ngs-command-bar-command-font-size);cursor:pointer;gap:var(--ngs-command-bar-command-gap);color:var(--ngs-command-bar-command-color);-webkit-user-select:none;user-select:none;border-radius:calc(infinity * 1px);height:var(--ngs-command-bar-command-height)}:host:hover{color:var(--ngs-command-bar-command-hover-color);background:var(--ngs-command-bar-command-hover-bg)}:host .shortcut{text-transform:uppercase;display:flex;align-items:center;justify-content:center;background:var(--ngs-command-bar-command-shortcut-bg);border-radius:var(--ngs-command-bar-command-shortcut-border-radius);font-size:var(--ngs-command-bar-command-shortcut-font-size);color:var(--ngs-command-bar-command-shortcut-color);padding:var(--ngs-command-bar-command-shortcut-padding);border:var(--ngs-command-bar-command-shortcut-border);flex:none;width:var(--ngs-command-bar-command-shortcut-size);height:var(--ngs-command-bar-command-shortcut-size)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { CommandBar, CommandBarCommand, CommandBarDivider };
//# sourceMappingURL=ngstarter-ui-components-command-bar.mjs.map
