@simplysm/angular 14.0.26 → 14.0.28

package/dist/ui/visual/{sd-calendar.control.js → sd-calendar.js}

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, computed, contentChild, input, TemplateRef, ViewEncapsulation, } from "@angular/core";
 import { DateOnly } from "@simplysm/core-common";
 import { FormatPipe } from "../../core/pipes/format.pipe";
-import { SdItemOfTemplateDirective, } from "../../core/directives/sd-item-of-template.directive";
+import { SdItemOfTemplate, } from "../../core/directives/sd-item-of-template";
 import { NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
 const _c0 = (a0, a1, a2) => ({ $implicit: a0, item: a1, index: a2, depth: 0 });
-function SdCalendarControl_For_19_For_2_For_6_ng_template_0_Template(rf, ctx) { }
-function SdCalendarControl_For_19_For_2_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SdCalendarControl_For_19_For_2_For_6_ng_template_0_Template, 0, 0, "ng-template", 3);
+function SdCalendar_For_19_For_2_For_6_ng_template_0_Template(rf, ctx) { }
+function SdCalendar_For_19_For_2_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdCalendar_For_19_For_2_For_6_ng_template_0_Template, 0, 0, "ng-template", 3);
 } if (rf & 2) {
     const item_r1 = ctx.$implicit;
     const ɵ$index_33_r2 = i0.ɵɵnextContext().$index;
@@ -15,13 +15,13 @@ function SdCalendarControl_For_19_For_2_For_6_Template(rf, ctx) { if (rf & 1) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.itemTplRef())("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c0, item_r1, item_r1, ɵ$index_30_r3 * 7 + ɵ$index_33_r2));
 } }
-function SdCalendarControl_For_19_For_2_Template(rf, ctx) { if (rf & 1) {
+function SdCalendar_For_19_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "td")(1, "div", 1);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "format");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 2);
-    i0.ɵɵrepeaterCreate(5, SdCalendarControl_For_19_For_2_For_6_Template, 1, 6, null, 3, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(5, SdCalendar_For_19_For_2_For_6_Template, 1, 6, null, 3, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const data_r5 = ctx.$implicit;
@@ -32,20 +32,20 @@ function SdCalendarControl_For_19_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(data_r5.items);
 } }
-function SdCalendarControl_For_19_Template(rf, ctx) { if (rf & 1) {
+function SdCalendar_For_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵrepeaterCreate(1, SdCalendarControl_For_19_For_2_Template, 7, 6, "td", 0, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(1, SdCalendar_For_19_For_2_Template, 7, 6, "td", 0, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const row_r6 = ctx.$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(row_r6);
 } }
-export class SdCalendarControl {
+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 */ []));
-    itemTplRef = contentChild.required(SdItemOfTemplateDirective, { read: TemplateRef });
+    itemTplRef = contentChild.required(SdItemOfTemplate, { read: TemplateRef });
     weekStartDay = input(0, ...(ngDevMode ? [{ debugName: "weekStartDay" }] : /* istanbul ignore next */ []));
     minDaysInFirstWeek = input(1, ...(ngDevMode ? [{ debugName: "minDaysInFirstWeek" }] : /* istanbul ignore next */ []));
     weeks = ["일", "월", "화", "수", "목", "금", "토"];
@@ -79,12 +79,12 @@ export class SdCalendarControl {
         }
         return result;
     }, ...(ngDevMode ? [{ debugName: "dataTable" }] : /* istanbul ignore next */ []));
-    static ɵfac = function SdCalendarControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCalendarControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCalendarControl, selectors: [["sd-calendar"]], contentQueries: function SdCalendarControl_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuerySignal(dirIndex, ctx.itemTplRef, SdItemOfTemplateDirective, 5, TemplateRef);
+    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);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, inputs: { items: [1, "items"], getItemDateFn: [1, "getItemDateFn"], yearMonth: [1, "yearMonth"], weekStartDay: [1, "weekStartDay"], minDaysInFirstWeek: [1, "minDaysInFirstWeek"] }, decls: 20, vars: 7, consts: [[3, "not-current"], [1, "day"], [1, "content"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdCalendarControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { items: [1, "items"], getItemDateFn: [1, "getItemDateFn"], yearMonth: [1, "yearMonth"], weekStartDay: [1, "weekStartDay"], minDaysInFirstWeek: [1, "minDaysInFirstWeek"] }, decls: 20, vars: 7, consts: [[3, "not-current"], [1, "day"], [1, "content"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdCalendar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "table")(1, "thead")(2, "tr")(3, "th");
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
@@ -107,7 +107,7 @@ export class SdCalendarControl {
             i0.ɵɵtext(16);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(17, "tbody");
-            i0.ɵɵrepeaterCreate(18, SdCalendarControl_For_19_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵrepeaterCreate(18, SdCalendar_For_19_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(4);
@@ -128,7 +128,7 @@ export class SdCalendarControl {
             i0.ɵɵrepeater(ctx.dataTable());
         } }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["sd-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 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCalendarControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCalendar, [{
         type: Component,
         args: [{ selector: "sd-calendar", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [FormatPipe, NgTemplateOutlet], template: `
     <table>
@@ -185,5 +185,5 @@ export class SdCalendarControl {
       </tbody>
     </table>
   `, styles: ["sd-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}"] }]
-    }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], getItemDateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemDateFn", required: true }] }], yearMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearMonth", required: false }] }], itemTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], weekStartDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartDay", required: false }] }], minDaysInFirstWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDaysInFirstWeek", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCalendarControl, { className: "SdCalendarControl", filePath: "packages/angular/src/ui/visual/sd-calendar.control.ts", lineNumber: 131, forbidOrphanRendering: true }); })();
+    }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], getItemDateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemDateFn", required: true }] }], yearMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearMonth", required: false }] }], itemTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], weekStartDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartDay", required: false }] }], minDaysInFirstWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDaysInFirstWeek", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCalendar, { className: "SdCalendar", filePath: "packages/angular/src/ui/visual/sd-calendar.ts", lineNumber: 131, forbidOrphanRendering: true }); })();

package/dist/ui/visual/sd-echarts.d.ts

@@ -0,0 +1,13 @@
+import * as echarts from "echarts";
+import * as i0 from "@angular/core";
+export declare class SdEcharts {
+    private readonly _chart;
+    option: import("@angular/core").InputSignal<echarts.EChartsOption>;
+    notMerge: import("@angular/core").InputSignal<boolean>;
+    loading: import("@angular/core").InputSignal<boolean>;
+    constructor();
+    onHostResize(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdEcharts, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdEcharts, "sd-echarts", never, { "option": { "alias": "option"; "required": true; "isSignal": true; }; "notMerge": { "alias": "notMerge"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=sd-echarts.d.ts.map

package/dist/ui/visual/sd-echarts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-echarts.d.ts","sourceRoot":"","sources":["../../../src/ui/visual/sd-echarts.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;;AAEnC,qBAqBa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAkD;IAEzE,MAAM,6DAA2C;IACjD,QAAQ,+CAAgB;IACxB,OAAO,+CAAgB;;IA6BvB,YAAY;yCAlCD,SAAS;2CAAT,SAAS;CAqCrB"}

package/dist/ui/visual/{sd-echarts.control.js → sd-echarts.js}

@@ -2,7 +2,7 @@ import { afterNextRender, ChangeDetectionStrategy, Component, DestroyRef, effect
 import * as echarts from "echarts";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-export class SdEchartsControl {
+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 */ []));
@@ -36,15 +36,15 @@ export class SdEchartsControl {
     onHostResize() {
         this._chart()?.resize();
     }
-    static ɵfac = function SdEchartsControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdEchartsControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdEchartsControl, selectors: [["sd-echarts"]], hostBindings: function SdEchartsControl_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("sdResize", function SdEchartsControl_sdResize_HostBindingHandler() { return ctx.onHostResize(); });
-        } }, inputs: { option: [1, "option"], notMerge: [1, "notMerge"], loading: [1, "loading"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdEchartsControl_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function SdEcharts_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdEcharts)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdEcharts, selectors: [["sd-echarts"]], hostBindings: function SdEcharts_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("sdResize", function SdEcharts_sdResize_HostBindingHandler() { return ctx.onHostResize(); });
+        } }, inputs: { option: [1, "option"], notMerge: [1, "notMerge"], loading: [1, "loading"] }, 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 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdEchartsControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdEcharts, [{
         type: Component,
         args: [{ selector: "sd-echarts", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
                     "(sdResize)": "onHostResize()",
@@ -52,4 +52,4 @@ export class SdEchartsControl {
     <ng-content></ng-content>
   `, styles: ["sd-echarts {\n  display: block;\n  height: 100%;\n}"] }]
     }], () => [], { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], notMerge: [{ type: i0.Input, args: [{ isSignal: true, alias: "notMerge", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdEchartsControl, { className: "SdEchartsControl", filePath: "packages/angular/src/ui/visual/sd-echarts.control.ts", lineNumber: 36, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdEcharts, { className: "SdEcharts", filePath: "packages/angular/src/ui/visual/sd-echarts.ts", lineNumber: 36, forbidOrphanRendering: true }); })();

package/dist/ui/visual/sd-label.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SdLabel {
+    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
+    color: import("@angular/core").InputSignal<string | undefined>;
+    clickable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdLabel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdLabel, "sd-label", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=sd-label.d.ts.map

package/dist/ui/visual/sd-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-label.d.ts","sourceRoot":"","sources":["../../../src/ui/visual/sd-label.ts"],"names":[],"mappings":";AAQA,qBAmDa,OAAO;IAClB,KAAK,8IAED;IACJ,KAAK,0DAAmB;IACxB,SAAS,qEAAiD;yCAL/C,OAAO;2CAAP,OAAO;CAMnB"}

package/dist/ui/visual/{sd-label.control.js → sd-label.js}

@@ -1,20 +1,20 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-export class SdLabelControl {
+export class SdLabel {
     theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = function SdLabelControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdLabelControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdLabelControl, selectors: [["sd-label"]], hostVars: 4, hostBindings: function SdLabelControl_HostBindings(rf, ctx) { if (rf & 2) {
+    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) {
             i0.ɵɵattribute("data-sd-theme", ctx.theme())("data-sd-clickable", ctx.clickable());
             i0.ɵɵstyleProp("background", ctx.color());
-        } }, inputs: { theme: [1, "theme"], color: [1, "color"], clickable: [1, "clickable"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdLabelControl_Template(rf, ctx) { if (rf & 1) {
+        } }, 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: ["sd-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 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabelControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabel, [{
         type: Component,
         args: [{ selector: "sd-label", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
                     "[attr.data-sd-theme]": "theme()",
@@ -24,4 +24,4 @@ export class SdLabelControl {
     <ng-content></ng-content>
   `, styles: ["sd-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}"] }]
     }], null, { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdLabelControl, { className: "SdLabelControl", filePath: "packages/angular/src/ui/visual/sd-label.control.ts", lineNumber: 60, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdLabel, { className: "SdLabel", filePath: "packages/angular/src/ui/visual/sd-label.ts", lineNumber: 60, forbidOrphanRendering: true }); })();

package/dist/ui/visual/sd-note.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SdNote {
+    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
+    size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
+    inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdNote, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdNote, "sd-note", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=sd-note.d.ts.map

package/dist/ui/visual/sd-note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-note.d.ts","sourceRoot":"","sources":["../../../src/ui/visual/sd-note.ts"],"names":[],"mappings":";AAQA,qBAmDa,MAAM;IACjB,KAAK,8IAED;IACJ,IAAI,+DAAwB;IAC5B,KAAK,qEAAiD;yCAL3C,MAAM;2CAAN,MAAM;CAMlB"}

package/dist/ui/visual/{sd-note.control.js → sd-note.js}

@@ -1,19 +1,19 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-export class SdNoteControl {
+export class SdNote {
     theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = function SdNoteControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdNoteControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdNoteControl, selectors: [["sd-note"]], hostVars: 3, hostBindings: function SdNoteControl_HostBindings(rf, ctx) { if (rf & 2) {
+    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) {
             i0.ɵɵattribute("data-sd-theme", ctx.theme())("data-sd-size", ctx.size())("data-sd-inset", ctx.inset());
-        } }, inputs: { theme: [1, "theme"], size: [1, "size"], inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdNoteControl_Template(rf, ctx) { if (rf & 1) {
+        } }, 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: ["sd-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 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNoteControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNote, [{
         type: Component,
         args: [{ selector: "sd-note", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
                     "[attr.data-sd-theme]": "theme()",
@@ -23,4 +23,4 @@ export class SdNoteControl {
     <ng-content></ng-content>
   `, styles: ["sd-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}"] }]
     }], null, { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNoteControl, { className: "SdNoteControl", filePath: "packages/angular/src/ui/visual/sd-note.control.ts", lineNumber: 60, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNote, { className: "SdNote", filePath: "packages/angular/src/ui/visual/sd-note.ts", lineNumber: 60, forbidOrphanRendering: true }); })();

package/dist/ui/visual/sd-progress.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export declare class SdProgress {
+    inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
+    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray">;
+    value: import("@angular/core").InputSignal<number>;
+    _barWidth: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdProgress, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdProgress, "sd-progress", never, { "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-progress.d.ts.map

package/dist/ui/visual/sd-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.d.ts","sourceRoot":"","sources":["../../../src/ui/visual/sd-progress.ts"],"names":[],"mappings":";AAUA,qBAsEa,UAAU;IACrB,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,kIAED;IAEJ,KAAK,8CAA4B;IAEjC,SAAS,yCAAwE;yCATtE,UAAU;2CAAV,UAAU;CAUtB"}

package/dist/ui/visual/{sd-progress.control.js → sd-progress.js}

@@ -1,16 +1,16 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from "@angular/core";
 import { PercentPipe } from "@angular/common";
 import * as i0 from "@angular/core";
-export class SdProgressControl {
+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 */ []));
-    static ɵfac = function SdProgressControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdProgressControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdProgressControl, selectors: [["sd-progress"]], hostVars: 3, hostBindings: function SdProgressControl_HostBindings(rf, ctx) { if (rf & 2) {
+    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());
-        } }, inputs: { inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"], value: [1, "value"] }, decls: 4, vars: 6, consts: [[1, "_content", "tx-right"], [1, "_progress"]], template: function SdProgressControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"], value: [1, "value"] }, decls: 4, vars: 6, consts: [[1, "_content", "tx-right"], [1, "_progress"]], template: function SdProgress_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵtext(1);
             i0.ɵɵpipe(2, "percent");
@@ -23,7 +23,7 @@ export class SdProgressControl {
             i0.ɵɵstyleProp("width", ctx._barWidth());
         } }, dependencies: [PercentPipe], styles: ["sd-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 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgressControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgress, [{
         type: Component,
         args: [{ selector: "sd-progress", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [PercentPipe], host: {
                     "[attr.data-sd-inset]": "inset()",
@@ -36,4 +36,4 @@ export class SdProgressControl {
     <div class="_progress" [style.width]="_barWidth()"></div>
   `, styles: ["sd-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}"] }]
     }], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdProgressControl, { className: "SdProgressControl", filePath: "packages/angular/src/ui/visual/sd-progress.control.ts", lineNumber: 81, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdProgress, { className: "SdProgress", filePath: "packages/angular/src/ui/visual/sd-progress.ts", lineNumber: 81, forbidOrphanRendering: true }); })();

package/package.json

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

package/src/core/directives/{sd-events.directive.ts → sd-events.ts}

@@ -1,5 +1,5 @@
 import { Directive, output } from "@angular/core";
-import type { ISdResizeEvent } from "../plugins/events/sd-resize-event.plugin";
+import type { SdResizeEvent } from "../plugins/events/sd-resize-event.plugin";
 
 @Directive({
   selector: `
@@ -20,7 +20,7 @@ import type { ISdResizeEvent } from "../plugins/events/sd-resize-event.plugin";
   `,
   standalone: true,
 })
-export class SdEventsDirective {
+export class SdEvents {
   // 클릭
   "click.capture" = output<MouseEvent>();
   "click.once" = output<MouseEvent>();
@@ -70,7 +70,7 @@ export class SdEventsDirective {
   "animationend.once" = output<AnimationEvent>();
 
   // 커스텀 이벤트
-  "sdResize" = output<ISdResizeEvent>();
+  "sdResize" = output<SdResizeEvent>();
 
   // 커맨드 이벤트
   "sdRefreshCommand" = output<KeyboardEvent>();

package/src/core/directives/{sd-invalid.directive.ts → sd-invalid.ts}

@@ -2,11 +2,11 @@ import { Directive, input } from "@angular/core";
 import { setupInvalid } from "../utils/setups/setupInvalid";
 
 @Directive({
-  selector: "[sd-invalid]",
+  selector: "[sdInvalid]",
   standalone: true,
 })
-export class SdInvalidDirective {
-  invalidMessage = input.required<string>({ alias: "sd-invalid" });
+export class SdInvalid {
+  invalidMessage = input.required<string>({ alias: "sdInvalid" });
 
   constructor() {
     setupInvalid(() => this.invalidMessage());

package/src/core/directives/{sd-item-of-template.directive.ts → sd-item-of-template.ts}

@@ -4,11 +4,11 @@ import { Directive, input } from "@angular/core";
   selector: "ng-template[itemOf]",
   standalone: true,
 })
-export class SdItemOfTemplateDirective<TItem> {
+export class SdItemOfTemplate<TItem> {
   itemOf = input.required<TItem[]>();
 
   static ngTemplateContextGuard<TContextItem>(
-    _dir: SdItemOfTemplateDirective<TContextItem>,
+    _dir: SdItemOfTemplate<TContextItem>,
     _ctx: unknown,
   ): _ctx is SdItemOfTemplateContext<TContextItem> {
     return true;

package/src/core/directives/{sd-ripple.directive.ts → sd-ripple.ts}

@@ -2,11 +2,11 @@ import { booleanAttribute, Directive, input } from "@angular/core";
 import { setupRipple } from "../utils/setups/setupRipple";
 
 @Directive({
-  selector: "[sd-ripple]",
+  selector: "[sdRipple]",
   standalone: true,
 })
-export class SdRippleDirective {
-  enabled = input.required({ alias: "sd-ripple", transform: booleanAttribute });
+export class SdRipple {
+  enabled = input.required({ alias: "sdRipple", transform: booleanAttribute });
 
   constructor() {
     setupRipple(() => this.enabled());

package/src/core/directives/{sd-router-link.directive.ts → sd-router-link.ts}

@@ -3,14 +3,14 @@ import { Router } from "@angular/router";
 import { SdNavigateWindowProvider } from "../providers/sd-navigate-window.provider";
 
 @Directive({
-  selector: "[sd-router-link]",
+  selector: "[sdRouterLink]",
   standalone: true,
   host: {
     "[style.cursor]": "option() ? 'pointer' : ''",
     "(click)": "onClick($event)",
   },
 })
-export class SdRouterLinkDirective {
+export class SdRouterLink {
   private readonly _router = inject(Router);
   private readonly _navWindow = inject(SdNavigateWindowProvider);
 
@@ -26,7 +26,7 @@ export class SdRouterLinkDirective {
         queryParams?: Record<string, string>;
       }
     | undefined
-  >(undefined, { alias: "sd-router-link" });
+  >(undefined, { alias: "sdRouterLink" });
 
   async onClick(event: MouseEvent): Promise<void> {
     const option = this.option();

package/src/core/directives/{sd-show-effect.directive.ts → sd-show-effect.ts}

@@ -2,11 +2,11 @@ import { booleanAttribute, Directive, input } from "@angular/core";
 import { setupRevealOnShow } from "../utils/setups/setupRevealOnShow";
 
 @Directive({
-  selector: "[sd-show-effect]",
+  selector: "[sdShowEffect]",
   standalone: true,
 })
-export class SdShowEffectDirective {
-  enabled = input.required({ alias: "sd-show-effect", transform: booleanAttribute });
+export class SdShowEffect {
+  enabled = input.required({ alias: "sdShowEffect", transform: booleanAttribute });
   sdShowEffectType = input<"l2r" | "t2b">("t2b");
 
   constructor() {

package/src/core/directives/{sd-typed-template.directive.ts → sd-typed-template.ts}

@@ -4,11 +4,11 @@ import { Directive, input } from "@angular/core";
   selector: "ng-template[typed]",
   standalone: true,
 })
-export class SdTypedTemplateDirective<T> {
+export class SdTypedTemplate<T> {
   typed = input.required<T>();
 
   static ngTemplateContextGuard<TypeToken>(
-    _dir: SdTypedTemplateDirective<TypeToken>,
+    _dir: SdTypedTemplate<TypeToken>,
     _ctx: unknown,
   ): _ctx is TypeToken {
     return true;

package/src/core/plugins/events/sd-intersection-event.plugin.ts

@@ -15,7 +15,7 @@ export class SdIntersectionEventPlugin extends EventManagerPlugin {
   override addEventListener(
     element: HTMLElement,
     eventName: string,
-    handler: (entry: ISdIntersectionEvent) => void,
+    handler: (entry: SdIntersectionEvent) => void,
   ): () => void {
     const observer = new IntersectionObserver((entries) => {
       if (entries.length === 0) return;
@@ -30,6 +30,6 @@ export class SdIntersectionEventPlugin extends EventManagerPlugin {
   }
 }
 
-export interface ISdIntersectionEvent {
+export interface SdIntersectionEvent {
   entry: IntersectionObserverEntry;
 }

package/src/core/plugins/events/sd-resize-event.plugin.ts

@@ -15,7 +15,7 @@ export class SdResizeEventPlugin extends EventManagerPlugin {
   override addEventListener(
     element: HTMLElement,
     eventName: string,
-    handler: (entry: ISdResizeEvent) => void,
+    handler: (entry: SdResizeEvent) => void,
   ): () => void {
     let prevWidth = 0;
     let prevHeight = 0;
@@ -53,7 +53,7 @@ export class SdResizeEventPlugin extends EventManagerPlugin {
   }
 }
 
-export interface ISdResizeEvent {
+export interface SdResizeEvent {
   heightChanged: boolean;
   widthChanged: boolean;
   target: Element;

package/src/core/providers/sd-activated-modal.provider.ts

@@ -1,11 +1,11 @@
 import { Injectable, signal } from "@angular/core";
-import type { ISdModal } from "../../ui/overlay/modal/sd-modal.provider";
+import type { SdModalContentDef } from "../../ui/overlay/modal/sd-modal.provider";
 
 /**
  * 모달 내부에서 inject하여 사용하는 프로바이더
  */
 @Injectable()
-export class SdActivatedModalProvider<T extends ISdModal<any> = ISdModal<any>> {
+export class SdActivatedModalProvider<T extends SdModalContentDef<any> = SdModalContentDef<any>> {
   modalComponent = signal<any>(undefined);
   contentComponent = signal<T | undefined>(undefined);
   canDeactiveFn: () => boolean = () => true;