@simplysm/angular 14.0.100 → 14.0.102

package/dist/core/busy/sd-busy-container.js

@@ -65,7 +65,7 @@ export class SdBusyContainer {
             i0.ɵɵconditional(ctx.message() != undefined ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.progressPercent() != null ? 7 : -1);
-        } }, styles: ["sd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: 0.1s ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--theme-primary-default);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: 0.1s ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--background-color);\n  border-radius: 100%;\n  border-bottom-color: var(--theme-primary-default);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--background-color);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: 0.1s ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--theme-primary-default);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--background-color);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--trans-light);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--theme-primary-default);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--background-color);\n  border-radius: 100%;\n  border-bottom-color: var(--theme-primary-default);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--background-color);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--theme-primary-default);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--background-color);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--trans-light);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdBusyContainer, [{
         type: Component,
@@ -108,6 +108,6 @@ export class SdBusyContainer {
       }
     </div>
     <ng-content></ng-content>
-  `, styles: ["sd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: 0.1s ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--theme-primary-default);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: 0.1s ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--background-color);\n  border-radius: 100%;\n  border-bottom-color: var(--theme-primary-default);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--background-color);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: 0.1s ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--theme-primary-default);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--background-color);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--trans-light);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"] }]
+  `, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--theme-primary-default);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--background-color);\n  border-radius: 100%;\n  border-bottom-color: var(--theme-primary-default);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--background-color);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--theme-primary-default);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--background-color);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--trans-light);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"] }]
     }], null, { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], progressPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressPercent", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBusyContainer, { className: "SdBusyContainer", filePath: "packages/angular/src/core/busy/sd-busy-container.ts", lineNumber: 332 }); })();

package/dist/core/directive-input-signals.d.ts

@@ -13,15 +13,6 @@ export type UndefToOptional<T> = {
  * 컴포넌트/디렉티브의 InputSignal 프로퍼티에서 값 타입을 추출하는 유틸리티 타입
  *
  * InputSignal이 아닌 프로퍼티는 제외되며, undefined를 포함하는 필드는 optional로 변환된다.
- *
- * @example
- * ```typescript
- * class MyComponent {
- *   name = input.required<string>();
- *   age = input(0);
- * }
- * // DirectiveInputSignals<MyComponent> = { name: string; age: number }
- * ```
  */
 export type DirectiveInputSignals<T> = UndefToOptional<{
     [P in keyof T as T[P] extends InputSignal<any> ? P : never]: T[P] extends InputSignal<infer V> ? V : never;

package/dist/core/directive-input-signals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"directive-input-signals.d.ts","sourceRoot":"","sources":["../../src/core/directive-input-signals.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC3D,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;CAChF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,eAAe,CAAC;KACpD,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CACnF,MAAM,CAAC,CACR,GACG,CAAC,GACD,KAAK;CACV,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"directive-input-signals.d.ts","sourceRoot":"","sources":["../../src/core/directive-input-signals.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC3D,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;CAChF,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,eAAe,CAAC;KACpD,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CACnF,MAAM,CAAC,CACR,GACG,CAAC,GACD,KAAK;CACV,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}

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-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 });
+        } }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) 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(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) 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(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) 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-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}"] }]
+  `, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) 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(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) 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(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) 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: 325 }); })();

package/dist/core/provideSdAngular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provideSdAngular.d.ts","sourceRoot":"","sources":["../../src/core/provideSdAngular.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAmC1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,CAqJlF"}
+{"version":3,"file":"provideSdAngular.d.ts","sourceRoot":"","sources":["../../src/core/provideSdAngular.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAmC1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,CAmKlF"}

package/dist/core/provideSdAngular.js

@@ -44,6 +44,18 @@ export function provideSdAngular(opt) {
                     prevDark = dark;
                 }
             });
+            const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
+            if (savedBlueprint != null) {
+                sdTheme.blueprint.set(savedBlueprint);
+            }
+            let prevBlueprint = sdTheme.blueprint();
+            effect(() => {
+                const blueprint = sdTheme.blueprint();
+                if (blueprint !== prevBlueprint) {
+                    sdLocalStorage.set("sd-theme-blueprint", blueprint);
+                    prevBlueprint = blueprint;
+                }
+            });
             const savedFontSize = sdLocalStorage.get("sd-theme-font-size");
             if (savedFontSize != null) {
                 sdTheme.fontSize.set(savedFontSize);

package/dist/core/ripple/setupRipple.js

@@ -32,7 +32,7 @@ export function setupRipple(enableFn) {
                 height: size * 2 + "px",
                 top: y - size + "px",
                 left: x - size + "px",
-                transition: "var(--animation-duration) linear",
+                transition: "calc(2 * var(--animation-duration)) linear",
                 transitionProperty: "transform, opacity",
                 transform: "scale(0.1)",
             });

package/dist/core/toast/sd-toast-container.js

@@ -5,12 +5,12 @@ export class SdToastContainer {
     static ɵfac = function SdToastContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdToastContainer)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdToastContainer, selectors: [["sd-toast-container"]], hostVars: 1, hostBindings: function SdToastContainer_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-overlap", ctx.overlap() || undefined);
-        } }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--gap-xxl);\n  left: var(--gap-xxl);\n  right: var(--gap-xxl);\n  width: auto;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--gap-xxl);\n  left: var(--gap-xxl);\n  right: var(--gap-xxl);\n  width: auto;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToastContainer, [{
         type: Component,
         args: [{ selector: "sd-toast-container", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, host: {
                     "[attr.data-sd-overlap]": "overlap() || undefined",
-                }, template: "", styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--gap-xxl);\n  left: var(--gap-xxl);\n  right: var(--gap-xxl);\n  width: auto;\n}"] }]
+                }, template: "", styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--gap-xxl);\n  left: var(--gap-xxl);\n  right: var(--gap-xxl);\n  width: auto;\n}"] }]
     }], null, { overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToastContainer, { className: "SdToastContainer", filePath: "packages/angular/src/core/toast/sd-toast-container.ts", lineNumber: 56 }); })();

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

@@ -58,7 +58,7 @@ export class SdToast {
             i0.ɵɵconditional(ctx.message() != undefined ? 2 : 3);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.useProgress() ? 4 : -1);
-        } }, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToast, [{
         type: Component,
@@ -82,6 +82,6 @@ export class SdToast {
         </div>
       }
     </div>
-  `, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"] }]
+  `, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"] }]
     }], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], useProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "useProgress", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }, { type: i0.Output, args: ["progressChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }, { type: i0.Output, args: ["messageChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToast, { className: "SdToast", filePath: "packages/angular/src/core/toast/sd-toast.ts", lineNumber: 139 }); })();

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

@@ -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, "tx-trans-light"], [1, "flex-column", "fill"], [1, "p-sm-default", "flex-row", "gap-default", "bdb", "bdb-color-lighter", "bg-theme-gray-lightest"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lighter", "bg-theme-gray-lightest"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
+        } }, 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", "bg-control"], [1, "p-sm-default", "flex-row", "gap-default", "bdb", "bdb-color-lighter"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lighter"]], 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();
@@ -187,9 +187,9 @@ export class SdBaseContainer {
     </sd-busy-container>
 
     <ng-template #content>
-      <div class="flex-column fill">
+      <div class="flex-column fill bg-control">
         @if (commandTplRef()) {
-          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter bg-theme-gray-lightest">
+          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter">
             <ng-template [ngTemplateOutlet]="commandTplRef()" />
           </div>
         }
@@ -202,7 +202,7 @@ export class SdBaseContainer {
 
         @if (bottomCommandTplRef()) {
           <div
-            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest"
+            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter"
           >
             <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
           </div>

package/dist/data/crud/sd-crud-list.d.ts

@@ -11,7 +11,9 @@ export declare class SdCrudList<TItem, TKey> {
     initialized: import("@angular/core").InputSignal<boolean>;
     busyCount: import("@angular/core").ModelSignal<number>;
     restricted: import("@angular/core").InputSignal<boolean>;
-    readonly: import("@angular/core").InputSignal<boolean>;
+    canCreate: import("@angular/core").InputSignal<boolean>;
+    canEdit: import("@angular/core").InputSignal<boolean>;
+    canDelete: import("@angular/core").InputSignal<boolean>;
     inlineEdit: import("@angular/core").InputSignal<boolean>;
     viewType: import("@angular/core").InputSignal<SdViewType>;
     selectMode: import("@angular/core").InputSignal<"single" | "multi" | undefined>;
@@ -54,6 +56,6 @@ export declare class SdCrudList<TItem, TKey> {
     protected readonly tablerRestore = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M3.06 13a9 9 0 1 0 .49 -4.087\"></path><path d=\"M3 4.001v5h5\"></path><path d=\"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"></path></svg>";
     protected readonly tablerSearch = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\"></path><path d=\"M21 21l-6 -6\"></path></svg>";
     static ɵfac: i0.ɵɵFactoryDeclaration<SdCrudList<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdCrudList<any, any>, "sd-crud-list", never, { "ready": { "alias": "ready"; "required": false; "isSignal": true; }; "initialized": { "alias": "initialized"; "required": false; "isSignal": true; }; "busyCount": { "alias": "busyCount"; "required": false; "isSignal": true; }; "restricted": { "alias": "restricted"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "inlineEdit": { "alias": "inlineEdit"; "required": false; "isSignal": true; }; "viewType": { "alias": "viewType"; "required": true; "isSignal": true; }; "selectMode": { "alias": "selectMode"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; "isSignal": true; }; "currDeletedItems": { "alias": "currDeletedItems"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "totalPageCount": { "alias": "totalPageCount"; "required": false; "isSignal": true; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; "isSignal": true; }; "visiblePageCount": { "alias": "visiblePageCount"; "required": false; "isSignal": true; }; "sorts": { "alias": "sorts"; "required": false; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": true; "isSignal": true; }; "getItemSelectableFn": { "alias": "getItemSelectableFn"; "required": false; "isSignal": true; }; }, { "ready": "readyChange"; "busyCount": "busyCountChange"; "filterSubmit": "filterSubmit"; "submit": "submit"; "create": "create"; "delete": "delete"; "restore": "restore"; "selectedKeys": "selectedKeysChange"; "currentPage": "currentPageChange"; "sorts": "sortsChange"; }, ["commandTplRef", "filterTplRef", "toolTplRef", "bottomCommandTplRef", "columnControls"], never, true, [{ directive: typeof i1.SdCommandDirective; inputs: {}; outputs: { "sdSaveCommand": "sdSaveCommand"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCrudList<any, any>, "sd-crud-list", never, { "ready": { "alias": "ready"; "required": false; "isSignal": true; }; "initialized": { "alias": "initialized"; "required": false; "isSignal": true; }; "busyCount": { "alias": "busyCount"; "required": false; "isSignal": true; }; "restricted": { "alias": "restricted"; "required": false; "isSignal": true; }; "canCreate": { "alias": "canCreate"; "required": false; "isSignal": true; }; "canEdit": { "alias": "canEdit"; "required": false; "isSignal": true; }; "canDelete": { "alias": "canDelete"; "required": false; "isSignal": true; }; "inlineEdit": { "alias": "inlineEdit"; "required": false; "isSignal": true; }; "viewType": { "alias": "viewType"; "required": true; "isSignal": true; }; "selectMode": { "alias": "selectMode"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; "isSignal": true; }; "currDeletedItems": { "alias": "currDeletedItems"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "totalPageCount": { "alias": "totalPageCount"; "required": false; "isSignal": true; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; "isSignal": true; }; "visiblePageCount": { "alias": "visiblePageCount"; "required": false; "isSignal": true; }; "sorts": { "alias": "sorts"; "required": false; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": true; "isSignal": true; }; "getItemSelectableFn": { "alias": "getItemSelectableFn"; "required": false; "isSignal": true; }; }, { "ready": "readyChange"; "busyCount": "busyCountChange"; "filterSubmit": "filterSubmit"; "submit": "submit"; "create": "create"; "delete": "delete"; "restore": "restore"; "selectedKeys": "selectedKeysChange"; "currentPage": "currentPageChange"; "sorts": "sortsChange"; }, ["commandTplRef", "filterTplRef", "toolTplRef", "bottomCommandTplRef", "columnControls"], never, true, [{ directive: typeof i1.SdCommandDirective; inputs: {}; outputs: { "sdSaveCommand": "sdSaveCommand"; }; }]>;
 }
 //# sourceMappingURL=sd-crud-list.d.ts.map

package/dist/data/crud/sd-crud-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-crud-list.d.ts","sourceRoot":"","sources":["../../../src/data/crud/sd-crud-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,WAAW,EAGjB,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;;;AAYzE,qBAkMa,UAAU,CAAC,KAAK,EAAE,IAAI;IACjC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAE1F,KAAK,+CAAgB;IACrB,WAAW,+CAAgB;IAC3B,SAAS,8CAAY;IACrB,UAAU,+CAAgB;IAC1B,QAAQ,+CAAgB;IACxB,UAAU,+CAAe;IACzB,QAAQ,kDAAgC;IACxC,UAAU,sEAA+B;IACzC,GAAG,8CAA4B;IAE/B,QAAQ,qDAAiC;IAEzC,YAAY,iDAAY;IACxB,MAAM,iDAAY;IAClB,MAAM,iDAAY;IAClB,MAAM,oDAAqB;IAC3B,OAAO,oDAAqB;IAE5B,KAAK,+CAAsB;IAC3B,YAAY,2DAAkC;IAE9C,gBAAgB,+CAAsB;IACtC,cAAc,6CAAoD;IAElE,iBAAiB,0CAKf;IAEF,WAAW,8CAAY;IACvB,cAAc,8CAAY;IAC1B,YAAY,8CAAY;IACxB,gBAAgB,8CAAa;IAC7B,KAAK,oDAA2B;IAEhC,SAAS,6CAAyB,KAAK,KAAK,IAAI,EAAI;IACpD,mBAAmB,8CAAgB,KAAK,KAAK,OAAO,GAAG,MAAM,eAAI;IAEjE,aAAa,gEAAiD;IAC9D,YAAY,gEAAgD;IAC5D,UAAU,gEAA8C;IACxD,mBAAmB,gEAAuD;IAE1E,cAAc,gEAAkC;IAEhD,iBAAiB,0CAAyD;IAE1E,kBAAkB,0CAA6E;IAC/F,qBAAqB,0CAEnB;IAEF,kBAAkB,GAAI,MAAM,KAAK,KAAG,MAAM,GAAG,SAAS,CACgB;IAEtE,SAAS,CAAC,IAAI,EAAE,KAAK;IAIrB,iBAAiB;IAIjB,2BAA2B,IAAI,IAAI;IAQnC,4BAA4B;IAK5B,oBAAoB;IAUpB,SAAS,CAAC,QAAQ,CAAC,kBAAkB,sdAAsB;IAC3D,SAAS,CAAC,QAAQ,CAAC,gBAAgB,yYAAoB;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,waAAiB;IACjD,SAAS,CAAC,QAAQ,CAAC,YAAY,yXAAgB;yCA/FpC,UAAU;2CAAV,UAAU;CAgGtB"}
+{"version":3,"file":"sd-crud-list.d.ts","sourceRoot":"","sources":["../../../src/data/crud/sd-crud-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,WAAW,EAGjB,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;;;AAYzE,qBAkMa,UAAU,CAAC,KAAK,EAAE,IAAI;IACjC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAE1F,KAAK,+CAAgB;IACrB,WAAW,+CAAgB;IAC3B,SAAS,8CAAY;IACrB,UAAU,+CAAgB;IAC1B,SAAS,+CAAe;IACxB,OAAO,+CAAe;IACtB,SAAS,+CAAe;IACxB,UAAU,+CAAe;IACzB,QAAQ,kDAAgC;IACxC,UAAU,sEAA+B;IACzC,GAAG,8CAA4B;IAE/B,QAAQ,qDAAiC;IAEzC,YAAY,iDAAY;IACxB,MAAM,iDAAY;IAClB,MAAM,iDAAY;IAClB,MAAM,oDAAqB;IAC3B,OAAO,oDAAqB;IAE5B,KAAK,+CAAsB;IAC3B,YAAY,2DAAkC;IAE9C,gBAAgB,+CAAsB;IACtC,cAAc,6CAAoD;IAElE,iBAAiB,0CAKf;IAEF,WAAW,8CAAY;IACvB,cAAc,8CAAY;IAC1B,YAAY,8CAAY;IACxB,gBAAgB,8CAAa;IAC7B,KAAK,oDAA2B;IAEhC,SAAS,6CAAyB,KAAK,KAAK,IAAI,EAAI;IACpD,mBAAmB,8CAAgB,KAAK,KAAK,OAAO,GAAG,MAAM,eAAI;IAEjE,aAAa,gEAAiD;IAC9D,YAAY,gEAAgD;IAC5D,UAAU,gEAA8C;IACxD,mBAAmB,gEAAuD;IAE1E,cAAc,gEAAkC;IAEhD,iBAAiB,0CAAuD;IAExE,kBAAkB,0CAA6E;IAC/F,qBAAqB,0CAEnB;IAEF,kBAAkB,GAAI,MAAM,KAAK,KAAG,MAAM,GAAG,SAAS,CACgB;IAEtE,SAAS,CAAC,IAAI,EAAE,KAAK;IAIrB,iBAAiB;IAIjB,2BAA2B,IAAI,IAAI;IAQnC,4BAA4B;IAK5B,oBAAoB;IAUpB,SAAS,CAAC,QAAQ,CAAC,kBAAkB,sdAAsB;IAC3D,SAAS,CAAC,QAAQ,CAAC,gBAAgB,yYAAoB;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,waAAiB;IACjD,SAAS,CAAC,QAAQ,CAAC,YAAY,yXAAgB;yCAjGpC,UAAU;2CAAV,UAAU;CAkGtB"}