@simplysm/angular 14.0.90 → 14.0.92

package/dist/data/shared-data/sd-shared-data-select-list.js

@@ -18,26 +18,26 @@ const _c1 = ["filterTpl"];
 const _c2 = ["undefinedTpl"];
 const _c3 = (a0, a1, a2) => ({ $implicit: a0, item: a1, index: a2, depth: 0 });
 const _forTrack0 = ($index, $item) => $item.__valueKey;
-function SdSharedDataSelectList_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 0);
+function SdSharedDataSelectList_Conditional_1_Conditional_2_ng_template_0_Template(rf, ctx) { }
+function SdSharedDataSelectList_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdSharedDataSelectList_Conditional_1_Conditional_2_ng_template_0_Template, 0, 0, "ng-template", 8);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.headerTplRef());
+} }
+function SdSharedDataSelectList_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.header(), " ");
 } }
-function SdSharedDataSelectList_Conditional_2_Conditional_2_ng_template_0_Template(rf, ctx) { }
-function SdSharedDataSelectList_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SdSharedDataSelectList_Conditional_2_Conditional_2_ng_template_0_Template, 0, 0, "ng-template", 9);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.headerTplRef());
-} }
-function SdSharedDataSelectList_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SdSharedDataSelectList_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-anchor", 10);
-    i0.ɵɵlistener("click", function SdSharedDataSelectList_Conditional_2_Conditional_3_Template_sd_anchor_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onModalButtonClick()); });
+    i0.ɵɵlistener("click", function SdSharedDataSelectList_Conditional_1_Conditional_4_Template_sd_anchor_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onModalButtonClick()); });
     i0.ɵɵelement(1, "ng-icon", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -45,66 +45,69 @@ function SdSharedDataSelectList_Conditional_2_Conditional_3_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("svg", ctx_r0.tablerExternalLink);
 } }
-function SdSharedDataSelectList_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 4);
-    i0.ɵɵconditionalCreate(2, SdSharedDataSelectList_Conditional_2_Conditional_2_Template, 1, 1, null, 9);
+function SdSharedDataSelectList_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 3);
+    i0.ɵɵconditionalCreate(2, SdSharedDataSelectList_Conditional_1_Conditional_2_Template, 1, 1, null, 8);
+    i0.ɵɵconditionalCreate(3, SdSharedDataSelectList_Conditional_1_Conditional_3_Template, 2, 1, "div", 9);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, SdSharedDataSelectList_Conditional_2_Conditional_3_Template, 2, 1, "sd-anchor");
+    i0.ɵɵconditionalCreate(4, SdSharedDataSelectList_Conditional_1_Conditional_4_Template, 2, 1, "sd-anchor");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.headerTplRef() ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.modal() ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.header() ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.modal() ? 4 : -1);
 } }
-function SdSharedDataSelectList_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SdSharedDataSelectList_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-textfield", 12);
-    i0.ɵɵtwoWayListener("valueChange", function SdSharedDataSelectList_Conditional_3_Template_sd_textfield_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.searchText, $event) || (ctx_r0.searchText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("valueChange", function SdSharedDataSelectList_Conditional_2_Template_sd_textfield_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.searchText, $event) || (ctx_r0.searchText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("type", "text")("placeholder", "\uAC80\uC0C9\uC5B4");
     i0.ɵɵtwoWayProperty("value", ctx_r0.searchText);
 } }
-function SdSharedDataSelectList_Conditional_4_ng_template_1_Template(rf, ctx) { }
-function SdSharedDataSelectList_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SdSharedDataSelectList_Conditional_3_ng_template_1_Template(rf, ctx) { }
+function SdSharedDataSelectList_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtemplate(1, SdSharedDataSelectList_Conditional_4_ng_template_1_Template, 0, 0, "ng-template", 9);
+    i0.ɵɵtemplate(1, SdSharedDataSelectList_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filterTplRef());
 } }
-function SdSharedDataSelectList_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function SdSharedDataSelectList_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-pagination", 13);
-    i0.ɵɵtwoWayListener("currentPageChange", function SdSharedDataSelectList_Conditional_7_Template_sd_pagination_currentPageChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.page, $event) || (ctx_r0.page = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("currentPageChange", function SdSharedDataSelectList_Conditional_6_Template_sd_pagination_currentPageChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.page, $event) || (ctx_r0.page = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵtwoWayProperty("currentPage", ctx_r0.page);
     i0.ɵɵproperty("totalPageCount", ctx_r0.pageLength());
 } }
-function SdSharedDataSelectList_Conditional_9_Conditional_1_ng_template_0_Template(rf, ctx) { }
-function SdSharedDataSelectList_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SdSharedDataSelectList_Conditional_9_Conditional_1_ng_template_0_Template, 0, 0, "ng-template", 9);
+function SdSharedDataSelectList_Conditional_8_Conditional_1_ng_template_0_Template(rf, ctx) { }
+function SdSharedDataSelectList_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdSharedDataSelectList_Conditional_8_Conditional_1_ng_template_0_Template, 0, 0, "ng-template", 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.undefinedTplRef());
 } }
-function SdSharedDataSelectList_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SdSharedDataSelectList_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 15);
     i0.ɵɵtext(1, "\uBBF8\uC9C0\uC815");
     i0.ɵɵelementEnd();
 } }
-function SdSharedDataSelectList_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function SdSharedDataSelectList_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-list-item", 14);
-    i0.ɵɵlistener("click", function SdSharedDataSelectList_Conditional_9_Template_sd_list_item_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.select(undefined)); });
-    i0.ɵɵconditionalCreate(1, SdSharedDataSelectList_Conditional_9_Conditional_1_Template, 1, 1, null, 9)(2, SdSharedDataSelectList_Conditional_9_Conditional_2_Template, 2, 0, "span", 15);
+    i0.ɵɵlistener("click", function SdSharedDataSelectList_Conditional_8_Template_sd_list_item_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.select(undefined)); });
+    i0.ɵɵconditionalCreate(1, SdSharedDataSelectList_Conditional_8_Conditional_1_Template, 1, 1, null, 8)(2, SdSharedDataSelectList_Conditional_8_Conditional_2_Template, 2, 0, "span", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -112,12 +115,12 @@ function SdSharedDataSelectList_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.undefinedTplRef() ? 1 : 2);
 } }
-function SdSharedDataSelectList_For_11_ng_template_1_Template(rf, ctx) { }
-function SdSharedDataSelectList_For_11_Template(rf, ctx) { if (rf & 1) {
+function SdSharedDataSelectList_For_10_ng_template_1_Template(rf, ctx) { }
+function SdSharedDataSelectList_For_10_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-list-item", 14);
-    i0.ɵɵlistener("click", function SdSharedDataSelectList_For_11_Template_sd_list_item_click_0_listener() { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggle(item_r7)); });
-    i0.ɵɵtemplate(1, SdSharedDataSelectList_For_11_ng_template_1_Template, 0, 0, "ng-template", 16);
+    i0.ɵɵlistener("click", function SdSharedDataSelectList_For_10_Template_sd_list_item_click_0_listener() { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggle(item_r7)); });
+    i0.ɵɵtemplate(1, SdSharedDataSelectList_For_10_ng_template_1_Template, 0, 0, "ng-template", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r7 = ctx.$implicit;
@@ -214,30 +217,28 @@ export class SdSharedDataSelectList {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.headerTplRef, _c0, 5, TemplateRef)(dirIndex, ctx.filterTplRef, _c1, 5, TemplateRef)(dirIndex, ctx.itemTplRef, SdItemOfTemplate, 5, TemplateRef)(dirIndex, ctx.undefinedTplRef, _c2, 5, TemplateRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(4);
-        } }, hostAttrs: [1, "flex-column", "fill"], inputs: { selectedItem: [1, "selectedItem"], canChangeFn: [1, "canChangeFn"], items: [1, "items"], selectedIcon: [1, "selectedIcon"], useUndefined: [1, "useUndefined"], filterFn: [1, "filterFn"], modal: [1, "modal"], header: [1, "header"], pageItemCount: [1, "pageItemCount"] }, outputs: { selectedItem: "selectedItemChange" }, decls: 12, vars: 6, consts: [[1, "control-header", "p-default"], [1, "flex-column", "gap-sm", "p-default", "pt-0"], [1, "flex-row"], [3, "type", "placeholder", "value"], [1, "flex-fill"], [1, "flex-column", "gap-default"], [3, "currentPage", "totalPageCount"], [1, "flex-fill", 3, "inset"], [3, "selected", "selectedIcon"], [3, "ngTemplateOutlet"], [3, "click"], [3, "svg"], [3, "valueChange", "type", "placeholder", "value"], [3, "currentPageChange", "currentPage", "totalPageCount"], [3, "click", "selected", "selectedIcon"], [1, "tx-theme-gray-default"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSharedDataSelectList_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, SdSharedDataSelectList_Conditional_0_Template, 2, 1, "div", 0);
-            i0.ɵɵelementStart(1, "div", 1);
-            i0.ɵɵconditionalCreate(2, SdSharedDataSelectList_Conditional_2_Template, 4, 2, "div", 2);
-            i0.ɵɵconditionalCreate(3, SdSharedDataSelectList_Conditional_3_Template, 1, 3, "sd-textfield", 3)(4, SdSharedDataSelectList_Conditional_4_Template, 2, 1, "div");
+        } }, hostAttrs: [1, "flex-column", "fill"], inputs: { selectedItem: [1, "selectedItem"], canChangeFn: [1, "canChangeFn"], items: [1, "items"], selectedIcon: [1, "selectedIcon"], useUndefined: [1, "useUndefined"], filterFn: [1, "filterFn"], modal: [1, "modal"], header: [1, "header"], pageItemCount: [1, "pageItemCount"] }, outputs: { selectedItem: "selectedItemChange" }, decls: 11, vars: 5, consts: [[1, "flex-column", "gap-sm", "pt-default", "ph-sm"], [1, "flex-row"], [3, "type", "placeholder", "value"], [1, "flex-fill"], [1, "flex-column", "gap-default"], [3, "currentPage", "totalPageCount"], [1, "flex-fill", 3, "inset"], [3, "selected", "selectedIcon"], [3, "ngTemplateOutlet"], [1, "control-header"], [3, "click"], [3, "svg"], [3, "valueChange", "type", "placeholder", "value"], [3, "currentPageChange", "currentPage", "totalPageCount"], [3, "click", "selected", "selectedIcon"], [1, "tx-theme-gray-default"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSharedDataSelectList_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, SdSharedDataSelectList_Conditional_1_Template, 5, 3, "div", 1);
+            i0.ɵɵconditionalCreate(2, SdSharedDataSelectList_Conditional_2_Template, 1, 3, "sd-textfield", 2)(3, SdSharedDataSelectList_Conditional_3_Template, 2, 1, "div");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 4)(6, "div", 5);
-            i0.ɵɵconditionalCreate(7, SdSharedDataSelectList_Conditional_7_Template, 1, 2, "sd-pagination", 6);
-            i0.ɵɵelementStart(8, "sd-list", 7);
-            i0.ɵɵconditionalCreate(9, SdSharedDataSelectList_Conditional_9_Template, 3, 3, "sd-list-item", 8);
-            i0.ɵɵrepeaterCreate(10, SdSharedDataSelectList_For_11_Template, 2, 8, "sd-list-item", 8, _forTrack0);
+            i0.ɵɵelementStart(4, "div", 3)(5, "div", 4);
+            i0.ɵɵconditionalCreate(6, SdSharedDataSelectList_Conditional_6_Template, 1, 2, "sd-pagination", 5);
+            i0.ɵɵelementStart(7, "sd-list", 6);
+            i0.ɵɵconditionalCreate(8, SdSharedDataSelectList_Conditional_8_Template, 3, 3, "sd-list-item", 7);
+            i0.ɵɵrepeaterCreate(9, SdSharedDataSelectList_For_10_Template, 2, 8, "sd-list-item", 7, _forTrack0);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵconditional(ctx.header() ? 0 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.headerTplRef() || ctx.modal() ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.filterTplRef() ? 3 : 4);
+            i0.ɵɵconditional(ctx.header() || ctx.headerTplRef() || ctx.modal() ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.filterTplRef() ? 2 : 3);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.pageItemCount() ? 7 : -1);
+            i0.ɵɵconditional(ctx.pageItemCount() ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("inset", true);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.useUndefined() ? 9 : -1);
+            i0.ɵɵconditional(ctx.useUndefined() ? 8 : -1);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.displayItems());
         } }, dependencies: [NgTemplateOutlet,
@@ -268,19 +269,18 @@ export class SdSharedDataSelectList {
                     class: "flex-column fill",
                 },
                 template: `
-    @if (header()) {
-      <div class="control-header p-default">
-        {{ header() }}
-      </div>
-    }
-
-    <div class="flex-column gap-sm p-default pt-0">
-      @if (headerTplRef() || modal()) {
+    <div class="flex-column gap-sm pt-default ph-sm">
+      @if (header() || headerTplRef() || modal()) {
         <div class="flex-row">
           <div class="flex-fill">
             @if (headerTplRef()) {
               <ng-template [ngTemplateOutlet]="headerTplRef()!"></ng-template>
             }
+            @if (header()) {
+              <div class="control-header">
+                {{ header() }}
+              </div>
+            }
           </div>
           @if (modal()) {
             <sd-anchor (click)="onModalButtonClick()">
@@ -348,4 +348,4 @@ export class SdSharedDataSelectList {
                     }, isSignal: true }] }], itemTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], undefinedTplRef: [{ type: i0.ContentChild, args: ["undefinedTpl", { ...{
                         read: TemplateRef,
                     }, isSignal: true }] }], pageItemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageItemCount", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSharedDataSelectList, { className: "SdSharedDataSelectList", filePath: "packages/angular/src/data/shared-data/sd-shared-data-select-list.ts", lineNumber: 129 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSharedDataSelectList, { className: "SdSharedDataSelectList", filePath: "packages/angular/src/data/shared-data/sd-shared-data-select-list.ts", lineNumber: 128 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBA4Ea,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,wEAAiC;IACvC,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,UAAU,uDAAsF;IAEhG,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,GAAG,IAAI;IAM/B,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;yCA5BS,aAAa;2CAAb,aAAa;CA6BzB"}
+{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBAyEa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,wEAAiC;IACvC,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,UAAU,uDAAsF;IAEhG,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,GAAG,IAAI;IAM/B,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;yCA5BS,aAAa;2CAAb,aAAa;CA6BzB"}

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

@@ -11,42 +11,41 @@ import * as i0 from "@angular/core";
 const _c0 = a0 => ({ menus: a0, depth: 0 });
 const _c1 = (a0, a1) => ({ menus: a0, depth: a1 });
 const _forTrack0 = ($index, $item) => $item.codeChain.join(".");
-function SdSidebarMenu_ng_template_3_Template(rf, ctx) { }
-function SdSidebarMenu_ng_template_4_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SdSidebarMenu_ng_template_4_Template(rf, ctx) { }
+function SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ng-icon", 8);
     i0.ɵɵtext(1, " \u00A0 ");
 } if (rf & 2) {
     const menu_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("svg", menu_r2.icon);
 } }
-function SdSidebarMenu_ng_template_4_For_1_Conditional_3_ng_template_1_Template(rf, ctx) { }
-function SdSidebarMenu_ng_template_4_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template(rf, ctx) { }
+function SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "sd-list", 7);
-    i0.ɵɵtemplate(1, SdSidebarMenu_ng_template_4_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵtemplate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const menu_r2 = i0.ɵɵnextContext().$implicit;
     const depth_r4 = i0.ɵɵnextContext().depth;
     i0.ɵɵnextContext();
-    const itemTpl_r5 = i0.ɵɵreference(5);
+    const itemTpl_r5 = i0.ɵɵreference(6);
     i0.ɵɵproperty("inset", true);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c1, menu_r2.children, depth_r4 + 1));
 } }
-function SdSidebarMenu_ng_template_4_For_1_Template(rf, ctx) { if (rf & 1) {
+function SdSidebarMenu_ng_template_5_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-list-item", 6);
-    i0.ɵɵlistener("click", function SdSidebarMenu_ng_template_4_For_1_Template_sd_list_item_click_0_listener() { const menu_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMenuClick(menu_r2)); });
-    i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_4_For_1_Conditional_1_Template, 2, 1);
+    i0.ɵɵlistener("click", function SdSidebarMenu_ng_template_5_For_1_Template_sd_list_item_click_0_listener() { const menu_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMenuClick(menu_r2)); });
+    i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template, 2, 1);
     i0.ɵɵtext(2);
-    i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_4_For_1_Conditional_3_Template, 2, 6, "sd-list", 7);
+    i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template, 2, 6, "sd-list", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const menu_r2 = ctx.$implicit;
     const depth_r4 = i0.ɵɵnextContext().depth;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("text-indent", depth_r4 > 0 ? (depth_r4 + 1) * 0.5 : undefined, "em");
-    i0.ɵɵproperty("contentClass", depth_r4 === 0 ? "pv-default" : "")("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0 ? ctx_r2.rootLayout() : "accordion");
+    i0.ɵɵproperty("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0 ? ctx_r2.rootLayout() : "accordion");
     i0.ɵɵadvance();
     i0.ɵɵconditional(menu_r2.icon ? 1 : -1);
     i0.ɵɵadvance();
@@ -54,8 +53,8 @@ function SdSidebarMenu_ng_template_4_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(menu_r2.children ? 3 : -1);
 } }
-function SdSidebarMenu_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_4_For_1_Template, 4, 9, "sd-list-item", 5, _forTrack0);
+function SdSidebarMenu_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_5_For_1_Template, 4, 6, "sd-list-item", 5, _forTrack0);
 } if (rf & 2) {
     const currMenus_r6 = ctx.menus;
     i0.ɵɵrepeater(currMenus_r6);
@@ -81,17 +80,17 @@ export class SdSidebarMenu {
     static ɵfac = function SdSidebarMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebarMenu)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarMenu, selectors: [["sd-sidebar-menu"]], hostAttrs: [1, "flex-column", "fill"], hostVars: 1, hostBindings: function SdSidebarMenu_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-root-layout", ctx.rootLayout());
-        } }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 6, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "contentClass", "text-indent", "sdRouterLink", "selected", "layout"], [3, "click", "contentClass", "sdRouterLink", "selected", "layout"], [3, "inset"], [3, "svg"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtext(1, "MENU");
+        } }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 7, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "sdRouterLink", "selected", "layout"], [3, "click", "sdRouterLink", "selected", "layout"], [3, "inset"], [3, "svg"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "b");
+            i0.ɵɵtext(2, "MENU");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(3, "sd-list", 2);
+            i0.ɵɵtemplate(4, SdSidebarMenu_ng_template_4_Template, 0, 0, "ng-template", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(2, "sd-list", 2);
-            i0.ɵɵtemplate(3, SdSidebarMenu_ng_template_3_Template, 0, 0, "ng-template", 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, SdSidebarMenu_ng_template_4_Template, 2, 0, "ng-template", 4, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(5, SdSidebarMenu_ng_template_5_Template, 2, 0, "ng-template", 4, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const itemTpl_r5 = i0.ɵɵreference(5);
-            i0.ɵɵadvance(2);
+            const itemTpl_r5 = i0.ɵɵreference(6);
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("inset", true);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(4, _c0, ctx.menus()));
@@ -102,7 +101,7 @@ export class SdSidebarMenu {
             SdRouterLink,
             SdList,
             SdListItem,
-            NgIcon], styles: ["sd-sidebar-menu > sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+            NgIcon], styles: ["sd-sidebar-menu > sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarMenu, [{
         type: Component,
@@ -117,7 +116,7 @@ export class SdSidebarMenu {
                     "class": "flex-column fill",
                     "[attr.data-sd-root-layout]": "rootLayout()",
                 }, template: `
-    <div class="control-header p-default">MENU</div>
+    <div class="control-header p-default"><b>MENU</b></div>
 
     <sd-list class="flex-fill" [inset]="true">
       <ng-template
@@ -129,8 +128,6 @@ export class SdSidebarMenu {
     <ng-template #itemTpl [typed]="itemTemplateType" let-currMenus="menus" let-depth="depth">
       @for (menu of currMenus; track menu.codeChain.join(".")) {
         <sd-list-item
-          [contentClass]="depth === 0 ? 'pv-default' : ''"
-          [style.text-indent.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu)"
           [selected]="getIsMenuSelected(menu)"
@@ -155,6 +152,6 @@ export class SdSidebarMenu {
         </sd-list-item>
       }
     </ng-template>
-  `, styles: ["sd-sidebar-menu > sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > sd-list {\n  background: transparent;\n}"] }]
+  `, styles: ["sd-sidebar-menu > sd-list[data-sd-inset=true] sd-list {\n  background: var(--trans-lightest);\n}\nsd-sidebar-menu:not([data-sd-root-layout=accordion]) > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background: transparent;\n}"] }]
     }], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], getMenuIsSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getMenuIsSelectedFn", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber: 91 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber: 88 }); })();

package/dist/layout/sidebar/sd-sidebar-user.d.ts

@@ -7,6 +7,7 @@ export declare class SdSidebarUser {
     static ɵcmp: i0.ɵɵComponentDeclaration<SdSidebarUser, "sd-sidebar-user", never, { "userMenu": { "alias": "userMenu"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 export interface SdSidebarUserMenu {
+    icon?: string;
     title: string;
     menus: {
         title: string;

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

@@ -1 +1 @@
-{"version":3,"file":"sd-sidebar-user.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-user.ts"],"names":[],"mappings":";AAaA,qBA0Da,aAAa;IACxB,QAAQ,qEAA8B;IAEtC,QAAQ,kDAAiB;IAEzB,qBAAqB,IAAI,IAAI;yCALlB,aAAa;2CAAb,aAAa;CAQzB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;KACrC,EAAE,CAAC;CACL"}
+{"version":3,"file":"sd-sidebar-user.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-user.ts"],"names":[],"mappings":";AAcA,qBAoEa,aAAa;IACxB,QAAQ,qEAA8B;IAEtC,QAAQ,kDAAiB;IAEzB,qBAAqB,IAAI,IAAI;yCALlB,aAAa;2CAAb,aAAa;CAQzB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;KACrC,EAAE,CAAC;CACL"}

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

@@ -4,36 +4,46 @@ import { SdCollapse } from "../../controls/collapse/sd-collapse";
 import { SdRipple } from "../../core/ripple/sd-ripple";
 import { SdList } from "../../controls/list/sd-list";
 import { SdListItem } from "../../controls/list/sd-list-item";
+import { NgIcon } from "@ng-icons/core";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
 const _forTrack0 = ($index, $item) => $item.title;
-function SdSidebarUser_Conditional_2_For_6_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "sd-list-item", 5);
-    i0.ɵɵlistener("click", function SdSidebarUser_Conditional_2_For_6_Template_sd_list_item_click_0_listener() { const menu_r4 = i0.ɵɵrestoreView(_r3).$implicit; return i0.ɵɵresetView(menu_r4.onClick()); });
+function SdSidebarUser_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-icon", 2);
+} if (rf & 2) {
+    const _userMenu_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("svg", _userMenu_r3.icon);
+} }
+function SdSidebarUser_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-list-item", 6);
+    i0.ɵɵlistener("click", function SdSidebarUser_Conditional_2_For_7_Template_sd_list_item_click_0_listener() { const menu_r5 = i0.ɵɵrestoreView(_r4).$implicit; return i0.ɵɵresetView(menu_r5.onClick()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const menu_r4 = ctx.$implicit;
+    const menu_r5 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", menu_r4.title, " ");
+    i0.ɵɵtextInterpolate1(" ", menu_r5.title, " ");
 } }
 function SdSidebarUser_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵlistener("click", function SdSidebarUser_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMenuOpenButtonClick()); })("keydown.enter", function SdSidebarUser_Conditional_2_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMenuOpenButtonClick()); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelement(2, "sd-collapse-icon", 2);
+    i0.ɵɵconditionalCreate(1, SdSidebarUser_Conditional_2_Conditional_1_Template, 1, 1, "ng-icon", 2);
+    i0.ɵɵtext(2);
+    i0.ɵɵelement(3, "sd-collapse-icon", 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "sd-collapse", 3)(4, "sd-list", 4);
-    i0.ɵɵrepeaterCreate(5, SdSidebarUser_Conditional_2_For_6_Template, 2, 1, "sd-list-item", null, _forTrack0);
+    i0.ɵɵelementStart(4, "sd-collapse", 4)(5, "sd-list", 5);
+    i0.ɵɵrepeaterCreate(6, SdSidebarUser_Conditional_2_For_7_Template, 2, 1, "sd-list-item", null, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const _userMenu_r5 = ctx;
+    const _userMenu_r3 = ctx;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("sdRipple", true);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", _userMenu_r5.title, " ");
+    i0.ɵɵconditional(_userMenu_r3.icon ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", _userMenu_r3.title, " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("open", ctx_r1.menuOpen())("openRotate", 180);
     i0.ɵɵadvance();
@@ -41,7 +51,7 @@ function SdSidebarUser_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("inset", true);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(_userMenu_r5.menus);
+    i0.ɵɵrepeater(_userMenu_r3.menus);
 } }
 export class SdSidebarUser {
     userMenu = input(...(ngDevMode ? [undefined, { debugName: "userMenu" }] : /* istanbul ignore next */ []));
@@ -50,22 +60,26 @@ export class SdSidebarUser {
         this.menuOpen.update((v) => !v);
     }
     static ɵfac = function SdSidebarUser_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebarUser)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarUser, selectors: [["sd-sidebar-user"]], inputs: { userMenu: [1, "userMenu"] }, ngContentSelectors: _c0, decls: 3, vars: 1, consts: [[1, "p-lg"], ["tabindex", "0", 1, "_menu-button", 3, "click", "keydown.enter", "sdRipple"], [2, "float", "right", 3, "open", "openRotate"], [3, "open"], [3, "inset"], [3, "click"]], template: function SdSidebarUser_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarUser, selectors: [["sd-sidebar-user"]], hostVars: 2, hostBindings: function SdSidebarUser_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassMap("pv-lg");
+        } }, inputs: { userMenu: [1, "userMenu"] }, ngContentSelectors: _c0, decls: 3, vars: 1, consts: [[1, "p-xs-default"], ["tabindex", "0", 1, "_menu-button", 3, "click", "keydown.enter", "sdRipple"], [3, "svg"], [2, "float", "right", 3, "open", "openRotate"], [3, "open"], [3, "inset"], [3, "click"]], template: function SdSidebarUser_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(2, SdSidebarUser_Conditional_2_Template, 7, 6);
+            i0.ɵɵconditionalCreate(2, SdSidebarUser_Conditional_2_Template, 8, 7);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵadvance(2);
             i0.ɵɵconditional((tmp_0_0 = ctx.userMenu()) ? 2 : -1, tmp_0_0);
-        } }, dependencies: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem], styles: ["sd-sidebar-user {\n  display: block;\n}\nsd-sidebar-user > ._menu-button {\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  padding: var(--gap-default);\n}\nsd-sidebar-user > ._menu-button:hover {\n  background: var(--trans-lighter);\n}\nsd-sidebar-user > sd-collapse > ._content > sd-list {\n  background: var(--trans-lightest);\n  padding: var(--gap-xs) 0;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem, NgIcon], styles: ["sd-sidebar-user {\n  display: block;\n}\nsd-sidebar-user > ._menu-button {\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  color: var(--text-trans-light);\n  padding: var(--gap-sm) var(--gap-default);\n  border-radius: var(--border-radius-default);\n  margin: 0 var(--gap-sm);\n}\nsd-sidebar-user > ._menu-button:hover {\n  background: var(--trans-lighter);\n}\nsd-sidebar-user > sd-collapse > ._content > sd-list {\n  background: var(--trans-lightest);\n  padding: var(--gap-xs) 0;\n  margin: 0 var(--gap-sm);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarUser, [{
         type: Component,
-        args: [{ selector: "sd-sidebar-user", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem], template: `
-    <div class="p-lg">
+        args: [{ selector: "sd-sidebar-user", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem, NgIcon], host: {
+                    "[class]": "'pv-lg'"
+                }, template: `
+    <div class="p-xs-default">
       <ng-content />
     </div>
     @if (userMenu(); as _userMenu) {
@@ -76,6 +90,9 @@ export class SdSidebarUser {
         (keydown.enter)="onMenuOpenButtonClick()"
         [sdRipple]="true"
       >
+        @if (_userMenu.icon) {
+          <ng-icon [svg]="_userMenu.icon" />
+        }
         {{ _userMenu.title }}
         <sd-collapse-icon [open]="menuOpen()" style="float: right;" [openRotate]="180" />
       </div>
@@ -90,6 +107,6 @@ export class SdSidebarUser {
         </sd-list>
       </sd-collapse>
     }
-  `, styles: ["sd-sidebar-user {\n  display: block;\n}\nsd-sidebar-user > ._menu-button {\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  padding: var(--gap-default);\n}\nsd-sidebar-user > ._menu-button:hover {\n  background: var(--trans-lighter);\n}\nsd-sidebar-user > sd-collapse > ._content > sd-list {\n  background: var(--trans-lightest);\n  padding: var(--gap-xs) 0;\n}"] }]
+  `, styles: ["sd-sidebar-user {\n  display: block;\n}\nsd-sidebar-user > ._menu-button {\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  color: var(--text-trans-light);\n  padding: var(--gap-sm) var(--gap-default);\n  border-radius: var(--border-radius-default);\n  margin: 0 var(--gap-sm);\n}\nsd-sidebar-user > ._menu-button:hover {\n  background: var(--trans-lighter);\n}\nsd-sidebar-user > sd-collapse > ._content > sd-list {\n  background: var(--trans-lightest);\n  padding: var(--gap-xs) 0;\n  margin: 0 var(--gap-sm);\n}"] }]
     }], null, { userMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenu", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarUser, { className: "SdSidebarUser", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-user.ts", lineNumber: 72 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarUser, { className: "SdSidebarUser", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-user.ts", lineNumber: 83 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"sd-sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar.ts"],"names":[],"mappings":";AAUA,qBAkDa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF,MAAM,0CAAgD;yCAL3C,SAAS;2CAAT,SAAS;CAMrB"}
+{"version":3,"file":"sd-sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar.ts"],"names":[],"mappings":";AAUA,qBAmDa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF,MAAM,0CAAgD;yCAL3C,SAAS;2CAAT,SAAS;CAMrB"}

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

@@ -11,7 +11,7 @@ export class SdSidebar {
         } }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSidebar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  background: var(--control-color);\n  border-right: 1px solid var(--border-color-lighter);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.1s ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform 0.1s ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.3s ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform 0.3s ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  background: var(--theme-gray-lightest);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.1s ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform 0.1s ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.3s ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform 0.3s ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
         type: Component,
@@ -19,6 +19,6 @@ export class SdSidebar {
                     "[attr.data-sd-toggle]": "toggle()",
                 }, template: `
     <ng-content />
-  `, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  background: var(--control-color);\n  border-right: 1px solid var(--border-color-lighter);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.1s ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform 0.1s ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.3s ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform 0.3s ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  }\n}"] }]
+  `, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  background: var(--theme-gray-lightest);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.1s ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform 0.1s ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.3s ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform 0.3s ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  }\n}"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 61 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 62 }); })();

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

@@ -1 +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"}
+{"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,qBAgEa,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

@@ -13,7 +13,7 @@ function SdTopbar_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("theme", "link-primary")("buttonClass", "p-sm-default");
+    i0.ɵɵproperty("size", "sm")("theme", "link-gray")("buttonClass", "p-xs-sm");
     i0.ɵɵadvance();
     i0.ɵɵproperty("svg", ctx_r1.tablerMenu2);
 } }
@@ -31,23 +31,24 @@ export class SdTopbar {
     }
     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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTopbar, selectors: [["sd-topbar"]], hostAttrs: [1, "flex-row", "gap-sm", "cross-align-center", "main-align-start"], inputs: { sidebarContainer: [1, "sidebarContainer"] }, ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[3, "size", "theme", "buttonClass"], [3, "click", "size", "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.ɵɵconditionalCreate(0, SdTopbar_Conditional_0_Template, 2, 4, "sd-button", 0);
             i0.ɵɵprojection(1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.hasSidebar() ? 0 : -1);
-        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-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 });
+        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-xs);\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"
+                    "class": "flex-row gap-sm cross-align-center main-align-start"
                 }, template: `
     @if (hasSidebar()) {
       <sd-button
-        [theme]="'link-primary'"
-        [buttonClass]="'p-sm-default'"
+        [size]="'sm'"
+        [theme]="'link-gray'"
+        [buttonClass]="'p-xs-sm'"
         (click)="onToggleButtonClick()"
       >
         <ng-icon [svg]="tablerMenu2" />
@@ -55,6 +56,6 @@ export class SdTopbar {
     }
     
     <ng-content />
-  `, styles: ["sd-topbar {\n  min-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}"] }]
+  `, styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-xs);\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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 78 }); })();