import * as i0 from '@angular/core';
import { input, booleanAttribute, Component } from '@angular/core';
import { Icon } from '@masterteam/icons';
import { RouterLinkActive, RouterLink } from '@angular/router';
import { Tooltip } from '@masterteam/components/tooltip';

class Sidebar {
    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
    bgColor = input(...(ngDevMode ? [undefined, { debugName: "bgColor" }] : []));
    bgImage = input(...(ngDevMode ? [undefined, { debugName: "bgImage" }] : []));
    bgRepeat = input(false, { ...(ngDevMode ? { debugName: "bgRepeat" } : {}), transform: booleanAttribute });
    iconsColor = input('var(--p-text-color)', ...(ngDevMode ? [{ debugName: "iconsColor" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Sidebar, isStandalone: true, selector: "mt-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, iconsColor: { classPropertyName: "iconsColor", publicName: "iconsColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"flex flex-col bg-surface-200 dark:bg-surface-800 h-[calc(100vh-var(--header-height))] overflow-clip w-16 border-e-1 border-surface-300 rounded-ss-2xl\"\r\n>\r\n  <div\r\n    class=\"h-full flex flex-col gap-3 px-2 py-8\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    @for (item of items(); track item.id) {\r\n      <a\r\n        [routerLink]=\"item.routerLink\"\r\n        routerLinkActive=\"bg-surface-0 dark:bg-surface-950\"\r\n        #rla=\"routerLinkActive\"\r\n        class=\"flex items-center justify-center size-[47px] dark:hover:bg-surface-900 hover:bg-surface-100 transition-colors rounded-xl\"\r\n        mtTooltip=\"{{ item.title }}\"\r\n        [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n      >\r\n        <mt-icon [icon]=\"item.icon\" />\r\n      </a>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Sidebar, decorators: [{
            type: Component,
            args: [{ selector: 'mt-sidebar', standalone: true, imports: [RouterLinkActive, RouterLink, Icon, Tooltip], template: "<div\r\n  class=\"flex flex-col bg-surface-200 dark:bg-surface-800 h-[calc(100vh-var(--header-height))] overflow-clip w-16 border-e-1 border-surface-300 rounded-ss-2xl\"\r\n>\r\n  <div\r\n    class=\"h-full flex flex-col gap-3 px-2 py-8\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    @for (item of items(); track item.id) {\r\n      <a\r\n        [routerLink]=\"item.routerLink\"\r\n        routerLinkActive=\"bg-surface-0 dark:bg-surface-950\"\r\n        #rla=\"routerLinkActive\"\r\n        class=\"flex items-center justify-center size-[47px] dark:hover:bg-surface-900 hover:bg-surface-100 transition-colors rounded-xl\"\r\n        mtTooltip=\"{{ item.title }}\"\r\n        [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n      >\r\n        <mt-icon [icon]=\"item.icon\" />\r\n      </a>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], bgImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgImage", required: false }] }], bgRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgRepeat", required: false }] }], iconsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsColor", required: false }] }] } });

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

export { Sidebar };
//# sourceMappingURL=masterteam-components-sidebar.mjs.map
