@ship-ui/core 0.14.1 → 0.14.2

package/fesm2022/ship-ui-core.mjs

@@ -574,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>
@@ -592,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>
@@ -1261,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);
@@ -1312,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" }] : []));
@@ -1332,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();
@@ -1343,7 +1351,6 @@ class ShipDatepickerComponent {
             this.#setDateAsCurrent();
         }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : []));
     }
-    #selfRef;
     #INIT_DATE;
     getLastVisibleMonth() {
         const lastMonthOffset = this.monthsToShow() - 1;
@@ -1660,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();