@semantic-components/ui-lab 0.79.0 → 0.80.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, Directive, TemplateRef, contentChild, viewChild, Injectable, afterNextRender, Injector, runInInjectionContext, ViewContainerRef, contentChildren, ViewChild, booleanAttribute } from '@angular/core';
 import { RouterOutlet, Router, NavigationEnd } from '@angular/router';
 import { cn, ScSlider, buttonVariants, ScCalendar, ScCalendarHeader, ScCalendarHeading, ScCalendarNext, ScCalendarPrevious, ScBackdrop, SC_TIME_PICKER, ScPopoverProvider, ScButton, ScPopoverTrigger, ScPopoverPortal, ScPopover } from '@semantic-components/ui';
-import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronRightIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiPencilIcon, SiMinusIcon, SiSquareIcon, SiCircleIcon, SiArrowRightIcon, SiEraserIcon, SiUndo2Icon, SiTrash2Icon, SiDownloadIcon, SiCheckIcon, SiTriangleAlertIcon, SiCircleXIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiBellIcon, SiFileTextIcon, SiZoomOutIcon, SiZoomInIcon, SiRotateCcwIcon, SiRotateCwIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiPlusIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
+import { SiVolumeOffIcon, SiVolumeXIcon, SiVolume1Icon, SiVolume2Icon, SiChevronUpIcon, SiChevronDownIcon, SiChevronsUpDownIcon, SiSlidersVerticalIcon, SiChevronsLeftIcon, SiChevronLeftIcon, SiChevronRightIcon, SiChevronsRightIcon, SiCalendarIcon, SiXIcon, SiSmileIcon, SiPencilIcon, SiMinusIcon, SiSquareIcon, SiCircleIcon, SiArrowRightIcon, SiEraserIcon, SiUndo2Icon, SiTrash2Icon, SiDownloadIcon, SiCheckIcon, SiTriangleAlertIcon, SiCircleXIcon, SiMessageSquareIcon, SiInfoIcon, SiCircleCheckIcon, SiBellIcon, SiFileTextIcon, SiZoomOutIcon, SiZoomInIcon, SiRotateCcwIcon, SiRotateCwIcon, SiPrinterIcon, SiMaximizeIcon, SiMinimizeIcon, SiGlobeIcon } from '@semantic-icons/lucide-icons';
 import { _IdGenerator, CdkTrapFocus } from '@angular/cdk/a11y';
 import { NgTemplateOutlet, NgComponentOutlet, DOCUMENT } from '@angular/common';
 import { Temporal } from '@js-temporal/polyfill';
@@ -13307,114 +13307,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }], ariaLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const SC_SPEED_DIAL = new InjectionToken('SC_SPEED_DIAL');
+
 class ScSpeedDialAction {
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
-    labelVisible = input(true, ...(ngDevMode ? [{ debugName: "labelVisible" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    actionClick = output();
-    buttonClass = computed(() => cn('inline-flex items-center justify-center rounded-full', 'bg-secondary text-secondary-foreground', 'shadow-md hover:shadow-lg', 'transition-all duration-200', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-md', this.sizeClasses(), this.class()), ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
-    iconClass = computed(() => cn('inline-flex items-center justify-center', '[&>svg]:w-5 [&>svg]:h-5'), ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
-    labelClass = computed(() => cn('text-sm font-medium whitespace-nowrap', 'bg-popover text-popover-foreground', 'px-2 py-1 rounded shadow-sm'), ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
-    sizeClasses() {
-        const sizes = {
-            sm: 'h-10 w-10',
-            md: 'h-12 w-12',
-            lg: 'h-14 w-14',
-        };
-        return sizes[this.size()];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ScSpeedDialAction, isStandalone: true, selector: "sc-speed-dial-action", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "labelVisible", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
-    <button
-      type="button"
-      [class]="buttonClass()"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel() || label()"
-      [title]="label()"
-      (click)="actionClick.emit()"
-    >
-      <span [class]="iconClass()">
-        <ng-container *ngComponentOutlet="icon()" />
-      </span>
-      @if (showLabel()) {
-        <span class="sr-only">{{ label() }}</span>
-      }
-    </button>
-    @if (showLabel() && labelVisible()) {
-      <span [class]="labelClass()">{{ label() }}</span>
-    }
-  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:.75rem}:host(.direction-up),:host(.direction-down){flex-direction:row}:host(.direction-left){flex-direction:row-reverse}:host(.direction-right){flex-direction:row}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    speedDial = inject(SC_SPEED_DIAL);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : /* istanbul ignore next */ {}), alias: 'class' });
+    index = computed(() => this.speedDial.actions().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    transitionDelay = computed(() => {
+        const i = this.index();
+        const total = this.speedDial.actions().length;
+        return this.speedDial.open() ? `${i * 50}ms` : `${(total - 1 - i) * 30}ms`;
+    }, ...(ngDevMode ? [{ debugName: "transitionDelay" }] : /* istanbul ignore next */ []));
+    class = computed(() => {
+        const isOpen = this.speedDial.open();
+        const dir = this.speedDial.direction();
+        return cn('flex items-center gap-3 transition-all duration-200 ease-out', dir === 'left' ? 'flex-row-reverse' : 'flex-row', isOpen
+            ? 'opacity-100 scale-100 translate-y-0 translate-x-0'
+            : 'opacity-0 scale-75 pointer-events-none', !isOpen && dir === 'up' && 'translate-y-4', !isOpen && dir === 'down' && '-translate-y-4', !isOpen && dir === 'left' && 'translate-x-4', !isOpen && dir === 'right' && '-translate-x-4', this.classInput());
+    }, ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ScSpeedDialAction, isStandalone: true, selector: "[scSpeedDialAction]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "speed-dial-action", "role": "menuitem" }, properties: { "class": "class()", "style.transition-delay": "transitionDelay()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialAction, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-speed-dial-action', imports: [NgComponentOutlet], template: `
-    <button
-      type="button"
-      [class]="buttonClass()"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel() || label()"
-      [title]="label()"
-      (click)="actionClick.emit()"
-    >
-      <span [class]="iconClass()">
-        <ng-container *ngComponentOutlet="icon()" />
-      </span>
-      @if (showLabel()) {
-        <span class="sr-only">{{ label() }}</span>
-      }
-    </button>
-    @if (showLabel() && labelVisible()) {
-      <span [class]="labelClass()">{{ label() }}</span>
-    }
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;gap:.75rem}:host(.direction-up),:host(.direction-down){flex-direction:row}:host(.direction-left){flex-direction:row-reverse}:host(.direction-right){flex-direction:row}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisible", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+            type: Directive,
+            args: [{
+                    selector: '[scSpeedDialAction]',
+                    host: {
+                        'data-slot': 'speed-dial-action',
+                        role: 'menuitem',
+                        '[class]': 'class()',
+                        '[style.transition-delay]': 'transitionDelay()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class ScSpeedDial {
     elementRef = inject((ElementRef));
     destroyRef = inject(DestroyRef);
-    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : /* istanbul ignore next */ {}), alias: 'class' });
     direction = input('up', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    closeIcon = input(null, ...(ngDevMode ? [{ debugName: "closeIcon" }] : /* istanbul ignore next */ []));
-    label = input('Open actions', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Speed dial', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
-    closeOnActionClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnActionClick" }] : /* istanbul ignore next */ []));
-    closeOnOutsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    actionSize = input('md', ...(ngDevMode ? [{ debugName: "actionSize" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    actionClick = output();
-    openChange = output();
-    containerClass = computed(() => {
-        const dir = this.direction();
-        return cn('relative inline-flex', dir === 'up' && 'flex-col-reverse items-center', dir === 'down' && 'flex-col items-center', dir === 'left' && 'flex-row-reverse items-center', dir === 'right' && 'flex-row items-center', this.class());
-    }, ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
-    actionsContainerClass = computed(() => {
+    actions = contentChildren(ScSpeedDialAction, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    class = computed(() => {
         const dir = this.direction();
-        return cn('flex', dir === 'up' && 'flex-col-reverse items-center gap-3 mb-3', dir === 'down' && 'flex-col items-center gap-3 mt-3', dir === 'left' && 'flex-row-reverse items-center gap-3 mr-3', dir === 'right' && 'flex-row items-center gap-3 ml-3');
-    }, ...(ngDevMode ? [{ debugName: "actionsContainerClass" }] : /* istanbul ignore next */ []));
-    fabClass = computed(() => cn('inline-flex items-center justify-center rounded-full', 'bg-primary text-primary-foreground', 'shadow-lg hover:shadow-xl', 'transition-all duration-300', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.open() && 'rotate-0', this.fabSizeClasses()), ...(ngDevMode ? [{ debugName: "fabClass" }] : /* istanbul ignore next */ []));
-    fabIconClass = computed(() => cn('inline-flex items-center justify-center', 'transition-transform duration-300', '[&>svg]:w-6 [&>svg]:h-6'), ...(ngDevMode ? [{ debugName: "fabIconClass" }] : /* istanbul ignore next */ []));
-    actionWrapperClass(index) {
-        return cn('transition-all duration-200 ease-out', this.open()
-            ? 'opacity-100 scale-100 translate-y-0 translate-x-0'
-            : 'opacity-0 scale-75 pointer-events-none', !this.open() && this.direction() === 'up' && 'translate-y-4', !this.open() && this.direction() === 'down' && '-translate-y-4', !this.open() && this.direction() === 'left' && 'translate-x-4', !this.open() && this.direction() === 'right' && '-translate-x-4');
-    }
-    fabSizeClasses() {
-        const sizes = {
-            sm: 'h-12 w-12',
-            md: 'h-14 w-14',
-            lg: 'h-16 w-16',
-        };
-        return sizes[this.size()];
-    }
+        return cn('relative inline-flex', dir === 'up' && 'flex-col-reverse items-center', dir === 'down' && 'flex-col items-center', dir === 'left' && 'flex-row-reverse items-center', dir === 'right' && 'flex-row items-center', this.classInput());
+    }, ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => {
             this.setupOutsideClickHandler();
@@ -13422,18 +13360,10 @@ class ScSpeedDial {
     }
     toggle() {
         this.open.update((v) => !v);
-        this.openChange.emit(this.open());
     }
     close() {
         if (this.open()) {
             this.open.set(false);
-            this.openChange.emit(false);
-        }
-    }
-    onActionClick(action, index) {
-        this.actionClick.emit({ action, index });
-        if (this.closeOnActionClick()) {
-            this.close();
         }
     }
     onEscape() {
@@ -13441,7 +13371,7 @@ class ScSpeedDial {
     }
     setupOutsideClickHandler() {
         const handler = (event) => {
-            if (!this.closeOnOutsideClick() || !this.open())
+            if (!this.open())
                 return;
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
@@ -13453,137 +13383,119 @@ class ScSpeedDial {
             document.removeEventListener('click', handler);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ScSpeedDial, isStandalone: true, selector: "sc-speed-dial", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, closeOnActionClick: { classPropertyName: "closeOnActionClick", publicName: "closeOnActionClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, actionSize: { classPropertyName: "actionSize", publicName: "actionSize", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", actionClick: "actionClick", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
-    <div [class]="containerClass()" role="menu" [attr.aria-expanded]="open()">
-      <!-- Actions -->
-      <div [class]="actionsContainerClass()" [attr.aria-hidden]="!open()">
-        @for (action of actions(); track action.id; let i = $index) {
-          <div
-            [class]="actionWrapperClass(i)"
-            [style.transition-delay]="
-              open() ? i * 50 + 'ms' : (actions().length - 1 - i) * 30 + 'ms'
-            "
-          >
-            <sc-speed-dial-action
-              [icon]="action.icon"
-              [label]="action.label"
-              [disabled]="action.disabled ?? false"
-              [ariaLabel]="action.ariaLabel"
-              [showLabel]="showLabels()"
-              [labelVisible]="open()"
-              [size]="actionSize()"
-              [class]="
-                direction() === 'left'
-                  ? 'direction-left'
-                  : direction() === 'right'
-                    ? 'direction-right'
-                    : ''
-              "
-              (actionClick)="onActionClick(action, i)"
-            />
-          </div>
-        }
-      </div>
-
-      <!-- Main FAB button -->
-      <button
-        type="button"
-        [class]="fabClass()"
-        [attr.aria-label]="ariaLabel()"
-        [attr.aria-expanded]="open()"
-        [attr.aria-haspopup]="true"
-        (click)="toggle()"
-      >
-        <span [class]="fabIconClass()">
-          @if (open()) {
-            @if (closeIcon()) {
-              <ng-container *ngComponentOutlet="closeIcon()" />
-            } @else {
-              <svg siXIcon class="size-6"></svg>
-            }
-          } @else {
-            @if (icon()) {
-              <ng-container *ngComponentOutlet="icon()" />
-            } @else {
-              <svg siPlusIcon class="size-6"></svg>
-            }
-          }
-        </span>
-        @if (label() && !open()) {
-          <span class="sr-only">{{ label() }}</span>
-        }
-      </button>
-    </div>
-  `, isInline: true, styles: [":host{display:inline-block;position:relative}\n"], dependencies: [{ kind: "component", type: ScSpeedDialAction, selector: "sc-speed-dial-action", inputs: ["icon", "label", "disabled", "ariaLabel", "showLabel", "labelVisible", "size", "class"], outputs: ["actionClick"] }, { kind: "component", type: SiPlusIcon, selector: "svg[siPlusIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.4", type: ScSpeedDial, isStandalone: true, selector: "[scSpeedDial]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "speed-dial" }, listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class": "class()" } }, providers: [{ provide: SC_SPEED_DIAL, useExisting: ScSpeedDial }], queries: [{ propertyName: "actions", predicate: ScSpeedDialAction, isSignal: true }], exportAs: ["scSpeedDial"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDial, decorators: [{
-            type: Component,
-            args: [{ selector: 'sc-speed-dial', imports: [ScSpeedDialAction, SiPlusIcon, SiXIcon, NgComponentOutlet], template: `
-    <div [class]="containerClass()" role="menu" [attr.aria-expanded]="open()">
-      <!-- Actions -->
-      <div [class]="actionsContainerClass()" [attr.aria-hidden]="!open()">
-        @for (action of actions(); track action.id; let i = $index) {
-          <div
-            [class]="actionWrapperClass(i)"
-            [style.transition-delay]="
-              open() ? i * 50 + 'ms' : (actions().length - 1 - i) * 30 + 'ms'
-            "
-          >
-            <sc-speed-dial-action
-              [icon]="action.icon"
-              [label]="action.label"
-              [disabled]="action.disabled ?? false"
-              [ariaLabel]="action.ariaLabel"
-              [showLabel]="showLabels()"
-              [labelVisible]="open()"
-              [size]="actionSize()"
-              [class]="
-                direction() === 'left'
-                  ? 'direction-left'
-                  : direction() === 'right'
-                    ? 'direction-right'
-                    : ''
-              "
-              (actionClick)="onActionClick(action, i)"
-            />
-          </div>
-        }
-      </div>
-
-      <!-- Main FAB button -->
-      <button
-        type="button"
-        [class]="fabClass()"
-        [attr.aria-label]="ariaLabel()"
-        [attr.aria-expanded]="open()"
-        [attr.aria-haspopup]="true"
-        (click)="toggle()"
-      >
-        <span [class]="fabIconClass()">
-          @if (open()) {
-            @if (closeIcon()) {
-              <ng-container *ngComponentOutlet="closeIcon()" />
-            } @else {
-              <svg siXIcon class="size-6"></svg>
-            }
-          } @else {
-            @if (icon()) {
-              <ng-container *ngComponentOutlet="icon()" />
-            } @else {
-              <svg siPlusIcon class="size-6"></svg>
-            }
-          }
-        </span>
-        @if (label() && !open()) {
-          <span class="sr-only">{{ label() }}</span>
-        }
-      </button>
-    </div>
-  `, host: {
+            type: Directive,
+            args: [{
+                    selector: '[scSpeedDial]',
+                    exportAs: 'scSpeedDial',
+                    providers: [{ provide: SC_SPEED_DIAL, useExisting: ScSpeedDial }],
+                    host: {
+                        'data-slot': 'speed-dial',
+                        '[class]': 'class()',
                         '(document:keydown.escape)': 'onEscape()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;position:relative}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], closeOnActionClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnActionClick", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], actionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionSize", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ScSpeedDialAction), { isSignal: true }] }] } });
+
+class ScSpeedDialActionButton {
+    speedDial = inject(SC_SPEED_DIAL);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : /* istanbul ignore next */ {}), alias: 'class' });
+    class = computed(() => cn('inline-flex items-center justify-center rounded-full', 'bg-secondary text-secondary-foreground', 'shadow-md hover:shadow-lg', 'transition-all duration-200', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-md', this.sizeClasses(), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    sizeClasses() {
+        const sizes = {
+            sm: 'h-10 w-10',
+            md: 'h-12 w-12',
+            lg: 'h-14 w-14',
+        };
+        return sizes[this.speedDial.size()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialActionButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ScSpeedDialActionButton, isStandalone: true, selector: "button[scSpeedDialActionButton]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "speed-dial-action-button", "type": "button" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialActionButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scSpeedDialActionButton]',
+                    host: {
+                        'data-slot': 'speed-dial-action-button',
+                        type: 'button',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class ScSpeedDialActionLabel {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : /* istanbul ignore next */ {}), alias: 'class' });
+    class = computed(() => cn('text-sm font-medium whitespace-nowrap', 'bg-popover text-popover-foreground', 'px-2 py-1 rounded shadow-sm', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialActionLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ScSpeedDialActionLabel, isStandalone: true, selector: "[scSpeedDialActionLabel]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "speed-dial-action-label" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialActionLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scSpeedDialActionLabel]',
+                    host: {
+                        'data-slot': 'speed-dial-action-label',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class ScSpeedDialActionList {
+    speedDial = inject(SC_SPEED_DIAL);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : /* istanbul ignore next */ {}), alias: 'class' });
+    class = computed(() => {
+        const dir = this.speedDial.direction();
+        return cn('flex', dir === 'up' && 'flex-col-reverse items-center gap-3 mb-3', dir === 'down' && 'flex-col items-center gap-3 mt-3', dir === 'left' && 'flex-row-reverse items-center gap-3 mr-3', dir === 'right' && 'flex-row items-center gap-3 ml-3', this.classInput());
+    }, ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialActionList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ScSpeedDialActionList, isStandalone: true, selector: "[scSpeedDialActionList]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "speed-dial-action-list", "role": "menu" }, properties: { "attr.aria-hidden": "!speedDial.open()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialActionList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scSpeedDialActionList]',
+                    host: {
+                        'data-slot': 'speed-dial-action-list',
+                        role: 'menu',
+                        '[attr.aria-hidden]': '!speedDial.open()',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class ScSpeedDialTrigger {
+    speedDial = inject(SC_SPEED_DIAL);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : /* istanbul ignore next */ {}), alias: 'class' });
+    class = computed(() => cn('inline-flex items-center justify-center rounded-full', 'bg-primary text-primary-foreground', 'shadow-lg hover:shadow-xl', 'transition-all duration-300', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.sizeClasses(), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    sizeClasses() {
+        const sizes = {
+            sm: 'h-12 w-12',
+            md: 'h-14 w-14',
+            lg: 'h-16 w-16',
+        };
+        return sizes[this.speedDial.size()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ScSpeedDialTrigger, isStandalone: true, selector: "button[scSpeedDialTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "speed-dial-trigger", "type": "button" }, listeners: { "click": "speedDial.toggle()" }, properties: { "attr.aria-expanded": "speedDial.open()", "attr.aria-haspopup": "\"menu\"", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScSpeedDialTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scSpeedDialTrigger]',
+                    host: {
+                        'data-slot': 'speed-dial-trigger',
+                        type: 'button',
+                        '[attr.aria-expanded]': 'speedDial.open()',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[class]': 'class()',
+                        '(click)': 'speedDial.toggle()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class ScSpotlight {
     destroyRef = inject(DestroyRef);
@@ -17558,5 +17470,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthLayout, DEFAULT_BREAKPOINTS, DEFAULT_CATEGORIES, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_BARCODE_SCANNER, SC_COLOR_PICKER, SC_COUNTDOWN, SC_DATA_TABLE, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_INFINITE_SCROLL, SC_KANBAN_BOARD, SC_LANGUAGE_CONFIG, SC_LIGHTBOX_PROVIDER, SC_NOTIFICATION_CENTER, SC_PDF_VIEWER, SC_SIGNATURE_PAD, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScBarcodeScanner, ScBarcodeVideo, ScButtonPattern, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCountdown, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScEmojiPicker, ScEmojiPickerCategoryTabs, ScEmojiPickerEmpty, ScEmojiPickerGrid, ScEmojiPickerItem, ScEmojiPickerRecent, ScEmojiPickerSearch, ScEmojiPickerState, 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, ScLightbox, ScLightboxClose, ScLightboxCounter, ScLightboxGallery, ScLightboxGalleryItem, ScLightboxImage, ScLightboxNext, ScLightboxPortal, ScLightboxPrev, ScLightboxProvider, ScLightboxThumbnail, ScLightboxThumbnailBar, ScLightboxToolbar, ScLightboxTrigger, ScLightboxZoomControls, ScLightboxZoomIn, ScLightboxZoomOut, ScLightboxZoomReset, ScMarquee, ScMarqueeContent, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScNativeDialog, ScNativeDialogBody, ScNativeDialogClose, ScNativeDialogContent, ScNativeDialogDescription, ScNativeDialogFooter, ScNativeDialogHeader, ScNativeDialogProvider, ScNativeDialogTitle, ScNativeDialogTrigger, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenter, ScNotificationCenterContainer, ScNotificationGroup, ScNotificationItem, ScOrgChart, ScOrgChartNode, 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, ScQrCode, ScQrCodeDownload, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSpeedDial, ScSpeedDialAction, 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, ScTimePickerClock, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, ScVideoPlayerVideo, ScVideoPlayerVolume, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff };
+export { AuthLayout, DEFAULT_BREAKPOINTS, DEFAULT_CATEGORIES, DEFAULT_CONFIG, DEFAULT_COUNTER_OPTIONS, DEFAULT_DOCK_OPTIONS, DEFAULT_TOOLBAR_CONFIG, SC_AUDIO_PLAYER, SC_BARCODE_SCANNER, SC_COLOR_PICKER, SC_COUNTDOWN, SC_DATA_TABLE, SC_IMAGE_COMPARE, SC_IMAGE_CROPPER, SC_INFINITE_SCROLL, SC_KANBAN_BOARD, SC_LANGUAGE_CONFIG, SC_LIGHTBOX_PROVIDER, SC_NOTIFICATION_CENTER, SC_PDF_VIEWER, SC_SIGNATURE_PAD, SC_STEPPER, SC_STEPPER_ITEM, SC_TAG_INPUT, SC_TREE_ITEM, ScAnimatedCounter, ScAudioPlayer, ScAudioPlayerControls, ScAudioPlayerCover, ScAudioPlayerNext, ScAudioPlayerPlay, ScAudioPlayerPrevious, ScAudioPlayerProgress, ScAudioPlayerRepeat, ScAudioPlayerShuffle, ScAudioPlayerTrackInfo, ScAudioPlayerVolume, ScBarcodeScanner, ScBarcodeVideo, ScButtonPattern, ScColorPicker, ScColorPickerArea, ScColorPickerEyeDropper, ScColorPickerHue, ScColorPickerInput, ScColorPickerPreview, ScColorPickerSwatches, ScCountdown, ScDataTable, ScDataTableBody, ScDataTableCell, ScDataTableColumnToggle, ScDataTableFilter, ScDataTableHead, ScDataTableHeader, ScDataTablePagination, ScDataTableRow, ScDateRangePicker, ScDiffViewer, ScDock, ScDockBadge, ScDockItem, ScDockItems, ScEmojiPicker, ScEmojiPickerCategoryTabs, ScEmojiPickerEmpty, ScEmojiPickerGrid, ScEmojiPickerItem, ScEmojiPickerRecent, ScEmojiPickerSearch, ScEmojiPickerState, 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, ScLightbox, ScLightboxClose, ScLightboxCounter, ScLightboxGallery, ScLightboxGalleryItem, ScLightboxImage, ScLightboxNext, ScLightboxPortal, ScLightboxPrev, ScLightboxProvider, ScLightboxThumbnail, ScLightboxThumbnailBar, ScLightboxToolbar, ScLightboxTrigger, ScLightboxZoomControls, ScLightboxZoomIn, ScLightboxZoomOut, ScLightboxZoomReset, ScMarquee, ScMarqueeContent, ScMarqueeFade, ScMarqueeItem, ScMarqueeText, ScMasonryGrid, ScMasonryItem, ScMentionInput, ScNativeDialog, ScNativeDialogBody, ScNativeDialogClose, ScNativeDialogContent, ScNativeDialogDescription, ScNativeDialogFooter, ScNativeDialogHeader, ScNativeDialogProvider, ScNativeDialogTitle, ScNativeDialogTrigger, ScNavbar, ScNavbarActions, ScNavbarBrand, ScNavbarGroup, ScNavbarMobileLink, ScNavbarMobileMenu, ScNavbarMobilePortal, ScNavbarMobileTrigger, ScNavbarProvider, ScNotificationCenter, ScNotificationCenterContainer, ScNotificationGroup, ScNotificationItem, ScOrgChart, ScOrgChartNode, 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, ScQrCode, ScQrCodeDownload, ScSidebarLayout, ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadClearButton, ScSignaturePadColorButton, ScSignaturePadControls, ScSignaturePadToolbar, ScSignaturePadUndoButton, ScSignaturePadWidthButton, ScSpeedDial, ScSpeedDialAction, ScSpeedDialActionButton, ScSpeedDialActionLabel, ScSpeedDialActionList, ScSpeedDialTrigger, 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, ScTimePickerClock, ScTimeline, ScTimelineConnector, ScTimelineContent, ScTimelineDescription, ScTimelineDot, ScTimelineItem, ScTimelineTime, ScTimelineTitle, ScTourGuide, ScTransferList, ScTree, ScTreeItem, ScTreeItemGroup, ScTreeItemIcon, ScTreeItemTrigger, ScTreeItemTriggerIcon, ScVideoPlayer, ScVideoPlayerBigPlay, ScVideoPlayerBufferingIndicator, ScVideoPlayerControls, ScVideoPlayerFullscreen, ScVideoPlayerPip, ScVideoPlayerPlayPause, ScVideoPlayerProgress, ScVideoPlayerSkip, ScVideoPlayerSpacer, ScVideoPlayerSpeed, ScVideoPlayerTime, ScVideoPlayerToolbar, ScVideoPlayerVideo, ScVideoPlayerVolume, TourService, ZOOM_LEVELS, computeDiff, computeWordDiff, createScDateRangePresets, createUnifiedDiff };
 //# sourceMappingURL=semantic-components-ui-lab.mjs.map