@simplysm/angular 14.0.30 → 14.0.33

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

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation, } from "@angular/core";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdSwitch } from "../../controls/checkbox/sd-switch";
+import { NgIcon } from "@ng-icons/core";
+import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
+import { SdThemeProvider } from "./sd-theme-provider";
+import * as i0 from "@angular/core";
+export class SdThemeSelector {
+    icons = { tablerPalette, tablerMinus, tablerPlus };
+    sdTheme = inject(SdThemeProvider);
+    isMinFontSize = computed(() => this.sdTheme.fontSize() <= this.sdTheme.fontSizePresets[0], ...(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 */ []));
+    static ɵfac = function SdThemeSelector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdThemeSelector)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls: 19, vars: 15, consts: [[3, "inline", "theme"], [3, "svg"], [1, "p-default"], [1, "flex-row", "gap-sm", "cross-align-center"], [1, "flex-row", "gap-xs", "cross-align-center"], [3, "click", "inline", "theme", "size", "disabled"], [3, "valueChange", "value"]], template: function SdThemeSelector_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "sd-dropdown")(1, "sd-button", 0);
+            i0.ɵɵelement(2, "ng-icon", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "sd-dropdown-popup")(4, "div", 2)(5, "div", 3)(6, "span");
+            i0.ɵɵtext(7, "\uAE00\uC790 \uD06C\uAE30");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 4)(9, "sd-button", 5);
+            i0.ɵɵlistener("click", function SdThemeSelector_Template_sd_button_click_9_listener() { return ctx.sdTheme.decreaseFontSize(); });
+            i0.ɵɵelement(10, "ng-icon", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "span");
+            i0.ɵɵtext(12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "sd-button", 5);
+            i0.ɵɵlistener("click", function SdThemeSelector_Template_sd_button_click_13_listener() { return ctx.sdTheme.increaseFontSize(); });
+            i0.ɵɵelement(14, "ng-icon", 1);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(15, "div", 3)(16, "span");
+            i0.ɵɵtext(17, "\uB2E4\uD06C \uBAA8\uB4DC");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "sd-switch", 6);
+            i0.ɵɵtwoWayListener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.sdTheme.dark, $event) || (ctx.sdTheme.dark = $event); return $event; });
+            i0.ɵɵelementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("inline", true)("theme", "link-gray");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("svg", ctx.icons.tablerPalette);
+            i0.ɵɵadvance(7);
+            i0.ɵɵproperty("inline", true)("theme", "link-gray")("size", "sm")("disabled", ctx.isMinFontSize());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("svg", ctx.icons.tablerMinus);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.sdTheme.fontSize(), "px");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("inline", true)("theme", "link-gray")("size", "sm")("disabled", ctx.isMaxFontSize());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("svg", ctx.icons.tablerPlus);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("value", ctx.sdTheme.dark);
+        } }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdThemeSelector, [{
+        type: Component,
+        args: [{ selector: "sd-theme-selector", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-icon [svg]="icons.tablerPalette" />
+      </sd-button>
+      <sd-dropdown-popup>
+        <div class="p-default">
+          <div class="flex-row gap-sm cross-align-center">
+            <span>글자 크기</span>
+            <div class="flex-row gap-xs cross-align-center">
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMinFontSize()"
+                (click)="sdTheme.decreaseFontSize()"
+              >
+                <ng-icon [svg]="icons.tablerMinus" />
+              </sd-button>
+              <span>{{ sdTheme.fontSize() }}px</span>
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMaxFontSize()"
+                (click)="sdTheme.increaseFontSize()"
+              >
+                <ng-icon [svg]="icons.tablerPlus" />
+              </sd-button>
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>다크 모드</span>
+            <sd-switch [(value)]="sdTheme.dark" />
+          </div>
+        </div>
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  ` }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 63, forbidOrphanRendering: true }); })();

package/dist/features/visual/sd-barcode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-barcode.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-barcode.ts"],"names":[],"mappings":";AAWA,qBAUa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,IAAI,mDAAiC;IACrC,KAAK,0DAAmB;IAIxB,SAAS,CAAC,eAAe,+EAUtB;yCAlBQ,SAAS;2CAAT,SAAS;CAmBrB;AAED,MAAM,MAAM,WAAW,GACnB,SAAS,GAAG,WAAW,GAAG,kBAAkB,GAAG,WAAW,GAAG,OAAO,GACpE,aAAa,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAC/D,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GACpE,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,iBAAiB,GACjE,0BAA0B,GAAG,wBAAwB,GAAG,iCAAiC,GACzF,gBAAgB,GAAG,yBAAyB,GAAG,aAAa,GAAG,sBAAsB,GACrF,gBAAgB,GAAG,yBAAyB,GAAG,oBAAoB,GAAG,6BAA6B,GACnG,kBAAkB,GAAG,2BAA2B,GAAG,eAAe,GAAG,YAAY,GACjF,uBAAuB,GAAG,gCAAgC,GAAG,SAAS,GAAG,OAAO,GAChF,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,GAAG,eAAe,GACzF,SAAS,GAAG,kBAAkB,GAAG,QAAQ,GAAG,eAAe,GAAG,0BAA0B,GACxF,iBAAiB,GAAG,aAAa,GAAG,YAAY,GAAG,wBAAwB,GAAG,WAAW,GACzF,QAAQ,GAAG,eAAe,GAAG,gBAAgB,GAAG,aAAa,GAAG,YAAY,GAAG,gBAAgB,GAC/F,2BAA2B,GAAG,iBAAiB,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,GAC1F,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GACvF,WAAW,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GACnF,aAAa,GAAG,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,eAAe,GAC9E,YAAY,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GACpF,QAAQ,GAAG,qBAAqB,GAAG,KAAK,GAAG,wBAAwB,GAAG,WAAW,GACjF,QAAQ,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,gBAAgB,GAAG,WAAW,GAChF,MAAM,GAAG,eAAe,GAAG,MAAM,GAAG,eAAe,CAAC"}

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

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+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 */ []));
+    // bwip-js는 바코드 데이터를 기하학적 SVG로 변환하는 신뢰할 수 있는 라이브러리이므로
+    // bypassSecurityTrustHtml을 사용한다. 사용자 HTML은 전달되지 않는다.
+    _trustedSvgHtml = computed(() => {
+        const text = this.value();
+        if (text == null || text === "") {
+            return "";
+        }
+        const svg = bwipjs.toSVG({
+            bcid: this.type(),
+            text,
+        });
+        return this._sanitizer.bypassSecurityTrustHtml(svg);
+    }, ...(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 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdBarcode, [{
+        type: Component,
+        args: [{
+                selector: "sd-barcode",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [],
+                template: `
+    <div [innerHTML]="_trustedSvgHtml()"></div>
+  `,
+            }]
+    }], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBarcode, { className: "SdBarcode", filePath: "packages/angular/src/features/visual/sd-barcode.ts", lineNumber: 22, forbidOrphanRendering: true }); })();

package/dist/features/visual/sd-calendar.d.ts

@@ -0,0 +1,20 @@
+import { TemplateRef } from "@angular/core";
+import { DateOnly } from "@simplysm/core-common";
+import { type SdItemOfTemplateContext } from "../../core/template/sd-item-of-template";
+import * as i0 from "@angular/core";
+export declare class SdCalendar<T> {
+    items: import("@angular/core").InputSignal<T[]>;
+    getItemDateFn: import("@angular/core").InputSignal<(item: T, index: number) => DateOnly>;
+    yearMonth: import("@angular/core").InputSignal<DateOnly>;
+    itemTplRef: import("@angular/core").Signal<TemplateRef<SdItemOfTemplateContext<T>>>;
+    weekStartDay: import("@angular/core").InputSignal<number>;
+    minDaysInFirstWeek: import("@angular/core").InputSignal<number>;
+    weeks: string[];
+    dataTable: import("@angular/core").Signal<{
+        date: DateOnly;
+        items: T[];
+    }[][]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCalendar<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCalendar<any>, "sd-calendar", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "getItemDateFn": { "alias": "getItemDateFn"; "required": true; "isSignal": true; }; "yearMonth": { "alias": "yearMonth"; "required": false; "isSignal": true; }; "weekStartDay": { "alias": "weekStartDay"; "required": false; "isSignal": true; }; "minDaysInFirstWeek": { "alias": "minDaysInFirstWeek"; "required": false; "isSignal": true; }; }, {}, ["itemTplRef"], never, true, never>;
+}
+//# sourceMappingURL=sd-calendar.d.ts.map

package/dist/features/visual/sd-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-calendar.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,WAAW,EAEZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EACL,KAAK,uBAAuB,EAE7B,MAAM,yCAAyC,CAAC;;AAGjD,qBAiHa,UAAU,CAAC,CAAC;IACvB,KAAK,2CAAyB;IAC9B,aAAa,6CAAyB,CAAC,SAAS,MAAM,KAAK,QAAQ,EAAI;IAEvE,SAAS,gDAAmC;IAE5C,UAAU,0EAGR;IAEF,YAAY,8CAAY;IACxB,kBAAkB,8CAAY;IAE9B,KAAK,WAAuC;IAE5C,SAAS;cAEC,QAAQ;eACP,CAAC,EAAE;WAqCX;yCAxDQ,UAAU;2CAAV,UAAU;CAyDtB"}

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

@@ -0,0 +1,189 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, input, TemplateRef, ViewEncapsulation, } from "@angular/core";
+import { DateOnly } from "@simplysm/core-common";
+import { FormatPipe } from "../../core/format.pipe";
+import { SdItemOfTemplate, } from "../../core/template/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 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;
+    const ɵ$index_30_r3 = i0.ɵɵnextContext().$index;
+    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 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, SdCalendar_For_19_For_2_For_6_Template, 1, 6, null, 3, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const data_r5 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("not-current", data_r5.date.month !== ctx_r3.yearMonth().month);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 3, data_r5.date, "d"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(data_r5.items);
+} }
+function SdCalendar_For_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    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 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(SdItemOfTemplate, { read: TemplateRef });
+    weekStartDay = input(0, ...(ngDevMode ? [{ debugName: "weekStartDay" }] : /* istanbul ignore next */ []));
+    minDaysInFirstWeek = input(1, ...(ngDevMode ? [{ debugName: "minDaysInFirstWeek" }] : /* istanbul ignore next */ []));
+    weeks = ["일", "월", "화", "수", "목", "금", "토"];
+    dataTable = computed(() => {
+        const result = [];
+        // Build a Map<tick, T[]> once for O(1) lookup per cell
+        const itemsByTick = new Map();
+        const getDateFn = this.getItemDateFn();
+        for (let i = 0; i < this.items().length; i++) {
+            const item = this.items()[i];
+            const tick = getDateFn(item, i).tick;
+            const arr = itemsByTick.get(tick);
+            if (arr !== undefined) {
+                arr.push(item);
+            }
+            else {
+                itemsByTick.set(tick, [item]);
+            }
+        }
+        const firstDate = this.yearMonth().getWeekSeqStartDate(this.weekStartDay(), this.minDaysInFirstWeek());
+        for (let r = 0; r < 6; r++) {
+            const row = [];
+            for (let c = 0; c < 7; c++) {
+                const date = firstDate.addDays(r * 7 + c);
+                row.push({
+                    date,
+                    items: itemsByTick.get(date.tick) ?? [],
+                });
+            }
+            result.push(row);
+        }
+        return result;
+    }, ...(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);
+        } 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 SdCalendar_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "table")(1, "thead")(2, "tr")(3, "th");
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "th");
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "th");
+            i0.ɵɵtext(8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "th");
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "th");
+            i0.ɵɵtext(12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "th");
+            i0.ɵɵtext(14);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "th");
+            i0.ɵɵtext(16);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(17, "tbody");
+            i0.ɵɵrepeaterCreate(18, SdCalendar_For_19_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1(" ", ctx.weeks[ctx.weekStartDay() % 7], " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 1) % 7], " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 2) % 7], " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 3) % 7], " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 4) % 7], " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 5) % 7], " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 6) % 7], " ");
+            i0.ɵɵadvance(2);
+            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(SdCalendar, [{
+        type: Component,
+        args: [{ selector: "sd-calendar", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [FormatPipe, NgTemplateOutlet], template: `
+    <table>
+      <thead>
+        <tr>
+          <th>
+            {{ weeks[weekStartDay() % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 1) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 2) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 3) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 4) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 5) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 6) % 7] }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of dataTable(); let r = $index; track r) {
+          <tr>
+            @for (data of row; let c = $index; track c) {
+              <td [class.not-current]="data.date.month !== yearMonth().month">
+                <div class="day">
+                  {{ data.date | format: "d" }}
+                </div>
+                <div class="content">
+                  @for (item of data.items; track $index) {
+                    <ng-template
+                      [ngTemplateOutlet]="itemTplRef()"
+                      [ngTemplateOutletContext]="{
+                        $implicit: item,
+                        item: item,
+                        index: r * 7 + c,
+                        depth: 0,
+                      }"
+                    ></ng-template>
+                  }
+                </div>
+              </td>
+            }
+          </tr>
+        }
+      </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(() => 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/features/visual/sd-calendar.ts", lineNumber: 131, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-echarts.d.ts","sourceRoot":"","sources":["../../../src/features/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/features/visual/sd-echarts.js

@@ -0,0 +1,55 @@
+import { afterNextRender, ChangeDetectionStrategy, Component, DestroyRef, effect, ElementRef, inject, input, signal, ViewEncapsulation, } from "@angular/core";
+import * as echarts from "echarts";
+import * as i0 from "@angular/core";
+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 */ []));
+    constructor() {
+        const elRef = inject(ElementRef);
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const chart = echarts.init(elRef.nativeElement, null, { renderer: "svg" });
+            this._chart.set(chart);
+            destroyRef.onDestroy(() => chart.dispose());
+        });
+        effect(() => {
+            const chart = this._chart();
+            if (chart == null)
+                return;
+            chart.setOption(this.option(), { notMerge: this.notMerge() });
+        });
+        effect(() => {
+            const chart = this._chart();
+            if (chart == null)
+                return;
+            if (this.loading()) {
+                chart.showLoading();
+            }
+            else {
+                chart.hideLoading();
+            }
+        });
+    }
+    onHostResize() {
+        this._chart()?.resize();
+    }
+    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(SdEcharts, [{
+        type: Component,
+        args: [{ selector: "sd-echarts", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
+                    "(sdResize)": "onHostResize()",
+                }, template: `
+    <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(SdEcharts, { className: "SdEcharts", filePath: "packages/angular/src/features/visual/sd-echarts.ts", lineNumber: 36, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-label.d.ts","sourceRoot":"","sources":["../../../src/features/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/features/visual/sd-label.js

@@ -0,0 +1,27 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
+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 */ []));
+    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) {
+            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 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(SdLabel, [{
+        type: Component,
+        args: [{ selector: "sd-label", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
+                    "[attr.data-sd-theme]": "theme()",
+                    "[style.background]": "color()",
+                    "[attr.data-sd-clickable]": "clickable()",
+                }, template: `
+    <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(SdLabel, { className: "SdLabel", filePath: "packages/angular/src/features/visual/sd-label.ts", lineNumber: 60, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-note.d.ts","sourceRoot":"","sources":["../../../src/features/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/features/visual/sd-note.js

@@ -0,0 +1,26 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
+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 */ []));
+    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) {
+            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 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(SdNote, [{
+        type: Component,
+        args: [{ selector: "sd-note", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
+                    "[attr.data-sd-theme]": "theme()",
+                    "[attr.data-sd-size]": "size()",
+                    "[attr.data-sd-inset]": "inset()",
+                }, template: `
+    <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(SdNote, { className: "SdNote", filePath: "packages/angular/src/features/visual/sd-note.ts", lineNumber: 60, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.d.ts","sourceRoot":"","sources":["../../../src/features/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/features/visual/sd-progress.js

@@ -0,0 +1,39 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from "@angular/core";
+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 */ []));
+    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 SdProgress_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵtext(1);
+            i0.ɵɵpipe(2, "percent");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElement(3, "div", 1);
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 3, ctx.value(), "1.0-2"), " ");
+            i0.ɵɵadvance(2);
+            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(SdProgress, [{
+        type: Component,
+        args: [{ selector: "sd-progress", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [PercentPipe], host: {
+                    "[attr.data-sd-inset]": "inset()",
+                    "[attr.data-sd-size]": "size()",
+                    "[attr.data-sd-theme]": "theme()",
+                }, template: `
+    <div class="_content tx-right">
+      {{ value() | percent: "1.0-2" }}
+    </div>
+    <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(SdProgress, { className: "SdProgress", filePath: "packages/angular/src/features/visual/sd-progress.ts", lineNumber: 81, forbidOrphanRendering: true }); })();