@lumston/ds-angular 0.0.7 → 0.0.8

package/fesm2022/lumston-ds-angular-src-inputs.mjs

@@ -0,0 +1,1132 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, ChangeDetectionStrategy, Component, signal, effect, computed, forwardRef, Renderer2, DestroyRef, model, viewChild } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class ButtonComponent {
+    constructor() {
+        this._elementRef = inject((ElementRef));
+        this.sanitizer = inject(DomSanitizer);
+        /** Host element of this component. Pass directly as `anchorEl` to overlay components like `ls-menu`. */
+        this.nativeElement = this._elementRef.nativeElement;
+        this.variant = input('contained', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+        this.startIcon = input(...(ngDevMode ? [undefined, { debugName: "startIcon" }] : []));
+        this.endIcon = input(...(ngDevMode ? [undefined, { debugName: "endIcon" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.loadingIndicator = input('spinner', ...(ngDevMode ? [{ debugName: "loadingIndicator" }] : []));
+        this.loadingPosition = input('center', ...(ngDevMode ? [{ debugName: "loadingPosition" }] : []));
+        this.rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+        this.clicked = output();
+    }
+    get isCustomText() {
+        return this.loadingIndicator() !== 'spinner';
+    }
+    get iconSizeClass() {
+        switch (this.size()) {
+            case 'small':
+                return 'btn-icon--sm';
+            case 'large':
+                return 'btn-icon--lg';
+            default:
+                return 'btn-icon--md';
+        }
+    }
+    get showStartIcon() {
+        if (!this.startIcon())
+            return false;
+        if (!this.loading())
+            return true;
+        return this.loadingPosition() === 'end' && !this.isCustomText;
+    }
+    get showEndIcon() {
+        if (!this.endIcon())
+            return false;
+        if (!this.loading())
+            return true;
+        return this.loadingPosition() === 'start' && !this.isCustomText;
+    }
+    get sanitizedStartIcon() {
+        return this.sanitizer.bypassSecurityTrustHtml(this.startIcon() ?? '');
+    }
+    get sanitizedEndIcon() {
+        return this.sanitizer.bypassSecurityTrustHtml(this.endIcon() ?? '');
+    }
+    get buttonClasses() {
+        const classes = ['btn'];
+        const variant = this.variant();
+        const color = this.color();
+        // Variant + color mapping
+        if (variant === 'contained') {
+            classes.push(`btn-${color}`);
+        }
+        if (variant === 'outline') {
+            classes.push(`btn-outline-${color}`);
+        }
+        if (variant === 'text') {
+            classes.push(`btn-text-${color}`);
+        }
+        // Size
+        switch (this.size()) {
+            case 'small':
+                classes.push('btn-sm');
+                break;
+            case 'large':
+                classes.push('btn-lg');
+                break;
+            default:
+                classes.push('btn-md');
+        }
+        if (this.fullWidth()) {
+            classes.push('btn-full-width');
+        }
+        if (this.rounded()) {
+            classes.push('btn-rounded');
+        }
+        return classes.join(' ');
+    }
+    onClick(event) {
+        if (!this.disabled() && !this.loading()) {
+            this.clicked.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ButtonComponent, isStandalone: true, selector: "ls-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, startIcon: { classPropertyName: "startIcon", publicName: "startIcon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicator: { classPropertyName: "loadingIndicator", publicName: "loadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, loadingPosition: { classPropertyName: "loadingPosition", publicName: "loadingPosition", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="buttonClasses"
+      (click)="onClick($event)">
+      <ng-template #spinner>
+        <svg class="btn-spinner" viewBox="0 0 24 24" fill="none">
+          <circle
+            class="btn-spinner-circle"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4" />
+          <path
+            class="btn-spinner-path"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+      </ng-template>
+
+      @if (showStartIcon) {
+        <span
+          class="btn-icon btn-icon--start"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedStartIcon"></span>
+      }
+
+      @if (loading() && isCustomText) {
+        <span class="btn-loading-overlay">
+          {{ loadingIndicator() }}
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'start') {
+        <span class="btn-loading-inline btn-loading-inline--start">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'center') {
+        <span class="btn-loading-overlay">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      <span
+        [class]="
+          loading() && (isCustomText || loadingPosition() === 'center')
+            ? 'btn-content--hidden'
+            : ''
+        ">
+        <ng-content />
+      </span>
+
+      @if (loading() && !isCustomText && loadingPosition() === 'end') {
+        <span class="btn-loading-inline btn-loading-inline--end">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+      @if (showEndIcon) {
+        <span
+          class="btn-icon btn-icon--end"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedEndIcon"></span>
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:contents}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ls-border-radius-md);border:1px solid;padding:.5rem 1.25rem;font-size:.875rem;line-height:1.25rem;font-weight:600;box-shadow:0 10px 20px -10px;outline:none;transition:all var(--ls-transition-duration) ease;cursor:pointer}.btn-lg{padding:.625rem 1.75rem;font-size:1rem;line-height:1.5rem}.btn-sm{padding:.375rem .625rem;font-size:.75rem;line-height:1rem}.btn[disabled]{cursor:not-allowed;opacity:.6}.btn-primary{border-color:var(--ls-color-primary);background-color:var(--ls-color-primary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #4361ee99}.btn-primary:hover{filter:brightness(.9)}.btn-secondary{border-color:var(--ls-color-secondary);background-color:var(--ls-color-secondary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #805dca99}.btn-secondary:hover{filter:brightness(.9)}.btn-success{border-color:var(--ls-color-success);background-color:var(--ls-color-success);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #00ab5599}.btn-success:hover{filter:brightness(.9)}.btn-error{border-color:var(--ls-color-danger);background-color:var(--ls-color-danger);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e7515a99}.btn-error:hover{filter:brightness(.9)}.btn-warning{border-color:var(--ls-color-warning);background-color:var(--ls-color-warning);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e2a03f99}.btn-warning:hover{filter:brightness(.9)}.btn-info{border-color:var(--ls-color-info);background-color:var(--ls-color-info);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #2196f399}.btn-info:hover{filter:brightness(.9)}.btn-dark{border-color:var(--ls-color-dark);background-color:var(--ls-color-dark);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #3b3f5c99}.btn-dark:hover{filter:brightness(.9)}.btn-outline-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary);background-color:transparent;box-shadow:none}.btn-outline-primary:hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.btn-outline-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary);background-color:transparent;box-shadow:none}.btn-outline-secondary:hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.btn-outline-success{border-color:var(--ls-color-success);color:var(--ls-color-success);background-color:transparent;box-shadow:none}.btn-outline-success:hover{background-color:var(--ls-color-success);color:var(--ls-color-white)}.btn-outline-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger);background-color:transparent;box-shadow:none}.btn-outline-error:hover{background-color:var(--ls-color-danger);color:var(--ls-color-white)}.btn-outline-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning);background-color:transparent;box-shadow:none}.btn-outline-warning:hover{background-color:var(--ls-color-warning);color:var(--ls-color-white)}.btn-outline-info{border-color:var(--ls-color-info);color:var(--ls-color-info);background-color:transparent;box-shadow:none}.btn-outline-info:hover{background-color:var(--ls-color-info);color:var(--ls-color-white)}.btn-outline-dark{border-color:var(--ls-color-dark);color:var(--ls-color-dark);background-color:transparent;box-shadow:none}.btn-outline-dark:hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.btn-text-primary{border-color:transparent;background-color:transparent;color:var(--ls-color-primary);box-shadow:none}.btn-text-primary:hover{background-color:#4361ee1a}.btn-text-secondary{border-color:transparent;background-color:transparent;color:var(--ls-color-secondary);box-shadow:none}.btn-text-secondary:hover{background-color:#805dca1a}.btn-text-success{border-color:transparent;background-color:transparent;color:var(--ls-color-success);box-shadow:none}.btn-text-success:hover{background-color:#00ab551a}.btn-text-error{border-color:transparent;background-color:transparent;color:var(--ls-color-danger);box-shadow:none}.btn-text-error:hover{background-color:#e7515a1a}.btn-text-warning{border-color:transparent;background-color:transparent;color:var(--ls-color-warning);box-shadow:none}.btn-text-warning:hover{background-color:#e2a03f1a}.btn-text-info{border-color:transparent;background-color:transparent;color:var(--ls-color-info);box-shadow:none}.btn-text-info:hover{background-color:#2196f31a}.btn-text-dark{border-color:transparent;background-color:transparent;color:var(--ls-color-dark);box-shadow:none}.btn-text-dark:hover{background-color:#3b3f5c1a}.btn-gradient{background:linear-gradient(to right,var(--ls-gradient-start),var(--ls-gradient-end));color:var(--ls-color-white);border-color:transparent}.btn-gradient:hover{background:linear-gradient(to right,var(--ls-gradient-end),var(--ls-gradient-start))}.btn-full-width{width:100%}.btn-rounded{border-radius:var(--ls-border-radius-full)}.btn-spinner{animation:ls-spin 1s linear infinite;height:1rem;width:1rem}.btn-spinner-circle{opacity:.25}.btn-spinner-path{opacity:.75}.btn-icon{flex-shrink:0;display:inline-flex}.btn-icon>svg{height:100%;width:100%}.btn-icon--start{margin-inline-end:.375rem}.btn-icon--end{margin-inline-start:.375rem}.btn-icon--sm{height:.875rem;width:.875rem}.btn-icon--md{height:1rem;width:1rem}.btn-icon--lg{height:1.25rem;width:1.25rem}.btn-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.btn-loading-inline{display:inline-flex;align-items:center}.btn-loading-inline--start{margin-inline-end:.5rem}.btn-loading-inline--end{margin-inline-start:.5rem}.btn-content--hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-button', standalone: true, imports: [NgTemplateOutlet], template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="buttonClasses"
+      (click)="onClick($event)">
+      <ng-template #spinner>
+        <svg class="btn-spinner" viewBox="0 0 24 24" fill="none">
+          <circle
+            class="btn-spinner-circle"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4" />
+          <path
+            class="btn-spinner-path"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+      </ng-template>
+
+      @if (showStartIcon) {
+        <span
+          class="btn-icon btn-icon--start"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedStartIcon"></span>
+      }
+
+      @if (loading() && isCustomText) {
+        <span class="btn-loading-overlay">
+          {{ loadingIndicator() }}
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'start') {
+        <span class="btn-loading-inline btn-loading-inline--start">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'center') {
+        <span class="btn-loading-overlay">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      <span
+        [class]="
+          loading() && (isCustomText || loadingPosition() === 'center')
+            ? 'btn-content--hidden'
+            : ''
+        ">
+        <ng-content />
+      </span>
+
+      @if (loading() && !isCustomText && loadingPosition() === 'end') {
+        <span class="btn-loading-inline btn-loading-inline--end">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+      @if (showEndIcon) {
+        <span
+          class="btn-icon btn-icon--end"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedEndIcon"></span>
+      }
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ls-border-radius-md);border:1px solid;padding:.5rem 1.25rem;font-size:.875rem;line-height:1.25rem;font-weight:600;box-shadow:0 10px 20px -10px;outline:none;transition:all var(--ls-transition-duration) ease;cursor:pointer}.btn-lg{padding:.625rem 1.75rem;font-size:1rem;line-height:1.5rem}.btn-sm{padding:.375rem .625rem;font-size:.75rem;line-height:1rem}.btn[disabled]{cursor:not-allowed;opacity:.6}.btn-primary{border-color:var(--ls-color-primary);background-color:var(--ls-color-primary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #4361ee99}.btn-primary:hover{filter:brightness(.9)}.btn-secondary{border-color:var(--ls-color-secondary);background-color:var(--ls-color-secondary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #805dca99}.btn-secondary:hover{filter:brightness(.9)}.btn-success{border-color:var(--ls-color-success);background-color:var(--ls-color-success);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #00ab5599}.btn-success:hover{filter:brightness(.9)}.btn-error{border-color:var(--ls-color-danger);background-color:var(--ls-color-danger);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e7515a99}.btn-error:hover{filter:brightness(.9)}.btn-warning{border-color:var(--ls-color-warning);background-color:var(--ls-color-warning);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e2a03f99}.btn-warning:hover{filter:brightness(.9)}.btn-info{border-color:var(--ls-color-info);background-color:var(--ls-color-info);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #2196f399}.btn-info:hover{filter:brightness(.9)}.btn-dark{border-color:var(--ls-color-dark);background-color:var(--ls-color-dark);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #3b3f5c99}.btn-dark:hover{filter:brightness(.9)}.btn-outline-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary);background-color:transparent;box-shadow:none}.btn-outline-primary:hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.btn-outline-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary);background-color:transparent;box-shadow:none}.btn-outline-secondary:hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.btn-outline-success{border-color:var(--ls-color-success);color:var(--ls-color-success);background-color:transparent;box-shadow:none}.btn-outline-success:hover{background-color:var(--ls-color-success);color:var(--ls-color-white)}.btn-outline-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger);background-color:transparent;box-shadow:none}.btn-outline-error:hover{background-color:var(--ls-color-danger);color:var(--ls-color-white)}.btn-outline-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning);background-color:transparent;box-shadow:none}.btn-outline-warning:hover{background-color:var(--ls-color-warning);color:var(--ls-color-white)}.btn-outline-info{border-color:var(--ls-color-info);color:var(--ls-color-info);background-color:transparent;box-shadow:none}.btn-outline-info:hover{background-color:var(--ls-color-info);color:var(--ls-color-white)}.btn-outline-dark{border-color:var(--ls-color-dark);color:var(--ls-color-dark);background-color:transparent;box-shadow:none}.btn-outline-dark:hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.btn-text-primary{border-color:transparent;background-color:transparent;color:var(--ls-color-primary);box-shadow:none}.btn-text-primary:hover{background-color:#4361ee1a}.btn-text-secondary{border-color:transparent;background-color:transparent;color:var(--ls-color-secondary);box-shadow:none}.btn-text-secondary:hover{background-color:#805dca1a}.btn-text-success{border-color:transparent;background-color:transparent;color:var(--ls-color-success);box-shadow:none}.btn-text-success:hover{background-color:#00ab551a}.btn-text-error{border-color:transparent;background-color:transparent;color:var(--ls-color-danger);box-shadow:none}.btn-text-error:hover{background-color:#e7515a1a}.btn-text-warning{border-color:transparent;background-color:transparent;color:var(--ls-color-warning);box-shadow:none}.btn-text-warning:hover{background-color:#e2a03f1a}.btn-text-info{border-color:transparent;background-color:transparent;color:var(--ls-color-info);box-shadow:none}.btn-text-info:hover{background-color:#2196f31a}.btn-text-dark{border-color:transparent;background-color:transparent;color:var(--ls-color-dark);box-shadow:none}.btn-text-dark:hover{background-color:#3b3f5c1a}.btn-gradient{background:linear-gradient(to right,var(--ls-gradient-start),var(--ls-gradient-end));color:var(--ls-color-white);border-color:transparent}.btn-gradient:hover{background:linear-gradient(to right,var(--ls-gradient-end),var(--ls-gradient-start))}.btn-full-width{width:100%}.btn-rounded{border-radius:var(--ls-border-radius-full)}.btn-spinner{animation:ls-spin 1s linear infinite;height:1rem;width:1rem}.btn-spinner-circle{opacity:.25}.btn-spinner-path{opacity:.75}.btn-icon{flex-shrink:0;display:inline-flex}.btn-icon>svg{height:100%;width:100%}.btn-icon--start{margin-inline-end:.375rem}.btn-icon--end{margin-inline-start:.375rem}.btn-icon--sm{height:.875rem;width:.875rem}.btn-icon--md{height:1rem;width:1rem}.btn-icon--lg{height:1.25rem;width:1.25rem}.btn-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.btn-loading-inline{display:inline-flex;align-items:center}.btn-loading-inline--start{margin-inline-end:.5rem}.btn-loading-inline--end{margin-inline-start:.5rem}.btn-content--hidden{visibility:hidden}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], startIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIcon", required: false }] }], endIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "endIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIndicator", required: false }] }], loadingPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingPosition", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+const INDETERMINATE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">' +
+    '<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-2 10H7v-2h10v2z"/>' +
+    '</svg>';
+class CheckboxComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.checkedIcon = input.required(...(ngDevMode ? [{ debugName: "checkedIcon" }] : []));
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.defaultChecked = input(false, ...(ngDevMode ? [{ debugName: "defaultChecked" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+        this.labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
+        this.changed = output();
+        this._isChecked = signal(false, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
+        this._isFirstSync = true;
+        this._syncChecked = effect(() => {
+            const checked = this.checked();
+            if (this._isFirstSync) {
+                this._isFirstSync = false;
+                this._isChecked.set(checked || this.defaultChecked());
+            }
+            else {
+                this._isChecked.set(checked);
+            }
+        }, ...(ngDevMode ? [{ debugName: "_syncChecked" }] : []));
+        this.checkboxClasses = computed(() => {
+            const s = this.size() === 'small' ? 'sm' : 'md';
+            const parts = [
+                'checkbox',
+                `checkbox-${s}`,
+                `checkbox-color-${this.color()}`,
+                `checkbox-label-${this.labelPlacement()}`,
+            ];
+            if (this._isChecked()) {
+                parts.push('checkbox-checked');
+            }
+            if (this.disabled()) {
+                parts.push('checkbox-disabled');
+            }
+            if (this.indeterminate()) {
+                parts.push('checkbox-indeterminate');
+            }
+            return parts.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "checkboxClasses" }] : []));
+        this.currentIcon = computed(() => {
+            let svg;
+            if (this.indeterminate()) {
+                svg = INDETERMINATE_SVG;
+            }
+            else if (this._isChecked()) {
+                svg = this.checkedIcon();
+            }
+            else {
+                svg = this.icon();
+            }
+            return this._sanitizer.bypassSecurityTrustHtml(svg);
+        }, ...(ngDevMode ? [{ debugName: "currentIcon" }] : []));
+    }
+    onToggle() {
+        if (this.disabled()) {
+            return;
+        }
+        const next = !this._isChecked();
+        this._isChecked.set(next);
+        this.changed.emit(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: CheckboxComponent, isStandalone: true, selector: "ls-checkbox", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, checkedIcon: { classPropertyName: "checkedIcon", publicName: "checkedIcon", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "defaultChecked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: `
+    <label [class]="checkboxClasses()">
+      <input
+        type="checkbox"
+        class="checkbox-input"
+        [checked]="_isChecked()"
+        [disabled]="disabled()"
+        [indeterminate]="indeterminate()"
+        (change)="onToggle()"
+      />
+      <span
+        class="checkbox-icon"
+        [innerHTML]="currentIcon()"
+      ></span>
+      <span class="checkbox-label">
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:inline-flex}.checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative;transition:opacity var(--ls-transition-duration)}.checkbox-input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.checkbox-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.checkbox-icon svg{width:100%;height:100%}.checkbox-label{-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-sm .checkbox-icon{width:18px;height:18px}.checkbox-sm .checkbox-label{font-size:.875rem}.checkbox-md .checkbox-icon{width:1.25rem;height:1.25rem}.checkbox-md .checkbox-label{font-size:.875rem}.checkbox-label-end{flex-direction:row}.checkbox-label-start{flex-direction:row-reverse}.checkbox-label-top{flex-direction:column-reverse;align-items:center}.checkbox-label-bottom{flex-direction:column;align-items:center}.checkbox-color-inherit.checkbox-checked .checkbox-icon,.checkbox-color-inherit.checkbox-indeterminate .checkbox-icon{color:inherit}.checkbox-color-primary.checkbox-checked .checkbox-icon,.checkbox-color-primary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-primary)}.checkbox-color-secondary.checkbox-checked .checkbox-icon,.checkbox-color-secondary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-secondary)}.checkbox-color-success.checkbox-checked .checkbox-icon,.checkbox-color-success.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-success)}.checkbox-color-error.checkbox-checked .checkbox-icon,.checkbox-color-error.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-danger)}.checkbox-color-info.checkbox-checked .checkbox-icon,.checkbox-color-info.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-info)}.checkbox-color-warning.checkbox-checked .checkbox-icon,.checkbox-color-warning.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-warning)}.checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:var(--ls-color-dark)}.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-input:focus-visible+.checkbox-icon{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}body.dark .checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:#e0e6ed}body.dark .checkbox-label{color:#e0e6ed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-checkbox', standalone: true, template: `
+    <label [class]="checkboxClasses()">
+      <input
+        type="checkbox"
+        class="checkbox-input"
+        [checked]="_isChecked()"
+        [disabled]="disabled()"
+        [indeterminate]="indeterminate()"
+        (change)="onToggle()"
+      />
+      <span
+        class="checkbox-icon"
+        [innerHTML]="currentIcon()"
+      ></span>
+      <span class="checkbox-label">
+        <ng-content />
+      </span>
+    </label>
+  `, styles: [":host{display:inline-flex}.checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative;transition:opacity var(--ls-transition-duration)}.checkbox-input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.checkbox-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.checkbox-icon svg{width:100%;height:100%}.checkbox-label{-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-sm .checkbox-icon{width:18px;height:18px}.checkbox-sm .checkbox-label{font-size:.875rem}.checkbox-md .checkbox-icon{width:1.25rem;height:1.25rem}.checkbox-md .checkbox-label{font-size:.875rem}.checkbox-label-end{flex-direction:row}.checkbox-label-start{flex-direction:row-reverse}.checkbox-label-top{flex-direction:column-reverse;align-items:center}.checkbox-label-bottom{flex-direction:column;align-items:center}.checkbox-color-inherit.checkbox-checked .checkbox-icon,.checkbox-color-inherit.checkbox-indeterminate .checkbox-icon{color:inherit}.checkbox-color-primary.checkbox-checked .checkbox-icon,.checkbox-color-primary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-primary)}.checkbox-color-secondary.checkbox-checked .checkbox-icon,.checkbox-color-secondary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-secondary)}.checkbox-color-success.checkbox-checked .checkbox-icon,.checkbox-color-success.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-success)}.checkbox-color-error.checkbox-checked .checkbox-icon,.checkbox-color-error.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-danger)}.checkbox-color-info.checkbox-checked .checkbox-icon,.checkbox-color-info.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-info)}.checkbox-color-warning.checkbox-checked .checkbox-icon,.checkbox-color-warning.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-warning)}.checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:var(--ls-color-dark)}.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-input:focus-visible+.checkbox-icon{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}body.dark .checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:#e0e6ed}body.dark .checkbox-label{color:#e0e6ed}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], checkedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedIcon", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class IconButtonComponent {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.clicked = output();
+    }
+    get sanitizedIcon() {
+        return this.sanitizer.bypassSecurityTrustHtml(this.icon());
+    }
+    get buttonClasses() {
+        const classes = ['icon-btn'];
+        classes.push(`icon-btn-${this.color()}`);
+        switch (this.size()) {
+            case 'small':
+                classes.push('icon-btn-sm');
+                break;
+            case 'large':
+                classes.push('icon-btn-lg');
+                break;
+            default:
+                classes.push('icon-btn-md');
+        }
+        return classes.join(' ');
+    }
+    onClick(event) {
+        if (!this.disabled() && !this.loading()) {
+            this.clicked.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IconButtonComponent, isStandalone: true, selector: "ls-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+        <button
+            [type]="type()"
+            [disabled]="disabled() || loading()"
+            [class]="buttonClasses"
+            [attr.aria-label]="ariaLabel()"
+            [attr.aria-busy]="loading() || null"
+            (click)="onClick($event)">
+            @if (loading()) {
+                <svg class="icon-btn-spinner" viewBox="0 0 24 24" fill="none">
+                    <circle
+                        class="icon-btn-spinner-circle"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4" />
+                    <path
+                        class="icon-btn-spinner-path"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+            } @else {
+                <span class="icon-btn-icon" [innerHTML]="sanitizedIcon"></span>
+            }
+        </button>
+    `, isInline: true, styles: [":host{display:inline-flex}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--ls-border-radius-full);background-color:transparent;padding:0;outline:none;cursor:pointer;transition:all var(--ls-transition-duration) ease;box-shadow:none}.icon-btn-sm{width:32px;height:32px}.icon-btn-md{width:40px;height:40px}.icon-btn-lg{width:48px;height:48px}.icon-btn-sm .icon-btn-icon,.icon-btn-sm .icon-btn-spinner{width:18px;height:18px}.icon-btn-md .icon-btn-icon,.icon-btn-md .icon-btn-spinner{width:24px;height:24px}.icon-btn-lg .icon-btn-icon,.icon-btn-lg .icon-btn-spinner{width:28px;height:28px}.icon-btn-primary{color:var(--ls-color-primary)}.icon-btn-primary:hover{background-color:#4361ee1a}.icon-btn-secondary{color:var(--ls-color-secondary)}.icon-btn-secondary:hover{background-color:#805dca1a}.icon-btn-success{color:var(--ls-color-success)}.icon-btn-success:hover{background-color:#00ab551a}.icon-btn-error{color:var(--ls-color-danger)}.icon-btn-error:hover{background-color:#e7515a1a}.icon-btn-warning{color:var(--ls-color-warning)}.icon-btn-warning:hover{background-color:#e2a03f1a}.icon-btn-info{color:var(--ls-color-info)}.icon-btn-info:hover{background-color:#2196f31a}.icon-btn-dark{color:var(--ls-color-dark)}.icon-btn-dark:hover{background-color:#3b3f5c1a}.icon-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.icon-btn[disabled]{cursor:not-allowed;opacity:.6}.icon-btn[disabled]:hover{background-color:transparent}.icon-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-btn-icon>svg,.icon-btn-icon svg{width:100%;height:100%}.icon-btn-spinner{animation:ls-spin 1s linear infinite}.icon-btn-spinner-circle{opacity:.25}.icon-btn-spinner-path{opacity:.75}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-icon-button', standalone: true, template: `
+        <button
+            [type]="type()"
+            [disabled]="disabled() || loading()"
+            [class]="buttonClasses"
+            [attr.aria-label]="ariaLabel()"
+            [attr.aria-busy]="loading() || null"
+            (click)="onClick($event)">
+            @if (loading()) {
+                <svg class="icon-btn-spinner" viewBox="0 0 24 24" fill="none">
+                    <circle
+                        class="icon-btn-spinner-circle"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4" />
+                    <path
+                        class="icon-btn-spinner-path"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+            } @else {
+                <span class="icon-btn-icon" [innerHTML]="sanitizedIcon"></span>
+            }
+        </button>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--ls-border-radius-full);background-color:transparent;padding:0;outline:none;cursor:pointer;transition:all var(--ls-transition-duration) ease;box-shadow:none}.icon-btn-sm{width:32px;height:32px}.icon-btn-md{width:40px;height:40px}.icon-btn-lg{width:48px;height:48px}.icon-btn-sm .icon-btn-icon,.icon-btn-sm .icon-btn-spinner{width:18px;height:18px}.icon-btn-md .icon-btn-icon,.icon-btn-md .icon-btn-spinner{width:24px;height:24px}.icon-btn-lg .icon-btn-icon,.icon-btn-lg .icon-btn-spinner{width:28px;height:28px}.icon-btn-primary{color:var(--ls-color-primary)}.icon-btn-primary:hover{background-color:#4361ee1a}.icon-btn-secondary{color:var(--ls-color-secondary)}.icon-btn-secondary:hover{background-color:#805dca1a}.icon-btn-success{color:var(--ls-color-success)}.icon-btn-success:hover{background-color:#00ab551a}.icon-btn-error{color:var(--ls-color-danger)}.icon-btn-error:hover{background-color:#e7515a1a}.icon-btn-warning{color:var(--ls-color-warning)}.icon-btn-warning:hover{background-color:#e2a03f1a}.icon-btn-info{color:var(--ls-color-info)}.icon-btn-info:hover{background-color:#2196f31a}.icon-btn-dark{color:var(--ls-color-dark)}.icon-btn-dark:hover{background-color:#3b3f5c1a}.icon-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.icon-btn[disabled]{cursor:not-allowed;opacity:.6}.icon-btn[disabled]:hover{background-color:transparent}.icon-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-btn-icon>svg,.icon-btn-icon svg{width:100%;height:100%}.icon-btn-spinner{animation:ls-spin 1s linear infinite}.icon-btn-spinner-circle{opacity:.25}.icon-btn-spinner-path{opacity:.75}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+class RadioButtonComponent {
+    constructor() {
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
+        this.changed = output();
+        this._isChecked = signal(false, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
+        this._isDisabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabledByCva" }] : []));
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this._syncChecked = effect(() => {
+            this._isChecked.set(this.checked());
+        }, ...(ngDevMode ? [{ debugName: "_syncChecked" }] : []));
+        this.radioClasses = computed(() => {
+            const s = this.size() === 'small' ? 'sm' : 'md';
+            const parts = [
+                'radio',
+                `radio-${s}`,
+                `radio-color-${this.color()}`,
+                `radio-label-${this.labelPlacement()}`,
+            ];
+            if (this._isChecked()) {
+                parts.push('radio-checked');
+            }
+            if (this.isEffectivelyDisabled()) {
+                parts.push('radio-disabled');
+            }
+            return parts.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "radioClasses" }] : []));
+        this.isEffectivelyDisabled = computed(() => this.disabled() || this._isDisabledByCva(), ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : []));
+    }
+    onToggle() {
+        if (this.isEffectivelyDisabled()) {
+            return;
+        }
+        const isNext = !this._isChecked();
+        this._isChecked.set(isNext);
+        this.changed.emit(isNext);
+        this._onChange(isNext);
+        this._onTouched();
+    }
+    writeValue(value) {
+        this._isChecked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._isDisabledByCva.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: RadioButtonComponent, isStandalone: true, selector: "ls-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioButtonComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <label [class]="radioClasses()">
+      <button
+        type="button"
+        role="radio"
+        class="radio-indicator"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="isEffectivelyDisabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+      </button>
+      <span class="radio-label">
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:inline-flex}.radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.radio-indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid #c4c4c4;border-radius:50%;background-color:transparent;padding:0;cursor:pointer;transition:border-color var(--ls-transition-duration),background-color var(--ls-transition-duration);outline:none;flex-shrink:0}.radio-indicator:after{content:\"\";position:absolute;border-radius:50%;transform:scale(0);transition:transform var(--ls-transition-duration)}.radio-checked .radio-indicator:after{transform:scale(1)}.radio-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.radio-sm .radio-indicator{width:16px;height:16px}.radio-sm .radio-indicator:after{width:8px;height:8px}.radio-md .radio-indicator{width:20px;height:20px}.radio-md .radio-indicator:after{width:10px;height:10px}.radio-checked.radio-color-inherit .radio-indicator{border-color:inherit}.radio-checked.radio-color-inherit .radio-indicator:after{background-color:inherit}.radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}.radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}.radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}.radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}.radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}.radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}.radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}.radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}.radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}.radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}.radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}.radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}.radio-label-end{flex-direction:row}.radio-label-start{flex-direction:row-reverse}.radio-label-top{flex-direction:column-reverse;align-items:center}.radio-label-bottom{flex-direction:column;align-items:center}.radio-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.radio-disabled .radio-label,.radio-disabled .radio-indicator{cursor:not-allowed}.radio-indicator:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}body.dark .radio-indicator{border-color:#555}body.dark .radio-label{color:#e0e6ed}body.dark .radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}body.dark .radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true,
+                        },
+                    ], selector: 'ls-radio-button', standalone: true, template: `
+    <label [class]="radioClasses()">
+      <button
+        type="button"
+        role="radio"
+        class="radio-indicator"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="isEffectivelyDisabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+      </button>
+      <span class="radio-label">
+        <ng-content />
+      </span>
+    </label>
+  `, styles: [":host{display:inline-flex}.radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.radio-indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid #c4c4c4;border-radius:50%;background-color:transparent;padding:0;cursor:pointer;transition:border-color var(--ls-transition-duration),background-color var(--ls-transition-duration);outline:none;flex-shrink:0}.radio-indicator:after{content:\"\";position:absolute;border-radius:50%;transform:scale(0);transition:transform var(--ls-transition-duration)}.radio-checked .radio-indicator:after{transform:scale(1)}.radio-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.radio-sm .radio-indicator{width:16px;height:16px}.radio-sm .radio-indicator:after{width:8px;height:8px}.radio-md .radio-indicator{width:20px;height:20px}.radio-md .radio-indicator:after{width:10px;height:10px}.radio-checked.radio-color-inherit .radio-indicator{border-color:inherit}.radio-checked.radio-color-inherit .radio-indicator:after{background-color:inherit}.radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}.radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}.radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}.radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}.radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}.radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}.radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}.radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}.radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}.radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}.radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}.radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}.radio-label-end{flex-direction:row}.radio-label-start{flex-direction:row-reverse}.radio-label-top{flex-direction:column-reverse;align-items:center}.radio-label-bottom{flex-direction:column;align-items:center}.radio-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.radio-disabled .radio-label,.radio-disabled .radio-indicator{cursor:not-allowed}.radio-indicator:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}body.dark .radio-indicator{border-color:#555}body.dark .radio-label{color:#e0e6ed}body.dark .radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}body.dark .radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class SliderComponent {
+    constructor() {
+        this._renderer = inject(Renderer2);
+        this._destroyRef = inject(DestroyRef);
+        this._elementRef = inject(ElementRef);
+        this.value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+        this.marks = input(false, ...(ngDevMode ? [{ debugName: "marks" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.valueLabelDisplay = input('auto', ...(ngDevMode ? [{ debugName: "valueLabelDisplay" }] : []));
+        this.onChange = output();
+        this._railRef = viewChild('railRef', ...(ngDevMode ? [{ debugName: "_railRef" }] : []));
+        this._activeThumbIndex = signal(0, ...(ngDevMode ? [{ debugName: "_activeThumbIndex" }] : []));
+        this._isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : []));
+        this._cleanupMouseMove = null;
+        this._cleanupMouseUp = null;
+        this._cleanupTouchMove = null;
+        this._cleanupTouchEnd = null;
+        this._cachedRect = null;
+        this._isRange = computed(() => Array.isArray(this.value()), ...(ngDevMode ? [{ debugName: "_isRange" }] : []));
+        this._values = computed(() => {
+            const v = this.value();
+            if (Array.isArray(v))
+                return [v[0], v[1]];
+            return [this.min(), v];
+        }, ...(ngDevMode ? [{ debugName: "_values" }] : []));
+        this._normalizedMarks = computed(() => {
+            const m = this.marks();
+            if (m === false)
+                return [];
+            if (Array.isArray(m))
+                return m;
+            const marks = [];
+            const s = this.step() ?? 1;
+            for (let v = this.min(); v <= this.max(); v += s) {
+                marks.push({ value: v });
+            }
+            return marks;
+        }, ...(ngDevMode ? [{ debugName: "_normalizedMarks" }] : []));
+        this._trackFillStyle = computed(() => {
+            const [v0, v1] = this._values();
+            const range = this.max() - this.min();
+            if (range <= 0)
+                return { left: '0%', width: '0%' };
+            const left = ((v0 - this.min()) / range) * 100;
+            const width = ((v1 - v0) / range) * 100;
+            if (this._isRange()) {
+                return {
+                    left: `${left}%`,
+                    width: `${width}%`,
+                };
+            }
+            return {
+                left: '0%',
+                width: `${left + width}%`,
+            };
+        }, ...(ngDevMode ? [{ debugName: "_trackFillStyle" }] : []));
+        this._thumbPositions = computed(() => {
+            const [v0, v1] = this._values();
+            const range = this.max() - this.min();
+            if (range <= 0)
+                return this._isRange() ? [0, 0] : [0];
+            if (this._isRange()) {
+                return [
+                    ((v0 - this.min()) / range) * 100,
+                    ((v1 - this.min()) / range) * 100,
+                ];
+            }
+            return [((v1 - this.min()) / range) * 100];
+        }, ...(ngDevMode ? [{ debugName: "_thumbPositions" }] : []));
+        this._containerClasses = computed(() => {
+            const classes = ['ls-slider'];
+            classes.push(`ls-slider--${this.color()}`);
+            classes.push(`ls-slider--${this.size()}`);
+            if (this.disabled())
+                classes.push('ls-slider--disabled');
+            if (this._isDragging())
+                classes.push('ls-slider--active');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "_containerClasses" }] : []));
+        effect(() => {
+            const dv = this.defaultValue();
+            if (dv !== undefined && this.value() === 0) {
+                this.value.set(dv);
+            }
+        }, { allowSignalWrites: true });
+        this._destroyRef.onDestroy(() => {
+            this._removeGlobalListeners();
+        });
+    }
+    _isMarkActive(markValue) {
+        const [v0, v1] = this._values();
+        if (this._isRange()) {
+            return markValue >= v0 && markValue <= v1;
+        }
+        return markValue <= v1;
+    }
+    _getMarkPosition(markValue) {
+        const range = this.max() - this.min();
+        if (range <= 0)
+            return 0;
+        return (((markValue - this.min()) / range) * 100);
+    }
+    _getThumbValue(thumbIndex) {
+        const v = this.value();
+        if (Array.isArray(v)) {
+            return v[thumbIndex];
+        }
+        return v;
+    }
+    _onRailMouseDown(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this._startDrag(event.clientX);
+    }
+    _onThumbMouseDown(event, thumbIndex) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._activeThumbIndex.set(thumbIndex);
+        this._startMouseDrag(event.clientX);
+    }
+    _onRailTouchStart(event) {
+        if (this.disabled())
+            return;
+        if (event.touches.length === 0)
+            return;
+        event.preventDefault();
+        this._startTouchDrag(event.touches[0].clientX);
+    }
+    _onThumbTouchStart(event, thumbIndex) {
+        if (this.disabled())
+            return;
+        if (event.touches.length === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._activeThumbIndex.set(thumbIndex);
+        this._startTouchDrag(event.touches[0].clientX);
+    }
+    _onKeyDown(event, thumbIndex) {
+        if (this.disabled())
+            return;
+        const s = this.step() ?? 1;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                this._adjustThumbValue(thumbIndex, s);
+                handled = true;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                this._adjustThumbValue(thumbIndex, -s);
+                handled = true;
+                break;
+            case 'Home':
+                this._setThumbValue(thumbIndex, this.min());
+                handled = true;
+                break;
+            case 'End':
+                this._setThumbValue(thumbIndex, this.max());
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.onChange.emit(this.value());
+        }
+    }
+    _startDrag(clientX) {
+        this._cacheRect();
+        if (this._isRange() && this._cachedRect) {
+            const clickValue = this._positionToValue(clientX, this._cachedRect);
+            const [v0, v1] = this._values();
+            const dist0 = Math.abs(clickValue - v0);
+            const dist1 = Math.abs(clickValue - v1);
+            this._activeThumbIndex.set(dist0 <= dist1 ? 0 : 1);
+        }
+        this._startMouseDrag(clientX);
+    }
+    _startMouseDrag(clientX) {
+        this._cacheRect();
+        this._isDragging.set(true);
+        this._updateValueFromPosition(clientX);
+        this._cleanupMouseMove =
+            this._renderer.listen('window', 'mousemove', (e) => {
+                this._updateValueFromPosition(e.clientX);
+            });
+        this._cleanupMouseUp = this._renderer.listen('window', 'mouseup', () => {
+            this._endDrag();
+        });
+    }
+    _startTouchDrag(clientX) {
+        this._cacheRect();
+        if (this._isRange() && this._cachedRect) {
+            const clickValue = this._positionToValue(clientX, this._cachedRect);
+            const [v0, v1] = this._values();
+            const dist0 = Math.abs(clickValue - v0);
+            const dist1 = Math.abs(clickValue - v1);
+            this._activeThumbIndex.set(dist0 <= dist1 ? 0 : 1);
+        }
+        this._isDragging.set(true);
+        this._updateValueFromPosition(clientX);
+        this._cleanupTouchMove =
+            this._renderer.listen('window', 'touchmove', (e) => {
+                if (e.touches.length > 0) {
+                    this._updateValueFromPosition(e.touches[0].clientX);
+                }
+            });
+        this._cleanupTouchEnd =
+            this._renderer.listen('window', 'touchend', () => {
+                this._endDrag();
+            });
+    }
+    _endDrag() {
+        this._isDragging.set(false);
+        this._removeGlobalListeners();
+        this._cachedRect = null;
+        this.onChange.emit(this.value());
+    }
+    _updateValueFromPosition(clientX) {
+        if (!this._cachedRect)
+            return;
+        const newValue = this._positionToValue(clientX, this._cachedRect);
+        const idx = this._activeThumbIndex();
+        if (this._isRange()) {
+            const current = this.value();
+            const updated = [...current];
+            updated[idx] = newValue;
+            if (idx === 0 && updated[0] > updated[1]) {
+                updated[0] = updated[1];
+            }
+            if (idx === 1 && updated[1] < updated[0]) {
+                updated[1] = updated[0];
+            }
+            this.value.set(updated);
+        }
+        else {
+            this.value.set(newValue);
+        }
+    }
+    _adjustThumbValue(thumbIndex, delta) {
+        if (this._isRange()) {
+            const current = this.value();
+            const updated = [...current];
+            updated[thumbIndex] = this._quantize(updated[thumbIndex] + delta);
+            if (thumbIndex === 0 &&
+                updated[0] > updated[1]) {
+                updated[0] = updated[1];
+            }
+            if (thumbIndex === 1 &&
+                updated[1] < updated[0]) {
+                updated[1] = updated[0];
+            }
+            this.value.set(updated);
+        }
+        else {
+            this.value.set(this._quantize(this.value() + delta));
+        }
+    }
+    _setThumbValue(thumbIndex, newValue) {
+        if (this._isRange()) {
+            const current = this.value();
+            const updated = [...current];
+            updated[thumbIndex] =
+                this._quantize(newValue);
+            if (thumbIndex === 0 &&
+                updated[0] > updated[1]) {
+                updated[0] = updated[1];
+            }
+            if (thumbIndex === 1 &&
+                updated[1] < updated[0]) {
+                updated[1] = updated[0];
+            }
+            this.value.set(updated);
+        }
+        else {
+            this.value.set(this._quantize(newValue));
+        }
+    }
+    _positionToValue(clientX, rect) {
+        const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        return this._quantize(this.min() +
+            percent * (this.max() - this.min()));
+    }
+    _quantize(raw) {
+        const s = this.step();
+        if (s === null)
+            return Math.min(this.max(), Math.max(this.min(), raw));
+        return Math.min(this.max(), Math.max(this.min(), this.min() +
+            Math.round((raw - this.min()) / s) * s));
+    }
+    _cacheRect() {
+        const railEl = this._railRef();
+        if (railEl) {
+            this._cachedRect =
+                railEl.nativeElement.getBoundingClientRect();
+        }
+    }
+    _removeGlobalListeners() {
+        this._cleanupMouseMove?.();
+        this._cleanupMouseMove = null;
+        this._cleanupMouseUp?.();
+        this._cleanupMouseUp = null;
+        this._cleanupTouchMove?.();
+        this._cleanupTouchMove = null;
+        this._cleanupTouchEnd?.();
+        this._cleanupTouchEnd = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SliderComponent, isStandalone: true, selector: "ls-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueLabelDisplay: { classPropertyName: "valueLabelDisplay", publicName: "valueLabelDisplay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onChange: "onChange" }, viewQueries: [{ propertyName: "_railRef", first: true, predicate: ["railRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [class]="_containerClasses()"
+      (mousedown)="_onRailMouseDown($event)"
+      (touchstart)="_onRailTouchStart($event)"
+      #railRef>
+      <div class="ls-slider__rail"></div>
+
+      <div
+        class="ls-slider__track"
+        [style.left]="_trackFillStyle().left"
+        [style.width]="_trackFillStyle().width">
+      </div>
+
+      @for (mark of _normalizedMarks(); track mark.value) {
+        <span
+          class="ls-slider__mark"
+          [class.ls-slider__mark--active]="
+            _isMarkActive(mark.value)
+          "
+          [style.left]="_getMarkPosition(mark.value) + '%'">
+        </span>
+        @if (mark.label) {
+          <span
+            class="ls-slider__mark-label"
+            [style.left]="
+              _getMarkPosition(mark.value) + '%'
+            ">
+            {{ mark.label }}
+          </span>
+        }
+      }
+
+      @for (pos of _thumbPositions(); track $index) {
+        <span
+          class="ls-slider__thumb"
+          [class.ls-slider__thumb--active]="
+            _isDragging() && _activeThumbIndex() === $index
+          "
+          [style.left]="pos + '%'"
+          [attr.role]="'slider'"
+          [attr.aria-valuenow]="_getThumbValue($index)"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          [attr.aria-disabled]="disabled()"
+          [attr.tabindex]="disabled() ? -1 : 0"
+          (mousedown)="_onThumbMouseDown($event, $index)"
+          (touchstart)="_onThumbTouchStart($event, $index)"
+          (keydown)="_onKeyDown($event, $index)">
+          @if (
+            valueLabelDisplay() === 'on' ||
+            (valueLabelDisplay() === 'auto' &&
+              _isDragging() &&
+              _activeThumbIndex() === $index)
+          ) {
+            <span class="ls-slider__value-label">
+              {{ _getThumbValue($index) }}
+            </span>
+          }
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.ls-slider{position:relative;height:38px;cursor:pointer;padding:15px 0;touch-action:none;-webkit-user-select:none;user-select:none}.ls-slider__rail{position:absolute;top:50%;left:0;width:100%;border-radius:9999px;background:#e0e6ed;transform:translateY(-50%)}.ls-slider__track{position:absolute;top:50%;border-radius:9999px;background:var(--ls-slider-main-color);transform:translateY(-50%)}.ls-slider__thumb{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ls-slider-main-color);box-shadow:0 1px 3px #0003,0 0 0 0 transparent;cursor:grab;transform:translate(-50%,-50%);transition:box-shadow .15s ease,width .15s ease,height .15s ease}.ls-slider__thumb:hover{box-shadow:0 1px 3px #0003,0 0 0 8px color-mix(in srgb,var(--ls-slider-main-color) 16%,transparent)}.ls-slider__thumb:focus-visible{outline:2px solid var(--ls-slider-main-color);outline-offset:2px}.ls-slider__thumb--active{cursor:grabbing;box-shadow:0 1px 3px #0003,0 0 0 12px color-mix(in srgb,var(--ls-slider-main-color) 24%,transparent)}.ls-slider__value-label{position:absolute;bottom:calc(100% + 6px);left:50%;padding:2px 8px;border-radius:4px;background:var(--ls-color-dark, #3b3f5c);color:#fff;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;transform:translate(-50%);pointer-events:none}.ls-slider__mark{position:absolute;top:50%;border-radius:50%;background:#bfc9d4;transform:translate(-50%,-50%)}.ls-slider__mark--active{background:var(--ls-slider-main-color)}.ls-slider__mark-label{position:absolute;top:calc(50% + 14px);color:#888ea8;font-size:11px;white-space:nowrap;transform:translate(-50%)}.ls-slider--medium .ls-slider__rail,.ls-slider--medium .ls-slider__track{height:4px}.ls-slider--medium .ls-slider__thumb{width:20px;height:20px}.ls-slider--medium .ls-slider__mark{width:4px;height:4px}.ls-slider--medium .ls-slider__value-label{font-size:12px}.ls-slider--small .ls-slider__rail,.ls-slider--small .ls-slider__track{height:2px}.ls-slider--small .ls-slider__thumb{width:12px;height:12px}.ls-slider--small .ls-slider__mark{width:3px;height:3px}.ls-slider--small .ls-slider__value-label{font-size:10px}.ls-slider--primary{--ls-slider-main-color: var(--ls-color-primary)}.ls-slider--secondary{--ls-slider-main-color: var(--ls-color-secondary)}.ls-slider--success{--ls-slider-main-color: var(--ls-color-success)}.ls-slider--error{--ls-slider-main-color: var(--ls-color-error)}.ls-slider--info{--ls-slider-main-color: var(--ls-color-info)}.ls-slider--warning{--ls-slider-main-color: var(--ls-color-warning)}.ls-slider--disabled{opacity:.5;cursor:default;pointer-events:none}.ls-slider--active{cursor:grabbing}body.dark .ls-slider__rail{background:#ffffff26}body.dark .ls-slider__mark{background:#ffffff4d}body.dark .ls-slider__mark--active{background:var(--ls-slider-main-color)}body.dark .ls-slider__mark-label{color:#888ea8}body.dark .ls-slider__value-label{background:#1b2e4b;color:#e0e6ed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-slider', standalone: true, template: `
+    <div
+      [class]="_containerClasses()"
+      (mousedown)="_onRailMouseDown($event)"
+      (touchstart)="_onRailTouchStart($event)"
+      #railRef>
+      <div class="ls-slider__rail"></div>
+
+      <div
+        class="ls-slider__track"
+        [style.left]="_trackFillStyle().left"
+        [style.width]="_trackFillStyle().width">
+      </div>
+
+      @for (mark of _normalizedMarks(); track mark.value) {
+        <span
+          class="ls-slider__mark"
+          [class.ls-slider__mark--active]="
+            _isMarkActive(mark.value)
+          "
+          [style.left]="_getMarkPosition(mark.value) + '%'">
+        </span>
+        @if (mark.label) {
+          <span
+            class="ls-slider__mark-label"
+            [style.left]="
+              _getMarkPosition(mark.value) + '%'
+            ">
+            {{ mark.label }}
+          </span>
+        }
+      }
+
+      @for (pos of _thumbPositions(); track $index) {
+        <span
+          class="ls-slider__thumb"
+          [class.ls-slider__thumb--active]="
+            _isDragging() && _activeThumbIndex() === $index
+          "
+          [style.left]="pos + '%'"
+          [attr.role]="'slider'"
+          [attr.aria-valuenow]="_getThumbValue($index)"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          [attr.aria-disabled]="disabled()"
+          [attr.tabindex]="disabled() ? -1 : 0"
+          (mousedown)="_onThumbMouseDown($event, $index)"
+          (touchstart)="_onThumbTouchStart($event, $index)"
+          (keydown)="_onKeyDown($event, $index)">
+          @if (
+            valueLabelDisplay() === 'on' ||
+            (valueLabelDisplay() === 'auto' &&
+              _isDragging() &&
+              _activeThumbIndex() === $index)
+          ) {
+            <span class="ls-slider__value-label">
+              {{ _getThumbValue($index) }}
+            </span>
+          }
+        </span>
+      }
+    </div>
+  `, styles: [":host{display:block}.ls-slider{position:relative;height:38px;cursor:pointer;padding:15px 0;touch-action:none;-webkit-user-select:none;user-select:none}.ls-slider__rail{position:absolute;top:50%;left:0;width:100%;border-radius:9999px;background:#e0e6ed;transform:translateY(-50%)}.ls-slider__track{position:absolute;top:50%;border-radius:9999px;background:var(--ls-slider-main-color);transform:translateY(-50%)}.ls-slider__thumb{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ls-slider-main-color);box-shadow:0 1px 3px #0003,0 0 0 0 transparent;cursor:grab;transform:translate(-50%,-50%);transition:box-shadow .15s ease,width .15s ease,height .15s ease}.ls-slider__thumb:hover{box-shadow:0 1px 3px #0003,0 0 0 8px color-mix(in srgb,var(--ls-slider-main-color) 16%,transparent)}.ls-slider__thumb:focus-visible{outline:2px solid var(--ls-slider-main-color);outline-offset:2px}.ls-slider__thumb--active{cursor:grabbing;box-shadow:0 1px 3px #0003,0 0 0 12px color-mix(in srgb,var(--ls-slider-main-color) 24%,transparent)}.ls-slider__value-label{position:absolute;bottom:calc(100% + 6px);left:50%;padding:2px 8px;border-radius:4px;background:var(--ls-color-dark, #3b3f5c);color:#fff;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;transform:translate(-50%);pointer-events:none}.ls-slider__mark{position:absolute;top:50%;border-radius:50%;background:#bfc9d4;transform:translate(-50%,-50%)}.ls-slider__mark--active{background:var(--ls-slider-main-color)}.ls-slider__mark-label{position:absolute;top:calc(50% + 14px);color:#888ea8;font-size:11px;white-space:nowrap;transform:translate(-50%)}.ls-slider--medium .ls-slider__rail,.ls-slider--medium .ls-slider__track{height:4px}.ls-slider--medium .ls-slider__thumb{width:20px;height:20px}.ls-slider--medium .ls-slider__mark{width:4px;height:4px}.ls-slider--medium .ls-slider__value-label{font-size:12px}.ls-slider--small .ls-slider__rail,.ls-slider--small .ls-slider__track{height:2px}.ls-slider--small .ls-slider__thumb{width:12px;height:12px}.ls-slider--small .ls-slider__mark{width:3px;height:3px}.ls-slider--small .ls-slider__value-label{font-size:10px}.ls-slider--primary{--ls-slider-main-color: var(--ls-color-primary)}.ls-slider--secondary{--ls-slider-main-color: var(--ls-color-secondary)}.ls-slider--success{--ls-slider-main-color: var(--ls-color-success)}.ls-slider--error{--ls-slider-main-color: var(--ls-color-error)}.ls-slider--info{--ls-slider-main-color: var(--ls-color-info)}.ls-slider--warning{--ls-slider-main-color: var(--ls-color-warning)}.ls-slider--disabled{opacity:.5;cursor:default;pointer-events:none}.ls-slider--active{cursor:grabbing}body.dark .ls-slider__rail{background:#ffffff26}body.dark .ls-slider__mark{background:#ffffff4d}body.dark .ls-slider__mark--active{background:var(--ls-slider-main-color)}body.dark .ls-slider__mark-label{color:#888ea8}body.dark .ls-slider__value-label{background:#1b2e4b;color:#e0e6ed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueLabelDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelDisplay", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], _railRef: [{ type: i0.ViewChild, args: ['railRef', { isSignal: true }] }] } });
+
+const CHECK_SVG = '<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M3.5 6L5.5 8L8.5 4" stroke="currentColor" ' +
+    'stroke-width="2" stroke-linecap="round" ' +
+    'stroke-linejoin="round"/></svg>';
+const CLOSE_SVG = '<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M3.5 3.5L8.5 8.5M8.5 3.5L3.5 8.5" ' +
+    'stroke="currentColor" stroke-width="2" ' +
+    'stroke-linecap="round" stroke-linejoin="round"/></svg>';
+class SwitchComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.defaultChecked = input(false, ...(ngDevMode ? [{ debugName: "defaultChecked" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.icon = input(false, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
+        this.changed = output();
+        this._isChecked = signal(false, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
+        this._isFirstSync = true;
+        this._syncChecked = effect(() => {
+            const isChecked = this.checked();
+            if (this._isFirstSync) {
+                this._isFirstSync = false;
+                this._isChecked.set(isChecked || this.defaultChecked());
+            }
+            else {
+                this._isChecked.set(isChecked);
+            }
+        }, ...(ngDevMode ? [{ debugName: "_syncChecked" }] : []));
+        this.switchClasses = computed(() => {
+            const s = this.size() === 'small' ? 'sm' : 'md';
+            const parts = [
+                'switch',
+                `switch-${s}`,
+                `switch-color-${this.color()}`,
+                `switch-${this.variant()}`,
+                `switch-label-${this.labelPlacement()}`,
+            ];
+            if (this._isChecked()) {
+                parts.push('switch-checked');
+            }
+            if (this.disabled()) {
+                parts.push('switch-disabled');
+            }
+            return parts.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "switchClasses" }] : []));
+        this.currentIcon = computed(() => {
+            const svg = this._isChecked()
+                ? CHECK_SVG
+                : CLOSE_SVG;
+            return this._sanitizer.bypassSecurityTrustHtml(svg);
+        }, ...(ngDevMode ? [{ debugName: "currentIcon" }] : []));
+    }
+    onToggle() {
+        if (this.disabled()) {
+            return;
+        }
+        const isNext = !this._isChecked();
+        this._isChecked.set(isNext);
+        this.changed.emit(isNext);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SwitchComponent, isStandalone: true, selector: "ls-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "defaultChecked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: `
+    <label [class]="switchClasses()">
+      <button
+        type="button"
+        role="switch"
+        class="switch-track"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="disabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+        <span class="switch-thumb">
+          @if (icon()) {
+            <span
+              class="switch-icon"
+              [innerHTML]="currentIcon()"
+            ></span>
+          }
+        </span>
+      </button>
+      <span class="switch-label">
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:inline-flex}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.switch-track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:999px;padding:2px;cursor:pointer;transition:background-color var(--ls-transition-duration),border-color var(--ls-transition-duration);outline:none;flex-shrink:0}.switch-thumb{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;transition:transform var(--ls-transition-duration);box-shadow:0 1px 3px #0003}.switch-icon{display:flex;align-items:center;justify-content:center;line-height:0;color:#999}.switch-icon svg{width:100%;height:100%}.switch-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.switch-sm .switch-track{width:34px;height:20px}.switch-sm .switch-thumb{width:16px;height:16px}.switch-sm .switch-icon{width:10px;height:10px}.switch-sm.switch-checked .switch-thumb{transform:translate(14px)}.switch-md .switch-track{width:42px;height:24px}.switch-md .switch-thumb{width:20px;height:20px}.switch-md .switch-icon{width:12px;height:12px}.switch-md.switch-checked .switch-thumb{transform:translate(18px)}.switch-solid .switch-track{background-color:#c4c4c4}.switch-outlined .switch-track{background-color:transparent;border:2px solid #999}.switch-outlined .switch-track{padding:0}.switch-outlined .switch-thumb{background-color:#999}.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid.switch-color-inherit .switch-track{background-color:inherit}.switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-track{border-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-thumb{background-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid .switch-icon{color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-icon{color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-icon{color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-icon{color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-icon{color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-icon{color:var(--ls-color-warning)}.switch-checked.switch-solid.switch-color-inherit .switch-icon{color:inherit}.switch-label-end{flex-direction:row}.switch-label-start{flex-direction:row-reverse}.switch-label-top{flex-direction:column-reverse;align-items:center}.switch-label-bottom{flex-direction:column;align-items:center}.switch-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.switch-disabled .switch-label,.switch-disabled .switch-track{cursor:not-allowed}.switch-track:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:999px}body.dark .switch-solid .switch-track{background-color:#3b3f5c}body.dark .switch-outlined .switch-track{border-color:#555}body.dark .switch-outlined .switch-thumb{background-color:#888}body.dark .switch-label{color:#e0e6ed}body.dark .switch-icon{color:#bbb}body.dark .switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-switch', standalone: true, template: `
+    <label [class]="switchClasses()">
+      <button
+        type="button"
+        role="switch"
+        class="switch-track"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="disabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+        <span class="switch-thumb">
+          @if (icon()) {
+            <span
+              class="switch-icon"
+              [innerHTML]="currentIcon()"
+            ></span>
+          }
+        </span>
+      </button>
+      <span class="switch-label">
+        <ng-content />
+      </span>
+    </label>
+  `, styles: [":host{display:inline-flex}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.switch-track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:999px;padding:2px;cursor:pointer;transition:background-color var(--ls-transition-duration),border-color var(--ls-transition-duration);outline:none;flex-shrink:0}.switch-thumb{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;transition:transform var(--ls-transition-duration);box-shadow:0 1px 3px #0003}.switch-icon{display:flex;align-items:center;justify-content:center;line-height:0;color:#999}.switch-icon svg{width:100%;height:100%}.switch-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.switch-sm .switch-track{width:34px;height:20px}.switch-sm .switch-thumb{width:16px;height:16px}.switch-sm .switch-icon{width:10px;height:10px}.switch-sm.switch-checked .switch-thumb{transform:translate(14px)}.switch-md .switch-track{width:42px;height:24px}.switch-md .switch-thumb{width:20px;height:20px}.switch-md .switch-icon{width:12px;height:12px}.switch-md.switch-checked .switch-thumb{transform:translate(18px)}.switch-solid .switch-track{background-color:#c4c4c4}.switch-outlined .switch-track{background-color:transparent;border:2px solid #999}.switch-outlined .switch-track{padding:0}.switch-outlined .switch-thumb{background-color:#999}.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid.switch-color-inherit .switch-track{background-color:inherit}.switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-track{border-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-thumb{background-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid .switch-icon{color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-icon{color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-icon{color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-icon{color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-icon{color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-icon{color:var(--ls-color-warning)}.switch-checked.switch-solid.switch-color-inherit .switch-icon{color:inherit}.switch-label-end{flex-direction:row}.switch-label-start{flex-direction:row-reverse}.switch-label-top{flex-direction:column-reverse;align-items:center}.switch-label-bottom{flex-direction:column;align-items:center}.switch-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.switch-disabled .switch-label,.switch-disabled .switch-track{cursor:not-allowed}.switch-track:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:999px}body.dark .switch-solid .switch-track{background-color:#3b3f5c}body.dark .switch-outlined .switch-track{border-color:#555}body.dark .switch-outlined .switch-thumb{background-color:#888}body.dark .switch-label{color:#e0e6ed}body.dark .switch-icon{color:#bbb}body.dark .switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent, CheckboxComponent, IconButtonComponent, RadioButtonComponent, SliderComponent, SwitchComponent };
+//# sourceMappingURL=lumston-ds-angular-src-inputs.mjs.map