@ship-ui/core 0.13.23 → 0.13.25

package/fesm2022/ship-ui-core.mjs

@@ -16,12 +16,12 @@ class ShipIconComponent {
             this.#renderer.addClass(this.#selfRef.nativeElement, potentialType);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipIconComponent, isStandalone: true, selector: "sh-icon", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipIconComponent, isStandalone: true, selector: "sh-icon", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-icon',
@@ -37,17 +37,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class ShipAlertComponent {
     constructor() {
         this._el = inject(ElementRef); // Used by alert container
-        this.alertService = input(null);
-        this.id = input(null);
-        this.alertClasses = computed(() => this._el.nativeElement.classList.toString());
+        this.alertService = input(null, ...(ngDevMode ? [{ debugName: "alertService" }] : []));
+        this.id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.alertClasses = computed(() => this._el.nativeElement.classList.toString(), ...(ngDevMode ? [{ debugName: "alertClasses" }] : []));
     }
     removeAlert() {
         if (this.id() && this.alertService()) {
             this.alertService()?.removeAlert(this.id());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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 } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 } }, ngImport: i0, template: `
     <div class="alert">
       <div #ref class="icon" [style.display]="!ref.children.length ? 'none' : 'block'">
         <ng-content select="[icon]"></ng-content>
@@ -86,7 +86,7 @@ class ShipAlertComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-alert',
@@ -135,21 +135,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class ShipAlertContainerComponent {
     constructor() {
-        this.inline = input(null);
+        this.inline = input(null, ...(ngDevMode ? [{ debugName: "inline" }] : []));
         this.alerts = viewChild.required('alerts');
         this.scroller = viewChild.required('scroller');
-        this.alertService = input.required();
+        this.alertService = input.required(...(ngDevMode ? [{ debugName: "alertService" }] : []));
         this.alertHistory = this.alertService()?.alertHistory;
         this.alertHistoryIsOpen = this.alertService()?.alertHistoryIsOpen;
         this.alertHistoryIsHidden = this.alertService()?.alertHistoryIsHidden;
         this.numberOfOpenAlerts = computed(() => {
             return this.alertHistory().filter((x) => x.isOpen).length;
-        });
+        }, ...(ngDevMode ? [{ debugName: "numberOfOpenAlerts" }] : []));
         this.#e = effect(() => {
             this.alertHistory();
             this.alertHistoryIsOpen();
             this.#scrollToBottom();
-        });
+        }, ...(ngDevMode ? [{ debugName: "#e" }] : []));
     }
     #e;
     #scrollToBottom() {
@@ -188,10 +188,10 @@ class ShipAlertContainerComponent {
     transitionDelay(i, allOpen = false) {
         return allOpen ? this.alertHistory().length - 1 * 40 + 'ms' : (this.numberOfOpenAlerts() - i) * 40 + 'ms';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipAlertContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertContainerComponent, 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: [{
@@ -203,11 +203,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             }] } });
 
 class ShipAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertModule, imports: [ShipAlertComponent, ShipAlertContainerComponent], exports: [ShipAlertComponent, ShipAlertContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertModule, imports: [ShipAlertComponent, ShipAlertContainerComponent], exports: [ShipAlertComponent, ShipAlertContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ShipAlertComponent, ShipAlertContainerComponent],
@@ -222,9 +222,9 @@ function generateUniqueId() {
 
 class ShipAlertService {
     constructor() {
-        this.alertHistory = signal([]);
-        this.alertHistoryIsOpen = signal(false);
-        this.alertHistoryIsHidden = signal(true);
+        this.alertHistory = signal([], ...(ngDevMode ? [{ debugName: "alertHistory" }] : []));
+        this.alertHistoryIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "alertHistoryIsOpen" }] : []));
+        this.alertHistoryIsHidden = signal(true, ...(ngDevMode ? [{ debugName: "alertHistoryIsHidden" }] : []));
     }
     error(message) {
         this.addAlert({
@@ -290,10 +290,10 @@ class ShipAlertService {
     setHidden(isHidden) {
         this.alertHistoryIsHidden.set(isHidden);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipAlertService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipAlertService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -315,15 +315,15 @@ const DEFAULT_OPTIONS$1 = {
 class ShipDialogComponent {
     constructor() {
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
-        this.dialogRef = viewChild('dialogRef');
-        this.isOpen = model(false);
-        this.options = input();
+        this.dialogRef = viewChild('dialogRef', ...(ngDevMode ? [{ debugName: "dialogRef" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
         this.closed = output();
         this.defaultOptionMerge = computed(() => ({
             ...DEFAULT_OPTIONS$1,
             ...{ class: this.#shConfig?.dialogType ?? 'default' },
             ...this.options(),
-        }));
+        }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : []));
         this.abortController = null;
         this.isOpenEffect = effect(() => {
             const dialogEl = this.dialogRef()?.nativeElement;
@@ -354,14 +354,14 @@ class ShipDialogComponent {
                 this.closed.emit();
                 dialogEl?.close();
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "isOpenEffect" }] : []));
     }
     #shConfig;
     ngOnDestroy() {
         this.abortController?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: `
     @let options = this.defaultOptionMerge();
     <dialog
       shDialog
@@ -381,7 +381,7 @@ class ShipDialogComponent {
     </dialog>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-dialog',
@@ -496,10 +496,10 @@ class ShipDialogService {
     ngOnDestroy() {
         this.#cleanupRefs();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -507,12 +507,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 class ShipButtonGroupComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipButtonGroupComponent, isStandalone: true, selector: "sh-button-group", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipButtonGroupComponent, isStandalone: true, selector: "sh-button-group", ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-button-group',
@@ -525,10 +525,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 class ShipButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipButtonComponent, isStandalone: true, selector: "[shButton]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipButtonComponent, isStandalone: true, selector: "[shButton]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[shButton]',
@@ -541,15 +541,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class ShipCardComponent {
     constructor() {
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
-        this.class = signal(this.#shConfig?.cardType ?? 'default');
+        this.class = signal(this.#shConfig?.cardType ?? 'default', ...(ngDevMode ? [{ debugName: "class" }] : []));
     }
     #shConfig;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipCardComponent, isStandalone: true, selector: "sh-card", host: { properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-card',
@@ -566,8 +566,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class ShipCheckboxComponent {
     #selfRef = inject(ElementRef);
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipCheckboxComponent, isStandalone: true, selector: "sh-checkbox", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipCheckboxComponent, isStandalone: true, selector: "sh-checkbox", ngImport: i0, template: `
     <div class="box">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
@@ -576,7 +576,7 @@ class ShipCheckboxComponent {
     <ng-content />
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipCheckboxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-checkbox',
@@ -594,10 +594,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 class ShipChipComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipChipComponent, isStandalone: true, selector: "sh-chip", ngImport: i0, template: '<div><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipChipComponent, isStandalone: true, selector: "sh-chip", ngImport: i0, template: '<div><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-chip',
@@ -613,22 +613,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class ShipColorPickerComponent {
     constructor() {
         this.canvasRef = viewChild.required('colorCanvas');
-        this.canvasData = signal(null);
-        this.showDarkColors = input(false);
-        this.renderingType = input('hsl');
-        this.gridSize = input(20);
-        this.hue = input(0);
-        this.direction = input('horizontal');
-        this.selectedColor = model([255, 255, 255]);
+        this.canvasData = signal(null, ...(ngDevMode ? [{ debugName: "canvasData" }] : []));
+        this.showDarkColors = input(false, ...(ngDevMode ? [{ debugName: "showDarkColors" }] : []));
+        this.renderingType = input('hsl', ...(ngDevMode ? [{ debugName: "renderingType" }] : []));
+        this.gridSize = input(20, ...(ngDevMode ? [{ debugName: "gridSize" }] : []));
+        this.hue = input(0, ...(ngDevMode ? [{ debugName: "hue" }] : []));
+        this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+        this.selectedColor = model([255, 255, 255], ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
         this.currentColor = output();
-        this.centerLightness = computed(() => (this.showDarkColors() ? 200 : 100));
-        this.isDragging = signal(false);
-        this.markerPosition = signal({ x: '50%', y: '50%' });
+        this.centerLightness = computed(() => (this.showDarkColors() ? 200 : 100), ...(ngDevMode ? [{ debugName: "centerLightness" }] : []));
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.markerPosition = signal({ x: '50%', y: '50%' }, ...(ngDevMode ? [{ debugName: "markerPosition" }] : []));
         this._pos = { x: '0', y: '0' };
-        this._markerPosition = effect(() => (this._pos = this.markerPosition()));
-        this.selectedColorRgb = computed(() => `rgb(${this.selectedColor().join(',')})`);
-        this.selectedColorHex = computed(() => this.rgbToHex(...this.selectedColor()));
-        this.selectedColorHsl = computed(() => this.rgbToHsl(...this.selectedColor()));
+        this._markerPosition = effect(() => (this._pos = this.markerPosition()), ...(ngDevMode ? [{ debugName: "_markerPosition" }] : []));
+        this.selectedColorRgb = computed(() => `rgb(${this.selectedColor().join(',')})`, ...(ngDevMode ? [{ debugName: "selectedColorRgb" }] : []));
+        this.selectedColorHex = computed(() => this.rgbToHex(...this.selectedColor()), ...(ngDevMode ? [{ debugName: "selectedColorHex" }] : []));
+        this.selectedColorHsl = computed(() => this.rgbToHsl(...this.selectedColor()), ...(ngDevMode ? [{ debugName: "selectedColorHsl" }] : []));
         this.selectedColorEffect = effect(() => {
             const selectedColor = this.selectedColor();
             const hsl = this.rgbToHsl(...selectedColor);
@@ -641,7 +641,7 @@ class ShipColorPickerComponent {
                 hue: hsl.match(/\d+/g).map(Number)[0],
                 saturation: hsl.match(/\d+/g).map(Number)[1],
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedColorEffect" }] : []));
         this.renderingTypeEffect = effect(() => {
             const currentRenderingType = this.renderingType();
             if (this.canvasData()) {
@@ -654,7 +654,7 @@ class ShipColorPickerComponent {
                     this.updateMarkerFromColor(this.selectedColor());
                 }
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "renderingTypeEffect" }] : []));
         this.initColor = null;
     }
     onResize() {
@@ -919,8 +919,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.0.4", ngImport: i0, type: ShipColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", 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: `
     <canvas #colorCanvas></canvas>
     <div
       class="marker"
@@ -929,7 +929,7 @@ class ShipColorPickerComponent {
       [style.background]="selectedColorRgb()"></div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-color-picker',
@@ -964,19 +964,19 @@ class ShipPopoverComponent {
     constructor() {
         this.#BASE_SPACE = 4;
         this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
-        this.asMultiLayer = input(false);
-        this.disableOpenByClick = input(false);
-        this.isOpen = model(false);
-        this.options = input();
+        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.required('popoverRef');
-        this.id = signal('--' + generateUniqueId());
-        this.menuStyle = signal(null);
+        this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
         this.openAbort = null;
         this.openEffect = effect(() => {
             const popoverEl = this.popoverRef()?.nativeElement;
@@ -1010,7 +1010,7 @@ class ShipPopoverComponent {
                 this.openAbort?.abort();
                 this.closed.emit();
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     }
     #BASE_SPACE;
     toggleIsOpen(event) {
@@ -1067,8 +1067,8 @@ class ShipPopoverComponent {
             this.menuStyle.set(style);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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 }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", 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 }], ngImport: i0, template: `
     <div class="trigger" #triggerRef [style.anchor-name]="id()" (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
@@ -1083,7 +1083,7 @@ class ShipPopoverComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipPopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-popover',
@@ -1112,7 +1112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class ShipFormFieldPopoverComponent {
     constructor() {
         this.#selfRef = inject(ElementRef);
-        this.isOpen = model(false);
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.closed = output();
     }
     #selfRef;
@@ -1150,8 +1150,8 @@ class ShipFormFieldPopoverComponent {
             resize();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFormFieldPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipFormFieldPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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">
@@ -1193,7 +1193,7 @@ class ShipFormFieldPopoverComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ShipPopoverComponent, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFormFieldPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipFormFieldPopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-form-field-popover',
@@ -1249,29 +1249,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class ShipDatepickerComponent {
     constructor() {
         this.#INIT_DATE = this.#getUTCDate(new Date());
-        this.date = model(null);
-        this.endDate = model(null);
-        this.asRange = input(false);
-        this.monthsToShow = input(1);
-        this.disabled = input(false);
-        this.startOfWeek = input(1);
-        this.weekdayLabels = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);
-        this.daysRef = viewChild('daysRef');
-        this.currentDate = signal(this.date() ?? this.#INIT_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);
-        });
-        this.selectedDateStylePosition = signal(null);
+        }, ...(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.#newDateEffect = effect(() => {
             if (this.monthsToShow() > 1)
                 return;
             this.#setDateAsCurrent();
-        });
+        }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : []));
     }
     #INIT_DATE;
     getLastVisibleMonth() {
@@ -1468,8 +1468,8 @@ class ShipDatepickerComponent {
         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.0.4", ngImport: i0, type: ShipDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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">
@@ -1513,7 +1513,7 @@ class ShipDatepickerComponent {
     </section>
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-datepicker',
@@ -1575,10 +1575,10 @@ class ShipDatepickerInputComponent {
         this.#INIT_DATE = this.#getUTCDate(new Date());
         this.#datePipe = inject(DatePipe);
         this.#elementRef = inject((ElementRef));
-        this.#inputRef = signal(null);
-        this.#triggerInput = signal(false);
+        this.#inputRef = signal(null, ...(ngDevMode ? [{ debugName: "#inputRef" }] : []));
+        this.#triggerInput = signal(false, ...(ngDevMode ? [{ debugName: "#triggerInput" }] : []));
         this.inputWrapRef = viewChild.required('inputWrap');
-        this.masking = input('mediumDate');
+        this.masking = input('mediumDate', ...(ngDevMode ? [{ debugName: "masking" }] : []));
         this.closed = output();
         this._maskedDate = computed(() => {
             const date = this.internalDate();
@@ -1589,10 +1589,10 @@ class ShipDatepickerInputComponent {
             if (!date)
                 return null;
             return this.#datePipe.transform(date, mask);
-        });
-        this.internalDate = signal(this.#INIT_DATE);
-        this.isOpen = model(false);
-        this.styleClasses = signal(null);
+        }, ...(ngDevMode ? [{ debugName: "_maskedDate" }] : []));
+        this.internalDate = signal(this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "internalDate" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.styleClasses = signal(null, ...(ngDevMode ? [{ debugName: "styleClasses" }] : []));
         this.#styleObserver = typeof MutationObserver !== 'undefined' &&
             new MutationObserver((mutations) => {
                 mutations.forEach((mutation) => {
@@ -1632,7 +1632,7 @@ class ShipDatepickerInputComponent {
             if (typeof input.value === 'string') {
                 this.internalDate.set(input.value ? this.#getUTCDate(new Date(input.value)) : null);
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : []));
     }
     #INIT_DATE;
     #datePipe;
@@ -1698,8 +1698,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.0.4", ngImport: i0, type: ShipDatepickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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], viewQueries: [{ propertyName: "inputWrapRef", first: true, predicate: ["inputWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDatepickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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], viewQueries: [{ propertyName: "inputWrapRef", first: true, predicate: ["inputWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-form-field-popover (click)="open($event)" (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
@@ -1729,7 +1729,7 @@ class ShipDatepickerInputComponent {
     <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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDatepickerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDatepickerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-datepicker-input',
@@ -1776,29 +1776,29 @@ class ShipDaterangeInputComponent {
     }
     constructor() {
         this.#selfRef = inject(ElementRef);
-        this.startDateInputs = contentChildren('startDate');
-        this.endDateInputs = contentChildren('endDate');
+        this.startDateInputs = contentChildren('startDate', ...(ngDevMode ? [{ debugName: "startDateInputs" }] : []));
+        this.endDateInputs = contentChildren('endDate', ...(ngDevMode ? [{ debugName: "endDateInputs" }] : []));
         this.#datePipe = inject(DatePipe);
-        this.monthsToShow = input(1);
-        this.masking = input('mediumDate');
+        this.monthsToShow = input(1, ...(ngDevMode ? [{ debugName: "monthsToShow" }] : []));
+        this.masking = input('mediumDate', ...(ngDevMode ? [{ debugName: "masking" }] : []));
         this.closed = output();
-        this.startDate = signal(null);
-        this.endDate = signal(null);
-        this.isOpen = model(false);
+        this.startDate = signal(null, ...(ngDevMode ? [{ debugName: "startDate" }] : []));
+        this.endDate = signal(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this._maskedStartDate = computed(() => {
             const date = this.startDate();
             const mask = this.masking();
             if (!mask || !date)
                 return null;
             return this.#datePipe.transform(date, mask);
-        });
+        }, ...(ngDevMode ? [{ debugName: "_maskedStartDate" }] : []));
         this._maskedEndDate = computed(() => {
             const date = this.endDate();
             const mask = this.masking();
             if (!mask || !date)
                 return null;
             return this.#datePipe.transform(date, mask);
-        });
+        }, ...(ngDevMode ? [{ debugName: "_maskedEndDate" }] : []));
         effect(() => {
             // Setup start date inputs
             this.startDateInputs().forEach((input) => {
@@ -1871,8 +1871,8 @@ class ShipDaterangeInputComponent {
             end: this.endDate(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDaterangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipDaterangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: `
     <sh-form-field-popover
       [class]="'columns-' + monthsToShow()"
       (click)="open($event)"
@@ -1911,7 +1911,7 @@ class ShipDaterangeInputComponent {
     </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDaterangeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDaterangeInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-daterange-input',
@@ -1960,12 +1960,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }], ctorParameters: () => [] });
 
 class ShipDividerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipDividerComponent, isStandalone: true, selector: "sh-divider", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipDividerComponent, isStandalone: true, selector: "sh-divider", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipDividerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-divider',
@@ -2011,8 +2011,8 @@ class ShipFormFieldComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipFormFieldComponent, isStandalone: true, selector: "sh-form-field", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
     <ng-content select="label"></ng-content>
 
     <div class="input-wrap">
@@ -2043,7 +2043,7 @@ class ShipFormFieldComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipFormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-form-field',
@@ -2089,13 +2089,13 @@ class ShipFileUploadComponent {
     constructor() {
         this._el = inject(ElementRef);
         this.inputRef = viewChild.required('input');
-        this.filesOver = signal(false);
-        this.multiple = input();
-        this.accept = input(null);
-        this.placeholder = model('Click or drag files here');
-        this.overlayText = input('Drop files here');
-        this.files = model([]);
-        this.fileUploadClasses = computed(() => this._el.nativeElement.classList.toString());
+        this.filesOver = signal(false, ...(ngDevMode ? [{ debugName: "filesOver" }] : []));
+        this.multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
+        this.accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : []));
+        this.placeholder = model('Click or drag files here', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.overlayText = input('Drop files here', ...(ngDevMode ? [{ debugName: "overlayText" }] : []));
+        this.files = model([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+        this.fileUploadClasses = computed(() => this._el.nativeElement.classList.toString(), ...(ngDevMode ? [{ debugName: "fileUploadClasses" }] : []));
         this.inputEffect = effect(() => {
             const input = this.inputRef().nativeElement;
             if (!input)
@@ -2124,7 +2124,7 @@ class ShipFileUploadComponent {
                 e.preventDefault();
                 this.handleFileUpload(Array.from(e.target.files));
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "inputEffect" }] : []));
     }
     handleFileUpload(newFiles) {
         if (this.multiple()) {
@@ -2134,8 +2134,8 @@ class ShipFileUploadComponent {
             this.files.set(newFiles);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: `
     <sh-form-field [class]="fileUploadClasses()">
       <ng-content select="label" ngProjectAs="label"></ng-content>
 
@@ -2155,7 +2155,7 @@ class ShipFileUploadComponent {
     </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipFileUploadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-file-upload',
@@ -2184,12 +2184,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 class ShipListComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipListComponent, isStandalone: true, selector: "sh-list", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipListComponent, isStandalone: true, selector: "sh-list", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-list',
@@ -2204,7 +2204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 function createInputSignal(input, options) {
     const injector = options?.injector || (assertInInjectionContext(createInputSignal), inject(Injector));
     const { debounce = 0, initialValue = undefined, transform = (value) => value, compare = (a, b) => a === b, forceType = undefined, returnPreviousValue = true, } = options || {};
-    const valueSignal = signal(initialValue);
+    const valueSignal = signal(initialValue, ...(ngDevMode ? [{ debugName: "valueSignal" }] : []));
     const destroyRef = injector.get(DestroyRef);
     const inputElementRef = computed(() => {
         const inputElement = input()?.nativeElement;
@@ -2212,7 +2212,7 @@ function createInputSignal(input, options) {
             return;
         }
         return createCustomInputEventListener(inputElement);
-    });
+    }, ...(ngDevMode ? [{ debugName: "inputElementRef" }] : []));
     let isUpdating = false;
     let previousValue;
     let timeoutId = null;
@@ -2321,7 +2321,7 @@ function createInputSignal(input, options) {
 }
 
 function observeFirstChild(parentEl, elementTags) {
-    const elementSignal = signal(null);
+    const elementSignal = signal(null, ...(ngDevMode ? [{ debugName: "elementSignal" }] : []));
     const _upperCaseElementTags = elementTags.map((tag) => tag.toUpperCase());
     const injector = inject(Injector);
     const destroyRef = injector.get(DestroyRef);
@@ -2355,7 +2355,7 @@ function observeFirstChild(parentEl, elementTags) {
 function observeChildren(parentEl, elementTags) {
     const injector = inject(Injector);
     const destroyRef = injector.get(DestroyRef);
-    const elementsSignal = signal([]);
+    const elementsSignal = signal([], ...(ngDevMode ? [{ debugName: "elementsSignal" }] : []));
     let effectOnSignal = null;
     let observer = null;
     const setupObserver = (el, elementTags) => {
@@ -2409,20 +2409,20 @@ function observeChildren(parentEl, elementTags) {
 class ShipMenuComponent {
     constructor() {
         this.#renderer = inject(Renderer2);
-        this.asMultiLayer = input(false);
-        this.openIndicator = input(false);
-        this.disabled = input(false);
-        this.customOptionElementSelectors = input(['button']);
-        this.keepClickedOptionActive = input(false);
-        this.closeOnClick = input(true);
-        this.isOpen = model(false);
+        this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : []));
+        this.openIndicator = input(false, ...(ngDevMode ? [{ debugName: "openIndicator" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.customOptionElementSelectors = input(['button'], ...(ngDevMode ? [{ debugName: "customOptionElementSelectors" }] : []));
+        this.keepClickedOptionActive = input(false, ...(ngDevMode ? [{ debugName: "keepClickedOptionActive" }] : []));
+        this.closeOnClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnClick" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.closed = output();
-        this.searchable = input(false);
-        this.activeOptionIndex = signal(-1);
-        this.inputRef = viewChild('input');
-        this.optionsRef = viewChild('optionsRef');
+        this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+        this.activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : []));
+        this.inputRef = viewChild('input', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+        this.optionsRef = viewChild('optionsRef', ...(ngDevMode ? [{ debugName: "optionsRef" }] : []));
         this.options = observeChildren(this.optionsRef, this.customOptionElementSelectors);
-        this.optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled));
+        this.optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled), ...(ngDevMode ? [{ debugName: "optionsEl" }] : []));
         this.inputValue = createInputSignal(this.inputRef);
         this.abortController = null;
         this.optionsEffect = effect(() => {
@@ -2478,9 +2478,9 @@ class ShipMenuComponent {
             }, {
                 signal: this.abortController.signal,
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : []));
         this._lastElementList = [];
-        this.activeElements = signal([]);
+        this.activeElements = signal([], ...(ngDevMode ? [{ debugName: "activeElements" }] : []));
         this.lastInputValue = '';
         this.inputValueEffect = effect(() => {
             const searchable = this.searchable();
@@ -2508,7 +2508,7 @@ class ShipMenuComponent {
             }
             this.activeElements.set(optionElements);
             this._lastElementList = optionElements;
-        });
+        }, ...(ngDevMode ? [{ debugName: "inputValueEffect" }] : []));
         this.activeOptionIndexEffect = effect(() => {
             const optionElements = this.activeElements();
             const activeOptionIndex = this.activeOptionIndex();
@@ -2519,7 +2519,7 @@ class ShipMenuComponent {
                 optionElements[activeOptionIndex].scrollIntoView({ block: 'center' });
                 optionElements[activeOptionIndex].classList.add('active');
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "activeOptionIndexEffect" }] : []));
     }
     #renderer;
     #calculateMatchScore(option, input) {
@@ -2614,8 +2614,8 @@ class ShipMenuComponent {
             this.abortController = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: ["input"], 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.1.6", ngImport: i0, type: ShipMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: ["input"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-popover
       #formFieldWrapper
       [(isOpen)]="isOpen"
@@ -2650,7 +2650,7 @@ class ShipMenuComponent {
     </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-menu',
@@ -2700,14 +2700,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class ShipProgressBarComponent {
     constructor() {
-        this.value = input(undefined);
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: ShipProgressBarComponent, 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.0.4", ngImport: i0, type: ShipProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-progress-bar',
@@ -2726,14 +2726,14 @@ class ShipRadioComponent {
             this.#selfRef.nativeElement.querySelector('input').focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipRadioComponent, isStandalone: true, selector: "sh-radio", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipRadioComponent, isStandalone: true, selector: "sh-radio", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
     <div class="radio"></div>
 
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipRadioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-radio',
@@ -2756,13 +2756,13 @@ class ShipRangeSliderComponent {
         this.#observer = null;
         this.#inputElement = null;
         this.#initialDefaultValue = 0;
-        this.unit = input('');
-        this.value = model(this.#initialDefaultValue);
+        this.unit = input('', ...(ngDevMode ? [{ debugName: "unit" }] : []));
+        this.value = model(this.#initialDefaultValue, ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.inputState = signal({
             min: 0,
             max: 100,
             step: 1,
-        });
+        }, ...(ngDevMode ? [{ debugName: "inputState" }] : []));
         this.valuePercentage = computed(() => {
             const { min, max } = this.inputState();
             const currentValue = this.value() ?? min;
@@ -2773,9 +2773,9 @@ class ShipRangeSliderComponent {
                 return 0;
             const percentage = ((currentValue - min) / range) * 100;
             return Math.max(0, Math.min(100, percentage));
-        });
-        this.trackFilledPercentage = computed(() => this.valuePercentage());
-        this.thumbPositionPercentage = computed(() => this.valuePercentage());
+        }, ...(ngDevMode ? [{ debugName: "valuePercentage" }] : []));
+        this.trackFilledPercentage = computed(() => this.valuePercentage(), ...(ngDevMode ? [{ debugName: "trackFilledPercentage" }] : []));
+        this.thumbPositionPercentage = computed(() => this.valuePercentage(), ...(ngDevMode ? [{ debugName: "thumbPositionPercentage" }] : []));
         this.syncModelToInputEffect = effect(() => {
             const modelValue = this.value();
             if (this.#inputElement) {
@@ -2784,7 +2784,7 @@ class ShipRangeSliderComponent {
                     this.#inputElement.value = String(modelValue);
                 }
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "syncModelToInputEffect" }] : []));
     }
     #selfRef;
     #observer;
@@ -2931,8 +2931,8 @@ class ShipRangeSliderComponent {
             this.#inputElement.oninput = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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: `
     <div class="label">
       <ng-content select="label"></ng-content>
     </div>
@@ -2958,7 +2958,7 @@ class ShipRangeSliderComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipRangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipRangeSliderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-range-slider',
@@ -2996,10 +2996,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             }] } });
 
 class ShipSpinnerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipSpinnerComponent, isStandalone: true, selector: "sh-spinner", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipSpinnerComponent, isStandalone: true, selector: "sh-spinner", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-spinner',
@@ -3012,29 +3012,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class ShipSelectComponent {
     constructor() {
         this.#selfRef = inject((ElementRef));
-        this.value = input();
-        this.label = input();
-        this.asFreeText = input(false);
-        this.optionTitle = input(null);
-        this.freeTextTitle = input(null);
-        this.freeTextPlaceholder = input('Type to create a new option');
-        this.validateFreeText = input();
-        this.placeholder = input();
-        this.readonly = model(false);
-        this.disabled = model(false);
-        this.lazySearch = input(false);
-        this.inlineSearch = input(false);
-        this.asText = input(false);
-        this.isClearable = input(true);
-        this.selectMultiple = input(false);
-        this.optionTemplate = input(null);
-        this.selectedOptionTemplate = input(null);
-        this.placeholderTemplate = input(null);
-        this.freeTextOptionTemplate = input(null);
-        this.isOpen = model(false);
-        this.isLoading = model(false);
-        this.options = model([]);
-        this.selectedOptions = model([]);
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.asFreeText = input(false, ...(ngDevMode ? [{ debugName: "asFreeText" }] : []));
+        this.optionTitle = input(null, ...(ngDevMode ? [{ debugName: "optionTitle" }] : []));
+        this.freeTextTitle = input(null, ...(ngDevMode ? [{ debugName: "freeTextTitle" }] : []));
+        this.freeTextPlaceholder = input('Type to create a new option', ...(ngDevMode ? [{ debugName: "freeTextPlaceholder" }] : []));
+        this.validateFreeText = input(...(ngDevMode ? [undefined, { debugName: "validateFreeText" }] : []));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.readonly = model(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.lazySearch = input(false, ...(ngDevMode ? [{ debugName: "lazySearch" }] : []));
+        this.inlineSearch = input(false, ...(ngDevMode ? [{ debugName: "inlineSearch" }] : []));
+        this.asText = input(false, ...(ngDevMode ? [{ debugName: "asText" }] : []));
+        this.isClearable = input(true, ...(ngDevMode ? [{ debugName: "isClearable" }] : []));
+        this.selectMultiple = input(false, ...(ngDevMode ? [{ debugName: "selectMultiple" }] : []));
+        this.optionTemplate = input(null, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+        this.selectedOptionTemplate = input(null, ...(ngDevMode ? [{ debugName: "selectedOptionTemplate" }] : []));
+        this.placeholderTemplate = input(null, ...(ngDevMode ? [{ debugName: "placeholderTemplate" }] : []));
+        this.freeTextOptionTemplate = input(null, ...(ngDevMode ? [{ debugName: "freeTextOptionTemplate" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.options = model([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.selectedOptions = model([], ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
         this.cleared = output();
         this.onAddNewFreeTextOption = output();
         this.computedFreeTextOption = computed(() => {
@@ -3045,11 +3045,11 @@ class ShipSelectComponent {
                 newOption[valueKey] = inputValue;
             }
             return newOption;
-        });
-        this.#previousSelectedOptions = signal(null);
-        this.inlineTemplate = contentChild(TemplateRef);
+        }, ...(ngDevMode ? [{ debugName: "computedFreeTextOption" }] : []));
+        this.#previousSelectedOptions = signal(null, ...(ngDevMode ? [{ debugName: "#previousSelectedOptions" }] : []));
+        this.inlineTemplate = contentChild(TemplateRef, ...(ngDevMode ? [{ debugName: "inlineTemplate" }] : []));
         this.optionsWrapRef = viewChild.required('optionsWrap');
-        this.inputRefInput = signal(null);
+        this.inputRefInput = signal(null, ...(ngDevMode ? [{ debugName: "inputRefInput" }] : []));
         this.#inputObserver = typeof MutationObserver !== 'undefined' &&
             new MutationObserver((mutations) => {
                 for (var mutation of mutations) {
@@ -3059,25 +3059,25 @@ class ShipSelectComponent {
                     }
                 }
             });
-        this.inputValue = signal('');
-        this.prevInputValue = signal(null);
-        this.focusedOptionIndex = signal(-1);
-        this._isClearable = computed(() => this.selectMultiple() || this.isClearable());
-        this.selectClasses = computed(() => this.#selfRef.nativeElement.classList.toString());
-        this.stretch = computed(() => this.selectClasses().includes('stretch'));
-        this.small = computed(() => this.selectClasses().includes('small'));
+        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+        this.prevInputValue = signal(null, ...(ngDevMode ? [{ debugName: "prevInputValue" }] : []));
+        this.focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
+        this._isClearable = computed(() => this.selectMultiple() || this.isClearable(), ...(ngDevMode ? [{ debugName: "_isClearable" }] : []));
+        this.selectClasses = computed(() => this.#selfRef.nativeElement.classList.toString(), ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
+        this.stretch = computed(() => this.selectClasses().includes('stretch'), ...(ngDevMode ? [{ debugName: "stretch" }] : []));
+        this.small = computed(() => this.selectClasses().includes('small'), ...(ngDevMode ? [{ debugName: "small" }] : []));
         this.placeholderText = computed(() => {
             const placeholder = this.placeholder();
             const inputRefEl = this.inputRefEl();
             return placeholder || inputRefEl?.placeholder || null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "placeholderText" }] : []));
         this.selectedOptionValues = computed(() => {
             const selectedOptions = this.selectedOptions();
             const valueKey = this.value();
             return valueKey
                 ? selectedOptions.map((selectedOption) => this.#getProperty(selectedOption, valueKey))
                 : selectedOptions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedOptionValues" }] : []));
         this.filteredOptions = computed(() => {
             const opts = this.options() || [];
             const label = this.label();
@@ -3113,7 +3113,7 @@ class ShipSelectComponent {
             });
             scoredOptions.sort((a, b) => b.score - a.score);
             return scoredOptions.map((scoredOption) => scoredOption.item);
-        });
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
         this.#componentId = generateUniqueId();
         this.inputRefEl = computed(() => {
             const inputRefInput = this.inputRefInput();
@@ -3160,7 +3160,7 @@ class ShipSelectComponent {
                 this.#setFirstSelectedOptionAsFocused();
             });
             return input;
-        });
+        }, ...(ngDevMode ? [{ debugName: "inputRefEl" }] : []));
         this.focusEffect = effect(() => {
             const input = this.inputRefEl();
             if (!input)
@@ -3172,7 +3172,7 @@ class ShipSelectComponent {
             else {
                 input.removeAttribute('aria-activedescendant');
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "focusEffect" }] : []));
         this.openAbortController = null;
         this.isOpenEffect = effect(() => {
             const isOpen = this.isOpen();
@@ -3219,12 +3219,12 @@ class ShipSelectComponent {
                     this.openAbortController = null;
                 }
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "isOpenEffect" }] : []));
         this._inputValue = '';
         this.inputValueEffect = effect(() => {
             const inputValue = this.inputValue();
             this._inputValue = inputValue;
-        });
+        }, ...(ngDevMode ? [{ debugName: "inputValueEffect" }] : []));
         this.inputRefElEffect = effect(() => {
             const input = this.inputRefEl();
             if (!input)
@@ -3234,7 +3234,7 @@ class ShipSelectComponent {
             this.disabled.set(input.disabled);
             this.setSelectedOptionsFromValue(input.value);
             this.setInputValueFromOptions(this.selectedOptions());
-        });
+        }, ...(ngDevMode ? [{ debugName: "inputRefElEffect" }] : []));
         this.selectedLabels = computed(() => {
             const selected = this.selectedOptions();
             const label = this.label();
@@ -3242,7 +3242,7 @@ class ShipSelectComponent {
                 return selected.join(', ');
             }
             return selected.map((selected) => this.getLabel(selected)).join(', ');
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
         this.inputState = computed(() => {
             if ((this.selectedOptions().length > 0 || (this.asFreeText() && this.inputValue().length > 0)) && !this.isOpen()) {
                 return 'selected';
@@ -3260,8 +3260,8 @@ class ShipSelectComponent {
                 return 'searching';
             }
             return 'closed';
-        });
-        this.hasSearch = computed(() => this.inlineSearch() || this.lazySearch());
+        }, ...(ngDevMode ? [{ debugName: "inputState" }] : []));
+        this.hasSearch = computed(() => this.inlineSearch() || this.lazySearch(), ...(ngDevMode ? [{ debugName: "hasSearch" }] : []));
         this.#selectedOptionsEffect = effect(() => {
             if (this.selectMultiple() && this.hasSearch()) {
                 return;
@@ -3275,7 +3275,7 @@ class ShipSelectComponent {
             })
                 .join(',');
             this.inputValue.set(inputValue);
-        });
+        }, ...(ngDevMode ? [{ debugName: "#selectedOptionsEffect" }] : []));
     }
     #selfRef;
     #previousSelectedOptions;
@@ -3574,8 +3574,8 @@ class ShipSelectComponent {
             this.#inputObserver.disconnect();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: `
     @let _placeholderTemplate = placeholderTemplate();
     @let _optionTemplate = optionTemplate();
     @let _freeTextOptionTemplate = freeTextOptionTemplate();
@@ -3621,7 +3621,8 @@ class ShipSelectComponent {
                       class="small"
                       (click)="removeSelectedOptionByIndex($event, $index)">
                       @if (_selOptionTemplate) {
-                        <ng-container *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption }" />
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
                       } @else {
                         {{ getLabel(selectedOption) }}
                       }
@@ -3631,7 +3632,8 @@ class ShipSelectComponent {
                   } @else {
                     @if (!_showSearchText) {
                       @if (_selOptionTemplate) {
-                        <ng-container *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption }" />
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
                       } @else {
                         {{ $last ? getLabel(selectedOption) : getLabel(selectedOption) + ',' }}
                       }
@@ -3728,7 +3730,7 @@ class ShipSelectComponent {
     </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-select',
@@ -3788,7 +3790,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                       class="small"
                       (click)="removeSelectedOptionByIndex($event, $index)">
                       @if (_selOptionTemplate) {
-                        <ng-container *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption }" />
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
                       } @else {
                         {{ getLabel(selectedOption) }}
                       }
@@ -3798,7 +3801,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                   } @else {
                     @if (!_showSearchText) {
                       @if (_selOptionTemplate) {
-                        <ng-container *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption }" />
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
                       } @else {
                         {{ $last ? getLabel(selectedOption) : getLabel(selectedOption) + ',' }}
                       }
@@ -3904,7 +3908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 function watchHostClass(className) {
     const elementRef = inject(ElementRef);
     const destroyRef = inject(DestroyRef);
-    const hasClass = signal(false);
+    const hasClass = signal(false, ...(ngDevMode ? [{ debugName: "hasClass" }] : []));
     const observer = typeof MutationObserver !== 'undefined' &&
         new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
@@ -3931,16 +3935,16 @@ class ShipSidenavComponent {
         this.#selfRef = inject(ElementRef);
         this.openWidth = 280;
         this.openWidthTreshold = this.openWidth * 0.5;
-        this.disableDrag = input(false);
-        this.isOpen = model(false);
+        this.disableDrag = input(false, ...(ngDevMode ? [{ debugName: "disableDrag" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.isOverlay = watchHostClass('overlay');
         this.#closestParent = this.#selfRef.nativeElement.parentElement;
         this.#closestParentRect = this.#closestParent.getBoundingClientRect && this.#closestParent.getBoundingClientRect();
         this.dragImageElement = viewChild.required('dragImageElement');
-        this.dragIsEnding = signal(false);
-        this.dragIsOnScreen = signal(true);
-        this.isDragging = signal(false);
-        this.dragPositionX = signal(0);
+        this.dragIsEnding = signal(false, ...(ngDevMode ? [{ debugName: "dragIsEnding" }] : []));
+        this.dragIsOnScreen = signal(true, ...(ngDevMode ? [{ debugName: "dragIsOnScreen" }] : []));
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.dragPositionX = signal(0, ...(ngDevMode ? [{ debugName: "dragPositionX" }] : []));
         this.dragActualPositionX = computed(() => {
             const dragPosition = this.dragPositionX();
             const openWidth = 280;
@@ -3962,7 +3966,7 @@ class ShipSidenavComponent {
                 return deadZoneStart - dampenedDistance;
             }
             return dragPosition;
-        });
+        }, ...(ngDevMode ? [{ debugName: "dragActualPositionX" }] : []));
         this.draggingStyle = computed(() => {
             if (!this.isOverlay())
                 return null;
@@ -3970,7 +3974,7 @@ class ShipSidenavComponent {
                 return `translateX(${this.dragActualPositionX()}px)`;
             }
             return this.isOpen() ? `translateX(${this.openWidth}px)` : `translateX(0px)`;
-        });
+        }, ...(ngDevMode ? [{ debugName: "draggingStyle" }] : []));
         this.draggingEffect = effect(() => {
             if (typeof document === 'undefined')
                 return;
@@ -3980,7 +3984,7 @@ class ShipSidenavComponent {
             else {
                 document.body.classList.remove('dragging');
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "draggingEffect" }] : []));
     }
     #selfRef;
     #closestParent;
@@ -4045,8 +4049,8 @@ class ShipSidenavComponent {
         e.stopPropagation();
         this.isDragging.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: `
     @if (isOverlay()) {
       <div #dragImageElement class="drag-image"></div>
     }
@@ -4083,7 +4087,7 @@ class ShipSidenavComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSidenavComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-sidenav',
@@ -4162,10 +4166,10 @@ class GridSortableDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GridSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: GridSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: GridSortableDirective, 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.0.4", ngImport: i0, type: GridSortableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GridSortableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4187,10 +4191,10 @@ class ShipSortableComponent {
         this.templateOne = contentChild.required('templateOne');
         this.templateTwo = contentChild.required('templateTwo');
         this.placeholderRef = viewChild.required('placeholderRef');
-        this.items = model([]);
+        this.items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSortableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSortableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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) {
@@ -4202,7 +4206,7 @@ class ShipSortableComponent {
     }
   `, 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.0.4", ngImport: i0, type: ShipSortableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSortableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-sortable',
@@ -4226,12 +4230,12 @@ class ShipSortableDirective {
     constructor() {
         this.#selfEl = inject((ElementRef));
         this.#renderer = inject(Renderer2);
-        this.#placeholderEl = signal(null);
-        this.#ghostEl = signal(null);
-        this.#parentGap = signal(0);
-        this.dragStartIndex = signal(-1);
-        this.dragToIndex = signal(-1);
-        this.dragables = signal([]);
+        this.#placeholderEl = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderEl" }] : []));
+        this.#ghostEl = signal(null, ...(ngDevMode ? [{ debugName: "#ghostEl" }] : []));
+        this.#parentGap = signal(0, ...(ngDevMode ? [{ debugName: "#parentGap" }] : []));
+        this.dragStartIndex = signal(-1, ...(ngDevMode ? [{ debugName: "dragStartIndex" }] : []));
+        this.dragToIndex = signal(-1, ...(ngDevMode ? [{ debugName: "dragToIndex" }] : []));
+        this.dragables = signal([], ...(ngDevMode ? [{ debugName: "dragables" }] : []));
         this.afterDrop = output();
         this.abortController = null;
         this.isDropping = false;
@@ -4278,7 +4282,7 @@ class ShipSortableDirective {
                     }
                 }
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "draggingEffect" }] : []));
         this.draggablesEffect = effect(() => {
             const els = this.dragables();
             if (this.abortController) {
@@ -4289,7 +4293,7 @@ class ShipSortableDirective {
                 el.addEventListener('dragstart', (e) => this.dragStart(e), { signal: this.abortController.signal });
                 el.addEventListener('dragend', () => this.dragEnd(), { signal: this.abortController.signal });
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "draggablesEffect" }] : []));
         this.#dragableObserver = typeof MutationObserver !== 'undefined' &&
             new MutationObserver((mutations) => {
                 for (const mutation of mutations) {
@@ -4436,10 +4440,10 @@ class ShipSortableDirective {
         this.#dragableObserver?.disconnect();
         this.abortController?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: ShipSortableDirective, isStandalone: true, selector: "[shSortable]", outputs: { afterDrop: "afterDrop" }, host: { listeners: { "dragover": "dragOver($event)", "drop": "drop()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSortableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSortableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shSortable]',
@@ -4464,12 +4468,12 @@ function moveIndex(array, event) {
 }
 
 class ShipStepperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipStepperComponent, isStandalone: true, selector: "sh-stepper", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipStepperComponent, isStandalone: true, selector: "sh-stepper", ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipStepperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-stepper',
@@ -4486,9 +4490,9 @@ class ShipResizeDirective {
         this.#el = inject(ElementRef);
         this.#renderer = inject(Renderer2);
         this.#table = inject(ShipTableComponent);
-        this.resizable = input(true);
-        this.minWidth = input(50);
-        this.maxWidth = input(null);
+        this.resizable = input(true, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
+        this.minWidth = input(50, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
+        this.maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
         this.#resizing = false;
         this.#animationFrameRequest = null; // Store request ID
     }
@@ -4560,10 +4564,10 @@ class ShipResizeDirective {
             cancelAnimationFrame(this.#animationFrameRequest);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shResize]',
@@ -4582,21 +4586,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class ShipSortDirective {
     constructor() {
         this.#table = inject(ShipTableComponent);
-        this.shSort = input();
+        this.shSort = input(...(ngDevMode ? [undefined, { debugName: "shSort" }] : []));
         this.sortAsc = computed(() => {
             const currentSort = this.#table.sortByColumn();
             const thisColumn = this.shSort();
             if (!currentSort || !thisColumn)
                 return false;
             return currentSort === thisColumn;
-        });
+        }, ...(ngDevMode ? [{ debugName: "sortAsc" }] : []));
         this.sortDesc = computed(() => {
             const currentSort = this.#table.sortByColumn();
             const thisColumn = this.shSort();
             if (!currentSort || !thisColumn)
                 return false;
             return currentSort === `-${thisColumn}`;
-        });
+        }, ...(ngDevMode ? [{ debugName: "sortDesc" }] : []));
     }
     #table;
     toggleSort() {
@@ -4605,10 +4609,10 @@ class ShipSortDirective {
             return;
         this.#table.toggleSort(sortCol);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipSortDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shSort]',
@@ -4625,7 +4629,7 @@ class ShipStickyRowsDirective {
     constructor() {
         this.#elementRef = inject(ElementRef);
         this.#renderer = inject(Renderer2);
-        this.shStickyRows = input('start');
+        this.shStickyRows = input('start', ...(ngDevMode ? [{ debugName: "shStickyRows" }] : []));
     }
     #elementRef;
     #renderer;
@@ -4642,10 +4646,10 @@ class ShipStickyRowsDirective {
             this.#renderer.setStyle(nativeElement, 'grid-row', position === 'end' ? `-${rowSpanCount + 1} / -1` : `1 / ${rowSpanCount + 1}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipStickyRowsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: ShipStickyRowsDirective, isStandalone: true, selector: "[shStickyRows]", inputs: { shStickyRows: { classPropertyName: "shStickyRows", publicName: "shStickyRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sticky": "shStickyRows() === \"start\"", "class.sticky-end": "shStickyRows() === \"end\"" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipStickyRowsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: ShipStickyRowsDirective, isStandalone: true, selector: "[shStickyRows]", inputs: { shStickyRows: { classPropertyName: "shStickyRows", publicName: "shStickyRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sticky": "shStickyRows() === \"start\"", "class.sticky-end": "shStickyRows() === \"end\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipStickyRowsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipStickyRowsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shStickyRows]',
@@ -4659,7 +4663,7 @@ class ShipStickyColumnsDirective {
     constructor() {
         this.#elementRef = inject(ElementRef);
         this.#renderer = inject(Renderer2);
-        this.shStickyColumns = input('start');
+        this.shStickyColumns = input('start', ...(ngDevMode ? [{ debugName: "shStickyColumns" }] : []));
     }
     #elementRef;
     #renderer;
@@ -4675,10 +4679,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.0.4", ngImport: i0, type: ShipStickyColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipStickyColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipStickyColumnsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipStickyColumnsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shStickyColumns]',
@@ -4693,22 +4697,22 @@ class ShipTableComponent {
     constructor() {
         this.#el = inject(ElementRef);
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
-        this.loading = input(false);
-        this.data = input([]);
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
         this.dataChange = output();
-        this.sortByColumn = model(null);
+        this.sortByColumn = model(null, ...(ngDevMode ? [{ debugName: "sortByColumn" }] : []));
         // thead = viewChild<ElementRef<HTMLTableSectionElement>>('thead');
-        this.tbody = viewChild('tbody');
+        this.tbody = viewChild('tbody', ...(ngDevMode ? [{ debugName: "tbody" }] : []));
         this.columns = observeChildren(this.tbody, ['tr:first-child th']);
-        this.class = signal(this.#shConfig?.tableType ?? 'default');
-        this.resizing = signal(false);
-        this.sizeTrigger = signal(true);
+        this.class = signal(this.#shConfig?.tableType ?? 'default', ...(ngDevMode ? [{ debugName: "class" }] : []));
+        this.resizing = signal(false, ...(ngDevMode ? [{ debugName: "resizing" }] : []));
+        this.sizeTrigger = signal(true, ...(ngDevMode ? [{ debugName: "sizeTrigger" }] : []));
         this.#initialData = null;
-        this.#initialDataSet = signal(false);
-        this.scrollXState = signal(-1);
-        this.scrollYState = signal(-1);
-        this.canScrollX = signal(false);
-        this.canScrollY = signal(false);
+        this.#initialDataSet = signal(false, ...(ngDevMode ? [{ debugName: "#initialDataSet" }] : []));
+        this.scrollXState = signal(-1, ...(ngDevMode ? [{ debugName: "scrollXState" }] : []));
+        this.scrollYState = signal(-1, ...(ngDevMode ? [{ debugName: "scrollYState" }] : []));
+        this.canScrollX = signal(false, ...(ngDevMode ? [{ debugName: "canScrollX" }] : []));
+        this.canScrollY = signal(false, ...(ngDevMode ? [{ debugName: "canScrollY" }] : []));
         this.columnSizes = computed(() => {
             this.sizeTrigger();
             const colSignal = this.columns.signal();
@@ -4727,7 +4731,7 @@ class ShipTableComponent {
                 }
                 return `${acc} 1fr`;
             }, '');
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnSizes" }] : []));
         this.e = effect(() => {
             const sortByColumn = this.sortByColumn();
             if (sortByColumn === null) {
@@ -4755,7 +4759,7 @@ class ShipTableComponent {
                 return isDescending ? -comparison : comparison;
             });
             this.dataChange.emit(sortedData);
-        });
+        }, ...(ngDevMode ? [{ debugName: "e" }] : []));
     }
     #el;
     #shConfig;
@@ -4809,8 +4813,8 @@ class ShipTableComponent {
         this.scrollYState.set(nextYState);
         this.canScrollY.set(canScrollY);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (loading()) {
       <sh-progress-bar class="indeterminate primary" />
     }
@@ -4826,7 +4830,7 @@ class ShipTableComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: ShipProgressBarComponent, selector: "sh-progress-bar", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-table',
@@ -4866,12 +4870,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             }] } });
 
 class ShipTabsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipTabsComponent, isStandalone: true, selector: "sh-tabs", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipTabsComponent, isStandalone: true, selector: "sh-tabs", ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-tabs',
@@ -4885,8 +4889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class ShipToggleCardComponent {
     constructor() {
-        this.isActive = model(false);
-        this.disallowToggle = input(false);
+        this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+        this.disallowToggle = input(false, ...(ngDevMode ? [{ debugName: "disallowToggle" }] : []));
     }
     ngOnInit() {
         if (this.disallowToggle()) {
@@ -4896,8 +4900,8 @@ class ShipToggleCardComponent {
     toggle() {
         this.isActive.set(!this.isActive());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipToggleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipToggleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: `
     <h3 (click)="disallowToggle() || toggle()">
       <ng-content select="[title]">Title</ng-content>
 
@@ -4913,7 +4917,7 @@ class ShipToggleCardComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipToggleCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipToggleCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-toggle-card',
@@ -4941,8 +4945,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 class ShipToggleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ShipToggleComponent, isStandalone: true, selector: "sh-toggle", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipToggleComponent, isStandalone: true, selector: "sh-toggle", ngImport: i0, template: `
     <div class="box">
       <div class="knob"></div>
     </div>
@@ -4950,7 +4954,7 @@ class ShipToggleComponent {
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-toggle',
@@ -4970,18 +4974,18 @@ class ShipTooltipComponent {
     constructor() {
         this.#BASE_SPACE = 4;
         this.SUPPORTS_ANCHOR = CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
-        this.disabled = input(false);
-        this.above = input(false);
-        this.right = input(false);
-        this._above = signal(this.above());
-        this._right = signal(this.right());
-        this.message = input.required();
-        this.isOpen = model(false);
+        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());
-        this.menuStyle = signal(null);
+        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();
@@ -4995,7 +4999,7 @@ class ShipTooltipComponent {
                 this.closed.emit();
                 return false;
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "isCalculatingPosition" }] : []));
         this.abortController = null;
         this.calcPositionEffect = effect(() => {
             const isCalculatingPosition = this.isCalculatingPosition();
@@ -5010,7 +5014,7 @@ class ShipTooltipComponent {
             const scrollableParent = this.#findScrollableParent(this.tooltipRef()?.nativeElement);
             scrollableParent.addEventListener('scroll', () => this.calculateMenuPosition(), { signal });
             document.addEventListener('resize', () => this.calculateMenuPosition(), { signal });
-        });
+        }, ...(ngDevMode ? [{ debugName: "calcPositionEffect" }] : []));
         this.scrollableStyles = ['scroll', 'auto'];
     }
     #BASE_SPACE;
@@ -5078,8 +5082,8 @@ class ShipTooltipComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", 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
@@ -5094,7 +5098,7 @@ class ShipTooltipComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-tooltip',
@@ -5128,14 +5132,14 @@ class ShipVirtualScrollComponent {
         this.#renderer = inject(Renderer2);
         this.#hostElement = inject(ElementRef);
         this.viewportRef = viewChild.required('viewport');
-        this.itemElements = viewChildren('item');
-        this.bufferSize = signal(10);
-        this.itemHeights = signal([]);
-        this.startIndex = signal(0);
-        this.endIndex = signal(0);
-        this.translateY = signal(0);
-        this.totalHeight = computed(() => this.itemHeights().reduce((sum, height) => sum + height, 0));
-        this.numberOfRenderedItems = signal(0);
+        this.itemElements = viewChildren('item', ...(ngDevMode ? [{ debugName: "itemElements" }] : []));
+        this.bufferSize = signal(10, ...(ngDevMode ? [{ debugName: "bufferSize" }] : []));
+        this.itemHeights = signal([], ...(ngDevMode ? [{ debugName: "itemHeights" }] : []));
+        this.startIndex = signal(0, ...(ngDevMode ? [{ debugName: "startIndex" }] : []));
+        this.endIndex = signal(0, ...(ngDevMode ? [{ debugName: "endIndex" }] : []));
+        this.translateY = signal(0, ...(ngDevMode ? [{ debugName: "translateY" }] : []));
+        this.totalHeight = computed(() => this.itemHeights().reduce((sum, height) => sum + height, 0), ...(ngDevMode ? [{ debugName: "totalHeight" }] : []));
+        this.numberOfRenderedItems = signal(0, ...(ngDevMode ? [{ debugName: "numberOfRenderedItems" }] : []));
         this.#resizeObserver = null;
         this.#hostResizeObserver = null;
         this.#itemHeightsEffect = effect(() => {
@@ -5149,11 +5153,11 @@ class ShipVirtualScrollComponent {
                 }
                 this.translateY.set(newTranslateY);
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#itemHeightsEffect" }] : []));
         this.#totalHeightEffect = effect(() => {
             const _ = this.totalHeight();
             this.#changeRef.detectChanges();
-        });
+        }, ...(ngDevMode ? [{ debugName: "#totalHeightEffect" }] : []));
         this.#itemElementsEffect = effect(() => {
             const itemElements = this.itemElements();
             if (this.#resizeObserver && itemElements) {
@@ -5168,7 +5172,7 @@ class ShipVirtualScrollComponent {
                 this.itemHeights.set(heights);
                 this.#calculateVisibleItems();
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#itemElementsEffect" }] : []));
     }
     #changeRef;
     #renderer;
@@ -5262,8 +5266,8 @@ class ShipVirtualScrollComponent {
         this.#cleanupResizeObserver();
         this.#cleanupHostResizeObserver();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", 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: `
     <div class="viewport" #viewport (scroll)="onScroll()">
       <div class="total-height" [style.height]="totalHeight() + 'px'"></div>
       <div class="items-container" [style.transform]="'translateY(' + translateY() + 'px)'">
@@ -5272,7 +5276,7 @@ class ShipVirtualScrollComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipVirtualScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipVirtualScrollComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-virtual-scroll',
@@ -5291,7 +5295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class ShipFileDragDropDirective {
     constructor() {
-        this.filesOver = signal(false);
+        this.filesOver = signal(false, ...(ngDevMode ? [{ debugName: "filesOver" }] : []));
         this.filesDropped = output();
     }
     onDragOver(e) {
@@ -5313,10 +5317,10 @@ class ShipFileDragDropDirective {
             this.filesDropped.emit(files);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFileDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", 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.1.6", ngImport: i0, type: ShipFileDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipFileDragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipFileDragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shDragDrop]',
@@ -5340,10 +5344,10 @@ class ShipPreventWheelDirective {
     wheel(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipPreventWheelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: ShipPreventWheelDirective, isStandalone: true, selector: "[shPreventWheel]", host: { listeners: { "wheel": "wheel($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipPreventWheelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: ShipPreventWheelDirective, isStandalone: true, selector: "[shPreventWheel]", host: { listeners: { "wheel": "wheel($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipPreventWheelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipPreventWheelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shPreventWheel]',
@@ -5359,15 +5363,15 @@ class ShipTooltipWrapper {
     #renderer;
     #positionAbort;
     constructor() {
-        this.positionAnchorName = input.required();
-        this.anchorEl = input.required();
-        this.isOpen = input(false);
+        this.positionAnchorName = input.required(...(ngDevMode ? [{ debugName: "positionAnchorName" }] : []));
+        this.anchorEl = input.required(...(ngDevMode ? [{ debugName: "anchorEl" }] : []));
+        this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.#selfRef = inject((ElementRef));
         this.#renderer = inject(Renderer2);
         this.#positionAbort = null;
         // readonly BASE_SPACE = 8;
         this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc');
-        this.isBelow = signal(false);
+        this.isBelow = signal(false, ...(ngDevMode ? [{ debugName: "isBelow" }] : []));
         this.openEffect = effect(() => {
             if (this.isOpen()) {
                 setTimeout(() => {
@@ -5378,7 +5382,7 @@ class ShipTooltipWrapper {
             else {
                 this.#selfRef.nativeElement.hidePopover();
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
         this.calculateTooltipPosition = () => {
             if (!this.anchorEl())
                 return;
@@ -5417,14 +5421,14 @@ class ShipTooltipWrapper {
     ngOnDestroy() {
         this.#positionAbort?.abort();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", 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": "\"auto\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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": "\"auto\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
     <div class="tooltip-content">
       <ng-content></ng-content>
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTooltipWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'ship-tooltip-wrapper',
@@ -5444,7 +5448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }], ctorParameters: () => [] });
 class ShipTooltipDirective {
     constructor() {
-        this.shTooltip = input.required();
+        this.shTooltip = input.required(...(ngDevMode ? [{ debugName: "shTooltip" }] : []));
         this.#elementRef = inject((ElementRef));
         this.#viewContainerRef = inject(ViewContainerRef);
         this.#environmentInjector = inject(EnvironmentInjector);
@@ -5452,7 +5456,7 @@ class ShipTooltipDirective {
         this.#wrapperComponentRef = null;
         this.#projectedViewRef = null;
         this.anchorName = `--${generateUniqueId()}`;
-        this.isOpen = signal(false);
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     }
     #elementRef;
     #viewContainerRef;
@@ -5504,10 +5508,10 @@ class ShipTooltipDirective {
             this.#projectedViewRef = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: ShipTooltipDirective, isStandalone: true, selector: "[shTooltip]", inputs: { shTooltip: { classPropertyName: "shTooltip", publicName: "shTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" }, properties: { "style.anchor-name": "anchorName", "class.active": "isOpen()" }, classAttribute: "tooltip" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: ShipTooltipDirective, isStandalone: true, selector: "[shTooltip]", inputs: { shTooltip: { classPropertyName: "shTooltip", publicName: "shTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" }, properties: { "style.anchor-name": "anchorName", "class.active": "isOpen()" }, classAttribute: "tooltip" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shTooltip]',