@ship-ui/core 0.13.32 → 0.14.2

package/fesm2022/ship-ui-core.mjs

@@ -47,10 +47,11 @@ class ShipAlertComponent {
         }
     }
     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: `
+    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 } }, host: { classAttribute: "sh-sheet" }, ngImport: i0, template: `
     <div class="alert">
       <div #ref class="icon" [style.display]="!ref.children.length ? 'none' : 'block'">
-        <ng-content select="[icon]"></ng-content>
+        <ng-content select="[icon]" />
+        <ng-content select="sh-icon" />
       </div>
 
       <div class="icon">
@@ -72,8 +73,8 @@ class ShipAlertComponent {
       </div>
 
       <div class="title">
-        <ng-content select="[title]"></ng-content>
-        <ng-content></ng-content>
+        <ng-content select="[title]" />
+        <ng-content />
       </div>
 
       @if (id()) {
@@ -81,7 +82,8 @@ class ShipAlertComponent {
       }
 
       <div class="content">
-        <ng-content select="[content]"></ng-content>
+        <ng-content select="[content]" />
+        <ng-content select="p" />
       </div>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -94,7 +96,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     template: `
     <div class="alert">
       <div #ref class="icon" [style.display]="!ref.children.length ? 'none' : 'block'">
-        <ng-content select="[icon]"></ng-content>
+        <ng-content select="[icon]" />
+        <ng-content select="sh-icon" />
       </div>
 
       <div class="icon">
@@ -116,8 +119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       </div>
 
       <div class="title">
-        <ng-content select="[title]"></ng-content>
-        <ng-content></ng-content>
+        <ng-content select="[title]" />
+        <ng-content />
       </div>
 
       @if (id()) {
@@ -125,11 +128,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       }
 
       <div class="content">
-        <ng-content select="[content]"></ng-content>
+        <ng-content select="[content]" />
+        <ng-content select="p" />
       </div>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'sh-sheet',
+                    },
                 }]
         }] });
 
@@ -526,7 +533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class ShipButtonComponent {
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipButtonComponent, isStandalone: true, selector: "[shButton]", host: { classAttribute: "sh-sheet-h" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipButtonComponent, decorators: [{
             type: Component,
@@ -535,6 +542,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     imports: [],
                     template: '<ng-content></ng-content>',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'sh-sheet-h',
+                    },
                 }]
         }] });
 
@@ -564,11 +574,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
+function classMutationSignal() {
+    const element = inject(ElementRef).nativeElement;
+    if (!element)
+        return signal('');
+    const classListSignal = signal(element.className, ...(ngDevMode ? [{ debugName: "classListSignal" }] : []));
+    if (typeof MutationObserver === 'undefined')
+        return classListSignal.asReadonly();
+    const destroyRef = inject(DestroyRef);
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                const target = mutation.target;
+                classListSignal.set(target.className);
+            }
+        }
+    });
+    observer.observe(element, { attributes: true });
+    destroyRef.onDestroy(() => observer.disconnect());
+    return classListSignal.asReadonly();
+}
+
 class ShipCheckboxComponent {
-    #selfRef = inject(ElementRef);
+    constructor() {
+        this.currentClassList = classMutationSignal();
+        this.showClasses = computed(() => {
+            const classArr = this.currentClassList().split(' ');
+            return classArr.includes('active') ? classArr : '';
+        }, ...(ngDevMode ? [{ debugName: "showClasses" }] : []));
+    }
     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">
+    <div class="box sh-sheet" [class]="showClasses()">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
     </div>
@@ -582,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'sh-checkbox',
                     imports: [ShipIconComponent],
                     template: `
-    <div class="box">
+    <div class="box sh-sheet" [class]="showClasses()">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
     </div>
@@ -595,7 +632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class ShipChipComponent {
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipChipComponent, isStandalone: true, selector: "sh-chip", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: '<div><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipChipComponent, decorators: [{
             type: Component,
@@ -604,6 +641,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     imports: [],
                     template: '<div><ng-content></ng-content></div>',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'sh-sheet',
+                    },
                 }]
         }] });
 
@@ -1248,24 +1288,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 args: ['click']
             }] } });
 
-function classMutationSignal(element) {
-    const classListSignal = signal(element.className, ...(ngDevMode ? [{ debugName: "classListSignal" }] : []));
-    if (typeof MutationObserver === 'undefined')
-        return classListSignal.asReadonly();
-    const destroyRef = inject(DestroyRef);
-    const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                const target = mutation.target;
-                classListSignal.set(target.className);
-            }
-        }
-    });
-    observer.observe(element, { attributes: true });
-    destroyRef.onDestroy(() => observer.disconnect());
-    return classListSignal.asReadonly();
-}
-
 function contentProjectionSignal(hostElement, querySelector) {
     const projectedElementsSignal = signal([], ...(ngDevMode ? [{ debugName: "projectedElementsSignal" }] : []));
     const destroyRef = inject(DestroyRef);
@@ -1299,7 +1321,6 @@ function contentProjectionSignal(hostElement, querySelector) {
 
 class ShipDatepickerComponent {
     constructor() {
-        this.#selfRef = inject(ElementRef);
         this.#INIT_DATE = this.#getUTCDate(new Date());
         this.date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : []));
         this.endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
@@ -1319,7 +1340,7 @@ class ShipDatepickerComponent {
             const weekdayLabels = this.weekdayLabels();
             return weekdayLabels.slice(startOfWeek).concat(weekdayLabels.slice(0, startOfWeek));
         }, ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
-        this.currentClasses = classMutationSignal(this.#selfRef.nativeElement);
+        this.currentClasses = classMutationSignal();
         this.someEffect = effect(() => {
             const _ = this.currentClasses();
             this.#findSelectedAndCalc();
@@ -1330,7 +1351,6 @@ class ShipDatepickerComponent {
             this.#setDateAsCurrent();
         }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : []));
     }
-    #selfRef;
     #INIT_DATE;
     getLastVisibleMonth() {
         const lastMonthOffset = this.monthsToShow() - 1;
@@ -1647,7 +1667,7 @@ class ShipDatepickerInputComponent {
         }, ...(ngDevMode ? [{ debugName: "_maskedDate" }] : []));
         this.internalDate = signal(this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "internalDate" }] : []));
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.currentClass = classMutationSignal(this.#elementRef.nativeElement);
+        this.currentClass = classMutationSignal();
         this.#inputObserver = contentProjectionSignal(this.#elementRef.nativeElement, '#input-wrap input');
         this.#inputRefEffect = effect(() => {
             const inputs = this.#inputObserver();
@@ -2000,7 +2020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class ShipEventCardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipEventCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipEventCardComponent, isStandalone: true, selector: "sh-event-card", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipEventCardComponent, isStandalone: true, selector: "sh-event-card", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: `
     <div class="content">
       <ng-content />
     </div>
@@ -2027,6 +2047,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'sh-sheet',
+                    },
                 }]
         }] });