@simplysm/angular 14.1.2 → 14.1.7

package/dist/controls/input/sd-date-range-picker.js

@@ -29,9 +29,12 @@ function SdDateRangePicker_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtwoWayProperty("value", ctx_r1.from);
 } }
 export class SdDateRangePicker {
-    periodType = model("범위", ...(ngDevMode ? [{ debugName: "periodType" }] : /* istanbul ignore next */ []));
-    from = model(...(ngDevMode ? [undefined, { debugName: "from" }] : /* istanbul ignore next */ []));
-    to = model(...(ngDevMode ? [undefined, { debugName: "to" }] : /* istanbul ignore next */ []));
+    periodType = model("범위", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "periodType" }] : /* istanbul ignore next */ []));
+    from = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "from" }] : /* istanbul ignore next */ []));
+    to = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "to" }] : /* istanbul ignore next */ []));
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     handleDatePeriodTypeChanged() {
         if (this.periodType() === "월") {
@@ -92,7 +95,7 @@ export class SdDateRangePicker {
             i0.ɵɵproperty("value", "\uBC94\uC704");
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.periodType() === "\uBC94\uC704" ? 7 : 8);
-        } }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], 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-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], 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-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDateRangePicker, [{
         type: Component,

package/dist/controls/input/sd-numpad.js

@@ -51,9 +51,12 @@ function SdNumpad_For_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c1));
 } }
 export class SdNumpad {
-    text = signal(undefined, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    text = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inputDisabled = input(false, { ...(ngDevMode ? { debugName: "inputDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     useEnterButton = input(false, { ...(ngDevMode ? { debugName: "useEnterButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -156,7 +159,7 @@ export class SdNumpad {
             i0.ɵɵproperty("size", "lg");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("size", "lg");
-        } }, dependencies: [SdTextfield, SdButton, NgIcon], styles: ["sd-numpad table {\n  width: 100%;\n  border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n  border: none;\n  padding: var(--gap-xxs);\n}\nsd-numpad table > * > tr > * > sd-button {\n  border: none;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdTextfield, SdButton, NgIcon], styles: ["sd-numpad table {\n  width: 100%;\n  border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n  border: none;\n  padding: var(--gap-xxs);\n}\nsd-numpad table > * > tr > * > sd-button {\n  border: none;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNumpad, [{
         type: Component,

package/dist/controls/input/sd-range.js

@@ -2,10 +2,14 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, input, model, Vie
 import { SdTextfield } from "./sd-textfield";
 import * as i0 from "@angular/core";
 export class SdRange {
-    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    from = model(...(ngDevMode ? [undefined, { debugName: "from" }] : /* istanbul ignore next */ []));
-    to = model(...(ngDevMode ? [undefined, { debugName: "to" }] : /* istanbul ignore next */ []));
-    inputStyle = input(...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+    type = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    from = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "from" }] : /* istanbul ignore next */ []));
+    to = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "to" }] : /* istanbul ignore next */ []));
+    inputStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = function SdRange_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdRange)(); };
@@ -27,7 +31,7 @@ export class SdRange {
             i0.ɵɵproperty("type", ctx.type());
             i0.ɵɵtwoWayProperty("value", ctx.to);
             i0.ɵɵproperty("min", ctx.from())("required", ctx.required())("disabled", ctx.disabled())("inputStyle", ctx.inputStyle());
-        } }, dependencies: [SdTextfield], 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-range {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-range {\n    gap: 0;\n  }\n  sd-range > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-xxs {\n    gap: 0;\n  }\n  sd-range.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-range.gap-xs {\n    gap: 0;\n  }\n  sd-range.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-range.gap-sm {\n    gap: 0;\n  }\n  sd-range.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-default {\n    gap: 0;\n  }\n  sd-range.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-range.gap-lg {\n    gap: 0;\n  }\n  sd-range.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-range.gap-xl {\n    gap: 0;\n  }\n  sd-range.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-range.gap-xxl {\n    gap: 0;\n  }\n  sd-range.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-range.gap-0 {\n    gap: 0;\n  }\n  sd-range.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-range.gap-auto {\n    gap: 0;\n  }\n  sd-range.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdTextfield], 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-range {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-range {\n    gap: 0;\n  }\n  sd-range > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-xxs {\n    gap: 0;\n  }\n  sd-range.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-range.gap-xs {\n    gap: 0;\n  }\n  sd-range.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-range.gap-sm {\n    gap: 0;\n  }\n  sd-range.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-default {\n    gap: 0;\n  }\n  sd-range.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-range.gap-lg {\n    gap: 0;\n  }\n  sd-range.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-range.gap-xl {\n    gap: 0;\n  }\n  sd-range.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-range.gap-xxl {\n    gap: 0;\n  }\n  sd-range.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-range.gap-0 {\n    gap: 0;\n  }\n  sd-range.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-range.gap-auto {\n    gap: 0;\n  }\n  sd-range.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdRange, [{
         type: Component,

package/dist/controls/input/sd-textarea.js

@@ -37,21 +37,31 @@ function SdTextarea_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("placeholder", ctx_r0.placeholder())("title", ctx_r0.title() ?? ctx_r0.placeholder())("rows", ctx_r0.currRows());
 } }
 export class SdTextarea {
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
-    minRows = input(1, ...(ngDevMode ? [{ debugName: "minRows" }] : /* istanbul ignore next */ []));
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    minRows = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minRows" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* 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 */ []));
-    validatorFn = input(...(ngDevMode ? [undefined, { debugName: "validatorFn" }] : /* istanbul ignore next */ []));
-    theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
-    inputStyle = input(...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
-    inputClass = input(...(ngDevMode ? [undefined, { debugName: "inputClass" }] : /* istanbul ignore next */ []));
-    currRows = computed(() => Math.max(this.minRows(), this.value()?.split("\n").length ?? 1), ...(ngDevMode ? [{ debugName: "currRows" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    validatorFn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validatorFn" }] : /* istanbul ignore next */ []));
+    theme = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    inputStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+    inputClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    currRows = computed(() => Math.max(this.minRows(), this.value()?.split("\n").length ?? 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currRows" }] : /* istanbul ignore next */ []));
     constructor() {
         setupInvalid(() => {
             const errorMessages = [];
@@ -90,7 +100,7 @@ export class SdTextarea {
             i0.ɵɵconditional(ctx.value() ? 1 : ctx.placeholder() ? 2 : 3);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 4 : -1);
-        } }, 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-textarea {\n  display: block;\n  position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\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  font-family: var(--font-family-field);\n  resize: none;\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textarea > textarea::-webkit-scrollbar,\nsd-textarea > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textarea > textarea::-webkit-input-placeholder,\nsd-textarea > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textarea > ._contents > pre {\n  font-family: inherit;\n}\nsd-textarea:not([data-sd-inset=true]):not([data-sd-disabled=true]) > ._contents {\n  height: 0;\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\nsd-textarea[data-sd-theme=gray] > textarea,\nsd-textarea[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textarea[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inline=true] > textarea,\nsd-textarea[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textarea[data-sd-inset=true] > textarea {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea,\nsd-textarea[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\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-textarea {\n  display: block;\n  position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\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  font-family: var(--font-family-field);\n  resize: none;\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textarea > textarea::-webkit-scrollbar,\nsd-textarea > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textarea > textarea::-webkit-input-placeholder,\nsd-textarea > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textarea > ._contents > pre {\n  font-family: inherit;\n}\nsd-textarea:not([data-sd-inset=true]):not([data-sd-disabled=true]) > ._contents {\n  height: 0;\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\nsd-textarea[data-sd-theme=gray] > textarea,\nsd-textarea[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textarea[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inline=true] > textarea,\nsd-textarea[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textarea[data-sd-inset=true] > textarea {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea,\nsd-textarea[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextarea, [{
         type: Component,

package/dist/controls/input/sd-textfield-type-handlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-textfield-type-handlers.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield-type-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,QAAQ,EAER,IAAI,EACL,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC;IACrB,cAAc,EAAE,QAAQ,CAAC;IACzB,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,CAAC,MAAM,gBAAgB,CAAC,EActD,CAAC;AAMF,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAClE,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAAC;IACtD,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAAC;IAClE,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9E,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,GAAG,MAAM,EAAE,CAAC;CACjE;AAqXD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,gBAAgB,EAAE,oBAAoB,CActF,CAAC"}
+{"version":3,"file":"sd-textfield-type-handlers.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield-type-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,QAAQ,EAGR,IAAI,EACL,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC;IACrB,cAAc,EAAE,QAAQ,CAAC;IACzB,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,CAAC,MAAM,gBAAgB,CAAC,EActD,CAAC;AAMF,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAClE,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAAC;IACtD,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAAC;IAClE,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9E,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,GAAG,MAAM,EAAE,CAAC;CACjE;AAkXD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,gBAAgB,EAAE,oBAAoB,CActF,CAAC"}

package/dist/controls/input/sd-textfield-type-handlers.js

@@ -1,4 +1,4 @@
-import { DateOnly, DateTime, SdError, Time, } from "@simplysm/core-common";
+import { DateOnly, DateTime, num, SdError, Time, } from "@simplysm/core-common";
 export const sdTextfieldTypes = [
     "number",
     "text",
@@ -83,17 +83,14 @@ function createNumberHandler() {
             return Number.isNaN(result) ? undefined : result;
         },
         toControlValue(value, opts) {
-            const num = value;
+            const numValue = value;
             return opts.useNumberComma !== false
-                ? num.toLocaleString(undefined, { maximumFractionDigits: 10 })
-                : num.toString(10);
+                ? num.format(numValue, { max: 10 })
+                : numValue.toString(10);
         },
         toDisplayText(value, opts) {
             if (opts.minDigits != null) {
-                return value.toLocaleString(undefined, {
-                    maximumFractionDigits: 10,
-                    minimumFractionDigits: opts.minDigits,
-                });
+                return num.format(value, { max: 10, min: opts.minDigits });
             }
             return undefined;
         },

package/dist/controls/input/sd-textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;;AAEtC,qBAoRa,WAAW,CAAC,CAAC,SAAS,MAAM,gBAAgB;IACvD,KAAK,uEAAgC;IAErC,IAAI,yCAAuB;IAC3B,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IAEzD,QAAQ,qEAAiD;IACzD,GAAG,uEAAgC;IACnC,GAAG,uEAAgC;IACnC,SAAS,0DAAmB;IAC5B,SAAS,0DAAmB;IAC5B,OAAO,0DAAmB;IAC1B,WAAW,+CAAiB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACtF,MAAM,0DAAmB;IAEzB,IAAI,0DAAmB;IACvB,YAAY,0DAAmB;IAC/B,cAAc,qEAAgD;IAC9D,SAAS,0DAAmB;IAE5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsD;IAElF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsD;IAE/E,WAAW,yCAA+C;IAE1D,WAAW,kDAA+D;IAE1E,YAAY,yCAOT;IAEH,gBAAgB,qDAMb;;IA2CH,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAc3B,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO/B,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;yCAxH9B,WAAW;2CAAX,WAAW;CAuIvB"}
+{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;;AAEtC,qBAoRa,WAAW,CAAC,CAAC,SAAS,MAAM,gBAAgB;IACvD,KAAK,uEAAgC;IAErC,IAAI,yCAAuB;IAC3B,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IAEzD,QAAQ,qEAAiD;IACzD,GAAG,uEAAgC;IACnC,GAAG,uEAAgC;IACnC,SAAS,0DAAmB;IAC5B,SAAS,0DAAmB;IAC5B,OAAO,0DAAmB;IAC1B,WAAW,+CAAiB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACtF,MAAM,0DAAmB;IAEzB,IAAI,0DAAmB;IACvB,YAAY,0DAAmB;IAC/B,cAAc,qEAAgD;IAC9D,SAAS,0DAAmB;IAE5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsD;IAElF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsD;IAE/E,WAAW,yCAA+C;IAE1D,WAAW,kDAA+D;IAE1E,YAAY,yCAOT;IAEH,gBAAgB,qDAMb;;IA2CH,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAc3B,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO/B,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;yCAxH9B,WAAW;2CAAX,WAAW;CA2IvB"}

package/dist/controls/input/sd-textfield.js

@@ -51,34 +51,56 @@ function SdTextfield_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("title", ctx_r0.title() ?? ctx_r0.placeholder())("placeholder", ctx_r0.placeholder())("min", ctx_r0.min())("max", ctx_r0.max())("inputmode", ctx_r0.type() === "number" ? "numeric" : undefined)("autocomplete", ctx_r0.autocomplete())("step", ctx_r0.controlStep());
 } }
 export class SdTextfield {
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
-    inputStyle = input(...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
-    inputClass = input(...(ngDevMode ? [undefined, { debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    type = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    inputStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+    inputClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputClass" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
-    minlength = input(...(ngDevMode ? [undefined, { debugName: "minlength" }] : /* istanbul ignore next */ []));
-    maxlength = input(...(ngDevMode ? [undefined, { debugName: "maxlength" }] : /* istanbul ignore next */ []));
-    pattern = input(...(ngDevMode ? [undefined, { debugName: "pattern" }] : /* istanbul ignore next */ []));
-    validatorFn = input(...(ngDevMode ? [undefined, { debugName: "validatorFn" }] : /* istanbul ignore next */ []));
-    format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
-    step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
-    autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    min = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    minlength = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minlength" }] : /* istanbul ignore next */ []));
+    maxlength = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxlength" }] : /* istanbul ignore next */ []));
+    pattern = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pattern" }] : /* istanbul ignore next */ []));
+    validatorFn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validatorFn" }] : /* istanbul ignore next */ []));
+    format = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
+    step = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
+    autocomplete = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
     useNumberComma = input(true, { ...(ngDevMode ? { debugName: "useNumberComma" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    minDigits = input(...(ngDevMode ? [undefined, { debugName: "minDigits" }] : /* istanbul ignore next */ []));
+    minDigits = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minDigits" }] : /* 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 });
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
-    theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
-    _inputElRef = viewChild("inputEl", ...(ngDevMode ? [{ debugName: "_inputElRef" }] : /* istanbul ignore next */ []));
-    _handler = computed(() => textfieldTypeHandlers[this.type()], ...(ngDevMode ? [{ debugName: "_handler" }] : /* istanbul ignore next */ []));
-    controlType = computed(() => this._handler().controlType, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
-    controlStep = computed(() => this._handler().getControlStep(this.step()), ...(ngDevMode ? [{ debugName: "controlStep" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    theme = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    _inputElRef = viewChild("inputEl", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inputElRef" }] : /* istanbul ignore next */ []));
+    _handler = computed(() => textfieldTypeHandlers[this.type()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_handler" }] : /* istanbul ignore next */ []));
+    controlType = computed(() => this._handler().controlType, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
+    controlStep = computed(() => this._handler().getControlStep(this.step()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlStep" }] : /* istanbul ignore next */ []));
     controlValue = computed(() => {
         const value = this.value();
         if (value == null)
@@ -87,7 +109,8 @@ export class SdTextfield {
             useNumberComma: this.useNumberComma(),
             format: this.format(),
         });
-    }, ...(ngDevMode ? [{ debugName: "controlValue" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlValue" }] : /* istanbul ignore next */ []));
     controlValueText = computed(() => {
         const value = this.value();
         if (value == null)
@@ -95,7 +118,8 @@ export class SdTextfield {
         return this._handler().toDisplayText(value, {
             minDigits: this.minDigits(),
         }) ?? this.controlValue();
-    }, ...(ngDevMode ? [{ debugName: "controlValueText" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlValueText" }] : /* istanbul ignore next */ []));
     constructor() {
         if (isPlatformBrowser(inject(PLATFORM_ID))) {
             effect(() => {
@@ -152,19 +176,23 @@ export class SdTextfield {
         inputEl.value = this.controlValue();
     }
     onInputPaste(event) {
+        // preventDefault 로 기본 붙여넣기를 막으므로, 포커스 중 동기화를 건너뛰는 effect 대신
+        // 핸들러에서 직접 input.value 를 모델 기준값으로 되써야 화면에 반영됨 (onBlur 와 동일 패턴)
         event.preventDefault();
+        const inputEl = event.target;
         const text = event.clipboardData?.getData("text/plain").trim();
         if (text == null || text === "") {
             this.value.set(undefined);
+            inputEl.value = "";
             return;
         }
         const parsed = this._handler().parse(text, { format: this.format() });
         if (parsed == null) {
-            const inputEl = event.target;
             inputEl.value = this.controlValue();
             return;
         }
         this.value.set(parsed);
+        inputEl.value = this.controlValue();
     }
     static ɵfac = function SdTextfield_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTextfield)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTextfield, selectors: [["sd-textfield"]], viewQuery: function SdTextfield_Query(rf, ctx) { if (rf & 1) {
@@ -187,7 +215,7 @@ export class SdTextfield {
             i0.ɵɵconditional(ctx.controlType() === "password" ? 1 : 2);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 3 : -1);
-        } }, 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-textfield {\n  display: block;\n  position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\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  font-family: var(--font-family-field);\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--border-color-light);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n  padding-top: calc(var(--gap-sm) - 1px);\n  padding-bottom: calc(var(--gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  margin: auto;\n}\nsd-textfield > ._contents {\n  display: none;\n}\nsd-textfield > ._contents > pre {\n  font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n  text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n  padding-top: calc(var(--gap-xs) - 1px);\n  padding-bottom: calc(var(--gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n  padding-top: calc(var(--gap-default) - 1px);\n  padding-bottom: calc(var(--gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n  min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n  min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--trans-lightest);\n  color: var(--text-trans-light);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n  display: block;\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-textfield {\n  display: block;\n  position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\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  font-family: var(--font-family-field);\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--border-color-light);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n  padding-top: calc(var(--gap-sm) - 1px);\n  padding-bottom: calc(var(--gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  margin: auto;\n}\nsd-textfield > ._contents {\n  display: none;\n}\nsd-textfield > ._contents > pre {\n  font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n  text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n  padding-top: calc(var(--gap-xs) - 1px);\n  padding-bottom: calc(var(--gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n  padding-top: calc(var(--gap-default) - 1px);\n  padding-bottom: calc(var(--gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n  min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n  min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--trans-lightest);\n  color: var(--text-trans-light);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n  display: block;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextfield, [{
         type: Component,

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

@@ -47,19 +47,28 @@ function SdListItem_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r0.layout() === "accordion" ? 2 : -1);
 } }
 export class SdListItem {
-    layout = input("accordion", ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    layout = input("accordion", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    selectedIcon = input(...(ngDevMode ? [undefined, { debugName: "selectedIcon" }] : /* istanbul ignore next */ []));
+    selectedIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selectedIcon" }] : /* istanbul ignore next */ []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    contentStyle = input(...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
-    contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
-    toolTpl = contentChild("toolTpl", ...(ngDevMode ? [{ debugName: "toolTpl" }] : /* istanbul ignore next */ []));
-    _childLists = contentChildren(SdList, ...(ngDevMode ? [{ debugName: "_childLists" }] : /* istanbul ignore next */ []));
-    hasChildren = computed(() => this._childLists().length > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    contentStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
+    contentClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
+    toolTpl = contentChild("toolTpl", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolTpl" }] : /* istanbul ignore next */ []));
+    _childLists = contentChildren(SdList, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_childLists" }] : /* istanbul ignore next */ []));
+    hasChildren = computed(() => this._childLists().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     childrenOpen = computed(() => {
         return this.layout() === "flat" ? true : this.open();
-    }, ...(ngDevMode ? [{ debugName: "childrenOpen" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childrenOpen" }] : /* istanbul ignore next */ []));
     onContentClick() {
         if (this.readonly())
             return;
@@ -98,7 +107,7 @@ export class SdListItem {
             i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
-        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-light);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--trans-light);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-light);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--trans-light);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
         type: Component,

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

@@ -9,7 +9,7 @@ export class SdList {
         } }, inputs: { inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdList_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background: var(--control-color);\n  border: 1px solid var(--border-color-default);\n  border-radius: var(--border-radius-default);\n  padding: var(--gap-sm);\n  gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n  border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}\nsd-list sd-list-item sd-list {\n  border-color: transparent;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background: var(--control-color);\n  border: 1px solid var(--border-color-default);\n  border-radius: var(--border-radius-default);\n  padding: var(--gap-sm);\n  gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n  border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}\nsd-list sd-list-item sd-list {\n  border-color: transparent;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdList, [{
         type: Component,

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

@@ -18,18 +18,21 @@ function SdPagination_For_5_Template(rf, ctx) { if (rf & 1) {
 } }
 export class SdPagination {
     icons = { tablerChevronsLeft, tablerChevronLeft, tablerChevronRight, tablerChevronsRight };
-    currentPage = model(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    currentPage = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     totalPageCount = input(0, { ...(ngDevMode ? { debugName: "totalPageCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     visiblePageCount = input(10, { ...(ngDevMode ? { debugName: "visiblePageCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     _groupIndex = computed(() => {
         return Math.floor(this.currentPage() / Math.max(this.visiblePageCount(), 1));
-    }, ...(ngDevMode ? [{ debugName: "_groupIndex" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_groupIndex" }] : /* istanbul ignore next */ []));
     hasPrev = computed(() => {
         if (this.totalPageCount() === 0) {
             return false;
         }
         return this._groupIndex() > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
     hasNext = computed(() => {
         const totalPageCount = this.totalPageCount();
         if (totalPageCount === 0) {
@@ -37,7 +40,8 @@ export class SdPagination {
         }
         const lastGroupIndex = Math.floor((totalPageCount - 1) / Math.max(this.visiblePageCount(), 1));
         return this._groupIndex() < lastGroupIndex;
-    }, ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
     displayPages = computed(() => {
         const totalPageCount = this.totalPageCount();
         if (totalPageCount === 0) {
@@ -51,7 +55,8 @@ export class SdPagination {
             pages.push(i);
         }
         return pages;
-    }, ...(ngDevMode ? [{ debugName: "displayPages" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayPages" }] : /* istanbul ignore next */ []));
     goToPage(page) {
         this.currentPage.set(page);
     }
@@ -110,7 +115,7 @@ export class SdPagination {
             i0.ɵɵproperty("disabled", !ctx.hasNext());
             i0.ɵɵadvance();
             i0.ɵɵproperty("svg", ctx.icons.tablerChevronsRight);
-        } }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n  display: inline-block;\n  padding: var(--gap-xxs) var(--gap-xs);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n  display: inline-block;\n  padding: var(--gap-xxs) var(--gap-xs);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPagination, [{
         type: Component,

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

@@ -10,7 +10,7 @@ export class SdSelectButton {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSelectButton, selectors: [["sd-select-button"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSelectButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-select-button {\n  display: block;\n  background: var(--control-color);\n  font-weight: bold;\n  cursor: pointer;\n  color: var(--theme-primary-default);\n  transition: background var(--animation-duration) linear;\n}\nsd-select-button:hover {\n  color: var(--theme-primary-darker);\n  background: var(--theme-gray-lightest);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["sd-select-button {\n  display: block;\n  background: var(--control-color);\n  font-weight: bold;\n  cursor: pointer;\n  color: var(--theme-primary-default);\n  transition: background var(--animation-duration) linear;\n}\nsd-select-button:hover {\n  color: var(--theme-primary-darker);\n  background: var(--theme-gray-lightest);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectButton, [{
         type: Component,

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

@@ -16,10 +16,12 @@ export class SdSelectItem {
     _parentControl = inject(forwardRef(() => SdSelect));
     _elRef = inject((ElementRef));
     _destroyRef = inject(DestroyRef);
-    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    contentHTML = signal("", ...(ngDevMode ? [{ debugName: "contentHTML" }] : /* istanbul ignore next */ []));
+    contentHTML = signal("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentHTML" }] : /* istanbul ignore next */ []));
     isSelected = computed(() => {
         const parentValue = this._parentControl.value();
         const itemValue = this.value();
@@ -28,7 +30,8 @@ export class SdSelectItem {
             return arr != null && arr.some((x) => x === itemValue);
         }
         return parentValue === itemValue;
-    }, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => {
             const contentEl = this._elRef.nativeElement.querySelector("._content");
@@ -84,7 +87,7 @@ export class SdSelectItem {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵconditional(ctx._parentControl.selectMode() === "multi" ? 0 : -1);
-        } }, dependencies: [SdCheckbox, SdGap], 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-select-item {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  font-family: var(--font-family-field);\n  transition: background var(--animation-duration) ease-in;\n  background: var(--control-color);\n}\nsd-select-item:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item:focus {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-selected=true] {\n  color: var(--theme-primary-default);\n  font-weight: bold;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-disabled=true] {\n  background: var(--theme-gray-default);\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n  display: none;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdCheckbox, SdGap], 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-select-item {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  font-family: var(--font-family-field);\n  transition: background var(--animation-duration) ease-in;\n  background: var(--control-color);\n}\nsd-select-item:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item:focus {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-selected=true] {\n  color: var(--theme-primary-default);\n  font-weight: bold;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-disabled=true] {\n  background: var(--theme-gray-default);\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n  display: none;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectItem, [{
         type: Component,