@ship-ui/core 0.14.2 → 0.14.6

package/fesm2022/ship-ui-core.mjs

@@ -1,5 +1,5 @@
 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, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, contentChild, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
 import { DatePipe, NgTemplateOutlet } from '@angular/common';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
@@ -34,13 +34,47 @@ 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 SHIP_CONFIG = new InjectionToken('Ship UI Config');
+
+const POSSIBLE_VARIANTS = ['simple', 'outlined', 'flat', 'raised'];
 class ShipAlertComponent {
     constructor() {
+        this.#shConfig = inject(SHIP_CONFIG, { 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 +89,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 +135,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>
@@ -307,8 +341,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
-const SHIP_CONFIG = new InjectionToken('Ship UI Config');
-
 const DEFAULT_OPTIONS$1 = {
     class: 'default',
     width: undefined,
@@ -574,27 +606,6 @@ 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 {
     constructor() {
         this.currentClassList = classMutationSignal();