@simplysm/angular 14.0.100 → 14.0.101
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.d.ts.map +1 -1
- package/dist/controls/checkbox/sd-checkbox.js +3 -3
- package/dist/controls/checkbox/sd-switch.js +2 -2
- package/dist/controls/collapse/sd-collapse-icon.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse-icon.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse-icon.js +3 -1
- package/dist/controls/collapse/sd-collapse.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse.js +3 -1
- 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.d.ts.map +1 -1
- package/dist/controls/input/sd-textarea.js +3 -3
- package/dist/controls/input/sd-textfield.d.ts +2 -0
- package/dist/controls/input/sd-textfield.d.ts.map +1 -1
- package/dist/controls/input/sd-textfield.js +44 -16
- package/dist/controls/list/sd-list-item.js +2 -2
- package/dist/controls/select/sd-select-button.js +2 -2
- package/dist/controls/select/sd-select-item.d.ts.map +1 -1
- package/dist/controls/select/sd-select-item.js +3 -3
- package/dist/controls/select/sd-select.d.ts.map +1 -1
- package/dist/controls/select/sd-select.js +3 -3
- package/dist/core/busy/sd-busy-container.js +2 -2
- package/dist/core/directive-input-signals.d.ts +0 -9
- package/dist/core/directive-input-signals.d.ts.map +1 -1
- package/dist/core/modal/sd-modal.js +2 -2
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +12 -0
- package/dist/core/ripple/setupRipple.js +1 -1
- package/dist/core/toast/sd-toast-container.js +2 -2
- package/dist/core/toast/sd-toast.js +2 -2
- package/dist/data/crud/sd-base-container.js +4 -4
- package/dist/data/kanban/sd-kanban-board.js +2 -2
- package/dist/data/kanban/sd-kanban-lane.js +2 -2
- package/dist/data/kanban/sd-kanban.js +2 -2
- package/dist/data/sheet/sd-sheet.d.ts.map +1 -1
- package/dist/data/sheet/sd-sheet.js +3 -3
- package/dist/features/editor/sd-tiptap-editor.d.ts.map +1 -1
- package/dist/features/editor/sd-tiptap-editor.js +3 -3
- package/dist/features/theme/sd-theme-provider.d.ts +1 -0
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +5 -0
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +14 -2
- 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/dist/layout/topbar/sd-topbar.js +2 -2
- package/package.json +5 -5
- package/scss/commons/_colors.scss +326 -0
- package/scss/commons/_mixins.scss +129 -129
- package/scss/commons/_theme-variables.scss +8 -1
- package/scss/commons/_variables.scss +37 -33
- package/scss/controls/_card.scss +1 -1
- package/scss/styles.scss +3 -0
- package/scss/themes/_blueprint-surfaces.scss +81 -0
- package/scss/themes/_variables-blueprint.scss +95 -0
- package/scss/themes/_variables-dark.scss +9 -22
- package/src/controls/button/sd-button.ts +2 -2
- package/src/controls/checkbox/sd-checkbox.ts +13 -11
- package/src/controls/collapse/sd-collapse-icon.ts +3 -1
- package/src/controls/collapse/sd-collapse.ts +3 -1
- package/src/controls/dropdown/sd-dropdown-popup.ts +2 -2
- package/src/controls/input/sd-textarea.ts +5 -0
- package/src/controls/input/sd-textfield.ts +40 -4
- package/src/controls/list/sd-list-item.ts +5 -5
- package/src/controls/select/sd-select-button.ts +1 -1
- package/src/controls/select/sd-select-item.ts +4 -3
- package/src/controls/select/sd-select.ts +2 -1
- package/src/core/busy/sd-busy-container.ts +3 -3
- package/src/core/directive-input-signals.ts +0 -9
- package/src/core/provideSdAngular.ts +14 -0
- package/src/core/ripple/setupRipple.ts +1 -1
- package/src/data/crud/sd-base-container.ts +3 -3
- package/src/data/kanban/sd-kanban-lane.ts +1 -1
- package/src/data/kanban/sd-kanban.ts +1 -1
- package/src/data/sheet/sd-sheet.ts +4 -3
- package/src/features/editor/sd-tiptap-editor.ts +1 -0
- package/src/features/theme/sd-theme-provider.ts +7 -0
- package/src/features/theme/sd-theme-selector.ts +4 -0
- package/src/layout/sidebar/sd-sidebar-container.ts +3 -3
- package/src/layout/sidebar/sd-sidebar.ts +5 -5
- package/src/layout/topbar/sd-topbar.ts +1 -1
- package/styles.css +481 -103
|
@@ -295,7 +295,7 @@ export class SdTiptapEditor {
|
|
|
295
295
|
i0.ɵɵdomElement(1, "div", 0);
|
|
296
296
|
} if (rf & 2) {
|
|
297
297
|
i0.ɵɵconditional(!ctx.disabled() ? 0 : -1);
|
|
298
|
-
} }, styles: ["sd-tiptap-editor {\n display: block;\n position: relative;\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-xs);\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n display: flex;\n gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n padding: var(--gap-xs) var(--gap-sm);\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: transparent;\n cursor: pointer;\n font-size: var(--font-size-default);\n line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n background: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n display: flex;\n flex-wrap: wrap;\n gap: 2px;\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n width: 1.25rem;\n height: 1.25rem;\n border: 1px solid var(--trans-lighter);\n border-radius: 2px;\n cursor: pointer;\n padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--control-color);\n font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n padding: var(--gap-sm);\n min-height: 6.25rem;\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n background: var(--theme-gray-lightest);\n color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n display: block;\n height: 2px;\n width: 100%;\n position: absolute;\n bottom: 2px;\n left: 0;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
298
|
+
} }, styles: ["sd-tiptap-editor {\n display: block;\n position: relative;\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-xs);\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n display: flex;\n gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n padding: var(--gap-xs) var(--gap-sm);\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: transparent;\n cursor: pointer;\n font-size: var(--font-size-default);\n line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n background: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n display: flex;\n flex-wrap: wrap;\n gap: 2px;\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n width: 1.25rem;\n height: 1.25rem;\n border: 1px solid var(--trans-lighter);\n border-radius: 2px;\n cursor: pointer;\n padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--control-color);\n font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n padding: var(--gap-sm);\n min-height: 6.25rem;\n font-family: var(--font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n background: var(--theme-gray-lightest);\n color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n display: block;\n height: 2px;\n width: 100%;\n position: absolute;\n bottom: 2px;\n left: 0;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
299
299
|
}
|
|
300
300
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTiptapEditor, [{
|
|
301
301
|
type: Component,
|
|
@@ -375,6 +375,6 @@ export class SdTiptapEditor {
|
|
|
375
375
|
`, host: {
|
|
376
376
|
"[attr.data-sd-disabled]": "disabled()",
|
|
377
377
|
"[attr.data-sd-readonly]": "readonly()",
|
|
378
|
-
}, styles: ["sd-tiptap-editor {\n display: block;\n position: relative;\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-xs);\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n display: flex;\n gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n padding: var(--gap-xs) var(--gap-sm);\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: transparent;\n cursor: pointer;\n font-size: var(--font-size-default);\n line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n background: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n display: flex;\n flex-wrap: wrap;\n gap: 2px;\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n width: 1.25rem;\n height: 1.25rem;\n border: 1px solid var(--trans-lighter);\n border-radius: 2px;\n cursor: pointer;\n padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--control-color);\n font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n padding: var(--gap-sm);\n min-height: 6.25rem;\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n background: var(--theme-gray-lightest);\n color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n display: block;\n height: 2px;\n width: 100%;\n position: absolute;\n bottom: 2px;\n left: 0;\n}"] }]
|
|
378
|
+
}, styles: ["sd-tiptap-editor {\n display: block;\n position: relative;\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-xs);\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n display: flex;\n gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n padding: var(--gap-xs) var(--gap-sm);\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: transparent;\n cursor: pointer;\n font-size: var(--font-size-default);\n line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n background: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n display: flex;\n flex-wrap: wrap;\n gap: 2px;\n padding: var(--gap-xs);\n border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n width: 1.25rem;\n height: 1.25rem;\n border: 1px solid var(--trans-lighter);\n border-radius: 2px;\n cursor: pointer;\n padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--control-color);\n font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n padding: var(--gap-sm);\n min-height: 6.25rem;\n font-family: var(--font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n background: var(--theme-gray-lightest);\n color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n display: block;\n height: 2px;\n width: 100%;\n position: absolute;\n bottom: 2px;\n left: 0;\n}"] }]
|
|
379
379
|
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }] }); })();
|
|
380
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTiptapEditor, { className: "SdTiptapEditor", filePath: "packages/angular/src/features/editor/sd-tiptap-editor.ts", lineNumber:
|
|
380
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTiptapEditor, { className: "SdTiptapEditor", filePath: "packages/angular/src/features/editor/sd-tiptap-editor.ts", lineNumber: 238 }); })();
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export declare class SdThemeProvider {
|
|
3
3
|
dark: import("@angular/core").WritableSignal<boolean>;
|
|
4
|
+
blueprint: import("@angular/core").WritableSignal<boolean>;
|
|
4
5
|
readonly fontSizePresets: readonly number[];
|
|
5
6
|
fontSize: import("@angular/core").WritableSignal<number>;
|
|
6
7
|
constructor();
|
|
@@ -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;IAC1B,IAAI,kDAA0B;
|
|
1
|
+
{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAGA,qBACa,eAAe;IAC1B,IAAI,kDAA0B;IAG9B,SAAS,kDAA0B;IAEnC,QAAQ,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,CAA4B;IAEvE,QAAQ,iDAAsB;;IAmB9B,gBAAgB,IAAI,IAAI;IAOxB,gBAAgB,IAAI,IAAI;yCAlCb,eAAe;6CAAf,eAAe;CA8C3B"}
|
|
@@ -3,6 +3,8 @@ import { isPlatformBrowser } from "@angular/common";
|
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class SdThemeProvider {
|
|
5
5
|
dark = signal(false, ...(ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []));
|
|
6
|
+
// 블루프린트(엔지니어링 도면) 테마 — dark 토글과 직교. dark 와 조합해 4면을 만든다.
|
|
7
|
+
blueprint = signal(false, ...(ngDevMode ? [{ debugName: "blueprint" }] : /* istanbul ignore next */ []));
|
|
6
8
|
fontSizePresets = [12, 14, 16, 20, 24, 28];
|
|
7
9
|
fontSize = signal(12, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
|
|
8
10
|
constructor() {
|
|
@@ -12,6 +14,9 @@ export class SdThemeProvider {
|
|
|
12
14
|
effect(() => {
|
|
13
15
|
document.body.classList.toggle("sd-theme-dark", this.dark());
|
|
14
16
|
});
|
|
17
|
+
effect(() => {
|
|
18
|
+
document.body.classList.toggle("sd-theme-blueprint", this.blueprint());
|
|
19
|
+
});
|
|
15
20
|
effect(() => {
|
|
16
21
|
document.documentElement.style.fontSize = `${this.fontSize()}px`;
|
|
17
22
|
});
|
|
@@ -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,qBAmDa,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"}
|
|
@@ -16,7 +16,7 @@ export class SdThemeSelector {
|
|
|
16
16
|
tablerMinus = tablerMinus;
|
|
17
17
|
tablerPalette = tablerPalette;
|
|
18
18
|
static ɵfac = function SdThemeSelector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdThemeSelector)(); };
|
|
19
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls:
|
|
19
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls: 23, vars: 16, 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) {
|
|
20
20
|
i0.ɵɵelementStart(0, "sd-dropdown")(1, "sd-button", 0);
|
|
21
21
|
i0.ɵɵelement(2, "ng-icon", 1);
|
|
22
22
|
i0.ɵɵelementEnd();
|
|
@@ -39,6 +39,12 @@ export class SdThemeSelector {
|
|
|
39
39
|
i0.ɵɵelementEnd();
|
|
40
40
|
i0.ɵɵelementStart(18, "sd-switch", 6);
|
|
41
41
|
i0.ɵɵtwoWayListener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx._sdTheme.dark, $event) || (ctx._sdTheme.dark = $event); return $event; });
|
|
42
|
+
i0.ɵɵelementEnd()();
|
|
43
|
+
i0.ɵɵelementStart(19, "div", 3)(20, "span");
|
|
44
|
+
i0.ɵɵtext(21, "\uBE14\uB8E8\uD504\uB9B0\uD2B8");
|
|
45
|
+
i0.ɵɵelementEnd();
|
|
46
|
+
i0.ɵɵelementStart(22, "sd-switch", 6);
|
|
47
|
+
i0.ɵɵtwoWayListener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_22_listener($event) { i0.ɵɵtwoWayBindingSet(ctx._sdTheme.blueprint, $event) || (ctx._sdTheme.blueprint = $event); return $event; });
|
|
42
48
|
i0.ɵɵelementEnd()()()()();
|
|
43
49
|
} if (rf & 2) {
|
|
44
50
|
i0.ɵɵadvance();
|
|
@@ -57,6 +63,8 @@ export class SdThemeSelector {
|
|
|
57
63
|
i0.ɵɵproperty("svg", ctx.tablerPlus);
|
|
58
64
|
i0.ɵɵadvance(4);
|
|
59
65
|
i0.ɵɵtwoWayProperty("value", ctx._sdTheme.dark);
|
|
66
|
+
i0.ɵɵadvance(4);
|
|
67
|
+
i0.ɵɵtwoWayProperty("value", ctx._sdTheme.blueprint);
|
|
60
68
|
} }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], encapsulation: 2, changeDetection: 0 });
|
|
61
69
|
}
|
|
62
70
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdThemeSelector, [{
|
|
@@ -96,9 +104,13 @@ export class SdThemeSelector {
|
|
|
96
104
|
<span>다크 모드</span>
|
|
97
105
|
<sd-switch [(value)]="_sdTheme.dark" />
|
|
98
106
|
</div>
|
|
107
|
+
<div class="flex-row gap-sm cross-align-center">
|
|
108
|
+
<span>블루프린트</span>
|
|
109
|
+
<sd-switch [(value)]="_sdTheme.blueprint" />
|
|
110
|
+
</div>
|
|
99
111
|
</div>
|
|
100
112
|
</sd-dropdown-popup>
|
|
101
113
|
</sd-dropdown>
|
|
102
114
|
` }]
|
|
103
115
|
}], null, null); })();
|
|
104
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber:
|
|
116
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 67 }); })();
|
|
@@ -126,7 +126,7 @@ export class SdCalendar {
|
|
|
126
126
|
i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 6) % 7], " ");
|
|
127
127
|
i0.ɵɵadvance(2);
|
|
128
128
|
i0.ɵɵrepeater(ctx.dataTable());
|
|
129
|
-
} }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["
|
|
129
|
+
} }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-calendar > table {\n border-collapse: collapse;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid var(--theme-gray-light);\n width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n background: var(--theme-gray-lighter);\n height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n vertical-align: top;\n height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-calendar > table > tbody > tr > td > .content {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content > * + * {\n margin-top: var(--gap-sm);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n margin-top: var(--gap-xxs);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xs {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n margin-top: var(--gap-xs);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-sm {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n margin-top: var(--gap-sm);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-default {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n margin-top: var(--gap-default);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-lg {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n margin-top: var(--gap-lg);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xl {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n margin-top: var(--gap-xl);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n margin-top: var(--gap-xxl);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-0 {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n margin-top: var(--gap-0);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-auto {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n margin-top: var(--gap-auto);\n }\n}"], encapsulation: 2, changeDetection: 0 });
|
|
130
130
|
}
|
|
131
131
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCalendar, [{
|
|
132
132
|
type: Component,
|
|
@@ -184,6 +184,6 @@ export class SdCalendar {
|
|
|
184
184
|
}
|
|
185
185
|
</tbody>
|
|
186
186
|
</table>
|
|
187
|
-
`, styles: ["
|
|
187
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-calendar > table {\n border-collapse: collapse;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid var(--theme-gray-light);\n width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n background: var(--theme-gray-lighter);\n height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n vertical-align: top;\n height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-calendar > table > tbody > tr > td > .content {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content > * + * {\n margin-top: var(--gap-sm);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n margin-top: var(--gap-xxs);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xs {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n margin-top: var(--gap-xs);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-sm {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n margin-top: var(--gap-sm);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-default {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n margin-top: var(--gap-default);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-lg {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n margin-top: var(--gap-lg);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xl {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n margin-top: var(--gap-xl);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n margin-top: var(--gap-xxl);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-0 {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n margin-top: var(--gap-0);\n }\n sd-calendar > table > tbody > tr > td > .content.gap-auto {\n gap: 0;\n }\n sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n margin-top: var(--gap-auto);\n }\n}"] }]
|
|
188
188
|
}], 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 }] }] }); })();
|
|
189
189
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCalendar, { className: "SdCalendar", filePath: "packages/angular/src/features/visual/sd-calendar.ts", lineNumber: 131 }); })();
|
|
@@ -12,7 +12,7 @@ export class SdLabel {
|
|
|
12
12
|
} }, 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) {
|
|
13
13
|
i0.ɵɵprojectionDef();
|
|
14
14
|
i0.ɵɵprojection(0);
|
|
15
|
-
} }, styles: ["
|
|
15
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-label {\n display: inline-block;\n background: var(--theme-gray-darker);\n color: var(--text-trans-rev-default);\n padding: 0 var(--gap-sm);\n border-radius: var(--border-radius-default);\n text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n background: var(--theme-danger-dark);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
16
16
|
}
|
|
17
17
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabel, [{
|
|
18
18
|
type: Component,
|
|
@@ -22,6 +22,6 @@ export class SdLabel {
|
|
|
22
22
|
"[attr.data-sd-clickable]": "clickable()",
|
|
23
23
|
}, template: `
|
|
24
24
|
<ng-content></ng-content>
|
|
25
|
-
`, styles: ["
|
|
25
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-label {\n display: inline-block;\n background: var(--theme-gray-darker);\n color: var(--text-trans-rev-default);\n padding: 0 var(--gap-sm);\n border-radius: var(--border-radius-default);\n text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n background: var(--theme-danger-dark);\n}"] }]
|
|
26
26
|
}], 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 }] }] }); })();
|
|
27
27
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdLabel, { className: "SdLabel", filePath: "packages/angular/src/features/visual/sd-label.ts", lineNumber: 60 }); })();
|
|
@@ -11,7 +11,7 @@ export class SdNote {
|
|
|
11
11
|
} }, 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) {
|
|
12
12
|
i0.ɵɵprojectionDef();
|
|
13
13
|
i0.ɵɵprojection(0);
|
|
14
|
-
} }, styles: ["
|
|
14
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-note {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n background: var(--theme-gray-lightest);\n border: none;\n border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n background: var(--theme-gray-lightest);\n border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n background: var(--theme-blue-gray-lightest);\n border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n background: var(--theme-primary-lightest);\n border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n background: var(--theme-secondary-lightest);\n border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n background: var(--theme-info-lightest);\n border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n background: var(--theme-success-lightest);\n border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n background: var(--theme-warning-lightest);\n border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n background: var(--theme-danger-lightest);\n border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n font-size: var(--font-size-sm);\n padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\n border-radius: 0;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
15
15
|
}
|
|
16
16
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNote, [{
|
|
17
17
|
type: Component,
|
|
@@ -21,6 +21,6 @@ export class SdNote {
|
|
|
21
21
|
"[attr.data-sd-inset]": "inset()",
|
|
22
22
|
}, template: `
|
|
23
23
|
<ng-content></ng-content>
|
|
24
|
-
`, styles: ["
|
|
24
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-note {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n background: var(--theme-gray-lightest);\n border: none;\n border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n background: var(--theme-gray-lightest);\n border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n background: var(--theme-blue-gray-lightest);\n border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n background: var(--theme-primary-lightest);\n border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n background: var(--theme-secondary-lightest);\n border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n background: var(--theme-info-lightest);\n border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n background: var(--theme-success-lightest);\n border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n background: var(--theme-warning-lightest);\n border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n background: var(--theme-danger-lightest);\n border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n font-size: var(--font-size-sm);\n padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\n border-radius: 0;\n}"] }]
|
|
25
25
|
}], 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 }] }] }); })();
|
|
26
26
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNote, { className: "SdNote", filePath: "packages/angular/src/features/visual/sd-note.ts", lineNumber: 60 }); })();
|
|
@@ -21,7 +21,7 @@ export class SdProgress {
|
|
|
21
21
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 3, ctx.value(), "1.0-2"), " ");
|
|
22
22
|
i0.ɵɵadvance(2);
|
|
23
23
|
i0.ɵɵstyleProp("width", ctx._barWidth());
|
|
24
|
-
} }, dependencies: [PercentPipe], styles: ["
|
|
24
|
+
} }, dependencies: [PercentPipe], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-progress {\n position: relative;\n display: block;\n width: 100%;\n white-space: nowrap;\n background: var(--theme-gray-lightest);\n border: 1px solid var(--theme-gray-lightest);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-progress > ._content {\n position: relative;\n z-index: 2;\n padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n background: var(--control-color);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
25
25
|
}
|
|
26
26
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgress, [{
|
|
27
27
|
type: Component,
|
|
@@ -34,6 +34,6 @@ export class SdProgress {
|
|
|
34
34
|
{{ value() | percent: "1.0-2" }}
|
|
35
35
|
</div>
|
|
36
36
|
<div class="_progress" [style.width]="_barWidth()"></div>
|
|
37
|
-
`, styles: ["
|
|
37
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-progress {\n position: relative;\n display: block;\n width: 100%;\n white-space: nowrap;\n background: var(--theme-gray-lightest);\n border: 1px solid var(--theme-gray-lightest);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-progress > ._content {\n position: relative;\n z-index: 2;\n padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n background: var(--control-color);\n}"] }]
|
|
38
38
|
}], 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 }] }] }); })();
|
|
39
39
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdProgress, { className: "SdProgress", filePath: "packages/angular/src/features/visual/sd-progress.ts", lineNumber: 81 }); })();
|
|
@@ -32,7 +32,7 @@ export class SdSidebarContainer {
|
|
|
32
32
|
i0.ɵɵdomElementStart(1, "div", 0);
|
|
33
33
|
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(); });
|
|
34
34
|
i0.ɵɵdomElementEnd();
|
|
35
|
-
} }, styles: ["
|
|
35
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-sidebar-container {\n display: block;\n position: relative;\n height: 100%;\n padding-left: var(--sidebar-width);\n transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n padding-left: 0;\n transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n display: none;\n}\n\n@media all and (max-width: 520px) {\n sd-sidebar-container {\n padding-left: 0;\n }\n sd-sidebar-container > ._backdrop {\n position: absolute;\n display: block;\n z-index: calc(var(--z-index-sidebar) - 1);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--background-rev-color);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--animation-duration) ease-in-out;\n }\n sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n opacity: 0.6;\n pointer-events: auto;\n }\n}"], encapsulation: 2, changeDetection: 0 });
|
|
36
36
|
}
|
|
37
37
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarContainer, [{
|
|
38
38
|
type: Component,
|
|
@@ -41,6 +41,6 @@ export class SdSidebarContainer {
|
|
|
41
41
|
}, template: `
|
|
42
42
|
<ng-content />
|
|
43
43
|
<div class="_backdrop" tabindex="0" role="button" (click)="onBackdropClick()" (keydown.enter)="onBackdropClick()"></div>
|
|
44
|
-
`, styles: ["
|
|
44
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-sidebar-container {\n display: block;\n position: relative;\n height: 100%;\n padding-left: var(--sidebar-width);\n transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n padding-left: 0;\n transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n display: none;\n}\n\n@media all and (max-width: 520px) {\n sd-sidebar-container {\n padding-left: 0;\n }\n sd-sidebar-container > ._backdrop {\n position: absolute;\n display: block;\n z-index: calc(var(--z-index-sidebar) - 1);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--background-rev-color);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--animation-duration) ease-in-out;\n }\n sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n opacity: 0.6;\n pointer-events: auto;\n }\n}"] }]
|
|
45
45
|
}], () => [], null); })();
|
|
46
46
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarContainer, { className: "SdSidebarContainer", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-container.ts", lineNumber: 69 }); })();
|
|
@@ -11,7 +11,7 @@ export class SdSidebar {
|
|
|
11
11
|
} }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSidebar_Template(rf, ctx) { if (rf & 1) {
|
|
12
12
|
i0.ɵɵprojectionDef();
|
|
13
13
|
i0.ɵɵprojection(0);
|
|
14
|
-
} }, styles: ["
|
|
14
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-sidebar {\n position: absolute;\n z-index: var(--z-index-sidebar);\n top: 0;\n left: 0;\n width: var(--sidebar-width);\n height: 100%;\n}\n@media not all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-out;\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: translateX(-100%);\n transition: transform var(--animation-duration) ease-in;\n }\n}\n@media all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-in;\n transform: translateX(-100%);\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: none;\n transition: transform var(--animation-duration) ease-out;\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n }\n}"], encapsulation: 2, changeDetection: 0 });
|
|
15
15
|
}
|
|
16
16
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
|
|
17
17
|
type: Component,
|
|
@@ -19,6 +19,6 @@ export class SdSidebar {
|
|
|
19
19
|
"[attr.data-sd-toggle]": "toggle()",
|
|
20
20
|
}, template: `
|
|
21
21
|
<ng-content />
|
|
22
|
-
`, styles: ["
|
|
22
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-sidebar {\n position: absolute;\n z-index: var(--z-index-sidebar);\n top: 0;\n left: 0;\n width: var(--sidebar-width);\n height: 100%;\n}\n@media not all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-out;\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: translateX(-100%);\n transition: transform var(--animation-duration) ease-in;\n }\n}\n@media all and (max-width: 520px) {\n sd-sidebar {\n transition: transform var(--animation-duration) ease-in;\n transform: translateX(-100%);\n }\n sd-sidebar[data-sd-toggle=true] {\n transform: none;\n transition: transform var(--animation-duration) ease-out;\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n }\n}"] }]
|
|
23
23
|
}], null, null); })();
|
|
24
24
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 62 }); })();
|
|
@@ -37,7 +37,7 @@ export class SdTopbar {
|
|
|
37
37
|
i0.ɵɵprojection(1);
|
|
38
38
|
} if (rf & 2) {
|
|
39
39
|
i0.ɵɵconditional(ctx.hasSidebar() ? 0 : -1);
|
|
40
|
-
} }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n min-height: var(--topbar-height);\n overflow-x: auto;\n overflow-y: hidden;\n user-select: none;\n
|
|
40
|
+
} }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n min-height: var(--topbar-height);\n overflow-x: auto;\n overflow-y: hidden;\n user-select: none;\n color: var(--text-trans-default);\n border-bottom: 1px solid var(--border-color-lighter);\n padding-left: var(--gap-xs);\n}\nsd-topbar > h1 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n width: var(--gap-sm);\n height: var(--gap-sm);\n background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n background-color: var(--trans-default);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
41
41
|
}
|
|
42
42
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbar, [{
|
|
43
43
|
type: Component,
|
|
@@ -56,6 +56,6 @@ export class SdTopbar {
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
<ng-content />
|
|
59
|
-
`, styles: ["sd-topbar {\n min-height: var(--topbar-height);\n overflow-x: auto;\n overflow-y: hidden;\n user-select: none;\n
|
|
59
|
+
`, styles: ["sd-topbar {\n min-height: var(--topbar-height);\n overflow-x: auto;\n overflow-y: hidden;\n user-select: none;\n color: var(--text-trans-default);\n border-bottom: 1px solid var(--border-color-lighter);\n padding-left: var(--gap-xs);\n}\nsd-topbar > h1 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n width: var(--gap-sm);\n height: var(--gap-sm);\n background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n background-color: var(--trans-default);\n}"] }]
|
|
60
60
|
}], null, { sidebarContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainer", required: false }] }] }); })();
|
|
61
61
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 78 }); })();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplysm/angular",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.101",
|
|
4
4
|
"description": "심플리즘 패키지 - Angular",
|
|
5
5
|
"author": "심플리즘",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
"jspdf": "^4.2.1",
|
|
52
52
|
"rxjs": "^7.8.2",
|
|
53
53
|
"tabbable": "^6.4.0",
|
|
54
|
-
"@simplysm/core-
|
|
55
|
-
"@simplysm/service-client": "14.0.
|
|
56
|
-
"@simplysm/core-
|
|
57
|
-
"@simplysm/service-common": "14.0.
|
|
54
|
+
"@simplysm/core-browser": "14.0.101",
|
|
55
|
+
"@simplysm/service-client": "14.0.101",
|
|
56
|
+
"@simplysm/core-common": "14.0.101",
|
|
57
|
+
"@simplysm/service-common": "14.0.101"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@angular/compiler": "^21.2.17",
|