@semantic-components/ui-lab 0.74.0 → 0.75.0

package/fesm2022/semantic-components-ui-lab.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, output, signal, effect, ElementRef, InjectionToken, model, viewChild, booleanAttribute, Directive, PLATFORM_ID, afterNextRender, afterRenderEffect, ViewChild, ViewContainerRef, contentChild, Injector, runInInjectionContext, contentChildren, untracked, Injectable, TemplateRef } from '@angular/core';
 import { RouterOutlet, Router, NavigationEnd } from '@angular/router';
 import { cn, ScSlider, buttonVariants, ScCalendar, SC_FIELD, SC_TIME_PICKER, ScPopoverProvider, ScButton, ScPopoverTrigger, ScPopoverPortal, ScPopover } from '@semantic-components/ui';
-import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiPipetteIcon, SiSearchIcon, SiChevronRightIcon, SiCheckIcon, SiCopyIcon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiLoaderCircleIcon, SiPlusIcon, SiZoomOutIcon, SiZoomInIcon, SiMinimize2Icon, SiMinusIcon, SiTriangleAlertIcon, SiCircleXIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiTrash2Icon, SiBellIcon, SiEyeIcon, SiEyeOffIcon, SiCircleIcon, SiFileTextIcon, SiRotateCcwIcon, SiRotateCwIcon, SiDownloadIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiPhoneIcon, SiGripVerticalIcon, SiClockIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
+import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiPipetteIcon, SiSearchIcon, SiChevronRightIcon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiLoaderCircleIcon, SiPlusIcon, SiZoomOutIcon, SiZoomInIcon, SiMinimize2Icon, SiCheckIcon, SiMinusIcon, SiTriangleAlertIcon, SiCircleXIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiTrash2Icon, SiBellIcon, SiEyeIcon, SiEyeOffIcon, SiCircleIcon, SiFileTextIcon, SiRotateCcwIcon, SiRotateCwIcon, SiDownloadIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiPhoneIcon, SiGripVerticalIcon, SiClockIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/aria/combobox';
 import { Combobox, ComboboxInput, ComboboxPopupContainer, ComboboxDialog } from '@angular/aria/combobox';
@@ -4147,252 +4147,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], propDecorators: { contentChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScContextMenuContent), { isSignal: true }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class ScCopyButton {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    timeout = input(2000, ...(ngDevMode ? [{ debugName: "timeout" }] : []));
-    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('icon', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    copySuccess = output();
-    copyError = output();
-    copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : []));
-    timeoutId = null;
-    class = computed(() => cn('inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:pointer-events-none disabled:opacity-50', 
-    // Variants
-    this.variant() === 'default' &&
-        'bg-primary text-primary-foreground shadow hover:bg-primary/90', this.variant() === 'ghost' &&
-        'hover:bg-accent hover:text-accent-foreground', this.variant() === 'outline' &&
-        'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', 
-    // Sizes
-    this.size() === 'sm' && 'h-8 px-3 text-xs', this.size() === 'default' && 'h-9 px-4 py-2 text-sm', this.size() === 'lg' && 'h-10 px-8 text-sm', this.size() === 'icon' && 'size-9', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    iconClass = computed(() => cn(this.size() === 'sm' && 'size-3.5', this.size() === 'default' && 'size-4', this.size() === 'lg' && 'size-5', this.size() === 'icon' && 'size-4'), ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
-    ariaLabel = computed(() => this.copied() ? 'Copied to clipboard' : 'Copy to clipboard', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    async copy() {
-        if (this.disabled() || this.copied())
-            return;
-        try {
-            await navigator.clipboard.writeText(this.value());
-            this.copied.set(true);
-            this.copySuccess.emit(this.value());
-            // Clear any existing timeout
-            if (this.timeoutId) {
-                clearTimeout(this.timeoutId);
-            }
-            // Reset after timeout
-            this.timeoutId = setTimeout(() => {
-                this.copied.set(false);
-                this.timeoutId = null;
-            }, this.timeout());
-        }
-        catch (error) {
-            this.copyError.emit(error instanceof Error ? error : new Error('Failed to copy'));
-        }
-    }
-    reset() {
-        if (this.timeoutId) {
-            clearTimeout(this.timeoutId);
-            this.timeoutId = null;
-        }
-        this.copied.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ScCopyButton, isStandalone: true, selector: "button[scCopyButton]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copySuccess: "copySuccess", copyError: "copyError" }, host: { attributes: { "data-slot": "copy-button", "type": "button" }, listeners: { "click": "copy()" }, properties: { "class": "class()", "disabled": "disabled()", "attr.data-copied": "copied() || null", "attr.aria-label": "ariaLabel()" } }, exportAs: ["scCopyButton"], ngImport: i0, template: `
-    @if (copied()) {
-      <svg siCheckIcon [class]="iconClass()" class="text-green-500"></svg>
-    } @else {
-      <svg siCopyIcon [class]="iconClass()"></svg>
-    }
-    <ng-content />
-  `, isInline: true, dependencies: [{ kind: "component", type: SiCheckIcon, selector: "svg[siCheckIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiCopyIcon, selector: "svg[siCopyIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButton, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[scCopyButton]',
-                    exportAs: 'scCopyButton',
-                    imports: [SiCheckIcon, SiCopyIcon],
-                    template: `
-    @if (copied()) {
-      <svg siCheckIcon [class]="iconClass()" class="text-green-500"></svg>
-    } @else {
-      <svg siCopyIcon [class]="iconClass()"></svg>
-    }
-    <ng-content />
-  `,
-                    host: {
-                        'data-slot': 'copy-button',
-                        type: 'button',
-                        '[class]': 'class()',
-                        '[disabled]': 'disabled()',
-                        '[attr.data-copied]': 'copied() || null',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '(click)': 'copy()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], copySuccess: [{ type: i0.Output, args: ["copySuccess"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
-
-class ScCopyButtonWithText {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    timeout = input(2000, ...(ngDevMode ? [{ debugName: "timeout" }] : []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    copyText = input('Copy', ...(ngDevMode ? [{ debugName: "copyText" }] : []));
-    copiedText = input('Copied!', ...(ngDevMode ? [{ debugName: "copiedText" }] : []));
-    copySuccess = output();
-    copyError = output();
-    class = computed(() => cn('inline-block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButtonWithText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScCopyButtonWithText, isStandalone: true, selector: "[scCopyButtonWithText]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, copyText: { classPropertyName: "copyText", publicName: "copyText", isSignal: true, isRequired: false, transformFunction: null }, copiedText: { classPropertyName: "copiedText", publicName: "copiedText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copySuccess: "copySuccess", copyError: "copyError" }, host: { attributes: { "data-slot": "copy-button-with-text" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <button
-      scCopyButton
-      [value]="value()"
-      [disabled]="disabled()"
-      [timeout]="timeout()"
-      [variant]="variant()"
-      [size]="size()"
-      (copySuccess)="copySuccess.emit($event)"
-      (copyError)="copyError.emit($event)"
-      #copyBtn="scCopyButton"
-    >
-      {{ copyBtn.copied() ? copiedText() : copyText() }}
-    </button>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScCopyButton, selector: "button[scCopyButton]", inputs: ["class", "value", "disabled", "timeout", "variant", "size"], outputs: ["copySuccess", "copyError"], exportAs: ["scCopyButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyButtonWithText, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scCopyButtonWithText]',
-                    template: `
-    <button
-      scCopyButton
-      [value]="value()"
-      [disabled]="disabled()"
-      [timeout]="timeout()"
-      [variant]="variant()"
-      [size]="size()"
-      (copySuccess)="copySuccess.emit($event)"
-      (copyError)="copyError.emit($event)"
-      #copyBtn="scCopyButton"
-    >
-      {{ copyBtn.copied() ? copiedText() : copyText() }}
-    </button>
-  `,
-                    host: {
-                        'data-slot': 'copy-button-with-text',
-                        '[class]': 'class()',
-                    },
-                    imports: [ScCopyButton],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], copyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyText", required: false }] }], copiedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedText", required: false }] }], copySuccess: [{ type: i0.Output, args: ["copySuccess"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
-
-class ScCopyInput {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    readonly = input(true, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-    class = computed(() => cn('inline-block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    inputClass = computed(() => cn('flex h-9 w-full rounded-md rounded-r-none border border-input bg-transparent px-3 py-1 text-sm shadow-sm', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', this.readonly() && 'bg-muted text-muted-foreground'), ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScCopyInput, isStandalone: true, selector: "[scCopyInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "copy-input" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <div class="flex">
-      <input
-        type="text"
-        [value]="value()"
-        [readonly]="readonly()"
-        [class]="inputClass()"
-      />
-      <button
-        scCopyButton
-        [value]="value()"
-        [variant]="'outline'"
-        [size]="'icon'"
-        class="rounded-l-none border-l-0"
-      ></button>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScCopyButton, selector: "button[scCopyButton]", inputs: ["class", "value", "disabled", "timeout", "variant", "size"], outputs: ["copySuccess", "copyError"], exportAs: ["scCopyButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scCopyInput]',
-                    template: `
-    <div class="flex">
-      <input
-        type="text"
-        [value]="value()"
-        [readonly]="readonly()"
-        [class]="inputClass()"
-      />
-      <button
-        scCopyButton
-        [value]="value()"
-        [variant]="'outline'"
-        [size]="'icon'"
-        class="rounded-l-none border-l-0"
-      ></button>
-    </div>
-  `,
-                    host: {
-                        'data-slot': 'copy-input',
-                        '[class]': 'class()',
-                    },
-                    imports: [ScCopyButton],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
-
-class ScCopyCode {
-    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    class = computed(() => cn('block', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    preClass = computed(() => cn('rounded-lg bg-muted p-4 pr-12 overflow-x-auto text-sm', 'font-mono'), ...(ngDevMode ? [{ debugName: "preClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScCopyCode, isStandalone: true, selector: "[scCopyCode]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "copy-code" }, properties: { "class": "class()" } }, ngImport: i0, template: `
-    <div class="relative">
-      <pre [class]="preClass()"><code><ng-content /></code></pre>
-      <button
-        scCopyButton
-        [value]="value()"
-        class="absolute top-2 right-2"
-        [variant]="'ghost'"
-        [size]="'icon'"
-      ></button>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ScCopyButton, selector: "button[scCopyButton]", inputs: ["class", "value", "disabled", "timeout", "variant", "size"], outputs: ["copySuccess", "copyError"], exportAs: ["scCopyButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScCopyCode, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[scCopyCode]',
-                    template: `
-    <div class="relative">
-      <pre [class]="preClass()"><code><ng-content /></code></pre>
-      <button
-        scCopyButton
-        [value]="value()"
-        class="absolute top-2 right-2"
-        [variant]="'ghost'"
-        [size]="'icon'"
-      ></button>
-    </div>
-  `,
-                    host: {
-                        'data-slot': 'copy-code',
-                        '[class]': 'class()',
-                    },
-                    imports: [ScCopyButton],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
-
 class ScCountdown {
     destroyRef = inject(DestroyRef);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
@@ -20013,17 +19767,7 @@ class ScSpotlight {
             class="bg-background/90 hover:bg-background text-foreground absolute top-4 right-4 z-10 rounded-full p-2 shadow-lg"
             aria-label="Close spotlight"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-5"
-            >
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
+            <svg siXIcon class="size-5"></svg>
           </button>
         }
 
@@ -20039,12 +19783,13 @@ class ScSpotlight {
         }
       </div>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSpotlight, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-spotlight',
+                    imports: [SiXIcon],
                     template: `
     @if (isActive()) {
       <div
@@ -20117,17 +19862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             class="bg-background/90 hover:bg-background text-foreground absolute top-4 right-4 z-10 rounded-full p-2 shadow-lg"
             aria-label="Close spotlight"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              class="size-5"
-            >
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
+            <svg siXIcon class="size-5"></svg>
           </button>
         }
 
@@ -24749,5 +24484,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthLayout, CHART_COLORS, COUNTRIES, DEFAULT_BREAKPOINTS, DEFAULT_CONFETTI_OPTIONS, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_SEARCH_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_CHART, SC_COLOR_PICKER, SC_DATA_TABLE, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_LANGUAGE_CONFIG, SC_LIGHTBOX, SC_NOTIFICATION_CENTER, SC_NUMBER_FIELD, SC_PASSWORD_FIELD, SC_PDF_VIEWER, SC_RATING_FIELD, SC_RATING_ITEM_GROUP, SC_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScButtonPattern, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCombobox, ScComboboxEmpty, ScComboboxIcon, ScComboboxInput, ScComboboxItem, ScComboboxItemIndicator, ScComboboxList, ScComboboxPortal, ScComboboxTrigger, ScCommand, ScCommandEmpty, ScCommandGroup, ScCommandGroupHeading, ScCommandInput, ScCommandItem, ScCommandList, ScCommandSeparator, ScCommandShortcut, ScConfetti, ScContextMenu, ScContextMenuContent, ScContextMenuItem, ScContextMenuLabel, ScContextMenuSeparator, ScContextMenuShortcut, ScContextMenuSub, ScContextMenuSubContent, ScContextMenuSubTrigger, ScContextMenuTrigger, ScCopyButton, ScCopyButtonWithText, ScCopyCode, ScCopyInput, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScImageAnnotator, ScImageCompare, ScImageCompareAfter, ScImageCompareArea, ScImageCompareBefore, ScImageCompareLabel, ScImageCompareSlider, ScImageCropper, ScImageCropperAspectRatio, ScImageCropperCanvas, ScImageCropperDragRegion, ScImageCropperFileInput, ScImageCropperFlipH, ScImageCropperFlipV, ScImageCropperGrid, ScImageCropperHandle, ScImageCropperImage, ScImageCropperOverlay, ScImageCropperPreview, ScImageCropperReset, ScImageCropperRotateLeft, ScImageCropperRotateRight, ScImageCropperSelection, ScImageCropperZoomIn, ScImageCropperZoomOut, ScImageCropperZoomSlider, ScInfiniteScroll, ScInfiniteScrollEnd, ScInfiniteScrollLoader, ScKanbanBoard, ScKanbanCard, ScKanbanColumn, ScLanguageButton, ScLanguageSelect, ScLanguageService, ScLanguageToggle, ScLightboxDirective as ScLightbox, ScLightboxContainer, ScLightboxDirective, ScLightboxGallery, ScLightboxTrigger, ScLineChart, ScMarquee, ScMarqueeClone, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScMultiSelect, ScNativeCheckbox, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, ScOptField, ScOptFieldSeparator, ScOptFieldSlot, ScOptFieldSlotCaret, ScOptFieldSlotChar, ScOptFieldSlotGroup, ScOptFieldSlotInput, ScOrgChart, ScOrgChartNode, ScPasswordField, ScPasswordFieldInput, ScPasswordFieldInputGroup, ScPasswordFieldRequirements, ScPasswordFieldStrength, ScPasswordFieldStrengthBar, ScPasswordFieldToggle, ScPdfViewer, ScPdfViewerContainer, ScPdfViewerContent, ScPdfViewerDownload, ScPdfViewerEmpty, ScPdfViewerError, ScPdfViewerFullscreen, ScPdfViewerLoading, ScPdfViewerNav, ScPdfViewerNextPage, ScPdfViewerPageInfo, ScPdfViewerPrevPage, ScPdfViewerPrint, ScPdfViewerRetry, ScPdfViewerRoot, ScPdfViewerRotateLeft, ScPdfViewerRotateRight, ScPdfViewerSeparator, ScPdfViewerSpacer, ScPdfViewerToolbar$1 as ScPdfViewerToolbar, ScPdfViewerToolbar as ScPdfViewerToolbarLegacy, ScPdfViewerZoom, ScPdfViewerZoomIn, ScPdfViewerZoomOut, ScPdfViewerZoomSelect, ScPhoneInput, ScPhoneInputSimple, ScPieChart, ScQrCode, ScQrCodeDownload, ScRatingField, ScRatingFieldItem, ScRatingItemGroup, ScSearchInput, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, ScSplitButton, ScSpotlight, ScSpotlightActions, ScSpotlightDescription, ScSpotlightTitle, ScStackedLayout, ScStatCard, ScStatCardChange, ScStatCardDescription, ScStatCardIcon, ScStatCardLabel, ScStatCardValue, ScStepper, ScStepperContent, ScStepperDescription, ScStepperItem, ScStepperList, ScStepperNext, ScStepperPrevious, ScStepperSeparator, ScStepperTitle, ScStepperTrigger, ScTagInput, ScTagInputClear, ScTagInputCount, ScTagInputField, ScTagInputTag, ScTheme, ScThemeField, ScThemeSelect, ScThemeToggle, ScTimePickerClock, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTimezoneBadge, ScTimezoneButton, ScTimezoneDisplay, ScTimezoneSelect, ScTimezoneService, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, ScVideoPlayerVideo, ScVideoPlayerVolume, ScVirtualList, ScVirtualScroll, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff, getCountryByCode, getCountryByDialCode, sizeStyles$1 as sizeStyles, variantStyles$1 as variantStyles };
+export { AuthLayout, CHART_COLORS, COUNTRIES, DEFAULT_BREAKPOINTS, DEFAULT_CONFETTI_OPTIONS, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_SEARCH_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_CHART, SC_COLOR_PICKER, SC_DATA_TABLE, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_LANGUAGE_CONFIG, SC_LIGHTBOX, SC_NOTIFICATION_CENTER, SC_NUMBER_FIELD, SC_PASSWORD_FIELD, SC_PDF_VIEWER, SC_RATING_FIELD, SC_RATING_ITEM_GROUP, SC_SIGNATURE_PAD, SC_SORTABLE_ITEM, SC_SORTABLE_LIST, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TIMEZONE_CONFIG, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScAutoMarquee, ScBarChart, ScBarcodeScanner, ScBarcodeScannerSimple, ScButtonPattern, ScChartContainer, ScChartLegend, ScChartTooltip, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCombobox, ScComboboxEmpty, ScComboboxIcon, ScComboboxInput, ScComboboxItem, ScComboboxItemIndicator, ScComboboxList, ScComboboxPortal, ScComboboxTrigger, ScCommand, ScCommandEmpty, ScCommandGroup, ScCommandGroupHeading, ScCommandInput, ScCommandItem, ScCommandList, ScCommandSeparator, ScCommandShortcut, ScConfetti, ScContextMenu, ScContextMenuContent, ScContextMenuItem, ScContextMenuLabel, ScContextMenuSeparator, ScContextMenuShortcut, ScContextMenuSub, ScContextMenuSubContent, ScContextMenuSubTrigger, ScContextMenuTrigger, ScCountdown, ScCountdownSimple, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScDonutChart, ScEmojiPicker, ScEmojiPickerTrigger, ScImageAnnotator, ScImageCompare, ScImageCompareAfter, ScImageCompareArea, ScImageCompareBefore, ScImageCompareLabel, ScImageCompareSlider, ScImageCropper, ScImageCropperAspectRatio, ScImageCropperCanvas, ScImageCropperDragRegion, ScImageCropperFileInput, ScImageCropperFlipH, ScImageCropperFlipV, ScImageCropperGrid, ScImageCropperHandle, ScImageCropperImage, ScImageCropperOverlay, ScImageCropperPreview, ScImageCropperReset, ScImageCropperRotateLeft, ScImageCropperRotateRight, ScImageCropperSelection, ScImageCropperZoomIn, ScImageCropperZoomOut, ScImageCropperZoomSlider, ScInfiniteScroll, ScInfiniteScrollEnd, ScInfiniteScrollLoader, ScKanbanBoard, ScKanbanCard, ScKanbanColumn, ScLanguageButton, ScLanguageSelect, ScLanguageService, ScLanguageToggle, ScLightboxDirective as ScLightbox, ScLightboxContainer, ScLightboxDirective, ScLightboxGallery, ScLightboxTrigger, ScLineChart, ScMarquee, ScMarqueeClone, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScMultiSelect, ScNativeCheckbox, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenterDirective as ScNotificationCenter, ScNotificationCenterContainer, ScNotificationCenterDirective, ScNotificationGroup, ScNotificationItem, ScNumberField, ScNumberFieldDecrement, ScNumberFieldIncrement, ScNumberFieldInput, ScNumberFieldInputGroup, ScNumberFieldScrubArea, ScOptField, ScOptFieldSeparator, ScOptFieldSlot, ScOptFieldSlotCaret, ScOptFieldSlotChar, ScOptFieldSlotGroup, ScOptFieldSlotInput, ScOrgChart, ScOrgChartNode, ScPasswordField, ScPasswordFieldInput, ScPasswordFieldInputGroup, ScPasswordFieldRequirements, ScPasswordFieldStrength, ScPasswordFieldStrengthBar, ScPasswordFieldToggle, ScPdfViewer, ScPdfViewerContainer, ScPdfViewerContent, ScPdfViewerDownload, ScPdfViewerEmpty, ScPdfViewerError, ScPdfViewerFullscreen, ScPdfViewerLoading, ScPdfViewerNav, ScPdfViewerNextPage, ScPdfViewerPageInfo, ScPdfViewerPrevPage, ScPdfViewerPrint, ScPdfViewerRetry, ScPdfViewerRoot, ScPdfViewerRotateLeft, ScPdfViewerRotateRight, ScPdfViewerSeparator, ScPdfViewerSpacer, ScPdfViewerToolbar$1 as ScPdfViewerToolbar, ScPdfViewerToolbar as ScPdfViewerToolbarLegacy, ScPdfViewerZoom, ScPdfViewerZoomIn, ScPdfViewerZoomOut, ScPdfViewerZoomSelect, ScPhoneInput, ScPhoneInputSimple, ScPieChart, ScQrCode, ScQrCodeDownload, ScRatingField, ScRatingFieldItem, ScRatingItemGroup, ScSearchInput, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSortableHandle, ScSortableItem, ScSortableList, ScSortableOverlay, ScSpeedDial, ScSpeedDialAction, ScSplitButton, ScSpotlight, ScSpotlightActions, ScSpotlightDescription, ScSpotlightTitle, ScStackedLayout, ScStatCard, ScStatCardChange, ScStatCardDescription, ScStatCardIcon, ScStatCardLabel, ScStatCardValue, ScStepper, ScStepperContent, ScStepperDescription, ScStepperItem, ScStepperList, ScStepperNext, ScStepperPrevious, ScStepperSeparator, ScStepperTitle, ScStepperTrigger, ScTagInput, ScTagInputClear, ScTagInputCount, ScTagInputField, ScTagInputTag, ScTheme, ScThemeField, ScThemeSelect, ScThemeToggle, ScTimePickerClock, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTimezoneBadge, ScTimezoneButton, ScTimezoneDisplay, ScTimezoneSelect, ScTimezoneService, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, ScVideoPlayerVideo, ScVideoPlayerVolume, ScVirtualList, ScVirtualScroll, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff, getCountryByCode, getCountryByDialCode, sizeStyles$1 as sizeStyles, variantStyles$1 as variantStyles };
 //# sourceMappingURL=semantic-components-ui-lab.mjs.map