@simplysm/angular 14.1.17 → 14.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/controls/button/sd-additional-button.js +2 -2
- package/dist/controls/button/sd-anchor.js +2 -2
- package/dist/controls/button/sd-button.js +2 -2
- package/dist/controls/button/sd-modal-select-button.js +2 -2
- package/dist/controls/checkbox/sd-checkbox.js +2 -2
- package/dist/controls/checkbox/sd-switch.js +2 -2
- package/dist/controls/dropdown/sd-dropdown-popup.js +2 -2
- package/dist/controls/gap/sd-gap.js +2 -2
- package/dist/controls/input/sd-date-range-picker.js +2 -2
- package/dist/controls/input/sd-range.js +2 -2
- package/dist/controls/input/sd-textarea.js +2 -2
- package/dist/controls/input/sd-textfield.js +2 -2
- package/dist/controls/select/sd-select-item.js +2 -2
- package/dist/core/busy/sd-busy-container.js +2 -2
- package/dist/core/modal/sd-modal.js +2 -2
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +0 -12
- package/dist/core/toast/sd-toast-container.js +2 -2
- package/dist/core/toast/sd-toast.js +2 -2
- package/dist/data/kanban/sd-kanban-board.js +2 -2
- package/dist/data/sheet/sd-sheet.js +2 -2
- package/dist/features/theme/sd-theme-provider.d.ts +0 -1
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +1 -6
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +4 -16
- package/dist/features/visual/sd-calendar.js +2 -2
- package/dist/features/visual/sd-label.js +2 -2
- package/dist/features/visual/sd-note.js +2 -2
- package/dist/features/visual/sd-progress.js +2 -2
- package/dist/layout/sidebar/sd-sidebar-container.js +2 -2
- package/dist/layout/sidebar/sd-sidebar.js +2 -2
- package/package.json +5 -5
- package/scss/commons/_colors.scss +247 -326
- package/scss/commons/_styles.scss +430 -430
- package/scss/commons/_theme-variables.scss +2 -12
- package/scss/commons/_variables.scss +83 -56
- package/scss/themes/_variables-blueprint.scss +99 -95
- package/src/core/provideSdAngular.ts +0 -14
- package/src/features/theme/sd-theme-provider.ts +1 -7
- package/src/features/theme/sd-theme-selector.ts +0 -4
- package/styles.css +368 -485
- package/scss/themes/_variables-dark.scss +0 -53
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export declare class SdThemeProvider {
|
|
3
|
-
dark: import("@angular/core").WritableSignal<boolean>;
|
|
4
3
|
blueprint: import("@angular/core").WritableSignal<boolean>;
|
|
5
4
|
readonly fontSizePresets: readonly number[];
|
|
6
5
|
fontSize: import("@angular/core").WritableSignal<number>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAGA,qBACa,eAAe;
|
|
1
|
+
{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAGA,qBACa,eAAe;IAE1B,SAAS,kDAA0B;IAEnC,QAAQ,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,CAA4B;IAEvE,QAAQ,iDAAsB;;IAe9B,gBAAgB,IAAI,IAAI;IAOxB,gBAAgB,IAAI,IAAI;yCA5Bb,eAAe;6CAAf,eAAe;CAwC3B"}
|
|
@@ -2,9 +2,7 @@ import { effect, inject, Injectable, PLATFORM_ID, signal } from "@angular/core";
|
|
|
2
2
|
import { isPlatformBrowser } from "@angular/common";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class SdThemeProvider {
|
|
5
|
-
|
|
6
|
-
...(ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []));
|
|
7
|
-
// 블루프린트(엔지니어링 도면) 테마 — dark 토글과 직교. dark 와 조합해 4면을 만든다.
|
|
5
|
+
// 블루프린트(엔지니어링 도면) 테마
|
|
8
6
|
blueprint = signal(false, /* @ts-ignore */
|
|
9
7
|
...(ngDevMode ? [{ debugName: "blueprint" }] : /* istanbul ignore next */ []));
|
|
10
8
|
fontSizePresets = [12, 14, 16, 20, 24, 28];
|
|
@@ -14,9 +12,6 @@ export class SdThemeProvider {
|
|
|
14
12
|
// SSR(프리렌더) 가드: document 반영은 브라우저 전용
|
|
15
13
|
if (!isPlatformBrowser(inject(PLATFORM_ID)))
|
|
16
14
|
return;
|
|
17
|
-
effect(() => {
|
|
18
|
-
document.body.classList.toggle("sd-theme-dark", this.dark());
|
|
19
|
-
});
|
|
20
15
|
effect(() => {
|
|
21
16
|
document.body.classList.toggle("sd-theme-blueprint", this.blueprint());
|
|
22
17
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-theme-selector.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-selector.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAGtD,
|
|
1
|
+
{"version":3,"file":"sd-theme-selector.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-selector.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAGtD,qBA+Ca,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kBAA2B;IAEtD,aAAa,0CAAgF;IAE7F,aAAa,0CAIX;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,uVAAc;IAC3C,SAAS,CAAC,QAAQ,CAAC,WAAW,yTAAe;IAC7C,SAAS,CAAC,QAAQ,CAAC,aAAa,uoBAAiB;yCAbtC,eAAe;2CAAf,eAAe;CAc3B"}
|
|
@@ -18,7 +18,7 @@ export class SdThemeSelector {
|
|
|
18
18
|
tablerMinus = tablerMinus;
|
|
19
19
|
tablerPalette = tablerPalette;
|
|
20
20
|
static ɵfac = function SdThemeSelector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdThemeSelector)(); };
|
|
21
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls:
|
|
21
|
+
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) {
|
|
22
22
|
i0.ɵɵelementStart(0, "sd-dropdown")(1, "sd-button", 0);
|
|
23
23
|
i0.ɵɵelement(2, "ng-icon", 1);
|
|
24
24
|
i0.ɵɵelementEnd();
|
|
@@ -37,16 +37,10 @@ export class SdThemeSelector {
|
|
|
37
37
|
i0.ɵɵelement(14, "ng-icon", 1);
|
|
38
38
|
i0.ɵɵelementEnd()()();
|
|
39
39
|
i0.ɵɵelementStart(15, "div", 3)(16, "span");
|
|
40
|
-
i0.ɵɵtext(17, "\
|
|
40
|
+
i0.ɵɵtext(17, "\uBE14\uB8E8\uD504\uB9B0\uD2B8");
|
|
41
41
|
i0.ɵɵelementEnd();
|
|
42
42
|
i0.ɵɵelementStart(18, "sd-switch", 6);
|
|
43
|
-
i0.ɵɵtwoWayListener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx._sdTheme.
|
|
44
|
-
i0.ɵɵelementEnd()();
|
|
45
|
-
i0.ɵɵelementStart(19, "div", 3)(20, "span");
|
|
46
|
-
i0.ɵɵtext(21, "\uBE14\uB8E8\uD504\uB9B0\uD2B8");
|
|
47
|
-
i0.ɵɵelementEnd();
|
|
48
|
-
i0.ɵɵelementStart(22, "sd-switch", 6);
|
|
49
|
-
i0.ɵɵtwoWayListener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_22_listener($event) { i0.ɵɵtwoWayBindingSet(ctx._sdTheme.blueprint, $event) || (ctx._sdTheme.blueprint = $event); return $event; });
|
|
43
|
+
i0.ɵɵtwoWayListener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx._sdTheme.blueprint, $event) || (ctx._sdTheme.blueprint = $event); return $event; });
|
|
50
44
|
i0.ɵɵelementEnd()()()()();
|
|
51
45
|
} if (rf & 2) {
|
|
52
46
|
i0.ɵɵadvance();
|
|
@@ -64,8 +58,6 @@ export class SdThemeSelector {
|
|
|
64
58
|
i0.ɵɵadvance();
|
|
65
59
|
i0.ɵɵproperty("svg", ctx.tablerPlus);
|
|
66
60
|
i0.ɵɵadvance(4);
|
|
67
|
-
i0.ɵɵtwoWayProperty("value", ctx._sdTheme.dark);
|
|
68
|
-
i0.ɵɵadvance(4);
|
|
69
61
|
i0.ɵɵtwoWayProperty("value", ctx._sdTheme.blueprint);
|
|
70
62
|
} }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], encapsulation: 2 });
|
|
71
63
|
}
|
|
@@ -102,10 +94,6 @@ export class SdThemeSelector {
|
|
|
102
94
|
</sd-button>
|
|
103
95
|
</div>
|
|
104
96
|
</div>
|
|
105
|
-
<div class="flex-row gap-sm cross-align-center">
|
|
106
|
-
<span>다크 모드</span>
|
|
107
|
-
<sd-switch [(value)]="_sdTheme.dark" />
|
|
108
|
-
</div>
|
|
109
97
|
<div class="flex-row gap-sm cross-align-center">
|
|
110
98
|
<span>블루프린트</span>
|
|
111
99
|
<sd-switch [(value)]="_sdTheme.blueprint" />
|
|
@@ -115,4 +103,4 @@ export class SdThemeSelector {
|
|
|
115
103
|
</sd-dropdown>
|
|
116
104
|
` }]
|
|
117
105
|
}], null, null); })();
|
|
118
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber:
|
|
106
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 63 }); })();
|
|
@@ -132,7 +132,7 @@ export class SdCalendar {
|
|
|
132
132
|
i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 6) % 7], " ");
|
|
133
133
|
i0.ɵɵadvance(2);
|
|
134
134
|
i0.ɵɵrepeater(ctx.dataTable());
|
|
135
|
-
} }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["
|
|
135
|
+
} }, 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 });
|
|
136
136
|
}
|
|
137
137
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCalendar, [{
|
|
138
138
|
type: Component,
|
|
@@ -190,6 +190,6 @@ export class SdCalendar {
|
|
|
190
190
|
}
|
|
191
191
|
</tbody>
|
|
192
192
|
</table>
|
|
193
|
-
`, styles: ["
|
|
193
|
+
`, 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}"] }]
|
|
194
194
|
}], 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 }] }] }); })();
|
|
195
195
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCalendar, { className: "SdCalendar", filePath: "packages/angular/src/features/visual/sd-calendar.ts", lineNumber: 131 }); })();
|
|
@@ -14,7 +14,7 @@ export class SdLabel {
|
|
|
14
14
|
} }, 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) {
|
|
15
15
|
i0.ɵɵprojectionDef();
|
|
16
16
|
i0.ɵɵprojection(0);
|
|
17
|
-
} }, styles: ["
|
|
17
|
+
} }, 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 });
|
|
18
18
|
}
|
|
19
19
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabel, [{
|
|
20
20
|
type: Component,
|
|
@@ -24,6 +24,6 @@ export class SdLabel {
|
|
|
24
24
|
"[attr.data-sd-clickable]": "clickable()",
|
|
25
25
|
}, template: `
|
|
26
26
|
<ng-content></ng-content>
|
|
27
|
-
`, styles: ["
|
|
27
|
+
`, 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}"] }]
|
|
28
28
|
}], 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 }] }] }); })();
|
|
29
29
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdLabel, { className: "SdLabel", filePath: "packages/angular/src/features/visual/sd-label.ts", lineNumber: 60 }); })();
|
|
@@ -13,7 +13,7 @@ export class SdNote {
|
|
|
13
13
|
} }, 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) {
|
|
14
14
|
i0.ɵɵprojectionDef();
|
|
15
15
|
i0.ɵɵprojection(0);
|
|
16
|
-
} }, styles: ["
|
|
16
|
+
} }, 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 });
|
|
17
17
|
}
|
|
18
18
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNote, [{
|
|
19
19
|
type: Component,
|
|
@@ -23,6 +23,6 @@ export class SdNote {
|
|
|
23
23
|
"[attr.data-sd-inset]": "inset()",
|
|
24
24
|
}, template: `
|
|
25
25
|
<ng-content></ng-content>
|
|
26
|
-
`, styles: ["
|
|
26
|
+
`, 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}"] }]
|
|
27
27
|
}], 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 }] }] }); })();
|
|
28
28
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNote, { className: "SdNote", filePath: "packages/angular/src/features/visual/sd-note.ts", lineNumber: 60 }); })();
|
|
@@ -25,7 +25,7 @@ export class SdProgress {
|
|
|
25
25
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 3, ctx.value(), "1.0-2"), " ");
|
|
26
26
|
i0.ɵɵadvance(2);
|
|
27
27
|
i0.ɵɵstyleProp("width", ctx._barWidth());
|
|
28
|
-
} }, dependencies: [PercentPipe], styles: ["
|
|
28
|
+
} }, 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 });
|
|
29
29
|
}
|
|
30
30
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgress, [{
|
|
31
31
|
type: Component,
|
|
@@ -38,6 +38,6 @@ export class SdProgress {
|
|
|
38
38
|
{{ value() | percent: "1.0-2" }}
|
|
39
39
|
</div>
|
|
40
40
|
<div class="_progress" [style.width]="_barWidth()"></div>
|
|
41
|
-
`, styles: ["
|
|
41
|
+
`, 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}"] }]
|
|
42
42
|
}], 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 }] }] }); })();
|
|
43
43
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdProgress, { className: "SdProgress", filePath: "packages/angular/src/features/visual/sd-progress.ts", lineNumber: 81 }); })();
|
|
@@ -33,7 +33,7 @@ export class SdSidebarContainer {
|
|
|
33
33
|
i0.ɵɵdomElementStart(1, "div", 0);
|
|
34
34
|
i0.ɵɵdomListener("click", function SdSidebarContainer_Template_div_click_1_listener() { return ctx.onBackdropClick(); })("keydown.enter", function SdSidebarContainer_Template_div_keydown_enter_1_listener() { return ctx.onBackdropClick(); });
|
|
35
35
|
i0.ɵɵdomElementEnd();
|
|
36
|
-
} }, styles: ["
|
|
36
|
+
} }, styles: ["sd-sidebar-container {\n display: block;\n position: relative;\n height: 100%;\n padding-left: var(--sidebar-width);\n transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n padding-left: 0;\n transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n display: none;\n}\n\n@media all and (max-width: 520px) {\n sd-sidebar-container {\n padding-left: 0;\n }\n sd-sidebar-container > ._backdrop {\n position: absolute;\n display: block;\n z-index: calc(var(--z-index-sidebar) - 1);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--background-rev-color);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--animation-duration) ease-in-out;\n }\n sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n opacity: 0.6;\n pointer-events: auto;\n }\n}"], encapsulation: 2 });
|
|
37
37
|
}
|
|
38
38
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarContainer, [{
|
|
39
39
|
type: Component,
|
|
@@ -42,6 +42,6 @@ export class SdSidebarContainer {
|
|
|
42
42
|
}, template: `
|
|
43
43
|
<ng-content />
|
|
44
44
|
<div class="_backdrop" tabindex="0" role="button" (click)="onBackdropClick()" (keydown.enter)="onBackdropClick()"></div>
|
|
45
|
-
`, styles: ["
|
|
45
|
+
`, styles: ["sd-sidebar-container {\n display: block;\n position: relative;\n height: 100%;\n padding-left: var(--sidebar-width);\n transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n padding-left: 0;\n transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n display: none;\n}\n\n@media all and (max-width: 520px) {\n sd-sidebar-container {\n padding-left: 0;\n }\n sd-sidebar-container > ._backdrop {\n position: absolute;\n display: block;\n z-index: calc(var(--z-index-sidebar) - 1);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--background-rev-color);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--animation-duration) ease-in-out;\n }\n sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n opacity: 0.6;\n pointer-events: auto;\n }\n}"] }]
|
|
46
46
|
}], () => [], null); })();
|
|
47
47
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarContainer, { className: "SdSidebarContainer", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-container.ts", lineNumber: 69 }); })();
|
|
@@ -12,7 +12,7 @@ export class SdSidebar {
|
|
|
12
12
|
} }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSidebar_Template(rf, ctx) { if (rf & 1) {
|
|
13
13
|
i0.ɵɵprojectionDef();
|
|
14
14
|
i0.ɵɵprojection(0);
|
|
15
|
-
} }, styles: ["
|
|
15
|
+
} }, styles: ["sd-sidebar {\n position: absolute;\n z-index: var(--z-index-sidebar);\n top: 0;\n left: 0;\n width: var(--sidebar-width);\n height: 100%;\n border-right: 1px solid var(--border-color-lighter);\n}\n@media not all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-out;\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: translateX(-100%);\n transition: transform var(--animation-duration) ease-in;\n }\n}\n@media all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-in;\n transform: translateX(-100%);\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: none;\n transition: transform var(--animation-duration) ease-out;\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n }\n}"], encapsulation: 2 });
|
|
16
16
|
}
|
|
17
17
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
|
|
18
18
|
type: Component,
|
|
@@ -20,6 +20,6 @@ export class SdSidebar {
|
|
|
20
20
|
"[attr.data-sd-toggle]": "toggle()",
|
|
21
21
|
}, template: `
|
|
22
22
|
<ng-content />
|
|
23
|
-
`, styles: ["
|
|
23
|
+
`, styles: ["sd-sidebar {\n position: absolute;\n z-index: var(--z-index-sidebar);\n top: 0;\n left: 0;\n width: var(--sidebar-width);\n height: 100%;\n border-right: 1px solid var(--border-color-lighter);\n}\n@media not all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-out;\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: translateX(-100%);\n transition: transform var(--animation-duration) ease-in;\n }\n}\n@media all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-in;\n transform: translateX(-100%);\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: none;\n transition: transform var(--animation-duration) ease-out;\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n }\n}"] }]
|
|
24
24
|
}], null, null); })();
|
|
25
25
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 62 }); })();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplysm/angular",
|
|
3
|
-
"version": "14.1.
|
|
3
|
+
"version": "14.1.19",
|
|
4
4
|
"description": "심플리즘 패키지 - Angular",
|
|
5
5
|
"author": "심플리즘",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -58,10 +58,10 @@
|
|
|
58
58
|
"jspdf": "^4.2.1",
|
|
59
59
|
"rxjs": "^7.8.2",
|
|
60
60
|
"tabbable": "^6.5.0",
|
|
61
|
-
"@simplysm/core-
|
|
62
|
-
"@simplysm/
|
|
63
|
-
"@simplysm/
|
|
64
|
-
"@simplysm/service-
|
|
61
|
+
"@simplysm/core-common": "14.1.19",
|
|
62
|
+
"@simplysm/core-browser": "14.1.19",
|
|
63
|
+
"@simplysm/service-client": "14.1.19",
|
|
64
|
+
"@simplysm/service-common": "14.1.19"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
67
|
"@angular/compiler": "^22.0.6"
|