@simplysm/angular 14.0.30 → 14.0.33

package/dist/layout/topbar/sd-topbar-container.js

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class SdTopbarContainer {
+    static ɵfac = function SdTopbarContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTopbarContainer)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTopbarContainer, selectors: [["sd-topbar-container"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdTopbarContainer_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, styles: ["sd-topbar-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarContainer, [{
+        type: Component,
+        args: [{ selector: "sd-topbar-container", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    <ng-content />
+  `, styles: ["sd-topbar-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarContainer, { className: "SdTopbarContainer", filePath: "packages/angular/src/layout/topbar/sd-topbar-container.ts", lineNumber: 22, forbidOrphanRendering: true }); })();

package/dist/layout/topbar/sd-topbar-menu.d.ts

@@ -0,0 +1,23 @@
+import { type SdMenu } from "../../core/routing/menu-utils";
+import * as i0 from "@angular/core";
+export declare class SdTopbarMenu {
+    menus: import("@angular/core").InputSignal<SdMenu[]>;
+    getMenuIsSelectedFn: import("@angular/core").InputSignal<((menu: SdMenu) => boolean) | undefined>;
+    fullPageCode: import("@angular/core").Signal<string>;
+    private readonly _dropdowns;
+    getMenuRouterLinkOption(menu: SdMenu): {
+        link: string;
+        queryParams: Record<string, string> | undefined;
+    } | undefined;
+    getIsMenuSelected(menu: SdMenu): boolean;
+    onMenuClick(menu: SdMenu, dropdownIndex: number): void;
+    protected readonly itemTemplateType: {
+        menus: SdMenu[];
+        depth: number;
+        dropdownIndex: number;
+    };
+    protected readonly tablerCaretDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M6 10l6 6l6 -6h-12\"></path></svg>";
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTopbarMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdTopbarMenu, "sd-topbar-menu", never, { "menus": { "alias": "menus"; "required": false; "isSignal": true; }; "getMenuIsSelectedFn": { "alias": "getMenuIsSelectedFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-topbar-menu.d.ts.map

package/dist/layout/topbar/sd-topbar-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-topbar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/topbar/sd-topbar-menu.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAYvC,qBAkGa,YAAY;IACvB,KAAK,gDAAuB;IAC5B,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4B;IAEvD,uBAAuB,CACrB,IAAI,EAAE,MAAM,GACX;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAA;KAAE,GAAG,SAAS;IAIhF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,IAAI;IAUtD,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;IAEF,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;yCAlC1C,YAAY;2CAAZ,YAAY;CAmCxB"}

package/dist/layout/topbar/sd-topbar-menu.js

@@ -0,0 +1,245 @@
+import { ChangeDetectionStrategy, Component, input, viewChildren, ViewEncapsulation, } from "@angular/core";
+import { injectFullPageCodeSignal } from "../../core/routing/injectFullPageCodeSignal";
+import { getMenuRouterLinkOption as menuRouterLinkOption, getIsMenuSelected as menuIsSelected, } from "../../core/routing/menu-utils";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdTypedTemplate } from "../../core/template/sd-typed-template";
+import { SdRouterLink } from "../../core/routing/sd-router-link";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdList } from "../../controls/list/sd-list";
+import { SdListItem } from "../../controls/list/sd-list-item";
+import { SdButton } from "../../controls/button/sd-button";
+import { NgIcon } from "@ng-icons/core";
+import { tablerCaretDown } from "@ng-icons/tabler-icons";
+import * as i0 from "@angular/core";
+const _c0 = (a0, a1) => ({ menus: a0, depth: 0, dropdownIndex: a1 });
+const _c1 = a0 => [a0];
+const _c2 = (a0, a1, a2) => ({ menus: a0, depth: a1, dropdownIndex: a2 });
+const _forTrack0 = ($index, $item) => $item.codeChain.join(".");
+function SdTopbarMenu_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-icon", 3);
+} if (rf & 2) {
+    const menu_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("svg", menu_r1.icon);
+} }
+function SdTopbarMenu_For_1_Conditional_7_ng_template_0_Template(rf, ctx) { }
+function SdTopbarMenu_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdTopbarMenu_For_1_Conditional_7_ng_template_0_Template, 0, 0, "ng-template", 5);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    const menu_r1 = ctx_r1.$implicit;
+    const ɵ$index_1_r3 = ctx_r1.$index;
+    i0.ɵɵnextContext();
+    const itemTpl_r4 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, menu_r1.children, ɵ$index_1_r3));
+} }
+function SdTopbarMenu_For_1_Conditional_8_ng_template_0_Template(rf, ctx) { }
+function SdTopbarMenu_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdTopbarMenu_For_1_Conditional_8_ng_template_0_Template, 0, 0, "ng-template", 5);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    const menu_r1 = ctx_r1.$implicit;
+    const ɵ$index_1_r3 = ctx_r1.$index;
+    i0.ɵɵnextContext();
+    const itemTpl_r4 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction2(4, _c0, i0.ɵɵpureFunction1(2, _c1, menu_r1), ɵ$index_1_r3));
+} }
+function SdTopbarMenu_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "sd-dropdown")(1, "sd-button", 2);
+    i0.ɵɵconditionalCreate(2, SdTopbarMenu_For_1_Conditional_2_Template, 1, 1, "ng-icon", 3);
+    i0.ɵɵtext(3);
+    i0.ɵɵelement(4, "ng-icon", 3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "sd-dropdown-popup")(6, "sd-list", 4);
+    i0.ɵɵconditionalCreate(7, SdTopbarMenu_For_1_Conditional_7_Template, 1, 5, null, 5)(8, SdTopbarMenu_For_1_Conditional_8_Template, 1, 7, null, 5);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const menu_r1 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("theme", "link-gray");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(menu_r1.icon ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", menu_r1.title, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r4.tablerCaretDown);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("inset", true);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(menu_r1.children ? 7 : 8);
+} }
+function SdTopbarMenu_ng_template_2_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-icon", 3);
+    i0.ɵɵtext(1, " \u00A0 ");
+} if (rf & 2) {
+    const menu_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("svg", menu_r7.icon);
+} }
+function SdTopbarMenu_ng_template_2_For_1_Conditional_3_ng_template_1_Template(rf, ctx) { }
+function SdTopbarMenu_ng_template_2_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "sd-list", 4);
+    i0.ɵɵtemplate(1, SdTopbarMenu_ng_template_2_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const menu_r7 = i0.ɵɵnextContext().$implicit;
+    const ctx_r8 = i0.ɵɵnextContext();
+    const depth_r10 = ctx_r8.depth;
+    const dropdownIndex_r8 = ctx_r8.dropdownIndex;
+    i0.ɵɵnextContext();
+    const itemTpl_r4 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("inset", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c2, menu_r7.children, depth_r10 + 1, dropdownIndex_r8));
+} }
+function SdTopbarMenu_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-list-item", 7);
+    i0.ɵɵlistener("click", function SdTopbarMenu_ng_template_2_For_1_Template_sd_list_item_click_0_listener() { const menu_r7 = i0.ɵɵrestoreView(_r6).$implicit; const dropdownIndex_r8 = i0.ɵɵnextContext().dropdownIndex; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onMenuClick(menu_r7, dropdownIndex_r8)); });
+    i0.ɵɵconditionalCreate(1, SdTopbarMenu_ng_template_2_For_1_Conditional_1_Template, 2, 1);
+    i0.ɵɵtext(2);
+    i0.ɵɵconditionalCreate(3, SdTopbarMenu_ng_template_2_For_1_Conditional_3_Template, 2, 7, "sd-list", 4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const menu_r7 = ctx.$implicit;
+    const depth_r10 = i0.ɵɵnextContext().depth;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("padding-left", depth_r10 > 0 ? (depth_r10 + 1) * 0.5 : undefined, "em")("padding-block", depth_r10 === 0 ? "var(--gap-default)" : undefined);
+    i0.ɵɵproperty("sdRouterLink", ctx_r4.getMenuRouterLinkOption(menu_r7))("selected", ctx_r4.getIsMenuSelected(menu_r7))("open", true);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(menu_r7.icon ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", menu_r7.title, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(menu_r7.children ? 3 : -1);
+} }
+function SdTopbarMenu_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SdTopbarMenu_ng_template_2_For_1_Template, 4, 10, "sd-list-item", 6, _forTrack0);
+} if (rf & 2) {
+    const currMenus_r11 = ctx.menus;
+    i0.ɵɵrepeater(currMenus_r11);
+} }
+export class SdTopbarMenu {
+    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    getMenuIsSelectedFn = input(...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
+    fullPageCode = injectFullPageCodeSignal();
+    _dropdowns = viewChildren(SdDropdown, ...(ngDevMode ? [{ debugName: "_dropdowns" }] : /* istanbul ignore next */ []));
+    getMenuRouterLinkOption(menu) {
+        return menuRouterLinkOption(menu);
+    }
+    getIsMenuSelected(menu) {
+        return menuIsSelected(menu, this.fullPageCode(), this.getMenuIsSelectedFn());
+    }
+    onMenuClick(menu, dropdownIndex) {
+        if (menu.url != null) {
+            window.open(menu.url, "_blank");
+        }
+        if (menu.children === undefined) {
+            this._dropdowns()[dropdownIndex].open.set(false);
+        }
+    }
+    itemTemplateType;
+    tablerCaretDown = tablerCaretDown;
+    static ɵfac = function SdTopbarMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTopbarMenu)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTopbarMenu, selectors: [["sd-topbar-menu"]], viewQuery: function SdTopbarMenu_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx._dropdowns, SdDropdown, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: [1, "flex-row", "gap-sm"], inputs: { menus: [1, "menus"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 4, vars: 1, consts: [["itemTpl", ""], [3, "typed"], [3, "theme"], [3, "svg"], [3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "padding-left", "padding-block", "sdRouterLink", "selected", "open"], [3, "click", "sdRouterLink", "selected", "open"]], template: function SdTopbarMenu_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵrepeaterCreate(0, SdTopbarMenu_For_1_Template, 9, 6, "sd-dropdown", null, _forTrack0);
+            i0.ɵɵtemplate(2, SdTopbarMenu_ng_template_2_Template, 2, 0, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            i0.ɵɵrepeater(ctx.menus());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("typed", ctx.itemTemplateType);
+        } }, dependencies: [NgTemplateOutlet,
+            SdTypedTemplate,
+            SdRouterLink,
+            SdDropdown,
+            SdDropdownPopup,
+            SdList,
+            SdListItem,
+            SdButton,
+            NgIcon], styles: ["sd-topbar-menu sd-dropdown-popup sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarMenu, [{
+        type: Component,
+        args: [{ selector: "sd-topbar-menu", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                    NgTemplateOutlet,
+                    SdTypedTemplate,
+                    SdRouterLink,
+                    SdDropdown,
+                    SdDropdownPopup,
+                    SdList,
+                    SdListItem,
+                    SdButton,
+                    NgIcon,
+                ], host: {
+                    "class": "flex-row gap-sm",
+                }, template: `
+    @for (menu of menus(); track menu.codeChain.join("."); let i = $index) {
+      <sd-dropdown>
+        <sd-button [theme]="'link-gray'">
+          @if (menu.icon) {
+            <ng-icon [svg]="menu.icon" />
+          }
+          {{ menu.title }}
+          <ng-icon [svg]="tablerCaretDown" />
+        </sd-button>
+        <sd-dropdown-popup>
+          <sd-list [inset]="true">
+            @if (menu.children) {
+              <ng-template
+                [ngTemplateOutlet]="itemTpl"
+                [ngTemplateOutletContext]="{ menus: menu.children, depth: 0, dropdownIndex: i }"
+              ></ng-template>
+            } @else {
+              <ng-template
+                [ngTemplateOutlet]="itemTpl"
+                [ngTemplateOutletContext]="{ menus: [menu], depth: 0, dropdownIndex: i }"
+              ></ng-template>
+            }
+          </sd-list>
+        </sd-dropdown-popup>
+      </sd-dropdown>
+    }
+
+    <ng-template
+      #itemTpl
+      [typed]="itemTemplateType"
+      let-currMenus="menus"
+      let-depth="depth"
+      let-dropdownIndex="dropdownIndex"
+    >
+      @for (menu of currMenus; track menu.codeChain.join(".")) {
+        <sd-list-item
+          [style.padding-left.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
+          [style.padding-block]="depth === 0 ? 'var(--gap-default)' : undefined"
+          [sdRouterLink]="getMenuRouterLinkOption(menu)"
+          (click)="onMenuClick(menu, dropdownIndex)"
+          [selected]="getIsMenuSelected(menu)"
+          [open]="true"
+        >
+          @if (menu.icon) {
+            <ng-icon [svg]="menu.icon" />
+            &nbsp;
+          }
+          {{ menu.title }}
+          @if (menu.children) {
+            <sd-list [inset]="true">
+              <ng-template
+                [ngTemplateOutlet]="itemTpl"
+                [ngTemplateOutletContext]="{
+                  menus: menu.children,
+                  depth: depth + 1,
+                  dropdownIndex: dropdownIndex,
+                }"
+              ></ng-template>
+            </sd-list>
+          }
+        </sd-list-item>
+      }
+    </ng-template>
+  `, styles: ["sd-topbar-menu sd-dropdown-popup sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}"] }]
+    }], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], getMenuIsSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getMenuIsSelectedFn", required: false }] }], _dropdowns: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarMenu, { className: "SdTopbarMenu", filePath: "packages/angular/src/layout/topbar/sd-topbar-menu.ts", lineNumber: 123, forbidOrphanRendering: true }); })();

package/dist/layout/topbar/sd-topbar-user.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-topbar-user.d.ts","sourceRoot":"","sources":["../../../src/layout/topbar/sd-topbar-user.ts"],"names":[],"mappings":";AAaA,qBA8Ba,YAAY;IACvB,KAAK,0DAAwC;IAE7C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IAEnD,WAAW,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;yCAL9B,YAAY;2CAAZ,YAAY;CASxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/dist/layout/topbar/sd-topbar-user.js

@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, input, viewChild, ViewEncapsulation, } from "@angular/core";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdList } from "../../controls/list/sd-list";
+import { SdListItem } from "../../controls/list/sd-list-item";
+import { SdButton } from "../../controls/button/sd-button";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+const _forTrack0 = ($index, $item) => $item.title;
+function SdTopbarUser_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-list-item", 1);
+    i0.ɵɵlistener("click", function SdTopbarUser_For_6_Template_sd_list_item_click_0_listener() { const menu_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMenuClick(menu_r2)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const menu_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", menu_r2.title, " ");
+} }
+export class SdTopbarUser {
+    menus = input.required(...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    _dropdown = viewChild(SdDropdown, ...(ngDevMode ? [{ debugName: "_dropdown" }] : /* istanbul ignore next */ []));
+    onMenuClick(menu) {
+        menu.onClick();
+        this._dropdown()?.open.set(false);
+    }
+    static ɵfac = function SdTopbarUser_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTopbarUser)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTopbarUser, selectors: [["sd-topbar-user"]], viewQuery: function SdTopbarUser_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx._dropdown, SdDropdown, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { menus: [1, "menus"] }, ngContentSelectors: _c0, decls: 7, vars: 2, consts: [[3, "inline", "theme"], [3, "click"]], template: function SdTopbarUser_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "sd-dropdown")(1, "sd-button", 0);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "sd-dropdown-popup")(4, "sd-list");
+            i0.ɵɵrepeaterCreate(5, SdTopbarUser_For_6_Template, 2, 1, "sd-list-item", null, _forTrack0);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("inline", true)("theme", "link-gray");
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.menus());
+        } }, dependencies: [SdDropdown,
+            SdDropdownPopup,
+            SdList,
+            SdListItem,
+            SdButton], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarUser, [{
+        type: Component,
+        args: [{ selector: "sd-topbar-user", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                    SdDropdown,
+                    SdDropdownPopup,
+                    SdList,
+                    SdListItem,
+                    SdButton,
+                ], template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-content />
+      </sd-button>
+      <sd-dropdown-popup>
+        <sd-list>
+          @for (menu of menus(); track menu.title) {
+            <sd-list-item (click)="onMenuClick(menu)">
+              {{ menu.title }}
+            </sd-list-item>
+          }
+        </sd-list>
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  ` }]
+    }], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], _dropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbarUser, { className: "SdTopbarUser", filePath: "packages/angular/src/layout/topbar/sd-topbar-user.ts", lineNumber: 44, forbidOrphanRendering: true }); })();

package/dist/layout/topbar/sd-topbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-topbar.d.ts","sourceRoot":"","sources":["../../../src/layout/topbar/sd-topbar.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;;AAKrE,qBA8Da,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAEvC;IAEH,gBAAgB,sEAA+B;IAE/C,UAAU,0CAER;IAEF,mBAAmB,IAAI,IAAI;IAO3B,SAAS,CAAC,QAAQ,CAAC,WAAW,oXAAe;yCAlBlC,QAAQ;2CAAR,QAAQ;CAmBpB"}

package/dist/layout/topbar/sd-topbar.js

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from "@angular/core";
+import { SdSidebarContainer } from "../sidebar/sd-sidebar-container";
+import { SdButton } from "../../controls/button/sd-button";
+import { NgIcon } from "@ng-icons/core";
+import { tablerMenu2 } from "@ng-icons/tabler-icons";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function SdTopbar_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-button", 1);
+    i0.ɵɵlistener("click", function SdTopbar_Conditional_0_Template_sd_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onToggleButtonClick()); });
+    i0.ɵɵelement(1, "ng-icon", 2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("theme", "link-primary")("buttonClass", "p-sm-default");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r1.tablerMenu2);
+} }
+export class SdTopbar {
+    _injectedSidebarContainer = inject(SdSidebarContainer, {
+        optional: true,
+    });
+    sidebarContainer = input(...(ngDevMode ? [undefined, { debugName: "sidebarContainer" }] : /* istanbul ignore next */ []));
+    hasSidebar = computed(() => this.sidebarContainer() != null || this._injectedSidebarContainer != null, ...(ngDevMode ? [{ debugName: "hasSidebar" }] : /* istanbul ignore next */ []));
+    onToggleButtonClick() {
+        const sc = this.sidebarContainer() ?? this._injectedSidebarContainer;
+        if (sc != null) {
+            sc.toggle.update((v) => !v);
+        }
+    }
+    tablerMenu2 = tablerMenu2;
+    static ɵfac = function SdTopbar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTopbar)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTopbar, selectors: [["sd-topbar"]], hostAttrs: [1, "flex-row", "gap-default", "cross-align-center", "main-align-start"], inputs: { sidebarContainer: [1, "sidebarContainer"] }, ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[3, "theme", "buttonClass"], [3, "click", "theme", "buttonClass"], [3, "svg"]], template: function SdTopbar_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, SdTopbar_Conditional_0_Template, 2, 3, "sd-button", 0);
+            i0.ɵɵprojection(1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.hasSidebar() ? 0 : -1);
+        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--control-color);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-sm);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbar, [{
+        type: Component,
+        args: [{ selector: "sd-topbar", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdButton, NgIcon], host: {
+                    "class": "flex-row gap-default cross-align-center main-align-start"
+                }, template: `
+    @if (hasSidebar()) {
+      <sd-button
+        [theme]="'link-primary'"
+        [buttonClass]="'p-sm-default'"
+        (click)="onToggleButtonClick()"
+      >
+        <ng-icon [svg]="tablerMenu2" />
+      </sd-button>
+    }
+    
+    <ng-content />
+  `, styles: ["sd-topbar {\n  height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--control-color);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-sm);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"] }]
+    }], null, { sidebarContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainer", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 76, forbidOrphanRendering: true }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.30",
+  "version": "14.0.33",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -49,10 +49,10 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.30",
-    "@simplysm/core-common": "14.0.30",
-    "@simplysm/service-client": "14.0.30",
-    "@simplysm/service-common": "14.0.30"
+    "@simplysm/core-browser": "14.0.33",
+    "@simplysm/service-common": "14.0.33",
+    "@simplysm/core-common": "14.0.33",
+    "@simplysm/service-client": "14.0.33"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.8",

package/src/controls/button/sd-additional-button.ts

@@ -0,0 +1,100 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-additional-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  template: `
+    <div class="_content flex-fill">
+      <ng-content />
+    </div>
+    <div class="_button">
+      <ng-content select="sd-anchor" />
+      <ng-content select="sd-button" />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/mixins";
+
+      sd-additional-button {
+        border: 1px solid var(--trans-light);
+        border-radius: var(--border-radius-default);
+        overflow: hidden;
+
+        > ._content {
+          padding: var(--gap-sm) var(--gap-default);
+        }
+
+        > ._button {
+          display: flex;
+          flex-wrap: nowrap;
+          @include mixins.flex-direction(row);
+
+          > sd-anchor {
+            padding: var(--gap-sm) !important;
+          }
+
+          > sd-button > button {
+            border-left: 1px solid var(--trans-lighter) !important;
+            padding: var(--gap-sm) !important;
+            height: 100%;
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          border-radius: 0;
+          border: none;
+        }
+
+        &[data-sd-size="sm"] {
+          > ._content {
+            padding: var(--gap-xs) var(--gap-default);
+          }
+
+          > ._button {
+            > sd-anchor {
+              padding: var(--gap-xs) var(--gap-sm) !important;
+            }
+
+            > sd-button > button {
+              padding: var(--gap-xs) var(--gap-sm) !important;
+            }
+          }
+        }
+
+        &[data-sd-size="lg"] {
+          > ._content {
+            padding: var(--gap-default) var(--gap-xl);
+          }
+
+          > ._button {
+            > sd-anchor {
+              padding: var(--gap-default) !important;
+            }
+
+            > sd-button > button {
+              padding: var(--gap-default) !important;
+            }
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "class": "flex-row gap-sm",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-inset]": "inset()",
+  },
+})
+export class SdAdditionalButton {
+  size = input<"sm" | "lg">();
+  inset = input(false, { transform: booleanAttribute });
+}

package/src/controls/button/sd-anchor.ts

@@ -0,0 +1,67 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-anchor",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  template: `
+    <ng-content />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+
+      sd-anchor {
+        display: inline-block;
+        cursor: pointer;
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            color: var(--theme-#{$key}-default);
+
+            &:hover {
+              color: var(--theme-#{$key}-darker);
+              text-decoration: underline;
+            }
+
+            &:active {
+              color: var(--theme-#{$key}-default);
+            }
+
+            @media all and (pointer: coarse) {
+              &:hover {
+                color: var(--theme-#{$key}-default);
+                text-decoration: none;
+              }
+            }
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.tabindex]": "disabled() ? undefined : 0",
+  },
+})
+export class SdAnchor {
+  disabled = input(false, { transform: booleanAttribute });
+  theme = input<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >("primary");
+}