@simplysm/angular 14.0.91 → 14.0.93

package/dist/controls/button/sd-button.js

@@ -23,7 +23,7 @@ export class SdButton {
             i0.ɵɵstyleMap(ctx.buttonStyle());
             i0.ɵɵclassMap(ctx.buttonClass());
             i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
-        } }, 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-default);\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 });
+        } }, 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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
         type: Component,
@@ -44,6 +44,6 @@ export class SdButton {
                     "[attr.data-sd-size]": "size()",
                     "[attr.data-sd-inset]": "inset()",
                     "[attr.data-sd-disabled]": "disabled()",
-                }, 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-default);\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}"] }]
+                }, 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}"] }]
     }], 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber: 181 }); })();

package/dist/controls/list/sd-list-item.d.ts

@@ -10,6 +10,10 @@ export declare class SdListItem {
     contentClass: import("@angular/core").InputSignal<string | undefined>;
     toolTpl: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     private readonly _childLists;
+    private readonly _parentItem;
+    level: import("@angular/core").Signal<number>;
+    indentPadding: import("@angular/core").Signal<string | undefined>;
+    guideLeft: import("@angular/core").Signal<string>;
     hasChildren: import("@angular/core").Signal<boolean>;
     childrenOpen: import("@angular/core").Signal<boolean>;
     onContentClick(): void;

package/dist/controls/list/sd-list-item.d.ts.map

@@ -1 +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,qBA4Ga,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"}
+{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBAkJa,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;IAGvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAM1B;IAIF,KAAK,yCAGF;IAGH,aAAa,qDAGV;IAGH,SAAS,yCAAuF;IAEhG,WAAW,0CAAiD;IAE5D,YAAY,0CAET;IAEH,cAAc,IAAI,IAAI;yCA5CX,UAAU;2CAAV,UAAU;CAkDtB"}

package/dist/controls/list/sd-list-item.js

@@ -1,4 +1,4 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, forwardRef, inject, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { NgIcon } from "@ng-icons/core";
 import { SdCollapse } from "../collapse/sd-collapse";
@@ -32,13 +32,22 @@ function SdListItem_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("open", ctx_r0.open());
 } }
+function SdListItem_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 9);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("left", ctx_r0.guideLeft());
+} }
 function SdListItem_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "sd-collapse", 4);
-    i0.ɵɵprojection(1, 1);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "sd-collapse", 4)(1, "div", 7);
+    i0.ɵɵconditionalCreate(2, SdListItem_Conditional_6_Conditional_2_Template, 1, 2, "div", 8);
+    i0.ɵɵprojection(3, 1);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("open", ctx_r0.childrenOpen());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.layout() === "accordion" ? 2 : -1);
 } }
 export class SdListItem {
     layout = input("accordion", ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
@@ -50,6 +59,26 @@ export class SdListItem {
     contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
     toolTpl = contentChild("toolTpl", ...(ngDevMode ? [{ debugName: "toolTpl" }] : /* istanbul ignore next */ []));
     _childLists = contentChildren(SdList, ...(ngDevMode ? [{ debugName: "_childLists" }] : /* istanbul ignore next */ []));
+    // 상위 아이템을 주입해 중첩 깊이(레벨)를 추적
+    _parentItem = inject(forwardRef(() => SdListItem), {
+        optional: true,
+        skipSelf: true,
+    });
+    // accordion(트리) 깊이만 셈. flat(섹션 그룹)은 들여쓰기 대상이 아니므로 0,
+    // flat 하위의 accordion 트리는 자체 루트(1)부터 새로 깊이를 셈.
+    level = computed(() => {
+        if (this.layout() !== "accordion")
+            return 0;
+        return (this._parentItem?.level() ?? 0) + 1;
+    }, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    // accordion 트리 깊이별 좌측 들여쓰기 (트리 루트·flat은 기본 패딩 유지)
+    indentPadding = computed(() => {
+        if (this.level() <= 1)
+            return undefined;
+        return `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em)`;
+    }, ...(ngDevMode ? [{ debugName: "indentPadding" }] : /* istanbul ignore next */ []));
+    // 자식 영역에 그릴 세로 가이드선의 좌측 위치 (현재 레벨 기준 + 반 칸)
+    guideLeft = computed(() => `calc(var(--gap-default) + ${(this.level() - 1) * 1.5}em + 0.75em)`, ...(ngDevMode ? [{ debugName: "guideLeft" }] : /* istanbul ignore next */ []));
     hasChildren = computed(() => this._childLists().length > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     childrenOpen = computed(() => {
         return this.layout() === "flat" ? true : this.open();
@@ -68,7 +97,7 @@ export class SdListItem {
             i0.ɵɵqueryAdvance(2);
         } }, hostVars: 6, hostBindings: function SdListItem_HostBindings(rf, ctx) { if (rf & 2) {
             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);
-        } }, 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"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
+        } }, 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: 11, 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", 3, "left"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c1);
             i0.ɵɵelementStart(0, "div", 0);
             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(); });
@@ -79,10 +108,11 @@ export class SdListItem {
             i0.ɵɵconditionalCreate(4, SdListItem_Conditional_4_Template, 2, 1, "div", 3);
             i0.ɵɵconditionalCreate(5, SdListItem_Conditional_5_Template, 1, 1, "sd-collapse-icon", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(6, SdListItem_Conditional_6_Template, 2, 1, "sd-collapse", 4);
+            i0.ɵɵconditionalCreate(6, SdListItem_Conditional_6_Template, 4, 2, "sd-collapse", 4);
         } if (rf & 2) {
             i0.ɵɵstyleMap(ctx.contentStyle());
             i0.ɵɵclassMap(ctx.contentClass());
+            i0.ɵɵstyleProp("padding-left", ctx.indentPadding());
             i0.ɵɵproperty("sdRipple", !ctx.readonly() && !(ctx.layout() === "flat" && ctx.hasChildren()));
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectedIcon() != null && !ctx.hasChildren() ? 1 : -1);
@@ -92,36 +122,50 @@ export class SdListItem {
             i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
-        } }, 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}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\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[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > sd-list {\n  padding: var(--gap-xs) 0;\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}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, 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(--border-color-default);\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=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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
         type: Component,
-        args: [{ selector: "sd-list-item", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], template: `
-    <div class="_content" [style]="contentStyle()" [class]="contentClass()" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()" [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())">
-      @if (selectedIcon() != null && !hasChildren()) {
-        <ng-icon
-          [class.tx-theme-primary-default]="selected()"
-          [class.tx-trans-lightest]="!selected()"
-          [svg]="selectedIcon()!"
-        />
-      }
-      <div class="_label">
-        <ng-content />
-      </div>
-      @if (toolTpl()) {
-        <div class="_tool">
-          <ng-template [ngTemplateOutlet]="toolTpl()!" />
-        </div>
-      }
-      @if (layout() === "accordion" && hasChildren()) {
-        <sd-collapse-icon [open]="open()" />
-      }
-    </div>
-    @if (hasChildren()) {
-      <sd-collapse [open]="childrenOpen()">
-        <ng-content select="sd-list" />
-      </sd-collapse>
-    }
+        args: [{ selector: "sd-list-item", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], template: `
+    <div
+      class="_content"
+      [style]="contentStyle()"
+      [style.padding-left]="indentPadding()"
+      [class]="contentClass()"
+      tabindex="0"
+      (click)="onContentClick()"
+      (keydown.enter)="onContentClick()"
+      [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())"
+    >
+      @if (selectedIcon() != null && !hasChildren()) {
+        <ng-icon
+          [class.tx-theme-primary-default]="selected()"
+          [class.tx-trans-lightest]="!selected()"
+          [svg]="selectedIcon()!"
+        />
+      }
+      <div class="_label">
+        <ng-content />
+      </div>
+      @if (toolTpl()) {
+        <div class="_tool">
+          <ng-template [ngTemplateOutlet]="toolTpl()!" />
+        </div>
+      }
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
+    </div>
+    @if (hasChildren()) {
+      <sd-collapse [open]="childrenOpen()">
+        <div class="_children">
+          @if (layout() === "accordion") {
+            <div class="_indent-guide" [style.left]="guideLeft()"></div>
+          }
+          <ng-content select="sd-list" />
+        </div>
+      </sd-collapse>
+    }
   `, host: {
                     "[attr.data-sd-layout]": "layout()",
                     "[attr.data-sd-open]": "open()",
@@ -129,6 +173,6 @@ export class SdListItem {
                     "[attr.data-sd-readonly]": "readonly()",
                     "[attr.data-sd-has-children]": "hasChildren()",
                     "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
-                }, 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}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\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[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > sd-list {\n  padding: var(--gap-xs) 0;\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}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"] }]
+                }, 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(--border-color-default);\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=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}"] }]
     }], 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 }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 128 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 168 }); })();

package/dist/controls/list/sd-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-list.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list.ts"],"names":[],"mappings":";AAQA,qBA+Ba,MAAM;IACjB,KAAK,qEAAiD;yCAD3C,MAAM;2CAAN,MAAM;CAElB"}
+{"version":3,"file":"sd-list.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list.ts"],"names":[],"mappings":";AAQA,qBA4Ca,MAAM;IACjB,KAAK,qEAAiD;yCAD3C,MAAM;2CAAN,MAAM;CAElB"}

package/dist/controls/list/sd-list.js

@@ -9,7 +9,7 @@ export class SdList {
         } }, inputs: { inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdList_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background: var(--control-color);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, 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: 0;\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdList, [{
         type: Component,
@@ -17,6 +17,6 @@ export class SdList {
     <ng-content />
   `, host: {
                     "[attr.data-sd-inset]": "inset()",
-                }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background: var(--control-color);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}"] }]
+                }, 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: 0;\n  background: transparent;\n}"] }]
     }], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdList, { className: "SdList", filePath: "packages/angular/src/controls/list/sd-list.ts", lineNumber: 40 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdList, { className: "SdList", filePath: "packages/angular/src/controls/list/sd-list.ts", lineNumber: 53 }); })();

package/dist/core/modal/sd-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-modal.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AASvB,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,wBAAwB,CAAC;;;AAEhC,qBA0Sa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAC1F,OAAO,CAAC,QAAQ,CAAC,eAAe,CAEc;IAC9C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAEhD,SAAS,CAAC,QAAQ,CAAC,OAAO,yVAAW;IAErC,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,WAAW,0DAAwC;IACnD,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;;IAoCH,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAKvD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKxC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAK1C,cAAc,IAAI,IAAI;IAYtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;YAIN,WAAW;YAgBX,cAAc;yCAjMjB,OAAO;2CAAP,OAAO;CAiNnB"}
+{"version":3,"file":"sd-modal.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AASvB,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,wBAAwB,CAAC;;;AAEhC,qBA2Sa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAC1F,OAAO,CAAC,QAAQ,CAAC,eAAe,CAEc;IAC9C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAEhD,SAAS,CAAC,QAAQ,CAAC,OAAO,yVAAW;IAErC,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,WAAW,0DAAwC;IACnD,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;;IAoCH,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAKvD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKxC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAK1C,cAAc,IAAI,IAAI;IAYtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;YAIN,WAAW;YAgBX,cAAc;yCAjMjB,OAAO;2CAAP,OAAO;CAiNnB"}

package/dist/core/modal/sd-modal.js

@@ -308,7 +308,7 @@ export class SdModal {
             i0.ɵɵconditional(!ctx.hideHeader() ? 2 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.resizable() ? 5 : -1);
-        } }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lighter);\n  background: var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModal, [{
         type: Component,
@@ -391,6 +391,6 @@ export class SdModal {
         ></div>
       }
     </div>
-  `, styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"] }]
+  `, styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lighter);\n  background: var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"] }]
     }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], headerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyle", required: false }] }], useCloseByBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByBackdrop", required: false }] }], useCloseByEscapeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByEscapeKey", required: false }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], minHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeightPx", required: false }] }], minWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidthPx", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], actionTplRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTplRef", required: false }] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModal, { className: "SdModal", filePath: "packages/angular/src/core/modal/sd-modal.ts", lineNumber: 324 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModal, { className: "SdModal", filePath: "packages/angular/src/core/modal/sd-modal.ts", lineNumber: 325 }); })();

package/dist/core/routing/injectCurrentPageCodeSignal.js

@@ -7,7 +7,7 @@ export function injectCurrentPageCodeSignal() {
         const activatedUrlSegmentsSignals = activatedRoute.pathFromRoot
             .slice(2)
             .map((item) => toSignal(item.url, { initialValue: item.snapshot.url }));
-        return computed(() => activatedUrlSegmentsSignals.map((item) => item()).join("."));
+        return computed(() => activatedUrlSegmentsSignals.map((item) => item().join(".")).join("."));
     }
     return undefined;
 }

package/dist/core/routing/injectViewTypeSignal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"injectViewTypeSignal.d.ts","sourceRoot":"","sources":["../../../src/core/routing/injectViewTypeSignal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsD,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAMhG,wBAAgB,oBAAoB,IAAI,MAAM,CAAC,UAAU,CAAC,CA+BzD;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC"}
+{"version":3,"file":"injectViewTypeSignal.d.ts","sourceRoot":"","sources":["../../../src/core/routing/injectViewTypeSignal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsD,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAMhG,wBAAgB,oBAAoB,IAAI,MAAM,CAAC,UAAU,CAAC,CAgCzD;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC"}

package/dist/data/crud/sd-base-container.js

@@ -28,7 +28,7 @@ function SdBaseContainer_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf
 function SdBaseContainer_Conditional_1_Conditional_1_ng_template_4_Template(rf, ctx) { }
 function SdBaseContainer_Conditional_1_Conditional_1_ng_template_5_Template(rf, ctx) { }
 function SdBaseContainer_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "sd-topbar-container")(1, "sd-topbar")(2, "h4");
+    i0.ɵɵelementStart(0, "sd-topbar-container")(1, "sd-topbar")(2, "h5", 5);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(4, SdBaseContainer_Conditional_1_Conditional_1_ng_template_4_Template, 0, 0, "ng-template", 3);
@@ -61,7 +61,7 @@ function SdBaseContainer_Conditional_1_Template(rf, ctx) { if (rf & 1) {
 } }
 function SdBaseContainer_ng_template_2_Conditional_1_ng_template_1_Template(rf, ctx) { }
 function SdBaseContainer_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelementStart(0, "div", 7);
     i0.ɵɵtemplate(1, SdBaseContainer_ng_template_2_Conditional_1_ng_template_1_Template, 0, 0, "ng-template", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -78,7 +78,7 @@ function SdBaseContainer_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf
 } }
 function SdBaseContainer_ng_template_2_Conditional_4_ng_template_1_Template(rf, ctx) { }
 function SdBaseContainer_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵtemplate(1, SdBaseContainer_ng_template_2_Conditional_4_ng_template_1_Template, 0, 0, "ng-template", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -87,12 +87,12 @@ function SdBaseContainer_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.bottomCommandTplRef());
 } }
 function SdBaseContainer_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵconditionalCreate(1, SdBaseContainer_ng_template_2_Conditional_1_Template, 2, 1, "div", 6);
-    i0.ɵɵelementStart(2, "div", 7);
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵconditionalCreate(1, SdBaseContainer_ng_template_2_Conditional_1_Template, 2, 1, "div", 7);
+    i0.ɵɵelementStart(2, "div", 8);
     i0.ɵɵconditionalCreate(3, SdBaseContainer_ng_template_2_Conditional_3_Template, 1, 1, null, 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, SdBaseContainer_ng_template_2_Conditional_4_Template, 2, 1, "div", 8);
+    i0.ɵɵconditionalCreate(4, SdBaseContainer_ng_template_2_Conditional_4_Template, 2, 1, "div", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -140,7 +140,7 @@ export class SdBaseContainer {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.topbarTplRef, _c0, 5)(dirIndex, ctx.commandTplRef, _c1, 5)(dirIndex, ctx.contentTplRef, _c2, 5)(dirIndex, ctx.bottomCommandTplRef, _c3, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(4);
-        } }, 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, "flex-column", "fill"], [1, "p-default", "flex-row", "gap-default", "bdb", "bdb-theme-gray-lightest"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lightest"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
+        } }, 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) {
             i0.ɵɵelementStart(0, "sd-busy-container", 1);
             i0.ɵɵconditionalCreate(1, SdBaseContainer_Conditional_1_Template, 3, 1);
             i0.ɵɵelementEnd();
@@ -173,7 +173,7 @@ export class SdBaseContainer {
         } @else if (viewType() === "page") {
           <sd-topbar-container>
             <sd-topbar>
-              <h4>{{ viewTitle() }}</h4>
+              <h5 class="tx-trans-light">{{ viewTitle() }}</h5>
 
               <ng-template [ngTemplateOutlet]="topbarTplRef()" />
             </sd-topbar>
@@ -189,7 +189,7 @@ export class SdBaseContainer {
     <ng-template #content>
       <div class="flex-column fill">
         @if (commandTplRef()) {
-          <div class="p-default flex-row gap-default bdb bdb-theme-gray-lightest">
+          <div class="p-default flex-row gap-default">
             <ng-template [ngTemplateOutlet]="commandTplRef()" />
           </div>
         }
@@ -201,7 +201,7 @@ export class SdBaseContainer {
         </div>
 
         @if (bottomCommandTplRef()) {
-          <div class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lightest">
+          <div class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest">
             <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
           </div>
         }