@simplysm/angular 14.0.30 → 14.0.33

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

@@ -0,0 +1,212 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, model, ViewEncapsulation, } from "@angular/core";
+import { setupInvalid } from "../../core/validation/setupInvalid";
+import { textfieldTypeHandlers, } from "./sd-textfield-type-handlers";
+import * as i0 from "@angular/core";
+function SdTextfield_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 0);
+    i0.ɵɵtext(1, "****");
+    i0.ɵɵdomElementEnd();
+} }
+function SdTextfield_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "pre");
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r0.controlValueText() ?? ctx_r0.controlValue(), " ");
+} }
+function SdTextfield_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.placeholder());
+} }
+function SdTextfield_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span");
+    i0.ɵɵtext(1, "\u00A0");
+    i0.ɵɵdomElementEnd();
+} }
+function SdTextfield_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SdTextfield_Conditional_2_Conditional_0_Template, 2, 1, "pre")(1, SdTextfield_Conditional_2_Conditional_1_Template, 2, 1, "span", 2)(2, SdTextfield_Conditional_2_Conditional_2_Template, 2, 0, "span");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.controlValue() ? 0 : ctx_r0.placeholder() ? 1 : 2);
+} }
+function SdTextfield_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "input", 3);
+    i0.ɵɵdomListener("input", function SdTextfield_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInput($event)); })("paste", function SdTextfield_Conditional_3_Template_input_paste_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInputPaste($event)); });
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleMap(ctx_r0.inputStyle());
+    i0.ɵɵclassMap(ctx_r0.inputClass());
+    i0.ɵɵdomProperty("type", ctx_r0.controlType())("value", ctx_r0.controlValue());
+    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 */ []));
+    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 */ []));
+    useNumberComma = input(true, { ...(ngDevMode ? { debugName: "useNumberComma" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minDigits = input(...(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 */ []));
+    _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 */ []));
+    controlValue = computed(() => {
+        const value = this.value();
+        if (value == null)
+            return "";
+        return this._handler().toControlValue(value, {
+            useNumberComma: this.useNumberComma(),
+            format: this.format(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "controlValue" }] : /* istanbul ignore next */ []));
+    controlValueText = computed(() => {
+        const value = this.value();
+        if (value == null)
+            return undefined;
+        return this._handler().toDisplayText(value, {
+            minDigits: this.minDigits(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "controlValueText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        setupInvalid(() => {
+            const value = this.value();
+            const handlerErrors = this._handler().validate(value, {
+                required: this.required(),
+                min: this.min(),
+                max: this.max(),
+                minlength: this.minlength(),
+                maxlength: this.maxlength(),
+                pattern: this.pattern(),
+                format: this.format(),
+            });
+            const errorMessages = [...handlerErrors];
+            if (this.validatorFn()) {
+                const message = this.validatorFn()(value);
+                if (message !== undefined) {
+                    errorMessages.push(message);
+                }
+            }
+            return errorMessages.join("\r\n");
+        });
+    }
+    onInput(event) {
+        const inputEl = event.target;
+        if (inputEl.value === "") {
+            this.value.set(undefined);
+            return;
+        }
+        const parsed = this._handler().parse(inputEl.value, { format: this.format() });
+        if (parsed === undefined) {
+            return;
+        }
+        this.value.set(parsed);
+    }
+    onInputPaste(event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData("text/plain").trim();
+        if (text == null || text === "") {
+            this.value.set(undefined);
+            return;
+        }
+        const parsed = this._handler().parse(text, { format: this.format() });
+        if (parsed === undefined) {
+            const inputEl = event.target;
+            inputEl.value = this.controlValue();
+            return;
+        }
+        this.value.set(parsed);
+    }
+    static ɵfac = function SdTextfield_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTextfield)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTextfield, selectors: [["sd-textfield"]], hostVars: 7, hostBindings: function SdTextfield_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-type", ctx.controlType())("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme());
+        } }, inputs: { value: [1, "value"], type: [1, "type"], placeholder: [1, "placeholder"], title: [1, "title"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], min: [1, "min"], max: [1, "max"], minlength: [1, "minlength"], maxlength: [1, "maxlength"], pattern: [1, "pattern"], validatorFn: [1, "validatorFn"], format: [1, "format"], step: [1, "step"], autocomplete: [1, "autocomplete"], useNumberComma: [1, "useNumberComma"], minDigits: [1, "minDigits"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 4, vars: 9, consts: [[1, "tx-trans-light"], [3, "style", "class", "type", "value"], [1, "tx-trans-lighter"], [3, "input", "paste", "type", "value"]], template: function SdTextfield_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div");
+            i0.ɵɵconditionalCreate(1, SdTextfield_Conditional_1_Template, 2, 0, "span", 0)(2, SdTextfield_Conditional_2_Template, 3, 1);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(3, SdTextfield_Conditional_3_Template, 1, 13, "input", 1);
+        } if (rf & 2) {
+            i0.ɵɵstyleMap(ctx.inputStyle());
+            i0.ɵɵclassMap(ctx.inputClass() ? "_contents " + ctx.inputClass() : "_contents");
+            i0.ɵɵstyleProp("visibility", !ctx.readonly() && !ctx.disabled() ? "hidden" : undefined);
+            i0.ɵɵattribute("title", ctx.title() ?? ctx.placeholder());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.controlType() === "password" ? 1 : 2);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 3 : -1);
+        } }, styles: ["sd-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  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-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-secondary-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[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  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  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  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  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(--theme-gray-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 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextfield, [{
+        type: Component,
+        args: [{ selector: "sd-textfield", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    <div
+      [style]="inputStyle()"
+      [class]="inputClass() ? '_contents ' + inputClass() : '_contents'"
+      [attr.title]="title() ?? placeholder()"
+      [style.visibility]="!readonly() && !disabled() ? 'hidden' : undefined"
+    >
+      @if (controlType() === "password") {
+        <span class="tx-trans-light">****</span>
+      } @else {
+        @if (controlValue()) {
+          <pre>{{ controlValueText() ?? controlValue() }} </pre>
+        } @else if (placeholder()) {
+          <span class="tx-trans-lighter">{{ placeholder() }}</span>
+        } @else {
+          <span>&nbsp;</span>
+        }
+      }
+    </div>
+    @if (!readonly() && !disabled()) {
+      <input
+        [style]="inputStyle()"
+        [class]="inputClass()"
+        [attr.title]="title() ?? placeholder()"
+        [attr.placeholder]="placeholder()"
+        [attr.min]="min()"
+        [attr.max]="max()"
+        [type]="controlType()"
+        [attr.inputmode]="type() === 'number' ? 'numeric' : undefined"
+        [value]="controlValue()"
+        [attr.autocomplete]="autocomplete()"
+        [attr.step]="controlStep()"
+        (input)="onInput($event)"
+        (paste)="onInputPaste($event)"
+      />
+    }
+  `, host: {
+                    "[attr.data-sd-type]": "controlType()",
+                    "[attr.data-sd-disabled]": "disabled()",
+                    "[attr.data-sd-readonly]": "readonly()",
+                    "[attr.data-sd-inline]": "inline()",
+                    "[attr.data-sd-inset]": "inset()",
+                    "[attr.data-sd-size]": "size()",
+                    "[attr.data-sd-theme]": "theme()",
+                }, styles: ["sd-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  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-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-secondary-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[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  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  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  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  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(--theme-gray-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}"] }]
+    }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], useNumberComma: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNumberComma", required: false }] }], minDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDigits", 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(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber: 286, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBAgGa,UAAU;IACrB,MAAM,4DAA4C;IAClD,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,OAAO,gEAA8C;IAErD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,WAAW,0CAAiD;IAE5D,YAAY,0CAET;;IAMH,cAAc,IAAI,IAAI;yCAvBX,UAAU;2CAAV,UAAU;CA6BtB"}

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

@@ -0,0 +1,134 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NgIcon } from "@ng-icons/core";
+import { SdCollapse } from "../collapse/sd-collapse";
+import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
+import { SdList } from "./sd-list";
+import { setupRipple } from "../../core/ripple/setupRipple";
+import * as i0 from "@angular/core";
+const _c0 = ["toolTpl"];
+const _c1 = ["*", [["sd-list"]]];
+const _c2 = ["*", "sd-list"];
+function SdListItem_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "sd-collapse-icon", 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("open", ctx_r0.open());
+} }
+function SdListItem_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-icon", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("tx-theme-primary-default", ctx_r0.selected())("tx-trans-lightest", !ctx_r0.selected());
+    i0.ɵɵproperty("svg", ctx_r0.selectedIcon());
+} }
+function SdListItem_Conditional_5_ng_template_1_Template(rf, ctx) { }
+function SdListItem_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵtemplate(1, SdListItem_Conditional_5_ng_template_1_Template, 0, 0, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.toolTpl());
+} }
+function SdListItem_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "sd-collapse", 1);
+    i0.ɵɵprojection(1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("open", ctx_r0.childrenOpen());
+} }
+export class SdListItem {
+    layout = input("accordion", ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    open = model(false, ...(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 */ []));
+    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 */ []));
+    childrenOpen = computed(() => {
+        return this.layout() === "flat" ? true : this.open();
+    }, ...(ngDevMode ? [{ debugName: "childrenOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        setupRipple(() => !this.readonly() && this.layout() !== "flat");
+    }
+    onContentClick() {
+        if (this.readonly())
+            return;
+        if (this.layout() === "accordion" && this.hasChildren()) {
+            this.open.update((v) => !v);
+        }
+    }
+    static ɵfac = function SdListItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdListItem)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdListItem, selectors: [["sd-list-item"]], contentQueries: function SdListItem_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.toolTpl, _c0, 5)(dirIndex, ctx._childLists, SdList, 4);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(2);
+        } }, hostVars: 4, hostBindings: function SdListItem_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-layout", ctx.layout())("data-sd-selected", ctx.selected())("data-sd-readonly", ctx.readonly())("data-sd-has-children", ctx.hasChildren());
+        } }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 8, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter"], [3, "open"], [3, "tx-theme-primary-default", "tx-trans-lightest", "svg"], [1, "_label"], [1, "_tool"], [3, "svg"], [3, "ngTemplateOutlet"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1);
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("click", function SdListItem_Template_div_click_0_listener() { return ctx.onContentClick(); })("keydown.enter", function SdListItem_Template_div_keydown_enter_0_listener() { return ctx.onContentClick(); });
+            i0.ɵɵconditionalCreate(1, SdListItem_Conditional_1_Template, 1, 1, "sd-collapse-icon", 1);
+            i0.ɵɵconditionalCreate(2, SdListItem_Conditional_2_Template, 1, 5, "ng-icon", 2);
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵprojection(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, SdListItem_Conditional_5_Template, 2, 1, "div", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(6, SdListItem_Conditional_6_Template, 2, 1, "sd-collapse", 1);
+        } if (rf & 2) {
+            i0.ɵɵstyleMap(ctx.contentStyle());
+            i0.ɵɵclassMap(ctx.contentClass());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedIcon() !== undefined && !ctx.hasChildren() ? 2 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.toolTpl() ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
+        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  align-items: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-sm);\n}\nsd-list-item > ._content > ._label {\n  flex: 1;\n}\nsd-list-item:hover > ._content {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item[data-sd-readonly=true]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-layout=flat] > ._content {\n  font-size: 0.85em;\n  opacity: 0.7;\n  cursor: default;\n}\nsd-list-item[data-sd-layout=flat]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-has-children=false] > ._content {\n  padding-left: calc(var(--gap-default) + var(--gap-sm) + 0.75em);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
+        type: Component,
+        args: [{ selector: "sd-list-item", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon], template: `
+    <div class="_content" [style]="contentStyle()" [class]="contentClass()" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()">
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
+      @if (selectedIcon() !== undefined && !hasChildren()) {
+        <ng-icon
+          [class.tx-theme-primary-default]="selected()"
+          [class.tx-trans-lightest]="!selected()"
+          [svg]="selectedIcon()!"
+        />
+      }
+      <div class="_label">
+        <ng-content />
+      </div>
+      @if (toolTpl()) {
+        <div class="_tool">
+          <ng-template [ngTemplateOutlet]="toolTpl()!" />
+        </div>
+      }
+    </div>
+    @if (hasChildren()) {
+      <sd-collapse [open]="childrenOpen()">
+        <ng-content select="sd-list" />
+      </sd-collapse>
+    }
+  `, host: {
+                    "[attr.data-sd-layout]": "layout()",
+                    "[attr.data-sd-selected]": "selected()",
+                    "[attr.data-sd-readonly]": "readonly()",
+                    "[attr.data-sd-has-children]": "hasChildren()",
+                }, styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  align-items: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-sm);\n}\nsd-list-item > ._content > ._label {\n  flex: 1;\n}\nsd-list-item:hover > ._content {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item[data-sd-readonly=true]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-layout=flat] > ._content {\n  font-size: 0.85em;\n  opacity: 0.7;\n  cursor: default;\n}\nsd-list-item[data-sd-layout=flat]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-has-children=false] > ._content {\n  padding-left: calc(var(--gap-default) + var(--gap-sm) + 0.75em);\n}"] }]
+    }], () => [], { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], toolTpl: [{ type: i0.ContentChild, args: ["toolTpl", { isSignal: true }] }], _childLists: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdList), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 116, forbidOrphanRendering: true }); })();

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

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

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

@@ -0,0 +1,22 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from "@angular/core";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class SdList {
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = function SdList_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdList)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdList, selectors: [["sd-list"]], hostVars: 1, hostBindings: function SdList_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-inset", ctx.inset());
+        } }, 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: block;\n  user-select: none;\n  background: var(--control-color);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdList, [{
+        type: Component,
+        args: [{ selector: "sd-list", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    <ng-content />
+  `, host: {
+                    "[attr.data-sd-inset]": "inset()",
+                }, styles: ["sd-list {\n  display: block;\n  user-select: none;\n  background: var(--control-color);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}"] }]
+    }], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdList, { className: "SdList", filePath: "packages/angular/src/controls/list/sd-list.ts", lineNumber: 39, forbidOrphanRendering: true }); })();

package/dist/controls/pagination/sd-pagination.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from "@angular/core";
+export declare class SdPagination {
+    icons: {
+        tablerChevronsLeft: string;
+        tablerChevronLeft: string;
+        tablerChevronRight: string;
+        tablerChevronsRight: string;
+    };
+    currentPage: import("@angular/core").ModelSignal<number>;
+    totalPageCount: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    visiblePageCount: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    private readonly _groupIndex;
+    hasPrev: import("@angular/core").Signal<boolean>;
+    hasNext: import("@angular/core").Signal<boolean>;
+    displayPages: import("@angular/core").Signal<number[]>;
+    goToPage(page: number): void;
+    goToNextGroup(): void;
+    goToPrevGroup(): void;
+    goToFirst(): void;
+    goToLast(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdPagination, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdPagination, "sd-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "totalPageCount": { "alias": "totalPageCount"; "required": false; "isSignal": true; }; "visiblePageCount": { "alias": "visiblePageCount"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=sd-pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-pagination.d.ts","sourceRoot":"","sources":["../../../src/controls/pagination/sd-pagination.ts"],"names":[],"mappings":";AAkBA,qBA2Ca,YAAY;IACvB,KAAK;;;;;MAAsF;IAE3F,WAAW,8CAAY;IACvB,cAAc,oEAA4C;IAC1D,gBAAgB,oEAA6C;IAE7D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAEzB;IAEH,OAAO,0CAKJ;IAEH,OAAO,0CAOJ;IAEH,YAAY,2CAeT;IAEH,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI5B,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAKrB,SAAS,IAAI,IAAI;IAIjB,QAAQ,IAAI,IAAI;yCA7DL,YAAY;2CAAZ,YAAY;CAiExB"}

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

@@ -0,0 +1,141 @@
+import { ChangeDetectionStrategy, Component, computed, input, model, numberAttribute, ViewEncapsulation, } from "@angular/core";
+import { SdAnchor } from "../button/sd-anchor";
+import { NgIcon } from "@ng-icons/core";
+import { tablerChevronLeft, tablerChevronRight, tablerChevronsLeft, tablerChevronsRight, } from "@ng-icons/tabler-icons";
+import * as i0 from "@angular/core";
+function SdPagination_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-anchor", 6);
+    i0.ɵɵlistener("click", function SdPagination_For_5_Template_sd_anchor_click_0_listener() { const page_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.goToPage(page_r2 - 1)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const page_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("text-decoration", page_r2 === ctx_r2.currentPage() + 1 ? "underline" : "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(page_r2);
+} }
+export class SdPagination {
+    icons = { tablerChevronsLeft, tablerChevronLeft, tablerChevronRight, tablerChevronsRight };
+    currentPage = model(0, ...(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 */ []));
+    hasPrev = computed(() => {
+        if (this.totalPageCount() === 0) {
+            return false;
+        }
+        return this._groupIndex() > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
+    hasNext = computed(() => {
+        const totalPageCount = this.totalPageCount();
+        if (totalPageCount === 0) {
+            return false;
+        }
+        const lastGroupIndex = Math.floor((totalPageCount - 1) / Math.max(this.visiblePageCount(), 1));
+        return this._groupIndex() < lastGroupIndex;
+    }, ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+    displayPages = computed(() => {
+        const totalPageCount = this.totalPageCount();
+        if (totalPageCount === 0) {
+            return [];
+        }
+        const visiblePageCount = this.visiblePageCount();
+        const startPage = this._groupIndex() * visiblePageCount + 1;
+        const endPage = Math.min(startPage + visiblePageCount - 1, totalPageCount);
+        const pages = [];
+        for (let i = startPage; i <= endPage; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "displayPages" }] : /* istanbul ignore next */ []));
+    goToPage(page) {
+        this.currentPage.set(page);
+    }
+    goToNextGroup() {
+        this.currentPage.set((this._groupIndex() + 1) * Math.max(this.visiblePageCount(), 1));
+    }
+    goToPrevGroup() {
+        if (!this.hasPrev())
+            return;
+        this.currentPage.set((this._groupIndex() - 1) * Math.max(this.visiblePageCount(), 1));
+    }
+    goToFirst() {
+        this.currentPage.set(0);
+    }
+    goToLast() {
+        if (this.totalPageCount() === 0)
+            return;
+        this.currentPage.set(this.totalPageCount() - 1);
+    }
+    static ɵfac = function SdPagination_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdPagination)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdPagination, selectors: [["sd-pagination"]], hostAttrs: [1, "flex-row", "gap-xs"], inputs: { currentPage: [1, "currentPage"], totalPageCount: [1, "totalPageCount"], visiblePageCount: [1, "visiblePageCount"] }, outputs: { currentPage: "currentPageChange" }, decls: 10, vars: 8, consts: [[1, "nav-first", 3, "click", "disabled"], [3, "svg"], [1, "nav-prev-group", 3, "click", "disabled"], [1, "page-anchor", 3, "text-decoration"], [1, "nav-next-group", 3, "click", "disabled"], [1, "nav-last", 3, "click", "disabled"], [1, "page-anchor", 3, "click"]], template: function SdPagination_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "sd-anchor", 0);
+            i0.ɵɵlistener("click", function SdPagination_Template_sd_anchor_click_0_listener() { return ctx.goToFirst(); });
+            i0.ɵɵelement(1, "ng-icon", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "sd-anchor", 2);
+            i0.ɵɵlistener("click", function SdPagination_Template_sd_anchor_click_2_listener() { return ctx.goToPrevGroup(); });
+            i0.ɵɵelement(3, "ng-icon", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(4, SdPagination_For_5_Template, 2, 3, "sd-anchor", 3, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(6, "sd-anchor", 4);
+            i0.ɵɵlistener("click", function SdPagination_Template_sd_anchor_click_6_listener() { return ctx.goToNextGroup(); });
+            i0.ɵɵelement(7, "ng-icon", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "sd-anchor", 5);
+            i0.ɵɵlistener("click", function SdPagination_Template_sd_anchor_click_8_listener() { return ctx.goToLast(); });
+            i0.ɵɵelement(9, "ng-icon", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("disabled", !ctx.hasPrev());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("svg", ctx.icons.tablerChevronsLeft);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", !ctx.hasPrev());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("svg", ctx.icons.tablerChevronLeft);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.displayPages());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", !ctx.hasNext());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("svg", ctx.icons.tablerChevronRight);
+            i0.ɵɵadvance();
+            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-xs);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPagination, [{
+        type: Component,
+        args: [{ selector: "sd-pagination", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdAnchor, NgIcon], template: `
+    <sd-anchor class="nav-first" [disabled]="!hasPrev()" (click)="goToFirst()">
+      <ng-icon [svg]="icons.tablerChevronsLeft" />
+    </sd-anchor>
+    <sd-anchor class="nav-prev-group" [disabled]="!hasPrev()" (click)="goToPrevGroup()">
+      <ng-icon [svg]="icons.tablerChevronLeft" />
+    </sd-anchor>
+
+    @for (page of displayPages(); track page) {
+      <sd-anchor
+        class="page-anchor"
+        [style.text-decoration]="page === currentPage() + 1 ? 'underline' : ''"
+        (click)="goToPage(page - 1)"
+      >{{ page }}</sd-anchor>
+    }
+
+    <sd-anchor class="nav-next-group" [disabled]="!hasNext()" (click)="goToNextGroup()">
+      <ng-icon [svg]="icons.tablerChevronRight" />
+    </sd-anchor>
+    <sd-anchor class="nav-last" [disabled]="!hasNext()" (click)="goToLast()">
+      <ng-icon [svg]="icons.tablerChevronsRight" />
+    </sd-anchor>
+  `, host: {
+                    class: "flex-row gap-xs",
+                }, styles: ["sd-pagination > sd-anchor {\n  display: inline-block;\n  padding: var(--gap-xs);\n}"] }]
+    }], null, { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPagination, { className: "SdPagination", filePath: "packages/angular/src/controls/pagination/sd-pagination.ts", lineNumber: 62, forbidOrphanRendering: true }); })();

package/dist/controls/select/sd-select-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-button.ts"],"names":[],"mappings":";AAOA,qBA+Ba,cAAc;;yCAAd,cAAc;2CAAd,cAAc;CAI1B"}

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

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, } from "@angular/core";
+import { setupRipple } from "../../core/ripple/setupRipple";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class SdSelectButton {
+    constructor() {
+        setupRipple(() => true);
+    }
+    static ɵfac = function SdSelectButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSelectButton)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSelectButton, selectors: [["sd-select-button"]], hostVars: 1, hostBindings: function SdSelectButton_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("tabindex", 0);
+        } }, 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: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  border-left: 1px solid var(--trans-lighter);\n  position: relative;\n  overflow: hidden;\n}\nsd-select-button:hover {\n  background: var(--trans-lighter);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectButton, [{
+        type: Component,
+        args: [{ selector: "sd-select-button", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    <ng-content />
+  `, host: {
+                    "[attr.tabindex]": "0",
+                }, styles: ["sd-select-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  border-left: 1px solid var(--trans-lighter);\n  position: relative;\n  overflow: hidden;\n}\nsd-select-button:hover {\n  background: var(--trans-lighter);\n}"] }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectButton, { className: "SdSelectButton", filePath: "packages/angular/src/controls/select/sd-select-button.ts", lineNumber: 39, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-select-item.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-item.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAIvC,qBA6Da,YAAY,CAAC,CAAC;IACzB,SAAS,CAAC,QAAQ,CAAC,cAAc,mBAE/B;IACF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,KAAK,yCAAuB;IAC5B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IAEvD,WAAW,iDAAc;IAEzB,UAAU,0CAQP;;IAkBH,OAAO,IAAI,IAAI;IAKf,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA5C1B,YAAY;2CAAZ,YAAY;CA+DxB"}