@simplysm/angular 14.0.1 → 14.0.5

package/dist/ui/form/checkbox/sd-checkbox.control.js

@@ -0,0 +1,103 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, model, ViewEncapsulation, } from "@angular/core";
+import { setupRipple } from "../../../core/utils/setups/setupRipple";
+import { setupModelHook } from "../../../core/utils/setups/setupModelHook";
+import { NgIcon } from "@ng-icons/core";
+import { tablerCheck } from "@ng-icons/tabler-icons";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function SdCheckboxControl_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-icon", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("svg", ctx_r0.icon());
+} }
+function SdCheckboxControl_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div");
+} }
+export class SdCheckboxControl {
+    value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    canChangeFn = input(() => true, ...(ngDevMode ? [{ debugName: "canChangeFn" }] : /* istanbul ignore next */ []));
+    icon = input(tablerCheck, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    radio = input(false, { ...(ngDevMode ? { debugName: "radio" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    contentStyle = input(...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
+    constructor() {
+        setupModelHook(this.value, this.canChangeFn);
+        setupRipple(() => !this.disabled());
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        if (this.radio()) {
+            this.value.set(true);
+        }
+        else {
+            this.value.update((v) => !v);
+        }
+    }
+    onKeydown(event) {
+        if (event.key === " ") {
+            event.preventDefault();
+            if (this.disabled())
+                return;
+            if (this.radio()) {
+                this.value.set(true);
+            }
+            else {
+                this.value.update((v) => !v);
+            }
+        }
+    }
+    static ɵfac = function SdCheckboxControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCheckboxControl)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCheckboxControl, selectors: [["sd-checkbox"]], hostVars: 8, hostBindings: function SdCheckboxControl_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function SdCheckboxControl_click_HostBindingHandler() { return ctx.onClick(); })("keydown", function SdCheckboxControl_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-sd-checked", ctx.value())("data-sd-disabled", ctx.disabled())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-radio", ctx.radio())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme())("tabindex", 0);
+        } }, inputs: { value: [1, "value"], canChangeFn: [1, "canChangeFn"], icon: [1, "icon"], radio: [1, "radio"], disabled: [1, "disabled"], size: [1, "size"], inline: [1, "inline"], inset: [1, "inset"], theme: [1, "theme"], contentStyle: [1, "contentStyle"] }, outputs: { value: "valueChange" }, ngContentSelectors: _c0, decls: 6, vars: 3, consts: [[1, "_indicator_rect"], [1, "_indicator"], [3, "svg"], [1, "_contents"]], template: function SdCheckboxControl_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵconditionalCreate(2, SdCheckboxControl_Conditional_2_Template, 1, 1, "ng-icon", 2)(3, SdCheckboxControl_Conditional_3_Template, 1, 0, "div");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵprojection(5);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.radio() ? 2 : 3);
+            i0.ɵɵadvance(2);
+            i0.ɵɵstyleMap(ctx.contentStyle());
+        } }, dependencies: [NgIcon], styles: ["sd-checkbox {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  color: inherit;\n  cursor: pointer;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-checkbox {\n    gap: 0;\n  }\n  sd-checkbox > * + * {\n    margin-left: var(--gap-sm);\n  }\n}\nsd-checkbox > ._indicator_rect {\n  display: inline-block;\n  vertical-align: -0.125em;\n  user-select: none;\n  width: calc(var(--font-size-default) + 2px);\n  height: calc(var(--font-size-default) + 2px);\n  border: 1px solid var(--trans-light);\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n  margin: -1px -2px;\n  text-align: center;\n  opacity: 0;\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n  vertical-align: top;\n  stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n  display: inline-block;\n  vertical-align: top;\n  padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n  display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n  opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n  background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n  border-color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n  border-color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n  background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n  color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n  color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n  border-color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n  background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n  color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n  border-color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n  background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n  color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n  border-color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n  background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n  color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n  border-color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n  background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n  color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n  border-color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n  background: var(--control-color);\n  border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n  border-color: var(--text-trans-default);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n  border-radius: 100%;\n  padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=sm] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=sm] > * + * {\n    margin-left: var(--gap-xs);\n  }\n}\nsd-checkbox[data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=lg] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=lg] > * + * {\n    margin-left: var(--gap-default);\n  }\n}\nsd-checkbox[data-sd-inset=true] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n  border: none;\n  justify-content: center;\n  text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n  padding: 0;\n  border: none;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n  width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n  opacity: 0.3;\n  pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckboxControl, [{
+        type: Component,
+        args: [{ selector: "sd-checkbox", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIcon], template: `
+    <div class="_indicator_rect">
+      <div class="_indicator">
+        @if (!radio()) {
+          <ng-icon [svg]="icon()" />
+        } @else {
+          <div></div>
+        }
+      </div>
+    </div>
+    <div class="_contents" [style]="contentStyle()">
+      <ng-content />
+    </div>
+  `, host: {
+                    "[attr.data-sd-checked]": "value()",
+                    "[attr.data-sd-disabled]": "disabled()",
+                    "[attr.data-sd-inline]": "inline()",
+                    "[attr.data-sd-inset]": "inset()",
+                    "[attr.data-sd-radio]": "radio()",
+                    "[attr.data-sd-size]": "size()",
+                    "[attr.data-sd-theme]": "theme()",
+                    "[attr.tabindex]": "0",
+                    "(click)": "onClick()",
+                    "(keydown)": "onKeydown($event)",
+                }, styles: ["sd-checkbox {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  color: inherit;\n  cursor: pointer;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-checkbox {\n    gap: 0;\n  }\n  sd-checkbox > * + * {\n    margin-left: var(--gap-sm);\n  }\n}\nsd-checkbox > ._indicator_rect {\n  display: inline-block;\n  vertical-align: -0.125em;\n  user-select: none;\n  width: calc(var(--font-size-default) + 2px);\n  height: calc(var(--font-size-default) + 2px);\n  border: 1px solid var(--trans-light);\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n  margin: -1px -2px;\n  text-align: center;\n  opacity: 0;\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n  vertical-align: top;\n  stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n  display: inline-block;\n  vertical-align: top;\n  padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n  display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n  opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n  background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n  border-color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n  border-color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n  background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n  color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n  color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n  border-color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n  background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n  color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n  border-color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n  background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n  color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n  border-color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n  background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n  color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n  border-color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n  background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n  color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n  border-color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n  background: var(--control-color);\n  border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n  border-color: var(--text-trans-default);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n  border-radius: 100%;\n  padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=sm] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=sm] > * + * {\n    margin-left: var(--gap-xs);\n  }\n}\nsd-checkbox[data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=lg] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=lg] > * + * {\n    margin-left: var(--gap-default);\n  }\n}\nsd-checkbox[data-sd-inset=true] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n  border: none;\n  justify-content: center;\n  text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n  padding: 0;\n  border: none;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n  width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n  opacity: 0.3;\n  pointer-events: none;\n}"] }]
+    }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], canChangeFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "canChangeFn", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], radio: [{ type: i0.Input, args: [{ isSignal: true, alias: "radio", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckboxControl, { className: "SdCheckboxControl", filePath: "packages/angular/src/ui/form/checkbox/sd-checkbox.control.ts", lineNumber: 255 }); })();

package/dist/ui/form/checkbox/sd-switch.control.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class SdSwitchControl {
+    value: import("@angular/core").ModelSignal<boolean>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    inline: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
+    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
+    onClick(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdSwitchControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSwitchControl, "sd-switch", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=sd-switch.control.d.ts.map

package/dist/ui/form/checkbox/sd-switch.control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-switch.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\form\\checkbox\\sd-switch.control.ts"],"names":[],"mappings":";AASA,qBA2Ga,eAAe;IAC1B,KAAK,+CAAgB;IAErB,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IAEtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,KAAK,EAAE,KAAK;IASpB,SAAS,CAAC,KAAK,EAAE,aAAa;yCArBnB,eAAe;2CAAf,eAAe;CA4B3B"}

package/dist/ui/form/checkbox/sd-switch.control.js

@@ -0,0 +1,54 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, model, ViewEncapsulation, } from "@angular/core";
+import * as i0 from "@angular/core";
+export class SdSwitchControl {
+    value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.value.update((v) => !v);
+    }
+    onKeydown(event) {
+        if (event.key === " ") {
+            event.preventDefault();
+            if (this.disabled())
+                return;
+            this.value.update((v) => !v);
+        }
+    }
+    static ɵfac = function SdSwitchControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSwitchControl)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSwitchControl, selectors: [["sd-switch"]], hostVars: 7, hostBindings: function SdSwitchControl_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function SdSwitchControl_click_HostBindingHandler($event) { return ctx.onClick($event); })("keydown", function SdSwitchControl_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-sd-on", ctx.value())("data-sd-disabled", ctx.disabled())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme())("tabindex", "0");
+        } }, inputs: { value: [1, "value"], disabled: [1, "disabled"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 2, vars: 0, template: function SdSwitchControl_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div");
+            i0.ɵɵdomElement(1, "div");
+            i0.ɵɵdomElementEnd();
+        } }, styles: ["sd-switch {\n  display: block;\n  padding: var(--gap-sm) 0;\n  border: 1px solid transparent;\n  vertical-align: top;\n  cursor: pointer;\n}\nsd-switch > div {\n  height: var(--line-height);\n  width: calc(var(--line-height) * 2 - var(--gap-xs));\n  padding: calc(var(--gap-xs) / 2);\n  border-radius: calc(var(--line-height) / 2);\n  text-align: left;\n  background: var(--theme-gray-lighter);\n}\nsd-switch > div > div {\n  display: inline-block;\n  width: calc(var(--line-height) - var(--gap-xs));\n  height: calc(var(--line-height) - var(--gap-xs));\n  border-radius: 100%;\n  background: var(--control-color);\n  transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n  background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n  transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n  display: inline-block;\n  padding: 0;\n  border: none;\n}\nsd-switch[data-sd-inset=true] {\n  border: none;\n}\nsd-switch[data-sd-size=sm] {\n  padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n  padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n  background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n  background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n  background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n  background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n  background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n  background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n  background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n  background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n  opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n  background: var(--theme-gray-default);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSwitchControl, [{
+        type: Component,
+        args: [{ selector: "sd-switch", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
+                    "[attr.data-sd-on]": "value()",
+                    "[attr.data-sd-disabled]": "disabled()",
+                    "[attr.data-sd-inline]": "inline()",
+                    "[attr.data-sd-inset]": "inset()",
+                    "[attr.data-sd-size]": "size()",
+                    "[attr.data-sd-theme]": "theme()",
+                    "[attr.tabindex]": "'0'",
+                    "(click)": "onClick($event)",
+                    "(keydown)": "onKeydown($event)",
+                }, template: `
+    <div>
+      <div></div>
+    </div>
+  `, styles: ["sd-switch {\n  display: block;\n  padding: var(--gap-sm) 0;\n  border: 1px solid transparent;\n  vertical-align: top;\n  cursor: pointer;\n}\nsd-switch > div {\n  height: var(--line-height);\n  width: calc(var(--line-height) * 2 - var(--gap-xs));\n  padding: calc(var(--gap-xs) / 2);\n  border-radius: calc(var(--line-height) / 2);\n  text-align: left;\n  background: var(--theme-gray-lighter);\n}\nsd-switch > div > div {\n  display: inline-block;\n  width: calc(var(--line-height) - var(--gap-xs));\n  height: calc(var(--line-height) - var(--gap-xs));\n  border-radius: 100%;\n  background: var(--control-color);\n  transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n  background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n  transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n  display: inline-block;\n  padding: 0;\n  border: none;\n}\nsd-switch[data-sd-inset=true] {\n  border: none;\n}\nsd-switch[data-sd-size=sm] {\n  padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n  padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n  background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n  background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n  background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n  background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n  background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n  background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n  background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n  background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n  opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n  background: var(--theme-gray-default);\n}"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSwitchControl, { className: "SdSwitchControl", filePath: "packages/angular/src/ui/form/checkbox/sd-switch.control.ts", lineNumber: 117 }); })();

package/dist/ui/form/choice/sd-state-preset.control.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from "@angular/core";
+export interface ISdStatePreset {
+    name: string;
+    state: any;
+}
+export declare class SdStatePresetControl {
+    private readonly _sdModal;
+    private readonly _sdToast;
+    key: import("@angular/core").InputSignal<string>;
+    state: import("@angular/core").ModelSignal<any>;
+    size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
+    protected readonly tablerStar = "<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=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"></path></svg>";
+    protected readonly tablerDeviceFloppy = "<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=\"M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2\"></path><path d=\"M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\"></path><path d=\"M14 4l0 4l-6 0l0 -4\"></path></svg>";
+    protected readonly tablerX = "<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=\"M18 6l-12 12\"></path><path d=\"M6 6l12 12\"></path></svg>";
+    private readonly _configResource;
+    _presets: import("@angular/core").Signal<ISdStatePreset[]>;
+    onAddClick(): Promise<void>;
+    onPresetClick(preset: ISdStatePreset): void;
+    onSaveClick(preset: ISdStatePreset): void;
+    onDeleteClick(preset: ISdStatePreset): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdStatePresetControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdStatePresetControl, "sd-state-preset", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "state": "stateChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=sd-state-preset.control.d.ts.map

package/dist/ui/form/choice/sd-state-preset.control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-state-preset.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\form\\choice\\sd-state-preset.control.ts"],"names":[],"mappings":";AAmBA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,qBA6Ea,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IACpD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAEpD,GAAG,8CAA4B;IAC/B,KAAK,2CAAgB;IACrB,IAAI,+DAAwB;IAE5B,SAAS,CAAC,QAAQ,CAAC,UAAU,wZAAc;IAC3C,SAAS,CAAC,QAAQ,CAAC,kBAAkB,sdAAsB;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,yVAAW;IAErC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAE7B;IAEH,QAAQ,mDAAsD;IAExD,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAsBjC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAM3C,WAAW,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IASnC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;yCAvD/C,oBAAoB;2CAApB,oBAAoB;CAuEhC"}

package/dist/ui/form/choice/sd-state-preset.control.js

@@ -0,0 +1,134 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, model, ViewEncapsulation, } from "@angular/core";
+import { SdModalProvider } from "../../overlay/modal/sd-modal.provider";
+import { SdToastProvider } from "../../overlay/toast/sd-toast.provider";
+import { SdPromptModalControl } from "../../overlay/modal/sd-prompt-modal.control";
+import { SdConfirmModalControl } from "../../overlay/modal/sd-confirm-modal.control";
+import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
+import { SdAnchorControl } from "../button/sd-anchor.control";
+import { NgIcon } from "@ng-icons/core";
+import { tablerStar, tablerDeviceFloppy, tablerX } from "@ng-icons/tabler-icons";
+import { obj } from "@simplysm/core-common";
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.name;
+function SdStatePresetControl_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "sd-anchor", 4);
+    i0.ɵɵlistener("click", function SdStatePresetControl_For_4_Template_sd_anchor_click_1_listener() { const preset_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onPresetClick(preset_r2)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "sd-anchor", 5);
+    i0.ɵɵlistener("click", function SdStatePresetControl_For_4_Template_sd_anchor_click_3_listener() { const preset_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveClick(preset_r2)); });
+    i0.ɵɵelement(4, "ng-icon", 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "sd-anchor", 6);
+    i0.ɵɵlistener("click", function SdStatePresetControl_For_4_Template_sd_anchor_click_5_listener() { const preset_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDeleteClick(preset_r2)); });
+    i0.ɵɵelement(6, "ng-icon", 2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const preset_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", preset_r2.name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("svg", ctx_r2.tablerDeviceFloppy);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("theme", "danger");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r2.tablerX);
+} }
+export class SdStatePresetControl {
+    _sdModal = inject(SdModalProvider);
+    _sdToast = inject(SdToastProvider);
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    state = model(...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    tablerStar = tablerStar;
+    tablerDeviceFloppy = tablerDeviceFloppy;
+    tablerX = tablerX;
+    _configResource = useSdSystemConfigResource({
+        key: this.key,
+    });
+    _presets = computed(() => this._configResource.value() ?? [], ...(ngDevMode ? [{ debugName: "_presets" }] : /* istanbul ignore next */ []));
+    async onAddClick() {
+        const name = await this._sdModal.showAsync({
+            title: "프리셋 추가",
+            type: SdPromptModalControl,
+            inputs: { message: "프리셋 이름을 입력하세요." },
+        }, { useCloseByBackdrop: false });
+        if (name == null)
+            return;
+        const currentPresets = this._presets();
+        const newPreset = {
+            name,
+            state: obj.clone(this.state()),
+        };
+        this._configResource.set([...currentPresets, newPreset]);
+        this._sdToast.info(`현재 상태가 '${name}'에 저장되었습니다.`);
+    }
+    onPresetClick(preset) {
+        const currentState = this.state();
+        if (obj.equal(currentState, preset.state))
+            return;
+        this.state.set(obj.clone(preset.state));
+    }
+    onSaveClick(preset) {
+        const currentPresets = this._presets();
+        const updated = currentPresets.map((p) => p.name === preset.name ? { ...p, state: obj.clone(this.state()) } : p);
+        this._configResource.set(updated);
+        this._sdToast.info(`현재 상태가 ${preset.name}에 저장되었습니다.`);
+    }
+    async onDeleteClick(preset) {
+        const confirmed = await this._sdModal.showAsync({
+            title: "프리셋 삭제",
+            type: SdConfirmModalControl,
+            inputs: { message: `저장된 '${preset.name}' 상태가 삭제됩니다.` },
+        }, { useCloseByBackdrop: false });
+        if (confirmed !== true)
+            return;
+        const currentPresets = this._presets();
+        const filtered = currentPresets.filter((p) => p.name !== preset.name);
+        this._configResource.set(filtered);
+    }
+    static ɵfac = function SdStatePresetControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdStatePresetControl)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdStatePresetControl, selectors: [["sd-state-preset"]], hostVars: 1, hostBindings: function SdStatePresetControl_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-size", ctx.size());
+        } }, inputs: { key: [1, "key"], state: [1, "state"], size: [1, "size"] }, outputs: { state: "stateChange" }, decls: 5, vars: 1, consts: [[1, "_sd-state-preset"], [1, "_add-btn", 3, "click"], [3, "svg"], [1, "_preset-item"], [1, "_preset-name", 3, "click"], [1, "_preset-save", 3, "click"], [1, "_preset-delete", 3, "click", "theme"]], template: function SdStatePresetControl_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "sd-anchor", 1);
+            i0.ɵɵlistener("click", function SdStatePresetControl_Template_sd_anchor_click_1_listener() { return ctx.onAddClick(); });
+            i0.ɵɵelement(2, "ng-icon", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(3, SdStatePresetControl_For_4_Template, 7, 4, "div", 3, _forTrack0);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("svg", ctx.tablerStar);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx._presets());
+        } }, dependencies: [SdAnchorControl, NgIcon], styles: ["sd-state-preset {\n  display: block;\n}\nsd-state-preset > ._sd-state-preset {\n  display: flex;\n  align-items: center;\n  gap: var(--gap-sm);\n  flex-wrap: wrap;\n}\nsd-state-preset > ._sd-state-preset > ._add-btn {\n  padding: var(--gap-xs);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gap-xs);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._add-btn {\n  padding: var(--gap-xxs);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._preset-item {\n  padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._add-btn {\n  padding: var(--gap-sm);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._preset-item {\n  padding: var(--gap-sm) var(--gap-default);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdStatePresetControl, [{
+        type: Component,
+        args: [{ selector: "sd-state-preset", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdAnchorControl, NgIcon], template: `
+    <div class="_sd-state-preset">
+      <sd-anchor (click)="onAddClick()" class="_add-btn">
+        <ng-icon [svg]="tablerStar" />
+      </sd-anchor>
+      @for (preset of _presets(); track preset.name) {
+        <div class="_preset-item">
+          <sd-anchor class="_preset-name" (click)="onPresetClick(preset)">
+            {{ preset.name }}
+          </sd-anchor>
+          <sd-anchor class="_preset-save" (click)="onSaveClick(preset)">
+            <ng-icon [svg]="tablerDeviceFloppy" />
+          </sd-anchor>
+          <sd-anchor class="_preset-delete" [theme]="'danger'" (click)="onDeleteClick(preset)">
+            <ng-icon [svg]="tablerX" />
+          </sd-anchor>
+        </div>
+      }
+    </div>
+  `, host: {
+                    "[attr.data-sd-size]": "size()",
+                }, styles: ["sd-state-preset {\n  display: block;\n}\nsd-state-preset > ._sd-state-preset {\n  display: flex;\n  align-items: center;\n  gap: var(--gap-sm);\n  flex-wrap: wrap;\n}\nsd-state-preset > ._sd-state-preset > ._add-btn {\n  padding: var(--gap-xs);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gap-xs);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._add-btn {\n  padding: var(--gap-xxs);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._preset-item {\n  padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._add-btn {\n  padding: var(--gap-sm);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._preset-item {\n  padding: var(--gap-sm) var(--gap-default);\n}"] }]
+    }], null, { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdStatePresetControl, { className: "SdStatePresetControl", filePath: "packages/angular/src/ui/form/choice/sd-state-preset.control.ts", lineNumber: 102 }); })();

package/dist/ui/form/editor/sd-tiptap-editor.control.d.ts

@@ -0,0 +1,35 @@
+import { Editor, type AnyExtension } from "@tiptap/core";
+import * as i0 from "@angular/core";
+export declare class SdTiptapEditorControl {
+    value: import("@angular/core").ModelSignal<string | undefined>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    placeholder: import("@angular/core").InputSignal<string | undefined>;
+    validatorFn: import("@angular/core").InputSignal<((value: string | undefined) => string | undefined) | undefined>;
+    extensions: import("@angular/core").InputSignal<AnyExtension[] | undefined>;
+    private readonly elRef;
+    private readonly destroyRef;
+    readonly colorPresets: string[];
+    activeStates: Record<string, boolean>;
+    activeColor: string;
+    activeBgColor: string;
+    colorPickerMode: "text" | "bg" | undefined;
+    /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+    editor: Editor | undefined;
+    private updatingFromEditor;
+    private lastExtensions;
+    private readonly resolvedExtensions;
+    constructor();
+    private createEditor;
+    private destroyEditor;
+    private getEditorHtml;
+    private getEditorHtmlFrom;
+    execCmd(cmd: string): void;
+    toggleColorPicker(mode: "text" | "bg"): void;
+    applyColor(color: string | undefined): void;
+    private refreshActiveStates;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTiptapEditorControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdTiptapEditorControl, "sd-tiptap-editor", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "validatorFn": { "alias": "validatorFn"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=sd-tiptap-editor.control.d.ts.map

package/dist/ui/form/editor/sd-tiptap-editor.control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-tiptap-editor.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\form\\editor\\sd-tiptap-editor.control.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;;AAkBzD,qBAsMa,qBAAqB;IAChC,KAAK,0DAAmB;IACxB,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,WAAW,0DAAmB;IAC9B,WAAW,+CAAiB,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACzE,UAAU,kEAA2B;IAErC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA+C;IACrE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IAEjD,QAAQ,CAAC,YAAY,WAMnB;IAEF,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAC3C,WAAW,SAAM;IACjB,aAAa,SAAM;IACnB,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE3C,qDAAqD;IACrD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,cAAc,CAA6B;IAEnD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAShC;;IAyDH,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IA2D1B,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAI5C,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI;IAoB3C,OAAO,CAAC,mBAAmB;yCA1NhB,qBAAqB;2CAArB,qBAAqB;CAkPjC"}