@simplysm/angular 14.0.93 → 14.0.95
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-button.d.ts +1 -1
- package/dist/controls/button/sd-button.d.ts.map +1 -1
- package/dist/controls/button/sd-button.js +3 -3
- package/dist/controls/gap/sd-gap.d.ts +2 -2
- package/dist/controls/list/sd-list-item.d.ts +0 -4
- package/dist/controls/list/sd-list-item.d.ts.map +1 -1
- package/dist/controls/list/sd-list-item.js +8 -33
- package/dist/controls/list/sd-list.js +2 -2
- package/dist/controls/pagination/sd-pagination.js +2 -2
- package/dist/data/crud/sd-base-container.d.ts.map +1 -1
- package/dist/data/crud/sd-base-container.js +6 -4
- package/dist/data/sheet/sd-sheet.js +2 -2
- package/dist/layout/sidebar/sd-sidebar-menu.d.ts +3 -2
- package/dist/layout/sidebar/sd-sidebar-menu.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar-menu.js +13 -12
- package/package.json +5 -5
- package/src/controls/button/sd-button.ts +5 -1
- package/src/controls/list/sd-list-item.ts +11 -34
- package/src/controls/list/sd-list.ts +1 -1
- package/src/controls/pagination/sd-pagination.ts +1 -1
- package/src/data/crud/sd-base-container.ts +4 -2
- package/src/data/sheet/sd-sheet.ts +1 -1
- package/src/layout/sidebar/sd-sidebar-menu.ts +9 -6
|
@@ -4,7 +4,7 @@ export declare class SdButton {
|
|
|
4
4
|
theme: import("@angular/core").InputSignal<"link" | "info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | "link-primary" | "link-secondary" | "link-info" | "link-success" | "link-warning" | "link-danger" | "link-gray" | "link-blue-gray" | "link-rev" | undefined>;
|
|
5
5
|
inline: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
6
6
|
inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
7
|
-
size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
|
|
7
|
+
size: import("@angular/core").InputSignal<"xs" | "sm" | "lg" | undefined>;
|
|
8
8
|
disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
9
9
|
buttonStyle: import("@angular/core").InputSignal<string | undefined>;
|
|
10
10
|
buttonClass: import("@angular/core").InputSignal<string | undefined>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-button.ts"],"names":[],"mappings":";AASA,
|
|
1
|
+
{"version":3,"file":"sd-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-button.ts"],"names":[],"mappings":";AASA,qBA+Ka,QAAQ;IACnB,IAAI,2DAAwC;IAC5C,KAAK,ySAmBD;IACJ,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,sEAA+B;IACnC,QAAQ,qEAAiD;IACzD,WAAW,0DAAmB;IAC9B,WAAW,0DAAmB;yCA3BnB,QAAQ;2CAAR,QAAQ;CA4BpB"}
|
|
@@ -23,7 +23,7 @@ export class SdButton {
|
|
|
23
23
|
i0.ɵɵstyleMap(ctx.buttonStyle());
|
|
24
24
|
i0.ɵɵclassMap(ctx.buttonClass());
|
|
25
25
|
i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
|
|
26
|
-
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-darker);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-darker);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-darker);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-darker);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-darker);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-darker);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-darker);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
26
|
+
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-darker);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-darker);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-darker);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-darker);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-darker);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-darker);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-darker);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
27
27
|
}
|
|
28
28
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
|
|
29
29
|
type: Component,
|
|
@@ -44,6 +44,6 @@ export class SdButton {
|
|
|
44
44
|
"[attr.data-sd-size]": "size()",
|
|
45
45
|
"[attr.data-sd-inset]": "inset()",
|
|
46
46
|
"[attr.data-sd-disabled]": "disabled()",
|
|
47
|
-
}, styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-darker);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-darker);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-darker);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-darker);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-darker);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-darker);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-darker);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"] }]
|
|
47
|
+
}, styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-darker);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-darker);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-darker);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-darker);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-darker);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-darker);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-darker);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"] }]
|
|
48
48
|
}], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }] }); })();
|
|
49
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber:
|
|
49
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber: 185 }); })();
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export declare class SdGap {
|
|
3
|
-
height: import("@angular/core").InputSignal<"default" | "
|
|
3
|
+
height: import("@angular/core").InputSignal<"default" | "xs" | "sm" | "lg" | "xxs" | "xl" | "xxl" | undefined>;
|
|
4
4
|
heightPx: import("@angular/core").InputSignal<number | undefined>;
|
|
5
|
-
width: import("@angular/core").InputSignal<"default" | "
|
|
5
|
+
width: import("@angular/core").InputSignal<"default" | "xs" | "sm" | "lg" | "xxs" | "xl" | "xxl" | undefined>;
|
|
6
6
|
widthPx: import("@angular/core").InputSignal<number | undefined>;
|
|
7
7
|
widthEm: import("@angular/core").InputSignal<number | undefined>;
|
|
8
8
|
_displayStyle: import("@angular/core").Signal<"none" | "block" | "inline-block" | undefined>;
|
|
@@ -10,10 +10,6 @@ export declare class SdListItem {
|
|
|
10
10
|
contentClass: import("@angular/core").InputSignal<string | undefined>;
|
|
11
11
|
toolTpl: import("@angular/core").Signal<TemplateRef<void> | undefined>;
|
|
12
12
|
private readonly _childLists;
|
|
13
|
-
private readonly _parentItem;
|
|
14
|
-
level: import("@angular/core").Signal<number>;
|
|
15
|
-
indentPadding: import("@angular/core").Signal<string | undefined>;
|
|
16
|
-
guideLeft: import("@angular/core").Signal<string>;
|
|
17
13
|
hasChildren: import("@angular/core").Signal<boolean>;
|
|
18
14
|
childrenOpen: import("@angular/core").Signal<boolean>;
|
|
19
15
|
onContentClick(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBAsJa,UAAU;IACrB,MAAM,4DAA4C;IAClD,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,OAAO,gEAA8C;IAErD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,WAAW,0CAAiD;IAE5D,YAAY,0CAET;IAEH,cAAc,IAAI,IAAI;yCAnBX,UAAU;2CAAV,UAAU;CAyBtB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren,
|
|
1
|
+
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
|
|
2
2
|
import { NgTemplateOutlet } from "@angular/common";
|
|
3
3
|
import { NgIcon } from "@ng-icons/core";
|
|
4
4
|
import { SdCollapse } from "../collapse/sd-collapse";
|
|
@@ -33,14 +33,11 @@ function SdListItem_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
|
33
33
|
i0.ɵɵproperty("open", ctx_r0.open());
|
|
34
34
|
} }
|
|
35
35
|
function SdListItem_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
36
|
-
i0.ɵɵelement(0, "div",
|
|
37
|
-
} if (rf & 2) {
|
|
38
|
-
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
39
|
-
i0.ɵɵstyleProp("left", ctx_r0.guideLeft());
|
|
36
|
+
i0.ɵɵelement(0, "div", 8);
|
|
40
37
|
} }
|
|
41
38
|
function SdListItem_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
42
39
|
i0.ɵɵelementStart(0, "sd-collapse", 4)(1, "div", 7);
|
|
43
|
-
i0.ɵɵconditionalCreate(2, SdListItem_Conditional_6_Conditional_2_Template, 1,
|
|
40
|
+
i0.ɵɵconditionalCreate(2, SdListItem_Conditional_6_Conditional_2_Template, 1, 0, "div", 8);
|
|
44
41
|
i0.ɵɵprojection(3, 1);
|
|
45
42
|
i0.ɵɵelementEnd()();
|
|
46
43
|
} if (rf & 2) {
|
|
@@ -59,26 +56,6 @@ export class SdListItem {
|
|
|
59
56
|
contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
|
|
60
57
|
toolTpl = contentChild("toolTpl", ...(ngDevMode ? [{ debugName: "toolTpl" }] : /* istanbul ignore next */ []));
|
|
61
58
|
_childLists = contentChildren(SdList, ...(ngDevMode ? [{ debugName: "_childLists" }] : /* istanbul ignore next */ []));
|
|
62
|
-
// 상위 아이템을 주입해 중첩 깊이(레벨)를 추적
|
|
63
|
-
_parentItem = inject(forwardRef(() => SdListItem), {
|
|
64
|
-
optional: true,
|
|
65
|
-
skipSelf: true,
|
|
66
|
-
});
|
|
67
|
-
// accordion(트리) 깊이만 셈. flat(섹션 그룹)은 들여쓰기 대상이 아니므로 0,
|
|
68
|
-
// flat 하위의 accordion 트리는 자체 루트(1)부터 새로 깊이를 셈.
|
|
69
|
-
level = computed(() => {
|
|
70
|
-
if (this.layout() !== "accordion")
|
|
71
|
-
return 0;
|
|
72
|
-
return (this._parentItem?.level() ?? 0) + 1;
|
|
73
|
-
}, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
|
|
74
|
-
// accordion 트리 깊이별 좌측 들여쓰기 (트리 루트·flat은 기본 패딩 유지)
|
|
75
|
-
indentPadding = computed(() => {
|
|
76
|
-
if (this.level() <= 1)
|
|
77
|
-
return undefined;
|
|
78
|
-
return `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em)`;
|
|
79
|
-
}, ...(ngDevMode ? [{ debugName: "indentPadding" }] : /* istanbul ignore next */ []));
|
|
80
|
-
// 자식 영역에 그릴 세로 가이드선의 좌측 위치 (현재 레벨 기준 + 반 칸)
|
|
81
|
-
guideLeft = computed(() => `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em + 0.75em)`, ...(ngDevMode ? [{ debugName: "guideLeft" }] : /* istanbul ignore next */ []));
|
|
82
59
|
hasChildren = computed(() => this._childLists().length > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
|
|
83
60
|
childrenOpen = computed(() => {
|
|
84
61
|
return this.layout() === "flat" ? true : this.open();
|
|
@@ -97,7 +74,7 @@ export class SdListItem {
|
|
|
97
74
|
i0.ɵɵqueryAdvance(2);
|
|
98
75
|
} }, hostVars: 6, hostBindings: function SdListItem_HostBindings(rf, ctx) { if (rf & 2) {
|
|
99
76
|
i0.ɵɵattribute("data-sd-layout", ctx.layout())("data-sd-open", ctx.open())("data-sd-selected", ctx.selected())("data-sd-readonly", ctx.readonly())("data-sd-has-children", ctx.hasChildren())("data-sd-has-selected-icon", ctx.selectedIcon() != null);
|
|
100
|
-
} }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars:
|
|
77
|
+
} }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 9, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter", "sdRipple"], [3, "tx-theme-primary-default", "tx-trans-lightest", "svg"], [1, "_label"], [1, "_tool"], [3, "open"], [3, "svg"], [3, "ngTemplateOutlet"], [1, "_children"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
|
|
101
78
|
i0.ɵɵprojectionDef(_c1);
|
|
102
79
|
i0.ɵɵelementStart(0, "div", 0);
|
|
103
80
|
i0.ɵɵlistener("click", function SdListItem_Template_div_click_0_listener() { return ctx.onContentClick(); })("keydown.enter", function SdListItem_Template_div_keydown_enter_0_listener() { return ctx.onContentClick(); });
|
|
@@ -112,7 +89,6 @@ export class SdListItem {
|
|
|
112
89
|
} if (rf & 2) {
|
|
113
90
|
i0.ɵɵstyleMap(ctx.contentStyle());
|
|
114
91
|
i0.ɵɵclassMap(ctx.contentClass());
|
|
115
|
-
i0.ɵɵstyleProp("padding-left", ctx.indentPadding());
|
|
116
92
|
i0.ɵɵproperty("sdRipple", !ctx.readonly() && !(ctx.layout() === "flat" && ctx.hasChildren()));
|
|
117
93
|
i0.ɵɵadvance();
|
|
118
94
|
i0.ɵɵconditional(ctx.selectedIcon() != null && !ctx.hasChildren() ? 1 : -1);
|
|
@@ -122,7 +98,7 @@ export class SdListItem {
|
|
|
122
98
|
i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
|
|
123
99
|
i0.ɵɵadvance();
|
|
124
100
|
i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
|
|
125
|
-
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background: var(--trans-lighter);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0;\n border-left: 1px solid var(--
|
|
101
|
+
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background: var(--trans-lighter);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 1em;\n width: 0;\n border-left: 1px solid var(--trans-light);\n pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list {\n padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n display: block;\n background: transparent;\n cursor: default;\n font-size: var(--font-size-sm);\n opacity: 0.7;\n margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
126
102
|
}
|
|
127
103
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
|
|
128
104
|
type: Component,
|
|
@@ -130,7 +106,6 @@ export class SdListItem {
|
|
|
130
106
|
<div
|
|
131
107
|
class="_content"
|
|
132
108
|
[style]="contentStyle()"
|
|
133
|
-
[style.padding-left]="indentPadding()"
|
|
134
109
|
[class]="contentClass()"
|
|
135
110
|
tabindex="0"
|
|
136
111
|
(click)="onContentClick()"
|
|
@@ -160,7 +135,7 @@ export class SdListItem {
|
|
|
160
135
|
<sd-collapse [open]="childrenOpen()">
|
|
161
136
|
<div class="_children">
|
|
162
137
|
@if (layout() === "accordion") {
|
|
163
|
-
<div class="_indent-guide"
|
|
138
|
+
<div class="_indent-guide"></div>
|
|
164
139
|
}
|
|
165
140
|
<ng-content select="sd-list" />
|
|
166
141
|
</div>
|
|
@@ -173,6 +148,6 @@ export class SdListItem {
|
|
|
173
148
|
"[attr.data-sd-readonly]": "readonly()",
|
|
174
149
|
"[attr.data-sd-has-children]": "hasChildren()",
|
|
175
150
|
"[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
|
|
176
|
-
}, styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background: var(--trans-lighter);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0;\n border-left: 1px solid var(--
|
|
151
|
+
}, styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background: var(--trans-lighter);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 1em;\n width: 0;\n border-left: 1px solid var(--trans-light);\n pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list {\n padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n display: block;\n background: transparent;\n cursor: default;\n font-size: var(--font-size-sm);\n opacity: 0.7;\n margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n background: transparent;\n}"] }]
|
|
177
152
|
}], null, { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], toolTpl: [{ type: i0.ContentChild, args: ["toolTpl", { isSignal: true }] }], _childLists: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdList), { isSignal: true }] }] }); })();
|
|
178
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber:
|
|
153
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 170 }); })();
|
|
@@ -9,7 +9,7 @@ export class SdList {
|
|
|
9
9
|
} }, inputs: { inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdList_Template(rf, ctx) { if (rf & 1) {
|
|
10
10
|
i0.ɵɵprojectionDef();
|
|
11
11
|
i0.ɵɵprojection(0);
|
|
12
|
-
} }, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background: var(--control-color);\n border: 1px solid var(--border-color-default);\n border-radius: var(--border-radius-default);\n padding: var(--gap-sm);\n gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n background: transparent;\n border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n background: transparent;\n}\nsd-list sd-list-item sd-list {\n border-color: transparent;\n border-radius: 0;\n padding:
|
|
12
|
+
} }, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background: var(--control-color);\n border: 1px solid var(--border-color-default);\n border-radius: var(--border-radius-default);\n padding: var(--gap-sm);\n gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n background: transparent;\n border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n background: transparent;\n}\nsd-list sd-list-item sd-list {\n border-color: transparent;\n border-radius: 0;\n padding: var(--gap-xs);\n background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
13
13
|
}
|
|
14
14
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdList, [{
|
|
15
15
|
type: Component,
|
|
@@ -17,6 +17,6 @@ export class SdList {
|
|
|
17
17
|
<ng-content />
|
|
18
18
|
`, host: {
|
|
19
19
|
"[attr.data-sd-inset]": "inset()",
|
|
20
|
-
}, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background: var(--control-color);\n border: 1px solid var(--border-color-default);\n border-radius: var(--border-radius-default);\n padding: var(--gap-sm);\n gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n background: transparent;\n border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n background: transparent;\n}\nsd-list sd-list-item sd-list {\n border-color: transparent;\n border-radius: 0;\n padding:
|
|
20
|
+
}, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background: var(--control-color);\n border: 1px solid var(--border-color-default);\n border-radius: var(--border-radius-default);\n padding: var(--gap-sm);\n gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n background: transparent;\n border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n background: transparent;\n}\nsd-list sd-list-item sd-list {\n border-color: transparent;\n border-radius: 0;\n padding: var(--gap-xs);\n background: transparent;\n}"] }]
|
|
21
21
|
}], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
|
|
22
22
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdList, { className: "SdList", filePath: "packages/angular/src/controls/list/sd-list.ts", lineNumber: 53 }); })();
|
|
@@ -110,7 +110,7 @@ export class SdPagination {
|
|
|
110
110
|
i0.ɵɵproperty("disabled", !ctx.hasNext());
|
|
111
111
|
i0.ɵɵadvance();
|
|
112
112
|
i0.ɵɵproperty("svg", ctx.icons.tablerChevronsRight);
|
|
113
|
-
} }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n display: inline-block;\n padding: var(--gap-xs);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
113
|
+
} }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n display: inline-block;\n padding: var(--gap-xxs) var(--gap-xs);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
114
114
|
}
|
|
115
115
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPagination, [{
|
|
116
116
|
type: Component,
|
|
@@ -138,6 +138,6 @@ export class SdPagination {
|
|
|
138
138
|
</sd-anchor>
|
|
139
139
|
`, host: {
|
|
140
140
|
class: "flex-row gap-xs",
|
|
141
|
-
}, styles: ["sd-pagination > sd-anchor {\n display: inline-block;\n padding: var(--gap-xs);\n}"] }]
|
|
141
|
+
}, styles: ["sd-pagination > sd-anchor {\n display: inline-block;\n padding: var(--gap-xxs) var(--gap-xs);\n}"] }]
|
|
142
142
|
}], null, { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }] }); })();
|
|
143
143
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPagination, { className: "SdPagination", filePath: "packages/angular/src/controls/pagination/sd-pagination.ts", lineNumber: 62 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-base-container.d.ts","sourceRoot":"","sources":["../../../src/data/crud/sd-base-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAGjB,MAAM,eAAe,CAAC;AAOvB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;;AAK1E,
|
|
1
|
+
{"version":3,"file":"sd-base-container.d.ts","sourceRoot":"","sources":["../../../src/data/crud/sd-base-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAGjB,MAAM,eAAe,CAAC;AAOvB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;;AAK1E,qBA0Da,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoD;IAClF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAEpD,SAAS,yCAA2B;IAEpC,KAAK,+CAAgB;IACrB,WAAW,+CAAgB;IAC3B,SAAS,8CAAY;IAErB,UAAU,+CAAgB;IAE1B,QAAQ,kDAAgC;IAExC,YAAY,gEAAgD;IAC5D,aAAa,gEAAiD;IAC9D,aAAa,gEAAiD;IAC9D,mBAAmB,gEAAuD;;IAsB1E,SAAS,CAAC,QAAQ,CAAC,mBAAmB,ifAAuB;yCAvClD,eAAe;2CAAf,eAAe;CAwC3B"}
|
|
@@ -140,7 +140,7 @@ export class SdBaseContainer {
|
|
|
140
140
|
i0.ɵɵcontentQuerySignal(dirIndex, ctx.topbarTplRef, _c0, 5)(dirIndex, ctx.commandTplRef, _c1, 5)(dirIndex, ctx.contentTplRef, _c2, 5)(dirIndex, ctx.bottomCommandTplRef, _c3, 5);
|
|
141
141
|
} if (rf & 2) {
|
|
142
142
|
i0.ɵɵqueryAdvance(4);
|
|
143
|
-
} }, inputs: { ready: [1, "ready"], initialized: [1, "initialized"], busyCount: [1, "busyCount"], restricted: [1, "restricted"], viewType: [1, "viewType"] }, outputs: { ready: "readyChange", busyCount: "busyCountChange" }, decls: 4, vars: 2, consts: [["content", ""], [3, "busy"], [1, "fill", "tx-theme-gray-light", "p-xxl", "tx-center"], [3, "ngTemplateOutlet"], [3, "svg", "size"], [1, "tx-trans-light"], [1, "flex-column", "fill"], [1, "p-default", "flex-row", "gap-default"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lighter", "bg-theme-gray-lightest"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
|
|
143
|
+
} }, inputs: { ready: [1, "ready"], initialized: [1, "initialized"], busyCount: [1, "busyCount"], restricted: [1, "restricted"], viewType: [1, "viewType"] }, outputs: { ready: "readyChange", busyCount: "busyCountChange" }, decls: 4, vars: 2, consts: [["content", ""], [3, "busy"], [1, "fill", "tx-theme-gray-light", "p-xxl", "tx-center"], [3, "ngTemplateOutlet"], [3, "svg", "size"], [1, "tx-trans-light"], [1, "flex-column", "fill"], [1, "p-sm-default", "flex-row", "gap-default", "bdb", "bdb-color-lighter", "bg-theme-gray-lightest"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lighter", "bg-theme-gray-lightest"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
|
|
144
144
|
i0.ɵɵelementStart(0, "sd-busy-container", 1);
|
|
145
145
|
i0.ɵɵconditionalCreate(1, SdBaseContainer_Conditional_1_Template, 3, 1);
|
|
146
146
|
i0.ɵɵelementEnd();
|
|
@@ -189,7 +189,7 @@ export class SdBaseContainer {
|
|
|
189
189
|
<ng-template #content>
|
|
190
190
|
<div class="flex-column fill">
|
|
191
191
|
@if (commandTplRef()) {
|
|
192
|
-
<div class="p-default flex-row gap-default">
|
|
192
|
+
<div class="p-sm-default flex-row gap-default bdb bdb-color-lighter bg-theme-gray-lightest">
|
|
193
193
|
<ng-template [ngTemplateOutlet]="commandTplRef()" />
|
|
194
194
|
</div>
|
|
195
195
|
}
|
|
@@ -201,7 +201,9 @@ export class SdBaseContainer {
|
|
|
201
201
|
</div>
|
|
202
202
|
|
|
203
203
|
@if (bottomCommandTplRef()) {
|
|
204
|
-
<div
|
|
204
|
+
<div
|
|
205
|
+
class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest"
|
|
206
|
+
>
|
|
205
207
|
<ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
|
|
206
208
|
</div>
|
|
207
209
|
}
|
|
@@ -210,4 +212,4 @@ export class SdBaseContainer {
|
|
|
210
212
|
`,
|
|
211
213
|
}]
|
|
212
214
|
}], () => [], { ready: [{ type: i0.Input, args: [{ isSignal: true, alias: "ready", required: false }] }, { type: i0.Output, args: ["readyChange"] }], initialized: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialized", required: false }] }], busyCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "busyCount", required: false }] }, { type: i0.Output, args: ["busyCountChange"] }], restricted: [{ type: i0.Input, args: [{ isSignal: true, alias: "restricted", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: true }] }], topbarTplRef: [{ type: i0.ContentChild, args: ["topbarTpl", { isSignal: true }] }], commandTplRef: [{ type: i0.ContentChild, args: ["commandTpl", { isSignal: true }] }], contentTplRef: [{ type: i0.ContentChild, args: ["contentTpl", { isSignal: true }] }], bottomCommandTplRef: [{ type: i0.ContentChild, args: ["bottomCommandTpl", { isSignal: true }] }] }); })();
|
|
213
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBaseContainer, { className: "SdBaseContainer", filePath: "packages/angular/src/data/crud/sd-base-container.ts", lineNumber:
|
|
215
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBaseContainer, { className: "SdBaseContainer", filePath: "packages/angular/src/data/crud/sd-base-container.ts", lineNumber: 82 }); })();
|
|
@@ -37,7 +37,7 @@ function SdSheet_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
37
37
|
i0.ɵɵelementEnd();
|
|
38
38
|
} if (rf & 2) {
|
|
39
39
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
40
|
-
i0.ɵɵproperty("theme", "link-
|
|
40
|
+
i0.ɵɵproperty("theme", "link-blue-gray")("size", "xs");
|
|
41
41
|
i0.ɵɵadvance();
|
|
42
42
|
i0.ɵɵproperty("svg", ctx_r1.icons.tablerSettings);
|
|
43
43
|
} }
|
|
@@ -795,7 +795,7 @@ export class SdSheet {
|
|
|
795
795
|
@if ((key() || effectivePageCount() > 1) && !hideConfigBar()) {
|
|
796
796
|
<div class="_tool flex-row gap-sm p-xs">
|
|
797
797
|
@if (key()) {
|
|
798
|
-
<sd-button [theme]="'link-
|
|
798
|
+
<sd-button [theme]="'link-blue-gray'" [size]="'xs'" (click)="onConfigButtonClick()">
|
|
799
799
|
<ng-icon [svg]="icons.tablerSettings" />
|
|
800
800
|
</sd-button>
|
|
801
801
|
}
|
|
@@ -2,10 +2,11 @@ import { type SdMenu } from "../../core/routing/menu-utils";
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class SdSidebarMenu {
|
|
4
4
|
menus: import("@angular/core").InputSignal<SdMenu[]>;
|
|
5
|
-
layout: import("@angular/core").InputSignal<"flat" | "accordion" | undefined>;
|
|
5
|
+
layout: import("@angular/core").InputSignal<"flat" | "accordion" | "accordion-expanded" | undefined>;
|
|
6
6
|
getMenuIsSelectedFn: import("@angular/core").InputSignal<((menu: SdMenu) => boolean) | undefined>;
|
|
7
7
|
fullPageCode: import("@angular/core").Signal<string>;
|
|
8
|
-
rootLayout: import("@angular/core").Signal<"flat" | "accordion">;
|
|
8
|
+
rootLayout: import("@angular/core").Signal<"flat" | "accordion" | "accordion-expanded">;
|
|
9
|
+
expandInitially: import("@angular/core").Signal<boolean>;
|
|
9
10
|
getMenuRouterLinkOption(menu: SdMenu): {
|
|
10
11
|
link: string;
|
|
11
12
|
queryParams: Record<string, string> | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBAyEa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM
|
|
1
|
+
{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBAyEa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,+FAAwD;IAC9D,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,UAAU,8EAAsF;IAGhG,eAAe,0CAA8D;IAE7E,uBAAuB,CACrB,IAAI,EAAE,MAAM,GACX;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAA;KAAE,GAAG,SAAS;IAIhF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM/B,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;yCA/BS,aAAa;2CAAb,aAAa;CAgCzB"}
|
|
@@ -13,15 +13,14 @@ const _c1 = (a0, a1) => ({ menus: a0, depth: a1 });
|
|
|
13
13
|
const _forTrack0 = ($index, $item) => $item.codeChain.join(".");
|
|
14
14
|
function SdSidebarMenu_ng_template_4_Template(rf, ctx) { }
|
|
15
15
|
function SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
16
|
-
i0.ɵɵelement(0, "ng-icon",
|
|
17
|
-
i0.ɵɵtext(1, " \u00A0 ");
|
|
16
|
+
i0.ɵɵelement(0, "ng-icon", 7);
|
|
18
17
|
} if (rf & 2) {
|
|
19
18
|
const menu_r2 = i0.ɵɵnextContext().$implicit;
|
|
20
19
|
i0.ɵɵproperty("svg", menu_r2.icon);
|
|
21
20
|
} }
|
|
22
21
|
function SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template(rf, ctx) { }
|
|
23
22
|
function SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
24
|
-
i0.ɵɵelementStart(0, "sd-list",
|
|
23
|
+
i0.ɵɵelementStart(0, "sd-list", 8);
|
|
25
24
|
i0.ɵɵtemplate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 3);
|
|
26
25
|
i0.ɵɵelementEnd();
|
|
27
26
|
} if (rf & 2) {
|
|
@@ -37,15 +36,15 @@ function SdSidebarMenu_ng_template_5_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
37
36
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
38
37
|
i0.ɵɵelementStart(0, "sd-list-item", 6);
|
|
39
38
|
i0.ɵɵlistener("click", function SdSidebarMenu_ng_template_5_For_1_Template_sd_list_item_click_0_listener() { const menu_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMenuClick(menu_r2)); });
|
|
40
|
-
i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template,
|
|
39
|
+
i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template, 1, 1, "ng-icon", 7);
|
|
41
40
|
i0.ɵɵtext(2);
|
|
42
|
-
i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template, 2, 6, "sd-list",
|
|
41
|
+
i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template, 2, 6, "sd-list", 8);
|
|
43
42
|
i0.ɵɵelementEnd();
|
|
44
43
|
} if (rf & 2) {
|
|
45
44
|
const menu_r2 = ctx.$implicit;
|
|
46
45
|
const depth_r4 = i0.ɵɵnextContext().depth;
|
|
47
46
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
48
|
-
i0.ɵɵproperty("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0
|
|
47
|
+
i0.ɵɵproperty("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0 && ctx_r2.rootLayout() === "flat" ? "flat" : "accordion")("open", ctx_r2.expandInitially() && menu_r2.children != null);
|
|
49
48
|
i0.ɵɵadvance();
|
|
50
49
|
i0.ɵɵconditional(menu_r2.icon ? 1 : -1);
|
|
51
50
|
i0.ɵɵadvance();
|
|
@@ -54,7 +53,7 @@ function SdSidebarMenu_ng_template_5_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
54
53
|
i0.ɵɵconditional(menu_r2.children ? 3 : -1);
|
|
55
54
|
} }
|
|
56
55
|
function SdSidebarMenu_ng_template_5_Template(rf, ctx) { if (rf & 1) {
|
|
57
|
-
i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_5_For_1_Template, 4,
|
|
56
|
+
i0.ɵɵrepeaterCreate(0, SdSidebarMenu_ng_template_5_For_1_Template, 4, 7, "sd-list-item", 5, _forTrack0);
|
|
58
57
|
} if (rf & 2) {
|
|
59
58
|
const currMenus_r6 = ctx.menus;
|
|
60
59
|
i0.ɵɵrepeater(currMenus_r6);
|
|
@@ -65,6 +64,8 @@ export class SdSidebarMenu {
|
|
|
65
64
|
getMenuIsSelectedFn = input(...(ngDevMode ? [undefined, { debugName: "getMenuIsSelectedFn" }] : /* istanbul ignore next */ []));
|
|
66
65
|
fullPageCode = injectFullPageCodeSignal();
|
|
67
66
|
rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"), ...(ngDevMode ? [{ debugName: "rootLayout" }] : /* istanbul ignore next */ []));
|
|
67
|
+
// accordion-expanded: 모든 깊이 항목을 펼친 채로 시작(이후 클릭 토글). 그 외는 접힘 시작.
|
|
68
|
+
expandInitially = computed(() => this.rootLayout() === "accordion-expanded", ...(ngDevMode ? [{ debugName: "expandInitially" }] : /* istanbul ignore next */ []));
|
|
68
69
|
getMenuRouterLinkOption(menu) {
|
|
69
70
|
return menuRouterLinkOption(menu);
|
|
70
71
|
}
|
|
@@ -80,7 +81,7 @@ export class SdSidebarMenu {
|
|
|
80
81
|
static ɵfac = function SdSidebarMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebarMenu)(); };
|
|
81
82
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarMenu, selectors: [["sd-sidebar-menu"]], hostAttrs: [1, "flex-column", "fill"], hostVars: 1, hostBindings: function SdSidebarMenu_HostBindings(rf, ctx) { if (rf & 2) {
|
|
82
83
|
i0.ɵɵattribute("data-sd-root-layout", ctx.rootLayout());
|
|
83
|
-
} }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 7, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "sdRouterLink", "selected", "layout"], [3, "click", "sdRouterLink", "selected", "layout"], [3, "
|
|
84
|
+
} }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 7, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "sdRouterLink", "selected", "layout", "open"], [3, "click", "sdRouterLink", "selected", "layout", "open"], [3, "svg"], [3, "inset"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
|
|
84
85
|
i0.ɵɵelementStart(0, "div", 1)(1, "b");
|
|
85
86
|
i0.ɵɵtext(2, "MENU");
|
|
86
87
|
i0.ɵɵelementEnd()();
|
|
@@ -101,7 +102,7 @@ export class SdSidebarMenu {
|
|
|
101
102
|
SdRouterLink,
|
|
102
103
|
SdList,
|
|
103
104
|
SdListItem,
|
|
104
|
-
NgIcon], styles: ["sd-sidebar-menu
|
|
105
|
+
NgIcon], styles: ["sd-sidebar-menu {\n /*> sd-list[data-sd-inset=\"true\"] {\n sd-list {\n background: var(--trans-lightest);\n }\n }*/\n}\nsd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
105
106
|
}
|
|
106
107
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarMenu, [{
|
|
107
108
|
type: Component,
|
|
@@ -131,11 +132,11 @@ export class SdSidebarMenu {
|
|
|
131
132
|
[sdRouterLink]="getMenuRouterLinkOption(menu)"
|
|
132
133
|
(click)="onMenuClick(menu)"
|
|
133
134
|
[selected]="getIsMenuSelected(menu)"
|
|
134
|
-
[layout]="depth === 0
|
|
135
|
+
[layout]="depth === 0 && rootLayout() === 'flat' ? 'flat' : 'accordion'"
|
|
136
|
+
[open]="expandInitially() && menu.children != null"
|
|
135
137
|
>
|
|
136
138
|
@if (menu.icon) {
|
|
137
139
|
<ng-icon [svg]="menu.icon" />
|
|
138
|
-
|
|
139
140
|
}
|
|
140
141
|
{{ menu.title }}
|
|
141
142
|
@if (menu.children) {
|
|
@@ -152,6 +153,6 @@ export class SdSidebarMenu {
|
|
|
152
153
|
</sd-list-item>
|
|
153
154
|
}
|
|
154
155
|
</ng-template>
|
|
155
|
-
`, styles: ["sd-sidebar-menu
|
|
156
|
+
`, styles: ["sd-sidebar-menu {\n /*> sd-list[data-sd-inset=\"true\"] {\n sd-list {\n background: var(--trans-lightest);\n }\n }*/\n}\nsd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n background: transparent;\n}"] }]
|
|
156
157
|
}], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], getMenuIsSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getMenuIsSelectedFn", required: false }] }] }); })();
|
|
157
158
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber: 88 }); })();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplysm/angular",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.95",
|
|
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/
|
|
56
|
-
"@simplysm/
|
|
57
|
-
"@simplysm/service-
|
|
54
|
+
"@simplysm/core-common": "14.0.95",
|
|
55
|
+
"@simplysm/service-common": "14.0.95",
|
|
56
|
+
"@simplysm/core-browser": "14.0.95",
|
|
57
|
+
"@simplysm/service-client": "14.0.95"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@angular/compiler": "^21.2.16",
|
|
@@ -154,6 +154,10 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
154
154
|
vertical-align: top;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
+
&[data-sd-size="xs"] > button {
|
|
158
|
+
padding: var(--gap-xxs) var(--gap-xs);
|
|
159
|
+
}
|
|
160
|
+
|
|
157
161
|
&[data-sd-size="sm"] > button {
|
|
158
162
|
padding: var(--gap-xs) var(--gap-default);
|
|
159
163
|
}
|
|
@@ -202,7 +206,7 @@ export class SdButton {
|
|
|
202
206
|
>();
|
|
203
207
|
inline = input(false, { transform: booleanAttribute });
|
|
204
208
|
inset = input(false, { transform: booleanAttribute });
|
|
205
|
-
size = input<"sm" | "lg">();
|
|
209
|
+
size = input<"xs" | "sm" | "lg">();
|
|
206
210
|
disabled = input(false, { transform: booleanAttribute });
|
|
207
211
|
buttonStyle = input<string>();
|
|
208
212
|
buttonClass = input<string>();
|
|
@@ -5,8 +5,6 @@ import {
|
|
|
5
5
|
computed,
|
|
6
6
|
contentChild,
|
|
7
7
|
contentChildren,
|
|
8
|
-
forwardRef,
|
|
9
|
-
inject,
|
|
10
8
|
input,
|
|
11
9
|
model,
|
|
12
10
|
TemplateRef,
|
|
@@ -29,7 +27,6 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
29
27
|
<div
|
|
30
28
|
class="_content"
|
|
31
29
|
[style]="contentStyle()"
|
|
32
|
-
[style.padding-left]="indentPadding()"
|
|
33
30
|
[class]="contentClass()"
|
|
34
31
|
tabindex="0"
|
|
35
32
|
(click)="onContentClick()"
|
|
@@ -59,7 +56,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
59
56
|
<sd-collapse [open]="childrenOpen()">
|
|
60
57
|
<div class="_children">
|
|
61
58
|
@if (layout() === "accordion") {
|
|
62
|
-
<div class="_indent-guide"
|
|
59
|
+
<div class="_indent-guide"></div>
|
|
63
60
|
}
|
|
64
61
|
<ng-content select="sd-list" />
|
|
65
62
|
</div>
|
|
@@ -110,7 +107,9 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
110
107
|
}
|
|
111
108
|
}
|
|
112
109
|
|
|
113
|
-
// 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준
|
|
110
|
+
// 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준 컨테이너.
|
|
111
|
+
// 깊이별 들여쓰기는 중첩 sd-list 의 padding 으로 누적되므로, 이 컨테이너
|
|
112
|
+
// 좌측은 항상 현재 항목 기준이라 가이드선 위치는 고정값이면 충분함.
|
|
114
113
|
> sd-collapse > ._content > ._children {
|
|
115
114
|
position: relative;
|
|
116
115
|
|
|
@@ -118,8 +117,9 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
118
117
|
position: absolute;
|
|
119
118
|
top: 0;
|
|
120
119
|
bottom: 0;
|
|
120
|
+
left: 1em;
|
|
121
121
|
width: 0;
|
|
122
|
-
border-left: 1px solid var(--
|
|
122
|
+
border-left: 1px solid var(--trans-light);
|
|
123
123
|
pointer-events: none;
|
|
124
124
|
}
|
|
125
125
|
}
|
|
@@ -132,9 +132,11 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
-
|
|
136
|
-
//
|
|
137
|
-
|
|
135
|
+
// 깊이별 들여쓰기: accordion 항목의 자식 리스트를 한 칸씩 누적 들여씀.
|
|
136
|
+
// (flat 항목의 자식 리스트는 들여쓰지 않음)
|
|
137
|
+
> sd-collapse > ._content > ._children > sd-list {
|
|
138
|
+
padding-left: 1.5em;
|
|
139
|
+
}
|
|
138
140
|
}
|
|
139
141
|
|
|
140
142
|
&[data-sd-layout="flat"][data-sd-has-children="true"] {
|
|
@@ -178,31 +180,6 @@ export class SdListItem {
|
|
|
178
180
|
|
|
179
181
|
private readonly _childLists = contentChildren(SdList);
|
|
180
182
|
|
|
181
|
-
// 상위 아이템을 주입해 중첩 깊이(레벨)를 추적
|
|
182
|
-
private readonly _parentItem = inject<SdListItem>(
|
|
183
|
-
forwardRef(() => SdListItem),
|
|
184
|
-
{
|
|
185
|
-
optional: true,
|
|
186
|
-
skipSelf: true,
|
|
187
|
-
},
|
|
188
|
-
);
|
|
189
|
-
|
|
190
|
-
// accordion(트리) 깊이만 셈. flat(섹션 그룹)은 들여쓰기 대상이 아니므로 0,
|
|
191
|
-
// flat 하위의 accordion 트리는 자체 루트(1)부터 새로 깊이를 셈.
|
|
192
|
-
level = computed((): number => {
|
|
193
|
-
if (this.layout() !== "accordion") return 0;
|
|
194
|
-
return (this._parentItem?.level() ?? 0) + 1;
|
|
195
|
-
});
|
|
196
|
-
|
|
197
|
-
// accordion 트리 깊이별 좌측 들여쓰기 (트리 루트·flat은 기본 패딩 유지)
|
|
198
|
-
indentPadding = computed(() => {
|
|
199
|
-
if (this.level() <= 1) return undefined;
|
|
200
|
-
return `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em)`;
|
|
201
|
-
});
|
|
202
|
-
|
|
203
|
-
// 자식 영역에 그릴 세로 가이드선의 좌측 위치 (현재 레벨 기준 + 반 칸)
|
|
204
|
-
guideLeft = computed(() => `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em + 0.75em)`);
|
|
205
|
-
|
|
206
183
|
hasChildren = computed(() => this._childLists().length > 0);
|
|
207
184
|
|
|
208
185
|
childrenOpen = computed(() => {
|
|
@@ -57,7 +57,7 @@ import { NgTemplateOutlet } from "@angular/common";
|
|
|
57
57
|
<ng-template #content>
|
|
58
58
|
<div class="flex-column fill">
|
|
59
59
|
@if (commandTplRef()) {
|
|
60
|
-
<div class="p-default flex-row gap-default">
|
|
60
|
+
<div class="p-sm-default flex-row gap-default bdb bdb-color-lighter bg-theme-gray-lightest">
|
|
61
61
|
<ng-template [ngTemplateOutlet]="commandTplRef()" />
|
|
62
62
|
</div>
|
|
63
63
|
}
|
|
@@ -69,7 +69,9 @@ import { NgTemplateOutlet } from "@angular/common";
|
|
|
69
69
|
</div>
|
|
70
70
|
|
|
71
71
|
@if (bottomCommandTplRef()) {
|
|
72
|
-
<div
|
|
72
|
+
<div
|
|
73
|
+
class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest"
|
|
74
|
+
>
|
|
73
75
|
<ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
|
|
74
76
|
</div>
|
|
75
77
|
}
|
|
@@ -80,7 +80,7 @@ import { SdEvents } from "../../core/events/sd-events";
|
|
|
80
80
|
@if ((key() || effectivePageCount() > 1) && !hideConfigBar()) {
|
|
81
81
|
<div class="_tool flex-row gap-sm p-xs">
|
|
82
82
|
@if (key()) {
|
|
83
|
-
<sd-button [theme]="'link-
|
|
83
|
+
<sd-button [theme]="'link-blue-gray'" [size]="'xs'" (click)="onConfigButtonClick()">
|
|
84
84
|
<ng-icon [svg]="icons.tablerSettings" />
|
|
85
85
|
</sd-button>
|
|
86
86
|
}
|
|
@@ -45,11 +45,11 @@ import { NgIcon } from "@ng-icons/core";
|
|
|
45
45
|
[sdRouterLink]="getMenuRouterLinkOption(menu)"
|
|
46
46
|
(click)="onMenuClick(menu)"
|
|
47
47
|
[selected]="getIsMenuSelected(menu)"
|
|
48
|
-
[layout]="depth === 0
|
|
48
|
+
[layout]="depth === 0 && rootLayout() === 'flat' ? 'flat' : 'accordion'"
|
|
49
|
+
[open]="expandInitially() && menu.children != null"
|
|
49
50
|
>
|
|
50
51
|
@if (menu.icon) {
|
|
51
52
|
<ng-icon [svg]="menu.icon" />
|
|
52
|
-
|
|
53
53
|
}
|
|
54
54
|
{{ menu.title }}
|
|
55
55
|
@if (menu.children) {
|
|
@@ -70,13 +70,13 @@ import { NgIcon } from "@ng-icons/core";
|
|
|
70
70
|
styles: [
|
|
71
71
|
/* language=SCSS */ `
|
|
72
72
|
sd-sidebar-menu {
|
|
73
|
-
|
|
73
|
+
/*> sd-list[data-sd-inset="true"] {
|
|
74
74
|
sd-list {
|
|
75
75
|
background: var(--trans-lightest);
|
|
76
76
|
}
|
|
77
|
-
}
|
|
77
|
+
}*/
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
&[data-sd-root-layout="flat"] {
|
|
80
80
|
> sd-list[data-sd-inset="true"] > sd-list-item > sd-collapse > ._content > ._children > sd-list {
|
|
81
81
|
background: transparent;
|
|
82
82
|
}
|
|
@@ -87,13 +87,16 @@ import { NgIcon } from "@ng-icons/core";
|
|
|
87
87
|
})
|
|
88
88
|
export class SdSidebarMenu {
|
|
89
89
|
menus = input<SdMenu[]>([]);
|
|
90
|
-
layout = input<"accordion" | "flat">();
|
|
90
|
+
layout = input<"accordion" | "accordion-expanded" | "flat">();
|
|
91
91
|
getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
|
|
92
92
|
|
|
93
93
|
fullPageCode = injectFullPageCodeSignal();
|
|
94
94
|
|
|
95
95
|
rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"));
|
|
96
96
|
|
|
97
|
+
// accordion-expanded: 모든 깊이 항목을 펼친 채로 시작(이후 클릭 토글). 그 외는 접힘 시작.
|
|
98
|
+
expandInitially = computed(() => this.rootLayout() === "accordion-expanded");
|
|
99
|
+
|
|
97
100
|
getMenuRouterLinkOption(
|
|
98
101
|
menu: SdMenu,
|
|
99
102
|
): { link: string; queryParams: Record<string, string> | undefined } | undefined {
|