@simplysm/angular 14.0.1 → 14.0.4

package/dist/ui/visual/sd-calendar.control.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/pipes/format.pipe";
+import { SdItemOfTemplateDirective, } from "../../core/directives/sd-item-of-template.directive";
+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);
+} 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 SdCalendarControl_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.ɵɵ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 SdCalendarControl_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r6 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(row_r6);
+} }
+export class SdCalendarControl {
+    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 });
+    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 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);
+        } 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) {
+            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, SdCalendarControl_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(SdCalendarControl, [{
+        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(() => 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 }); })();

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

@@ -0,0 +1,13 @@
+import * as echarts from "echarts";
+import * as i0 from "@angular/core";
+export declare class SdEchartsControl {
+    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<SdEchartsControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdEchartsControl, "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.control.d.ts.map

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

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

package/dist/ui/visual/sd-echarts.control.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 SdEchartsControl {
+    _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 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) {
+            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, [{
+        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(SdEchartsControl, { className: "SdEchartsControl", filePath: "packages/angular/src/ui/visual/sd-echarts.control.ts", lineNumber: 36 }); })();

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SdLabelControl {
+    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<SdLabelControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdLabelControl, "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.control.d.ts.map

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

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

package/dist/ui/visual/sd-label.control.js

@@ -0,0 +1,27 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class SdLabelControl {
+    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) {
+            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) {
+            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, [{
+        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(SdLabelControl, { className: "SdLabelControl", filePath: "packages/angular/src/ui/visual/sd-label.control.ts", lineNumber: 60 }); })();

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SdNoteControl {
+    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<SdNoteControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdNoteControl, "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.control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-note.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\ui\\visual\\sd-note.control.ts"],"names":[],"mappings":";AAQA,qBAmDa,aAAa;IACxB,KAAK,8IAED;IACJ,IAAI,+DAAwB;IAC5B,KAAK,qEAAiD;yCAL3C,aAAa;2CAAb,aAAa;CAMzB"}

package/dist/ui/visual/sd-note.control.js

@@ -0,0 +1,26 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class SdNoteControl {
+    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) {
+            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) {
+            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, [{
+        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(SdNoteControl, { className: "SdNoteControl", filePath: "packages/angular/src/ui/visual/sd-note.control.ts", lineNumber: 60 }); })();

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class SdProgressControl {
+    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>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdProgressControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdProgressControl, "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.control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\ui\\visual\\sd-progress.control.ts"],"names":[],"mappings":";AASA,qBAsEa,iBAAiB;IAC5B,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,kIAED;IAEJ,KAAK,8CAA4B;yCAPtB,iBAAiB;2CAAjB,iBAAiB;CAQ7B"}

package/dist/ui/visual/sd-progress.control.js

@@ -0,0 +1,38 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
+import { PercentPipe } from "@angular/common";
+import * as i0 from "@angular/core";
+export class SdProgressControl {
+    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 */ []));
+    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) {
+            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) {
+            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.value() * 100 + "%");
+        } }, 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, [{
+        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]="value() * 100 + '%'"></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: 80 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.1",
+  "version": "14.0.4",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -20,28 +20,46 @@
   ],
   "sideEffects": [
     "./src/index.ts",
-    "./dist/index.js"
+    "./dist/index.js",
+    "./dist/**/*.css"
   ],
   "dependencies": {
-    "@angular/animations": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@angular/service-worker": "^21.0.0",
-    "@ng-icons/core": "^32.5.0",
-    "@ng-icons/tabler-icons": "^32.4.0",
+    "@angular/animations": "^21.2.6",
+    "@angular/common": "^21.2.6",
+    "@angular/core": "^21.2.6",
+    "@angular/platform-browser": "^21.2.6",
+    "@angular/router": "^21.2.6",
+    "@angular/service-worker": "^21.2.6",
+    "@ng-icons/core": "^33.2.0",
+    "@ng-icons/tabler-icons": "^33.2.0",
+    "@tiptap/core": "^3.21.0",
+    "@tiptap/extension-bold": "^3.21.0",
+    "@tiptap/extension-color": "^3.21.0",
+    "@tiptap/extension-document": "^3.21.0",
+    "@tiptap/extension-highlight": "^3.21.0",
+    "@tiptap/extension-image": "^3.21.0",
+    "@tiptap/extension-paragraph": "^3.21.0",
+    "@tiptap/extension-placeholder": "^3.21.0",
+    "@tiptap/extension-text": "^3.21.0",
+    "@tiptap/extension-text-align": "^3.21.0",
+    "@tiptap/extension-text-style": "^3.21.0",
+    "@tiptap/extension-underline": "^3.21.0",
+    "@tiptap/pm": "^3.21.0",
+    "@tiptap/starter-kit": "^3.21.0",
+    "bwip-js": "^4.8.0",
+    "echarts": "^6.0.0",
+    "html-to-image": "^1.11.13",
+    "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.1",
-    "@simplysm/service-common": "14.0.1",
-    "@simplysm/core-common": "14.0.1",
-    "@simplysm/service-client": "14.0.1"
+    "@simplysm/core-browser": "14.0.4",
+    "@simplysm/core-common": "14.0.4",
+    "@simplysm/service-common": "14.0.4",
+    "@simplysm/service-client": "14.0.4"
   },
   "devDependencies": {
-    "@angular/compiler": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^21.0.0",
-    "sass": "^1.89.0"
+    "@angular/compiler": "^21.2.6",
+    "@angular/platform-browser-dynamic": "^21.2.6"
   },
   "scripts": {}
 }

package/scss/commons/_mixins.scss

@@ -59,6 +59,40 @@
   cursor: help;
 }
 
+@mixin border-direction-variants($dir, $d) {
+  .bd#{$d} {
+    border-#{$dir}: 1px solid !important;
+  }
+
+  @each $key, $val in map.get(variables.$vars, theme) {
+    @each $key1, $val1 in $val {
+      .bd#{$d}-theme-#{$key}-#{$key1} {
+        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
+      }
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, trans) {
+    .bd#{$d}-trans-#{$key} {
+      border-#{$dir}-color: var(--trans-#{$key}) !important;
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, border-color) {
+    .bd#{$d}-color-#{$key} {
+      border-#{$dir}-color: var(--border-color-#{$key}) !important;
+    }
+  }
+
+  .bd#{$d}-none {
+    border-#{$dir}: none !important;
+  }
+
+  .bd#{$d}-transparent {
+    border-#{$dir}-color: transparent !important;
+  }
+}
+
 @mixin flex-direction($direction, $defaultGap: null) {
   flex-direction: $direction;