@simplysm/angular 14.1.2 → 14.1.6

package/dist/features/theme/sd-theme-selector.js

@@ -9,9 +9,11 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
 import * as i0 from "@angular/core";
 export class SdThemeSelector {
     _sdTheme = inject(SdThemeProvider);
-    isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0], ...(ngDevMode ? [{ debugName: "isMinFontSize" }] : /* istanbul ignore next */ []));
+    isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMinFontSize" }] : /* istanbul ignore next */ []));
     isMaxFontSize = computed(() => this._sdTheme.fontSize() >=
-        this._sdTheme.fontSizePresets[this._sdTheme.fontSizePresets.length - 1], ...(ngDevMode ? [{ debugName: "isMaxFontSize" }] : /* istanbul ignore next */ []));
+        this._sdTheme.fontSizePresets[this._sdTheme.fontSizePresets.length - 1], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMaxFontSize" }] : /* istanbul ignore next */ []));
     tablerPlus = tablerPlus;
     tablerMinus = tablerMinus;
     tablerPalette = tablerPalette;
@@ -65,7 +67,7 @@ export class SdThemeSelector {
             i0.ɵɵtwoWayProperty("value", ctx._sdTheme.dark);
             i0.ɵɵadvance(4);
             i0.ɵɵtwoWayProperty("value", ctx._sdTheme.blueprint);
-        } }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdThemeSelector, [{
         type: Component,

package/dist/features/visual/sd-barcode.js

@@ -4,8 +4,10 @@ import bwipjs from "bwip-js";
 import * as i0 from "@angular/core";
 export class SdBarcode {
     _sanitizer = inject(DomSanitizer);
-    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    type = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     // bwip-js는 바코드 데이터를 기하학적 SVG로 변환하는 신뢰할 수 있는 라이브러리이므로
     // bypassSecurityTrustHtml을 사용한다. 사용자 HTML은 전달되지 않는다.
     _trustedSvgHtml = computed(() => {
@@ -18,13 +20,14 @@ export class SdBarcode {
             text,
         });
         return this._sanitizer.bypassSecurityTrustHtml(svg);
-    }, ...(ngDevMode ? [{ debugName: "_trustedSvgHtml" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_trustedSvgHtml" }] : /* istanbul ignore next */ []));
     static ɵfac = function SdBarcode_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdBarcode)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdBarcode, selectors: [["sd-barcode"]], inputs: { type: [1, "type"], value: [1, "value"] }, decls: 1, vars: 1, consts: [[3, "innerHTML"]], template: function SdBarcode_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElement(0, "div", 0);
         } if (rf & 2) {
             i0.ɵɵdomProperty("innerHTML", ctx._trustedSvgHtml(), i0.ɵɵsanitizeHtml);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdBarcode, [{
         type: Component,

package/dist/features/visual/sd-calendar.js

@@ -42,12 +42,17 @@ function SdCalendar_For_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(row_r6);
 } }
 export class SdCalendar {
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    getItemDateFn = input.required(...(ngDevMode ? [{ debugName: "getItemDateFn" }] : /* istanbul ignore next */ []));
-    yearMonth = input(new DateOnly().setDay(1), ...(ngDevMode ? [{ debugName: "yearMonth" }] : /* istanbul ignore next */ []));
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    getItemDateFn = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getItemDateFn" }] : /* istanbul ignore next */ []));
+    yearMonth = input(new DateOnly().setDay(1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearMonth" }] : /* istanbul ignore next */ []));
     itemTplRef = contentChild.required(SdItemOfTemplate, { read: TemplateRef });
-    weekStartDay = input(0, ...(ngDevMode ? [{ debugName: "weekStartDay" }] : /* istanbul ignore next */ []));
-    minDaysInFirstWeek = input(1, ...(ngDevMode ? [{ debugName: "minDaysInFirstWeek" }] : /* istanbul ignore next */ []));
+    weekStartDay = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekStartDay" }] : /* istanbul ignore next */ []));
+    minDaysInFirstWeek = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDaysInFirstWeek" }] : /* istanbul ignore next */ []));
     weeks = ["일", "월", "화", "수", "목", "금", "토"];
     dataTable = computed(() => {
         const result = [];
@@ -78,7 +83,8 @@ export class SdCalendar {
             result.push(row);
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "dataTable" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataTable" }] : /* istanbul ignore next */ []));
     static ɵfac = function SdCalendar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCalendar)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCalendar, selectors: [["sd-calendar"]], contentQueries: function SdCalendar_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.itemTplRef, SdItemOfTemplate, 5, TemplateRef);
@@ -126,7 +132,7 @@ export class SdCalendar {
             i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 6) % 7], " ");
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.dataTable());
-        } }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--theme-gray-light);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background: var(--theme-gray-lighter);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--theme-gray-light);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background: var(--theme-gray-lighter);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCalendar, [{
         type: Component,

package/dist/features/visual/sd-echarts.js

@@ -5,10 +5,14 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../core/events/sd-resize";
 const _c0 = ["*"];
 export class SdEcharts {
-    _chart = signal(undefined, ...(ngDevMode ? [{ debugName: "_chart" }] : /* istanbul ignore next */ []));
-    option = input.required(...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
-    notMerge = input(false, ...(ngDevMode ? [{ debugName: "notMerge" }] : /* istanbul ignore next */ []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    _chart = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_chart" }] : /* istanbul ignore next */ []));
+    option = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
+    notMerge = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "notMerge" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     constructor() {
         const elRef = inject(ElementRef);
         const destroyRef = inject(DestroyRef);
@@ -44,7 +48,7 @@ export class SdEcharts {
         } }, inputs: { option: [1, "option"], notMerge: [1, "notMerge"], loading: [1, "loading"] }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1.SdResizeDirective, outputs: ["sdResize", "sdResize"] }])], ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdEcharts_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-echarts {\n  display: block;\n  height: 100%;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["sd-echarts {\n  display: block;\n  height: 100%;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdEcharts, [{
         type: Component,

package/dist/features/visual/sd-label.js

@@ -2,8 +2,10 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncaps
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
 export class SdLabel {
-    theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    theme = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    color = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = function SdLabel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdLabel)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdLabel, selectors: [["sd-label"]], hostVars: 4, hostBindings: function SdLabel_HostBindings(rf, ctx) { if (rf & 2) {
@@ -12,7 +14,7 @@ export class SdLabel {
         } }, inputs: { theme: [1, "theme"], color: [1, "color"], clickable: [1, "clickable"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdLabel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-label {\n  display: inline-block;\n  background: var(--theme-gray-darker);\n  color: var(--text-trans-rev-default);\n  padding: 0 var(--gap-sm);\n  border-radius: var(--border-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n  background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n  background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n  background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n  background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n  background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n  background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background: var(--theme-danger-dark);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-label {\n  display: inline-block;\n  background: var(--theme-gray-darker);\n  color: var(--text-trans-rev-default);\n  padding: 0 var(--gap-sm);\n  border-radius: var(--border-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n  background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n  background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n  background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n  background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n  background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n  background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background: var(--theme-danger-dark);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabel, [{
         type: Component,

package/dist/features/visual/sd-note.js

@@ -2,8 +2,10 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncaps
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
 export class SdNote {
-    theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    theme = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = function SdNote_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdNote)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdNote, selectors: [["sd-note"]], hostVars: 3, hostBindings: function SdNote_HostBindings(rf, ctx) { if (rf & 2) {
@@ -11,7 +13,7 @@ export class SdNote {
         } }, inputs: { theme: [1, "theme"], size: [1, "size"], inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdNote_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-note {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  background: var(--theme-gray-lightest);\n  border: none;\n  border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-lightest);\n  border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n  background: var(--theme-primary-lightest);\n  border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n  background: var(--theme-info-lightest);\n  border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n  background: var(--theme-success-lightest);\n  border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n  background: var(--theme-warning-lightest);\n  border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n  background: var(--theme-danger-lightest);\n  border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--font-size-sm);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-note {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  background: var(--theme-gray-lightest);\n  border: none;\n  border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-lightest);\n  border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n  background: var(--theme-primary-lightest);\n  border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n  background: var(--theme-info-lightest);\n  border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n  background: var(--theme-success-lightest);\n  border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n  background: var(--theme-warning-lightest);\n  border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n  background: var(--theme-danger-lightest);\n  border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--font-size-sm);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNote, [{
         type: Component,

package/dist/features/visual/sd-progress.js

@@ -3,10 +3,14 @@ import { PercentPipe } from "@angular/common";
 import * as i0 from "@angular/core";
 export class SdProgress {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
-    theme = input.required(...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    _barWidth = computed(() => Math.min(Math.max(this.value() * 100, 0), 100) + "%", ...(ngDevMode ? [{ debugName: "_barWidth" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    theme = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    _barWidth = computed(() => Math.min(Math.max(this.value() * 100, 0), 100) + "%", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_barWidth" }] : /* istanbul ignore next */ []));
     static ɵfac = function SdProgress_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdProgress)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdProgress, selectors: [["sd-progress"]], hostVars: 3, hostBindings: function SdProgress_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-inset", ctx.inset())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme());
@@ -21,7 +25,7 @@ export class SdProgress {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 3, ctx.value(), "1.0-2"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("width", ctx._barWidth());
-        } }, dependencies: [PercentPipe], styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background: var(--control-color);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [PercentPipe], styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background: var(--control-color);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgress, [{
         type: Component,

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

@@ -6,7 +6,8 @@ import * as i0 from "@angular/core";
 const _c0 = ["*"];
 export class SdSidebarContainer {
     _router = inject(Router, { optional: true });
-    toggle = signal(false, ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
+    toggle = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
     _navStart = this._router
         ? toSignal(this._router.events.pipe(filter((e) => e instanceof NavigationStart)))
         : undefined;
@@ -32,7 +33,7 @@ export class SdSidebarContainer {
             i0.ɵɵdomElementStart(1, "div", 0);
             i0.ɵɵdomListener("click", function SdSidebarContainer_Template_div_click_1_listener() { return ctx.onBackdropClick(); })("keydown.enter", function SdSidebarContainer_Template_div_keydown_enter_1_listener() { return ctx.onBackdropClick(); });
             i0.ɵɵdomElementEnd();
-        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--animation-duration) ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--animation-duration) ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarContainer, [{
         type: Component,

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

@@ -59,13 +59,18 @@ function SdSidebarMenu_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(currMenus_r6);
 } }
 export class SdSidebarMenu {
-    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
-    layout = input(...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
-    getMenuIsSelectedFn = input(...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
+    menus = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    layout = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
+    getMenuIsSelectedFn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
     fullPageCode = injectFullPageCodeSignal();
-    rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"), ...(ngDevMode ? [{ debugName: "rootLayout" }] : /* istanbul ignore next */ []));
+    rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootLayout" }] : /* istanbul ignore next */ []));
     // accordion-expanded: 모든 깊이 항목을 펼친 채로 시작(이후 클릭 토글). 그 외는 접힘 시작.
-    expandInitially = computed(() => this.rootLayout() === "accordion-expanded", ...(ngDevMode ? [{ debugName: "expandInitially" }] : /* istanbul ignore next */ []));
+    expandInitially = computed(() => this.rootLayout() === "accordion-expanded", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandInitially" }] : /* istanbul ignore next */ []));
     getMenuRouterLinkOption(menu) {
         return menuRouterLinkOption(menu);
     }
@@ -102,7 +107,7 @@ export class SdSidebarMenu {
             SdRouterLink,
             SdList,
             SdListItem,
-            NgIcon], styles: ["sd-sidebar-menu {\n  /*> sd-list[data-sd-inset=\"true\"] {\n    sd-list {\n      background: var(--trans-lightest);\n    }\n  }*/\n}\nsd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+            NgIcon], styles: ["sd-sidebar-menu {\n  /*> sd-list[data-sd-inset=\"true\"] {\n    sd-list {\n      background: var(--trans-lightest);\n    }\n  }*/\n}\nsd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n  background: transparent;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarMenu, [{
         type: Component,

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

@@ -54,8 +54,10 @@ function SdSidebarUser_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(_userMenu_r3.menus);
 } }
 export class SdSidebarUser {
-    userMenu = input(...(ngDevMode ? [undefined, { debugName: "userMenu" }] : /* istanbul ignore next */ []));
-    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    userMenu = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "userMenu" }] : /* istanbul ignore next */ []));
+    menuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
     onMenuOpenButtonClick() {
         this.menuOpen.update((v) => !v);
     }
@@ -72,7 +74,7 @@ export class SdSidebarUser {
             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, 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 });
+        } }, 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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarUser, [{
         type: Component,

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

@@ -4,14 +4,15 @@ import * as i0 from "@angular/core";
 const _c0 = ["*"];
 export class SdSidebar {
     _parentControl = inject(forwardRef(() => SdSidebarContainer));
-    toggle = computed(() => this._parentControl.toggle(), ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
+    toggle = computed(() => this._parentControl.toggle(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
     static ɵfac = function SdSidebar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebar)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebar, selectors: [["sd-sidebar"]], hostVars: 1, hostBindings: function SdSidebar_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-toggle", ctx.toggle());
         } }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSidebar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
         type: Component,

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

@@ -6,7 +6,7 @@ export class 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 });
+        } }, styles: ["sd-topbar-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarContainer, [{
         type: Component,

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

@@ -120,10 +120,13 @@ function SdTopbarMenu_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(currMenus_r11);
 } }
 export class SdTopbarMenu {
-    menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
-    getMenuIsSelectedFn = input(...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
+    menus = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    getMenuIsSelectedFn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
     fullPageCode = injectFullPageCodeSignal();
-    _dropdowns = viewChildren(SdDropdown, ...(ngDevMode ? [{ debugName: "_dropdowns" }] : /* istanbul ignore next */ []));
+    _dropdowns = viewChildren(SdDropdown, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropdowns" }] : /* istanbul ignore next */ []));
     getMenuRouterLinkOption(menu) {
         return menuRouterLinkOption(menu);
     }
@@ -160,7 +163,7 @@ export class SdTopbarMenu {
             SdList,
             SdListItem,
             SdButton,
-            NgIcon], styles: ["sd-topbar-menu sd-list sd-list {\n  background: var(--trans-lightest);\n}"], encapsulation: 2, changeDetection: 0 });
+            NgIcon], styles: ["sd-topbar-menu sd-list sd-list {\n  background: var(--trans-lightest);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarMenu, [{
         type: Component,

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

@@ -19,8 +19,10 @@ function SdTopbarUser_For_6_Template(rf, ctx) { if (rf & 1) {
     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 */ []));
+    menus = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    _dropdown = viewChild(SdDropdown, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropdown" }] : /* istanbul ignore next */ []));
     onMenuClick(menu) {
         menu.onClick();
         this._dropdown()?.open.set(false);
@@ -47,7 +49,7 @@ export class SdTopbarUser {
             SdDropdownPopup,
             SdList,
             SdListItem,
-            SdButton], encapsulation: 2, changeDetection: 0 });
+            SdButton], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarUser, [{
         type: Component,

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

@@ -21,8 +21,10 @@ 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 */ []));
+    sidebarContainer = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sidebarContainer" }] : /* istanbul ignore next */ []));
+    hasSidebar = computed(() => this.sidebarContainer() != null || this._injectedSidebarContainer != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSidebar" }] : /* istanbul ignore next */ []));
     onToggleButtonClick() {
         const sc = this.sidebarContainer() ?? this._injectedSidebarContainer;
         if (sc != null) {
@@ -37,7 +39,7 @@ export class SdTopbar {
             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  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 });
+        } }, 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  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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbar, [{
         type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.1.2",
+  "version": "14.1.6",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -25,12 +25,11 @@
     "./styles.css"
   ],
   "dependencies": {
-    "@angular/animations": "^21.2.17",
-    "@angular/common": "^21.2.17",
-    "@angular/core": "^21.2.17",
-    "@angular/platform-browser": "^21.2.17",
-    "@angular/router": "^21.2.17",
-    "@angular/service-worker": "^21.2.17",
+    "@angular/common": "^22.0.4",
+    "@angular/core": "^22.0.4",
+    "@angular/platform-browser": "^22.0.4",
+    "@angular/router": "^22.0.4",
+    "@angular/service-worker": "^22.0.4",
     "@ng-icons/core": "^33.3.0",
     "@ng-icons/tabler-icons": "^33.3.0",
     "@tiptap/core": "^3.27.1",
@@ -52,14 +51,13 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.5.0",
-    "@simplysm/core-browser": "14.1.2",
-    "@simplysm/service-client": "14.1.2",
-    "@simplysm/service-common": "14.1.2",
-    "@simplysm/core-common": "14.1.2"
+    "@simplysm/core-browser": "14.1.6",
+    "@simplysm/service-client": "14.1.6",
+    "@simplysm/core-common": "14.1.6",
+    "@simplysm/service-common": "14.1.6"
   },
   "devDependencies": {
-    "@angular/compiler": "^21.2.17",
-    "@angular/platform-browser-dynamic": "^21.2.17"
+    "@angular/compiler": "^22.0.4"
   },
   "scripts": {}
 }

package/src/controls/input/sd-textfield-type-handlers.ts

@@ -1,6 +1,7 @@
 import {
   DateOnly,
   DateTime,
+  num,
   SdError,
   Time,
 } from "@simplysm/core-common";
@@ -153,17 +154,14 @@ function createNumberHandler(): TextfieldTypeHandler {
       return Number.isNaN(result) ? undefined : result;
     },
     toControlValue(value, opts) {
-      const num = value as number;
+      const numValue = value as number;
       return opts.useNumberComma !== false
-        ? num.toLocaleString(undefined, { maximumFractionDigits: 10 })
-        : num.toString(10);
+        ? num.format(numValue, { max: 10 })
+        : numValue.toString(10);
     },
     toDisplayText(value, opts) {
       if (opts.minDigits != null) {
-        return (value as number).toLocaleString(undefined, {
-          maximumFractionDigits: 10,
-          minimumFractionDigits: opts.minDigits,
-        });
+        return num.format(value as number, { max: 10, min: opts.minDigits });
       }
       return undefined;
     },

package/src/controls/input/sd-textfield.ts

@@ -416,18 +416,22 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
   }
 
   onInputPaste(event: ClipboardEvent): void {
+    // preventDefault 로 기본 붙여넣기를 막으므로, 포커스 중 동기화를 건너뛰는 effect 대신
+    // 핸들러에서 직접 input.value 를 모델 기준값으로 되써야 화면에 반영됨 (onBlur 와 동일 패턴)
     event.preventDefault();
+    const inputEl = event.target as HTMLInputElement;
     const text = event.clipboardData?.getData("text/plain").trim();
     if (text == null || text === "") {
       this.value.set(undefined);
+      inputEl.value = "";
       return;
     }
     const parsed = this._handler().parse(text, { format: this.format() });
     if (parsed == null) {
-      const inputEl = event.target as HTMLInputElement;
       inputEl.value = this.controlValue();
       return;
     }
     this.value.set(parsed as SdTextfieldTypes[K] | undefined);
+    inputEl.value = this.controlValue();
   }
 }

package/src/controls/tab/sd-tab-item.ts

@@ -42,10 +42,10 @@ import { SdTab } from "./sd-tab";
     `,
   ],
 })
-export class SdTabItem {
-  private readonly _parentControl = inject<SdTab>(forwardRef(() => SdTab));
+export class SdTabItem<T> {
+  private readonly _parentControl = inject<SdTab<T>>(forwardRef(() => SdTab));
 
-  value = input<any>();
+  value = input.required<T>();
 
   isSelected = computed(() => this._parentControl.value() === this.value());
 

package/src/controls/tab/sd-tab.ts

@@ -20,6 +20,6 @@ import { ChangeDetectionStrategy, Component, model, ViewEncapsulation } from "@a
     <ng-content></ng-content>
   `,
 })
-export class SdTab {
-  value = model<any>();
+export class SdTab<T> {
+  value = model<T>();
 }

package/src/core/config/injectSdSystemConfigResource.ts

@@ -11,7 +11,7 @@ export function injectSdSystemConfigResource<T>(options: { key: Signal<string |
   const res: ResourceRef<T | undefined> = resource({
     params: () => options.key(),
     loader: async ({ params: key }) => {
-      return (await sdSystemConfig.getAsync(`${elTag}.${key}`)) as T | undefined;
+      return sdSystemConfig.getAsync(`${elTag}.${key}`);
     },
   });
 

package/src/core/config/sd-system-config.provider.ts

@@ -20,9 +20,9 @@ export class SdSystemConfigProvider<T> {
     }
   }
 
-  async getAsync(key: keyof T & string) {
+  async getAsync<K extends keyof T & string>(key: K): Promise<T[K] | undefined> {
     if (this.fn) {
-      return this.fn.get(key);
+      return (await this.fn.get(key)) as T[K] | undefined;
     } else {
       return this._sdLocalStorage.get(key);
     }