@ship-ui/core 0.19.5 → 0.22.0

package/bin/ship-fg.mjs

@@ -3236,7 +3236,7 @@ import { parseArgs } from "util";
 import { spawnSync } from "child_process";
 import { watch } from "fs";
 import { readFile as readFile2, writeFile, readdir, mkdir } from "fs/promises";
-import { dirname, join, resolve } from "path";
+import { dirname as dirname2, join, resolve as resolve2 } from "path";
 import { fileURLToPath } from "url";
 import { gzipSync } from "zlib";
 
@@ -3244,12 +3244,14 @@ import { gzipSync } from "zlib";
 var import_wawoff2 = __toESM(require_wawoff2(), 1);
 import { readFile } from "fs/promises";
 import { createRequire as createRequire2 } from "module";
+import { dirname, resolve } from "path";
 var require2 = createRequire2(import.meta.url);
 var harfbuzzInst = null;
 async function loadAndInitializeHarfbuzz() {
   if (harfbuzzInst)
     return harfbuzzInst;
-  const wasmPath = require2.resolve("harfbuzzjs/hb-subset.wasm");
+  const mainEntry = require2.resolve("harfbuzzjs");
+  const wasmPath = resolve(dirname(mainEntry), "harfbuzz-subset.wasm");
   const wasmBuffer = await readFile(wasmPath);
   const { instance } = await WebAssembly.instantiate(wasmBuffer);
   const harfbuzzJsWasm = instance.exports;
@@ -3323,14 +3325,14 @@ function formatFileSize(bytes, dm = 2) {
 }
 
 // bin/src/ship-fg.ts
-var _dirname = dirname(fileURLToPath(import.meta.url));
+var _dirname = dirname2(fileURLToPath(import.meta.url));
 var CWD_PATH = process.cwd();
-var PHOSPHOR_SRC_PATH = resolve(CWD_PATH, "node_modules", "@phosphor-icons", "web", "src");
+var PHOSPHOR_SRC_PATH = resolve2(CWD_PATH, "node_modules", "@phosphor-icons", "web", "src");
 var jsScannerFallback = async (PROJECT_SRC, shipUiDir, CWD_PATH2) => {
   const uniqueIcons = new Set;
   const isValidIcon = (s) => /^[a-z0-9-]+$/.test(s);
   try {
-    const pkgPath = resolve(shipUiDir, "package.json");
+    const pkgPath = resolve2(shipUiDir, "package.json");
     const pkgData = JSON.parse(await readFile2(pkgPath, "utf8"));
     if (pkgData.libraryIcons) {
       pkgData.libraryIcons.forEach((i) => uniqueIcons.add(i));
@@ -3341,7 +3343,7 @@ var jsScannerFallback = async (PROJECT_SRC, shipUiDir, CWD_PATH2) => {
     for (const entry of entries) {
       if (entry.name === "node_modules" || entry.name.startsWith("."))
         continue;
-      const fullPath = resolve(dir, entry.name);
+      const fullPath = resolve2(dir, entry.name);
       if (entry.isDirectory()) {
         await scanDir(fullPath);
       } else if (entry.name.endsWith(".html") || entry.name.endsWith(".ts")) {
@@ -3372,7 +3374,7 @@ var jsScannerFallback = async (PROJECT_SRC, shipUiDir, CWD_PATH2) => {
   const glyphMaps = new Map;
   for (const variant of variants) {
     try {
-      const selPath = resolve(CWD_PATH2, "node_modules", "@phosphor-icons", "web", "src", variant, "selection.json");
+      const selPath = resolve2(CWD_PATH2, "node_modules", "@phosphor-icons", "web", "src", variant, "selection.json");
       const parsed = JSON.parse(await readFile2(selPath, "utf8"));
       const isDuotone = variant === "duotone";
       for (const icon of parsed.icons || []) {
@@ -3430,8 +3432,8 @@ var watchers = [];
 var run = async (PROJECT_SRC, PROJECT_PUBLIC, TARGET_FONT_TYPE, values) => {
   const startTime = performance.now();
   const actualDir = _dirname;
-  const scannerPath = resolve(actualDir, "./ship-fg-scanner");
-  const shipUiDir = resolve(actualDir, "../");
+  const scannerPath = resolve2(actualDir, "./ship-fg-scanner");
+  const shipUiDir = resolve2(actualDir, "../");
   let groupedIcons = {};
   let missingIconsArray = [];
   try {
@@ -3589,10 +3591,10 @@ function capitalize(str) {
 var main = async (values) => {
   const TARGET_FONT_TYPE = "woff2";
   const actualDir = _dirname;
-  const packageJsonPath = resolve(actualDir, "../package.json");
+  const packageJsonPath = resolve2(actualDir, "../package.json");
   const PROJECT_SRC = values.src;
   const PROJECT_PUBLIC = values.out;
-  const selectionJsonPath = resolve(PHOSPHOR_SRC_PATH, "regular", "selection.json");
+  const selectionJsonPath = resolve2(PHOSPHOR_SRC_PATH, "regular", "selection.json");
   const selectionData = await readFile2(selectionJsonPath, "utf8");
   const GLYPH_MAP = JSON.parse(selectionData).icons.reduce((acc, iconWrapper) => {
     const name = iconWrapper.properties.name;
@@ -3627,7 +3629,7 @@ Watching for file changes. Press Cmd+C to stop.`);
   if (values.watch) {
     const excludeFolders = ["node_modules", ".git", ".vscode", "bin", "assets"].concat([PROJECT_PUBLIC]);
     watchers.push(watch(PROJECT_SRC, { recursive: true }, (_, filename) => {
-      if (filename && !excludeFolders.some((folder) => resolve(join(PROJECT_SRC, filename)).includes(folder))) {
+      if (filename && !excludeFolders.some((folder) => resolve2(join(PROJECT_SRC, filename)).includes(folder))) {
         debouncedRun(filename);
       }
     }));

package/bin/src/subset.ts

@@ -1,5 +1,6 @@
 import { readFile } from 'fs/promises';
 import { createRequire } from 'module';
+import { dirname, resolve } from 'path';
 
 const require = createRequire(import.meta.url);
 
@@ -11,7 +12,8 @@ let harfbuzzInst: { harfbuzzJsWasm: any; heapu8: Uint8Array } | null = null;
 async function loadAndInitializeHarfbuzz() {
   if (harfbuzzInst) return harfbuzzInst;
 
-  const wasmPath = require.resolve('harfbuzzjs/hb-subset.wasm');
+  const mainEntry = require.resolve('harfbuzzjs');
+  const wasmPath = resolve(dirname(mainEntry), 'harfbuzz-subset.wasm');
   const wasmBuffer = await readFile(wasmPath);
   const { instance } = await WebAssembly.instantiate(wasmBuffer);
   const harfbuzzJsWasm = instance.exports as any;

package/fesm2022/ship-ui-core-sh-form-field-experimental.mjs

@@ -0,0 +1,42 @@
+import * as i0 from '@angular/core';
+import { effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { createFormInputSignal } from '@ship-ui/core';
+
+class ShipFormFieldExperimental {
+    constructor() {
+        this.firstInput = createFormInputSignal();
+        this.hello = effect(() => {
+            console.log('hello', this.firstInput());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hello" }] : /* istanbul ignore next */ []));
+    }
+    myClick() {
+        this.firstInput.update((x) => x + 'hello');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipFormFieldExperimental, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ShipFormFieldExperimental, isStandalone: true, selector: "sh-form-field-experimental", ngImport: i0, template: `
+    <ng-content></ng-content>
+
+    <button (click)="myClick()">hello</button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipFormFieldExperimental, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-form-field-experimental',
+                    imports: [],
+                    template: `
+    <ng-content></ng-content>
+
+    <button (click)="myClick()">hello</button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipFormFieldExperimental };
+//# sourceMappingURL=ship-ui-core-sh-form-field-experimental.mjs.map

package/fesm2022/ship-ui-core-sh-form-field-experimental.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ship-ui-core-sh-form-field-experimental.mjs","sources":["../../../projects/ship-ui/sh-form-field-experimental/sh-form-field-experimental.ts","../../../projects/ship-ui/sh-form-field-experimental/ship-ui-core-sh-form-field-experimental.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect } from '@angular/core';\nimport { createFormInputSignal } from '@ship-ui/core';\n\n@Component({\n  selector: 'sh-form-field-experimental',\n  imports: [],\n  template: `\n    <ng-content></ng-content>\n\n    <button (click)=\"myClick()\">hello</button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ShipFormFieldExperimental {\n  firstInput = createFormInputSignal();\n\n  hello = effect(() => {\n    console.log('hello', this.firstInput());\n  });\n\n  myClick() {\n    this.firstInput.update((x) => x + 'hello');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAaa,yBAAyB,CAAA;AAVtC,IAAA,WAAA,GAAA;QAWE,IAAA,CAAA,UAAU,GAAG,qBAAqB,EAAE;AAEpC,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,MAAK;YAClB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;QACzC,CAAC;kFAAC;AAKH,IAAA;IAHC,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;IAC5C;8GATW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAP1B;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGU,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,4BAA4B;AACtC,oBAAA,OAAO,EAAE,EAAE;AACX,oBAAA,QAAQ,EAAE;;;;AAIT,EAAA,CAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAChD,iBAAA;;;ACZD;;AAEG;;;;"}

package/fesm2022/ship-ui-core-ship-accordion.mjs

@@ -0,0 +1,127 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, model, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { shipComponentClasses, contentProjectionSignal } from '@ship-ui/core';
+
+class ShipAccordion {
+    constructor() {
+        this.selfElement = inject((ElementRef)).nativeElement;
+        this.name = input(`sh-accordion-${Math.random().toString(36).substring(2, 9)}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.allowMultiple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowMultiple" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.hostClasses = shipComponentClasses('accordion', {
+            variant: this.variant,
+            size: this.size,
+        });
+        this.items = contentProjectionSignal('details', {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['open', 'value'],
+        });
+        this.selfElement.addEventListener('toggle', this.onToggle.bind(this), true);
+        effect(() => {
+            const isMultiple = this.allowMultiple();
+            const groupName = this.name();
+            const valStr = this.value();
+            const vals = valStr ? valStr.split(',').filter((v) => v !== '') : [];
+            this.items().forEach((details) => {
+                if (!isMultiple) {
+                    details.setAttribute('name', groupName);
+                }
+                else {
+                    details.removeAttribute('name');
+                }
+                const summary = details.querySelector('summary');
+                if (summary && !summary.querySelector('sh-icon')) {
+                    const icon = document.createElement('sh-icon');
+                    icon.textContent = 'caret-down';
+                    summary.appendChild(icon);
+                }
+                let contentWrapper = details.querySelector(':scope > .content');
+                if (!contentWrapper) {
+                    const newWrapper = document.createElement('div');
+                    newWrapper.className = 'content';
+                    const childrenToMove = Array.from(details.childNodes).filter((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'summary') {
+                            return false;
+                        }
+                        return true;
+                    });
+                    childrenToMove.forEach((child) => newWrapper.appendChild(child));
+                    details.appendChild(newWrapper);
+                    contentWrapper = newWrapper;
+                }
+                const itemVal = details.getAttribute('value');
+                if (itemVal && vals.includes(itemVal)) {
+                    // Avoid triggering endless loops by only setting open if it actually changed
+                    if (!details.open)
+                        details.open = true;
+                }
+                else if (itemVal) {
+                    if (details.open)
+                        details.open = false;
+                }
+            });
+        });
+    }
+    onToggle(event) {
+        const target = event.target;
+        if (target.tagName !== 'DETAILS')
+            return;
+        if (!this.selfElement.contains(target))
+            return;
+        const itemVal = target.getAttribute('value');
+        if (!itemVal)
+            return; // Uncontrolled details element
+        const isOpen = target.open;
+        if (this.allowMultiple()) {
+            let vals = this.value()
+                ? this.value()
+                    .split(',')
+                    .filter((v) => v !== '')
+                : [];
+            if (isOpen && !vals.includes(itemVal))
+                vals.push(itemVal);
+            if (!isOpen)
+                vals = vals.filter((v) => v !== itemVal);
+            this.value.set(vals.join(','));
+        }
+        else {
+            if (isOpen) {
+                this.value.set(itemVal);
+            }
+            else {
+                if (this.value() === itemVal) {
+                    this.value.set(null);
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ShipAccordion, isStandalone: true, selector: "sh-accordion", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sh-accordion": "true", "class": "hostClasses()" } }, ngImport: i0, template: `
+    <ng-content></ng-content>
+  `, isInline: true, styles: ["sh-accordion{--acc-pad: 1rem;--acc-f: var(--paragraph-30);--acc-bc: var(--base-4);--acc-s: var(--shape-2);display:flex;flex-direction:column;border:var(--border-10);border-color:var(--acc-bc);border-radius:var(--acc-s);overflow:hidden;background:var(--base-1)}sh-accordion:empty{display:none}sh-accordion.small{--acc-pad: .75rem;--acc-f: var(--paragraph-40)}sh-accordion.type-b{--acc-s: 0;width:100%;height:100%;border:0;overflow:auto}sh-accordion.type-b>details:last-child{border-bottom:var(--border-10)}sh-accordion details{width:100%}sh-accordion details.disabled{opacity:.5;pointer-events:none}sh-accordion details.disabled summary{cursor:not-allowed}sh-accordion details>summary{list-style:none}sh-accordion details>summary::-webkit-details-marker{display:none}sh-accordion details>summary{display:flex;align-items:center;padding:var(--acc-pad);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s;font-weight:500;font-size:var(--acc-f);border-bottom:var(--border-10);border-color:var(--acc-bc)}sh-accordion details>summary:focus-visible{outline:2px solid var(--primary-8);outline-offset:-2px;border-radius:var(--acc-s)}sh-accordion details>summary sh-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);color:var(--mono-11);margin-left:auto}sh-accordion details:last-child>summary{border-bottom:0}sh-accordion details[open]>summary{border-bottom:var(--border-10);border-color:var(--acc-bc)}sh-accordion details[open]>summary sh-icon{transform:rotate(180deg)}sh-accordion details[open]+details{border-top:var(--border-10);border-color:var(--acc-bc)}sh-accordion details>.content{padding:var(--acc-pad);background:var(--base-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-accordion', encapsulation: ViewEncapsulation.None, template: `
+    <ng-content></ng-content>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.sh-accordion]': 'true',
+                        '[class]': 'hostClasses()',
+                    }, styles: ["sh-accordion{--acc-pad: 1rem;--acc-f: var(--paragraph-30);--acc-bc: var(--base-4);--acc-s: var(--shape-2);display:flex;flex-direction:column;border:var(--border-10);border-color:var(--acc-bc);border-radius:var(--acc-s);overflow:hidden;background:var(--base-1)}sh-accordion:empty{display:none}sh-accordion.small{--acc-pad: .75rem;--acc-f: var(--paragraph-40)}sh-accordion.type-b{--acc-s: 0;width:100%;height:100%;border:0;overflow:auto}sh-accordion.type-b>details:last-child{border-bottom:var(--border-10)}sh-accordion details{width:100%}sh-accordion details.disabled{opacity:.5;pointer-events:none}sh-accordion details.disabled summary{cursor:not-allowed}sh-accordion details>summary{list-style:none}sh-accordion details>summary::-webkit-details-marker{display:none}sh-accordion details>summary{display:flex;align-items:center;padding:var(--acc-pad);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s;font-weight:500;font-size:var(--acc-f);border-bottom:var(--border-10);border-color:var(--acc-bc)}sh-accordion details>summary:focus-visible{outline:2px solid var(--primary-8);outline-offset:-2px;border-radius:var(--acc-s)}sh-accordion details>summary sh-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);color:var(--mono-11);margin-left:auto}sh-accordion details:last-child>summary{border-bottom:0}sh-accordion details[open]>summary{border-bottom:var(--border-10);border-color:var(--acc-bc)}sh-accordion details[open]>summary sh-icon{transform:rotate(180deg)}sh-accordion details[open]+details{border-top:var(--border-10);border-color:var(--acc-bc)}sh-accordion details>.content{padding:var(--acc-pad);background:var(--base-2)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipAccordion };
+//# sourceMappingURL=ship-ui-core-ship-accordion.mjs.map

package/fesm2022/ship-ui-core-ship-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ship-ui-core-ship-accordion.mjs","sources":["../../../projects/ship-ui/ship-accordion/ship-accordion.ts","../../../projects/ship-ui/ship-accordion/ship-ui-core-ship-accordion.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { contentProjectionSignal, shipComponentClasses, ShipVariant } from '@ship-ui/core';\n\n@Component({\n  selector: 'sh-accordion',\n  styleUrl: './ship-accordion.scss',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <ng-content></ng-content>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.sh-accordion]': 'true',\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ShipAccordion {\n  private selfElement = inject(ElementRef<HTMLElement>).nativeElement;\n\n  readonly name = input<string>(`sh-accordion-${Math.random().toString(36).substring(2, 9)}`);\n  readonly value = model<string | null>(null);\n  readonly allowMultiple = input<boolean>(false);\n  readonly variant = input<ShipVariant | null>(null);\n  readonly size = input<string | null>(null);\n\n  hostClasses = shipComponentClasses('accordion', {\n    variant: this.variant,\n    size: this.size,\n  });\n\n  protected items = contentProjectionSignal<HTMLDetailsElement>('details', {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open', 'value'],\n  });\n\n  constructor() {\n    this.selfElement.addEventListener('toggle', this.onToggle.bind(this), true);\n\n    effect(() => {\n      const isMultiple = this.allowMultiple();\n      const groupName = this.name();\n      const valStr = this.value();\n      const vals = valStr ? valStr.split(',').filter((v) => v !== '') : [];\n\n      this.items().forEach((details) => {\n        if (!isMultiple) {\n          details.setAttribute('name', groupName);\n        } else {\n          details.removeAttribute('name');\n        }\n\n        const summary = details.querySelector('summary');\n        if (summary && !summary.querySelector('sh-icon')) {\n          const icon = document.createElement('sh-icon');\n          icon.textContent = 'caret-down';\n          summary.appendChild(icon);\n        }\n\n        let contentWrapper = details.querySelector(':scope > .content');\n\n        if (!contentWrapper) {\n          const newWrapper = document.createElement('div');\n          newWrapper.className = 'content';\n          const childrenToMove = Array.from(details.childNodes).filter((node) => {\n            if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === 'summary') {\n              return false;\n            }\n            return true;\n          });\n          childrenToMove.forEach((child) => newWrapper.appendChild(child));\n          details.appendChild(newWrapper);\n          contentWrapper = newWrapper;\n        }\n\n        const itemVal = details.getAttribute('value');\n        if (itemVal && vals.includes(itemVal)) {\n          // Avoid triggering endless loops by only setting open if it actually changed\n          if (!details.open) details.open = true;\n        } else if (itemVal) {\n          if (details.open) details.open = false;\n        }\n      });\n    });\n  }\n\n  onToggle(event: Event) {\n    const target = event.target as HTMLDetailsElement;\n    if (target.tagName !== 'DETAILS') return;\n    if (!this.selfElement.contains(target)) return;\n\n    const itemVal = target.getAttribute('value');\n    if (!itemVal) return; // Uncontrolled details element\n\n    const isOpen = target.open;\n\n    if (this.allowMultiple()) {\n      let vals = this.value()\n        ? this.value()!\n            .split(',')\n            .filter((v) => v !== '')\n        : [];\n      if (isOpen && !vals.includes(itemVal)) vals.push(itemVal);\n      if (!isOpen) vals = vals.filter((v) => v !== itemVal);\n      this.value.set(vals.join(','));\n    } else {\n      if (isOpen) {\n        this.value.set(itemVal);\n      } else {\n        if (this.value() === itemVal) {\n          this.value.set(null);\n        }\n      }\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ship-ui-core-ship-alert.mjs

@@ -0,0 +1,305 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, computed, effect, HostListener, NgModule, signal, Injectable } from '@angular/core';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { shipComponentClasses, generateUniqueId } from '@ship-ui/core';
+
+class ShipAlert {
+    constructor() {
+        this.color = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.hostClasses = shipComponentClasses('alert', {
+            color: this.color,
+            variant: this.variant,
+        });
+        this._el = inject(ElementRef); // Used by alert container
+        this.alertService = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alertService" }] : /* istanbul ignore next */ []));
+        this.id = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    }
+    removeAlert() {
+        if (this.id() && this.alertService()) {
+            this.alertService()?.removeAlert(this.id());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipAlert, isStandalone: true, selector: "sh-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, 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 select="sh-icon" />
+      </div>
+
+      <div class="icon">
+        @let _alertClasses = hostClasses();
+
+        @if (_alertClasses.includes('primary')) {
+          <sh-icon class="state-icon">info</sh-icon>
+        } @else if (_alertClasses.includes('accent')) {
+          <sh-icon class="state-icon">info</sh-icon>
+        } @else if (_alertClasses.includes('warn')) {
+          <sh-icon class="state-icon">warning</sh-icon>
+        } @else if (_alertClasses.includes('error')) {
+          <sh-icon class="state-icon">warning-octagon</sh-icon>
+        } @else if (_alertClasses.includes('success')) {
+          <sh-icon class="state-icon">check-circle</sh-icon>
+        } @else {
+          <sh-icon class="state-icon">question</sh-icon>
+        }
+      </div>
+
+      <div class="title">
+        <ng-content select="[title]" />
+        <ng-content />
+      </div>
+
+      @if (id()) {
+        <sh-icon class="close-icon" (click)="removeAlert()">plus</sh-icon>
+      }
+
+      <div class="actions">
+        <ng-content select="button" />
+        <ng-content select="[actions]" />
+      </div>
+
+      <div class="content">
+        <ng-content select="[content]" />
+        <ng-content select="p" />
+      </div>
+    </div>
+  `, isInline: true, styles: ["sh-alert{--alert-ad: .4s;--alert-bs: var(--box-shadow-10);--alert-p: .5rem;max-height:18.75rem;padding-top:0;padding-bottom:0;margin-bottom:0;opacity:1;overflow:hidden;display:block;transition:max-height var(--alert-ad) ease-in-out,transform var(--alert-ad) ease-in-out,opacity var(--alert-ad) ease-in-out,margin-bottom var(--alert-ad) ease-in-out,padding-top var(--alert-ad) ease-in-out,padding-bottom var(--alert-ad) ease-in-out;transform:translateY(0);box-shadow:var(--alert-bs)}sh-alert.simple .content>*{color:var(--sheet-c);opacity:.7}sh-alert.flat,sh-alert.raised{--sheet-c: #fff}sh-alert.flat .content>*,sh-alert.raised .content>*{color:var(--sheet-c);opacity:.8}sh-alert .alert{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto;grid-template-areas:\"stateIcon title closeIcon\" \". content .\";padding:var(--alert-p);align-items:flex-start;gap:.25rem .5rem}sh-alert .alert .close-icon{display:none}sh-alert .alert:has(.actions:empty){grid-template-columns:auto 1fr;grid-template-areas:\"stateIcon title\" \". content\"}sh-alert .alert:has(.actions:empty) .actions{display:none}sh-alert .alert:has(.actions:empty) .close-icon{display:block}sh-alert .alert:has(.content:empty){grid-template-rows:auto;grid-template-areas:\"stateIcon title closeIcon\"}sh-alert .alert:has(.actions:empty):has(.content:empty){grid-template-columns:auto 1fr;grid-template-areas:\"stateIcon title\"}sh-alert .actions{grid-area:closeIcon;display:flex;align-items:center;justify-content:flex-end;gap:.25rem}sh-alert .icon{grid-area:stateIcon;height:1.25rem;width:1.25rem;display:flex;align-items:center;justify-content:center}sh-alert .icon:first-of-type:not(:empty)+.icon{display:none}sh-alert [icon],sh-alert .state-icon{color:var(--alert-state-ic)}sh-alert .close-icon{grid-area:closeIcon;color:var(--alert-close-ic);transform:rotate(45deg);transform-origin:center}sh-alert .title{grid-area:title;padding-top:.125rem;font-weight:500}sh-alert .content{grid-area:content}sh-alert .content:empty{display:none}sh-alert.is-hidden{max-height:0;padding-top:0;padding-bottom:0;opacity:0;margin-bottom:0;overflow:hidden;transform:translateY(-40px)}sh-alert.is-hidden:before{opacity:0}sh-alert.animate-in{transition:none;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;transform:translateY(0)}sh-alert.animate-in:before{opacity:0}sh-alert.animate-out{max-height:0;padding:0;opacity:0;overflow:hidden;transform:translateY(-40px)}sh-alert.animate-out:before{opacity:0}sh-alert:has([content]) .alert{--alert-p: .75rem}\n"], dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-alert', encapsulation: ViewEncapsulation.None, imports: [ShipIcon], template: `
+    <div class="alert">
+      <div #ref class="icon" [style.display]="!ref.children.length ? 'none' : 'block'">
+        <ng-content select="[icon]" />
+        <ng-content select="sh-icon" />
+      </div>
+
+      <div class="icon">
+        @let _alertClasses = hostClasses();
+
+        @if (_alertClasses.includes('primary')) {
+          <sh-icon class="state-icon">info</sh-icon>
+        } @else if (_alertClasses.includes('accent')) {
+          <sh-icon class="state-icon">info</sh-icon>
+        } @else if (_alertClasses.includes('warn')) {
+          <sh-icon class="state-icon">warning</sh-icon>
+        } @else if (_alertClasses.includes('error')) {
+          <sh-icon class="state-icon">warning-octagon</sh-icon>
+        } @else if (_alertClasses.includes('success')) {
+          <sh-icon class="state-icon">check-circle</sh-icon>
+        } @else {
+          <sh-icon class="state-icon">question</sh-icon>
+        }
+      </div>
+
+      <div class="title">
+        <ng-content select="[title]" />
+        <ng-content />
+      </div>
+
+      @if (id()) {
+        <sh-icon class="close-icon" (click)="removeAlert()">plus</sh-icon>
+      }
+
+      <div class="actions">
+        <ng-content select="button" />
+        <ng-content select="[actions]" />
+      </div>
+
+      <div class="content">
+        <ng-content select="[content]" />
+        <ng-content select="p" />
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sh-sheet',
+                        '[class]': 'hostClasses()',
+                    }, styles: ["sh-alert{--alert-ad: .4s;--alert-bs: var(--box-shadow-10);--alert-p: .5rem;max-height:18.75rem;padding-top:0;padding-bottom:0;margin-bottom:0;opacity:1;overflow:hidden;display:block;transition:max-height var(--alert-ad) ease-in-out,transform var(--alert-ad) ease-in-out,opacity var(--alert-ad) ease-in-out,margin-bottom var(--alert-ad) ease-in-out,padding-top var(--alert-ad) ease-in-out,padding-bottom var(--alert-ad) ease-in-out;transform:translateY(0);box-shadow:var(--alert-bs)}sh-alert.simple .content>*{color:var(--sheet-c);opacity:.7}sh-alert.flat,sh-alert.raised{--sheet-c: #fff}sh-alert.flat .content>*,sh-alert.raised .content>*{color:var(--sheet-c);opacity:.8}sh-alert .alert{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto;grid-template-areas:\"stateIcon title closeIcon\" \". content .\";padding:var(--alert-p);align-items:flex-start;gap:.25rem .5rem}sh-alert .alert .close-icon{display:none}sh-alert .alert:has(.actions:empty){grid-template-columns:auto 1fr;grid-template-areas:\"stateIcon title\" \". content\"}sh-alert .alert:has(.actions:empty) .actions{display:none}sh-alert .alert:has(.actions:empty) .close-icon{display:block}sh-alert .alert:has(.content:empty){grid-template-rows:auto;grid-template-areas:\"stateIcon title closeIcon\"}sh-alert .alert:has(.actions:empty):has(.content:empty){grid-template-columns:auto 1fr;grid-template-areas:\"stateIcon title\"}sh-alert .actions{grid-area:closeIcon;display:flex;align-items:center;justify-content:flex-end;gap:.25rem}sh-alert .icon{grid-area:stateIcon;height:1.25rem;width:1.25rem;display:flex;align-items:center;justify-content:center}sh-alert .icon:first-of-type:not(:empty)+.icon{display:none}sh-alert [icon],sh-alert .state-icon{color:var(--alert-state-ic)}sh-alert .close-icon{grid-area:closeIcon;color:var(--alert-close-ic);transform:rotate(45deg);transform-origin:center}sh-alert .title{grid-area:title;padding-top:.125rem;font-weight:500}sh-alert .content{grid-area:content}sh-alert .content:empty{display:none}sh-alert.is-hidden{max-height:0;padding-top:0;padding-bottom:0;opacity:0;margin-bottom:0;overflow:hidden;transform:translateY(-40px)}sh-alert.is-hidden:before{opacity:0}sh-alert.animate-in{transition:none;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;transform:translateY(0)}sh-alert.animate-in:before{opacity:0}sh-alert.animate-out{max-height:0;padding:0;opacity:0;overflow:hidden;transform:translateY(-40px)}sh-alert.animate-out:before{opacity:0}sh-alert:has([content]) .alert{--alert-p: .75rem}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], alertService: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertService", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+class ShipAlertContainer {
+    constructor() {
+        this.inline = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
+        this.alerts = viewChild.required('alerts');
+        this.scroller = viewChild.required('scroller');
+        this.alertService = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alertService" }] : /* istanbul ignore next */ []));
+        // alertHistory = this.alertService()?.alertHistory;
+        // alertHistoryIsOpen = this.alertService()?.alertHistoryIsOpen;
+        // alertHistoryIsHidden = this.alertService()?.alertHistoryIsHidden;
+        this.numberOfOpenAlerts = computed(() => {
+            return this.alertService()
+                .alertHistory()
+                .filter((x) => x.isOpen).length;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numberOfOpenAlerts" }] : /* istanbul ignore next */ []));
+        this.#e = effect(() => {
+            this.alertService().alertHistory();
+            this.alertService().alertHistoryIsOpen();
+            this.#scrollToBottom();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#e" }] : /* istanbul ignore next */ []));
+    }
+    #e;
+    #scrollToBottom() {
+        if (this.scroller() && this.scroller().nativeElement && typeof this.scroller().nativeElement.scrollTo === 'function') {
+            this.scroller().nativeElement.scrollTo(0, this.scroller().nativeElement.scrollHeight);
+        }
+    }
+    onMouseOver() {
+        if (typeof this.inline === 'string')
+            return;
+        this.alertService().setHidden(false);
+    }
+    onMouseOut() {
+        if (typeof this.inline === 'string')
+            return;
+        this.alertService().setHidden(true);
+    }
+    getElementHeight(i) {
+        if (!this.alerts)
+            return 0;
+        const elementHeights = this.alerts()
+            .toArray()
+            .map((element) => element._el.nativeElement.querySelector('.ship-alert-item').offsetHeight);
+        if (!elementHeights)
+            return 0;
+        let totalHeight = 0;
+        const elementTransformPos = elementHeights.map((height, i) => {
+            totalHeight += height;
+            return totalHeight - elementHeights[0];
+        });
+        return elementTransformPos[i];
+    }
+    transformY(i) {
+        return `translateY(calc(-${this.getElementHeight(i - 1)}px + (-10px * ${i})))`;
+    }
+    transitionDelay(i, allOpen = false) {
+        return allOpen
+            ? this.alertService().alertHistory().length - 1 * 40 + 'ms'
+            : (this.numberOfOpenAlerts() - i) * 40 + 'ms';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipAlertContainer, 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 this.alertService().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]=\"this.alertService().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]=\"!this.alertService().alertHistoryIsHidden()\"\n  (mouseover)=\"this.onMouseOver()\"\n  (mouseout)=\"this.onMouseOut()\">\n  <sh-icon class=\"small\">info</sh-icon>\n</div>\n", styles: ["sh-alert-container{width:100%;position:relative}sh-alert-container sh-alert{margin-bottom:.5rem}sh-alert-container sh-alert:first-of-type{margin-bottom:0}sh-alert-container sh-alert.alert-is-hidden{margin-bottom:0}sh-alert-container .scroller{width:100%;max-height:50vh;overflow-y:auto;overflow-x:hidden;padding:.5rem 1rem 1rem .5rem}sh-alert-container .container{flex-direction:column-reverse;display:flex}sh-alert-container .tray{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background-color:var(--base-8);color:var(--base-1);position:absolute;bottom:0;right:0;border-radius:50%;z-index:1000}\n"], dependencies: [{ kind: "component", type: ShipAlert, selector: "sh-alert", inputs: ["color", "variant", "alertService", "id"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ship-alert-container', encapsulation: ViewEncapsulation.None, imports: [ShipAlert, ShipIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroller\" #scroller>\n  <div class=\"container\">\n    @for (alert of this.alertService().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]=\"this.alertService().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]=\"!this.alertService().alertHistoryIsHidden()\"\n  (mouseover)=\"this.onMouseOver()\"\n  (mouseout)=\"this.onMouseOut()\">\n  <sh-icon class=\"small\">info</sh-icon>\n</div>\n", styles: ["sh-alert-container{width:100%;position:relative}sh-alert-container sh-alert{margin-bottom:.5rem}sh-alert-container sh-alert:first-of-type{margin-bottom:0}sh-alert-container sh-alert.alert-is-hidden{margin-bottom:0}sh-alert-container .scroller{width:100%;max-height:50vh;overflow-y:auto;overflow-x:hidden;padding:.5rem 1rem 1rem .5rem}sh-alert-container .container{flex-direction:column-reverse;display:flex}sh-alert-container .tray{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background-color:var(--base-8);color:var(--base-1);position:absolute;bottom:0;right:0;border-radius:50%;z-index:1000}\n"] }]
+        }], propDecorators: { inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], alerts: [{ type: i0.ViewChild, args: ['alerts', { isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], alertService: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertService", required: true }] }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }] } });
+
+class ShipAlertModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertModule, imports: [ShipAlert, ShipAlertContainer], exports: [ShipAlert, ShipAlertContainer] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertModule, imports: [ShipAlert, ShipAlertContainer] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ShipAlert, ShipAlertContainer],
+                    exports: [ShipAlert, ShipAlertContainer],
+                    providers: [],
+                }]
+        }] });
+
+class ShipAlertService {
+    constructor() {
+        this.alertHistory = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alertHistory" }] : /* istanbul ignore next */ []));
+        this.alertHistoryIsOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alertHistoryIsOpen" }] : /* istanbul ignore next */ []));
+        this.alertHistoryIsHidden = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alertHistoryIsHidden" }] : /* istanbul ignore next */ []));
+    }
+    error(message) {
+        this.addAlert({
+            type: 'error',
+            title: message ?? 'An error occured',
+        });
+    }
+    success(message) {
+        this.addAlert({
+            type: 'success',
+            title: message,
+        });
+    }
+    question(message) {
+        this.addAlert({
+            type: 'question',
+            title: message,
+        });
+    }
+    warning(message) {
+        this.addAlert({
+            type: 'warn',
+            title: message,
+        });
+    }
+    info(message) {
+        this.addAlert({
+            type: 'primary',
+            title: message,
+        });
+    }
+    addAlert(alert) {
+        const id = generateUniqueId();
+        this.alertHistory.update((history) => [
+            { ...alert, isOpen: true, animateIn: true, animateOut: false, id },
+            ...history,
+        ]);
+        setTimeout(() => {
+            this.alertHistory.update((history) => history.map((item) => ({
+                ...item,
+                animateIn: item.id === id ? false : item.animateIn,
+            })));
+        }, 40);
+        setTimeout(() => {
+            this.hideAlert(id);
+        }, 2500);
+    }
+    removeAlert(id) {
+        this.alertHistory.update((history) => history.map((item) => ({
+            ...item,
+            animateOut: item.id === id ? false : item.animateOut,
+        })));
+        setTimeout(() => {
+            this.alertHistory.update((history) => history.filter((item) => item.id !== id));
+        }, 300);
+    }
+    hideAlert(id) {
+        this.alertHistory.update((history) => history.map((item) => ({
+            ...item,
+            isOpen: item.id === id ? false : item.isOpen,
+        })));
+    }
+    setHidden(isHidden) {
+        this.alertHistoryIsHidden.set(isHidden);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService };
+//# sourceMappingURL=ship-ui-core-ship-alert.mjs.map