@fuse_ui/alert 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/fuse_ui-alert.mjs +38 -0
  2. package/fesm2022/fuse_ui-alert.mjs.map +1 -0
  3. package/package.json +59 -0
  4. package/types/fuse_ui-alert.d.ts +19 -0
package/fesm2022/fuse_ui-alert.mjs ADDED
@@ -0,0 +1,38 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
3
+
4
+ class FuseAlertComponent {
5
+ // ─── Public @Input() API ───────────────────────────────────────────────────
6
+ type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
7
+ title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
8
+ closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
9
+ variant = input('soft', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
10
+ // ─── Public @Output() API ─────────────────────────────────────────────────
11
+ alertClose = output();
12
+ // ─── Internal signal state ────────────────────────────────────────────────
13
+ dismissed = signal(false, ...(ngDevMode ? [{ debugName: "dismissed" }] : /* istanbul ignore next */ []));
14
+ // ─── Host class computation ──────────────────────────────────────────────
15
+ hostClasses = computed(() => [
16
+ 'fuse-alert',
17
+ `fuse-alert--${this.type()}`,
18
+ `fuse-alert--${this.variant()}`,
19
+ ].join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
20
+ // ─── Template event handler ──────────────────────────────────────────────
21
+ dismiss() {
22
+ this.dismissed.set(true);
23
+ this.alertClose.emit();
24
+ }
25
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
26
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseAlertComponent, isStandalone: true, selector: "fuse-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alertClose: "alertClose" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (!dismissed()) {\n <div class=\"fuse-alert__inner\">\n\n <!-- Icon -->\n <span class=\"fuse-alert__icon\" aria-hidden=\"true\">\n @switch (type()) {\n @case ('info') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75S21.75 6.615 21.75 12\n 17.385 21.75 12 21.75 2.25 17.385 2.25 12zm8.706-1.442c1.146-.573\n 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573\n -2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12\n 9a.75.75 0 100-1.5.75.75 0 000 1.5z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('success') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75S21.75 6.615 21.75 12\n 17.385 21.75 12 21.75 2.25 17.385 2.25 12zm13.36-1.814a.75.75\n 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06\n 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29\n 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4\n 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75\n 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75\n 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75\n 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12\n 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75\n 0 10-1.06-1.06L12 10.94l-1.72-1.72z\" clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <!-- Body -->\n <div class=\"fuse-alert__body\">\n @if (title()) {\n <span class=\"fuse-alert__title\">{{ title() }}</span>\n }\n <span class=\"fuse-alert__message\"><ng-content></ng-content></span>\n </div>\n\n <!-- Close button -->\n @if (closable()) {\n <button\n type=\"button\"\n class=\"fuse-alert__close\"\n aria-label=\"Dismiss alert\"\n (click)=\"dismiss()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"\n fill=\"currentColor\" width=\"16\" height=\"16\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75\n 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06\n 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n }\n\n </div>\n}\n", styles: [":host{--fuse-alert-info-color: var(--fuse-color-info, #3b82f6);--fuse-alert-success-color: var(--fuse-color-success, #10b981);--fuse-alert-warning-color: var(--fuse-color-warning, #f59e0b);--fuse-alert-error-color: var(--fuse-color-danger, #ef4444);--fuse-alert-info-bg: var(--fuse-color-info-50, #eff6ff);--fuse-alert-success-bg: var(--fuse-color-success-50, #ecfdf5);--fuse-alert-warning-bg: var(--fuse-color-warning-50, #fffbeb);--fuse-alert-error-bg: var(--fuse-color-danger-50, #fef2f2);--fuse-alert-radius: var(--fuse-radius-md, 8px);--fuse-alert-padding: var(--fuse-space-3, 12px) var(--fuse-space-4, 16px);display:block}.fuse-alert__inner{display:flex;align-items:flex-start;gap:var(--fuse-space-3, 12px);padding:var(--fuse-alert-padding);border-radius:var(--fuse-alert-radius)}.fuse-alert__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}.fuse-alert__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--fuse-space-1, 4px)}.fuse-alert__title{font-weight:var(--fuse-font-weight-semibold, 600);font-size:var(--fuse-font-size-sm, .875rem);line-height:1.4}.fuse-alert__message{font-size:var(--fuse-font-size-sm, .875rem);line-height:1.5}.fuse-alert__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;border-radius:var(--fuse-radius-sm, 4px);color:currentColor;opacity:.6;transition:opacity .15s ease}.fuse-alert__close:hover{opacity:1}.fuse-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host(.fuse-alert--soft).fuse-alert--info .fuse-alert__inner{background:var(--fuse-alert-info-bg);color:var(--fuse-alert-info-color)}:host(.fuse-alert--soft).fuse-alert--success .fuse-alert__inner{background:var(--fuse-alert-success-bg);color:var(--fuse-alert-success-color)}:host(.fuse-alert--soft).fuse-alert--warning .fuse-alert__inner{background:var(--fuse-alert-warning-bg);color:var(--fuse-alert-warning-color)}:host(.fuse-alert--soft).fuse-alert--error .fuse-alert__inner{background:var(--fuse-alert-error-bg);color:var(--fuse-alert-error-color)}:host(.fuse-alert--solid).fuse-alert--info .fuse-alert__inner{background:var(--fuse-alert-info-color);color:#fff}:host(.fuse-alert--solid).fuse-alert--success .fuse-alert__inner{background:var(--fuse-alert-success-color);color:#fff}:host(.fuse-alert--solid).fuse-alert--warning .fuse-alert__inner{background:var(--fuse-alert-warning-color);color:#fff}:host(.fuse-alert--solid).fuse-alert--error .fuse-alert__inner{background:var(--fuse-alert-error-color);color:#fff}:host-context(.ios){--fuse-alert-radius: var(--fuse-radius-lg, 12px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
27
+ }
28
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseAlertComponent, decorators: [{
29
+ type: Component,
30
+ args: [{ selector: 'fuse-alert', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses()' }, template: "@if (!dismissed()) {\n <div class=\"fuse-alert__inner\">\n\n <!-- Icon -->\n <span class=\"fuse-alert__icon\" aria-hidden=\"true\">\n @switch (type()) {\n @case ('info') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75S21.75 6.615 21.75 12\n 17.385 21.75 12 21.75 2.25 17.385 2.25 12zm8.706-1.442c1.146-.573\n 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573\n -2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12\n 9a.75.75 0 100-1.5.75.75 0 000 1.5z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('success') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75S21.75 6.615 21.75 12\n 17.385 21.75 12 21.75 2.25 17.385 2.25 12zm13.36-1.814a.75.75\n 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06\n 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29\n 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4\n 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75\n 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75\n 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75\n 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12\n 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75\n 0 10-1.06-1.06L12 10.94l-1.72-1.72z\" clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <!-- Body -->\n <div class=\"fuse-alert__body\">\n @if (title()) {\n <span class=\"fuse-alert__title\">{{ title() }}</span>\n }\n <span class=\"fuse-alert__message\"><ng-content></ng-content></span>\n </div>\n\n <!-- Close button -->\n @if (closable()) {\n <button\n type=\"button\"\n class=\"fuse-alert__close\"\n aria-label=\"Dismiss alert\"\n (click)=\"dismiss()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"\n fill=\"currentColor\" width=\"16\" height=\"16\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75\n 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06\n 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n }\n\n </div>\n}\n", styles: [":host{--fuse-alert-info-color: var(--fuse-color-info, #3b82f6);--fuse-alert-success-color: var(--fuse-color-success, #10b981);--fuse-alert-warning-color: var(--fuse-color-warning, #f59e0b);--fuse-alert-error-color: var(--fuse-color-danger, #ef4444);--fuse-alert-info-bg: var(--fuse-color-info-50, #eff6ff);--fuse-alert-success-bg: var(--fuse-color-success-50, #ecfdf5);--fuse-alert-warning-bg: var(--fuse-color-warning-50, #fffbeb);--fuse-alert-error-bg: var(--fuse-color-danger-50, #fef2f2);--fuse-alert-radius: var(--fuse-radius-md, 8px);--fuse-alert-padding: var(--fuse-space-3, 12px) var(--fuse-space-4, 16px);display:block}.fuse-alert__inner{display:flex;align-items:flex-start;gap:var(--fuse-space-3, 12px);padding:var(--fuse-alert-padding);border-radius:var(--fuse-alert-radius)}.fuse-alert__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}.fuse-alert__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--fuse-space-1, 4px)}.fuse-alert__title{font-weight:var(--fuse-font-weight-semibold, 600);font-size:var(--fuse-font-size-sm, .875rem);line-height:1.4}.fuse-alert__message{font-size:var(--fuse-font-size-sm, .875rem);line-height:1.5}.fuse-alert__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;border-radius:var(--fuse-radius-sm, 4px);color:currentColor;opacity:.6;transition:opacity .15s ease}.fuse-alert__close:hover{opacity:1}.fuse-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host(.fuse-alert--soft).fuse-alert--info .fuse-alert__inner{background:var(--fuse-alert-info-bg);color:var(--fuse-alert-info-color)}:host(.fuse-alert--soft).fuse-alert--success .fuse-alert__inner{background:var(--fuse-alert-success-bg);color:var(--fuse-alert-success-color)}:host(.fuse-alert--soft).fuse-alert--warning .fuse-alert__inner{background:var(--fuse-alert-warning-bg);color:var(--fuse-alert-warning-color)}:host(.fuse-alert--soft).fuse-alert--error .fuse-alert__inner{background:var(--fuse-alert-error-bg);color:var(--fuse-alert-error-color)}:host(.fuse-alert--solid).fuse-alert--info .fuse-alert__inner{background:var(--fuse-alert-info-color);color:#fff}:host(.fuse-alert--solid).fuse-alert--success .fuse-alert__inner{background:var(--fuse-alert-success-color);color:#fff}:host(.fuse-alert--solid).fuse-alert--warning .fuse-alert__inner{background:var(--fuse-alert-warning-color);color:#fff}:host(.fuse-alert--solid).fuse-alert--error .fuse-alert__inner{background:var(--fuse-alert-error-color);color:#fff}:host-context(.ios){--fuse-alert-radius: var(--fuse-radius-lg, 12px)}\n"] }]
31
+ }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], alertClose: [{ type: i0.Output, args: ["alertClose"] }] } });
32
+
33
+ /**
34
+ * Generated bundle index. Do not edit.
35
+ */
36
+
37
+ export { FuseAlertComponent };
38
+ //# sourceMappingURL=fuse_ui-alert.mjs.map
package/fesm2022/fuse_ui-alert.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fuse_ui-alert.mjs","sources":["../../../../packages/alert/src/lib/alert/fuse-alert.component.ts","../../../../packages/alert/src/lib/alert/fuse-alert.component.html","../../../../packages/alert/src/fuse_ui-alert.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n output,\n signal,\n} from '@angular/core';\n\nexport type FuseAlertType = 'info' | 'success' | 'warning' | 'error';\nexport type FuseAlertVariant = 'soft' | 'solid';\n\n@Component({\n selector: 'fuse-alert',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './fuse-alert.component.html',\n styleUrl: './fuse-alert.component.scss',\n host: { '[class]': 'hostClasses()' },\n})\nexport class FuseAlertComponent {\n // ─── Public @Input() API ───────────────────────────────────────────────────\n\n readonly type = input<FuseAlertType>('info');\n readonly title = input('');\n readonly closable = input(false);\n readonly variant = input<FuseAlertVariant>('soft');\n\n // ─── Public @Output() API ─────────────────────────────────────────────────\n\n readonly alertClose = output<void>();\n\n // ─── Internal signal state ────────────────────────────────────────────────\n\n protected readonly dismissed = signal(false);\n\n // ─── Host class computation ──────────────────────────────────────────────\n\n protected readonly hostClasses = computed(() =>\n [\n 'fuse-alert',\n `fuse-alert--${this.type()}`,\n `fuse-alert--${this.variant()}`,\n ].join(' ')\n );\n\n // ─── Template event handler ──────────────────────────────────────────────\n\n protected dismiss(): void {\n this.dismissed.set(true);\n this.alertClose.emit();\n }\n}\n","@if (!dismissed()) {\n <div class=\"fuse-alert__inner\">\n\n <!-- Icon -->\n <span class=\"fuse-alert__icon\" aria-hidden=\"true\">\n @switch (type()) {\n @case ('info') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75S21.75 6.615 21.75 12\n 17.385 21.75 12 21.75 2.25 17.385 2.25 12zm8.706-1.442c1.146-.573\n 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573\n -2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12\n 9a.75.75 0 100-1.5.75.75 0 000 1.5z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('success') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75S21.75 6.615 21.75 12\n 17.385 21.75 12 21.75 2.25 17.385 2.25 12zm13.36-1.814a.75.75\n 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06\n 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29\n 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4\n 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75\n 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\" width=\"20\" height=\"20\">\n <path fill-rule=\"evenodd\"\n d=\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75\n 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75\n 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12\n 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75\n 0 10-1.06-1.06L12 10.94l-1.72-1.72z\" clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <!-- Body -->\n <div class=\"fuse-alert__body\">\n @if (title()) {\n <span class=\"fuse-alert__title\">{{ title() }}</span>\n }\n <span class=\"fuse-alert__message\"><ng-content></ng-content></span>\n </div>\n\n <!-- Close button -->\n @if (closable()) {\n <button\n type=\"button\"\n class=\"fuse-alert__close\"\n aria-label=\"Dismiss alert\"\n (click)=\"dismiss()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"\n fill=\"currentColor\" width=\"16\" height=\"16\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75\n 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06\n 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n }\n\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAqBa,kBAAkB,CAAA;;AAGpB,IAAA,IAAI,GAAG,KAAK,CAAgB,MAAM,2EAAC;AACnC,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,4EAAC;AACjB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,+EAAC;AACvB,IAAA,OAAO,GAAG,KAAK,CAAmB,MAAM,8EAAC;;IAIzC,UAAU,GAAG,MAAM,EAAQ;;AAIjB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,gFAAC;;AAIzB,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC;QACE,YAAY;AACZ,QAAA,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;AAC5B,QAAA,CAAA,YAAA,EAAe,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE;AAChC,KAAA,CAAC,IAAI,CAAC,GAAG,CAAC,kFACZ;;IAIS,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;IACxB;uGA/BW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,ypBCrB/B,69GAgFA,EAAA,MAAA,EAAA,CAAA,inFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD3Da,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAT9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAA,QAAA,EAAA,69GAAA,EAAA,MAAA,EAAA,CAAA,inFAAA,CAAA,EAAA;;;AEnBtC;;AAEG;;;;"}
package/package.json ADDED
@@ -0,0 +1,59 @@
1
+ {
2
+ "name": "@fuse_ui/alert",
3
+ "version": "0.0.1",
4
+ "license": "MIT",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "keywords": [
9
+ "fuse-ui",
10
+ "angular",
11
+ "ionic",
12
+ "ionic8",
13
+ "angular18",
14
+ "angular19",
15
+ "angular20",
16
+ "angular21",
17
+ "ui-components",
18
+ "design-system",
19
+ "css-variables",
20
+ "signals",
21
+ "standalone",
22
+ "multi-theme",
23
+ "dark-mode",
24
+ "fluid-typography",
25
+ "animated"
26
+ ],
27
+ "peerDependencies": {
28
+ "@angular/core": ">=18.0.0",
29
+ "@angular/common": ">=18.0.0",
30
+ "rxjs": ">=7.4.0"
31
+ },
32
+ "peerDependenciesMeta": {
33
+ "@ionic/angular": {
34
+ "optional": true
35
+ }
36
+ },
37
+ "sideEffects": [
38
+ "*.css",
39
+ "**/*.scss"
40
+ ],
41
+ "engines": {
42
+ "node": ">=20.0.0"
43
+ },
44
+ "module": "fesm2022/fuse_ui-alert.mjs",
45
+ "typings": "types/fuse_ui-alert.d.ts",
46
+ "exports": {
47
+ "./package.json": {
48
+ "default": "./package.json"
49
+ },
50
+ ".": {
51
+ "types": "./types/fuse_ui-alert.d.ts",
52
+ "default": "./fesm2022/fuse_ui-alert.mjs"
53
+ }
54
+ },
55
+ "type": "module",
56
+ "dependencies": {
57
+ "tslib": "^2.3.0"
58
+ }
59
+ }
package/types/fuse_ui-alert.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import * as _angular_core from '@angular/core';
2
+
3
+ type FuseAlertType = 'info' | 'success' | 'warning' | 'error';
4
+ type FuseAlertVariant = 'soft' | 'solid';
5
+ declare class FuseAlertComponent {
6
+ readonly type: _angular_core.InputSignal<FuseAlertType>;
7
+ readonly title: _angular_core.InputSignal<string>;
8
+ readonly closable: _angular_core.InputSignal<boolean>;
9
+ readonly variant: _angular_core.InputSignal<FuseAlertVariant>;
10
+ readonly alertClose: _angular_core.OutputEmitterRef<void>;
11
+ protected readonly dismissed: _angular_core.WritableSignal<boolean>;
12
+ protected readonly hostClasses: _angular_core.Signal<string>;
13
+ protected dismiss(): void;
14
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseAlertComponent, never>;
15
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseAlertComponent, "fuse-alert", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "alertClose": "alertClose"; }, never, ["*"], true, never>;
16
+ }
17
+
18
+ export { FuseAlertComponent };
19
+ export type { FuseAlertType, FuseAlertVariant };