@ship-ui/core 0.15.41 → 0.16.0

package/fesm2022/ship-ui-core.mjs

@@ -5,7 +5,7 @@ import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
 const iconTypes = ['bold', 'thin', 'light', 'fill', 'duotone'];
-class ShipIconComponent {
+class ShipIcon {
     #selfRef = inject(ElementRef);
     #renderer = inject(Renderer2);
     ngAfterContentInit() {
@@ -17,12 +17,12 @@ class ShipIconComponent {
             this.#renderer.addClass(this.#selfRef.nativeElement, potentialType);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipIconComponent, isStandalone: true, selector: "sh-icon", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipIcon, isStandalone: true, selector: "sh-icon", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-icon',
@@ -59,7 +59,7 @@ function classMutationSignal(_element = null) {
 const SHIP_CONFIG = new InjectionToken('Ship UI Config');
 
 const POSSIBLE_VARIANTS = ['simple', 'outlined', 'flat', 'raised'];
-class ShipAlertComponent {
+class ShipAlert {
     constructor() {
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
         this.variant = signal(this.#shConfig?.alertVariant ?? '', ...(ngDevMode ? [{ debugName: "variant" }] : []));
@@ -82,8 +82,8 @@ class ShipAlertComponent {
             this.alertService()?.removeAlert(this.id());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipAlertComponent, isStandalone: true, selector: "sh-alert", inputs: { alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "activeClass()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipAlert, isStandalone: true, selector: "sh-alert", inputs: { alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "activeClass()" } }, ngImport: i0, template: `
     <div class="alert">
       <div #ref class="icon" [style.display]="!ref.children.length ? 'none' : 'block'">
         <ng-content select="[icon]" />
@@ -122,13 +122,13 @@ class ShipAlertComponent {
         <ng-content select="p" />
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlert, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-alert',
-                    imports: [ShipIconComponent],
+                    imports: [ShipIcon],
                     template: `
     <div class="alert">
       <div #ref class="icon" [style.display]="!ref.children.length ? 'none' : 'block'">
@@ -174,23 +174,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class]': 'activeClass()',
                     },
                 }]
-        }] });
+        }], propDecorators: { alertService: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertService", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
-class ShipAlertContainerComponent {
+class ShipAlertContainer {
     constructor() {
         this.inline = input(null, ...(ngDevMode ? [{ debugName: "inline" }] : []));
         this.alerts = viewChild.required('alerts');
         this.scroller = viewChild.required('scroller');
         this.alertService = input.required(...(ngDevMode ? [{ debugName: "alertService" }] : []));
-        this.alertHistory = this.alertService()?.alertHistory;
-        this.alertHistoryIsOpen = this.alertService()?.alertHistoryIsOpen;
-        this.alertHistoryIsHidden = this.alertService()?.alertHistoryIsHidden;
+        // alertHistory = this.alertService()?.alertHistory;
+        // alertHistoryIsOpen = this.alertService()?.alertHistoryIsOpen;
+        // alertHistoryIsHidden = this.alertService()?.alertHistoryIsHidden;
         this.numberOfOpenAlerts = computed(() => {
-            return this.alertHistory().filter((x) => x.isOpen).length;
+            return this.alertService()
+                .alertHistory()
+                .filter((x) => x.isOpen).length;
         }, ...(ngDevMode ? [{ debugName: "numberOfOpenAlerts" }] : []));
         this.#e = effect(() => {
-            this.alertHistory();
-            this.alertHistoryIsOpen();
+            this.alertService().alertHistory();
+            this.alertService().alertHistoryIsOpen();
             this.#scrollToBottom();
         }, ...(ngDevMode ? [{ debugName: "#e" }] : []));
     }
@@ -229,15 +231,17 @@ class ShipAlertContainerComponent {
         return `translateY(calc(-${this.getElementHeight(i - 1)}px + (-10px * ${i})))`;
     }
     transitionDelay(i, allOpen = false) {
-        return allOpen ? this.alertHistory().length - 1 * 40 + 'ms' : (this.numberOfOpenAlerts() - i) * 40 + 'ms';
+        return allOpen
+            ? this.alertService().alertHistory().length - 1 * 40 + 'ms'
+            : (this.numberOfOpenAlerts() - i) * 40 + 'ms';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipAlertContainerComponent, isStandalone: true, selector: "ship-alert-container", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "alerts", first: true, predicate: ["alerts"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"scroller\" #scroller>\n  <div class=\"container\">\n    @for (alert of alertHistory(); track $index) {\n      <sh-alert\n        #alerts\n        [class]=\"alert.type\"\n        [id]=\"alert.id\"\n        [alertService]=\"alertService()\"\n        [style.transition-delay]=\"transitionDelay($index, true)\"\n        [class.animate-in]=\"alert.animateIn\"\n        [class.animate-out]=\"alert.animateOut\"\n        [class.is-hidden]=\"alertHistoryIsHidden() && !alert.isOpen\">\n        <div title>{{ alert.title }}</div>\n\n        @if (alert.content) {\n          <div content>\n            {{ alert.content }}\n          </div>\n        }\n      </sh-alert>\n    }\n  </div>\n</div>\n<div\n  class=\"tray\"\n  [class.tray-is-hidden]=\"!alertHistoryIsHidden()\"\n  (mouseover)=\"this.onMouseOver()\"\n  (mouseout)=\"this.onMouseOut()\">\n  <sh-icon class=\"small\">info</sh-icon>\n</div>\n", dependencies: [{ kind: "component", type: ShipAlertComponent, selector: "sh-alert", inputs: ["alertService", "id"] }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipAlertContainer, isStandalone: true, selector: "ship-alert-container", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "alerts", first: true, predicate: ["alerts"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"scroller\" #scroller>\n  <div class=\"container\">\n    @for (alert of this.alertService().alertHistory(); track $index) {\n      <sh-alert\n        #alerts\n        [class]=\"alert.type\"\n        [id]=\"alert.id\"\n        [alertService]=\"alertService()\"\n        [style.transition-delay]=\"transitionDelay($index, true)\"\n        [class.animate-in]=\"alert.animateIn\"\n        [class.animate-out]=\"alert.animateOut\"\n        [class.is-hidden]=\"this.alertService().alertHistoryIsHidden() && !alert.isOpen\">\n        <div title>{{ alert.title }}</div>\n\n        @if (alert.content) {\n          <div content>\n            {{ alert.content }}\n          </div>\n        }\n      </sh-alert>\n    }\n  </div>\n</div>\n<div\n  class=\"tray\"\n  [class.tray-is-hidden]=\"!this.alertService().alertHistoryIsHidden()\"\n  (mouseover)=\"this.onMouseOver()\"\n  (mouseout)=\"this.onMouseOut()\">\n  <sh-icon class=\"small\">info</sh-icon>\n</div>\n", dependencies: [{ kind: "component", type: ShipAlert, selector: "sh-alert", inputs: ["alertService", "id"] }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'ship-alert-container', imports: [ShipAlertComponent, ShipIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroller\" #scroller>\n  <div class=\"container\">\n    @for (alert of alertHistory(); track $index) {\n      <sh-alert\n        #alerts\n        [class]=\"alert.type\"\n        [id]=\"alert.id\"\n        [alertService]=\"alertService()\"\n        [style.transition-delay]=\"transitionDelay($index, true)\"\n        [class.animate-in]=\"alert.animateIn\"\n        [class.animate-out]=\"alert.animateOut\"\n        [class.is-hidden]=\"alertHistoryIsHidden() && !alert.isOpen\">\n        <div title>{{ alert.title }}</div>\n\n        @if (alert.content) {\n          <div content>\n            {{ alert.content }}\n          </div>\n        }\n      </sh-alert>\n    }\n  </div>\n</div>\n<div\n  class=\"tray\"\n  [class.tray-is-hidden]=\"!alertHistoryIsHidden()\"\n  (mouseover)=\"this.onMouseOver()\"\n  (mouseout)=\"this.onMouseOut()\">\n  <sh-icon class=\"small\">info</sh-icon>\n</div>\n" }]
-        }], propDecorators: { onMouseOver: [{
+            args: [{ selector: 'ship-alert-container', imports: [ShipAlert, ShipIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroller\" #scroller>\n  <div class=\"container\">\n    @for (alert of this.alertService().alertHistory(); track $index) {\n      <sh-alert\n        #alerts\n        [class]=\"alert.type\"\n        [id]=\"alert.id\"\n        [alertService]=\"alertService()\"\n        [style.transition-delay]=\"transitionDelay($index, true)\"\n        [class.animate-in]=\"alert.animateIn\"\n        [class.animate-out]=\"alert.animateOut\"\n        [class.is-hidden]=\"this.alertService().alertHistoryIsHidden() && !alert.isOpen\">\n        <div title>{{ alert.title }}</div>\n\n        @if (alert.content) {\n          <div content>\n            {{ alert.content }}\n          </div>\n        }\n      </sh-alert>\n    }\n  </div>\n</div>\n<div\n  class=\"tray\"\n  [class.tray-is-hidden]=\"!this.alertService().alertHistoryIsHidden()\"\n  (mouseover)=\"this.onMouseOver()\"\n  (mouseout)=\"this.onMouseOut()\">\n  <sh-icon class=\"small\">info</sh-icon>\n</div>\n" }]
+        }], propDecorators: { inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], alerts: [{ type: i0.ViewChild, args: ['alerts', { isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], alertService: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertService", required: true }] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
             }], onMouseOut: [{
@@ -246,15 +250,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class ShipAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertModule, imports: [ShipAlertComponent, ShipAlertContainerComponent], exports: [ShipAlertComponent, ShipAlertContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertModule, imports: [ShipAlert, ShipAlertContainer], exports: [ShipAlert, ShipAlertContainer] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ShipAlertComponent, ShipAlertContainerComponent],
-                    exports: [ShipAlertComponent, ShipAlertContainerComponent],
+                    imports: [ShipAlert, ShipAlertContainer],
+                    exports: [ShipAlert, ShipAlertContainer],
                     providers: [],
                 }]
         }] });
@@ -333,10 +337,10 @@ class ShipAlertService {
     setHidden(isHidden) {
         this.alertHistoryIsHidden.set(isHidden);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipAlertService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipAlertService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -353,7 +357,7 @@ const DEFAULT_OPTIONS$1 = {
     closeOnEsc: true,
     closeOnOutsideClick: true,
 };
-class ShipDialogComponent {
+class ShipDialog {
     constructor() {
         this.#document = inject(DOCUMENT);
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
@@ -405,8 +409,8 @@ class ShipDialogComponent {
     ngOnDestroy() {
         this.abortController?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDialogComponent, isStandalone: true, selector: "sh-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialogRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipDialog, isStandalone: true, selector: "sh-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialogRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @let options = this.defaultOptionMerge();
 
     @if (isOpen()) {
@@ -429,7 +433,7 @@ class ShipDialogComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-dialog',
@@ -458,7 +462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { dialogRef: [{ type: i0.ViewChild, args: ['dialogRef', { isSignal: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class ShipDialogService {
     constructor() {
@@ -484,7 +488,7 @@ class ShipDialogService {
         this.insertedCompRef = createComponent(component, {
             environmentInjector,
         });
-        this.compRef = createComponent(ShipDialogComponent, {
+        this.compRef = createComponent(ShipDialog, {
             hostElement,
             environmentInjector,
             projectableNodes: [[this.insertedCompRef.location.nativeElement]],
@@ -560,10 +564,10 @@ class ShipDialogService {
     ngOnDestroy() {
         this.#cleanupRefs(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -754,7 +758,7 @@ const TEST_NODES = [
         connections: [{ fromNode: 'b1', fromPort: 'out-1', toNode: 'c6', toPort: 'in-1' }],
     },
 ];
-class ShipBlueprintComponent {
+class ShipBlueprint {
     #ZOOM_SPEED;
     #MAX_ZOOM;
     #MIN_ZOOM;
@@ -1477,8 +1481,8 @@ class ShipBlueprintComponent {
     #clamp(value, min, max) {
         return Math.max(min, Math.min(max, value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipBlueprintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipBlueprintComponent, isStandalone: true, selector: "sh-blueprint", inputs: { forceUnique: { classPropertyName: "forceUnique", publicName: "forceUnique", isSignal: true, isRequired: false, transformFunction: null }, autoLayout: { classPropertyName: "autoLayout", publicName: "autoLayout", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, gridColor: { classPropertyName: "gridColor", publicName: "gridColor", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange" }, host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)", "document:keydown.escape": "onEscape($event)", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)", "document:touchend": "onDocumentTouchEnd($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["blueprintCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipBlueprint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipBlueprint, isStandalone: true, selector: "sh-blueprint", inputs: { forceUnique: { classPropertyName: "forceUnique", publicName: "forceUnique", isSignal: true, isRequired: false, transformFunction: null }, autoLayout: { classPropertyName: "autoLayout", publicName: "autoLayout", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, gridColor: { classPropertyName: "gridColor", publicName: "gridColor", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange" }, host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)", "document:keydown.escape": "onEscape($event)", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)", "document:touchend": "onDocumentTouchEnd($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["blueprintCanvas"], descendants: true, static: true }], ngImport: i0, template: `
     <div
       class="canvas-container"
       [class.locked]="isLocked()"
@@ -1564,13 +1568,13 @@ class ShipBlueprintComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipCardComponent, selector: "sh-card" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }, { kind: "component", type: ShipButtonComponent, selector: "[shButton]" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipCard, selector: "sh-card" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }, { kind: "component", type: ShipButton, selector: "[shButton]" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipBlueprintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipBlueprint, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-blueprint',
-                    imports: [ShipCardComponent, ShipIconComponent, JsonPipe, ShipButtonComponent],
+                    imports: [ShipCard, ShipIcon, JsonPipe, ShipButton],
                     template: `
     <div
       class="canvas-container"
@@ -1660,7 +1664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { canvasRef: [{
+        }], ctorParameters: () => [], propDecorators: { forceUnique: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceUnique", required: false }] }], autoLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLayout", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], gridColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColor", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }, { type: i0.Output, args: ["nodesChange"] }], canvasRef: [{
                 type: ViewChild,
                 args: ['blueprintCanvas', { static: true }]
             }], onMouseUp: [{
@@ -1683,16 +1687,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['document:touchend', ['$event']]
             }] } });
 
-class ShipButtonGroupComponent {
+class ShipButtonGroup {
     constructor() {
         this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipButtonGroupComponent, isStandalone: true, selector: "sh-button-group", host: { properties: { "style.--btng-id": "id" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipButtonGroup, isStandalone: true, selector: "sh-button-group", host: { properties: { "style.--btng-id": "id" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipButtonGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-button-group',
@@ -1707,11 +1711,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipButtonComponent, isStandalone: true, selector: "[shButton]", host: { classAttribute: "sh-sheet-h" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class ShipButton {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipButton, isStandalone: true, selector: "[shButton]", host: { classAttribute: "sh-sheet-h" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipButton, decorators: [{
             type: Component,
             args: [{
                     selector: '[shButton]',
@@ -1724,18 +1728,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipCardComponent {
+class ShipCard {
     constructor() {
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
         this.class = signal(this.#shConfig?.cardType ?? 'type-a', ...(ngDevMode ? [{ debugName: "class" }] : []));
     }
     #shConfig;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipCardComponent, isStandalone: true, selector: "sh-card", host: { properties: { "class": "class()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipCard, isStandalone: true, selector: "sh-card", host: { properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipCard, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-card',
@@ -1750,12 +1754,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipCheckboxComponent {
+class ShipCheckbox {
     constructor() {
         this.currentClassList = classMutationSignal();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipCheckboxComponent, isStandalone: true, selector: "sh-checkbox", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipCheckbox, isStandalone: true, selector: "sh-checkbox", ngImport: i0, template: `
     <div class="box sh-sheet" [class]="currentClassList()">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
@@ -1764,13 +1768,13 @@ class ShipCheckboxComponent {
     <div class="label">
       <ng-content />
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-checkbox',
-                    imports: [ShipIconComponent],
+                    imports: [ShipIcon],
                     template: `
     <div class="box sh-sheet" [class]="currentClassList()">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
@@ -1785,11 +1789,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipChipComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipChipComponent, isStandalone: true, selector: "sh-chip", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: '<div><ng-content /></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class ShipChip {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipChip, isStandalone: true, selector: "sh-chip", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: '<div><ng-content /></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipChip, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-chip',
@@ -1805,7 +1809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 // TODOS
 // - Add a color picker input
 // - Add alpha support
-class ShipColorPickerComponent {
+class ShipColorPicker {
     constructor() {
         this.#document = inject(DOCUMENT);
         this.canvasRef = viewChild.required('colorCanvas');
@@ -2116,8 +2120,8 @@ class ShipColorPickerComponent {
         }
         return `hsl(${Math.floor(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", type: ShipColorPickerComponent, isStandalone: true, selector: "sh-color-picker", inputs: { showDarkColors: { classPropertyName: "showDarkColors", publicName: "showDarkColors", isSignal: true, isRequired: false, transformFunction: null }, renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColor: "selectedColorChange", currentColor: "currentColor" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "renderingType()", "class.vertical": "(renderingType() === \"hue\" || renderingType() === \"saturation\") && direction() === \"vertical\"" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["colorCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: ShipColorPicker, isStandalone: true, selector: "sh-color-picker", inputs: { showDarkColors: { classPropertyName: "showDarkColors", publicName: "showDarkColors", isSignal: true, isRequired: false, transformFunction: null }, renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColor: "selectedColorChange", currentColor: "currentColor" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "renderingType()", "class.vertical": "(renderingType() === \"hue\" || renderingType() === \"saturation\") && direction() === \"vertical\"" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["colorCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <canvas #colorCanvas></canvas>
     <div
       class="marker"
@@ -2126,7 +2130,7 @@ class ShipColorPickerComponent {
       [style.background]="selectedColorRgb()"></div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipColorPicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-color-picker',
@@ -2145,311 +2149,594 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.vertical]': '(renderingType() === "hue" || renderingType() === "saturation") && direction() === "vertical"',
                     },
                 }]
-        }], propDecorators: { onResize: [{
+        }], propDecorators: { canvasRef: [{ type: i0.ViewChild, args: ['colorCanvas', { isSignal: true }] }], showDarkColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDarkColors", required: false }] }], renderingType: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderingType", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], hue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hue", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }, { type: i0.Output, args: ["selectedColorChange"] }], currentColor: [{ type: i0.Output, args: ["currentColor"] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
 
-const BASE_SPACE = 4;
-const SCROLLABLE_STYLES = ['scroll', 'auto'];
-const DEFAULT_OPTIONS = {
-    width: undefined,
-    height: undefined,
-    closeOnButton: true,
-    closeOnEsc: true,
-};
-class ShipPopoverComponent {
+class ShipDatepicker {
     constructor() {
-        this.#document = inject(DOCUMENT);
-        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
-        this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : []));
-        this.disableOpenByClick = input(false, ...(ngDevMode ? [{ debugName: "disableOpenByClick" }] : []));
-        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
-        this.closed = output();
-        this.defaultOptionMerge = computed(() => ({
-            ...DEFAULT_OPTIONS,
-            ...this.options(),
-        }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : []));
-        this.triggerRef = viewChild.required('triggerRef');
-        this.popoverRef = viewChild('popoverRef', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
-        this.popoverContentRef = viewChild('popoverContentRef', ...(ngDevMode ? [{ debugName: "popoverContentRef" }] : []));
-        this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
-        this.openAbort = null;
-        this.openEffect = effect(() => {
-            const open = this.isOpen();
-            queueMicrotask(() => {
-                const popoverEl = this.popoverRef()?.nativeElement;
-                if (!popoverEl) {
-                    this.openAbort?.abort();
-                    this.openAbort = null;
-                    return;
-                }
-                if (open) {
-                    if (this.openAbort) {
-                        this.openAbort.abort();
-                    }
-                    this.openAbort = new AbortController();
-                    this.#document.addEventListener('keydown', (e) => {
-                        if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
-                            e.preventDefault();
-                        }
-                        if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
-                            this.isOpen.set(false);
-                        }
-                    }, {
-                        signal: this.openAbort?.signal,
-                    });
-                    popoverEl.showPopover();
-                    if (!this.SUPPORTS_ANCHOR) {
-                        setTimeout(() => {
-                            const scrollableParent = this.#findScrollableParent(popoverEl);
-                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), {
-                                signal: this.openAbort?.signal,
-                            });
-                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), {
-                                signal: this.openAbort?.signal,
-                            });
-                            this.#calculateMenuPosition();
-                        });
-                    }
-                }
-                else {
-                    this.closed.emit();
-                    this.openAbort?.abort();
-                    this.openAbort = null;
-                }
-            });
-        }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
+        this.#INIT_DATE = this.#getUTCDate(new Date());
+        this.date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : []));
+        this.endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
+        this.asRange = input(false, ...(ngDevMode ? [{ debugName: "asRange" }] : []));
+        this.monthsToShow = input(1, ...(ngDevMode ? [{ debugName: "monthsToShow" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.startOfWeek = input(1, ...(ngDevMode ? [{ debugName: "startOfWeek" }] : []));
+        this.weekdayLabels = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : []));
+        this.daysRef = viewChild('daysRef', ...(ngDevMode ? [{ debugName: "daysRef" }] : []));
+        this.currentDate = signal(this.date() ?? this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
+        this.monthOffsets = computed(() => {
+            return Array.from({ length: this.monthsToShow() }, (_, i) => i);
+        }, ...(ngDevMode ? [{ debugName: "monthOffsets" }] : []));
+        this.selectedDateStylePosition = signal(null, ...(ngDevMode ? [{ debugName: "selectedDateStylePosition" }] : []));
+        this.weekdays = computed(() => {
+            const startOfWeek = this.startOfWeek();
+            const weekdayLabels = this.weekdayLabels();
+            return weekdayLabels.slice(startOfWeek).concat(weekdayLabels.slice(0, startOfWeek));
+        }, ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
+        this.currentClasses = classMutationSignal();
+        this.someEffect = effect(() => {
+            const _ = this.currentClasses();
+            this.#findSelectedAndCalc();
+        }, ...(ngDevMode ? [{ debugName: "someEffect" }] : []));
+        this.#newDateEffect = effect(() => {
+            if (this.monthsToShow() > 1)
+                return;
+            this.#setDateAsCurrent();
+        }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : []));
     }
-    #document;
-    toggleIsOpen(event) {
-        if (!this.disableOpenByClick()) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.isOpen.set(!this.isOpen());
-        }
+    #INIT_DATE;
+    getLastVisibleMonth() {
+        const lastMonthOffset = this.monthsToShow() - 1;
+        return this.getOffsetDate(lastMonthOffset);
     }
-    eventClose($event) {
-        if (!this.isOpen())
+    getOffsetDate(monthOffset) {
+        const date = new Date(this.currentDate());
+        date.setMonth(date.getMonth() + monthOffset);
+        return date;
+    }
+    getMonthDates(monthOffset) {
+        const offsetDate = this.getOffsetDate(monthOffset);
+        return this.#generateMonthDates(offsetDate, this.startOfWeek());
+    }
+    #newDateEffect;
+    ngOnInit() {
+        if (this.monthsToShow() === 1)
             return;
-        this.isOpen.set(false);
+        this.#setDateAsCurrent();
     }
-    #findScrollableParent(element) {
-        let parent = element.parentElement;
-        while (parent) {
-            if (SCROLLABLE_STYLES.indexOf(window?.getComputedStyle(parent).overflowY) > -1 &&
-                parent.scrollHeight > parent.clientHeight) {
-                return parent;
+    #setDateAsCurrent() {
+        const newDate = this.date();
+        if (newDate)
+            this.currentDate.set(newDate);
+        this.#findSelectedAndCalc();
+    }
+    #findSelectedAndCalc() {
+        setTimeout(() => {
+            const selectedElement = this.daysRef()?.nativeElement.querySelector('.sel');
+            if (!selectedElement) {
+                return this.selectedDateStylePosition.update((x) => (x ? { ...x, opacity: '0' } : null));
             }
-            parent = parent.parentElement;
+            this.setSelectedDateStylePosition(selectedElement);
+        });
+    }
+    #generateMonthDates(date, startOfWeek) {
+        const year = date.getUTCFullYear();
+        const month = date.getUTCMonth();
+        const firstDay = new Date(Date.UTC(year, month)).getUTCDay();
+        const daysInMonth = 32 - new Date(Date.UTC(year, month, 32)).getUTCDate();
+        const dates = [];
+        let offset = firstDay - startOfWeek;
+        if (offset < 0) {
+            offset += 7;
         }
-        return this.#document.documentElement;
+        const lastDayOfPrevMonth = new Date(Date.UTC(year, month, 0)).getUTCDate();
+        for (let i = offset - 1; i >= 0; i--) {
+            const prevMonthDate = new Date(Date.UTC(year, month - 1, lastDayOfPrevMonth - i));
+            dates.push(prevMonthDate);
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            dates.push(new Date(Date.UTC(year, month, i)));
+        }
+        let nextMonthDay = 1;
+        while (dates.length % 7 !== 0) {
+            dates.push(new Date(Date.UTC(year, month + 1, nextMonthDay++)));
+        }
+        return dates;
     }
-    #alignLeftUnder(triggerRect, menuRect) {
-        const newLeft = triggerRect.left;
-        const newTop = triggerRect.bottom + BASE_SPACE;
-        return {
-            left: newLeft,
-            top: newTop,
-        };
+    nextMonth() {
+        this.currentDate.update((currentDate) => {
+            const newDate = new Date(currentDate);
+            newDate.setMonth(currentDate.getMonth() + 1);
+            return newDate;
+        });
+        this.#findSelectedAndCalc();
     }
-    #alignTopRight(triggerRect, menuRect) {
-        const newLeft = triggerRect.right + BASE_SPACE;
-        const newTop = triggerRect.top;
-        return {
-            left: newLeft,
-            top: newTop,
-        };
+    previousMonth() {
+        this.currentDate.update((currentDate) => {
+            const newDate = new Date(currentDate);
+            newDate.setMonth(currentDate.getMonth() - 1);
+            return newDate;
+        });
+        this.#findSelectedAndCalc();
     }
-    #alignBottomRight(triggerRect, menuRect) {
-        const newLeft = triggerRect.right + BASE_SPACE;
-        const newTop = triggerRect.bottom;
-        return {
-            left: newLeft,
-            top: newTop,
+    setDate(newDate, selectedElement) {
+        const createDateWithExistingTime = (newDate, existingDate) => {
+            const hours = existingDate?.getUTCHours() ?? 0;
+            const minutes = existingDate?.getUTCMinutes() ?? 0;
+            const seconds = existingDate?.getUTCSeconds() ?? 0;
+            const milliseconds = existingDate?.getUTCMilliseconds() ?? 0;
+            return this.#getUTCDate(new Date(Date.UTC(newDate.getUTCFullYear(), newDate.getUTCMonth(), newDate.getUTCDate(), hours, minutes, seconds, milliseconds)));
         };
+        if (!this.asRange()) {
+            this.date.set(createDateWithExistingTime(newDate, this.date()));
+            this.endDate.set(null);
+        }
+        else {
+            const startDate = this.date();
+            const endDate = this.endDate();
+            const utcDate = createDateWithExistingTime(newDate, null);
+            if (!startDate) {
+                this.date.set(utcDate);
+            }
+            else if (!endDate) {
+                if (utcDate < startDate) {
+                    this.date.set(utcDate);
+                    this.endDate.set(null);
+                }
+                else {
+                    this.endDate.set(utcDate);
+                }
+            }
+            else {
+                this.date.set(utcDate);
+                this.endDate.set(null);
+            }
+        }
+        if (this.asRange())
+            return;
+        this.setSelectedDateStylePosition(selectedElement);
     }
-    #alignLeftOver(triggerRect, menuRect) {
-        const newLeft = triggerRect.left;
-        const newTop = triggerRect.bottom - triggerRect.height - menuRect.height - BASE_SPACE;
-        return {
-            left: newLeft,
-            top: newTop,
+    isDateSelected(date) {
+        const startDate = this.date();
+        const endDate = this.endDate();
+        if (startDate === null)
+            return null;
+        const startOfDay = (date) => {
+            return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 0, 0, 0, 0));
         };
-    }
-    #calculateMenuPosition() {
-        const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
-        const menuRect = this.popoverContentRef()?.nativeElement.getBoundingClientRect();
-        const tryOrderMultiLayer = [this.#alignTopRight, this.#alignBottomRight];
-        const tryOrderDefault = [this.#alignLeftUnder, this.#alignLeftOver];
-        const tryOrder = this.asMultiLayer() ? tryOrderMultiLayer : tryOrderDefault;
-        for (let i = 0; i < tryOrder.length; i++) {
-            const position = tryOrder[i](triggerRect, menuRect);
-            const outOfBoundsRight = position.left + (menuRect?.width || 0) > window.innerWidth;
-            const outOfBoundsBottom = position.top + (menuRect?.height || 0) > window.innerHeight;
-            if (!outOfBoundsRight && !outOfBoundsBottom) {
-                this.menuStyle.set({
-                    left: position.left + 'px',
-                    top: position.top + 'px',
-                });
-                return;
+        const endOfDay = (date) => {
+            return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 23, 59, 59, 999));
+        };
+        const currentDate = startOfDay(date);
+        const rangeStart = startOfDay(startDate);
+        const rangeEnd = endDate ? endOfDay(endDate) : null;
+        let classes = [];
+        if (this.asRange()) {
+            if (rangeEnd === null) {
+                if (currentDate.getTime() === rangeStart.getTime()) {
+                    classes.push('sel first last');
+                }
+            }
+            else {
+                if (currentDate.getTime() === rangeStart.getTime()) {
+                    classes.push('first');
+                }
+                if (currentDate.getTime() === startOfDay(rangeEnd).getTime()) {
+                    classes.push('last');
+                }
+                if (currentDate >= rangeStart && currentDate <= rangeEnd) {
+                    classes.push('sel');
+                    const dayOfWeek = currentDate.getUTCDay();
+                    const startOfWeek = this.startOfWeek();
+                    if (dayOfWeek === startOfWeek) {
+                        classes.push('week-start');
+                    }
+                    const endOfWeek = (startOfWeek + 6) % 7;
+                    if (dayOfWeek === endOfWeek) {
+                        classes.push('week-end');
+                    }
+                }
+                const nextDate = new Date(currentDate);
+                nextDate.setUTCDate(currentDate.getUTCDate() + 1);
+                const prevDate = new Date(currentDate);
+                prevDate.setUTCDate(currentDate.getUTCDate() - 1);
+                const isFirstOfMonth = currentDate.getUTCDate() === 1;
+                const isLastOfMonth = nextDate.getUTCMonth() !== currentDate.getUTCMonth();
+                if (isFirstOfMonth) {
+                    classes.push('month-start');
+                }
+                if (isLastOfMonth) {
+                    classes.push('month-end');
+                }
             }
         }
-        const fallbackPosition = tryOrder[0](triggerRect, menuRect);
-        this.menuStyle.set({
-            left: fallbackPosition.left + 'px',
-            top: fallbackPosition.top + 'px',
+        else {
+            if (currentDate.getTime() === rangeStart.getTime()) {
+                classes.push('sel');
+            }
+        }
+        return classes.join(' ') || null;
+    }
+    setSelectedDateStylePosition(selectedElement) {
+        this.selectedDateStylePosition.set({
+            transform: `translate(${selectedElement.offsetLeft}px, ${selectedElement.offsetTop}px)`,
+            opacity: '1',
         });
     }
-    ngOnDestroy() {
-        this.openAbort?.abort();
-        this.openAbort = null;
+    getMonthName(date) {
+        return date.toLocaleString('default', { month: 'long' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipPopoverComponent, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }, { propertyName: "popoverContentRef", first: true, predicate: ["popoverContentRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
-      <div class="trigger-wrapper">
-        <ng-content select="[trigger]" />
-        <ng-content select="button" />
-        <ng-content select="[shButton]" />
+    getFullYear(date) {
+        return date.getFullYear();
+    }
+    // Rest of the component methods remain the same, but update isCurrentMonth:
+    isCurrentMonth(date, monthOffset) {
+        const offsetDate = this.getOffsetDate(monthOffset);
+        return date.getMonth() === offsetDate.getMonth();
+    }
+    #getUTCDate(date) {
+        const offsetMinutes = date.getTimezoneOffset();
+        const timeDiffMillis = offsetMinutes * 60 * 1000;
+        return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) + timeDiffMillis);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipDatepicker, isStandalone: true, selector: "sh-datepicker", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, asRange: { classPropertyName: "asRange", publicName: "asRange", isSignal: true, isRequired: false, transformFunction: null }, monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startOfWeek: { classPropertyName: "startOfWeek", publicName: "startOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", endDate: "endDateChange" }, host: { properties: { "class.as-range": "asRange()", "class": "\"columns-\" + monthsToShow()", "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "daysRef", first: true, predicate: ["daysRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <header>
+      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <div class="title">
+        {{ getMonthName(currentDate()!) }}
+        @if (monthsToShow() > 1) {
+          - {{ getMonthName(getLastVisibleMonth()) }}
+        }
+        {{ getFullYear(currentDate()!) }}
       </div>
-      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
-    </div>
+      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+    </header>
 
-    @if (isOpen()) {
-      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
-        <div class="overlay" (click)="eventClose($event)"></div>
-        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
-          <ng-content />
+    <section class="months-container">
+      @for (monthOffset of monthOffsets(); track monthOffset) {
+        <div class="month">
+          <nav class="weekdays">
+            @for (day of weekdays(); track $index) {
+              <div>{{ day }}</div>
+            }
+          </nav>
+
+          <div class="days" #daysRef>
+            @for (calDate of getMonthDates(monthOffset); track $index) {
+              <div
+                #elementRef
+                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
+                [class]="isDateSelected(calDate)"
+                (click)="setDate(calDate, elementRef)">
+                {{ calDate.getDate() }}
+              </div>
+            }
+
+            @if (!asRange()) {
+              <article class="days">
+                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
+              </article>
+            }
+          </div>
         </div>
-      </div>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      }
+    </section>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDatepicker, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sh-popover',
-                    imports: [],
+                    selector: 'sh-datepicker',
+                    imports: [ShipIcon],
                     template: `
-    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
-      <div class="trigger-wrapper">
-        <ng-content select="[trigger]" />
-        <ng-content select="button" />
-        <ng-content select="[shButton]" />
+    <header>
+      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <div class="title">
+        {{ getMonthName(currentDate()!) }}
+        @if (monthsToShow() > 1) {
+          - {{ getMonthName(getLastVisibleMonth()) }}
+        }
+        {{ getFullYear(currentDate()!) }}
       </div>
-      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
-    </div>
+      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+    </header>
 
-    @if (isOpen()) {
-      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
-        <div class="overlay" (click)="eventClose($event)"></div>
-        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
-          <ng-content />
+    <section class="months-container">
+      @for (monthOffset of monthOffsets(); track monthOffset) {
+        <div class="month">
+          <nav class="weekdays">
+            @for (day of weekdays(); track $index) {
+              <div>{{ day }}</div>
+            }
+          </nav>
+
+          <div class="days" #daysRef>
+            @for (calDate of getMonthDates(monthOffset); track $index) {
+              <div
+                #elementRef
+                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
+                [class]="isDateSelected(calDate)"
+                (click)="setDate(calDate, elementRef)">
+                {{ calDate.getDate() }}
+              </div>
+            }
+
+            @if (!asRange()) {
+              <article class="days">
+                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
+              </article>
+            }
+          </div>
         </div>
-      </div>
-    }
+      }
+    </section>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        '[class.multi-layer]': 'asMultiLayer()',
+                        '[class.as-range]': 'asRange()',
+                        '[class]': '"columns-" + monthsToShow()',
+                        '[class.disabled]': 'disabled()',
                     },
                 }]
-        }] });
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], asRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "asRange", required: false }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOfWeek", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], daysRef: [{ type: i0.ViewChild, args: ['daysRef', { isSignal: true }] }] } });
 
-class ShipFormFieldPopoverComponent {
+const BASE_SPACE = 4;
+const SCROLLABLE_STYLES = ['scroll', 'auto'];
+const DEFAULT_OPTIONS = {
+    width: undefined,
+    height: undefined,
+    closeOnButton: true,
+    closeOnEsc: true,
+};
+class ShipPopover {
     constructor() {
-        this.#selfRef = inject(ElementRef);
+        this.#document = inject(DOCUMENT);
+        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
+        this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : []));
+        this.disableOpenByClick = input(false, ...(ngDevMode ? [{ debugName: "disableOpenByClick" }] : []));
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
         this.closed = output();
+        this.defaultOptionMerge = computed(() => ({
+            ...DEFAULT_OPTIONS,
+            ...this.options(),
+        }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : []));
+        this.triggerRef = viewChild.required('triggerRef');
+        this.popoverRef = viewChild('popoverRef', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
+        this.popoverContentRef = viewChild('popoverContentRef', ...(ngDevMode ? [{ debugName: "popoverContentRef" }] : []));
+        this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
+        this.openAbort = null;
+        this.openEffect = effect(() => {
+            const open = this.isOpen();
+            queueMicrotask(() => {
+                const popoverEl = this.popoverRef()?.nativeElement;
+                if (!popoverEl) {
+                    this.openAbort?.abort();
+                    this.openAbort = null;
+                    return;
+                }
+                if (open) {
+                    if (this.openAbort) {
+                        this.openAbort.abort();
+                    }
+                    this.openAbort = new AbortController();
+                    this.#document.addEventListener('keydown', (e) => {
+                        if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
+                            e.preventDefault();
+                        }
+                        if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
+                            this.isOpen.set(false);
+                        }
+                    }, {
+                        signal: this.openAbort?.signal,
+                    });
+                    popoverEl.showPopover();
+                    if (!this.SUPPORTS_ANCHOR) {
+                        setTimeout(() => {
+                            const scrollableParent = this.#findScrollableParent(popoverEl);
+                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), {
+                                signal: this.openAbort?.signal,
+                            });
+                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), {
+                                signal: this.openAbort?.signal,
+                            });
+                            this.#calculateMenuPosition();
+                        });
+                    }
+                }
+                else {
+                    this.closed.emit();
+                    this.openAbort?.abort();
+                    this.openAbort = null;
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     }
-    #selfRef;
-    onClick() {
-        if (this.#selfRef.nativeElement.querySelector('input')) {
-            this.#selfRef.nativeElement.querySelector('input').focus();
-        }
-        if (this.#selfRef.nativeElement.querySelector('textarea')) {
-            this.#selfRef.nativeElement.querySelector('textarea').focus();
-        }
-    }
-    close() {
-        this.closed.emit();
-    }
-    ngOnInit() {
-        const supportFieldSizing = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
-        const text = this.#selfRef.nativeElement.querySelector('textarea');
-        if (!supportFieldSizing && text !== null) {
-            const text = this.#selfRef.nativeElement.querySelector('textarea');
-            function resize() {
-                text.style.height = 'auto';
-                text.style.height = text.scrollHeight + 'px';
-            }
-            /* 0-timeout to get the already changed text */
-            function delayedResize() {
-                setTimeout(resize, 0);
-            }
-            if (text) {
-                text.addEventListener('change', resize);
-                text.addEventListener('cut', delayedResize);
-                text.addEventListener('paste', delayedResize);
-                text.addEventListener('drop', delayedResize);
-                text.addEventListener('keydown', delayedResize);
-                text.focus();
-                text.select();
-                resize();
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFormFieldPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: ShipFormFieldPopoverComponent, isStandalone: true, selector: "sh-form-field-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
-    <ng-content select="label"></ng-content>
-
-    <div class="input-wrap">
-      <div class="prefix">
-        <ng-content select="[prefix]"></ng-content>
-        <ng-content select="[textPrefix]"></ng-content>
+    #document;
+    toggleIsOpen(event) {
+        if (!this.disableOpenByClick()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isOpen.set(!this.isOpen());
+        }
+    }
+    eventClose($event) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+    }
+    #findScrollableParent(element) {
+        let parent = element.parentElement;
+        while (parent) {
+            if (SCROLLABLE_STYLES.indexOf(window?.getComputedStyle(parent).overflowY) > -1 &&
+                parent.scrollHeight > parent.clientHeight) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return this.#document.documentElement;
+    }
+    #alignLeftUnder(triggerRect, menuRect) {
+        const newLeft = triggerRect.left;
+        const newTop = triggerRect.bottom + BASE_SPACE;
+        return {
+            left: newLeft,
+            top: newTop,
+        };
+    }
+    #alignTopRight(triggerRect, menuRect) {
+        const newLeft = triggerRect.right + BASE_SPACE;
+        const newTop = triggerRect.top;
+        return {
+            left: newLeft,
+            top: newTop,
+        };
+    }
+    #alignBottomRight(triggerRect, menuRect) {
+        const newLeft = triggerRect.right + BASE_SPACE;
+        const newTop = triggerRect.bottom;
+        return {
+            left: newLeft,
+            top: newTop,
+        };
+    }
+    #alignLeftOver(triggerRect, menuRect) {
+        const newLeft = triggerRect.left;
+        const newTop = triggerRect.bottom - triggerRect.height - menuRect.height - BASE_SPACE;
+        return {
+            left: newLeft,
+            top: newTop,
+        };
+    }
+    #calculateMenuPosition() {
+        const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
+        const menuRect = this.popoverContentRef()?.nativeElement.getBoundingClientRect();
+        const tryOrderMultiLayer = [this.#alignTopRight, this.#alignBottomRight];
+        const tryOrderDefault = [this.#alignLeftUnder, this.#alignLeftOver];
+        const tryOrder = this.asMultiLayer() ? tryOrderMultiLayer : tryOrderDefault;
+        for (let i = 0; i < tryOrder.length; i++) {
+            const position = tryOrder[i](triggerRect, menuRect);
+            const outOfBoundsRight = position.left + (menuRect?.width || 0) > window.innerWidth;
+            const outOfBoundsBottom = position.top + (menuRect?.height || 0) > window.innerHeight;
+            if (!outOfBoundsRight && !outOfBoundsBottom) {
+                this.menuStyle.set({
+                    left: position.left + 'px',
+                    top: position.top + 'px',
+                });
+                return;
+            }
+        }
+        const fallbackPosition = tryOrder[0](triggerRect, menuRect);
+        this.menuStyle.set({
+            left: fallbackPosition.left + 'px',
+            top: fallbackPosition.top + 'px',
+        });
+    }
+    ngOnDestroy() {
+        this.openAbort?.abort();
+        this.openAbort = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipPopover, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }, { propertyName: "popoverContentRef", first: true, predicate: ["popoverContentRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
+      <div class="trigger-wrapper">
+        <ng-content select="[trigger]" />
+        <ng-content select="button" />
+        <ng-content select="[shButton]" />
       </div>
-
-      <div class="prefix-space"></div>
-
-      <sh-popover
-        [(isOpen)]="isOpen"
-        (closed)="close()"
-        [options]="{
-          closeOnButton: false,
-          closeOnEsc: true,
-        }">
-        <ng-content trigger select="input"></ng-content>
-
-        <ng-content select="[popoverContent]"></ng-content>
-      </sh-popover>
-
-      <ng-content select="textarea"></ng-content>
-
-      <ng-content select="[textSuffix]"></ng-content>
-      <div class="suffix-space"></div>
-      <ng-content select="[suffix]"></ng-content>
+      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
     </div>
 
-    <div class="helpers">
-      <div class="error-wrap">
-        <ng-content select="[error]"></ng-content>
-      </div>
-
-      <div class="hint">
-        <ng-content select="[hint]"></ng-content>
+    @if (isOpen()) {
+      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
+        <div class="overlay" (click)="eventClose($event)"></div>
+        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
+          <ng-content />
+        </div>
       </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopoverComponent, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFormFieldPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipPopover, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sh-form-field-popover',
-                    imports: [ShipPopoverComponent],
+                    selector: 'sh-popover',
+                    imports: [],
                     template: `
+    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
+      <div class="trigger-wrapper">
+        <ng-content select="[trigger]" />
+        <ng-content select="button" />
+        <ng-content select="[shButton]" />
+      </div>
+      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
+    </div>
+
+    @if (isOpen()) {
+      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
+        <div class="overlay" (click)="eventClose($event)"></div>
+        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
+          <ng-content />
+        </div>
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class.multi-layer]': 'asMultiLayer()',
+                    },
+                }]
+        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], disableOpenByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOpenByClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: ['popoverRef', { isSignal: true }] }], popoverContentRef: [{ type: i0.ViewChild, args: ['popoverContentRef', { isSignal: true }] }] } });
+
+class ShipFormFieldPopover {
+    constructor() {
+        this.#selfRef = inject(ElementRef);
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.closed = output();
+    }
+    #selfRef;
+    onClick() {
+        if (this.#selfRef.nativeElement.querySelector('input')) {
+            this.#selfRef.nativeElement.querySelector('input').focus();
+        }
+        if (this.#selfRef.nativeElement.querySelector('textarea')) {
+            this.#selfRef.nativeElement.querySelector('textarea').focus();
+        }
+    }
+    close() {
+        this.closed.emit();
+    }
+    ngOnInit() {
+        const supportFieldSizing = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
+        const text = this.#selfRef.nativeElement.querySelector('textarea');
+        if (!supportFieldSizing && text !== null) {
+            const text = this.#selfRef.nativeElement.querySelector('textarea');
+            function resize() {
+                text.style.height = 'auto';
+                text.style.height = text.scrollHeight + 'px';
+            }
+            /* 0-timeout to get the already changed text */
+            function delayedResize() {
+                setTimeout(resize, 0);
+            }
+            if (text) {
+                text.addEventListener('change', resize);
+                text.addEventListener('cut', delayedResize);
+                text.addEventListener('paste', delayedResize);
+                text.addEventListener('drop', delayedResize);
+                text.addEventListener('keydown', delayedResize);
+                text.focus();
+                text.select();
+                resize();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFormFieldPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ShipFormFieldPopover, isStandalone: true, selector: "sh-form-field-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
     <ng-content select="label"></ng-content>
 
     <div class="input-wrap">
@@ -2469,384 +2756,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         }">
         <ng-content trigger select="input"></ng-content>
 
-        <ng-content select="[popoverContent]"></ng-content>
-      </sh-popover>
-
-      <ng-content select="textarea"></ng-content>
-
-      <ng-content select="[textSuffix]"></ng-content>
-      <div class="suffix-space"></div>
-      <ng-content select="[suffix]"></ng-content>
-    </div>
-
-    <div class="helpers">
-      <div class="error-wrap">
-        <ng-content select="[error]"></ng-content>
-      </div>
-
-      <div class="hint">
-        <ng-content select="[hint]"></ng-content>
-      </div>
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-function contentProjectionSignal(querySelector) {
-    const hostElement = inject((ElementRef)).nativeElement;
-    const destroyRef = inject(DestroyRef);
-    const projectedElementsSignal = signal([], ...(ngDevMode ? [{ debugName: "projectedElementsSignal" }] : []));
-    const updateElements = () => {
-        projectedElementsSignal.set(Array.from(hostElement.querySelectorAll(querySelector)));
-    };
-    updateElements();
-    if (typeof MutationObserver === 'undefined')
-        return projectedElementsSignal.asReadonly();
-    const observer = new MutationObserver((mutations) => {
-        const hasChildListChanges = mutations.some((mutation) => mutation.type === 'childList');
-        if (hasChildListChanges) {
-            updateElements();
-        }
-    });
-    observer.observe(hostElement, { childList: true });
-    destroyRef.onDestroy(() => observer.disconnect());
-    return projectedElementsSignal.asReadonly();
-}
-
-class ShipDatepickerComponent {
-    constructor() {
-        this.#INIT_DATE = this.#getUTCDate(new Date());
-        this.date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : []));
-        this.endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
-        this.asRange = input(false, ...(ngDevMode ? [{ debugName: "asRange" }] : []));
-        this.monthsToShow = input(1, ...(ngDevMode ? [{ debugName: "monthsToShow" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.startOfWeek = input(1, ...(ngDevMode ? [{ debugName: "startOfWeek" }] : []));
-        this.weekdayLabels = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : []));
-        this.daysRef = viewChild('daysRef', ...(ngDevMode ? [{ debugName: "daysRef" }] : []));
-        this.currentDate = signal(this.date() ?? this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
-        this.monthOffsets = computed(() => {
-            return Array.from({ length: this.monthsToShow() }, (_, i) => i);
-        }, ...(ngDevMode ? [{ debugName: "monthOffsets" }] : []));
-        this.selectedDateStylePosition = signal(null, ...(ngDevMode ? [{ debugName: "selectedDateStylePosition" }] : []));
-        this.weekdays = computed(() => {
-            const startOfWeek = this.startOfWeek();
-            const weekdayLabels = this.weekdayLabels();
-            return weekdayLabels.slice(startOfWeek).concat(weekdayLabels.slice(0, startOfWeek));
-        }, ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
-        this.currentClasses = classMutationSignal();
-        this.someEffect = effect(() => {
-            const _ = this.currentClasses();
-            this.#findSelectedAndCalc();
-        }, ...(ngDevMode ? [{ debugName: "someEffect" }] : []));
-        this.#newDateEffect = effect(() => {
-            if (this.monthsToShow() > 1)
-                return;
-            this.#setDateAsCurrent();
-        }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : []));
-    }
-    #INIT_DATE;
-    getLastVisibleMonth() {
-        const lastMonthOffset = this.monthsToShow() - 1;
-        return this.getOffsetDate(lastMonthOffset);
-    }
-    getOffsetDate(monthOffset) {
-        const date = new Date(this.currentDate());
-        date.setMonth(date.getMonth() + monthOffset);
-        return date;
-    }
-    getMonthDates(monthOffset) {
-        const offsetDate = this.getOffsetDate(monthOffset);
-        return this.#generateMonthDates(offsetDate, this.startOfWeek());
-    }
-    #newDateEffect;
-    ngOnInit() {
-        if (this.monthsToShow() === 1)
-            return;
-        this.#setDateAsCurrent();
-    }
-    #setDateAsCurrent() {
-        const newDate = this.date();
-        if (newDate)
-            this.currentDate.set(newDate);
-        this.#findSelectedAndCalc();
-    }
-    #findSelectedAndCalc() {
-        setTimeout(() => {
-            const selectedElement = this.daysRef()?.nativeElement.querySelector('.sel');
-            if (!selectedElement) {
-                return this.selectedDateStylePosition.update((x) => (x ? { ...x, opacity: '0' } : null));
-            }
-            this.setSelectedDateStylePosition(selectedElement);
-        });
-    }
-    #generateMonthDates(date, startOfWeek) {
-        const year = date.getUTCFullYear();
-        const month = date.getUTCMonth();
-        const firstDay = new Date(Date.UTC(year, month)).getUTCDay();
-        const daysInMonth = 32 - new Date(Date.UTC(year, month, 32)).getUTCDate();
-        const dates = [];
-        let offset = firstDay - startOfWeek;
-        if (offset < 0) {
-            offset += 7;
-        }
-        const lastDayOfPrevMonth = new Date(Date.UTC(year, month, 0)).getUTCDate();
-        for (let i = offset - 1; i >= 0; i--) {
-            const prevMonthDate = new Date(Date.UTC(year, month - 1, lastDayOfPrevMonth - i));
-            dates.push(prevMonthDate);
-        }
-        for (let i = 1; i <= daysInMonth; i++) {
-            dates.push(new Date(Date.UTC(year, month, i)));
-        }
-        let nextMonthDay = 1;
-        while (dates.length % 7 !== 0) {
-            dates.push(new Date(Date.UTC(year, month + 1, nextMonthDay++)));
-        }
-        return dates;
-    }
-    nextMonth() {
-        this.currentDate.update((currentDate) => {
-            const newDate = new Date(currentDate);
-            newDate.setMonth(currentDate.getMonth() + 1);
-            return newDate;
-        });
-        this.#findSelectedAndCalc();
-    }
-    previousMonth() {
-        this.currentDate.update((currentDate) => {
-            const newDate = new Date(currentDate);
-            newDate.setMonth(currentDate.getMonth() - 1);
-            return newDate;
-        });
-        this.#findSelectedAndCalc();
-    }
-    setDate(newDate, selectedElement) {
-        const createDateWithExistingTime = (newDate, existingDate) => {
-            const hours = existingDate?.getUTCHours() ?? 0;
-            const minutes = existingDate?.getUTCMinutes() ?? 0;
-            const seconds = existingDate?.getUTCSeconds() ?? 0;
-            const milliseconds = existingDate?.getUTCMilliseconds() ?? 0;
-            return this.#getUTCDate(new Date(Date.UTC(newDate.getUTCFullYear(), newDate.getUTCMonth(), newDate.getUTCDate(), hours, minutes, seconds, milliseconds)));
-        };
-        if (!this.asRange()) {
-            this.date.set(createDateWithExistingTime(newDate, this.date()));
-            this.endDate.set(null);
-        }
-        else {
-            const startDate = this.date();
-            const endDate = this.endDate();
-            const utcDate = createDateWithExistingTime(newDate, null);
-            if (!startDate) {
-                this.date.set(utcDate);
-            }
-            else if (!endDate) {
-                if (utcDate < startDate) {
-                    this.date.set(utcDate);
-                    this.endDate.set(null);
-                }
-                else {
-                    this.endDate.set(utcDate);
-                }
-            }
-            else {
-                this.date.set(utcDate);
-                this.endDate.set(null);
-            }
-        }
-        if (this.asRange())
-            return;
-        this.setSelectedDateStylePosition(selectedElement);
-    }
-    isDateSelected(date) {
-        const startDate = this.date();
-        const endDate = this.endDate();
-        if (startDate === null)
-            return null;
-        const startOfDay = (date) => {
-            return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 0, 0, 0, 0));
-        };
-        const endOfDay = (date) => {
-            return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 23, 59, 59, 999));
-        };
-        const currentDate = startOfDay(date);
-        const rangeStart = startOfDay(startDate);
-        const rangeEnd = endDate ? endOfDay(endDate) : null;
-        let classes = [];
-        if (this.asRange()) {
-            if (rangeEnd === null) {
-                if (currentDate.getTime() === rangeStart.getTime()) {
-                    classes.push('sel first last');
-                }
-            }
-            else {
-                if (currentDate.getTime() === rangeStart.getTime()) {
-                    classes.push('first');
-                }
-                if (currentDate.getTime() === startOfDay(rangeEnd).getTime()) {
-                    classes.push('last');
-                }
-                if (currentDate >= rangeStart && currentDate <= rangeEnd) {
-                    classes.push('sel');
-                    const dayOfWeek = currentDate.getUTCDay();
-                    const startOfWeek = this.startOfWeek();
-                    if (dayOfWeek === startOfWeek) {
-                        classes.push('week-start');
-                    }
-                    const endOfWeek = (startOfWeek + 6) % 7;
-                    if (dayOfWeek === endOfWeek) {
-                        classes.push('week-end');
-                    }
-                }
-                const nextDate = new Date(currentDate);
-                nextDate.setUTCDate(currentDate.getUTCDate() + 1);
-                const prevDate = new Date(currentDate);
-                prevDate.setUTCDate(currentDate.getUTCDate() - 1);
-                const isFirstOfMonth = currentDate.getUTCDate() === 1;
-                const isLastOfMonth = nextDate.getUTCMonth() !== currentDate.getUTCMonth();
-                if (isFirstOfMonth) {
-                    classes.push('month-start');
-                }
-                if (isLastOfMonth) {
-                    classes.push('month-end');
-                }
-            }
-        }
-        else {
-            if (currentDate.getTime() === rangeStart.getTime()) {
-                classes.push('sel');
-            }
-        }
-        return classes.join(' ') || null;
-    }
-    setSelectedDateStylePosition(selectedElement) {
-        this.selectedDateStylePosition.set({
-            transform: `translate(${selectedElement.offsetLeft}px, ${selectedElement.offsetTop}px)`,
-            opacity: '1',
-        });
-    }
-    getMonthName(date) {
-        return date.toLocaleString('default', { month: 'long' });
-    }
-    getFullYear(date) {
-        return date.getFullYear();
-    }
-    // Rest of the component methods remain the same, but update isCurrentMonth:
-    isCurrentMonth(date, monthOffset) {
-        const offsetDate = this.getOffsetDate(monthOffset);
-        return date.getMonth() === offsetDate.getMonth();
-    }
-    #getUTCDate(date) {
-        const offsetMinutes = date.getTimezoneOffset();
-        const timeDiffMillis = offsetMinutes * 60 * 1000;
-        return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) + timeDiffMillis);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDatepickerComponent, isStandalone: true, selector: "sh-datepicker", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, asRange: { classPropertyName: "asRange", publicName: "asRange", isSignal: true, isRequired: false, transformFunction: null }, monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startOfWeek: { classPropertyName: "startOfWeek", publicName: "startOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", endDate: "endDateChange" }, host: { properties: { "class.as-range": "asRange()", "class": "\"columns-\" + monthsToShow()", "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "daysRef", first: true, predicate: ["daysRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <header>
-      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
-      <div class="title">
-        {{ getMonthName(currentDate()!) }}
-        @if (monthsToShow() > 1) {
-          - {{ getMonthName(getLastVisibleMonth()) }}
-        }
-        {{ getFullYear(currentDate()!) }}
-      </div>
-      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
-    </header>
-
-    <section class="months-container">
-      @for (monthOffset of monthOffsets(); track monthOffset) {
-        <div class="month">
-          <nav class="weekdays">
-            @for (day of weekdays(); track $index) {
-              <div>{{ day }}</div>
-            }
-          </nav>
+        <ng-content select="[popoverContent]"></ng-content>
+      </sh-popover>
 
-          <div class="days" #daysRef>
-            @for (calDate of getMonthDates(monthOffset); track $index) {
-              <div
-                #elementRef
-                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
-                [class]="isDateSelected(calDate)"
-                (click)="setDate(calDate, elementRef)">
-                {{ calDate.getDate() }}
-              </div>
-            }
+      <ng-content select="textarea"></ng-content>
 
-            @if (!asRange()) {
-              <article class="days">
-                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
-              </article>
-            }
-          </div>
-        </div>
-      }
-    </section>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      <ng-content select="[textSuffix]"></ng-content>
+      <div class="suffix-space"></div>
+      <ng-content select="[suffix]"></ng-content>
+    </div>
+
+    <div class="helpers">
+      <div class="error-wrap">
+        <ng-content select="[error]"></ng-content>
+      </div>
+
+      <div class="hint">
+        <ng-content select="[hint]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFormFieldPopover, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sh-datepicker',
-                    imports: [ShipIconComponent],
+                    selector: 'sh-form-field-popover',
+                    imports: [ShipPopover],
                     template: `
-    <header>
-      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
-      <div class="title">
-        {{ getMonthName(currentDate()!) }}
-        @if (monthsToShow() > 1) {
-          - {{ getMonthName(getLastVisibleMonth()) }}
-        }
-        {{ getFullYear(currentDate()!) }}
+    <ng-content select="label"></ng-content>
+
+    <div class="input-wrap">
+      <div class="prefix">
+        <ng-content select="[prefix]"></ng-content>
+        <ng-content select="[textPrefix]"></ng-content>
       </div>
-      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
-    </header>
 
-    <section class="months-container">
-      @for (monthOffset of monthOffsets(); track monthOffset) {
-        <div class="month">
-          <nav class="weekdays">
-            @for (day of weekdays(); track $index) {
-              <div>{{ day }}</div>
-            }
-          </nav>
+      <div class="prefix-space"></div>
 
-          <div class="days" #daysRef>
-            @for (calDate of getMonthDates(monthOffset); track $index) {
-              <div
-                #elementRef
-                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
-                [class]="isDateSelected(calDate)"
-                (click)="setDate(calDate, elementRef)">
-                {{ calDate.getDate() }}
-              </div>
-            }
+      <sh-popover
+        [(isOpen)]="isOpen"
+        (closed)="close()"
+        [options]="{
+          closeOnButton: false,
+          closeOnEsc: true,
+        }">
+        <ng-content trigger select="input"></ng-content>
 
-            @if (!asRange()) {
-              <article class="days">
-                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
-              </article>
-            }
-          </div>
-        </div>
-      }
-    </section>
+        <ng-content select="[popoverContent]"></ng-content>
+      </sh-popover>
+
+      <ng-content select="textarea"></ng-content>
+
+      <ng-content select="[textSuffix]"></ng-content>
+      <div class="suffix-space"></div>
+      <ng-content select="[suffix]"></ng-content>
+    </div>
+
+    <div class="helpers">
+      <div class="error-wrap">
+        <ng-content select="[error]"></ng-content>
+      </div>
+
+      <div class="hint">
+        <ng-content select="[hint]"></ng-content>
+      </div>
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class.as-range]': 'asRange()',
-                        '[class]': '"columns-" + monthsToShow()',
-                        '[class.disabled]': 'disabled()',
-                    },
                 }]
-        }] });
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+function contentProjectionSignal(querySelector) {
+    const hostElement = inject((ElementRef)).nativeElement;
+    const destroyRef = inject(DestroyRef);
+    const projectedElementsSignal = signal([], ...(ngDevMode ? [{ debugName: "projectedElementsSignal" }] : []));
+    const updateElements = () => {
+        projectedElementsSignal.set(Array.from(hostElement.querySelectorAll(querySelector)));
+    };
+    updateElements();
+    if (typeof MutationObserver === 'undefined')
+        return projectedElementsSignal.asReadonly();
+    const observer = new MutationObserver((mutations) => {
+        const hasChildListChanges = mutations.some((mutation) => mutation.type === 'childList');
+        if (hasChildListChanges) {
+            updateElements();
+        }
+    });
+    observer.observe(hostElement, { childList: true });
+    destroyRef.onDestroy(() => observer.disconnect());
+    return projectedElementsSignal.asReadonly();
+}
 
-class ShipDatepickerInputComponent {
+class ShipDatepickerInput {
     constructor() {
         // #INIT_DATE = this.#getUTCDate(new Date());
         this.ngModels = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "ngModels" }] : []));
@@ -2932,8 +2936,8 @@ class ShipDatepickerInputComponent {
         const timeDiffMillis = offsetMinutes * 60 * 1000;
         return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) + timeDiffMillis);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDatepickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDatepickerInputComponent, isStandalone: true, selector: "sh-datepicker-input", inputs: { masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "ngModels", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipDatepickerInput, isStandalone: true, selector: "sh-datepicker-input", inputs: { masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "ngModels", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
@@ -2961,13 +2965,13 @@ class ShipDatepickerInputComponent {
     </sh-form-field-popover>
 
     <ng-template #defaultIndicator></ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepickerComponent, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopoverComponent, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDatepickerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDatepickerInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-datepicker-input',
-                    imports: [ShipDatepickerComponent, ShipFormFieldPopoverComponent, ShipIconComponent],
+                    imports: [ShipDatepicker, ShipFormFieldPopover, ShipIcon],
                     providers: [DatePipe],
                     template: `
     <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
@@ -3000,9 +3004,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { ngModels: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgModel), { isSignal: true }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
 
-class ShipDaterangeInputComponent {
+class ShipDaterangeInput {
     #selfRef;
     #datePipe;
     get classes() {
@@ -3101,8 +3105,8 @@ class ShipDaterangeInputComponent {
             end: this.endDate(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDaterangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDaterangeInputComponent, isStandalone: true, selector: "sh-daterange-input", inputs: { monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "startDateInputs", predicate: ["startDate"], isSignal: true }, { propertyName: "endDateInputs", predicate: ["endDate"], isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDaterangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipDaterangeInput, isStandalone: true, selector: "sh-daterange-input", inputs: { monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "startDateInputs", predicate: ["startDate"], isSignal: true }, { propertyName: "endDateInputs", predicate: ["endDate"], isSignal: true }], ngImport: i0, template: `
     <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
@@ -3133,13 +3137,13 @@ class ShipDaterangeInputComponent {
         }
       </div>
     </sh-form-field-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepickerComponent, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopoverComponent, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDaterangeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDaterangeInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-daterange-input',
-                    imports: [ShipDatepickerComponent, ShipFormFieldPopoverComponent, ShipIconComponent],
+                    imports: [ShipDatepicker, ShipFormFieldPopover, ShipIcon],
                     providers: [DatePipe],
                     template: `
     <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
@@ -3175,15 +3179,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { startDateInputs: [{ type: i0.ContentChildren, args: ['startDate', { isSignal: true }] }], endDateInputs: [{ type: i0.ContentChildren, args: ['endDate', { isSignal: true }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
 
-class ShipDividerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipDividerComponent, isStandalone: true, selector: "sh-divider", ngImport: i0, template: `
+class ShipDivider {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipDivider, isStandalone: true, selector: "sh-divider", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipDivider, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-divider',
@@ -3195,9 +3199,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipEventCardComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipEventCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipEventCardComponent, isStandalone: true, selector: "sh-event-card", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: `
+class ShipEventCard {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipEventCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipEventCard, isStandalone: true, selector: "sh-event-card", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: `
     <div class="content">
       <ng-content />
     </div>
@@ -3208,7 +3212,7 @@ class ShipEventCardComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipEventCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipEventCard, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-event-card',
@@ -3230,7 +3234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipFormFieldComponent {
+class ShipFormField {
     #selfRef = inject(ElementRef);
     onClick() {
         if (this.#selfRef.nativeElement.querySelector('input')) {
@@ -3264,8 +3268,8 @@ class ShipFormFieldComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipFormFieldComponent, isStandalone: true, selector: "sh-form-field", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipFormField, isStandalone: true, selector: "sh-form-field", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
     <ng-content select="label"></ng-content>
 
     <div class="input-wrap">
@@ -3296,7 +3300,7 @@ class ShipFormFieldComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFormField, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-form-field',
@@ -3338,7 +3342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['click']
             }] } });
 
-class ShipFileUploadComponent {
+class ShipFileUpload {
     constructor() {
         this._el = inject(ElementRef);
         this.inputRef = viewChild.required('input');
@@ -3387,8 +3391,8 @@ class ShipFileUploadComponent {
             this.files.set(newFiles);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipFileUploadComponent, isStandalone: true, selector: "sh-file-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, overlayText: { classPropertyName: "overlayText", publicName: "overlayText", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placeholder: "placeholderChange", files: "filesChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipFileUpload, isStandalone: true, selector: "sh-file-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, overlayText: { classPropertyName: "overlayText", publicName: "overlayText", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placeholder: "placeholderChange", files: "filesChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-form-field [class]="fileUploadClasses()">
       <ng-content select="label" ngProjectAs="label"></ng-content>
 
@@ -3406,13 +3410,13 @@ class ShipFileUploadComponent {
 
       <sh-icon suffix>upload-simple</sh-icon>
     </sh-form-field>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipFormFieldComponent, selector: "sh-form-field" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipFormField, selector: "sh-form-field" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFileUpload, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-file-upload',
-                    imports: [ShipFormFieldComponent, ShipIconComponent],
+                    imports: [ShipFormField, ShipIcon],
                     template: `
     <sh-form-field [class]="fileUploadClasses()">
       <ng-content select="label" ngProjectAs="label"></ng-content>
@@ -3434,15 +3438,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], overlayText: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayText", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }] } });
 
-class ShipListComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipListComponent, isStandalone: true, selector: "sh-list", ngImport: i0, template: `
+class ShipList {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipList, isStandalone: true, selector: "sh-list", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipList, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-list',
@@ -3660,7 +3664,7 @@ function observeChildren(parentEl, elementTags) {
     };
 }
 
-class ShipMenuComponent {
+class ShipMenu {
     constructor() {
         this.#document = inject(DOCUMENT);
         this.#renderer = inject(Renderer2);
@@ -3896,8 +3900,8 @@ class ShipMenuComponent {
             this.abortController = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipMenuComponent, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipMenu, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-popover
       #formFieldWrapper
       [(isOpen)]="isOpen"
@@ -3930,13 +3934,13 @@ class ShipMenuComponent {
         <ng-content select="[menu]" />
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopoverComponent, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormFieldComponent, selector: "sh-form-field" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-menu',
-                    imports: [ShipPopoverComponent, ShipFormFieldComponent, ShipIconComponent],
+                    imports: [ShipPopover, ShipFormField, ShipIcon],
                     template: `
     <sh-popover
       #formFieldWrapper
@@ -3978,18 +3982,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.multi-layer]': 'asMultiLayer()',
                     },
                 }]
-        }] });
+        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], openIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customOptionElementSelectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOptionElementSelectors", required: false }] }], keepClickedOptionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepClickedOptionActive", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], optionsRef: [{ type: i0.ViewChild, args: ['optionsRef', { isSignal: true }] }] } });
 
-class ShipProgressBarComponent {
+class ShipProgressBar {
     constructor() {
         this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: ShipProgressBarComponent, isStandalone: true, selector: "sh-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ShipProgressBar, isStandalone: true, selector: "sh-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="progress-bar" [style.width.%]="value()"></div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipProgressBar, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-progress-bar',
@@ -3999,20 +4003,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
-class ShipRadioComponent {
+class ShipRadio {
     constructor() {
         this.currentClassList = classMutationSignal();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipRadioComponent, isStandalone: true, selector: "sh-radio", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipRadio, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipRadio, isStandalone: true, selector: "sh-radio", ngImport: i0, template: `
     <div class="radio sh-sheet" [class]="currentClassList()"></div>
 
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipRadio, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-radio',
@@ -4026,7 +4030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipRangeSliderComponent {
+class ShipRangeSlider {
     constructor() {
         this.#selfRef = inject((ElementRef));
         this.#observer = null;
@@ -4083,7 +4087,7 @@ class ShipRangeSliderComponent {
             this.#setupMutationObserver();
         }
         else {
-            console.error('ShipRangeSliderComponent: No <input type="range"> element found projected inside.');
+            console.error('ShipRangeSlider: No <input type="range"> element found projected inside.');
         }
     }
     setNewInputValue(value) {
@@ -4207,8 +4211,8 @@ class ShipRangeSliderComponent {
             this.#inputElement.oninput = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: ShipRangeSliderComponent, isStandalone: true, selector: "sh-range-slider", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.has-input": "this.hasInputElement" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ShipRangeSlider, isStandalone: true, selector: "sh-range-slider", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.has-input": "this.hasInputElement" } }, ngImport: i0, template: `
     <div class="label">
       <ng-content select="label"></ng-content>
     </div>
@@ -4234,7 +4238,7 @@ class ShipRangeSliderComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipRangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipRangeSlider, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-range-slider',
@@ -4266,16 +4270,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { hasInputElement: [{
+        }], propDecorators: { unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hasInputElement: [{
                 type: HostBinding,
                 args: ['class.has-input']
             }] } });
 
-class ShipSpinnerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipSpinnerComponent, isStandalone: true, selector: "sh-spinner", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class ShipSpinner {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipSpinner, isStandalone: true, selector: "sh-spinner", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSpinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-spinner',
@@ -4285,7 +4289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipSelectComponent {
+class ShipSelect {
     constructor() {
         this.#selfRef = inject((ElementRef));
         this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
@@ -4848,8 +4852,8 @@ class ShipSelectComponent {
             this.#inputObserver.disconnect();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipSelectComponent, isStandalone: true, selector: "sh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, asFreeText: { classPropertyName: "asFreeText", publicName: "asFreeText", isSignal: true, isRequired: false, transformFunction: null }, optionTitle: { classPropertyName: "optionTitle", publicName: "optionTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextTitle: { classPropertyName: "freeTextTitle", publicName: "freeTextTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextPlaceholder: { classPropertyName: "freeTextPlaceholder", publicName: "freeTextPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, validateFreeText: { classPropertyName: "validateFreeText", publicName: "validateFreeText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lazySearch: { classPropertyName: "lazySearch", publicName: "lazySearch", isSignal: true, isRequired: false, transformFunction: null }, inlineSearch: { classPropertyName: "inlineSearch", publicName: "inlineSearch", isSignal: true, isRequired: false, transformFunction: null }, asText: { classPropertyName: "asText", publicName: "asText", isSignal: true, isRequired: false, transformFunction: null }, isClearable: { classPropertyName: "isClearable", publicName: "isClearable", isSignal: true, isRequired: false, transformFunction: null }, selectMultiple: { classPropertyName: "selectMultiple", publicName: "selectMultiple", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTemplate: { classPropertyName: "selectedOptionTemplate", publicName: "selectedOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, freeTextOptionTemplate: { classPropertyName: "freeTextOptionTemplate", publicName: "freeTextOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", disabled: "disabledChange", isOpen: "isOpenChange", isLoading: "isLoadingChange", options: "optionsChange", selectedOptions: "selectedOptionsChange", cleared: "cleared", onAddNewFreeTextOption: "onAddNewFreeTextOption" }, host: { properties: { "class.multiple": "selectMultiple()" } }, queries: [{ propertyName: "inlineTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsWrapRef", first: true, predicate: ["optionsWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipSelect, isStandalone: true, selector: "sh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, asFreeText: { classPropertyName: "asFreeText", publicName: "asFreeText", isSignal: true, isRequired: false, transformFunction: null }, optionTitle: { classPropertyName: "optionTitle", publicName: "optionTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextTitle: { classPropertyName: "freeTextTitle", publicName: "freeTextTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextPlaceholder: { classPropertyName: "freeTextPlaceholder", publicName: "freeTextPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, validateFreeText: { classPropertyName: "validateFreeText", publicName: "validateFreeText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lazySearch: { classPropertyName: "lazySearch", publicName: "lazySearch", isSignal: true, isRequired: false, transformFunction: null }, inlineSearch: { classPropertyName: "inlineSearch", publicName: "inlineSearch", isSignal: true, isRequired: false, transformFunction: null }, asText: { classPropertyName: "asText", publicName: "asText", isSignal: true, isRequired: false, transformFunction: null }, isClearable: { classPropertyName: "isClearable", publicName: "isClearable", isSignal: true, isRequired: false, transformFunction: null }, selectMultiple: { classPropertyName: "selectMultiple", publicName: "selectMultiple", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTemplate: { classPropertyName: "selectedOptionTemplate", publicName: "selectedOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, freeTextOptionTemplate: { classPropertyName: "freeTextOptionTemplate", publicName: "freeTextOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", disabled: "disabledChange", isOpen: "isOpenChange", isLoading: "isLoadingChange", options: "optionsChange", selectedOptions: "selectedOptionsChange", cleared: "cleared", onAddNewFreeTextOption: "onAddNewFreeTextOption" }, host: { properties: { "class.multiple": "selectMultiple()" } }, queries: [{ propertyName: "inlineTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsWrapRef", first: true, predicate: ["optionsWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @let _placeholderTemplate = placeholderTemplate();
     @let _optionTemplate = optionTemplate();
     @let _freeTextOptionTemplate = freeTextOptionTemplate();
@@ -5002,22 +5006,13 @@ class ShipSelectComponent {
         }
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopoverComponent, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormFieldComponent, selector: "sh-form-field" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }, { kind: "component", type: ShipCheckboxComponent, selector: "sh-checkbox" }, { kind: "component", type: ShipSpinnerComponent, selector: "sh-spinner" }, { kind: "component", type: ShipChipComponent, selector: "sh-chip" }, { kind: "component", type: ShipDividerComponent, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox" }, { kind: "component", type: ShipSpinner, selector: "sh-spinner" }, { kind: "component", type: ShipChip, selector: "sh-chip" }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-select',
-                    imports: [
-                        NgTemplateOutlet,
-                        ShipPopoverComponent,
-                        ShipFormFieldComponent,
-                        ShipIconComponent,
-                        ShipCheckboxComponent,
-                        ShipSpinnerComponent,
-                        ShipChipComponent,
-                        ShipDividerComponent,
-                    ],
+                    imports: [NgTemplateOutlet, ShipPopover, ShipFormField, ShipIcon, ShipCheckbox, ShipSpinner, ShipChip, ShipDivider],
                     template: `
     @let _placeholderTemplate = placeholderTemplate();
     @let _optionTemplate = optionTemplate();
@@ -5177,7 +5172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], asFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "asFreeText", required: false }] }], optionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTitle", required: false }] }], freeTextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextTitle", required: false }] }], freeTextPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextPlaceholder", required: false }] }], validateFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFreeText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], lazySearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazySearch", required: false }] }], inlineSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineSearch", required: false }] }], asText: [{ type: i0.Input, args: [{ isSignal: true, alias: "asText", required: false }] }], isClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClearable", required: false }] }], selectMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMultiple", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], selectedOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptionTemplate", required: false }] }], placeholderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTemplate", required: false }] }], freeTextOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextOptionTemplate", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }, { type: i0.Output, args: ["optionsChange"] }], selectedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptions", required: false }] }, { type: i0.Output, args: ["selectedOptionsChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], onAddNewFreeTextOption: [{ type: i0.Output, args: ["onAddNewFreeTextOption"] }], inlineTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], optionsWrapRef: [{ type: i0.ViewChild, args: ['optionsWrap', { isSignal: true }] }] } });
 
 function watchHostClass(className) {
     const elementRef = inject(ElementRef);
@@ -5204,7 +5199,7 @@ function watchHostClass(className) {
     });
     return hasClass;
 }
-class ShipSidenavComponent {
+class ShipSidenav {
     constructor() {
         this.#document = inject(DOCUMENT);
         this.#selfRef = inject(ElementRef);
@@ -5325,8 +5320,8 @@ class ShipSidenavComponent {
         e.stopPropagation();
         this.isDragging.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipSidenavComponent, isStandalone: true, selector: "sh-sidenav", inputs: { disableDrag: { classPropertyName: "disableDrag", publicName: "disableDrag", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { properties: { "class.open": "isOpen()", "class.closed": "!isOpen()", "class.is-dragging": "isDragging()" } }, viewQueries: [{ propertyName: "dragImageElement", first: true, predicate: ["dragImageElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipSidenav, isStandalone: true, selector: "sh-sidenav", inputs: { disableDrag: { classPropertyName: "disableDrag", publicName: "disableDrag", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { properties: { "class.open": "isOpen()", "class.closed": "!isOpen()", "class.is-dragging": "isDragging()" } }, viewQueries: [{ propertyName: "dragImageElement", first: true, predicate: ["dragImageElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (isOverlay() && !disableDrag()) {
       <div #dragImageElement class="drag-image"></div>
     }
@@ -5363,7 +5358,7 @@ class ShipSidenavComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSidenav, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-sidenav',
@@ -5410,9 +5405,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.is-dragging]': 'isDragging()',
                     },
                 }]
-        }] });
+        }], propDecorators: { disableDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDrag", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], dragImageElement: [{ type: i0.ViewChild, args: ['dragImageElement', { isSignal: true }] }] } });
 
-class GridSortableDirective {
+class GridSortable {
     #selfRef = inject((ElementRef));
     #renderer = inject(Renderer2);
     #draggedItem = null;
@@ -5442,10 +5437,10 @@ class GridSortableDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GridSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: GridSortableDirective, isStandalone: true, selector: "[shGridSortable]", host: { listeners: { "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GridSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: GridSortable, isStandalone: true, selector: "[shGridSortable]", host: { listeners: { "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GridSortableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GridSortable, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -5462,47 +5457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['dragenter', ['$event']]
             }] } });
 
-class ShipSortableComponent {
-    constructor() {
-        this.templateOne = contentChild.required('templateOne');
-        this.templateTwo = contentChild.required('templateTwo');
-        this.placeholderRef = viewChild.required('placeholderRef');
-        this.items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSortableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipSortableComponent, isStandalone: true, selector: "sh-sortable", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, queries: [{ propertyName: "templateOne", first: true, predicate: ["templateOne"], descendants: true, isSignal: true }, { propertyName: "templateTwo", first: true, predicate: ["templateTwo"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "placeholderRef", first: true, predicate: ["placeholderRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="placeholder" #placeholderRef></div>
-
-    @for (item of items(); track $index) {
-      @if ($index === 0) {
-        <ng-container *ngTemplateOutlet="templateOne(); context: { $implicit: item }"></ng-container>
-      } @else {
-        <ng-container *ngTemplateOutlet="templateTwo(); context: { $implicit: item }"></ng-container>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSortableComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sh-sortable',
-                    imports: [NgTemplateOutlet],
-                    template: `
-    <div class="placeholder" #placeholderRef></div>
-
-    @for (item of items(); track $index) {
-      @if ($index === 0) {
-        <ng-container *ngTemplateOutlet="templateOne(); context: { $implicit: item }"></ng-container>
-      } @else {
-        <ng-container *ngTemplateOutlet="templateTwo(); context: { $implicit: item }"></ng-container>
-      }
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class ShipSortableDirective {
+class ShipSortable {
     constructor() {
         this.#document = inject(DOCUMENT);
         this.#selfEl = inject((ElementRef));
@@ -5718,16 +5673,16 @@ class ShipSortableDirective {
         this.#dragableObserver?.disconnect();
         this.abortController?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: ShipSortableDirective, isStandalone: true, selector: "[shSortable]", outputs: { afterDrop: "afterDrop" }, host: { listeners: { "dragover": "dragOver($event)", "drop": "drop()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: ShipSortable, isStandalone: true, selector: "[shSortable]", outputs: { afterDrop: "afterDrop" }, host: { listeners: { "dragover": "dragOver($event)", "drop": "drop()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSortableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSortable, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shSortable]',
                     standalone: true,
                 }]
-        }], propDecorators: { dragOver: [{
+        }], propDecorators: { afterDrop: [{ type: i0.Output, args: ["afterDrop"] }], dragOver: [{
                 type: HostListener,
                 args: ['dragover', ['$event']]
             }], drop: [{
@@ -5745,13 +5700,13 @@ function moveIndex(array, event) {
     return newArray;
 }
 
-class ShipStepperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipStepperComponent, isStandalone: true, selector: "sh-stepper", ngImport: i0, template: `
+class ShipStepper {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipStepper, isStandalone: true, selector: "sh-stepper", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipStepper, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-stepper',
@@ -5763,11 +5718,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipResizeDirective {
+class ShipResize {
     constructor() {
         this.#el = inject(ElementRef);
         this.#renderer = inject(Renderer2);
-        this.#table = inject(ShipTableComponent);
+        this.#table = inject(ShipTable);
         this.resizable = input(true, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
         this.minWidth = input(50, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
         this.maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
@@ -5842,16 +5797,16 @@ class ShipResizeDirective {
             cancelAnimationFrame(this.#animationFrameRequest);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: ShipResizeDirective, isStandalone: true, selector: "[shResize]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipResize, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: ShipResize, isStandalone: true, selector: "[shResize]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipResize, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shResize]',
                     standalone: true,
                 }]
-        }], propDecorators: { onMouseMove: [{
+        }], propDecorators: { resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], onMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
             }], onMouseUp: [{
@@ -5861,9 +5816,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
-class ShipSortDirective {
+class ShipSort {
     constructor() {
-        this.#table = inject(ShipTableComponent);
+        this.#table = inject(ShipTable);
         this.shSort = input(...(ngDevMode ? [undefined, { debugName: "shSort" }] : []));
         this.sortAsc = computed(() => {
             const currentSort = this.#table.sortByColumn();
@@ -5887,10 +5842,10 @@ class ShipSortDirective {
             return;
         this.#table.toggleSort(sortCol);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: ShipSortDirective, isStandalone: true, selector: "[shSort]", inputs: { shSort: { classPropertyName: "shSort", publicName: "shSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "toggleSort()" }, properties: { "class.sort-asc": "sortAsc()", "class.sort-desc": "sortDesc()" }, classAttribute: "sortable" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSort, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: ShipSort, isStandalone: true, selector: "[shSort]", inputs: { shSort: { classPropertyName: "shSort", publicName: "shSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "toggleSort()" }, properties: { "class.sort-asc": "sortAsc()", "class.sort-desc": "sortDesc()" }, classAttribute: "sortable" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipSort, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shSort]',
@@ -5902,8 +5857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.sort-desc]': 'sortDesc()',
                     },
                 }]
-        }] });
-class ShipStickyColumnsDirective {
+        }], propDecorators: { shSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSort", required: false }] }] } });
+class ShipStickyColumns {
     constructor() {
         this.#elementRef = inject(ElementRef);
         this.#renderer = inject(Renderer2);
@@ -5923,10 +5878,10 @@ class ShipStickyColumnsDirective {
             this.#renderer.setStyle(nativeElement, 'grid-column', position === 'end' ? `-${columnSpanCount + 1} / -1` : `1 / ${columnSpanCount + 1}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipStickyColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: ShipStickyColumnsDirective, isStandalone: true, selector: "[shStickyColumns]", inputs: { shStickyColumns: { classPropertyName: "shStickyColumns", publicName: "shStickyColumns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sticky": "shStickyColumns() === \"start\"", "class.sticky-end": "shStickyColumns() === \"end\"" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipStickyColumns, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: ShipStickyColumns, isStandalone: true, selector: "[shStickyColumns]", inputs: { shStickyColumns: { classPropertyName: "shStickyColumns", publicName: "shStickyColumns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sticky": "shStickyColumns() === \"start\"", "class.sticky-end": "shStickyColumns() === \"end\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipStickyColumnsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipStickyColumns, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shStickyColumns]',
@@ -5935,9 +5890,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.sticky-end]': 'shStickyColumns() === "end"',
                     },
                 }]
-        }] });
+        }], propDecorators: { shStickyColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "shStickyColumns", required: false }] }] } });
 const SCROLL_TOLERANCE = 1.5;
-class ShipTableComponent {
+class ShipTable {
     constructor() {
         this.#el = inject(ElementRef);
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
@@ -6080,8 +6035,8 @@ class ShipTableComponent {
         this.scrollYState.set(nextYState);
         this.canScrollY.set(canScrollY);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipTableComponent, isStandalone: true, selector: "sh-table", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)" }, properties: { "class": "class()", "style.grid-template-columns": "columnSizes()", "class.resizing": "resizing()", "class.can-scroll-x": "canScrollX()", "class.can-scroll-y": "canScrollY()", "class.scrolled-x": "scrollXState() >= 0", "class.scrolled-x-end": "scrollXState() === 1", "class.scrolled-y": "scrollYState() >= 0", "class.scrolled-y-end": "scrollYState() === 1" } }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipTable, isStandalone: true, selector: "sh-table", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)" }, properties: { "class": "class()", "style.grid-template-columns": "columnSizes()", "class.resizing": "resizing()", "class.can-scroll-x": "canScrollX()", "class.can-scroll-y": "canScrollY()", "class.scrolled-x": "scrollXState() >= 0", "class.scrolled-x-end": "scrollXState() === 1", "class.scrolled-y": "scrollYState() >= 0", "class.scrolled-y-end": "scrollYState() === 1" } }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (loading()) {
       <sh-progress-bar class="indeterminate primary" />
     }
@@ -6100,13 +6055,13 @@ class ShipTableComponent {
         <ng-content select="[table-no-rows]" />
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipProgressBarComponent, selector: "sh-progress-bar", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipProgressBar, selector: "sh-progress-bar", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTable, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-table',
-                    imports: [ShipProgressBarComponent],
+                    imports: [ShipProgressBar],
                     template: `
     @if (loading()) {
       <sh-progress-bar class="indeterminate primary" />
@@ -6141,21 +6096,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.scrolled-y-end]': 'scrollYState() === 1',
                     },
                 }]
-        }], propDecorators: { onResize: [{
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], sortByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortByColumn", required: false }] }, { type: i0.Output, args: ["sortByColumnChange"] }], thead: [{ type: i0.ViewChild, args: ['thead', { isSignal: true }] }], tbody: [{ type: i0.ViewChild, args: ['tbody', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
 
-class ShipTabsComponent {
+class ShipTabs {
     constructor() {
         this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipTabsComponent, isStandalone: true, selector: "sh-tabs", host: { properties: { "style.--tabs-id": "id" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipTabs, isStandalone: true, selector: "sh-tabs", host: { properties: { "style.--tabs-id": "id" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTabs, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-tabs',
@@ -6170,7 +6125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipToggleCardComponent {
+class ShipToggleCard {
     constructor() {
         this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
         this.disallowToggle = input(false, ...(ngDevMode ? [{ debugName: "disallowToggle" }] : []));
@@ -6183,8 +6138,8 @@ class ShipToggleCardComponent {
     toggle() {
         this.isActive.set(!this.isActive());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipToggleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipToggleCardComponent, isStandalone: true, selector: "sh-toggle-card", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disallowToggle: { classPropertyName: "disallowToggle", publicName: "disallowToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, host: { properties: { "class.active": "isActive()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipToggleCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipToggleCard, isStandalone: true, selector: "sh-toggle-card", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disallowToggle: { classPropertyName: "disallowToggle", publicName: "disallowToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, host: { properties: { "class.active": "isActive()" } }, ngImport: i0, template: `
     <h3 (click)="disallowToggle() || toggle()">
       <ng-content select="[title]">Title</ng-content>
 
@@ -6198,13 +6153,13 @@ class ShipToggleCardComponent {
         <ng-content />
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipToggleCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipToggleCard, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-toggle-card',
-                    imports: [ShipIconComponent],
+                    imports: [ShipIcon],
                     template: `
     <h3 (click)="disallowToggle() || toggle()">
       <ng-content select="[title]">Title</ng-content>
@@ -6225,11 +6180,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.active]': 'isActive()',
                     },
                 }]
-        }] });
+        }], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], disallowToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowToggle", required: false }] }] } });
 
-class ShipToggleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipToggleComponent, isStandalone: true, selector: "sh-toggle", ngImport: i0, template: `
+class ShipToggle {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ShipToggle, isStandalone: true, selector: "sh-toggle", ngImport: i0, template: `
     <div class="box">
       <div class="knob"></div>
     </div>
@@ -6237,7 +6192,7 @@ class ShipToggleComponent {
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipToggle, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-toggle',
@@ -6253,165 +6208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-class ShipTooltipComponent {
-    constructor() {
-        this.#document = inject(DOCUMENT);
-        this.#BASE_SPACE = 4;
-        this.SUPPORTS_ANCHOR = CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.above = input(false, ...(ngDevMode ? [{ debugName: "above" }] : []));
-        this.right = input(false, ...(ngDevMode ? [{ debugName: "right" }] : []));
-        this._above = signal(this.above(), ...(ngDevMode ? [{ debugName: "_above" }] : []));
-        this._right = signal(this.right(), ...(ngDevMode ? [{ debugName: "_right" }] : []));
-        this.message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
-        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.closed = output();
-        this.triggerRef = viewChild.required('triggerRef');
-        this.tooltipRef = viewChild.required('tooltipRef');
-        this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
-        this.isCalculatingPosition = computed(() => {
-            const tooltipEl = this.tooltipRef()?.nativeElement;
-            const open = this.isOpen();
-            if (open) {
-                tooltipEl?.showPopover();
-                return true;
-            }
-            else {
-                tooltipEl.hidePopover();
-                this.abortController?.abort();
-                this.closed.emit();
-                return false;
-            }
-        }, ...(ngDevMode ? [{ debugName: "isCalculatingPosition" }] : []));
-        this.abortController = null;
-        this.calcPositionEffect = effect(() => {
-            const isCalculatingPosition = this.isCalculatingPosition();
-            if (!isCalculatingPosition)
-                return;
-            if (this.abortController) {
-                this.abortController.abort();
-            }
-            this.abortController = new AbortController();
-            const signal = this.abortController.signal;
-            this.calculateMenuPosition();
-            const scrollableParent = this.#findScrollableParent(this.tooltipRef()?.nativeElement);
-            scrollableParent.addEventListener('scroll', () => this.calculateMenuPosition(), { signal });
-            this.#document.addEventListener('resize', () => this.calculateMenuPosition(), { signal });
-        }, ...(ngDevMode ? [{ debugName: "calcPositionEffect" }] : []));
-        this.scrollableStyles = ['scroll', 'auto'];
-    }
-    #document;
-    #BASE_SPACE;
-    #findScrollableParent(element) {
-        let parent = element.parentElement;
-        while (parent) {
-            if (this.scrollableStyles.indexOf(window?.getComputedStyle(parent).overflowY) > -1 &&
-                parent.scrollHeight > parent.clientHeight) {
-                return parent;
-            }
-            parent = parent.parentElement;
-        }
-        return this.#document.documentElement;
-    }
-    eventClose($event) {
-        $event.stopPropagation();
-        $event.preventDefault();
-        this.isOpen.set(false);
-    }
-    ngOnDestroy() {
-        if (this.abortController) {
-            this.abortController.abort();
-        }
-    }
-    calculateMenuPosition() {
-        const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
-        const menuRect = this.tooltipRef()?.nativeElement.getBoundingClientRect();
-        const actionLeftInViewport = triggerRect.left;
-        const actionBottomInViewport = triggerRect.bottom;
-        let newLeft = actionLeftInViewport;
-        let newTop = actionBottomInViewport + this.#BASE_SPACE;
-        const outOfBoundsRight = newLeft + menuRect.width > window?.innerWidth;
-        const outOfBoundsBottom = newTop + menuRect.height > window?.innerHeight;
-        if (this.SUPPORTS_ANCHOR) {
-            this._above.set(outOfBoundsBottom);
-            this._right.set(outOfBoundsRight);
-        }
-        else {
-            if (this.above()) {
-                const _newTop = triggerRect.top - menuRect.height - this.#BASE_SPACE;
-                if (_newTop >= 0) {
-                    newTop = _newTop;
-                }
-            }
-            else {
-                if (outOfBoundsBottom) {
-                    newTop = triggerRect.top - menuRect.height - this.#BASE_SPACE;
-                }
-            }
-            if (this.right()) {
-                const _newLeft = triggerRect.right - menuRect.width;
-                if (_newLeft >= 0) {
-                    newLeft = _newLeft;
-                }
-            }
-            else {
-                if (outOfBoundsRight) {
-                    newTop = outOfBoundsBottom ? triggerRect.top + triggerRect.height - menuRect.height : triggerRect.top;
-                    newLeft = triggerRect.left - menuRect.width - this.#BASE_SPACE;
-                }
-            }
-            this.menuStyle.set({
-                left: newLeft + 'px',
-                top: newTop + 'px',
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", type: ShipTooltipComponent, isStandalone: true, selector: "sh-tooltip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, above: { classPropertyName: "above", publicName: "above", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.above": "_above()", "class.right": "_right()", "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      class="trigger"
-      #triggerRef
-      [style.anchor-name]="id()"
-      (mouseover)="isOpen.set(true)"
-      (mouseout)="isOpen.set(false)">
-      <ng-content />
-    </div>
-
-    <div class="tooltip" #tooltipRef [style.position-anchor]="id()" [style]="menuStyle()" popover>
-      {{ message() }}
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTooltipComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sh-tooltip',
-                    imports: [],
-                    template: `
-    <div
-      class="trigger"
-      #triggerRef
-      [style.anchor-name]="id()"
-      (mouseover)="isOpen.set(true)"
-      (mouseout)="isOpen.set(false)">
-      <ng-content />
-    </div>
-
-    <div class="tooltip" #tooltipRef [style.position-anchor]="id()" [style]="menuStyle()" popover>
-      {{ message() }}
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class.above]': '_above()',
-                        '[class.right]': '_right()',
-                        '[class.disabled]': 'disabled()',
-                    },
-                }]
-        }] });
-
-class ShipVirtualScrollComponent {
+class ShipVirtualScroll {
     constructor() {
         this.#changeRef = inject(ChangeDetectorRef);
         this.#renderer = inject(Renderer2);
@@ -6551,8 +6348,8 @@ class ShipVirtualScrollComponent {
         this.#cleanupResizeObserver();
         this.#cleanupHostResizeObserver();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", type: ShipVirtualScrollComponent, isStandalone: true, selector: "sh-virtual-scroll", viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "itemElements", predicate: ["item"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: ShipVirtualScroll, isStandalone: true, selector: "sh-virtual-scroll", viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "itemElements", predicate: ["item"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="viewport" #viewport (scroll)="onScroll()">
       <div class="total-height" [style.height]="totalHeight() + 'px'"></div>
       <div class="items-container" [style.transform]="'translateY(' + translateY() + 'px)'">
@@ -6561,7 +6358,7 @@ class ShipVirtualScrollComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipVirtualScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipVirtualScroll, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-virtual-scroll',
@@ -6576,9 +6373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], itemElements: [{ type: i0.ViewChildren, args: ['item', { isSignal: true }] }] } });
 
-class ShipFileDragDropDirective {
+class ShipFileDragDrop {
     constructor() {
         this.filesOver = signal(false, ...(ngDevMode ? [{ debugName: "filesOver" }] : []));
         this.filesDropped = output();
@@ -6602,10 +6399,10 @@ class ShipFileDragDropDirective {
             this.filesDropped.emit(files);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFileDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: ShipFileDragDropDirective, isStandalone: true, selector: "[shDragDrop]", outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.filesover": "filesOver()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFileDragDrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: ShipFileDragDrop, isStandalone: true, selector: "[shDragDrop]", outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.filesover": "filesOver()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipFileDragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipFileDragDrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shDragDrop]',
@@ -6614,7 +6411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.filesover]': 'filesOver()',
                     },
                 }]
-        }], propDecorators: { onDragOver: [{
+        }], propDecorators: { filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], onDragOver: [{
                 type: HostListener,
                 args: ['dragover', ['$event']]
             }], onDragLeave: [{
@@ -6625,7 +6422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['drop', ['$event']]
             }] } });
 
-class ShipInputMaskDirective {
+class ShipInputMask {
     constructor() {
         this.#selfRef = inject(ElementRef);
         this.#renderer = inject(Renderer2);
@@ -6687,28 +6484,28 @@ class ShipInputMaskDirective {
         }
         return masked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipInputMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: ShipInputMaskDirective, isStandalone: true, selector: "[shInputMask]", inputs: { shInputMask: { classPropertyName: "shInputMask", publicName: "shInputMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipInputMask, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: ShipInputMask, isStandalone: true, selector: "[shInputMask]", inputs: { shInputMask: { classPropertyName: "shInputMask", publicName: "shInputMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipInputMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipInputMask, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shInputMask]',
                     standalone: true,
                 }]
-        }], propDecorators: { onInput: [{
+        }], propDecorators: { shInputMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "shInputMask", required: false }] }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
             }] } });
 
-class ShipPreventWheelDirective {
+class ShipPreventWheel {
     wheel(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPreventWheelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: ShipPreventWheelDirective, isStandalone: true, selector: "[shPreventWheel]", host: { listeners: { "wheel": "wheel($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipPreventWheel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: ShipPreventWheel, isStandalone: true, selector: "[shPreventWheel]", host: { listeners: { "wheel": "wheel($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPreventWheelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipPreventWheel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shPreventWheel]',
@@ -6783,14 +6580,14 @@ class ShipTooltipWrapper {
     ngOnDestroy() {
         this.#positionAbort?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"manual\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"manual\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
     <div class="tooltip-content">
       <ng-content />
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTooltipWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTooltipWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'ship-tooltip-wrapper',
@@ -6807,9 +6604,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.below]': 'isBelow()',
                     },
                 }]
-        }] });
+        }], propDecorators: { positionAnchorName: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionAnchorName", required: true }] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }] } });
 let openRef = null;
-class ShipTooltipDirective {
+class ShipTooltip {
     constructor() {
         this.shTooltip = input.required(...(ngDevMode ? [{ debugName: "shTooltip" }] : []));
         this.#elementRef = inject((ElementRef));
@@ -6901,10 +6698,10 @@ class ShipTooltipDirective {
             this.#projectedViewRef = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: ShipTooltipDirective, isStandalone: true, selector: "[shTooltip]", inputs: { shTooltip: { classPropertyName: "shTooltip", publicName: "shTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "style.anchor-name": "anchorName", "class.active": "isOpen()" }, classAttribute: "tooltip" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: ShipTooltip, isStandalone: true, selector: "[shTooltip]", inputs: { shTooltip: { classPropertyName: "shTooltip", publicName: "shTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "style.anchor-name": "anchorName", "class.active": "isOpen()" }, classAttribute: "tooltip" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shTooltip]',
@@ -6915,7 +6712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.active]': 'isOpen()',
                     },
                 }]
-        }], propDecorators: { onMouseEnter: [{
+        }], propDecorators: { shTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "shTooltip", required: true }] }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -6931,5 +6728,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipInputMaskDirective, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortable, SHIP_CONFIG, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map