@simplysm/angular 14.0.30 → 14.0.33

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

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

package/dist/controls/checkbox/sd-switch.d.ts.map

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

package/dist/controls/checkbox/sd-switch.js

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

package/dist/controls/collapse/sd-collapse-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-collapse-icon.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse-icon.ts"],"names":[],"mappings":";AAYA,qBAyBa,cAAc;IACzB,IAAI,qEAAiD;IACrD,UAAU,oEAA6C;IAEvD,KAAK;;MAA0B;IAE/B,cAAc,yCAEX;IAEH,eAAe,uFAEZ;yCAZQ,cAAc;2CAAd,cAAc;CAa1B"}

package/dist/controls/collapse/sd-collapse-icon.js

@@ -0,0 +1,33 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, numberAttribute, ViewEncapsulation, } from "@angular/core";
+import { NgIcon } from "@ng-icons/core";
+import { tablerChevronRight } from "@ng-icons/tabler-icons";
+import * as i0 from "@angular/core";
+export class SdCollapseIcon {
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    openRotate = input(90, { ...(ngDevMode ? { debugName: "openRotate" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    icons = { tablerChevronRight };
+    transformStyle = computed(() => {
+        return this.open() ? `rotate(${this.openRotate()}deg)` : "";
+    }, ...(ngDevMode ? [{ debugName: "transformStyle" }] : /* istanbul ignore next */ []));
+    transitionStyle = computed(() => {
+        return this.open() ? "transform 0.1s ease-out" : "transform 0.1s ease-in";
+    }, ...(ngDevMode ? [{ debugName: "transitionStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = function SdCollapseIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCollapseIcon)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCollapseIcon, selectors: [["sd-collapse-icon"]], hostVars: 4, hostBindings: function SdCollapseIcon_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵstyleProp("transform", ctx.transformStyle())("transition", ctx.transitionStyle());
+        } }, inputs: { open: [1, "open"], openRotate: [1, "openRotate"] }, decls: 1, vars: 1, consts: [[3, "svg"]], template: function SdCollapseIcon_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "ng-icon", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("svg", ctx.icons.tablerChevronRight);
+        } }, dependencies: [NgIcon], styles: ["sd-collapse-icon {\n  display: inline-block;\n}\nsd-collapse-icon > ng-icon {\n  display: block;\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCollapseIcon, [{
+        type: Component,
+        args: [{ selector: "sd-collapse-icon", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIcon], template: `
+    <ng-icon [svg]="icons.tablerChevronRight" />
+  `, host: {
+                    "[style.transform]": "transformStyle()",
+                    "[style.transition]": "transitionStyle()",
+                }, styles: ["sd-collapse-icon {\n  display: inline-block;\n}\nsd-collapse-icon > ng-icon {\n  display: block;\n}"] }]
+    }], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openRotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "openRotate", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCollapseIcon, { className: "SdCollapseIcon", filePath: "packages/angular/src/controls/collapse/sd-collapse-icon.ts", lineNumber: 38, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1,14 @@
+import type { SdResizeEvent } from "../../core/events/sd-resize-event.plugin";
+import * as i0 from "@angular/core";
+export declare class SdCollapse {
+    open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    private readonly _contentElRef;
+    contentHeight: import("@angular/core").WritableSignal<number>;
+    contentMarginTop: import("@angular/core").Signal<string>;
+    contentTransition: import("@angular/core").Signal<"margin-top 0.1s ease-out" | "margin-top 0.1s ease-in">;
+    constructor();
+    onContentResize(event: SdResizeEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapse, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCollapse, "sd-collapse", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=sd-collapse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-collapse.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;;AAE9E,qBA0Ba,UAAU;IACrB,IAAI,qEAAiD;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAC6B;IAE3D,aAAa,iDAAa;IAE1B,gBAAgB,yCAEb;IAEH,iBAAiB,yFAEd;;IAcH,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA5BhC,UAAU;2CAAV,UAAU;CAiCtB"}

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

@@ -0,0 +1,59 @@
+import { afterNextRender, booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, ElementRef, input, signal, viewChild, ViewEncapsulation, } from "@angular/core";
+import * as i0 from "@angular/core";
+const _c0 = ["contentEl"];
+const _c1 = ["*"];
+export class SdCollapse {
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _contentElRef = viewChild.required("contentEl");
+    contentHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
+    contentMarginTop = computed(() => {
+        return this.open() ? "" : `-${this.contentHeight()}px`;
+    }, ...(ngDevMode ? [{ debugName: "contentMarginTop" }] : /* istanbul ignore next */ []));
+    contentTransition = computed(() => {
+        return this.open() ? "margin-top 0.1s ease-out" : "margin-top 0.1s ease-in";
+    }, ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+        });
+        effect(() => {
+            // Re-measure height on open transition to handle stale values from closed state
+            this.open();
+            this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+        });
+    }
+    onContentResize(event) {
+        if (event.heightChanged) {
+            this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+        }
+    }
+    static ɵfac = function SdCollapse_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCollapse)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCollapse, selectors: [["sd-collapse"]], viewQuery: function SdCollapse_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx._contentElRef, _c0, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { open: [1, "open"] }, ngContentSelectors: _c1, decls: 3, vars: 4, consts: [["contentEl", ""], [1, "_content", 3, "sdResize"]], template: function SdCollapse_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵdomElementStart(0, "div", 1, 0);
+            i0.ɵɵdomListener("sdResize", function SdCollapse_Template_div_sdResize_0_listener($event) { return ctx.onContentResize($event); });
+            i0.ɵɵprojection(2);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("margin-top", ctx.contentMarginTop())("transition", ctx.contentTransition());
+        } }, styles: ["sd-collapse {\n  display: block;\n  overflow: hidden;\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCollapse, [{
+        type: Component,
+        args: [{ selector: "sd-collapse", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    <div
+      #contentEl
+      class="_content"
+      [style.margin-top]="contentMarginTop()"
+      [style.transition]="contentTransition()"
+      (sdResize)="onContentResize($any($event))"
+    >
+      <ng-content />
+    </div>
+  `, styles: ["sd-collapse {\n  display: block;\n  overflow: hidden;\n}"] }]
+    }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], _contentElRef: [{ type: i0.ViewChild, args: ["contentEl", { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCollapse, { className: "SdCollapse", filePath: "packages/angular/src/controls/collapse/sd-collapse.ts", lineNumber: 42, forbidOrphanRendering: true }); })();

package/dist/controls/dropdown/sd-dropdown-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-dropdown-popup.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown-popup.ts"],"names":[],"mappings":";AASA,qBA6Ea,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCAL1B,eAAe;2CAAf,eAAe;CAQ3B"}

package/dist/controls/dropdown/sd-dropdown-popup.js

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject, ViewEncapsulation, } from "@angular/core";
+import { SdDropdown } from "./sd-dropdown";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class SdDropdownPopup {
+    _parentControl = inject(forwardRef(() => SdDropdown));
+    onKeydown(event) {
+        this._parentControl.onPopupKeydown(event);
+    }
+    static ɵfac = function SdDropdownPopup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdDropdownPopup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdDropdownPopup, selectors: [["sd-dropdown-popup"]], hostBindings: function SdDropdownPopup_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function SdDropdownPopup_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
+        } }, ngContentSelectors: _c0, decls: 2, vars: 0, template: function SdDropdownPopup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵdomElementStart(0, "div");
+            i0.ɵɵprojection(1);
+            i0.ɵɵdomElementEnd();
+        } }, styles: ["sd-dropdown-popup {\n  position: fixed;\n  z-index: var(--z-index-dropdown);\n  opacity: 0;\n  transform: translateY(-0.625rem);\n  transition: 0.1s linear;\n  transition-property: transform, opacity;\n  pointer-events: none;\n  background: var(--control-color);\n  min-width: 7.5rem;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  overflow: hidden;\n  border-radius: var(--border-radius-default);\n  border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n  outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n  sd-dropdown-popup {\n    box-shadow: none;\n    border: 1px solid var(--border-color-default);\n  }\n}\nsd-dropdown-popup[data-sd-mobile] {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n  max-height: 80vh;\n  border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n  opacity: 1;\n  pointer-events: auto;\n  transform: none;\n  animation: sd-dropdown-slide-up 0.2s ease-out;\n  box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDropdownPopup, [{
+        type: Component,
+        args: [{ selector: "sd-dropdown-popup", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
+                    "(keydown)": "onKeydown($event)",
+                }, template: `
+    <div>
+      <ng-content></ng-content>
+    </div>
+  `, styles: ["sd-dropdown-popup {\n  position: fixed;\n  z-index: var(--z-index-dropdown);\n  opacity: 0;\n  transform: translateY(-0.625rem);\n  transition: 0.1s linear;\n  transition-property: transform, opacity;\n  pointer-events: none;\n  background: var(--control-color);\n  min-width: 7.5rem;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  overflow: hidden;\n  border-radius: var(--border-radius-default);\n  border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n  outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n  sd-dropdown-popup {\n    box-shadow: none;\n    border: 1px solid var(--border-color-default);\n  }\n}\nsd-dropdown-popup[data-sd-mobile] {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n  max-height: 80vh;\n  border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n  opacity: 1;\n  pointer-events: auto;\n  transform: none;\n  animation: sd-dropdown-slide-up 0.2s ease-out;\n  box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDropdownPopup, { className: "SdDropdownPopup", filePath: "packages/angular/src/controls/dropdown/sd-dropdown-popup.ts", lineNumber: 87, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-dropdown.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,UAAU,EAMX,MAAM,eAAe,CAAC;AAEvB,OAAO,wBAAwB,CAAC;;AAEhC,qBAgBa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAE1D,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IAEzD,UAAU,0DAGR;IAEF,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,YAAY,CAAC,CAAc;IACnC,OAAO,CAAC,WAAW,CAAC,CAAc;IAClC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;;IAiEtC,WAAW,IAAI,IAAI;IAQnB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8CzC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAY1C,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAuC5B,OAAO,CAAC,wBAAwB;IAShC,OAAO,CAAC,sBAAsB;IAqC9B,OAAO,CAAC,YAAY;yCApPT,UAAU;2CAAV,UAAU;CAoRtB"}