@ship-ui/core 0.14.1 → 0.14.5

package/fesm2022/ship-ui-core.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, input, computed, viewChild, effect, HostListener, NgModule, signal, Injectable, InjectionToken, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, DestroyRef, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, contentChild, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
+import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, input, computed, viewChild, effect, HostListener, NgModule, Injectable, InjectionToken, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, contentChild, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
+import { SHIP_CONFIG as SHIP_CONFIG$1 } from 'ship-ui';
 import { DatePipe, NgTemplateOutlet } from '@angular/common';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
@@ -34,13 +35,45 @@ 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();
+}
+
+const POSSIBLE_VARIANTS = ['simple', 'outlined', 'flat', 'raised'];
 class ShipAlertComponent {
     constructor() {
+        this.#shConfig = inject(SHIP_CONFIG$1, { optional: true });
+        this.variant = signal(this.#shConfig?.alertVariant ?? '', ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this._el = inject(ElementRef); // Used by alert container
         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" }] : []));
+        this.currentClasses = classMutationSignal();
+        this.activeClass = computed(() => {
+            const variant = this.variant();
+            if (!variant)
+                return this.currentClasses();
+            const hasVariant = POSSIBLE_VARIANTS.find((x) => this.currentClasses().includes(x));
+            return hasVariant ? this.currentClasses() : `${this.currentClasses()} ${variant}`;
+        }, ...(ngDevMode ? [{ debugName: "activeClass" }] : []));
     }
+    #shConfig;
     removeAlert() {
         if (this.id() && this.alertService()) {
             this.alertService()?.removeAlert(this.id());
@@ -55,7 +88,7 @@ class ShipAlertComponent {
       </div>
 
       <div class="icon">
-        @let _alertClasses = alertClasses();
+        @let _alertClasses = currentClasses();
 
         @if (_alertClasses.includes('primary')) {
           <sh-icon class="state-icon">info</sh-icon>
@@ -101,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       </div>
 
       <div class="icon">
-        @let _alertClasses = alertClasses();
+        @let _alertClasses = currentClasses();
 
         @if (_alertClasses.includes('primary')) {
           <sh-icon class="state-icon">info</sh-icon>
@@ -575,10 +608,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }] });
 
 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 +631,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 +1300,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 +1333,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 +1352,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 +1363,6 @@ class ShipDatepickerComponent {
             this.#setDateAsCurrent();
         }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : []));
     }
-    #selfRef;
     #INIT_DATE;
     getLastVisibleMonth() {
         const lastMonthOffset = this.monthsToShow() - 1;
@@ -1660,7 +1679,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();