@acontplus/ng-components 2.1.24 → 2.1.27
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.
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { signal, input, output, ChangeDetectionStrategy, ViewEncapsulation, Component, booleanAttribute, Injectable, inject, viewChild, ViewContainerRef, effect, computed, PLATFORM_ID, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output, Renderer2, createComponent, EnvironmentInjector } from '@angular/core';
|
|
3
|
+
import * as i2 from '@angular/material/button';
|
|
4
|
+
import { MatIconButton, MatButtonModule, MatButton, MatMiniFabButton, MatFabButton } from '@angular/material/button';
|
|
3
5
|
import * as i1 from '@angular/material/card';
|
|
4
6
|
import { MatCardModule } from '@angular/material/card';
|
|
5
|
-
import * as i2 from '@angular/material/button';
|
|
6
|
-
import { MatButtonModule, MatButton, MatMiniFabButton, MatIconButton, MatFabButton } from '@angular/material/button';
|
|
7
7
|
import * as i3 from '@angular/material/icon';
|
|
8
8
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
9
9
|
import * as i7 from '@angular/cdk/drag-drop';
|
|
@@ -55,6 +55,48 @@ import { _animationsDisabled } from '@angular/material/core';
|
|
|
55
55
|
import { Directionality } from '@angular/cdk/bidi';
|
|
56
56
|
import { TranslocoService } from '@jsverse/transloco';
|
|
57
57
|
|
|
58
|
+
class AcpAlert {
|
|
59
|
+
/** Signal to control visibility */
|
|
60
|
+
visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
61
|
+
/** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
|
|
62
|
+
type = input('default', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
63
|
+
/** Whether to display an inline close button. */
|
|
64
|
+
dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : {}), transform: (value) => value === '' || value === true });
|
|
65
|
+
/** The alert's elevation (0~24). */
|
|
66
|
+
elevation = input(0, { ...(ngDevMode ? { debugName: "elevation" } : {}), transform: (value) => Number(value) || 0 });
|
|
67
|
+
/** Event emitted when the alert closed. */
|
|
68
|
+
closed = output();
|
|
69
|
+
get hostClassList() {
|
|
70
|
+
const clampedElevation = Math.max(0, Math.min(24, this.elevation()));
|
|
71
|
+
return `acp-alert acp-alert-${this.type()} mat-elevation-z${clampedElevation}`;
|
|
72
|
+
}
|
|
73
|
+
/** Programmatically close the alert */
|
|
74
|
+
close() {
|
|
75
|
+
this._onClosed();
|
|
76
|
+
}
|
|
77
|
+
/** Programmatically show the alert */
|
|
78
|
+
show() {
|
|
79
|
+
this.visible.set(true);
|
|
80
|
+
}
|
|
81
|
+
_onClosed() {
|
|
82
|
+
this.visible.set(false);
|
|
83
|
+
this.closed.emit(this);
|
|
84
|
+
}
|
|
85
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcpAlert, isStandalone: true, selector: "acp-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "hostClassList", "class.acp-alert-dismissible": "dismissible()", "class.acp-alert-hidden": "!visible()", "attr.role": "visible() ? \"alert\" : null", "attr.aria-live": "type() === \"danger\" ? \"assertive\" : \"polite\"", "attr.aria-atomic": "true" } }, exportAs: ["acpAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible()) {\n<div class=\"acp-alert-close\">\n <button matIconButton type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n </button>\n</div>\n}\n", styles: [":root{--acp-alert-outline: var(--mat-sys-outline-variant);--acp-alert-background: var(--mat-sys-surface-container);--acp-alert-text: var(--mat-sys-on-surface);--acp-alert-shape: 8px;--acp-alert-info-outline: #42a5f5;--acp-alert-info-background: #e3f2fd;--acp-alert-info-text: #0d47a1;--acp-alert-success-outline: #66bb6a;--acp-alert-success-background: #f1f8e9;--acp-alert-success-text: #1b5e20;--acp-alert-warning-outline: #ffa726;--acp-alert-warning-background: #fff8e1;--acp-alert-warning-text: #e65100;--acp-alert-danger-outline: #ef5350;--acp-alert-danger-background: #ffebee;--acp-alert-danger-text: #b71c1c}.dark-theme{--acp-alert-outline: var(--mat-sys-outline-variant);--acp-alert-background: var(--mat-sys-surface-container);--acp-alert-text: var(--mat-sys-on-surface);--acp-alert-info-outline: #1976d2;--acp-alert-info-background: #0d47a1;--acp-alert-info-text: #e3f2fd;--acp-alert-success-outline: #388e3c;--acp-alert-success-background: #1b5e20;--acp-alert-success-text: #f1f8e9;--acp-alert-warning-outline: #f57c00;--acp-alert-warning-background: #e65100;--acp-alert-warning-text: #fff8e1;--acp-alert-danger-outline: #d32f2f;--acp-alert-danger-background: #b71c1c;--acp-alert-danger-text: #ffebee}.acp-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--acp-alert-outline);border-radius:var(--acp-alert-shape);background-color:var(--acp-alert-background);color:var(--acp-alert-text)}.acp-alert.acp-alert-info{border-color:var(--acp-alert-info-outline);background-color:var(--acp-alert-info-background);color:var(--acp-alert-info-text)}.acp-alert.acp-alert-success{border-color:var(--acp-alert-success-outline);background-color:var(--acp-alert-success-background);color:var(--acp-alert-success-text)}.acp-alert.acp-alert-warning{border-color:var(--acp-alert-warning-outline);background-color:var(--acp-alert-warning-background);color:var(--acp-alert-warning-text)}.acp-alert.acp-alert-danger{border-color:var(--acp-alert-danger-outline);background-color:var(--acp-alert-danger-background);color:var(--acp-alert-danger-text)}.acp-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .acp-alert-close{right:auto;left:0}.acp-alert-dismissible{padding-right:3rem}[dir=rtl] .acp-alert-dismissible{padding-right:1rem;padding-left:3rem}.acp-alert-hidden{display:none;opacity:0;transition:opacity .2s ease-out}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
87
|
+
}
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpAlert, decorators: [{
|
|
89
|
+
type: Component,
|
|
90
|
+
args: [{ selector: 'acp-alert', exportAs: 'acpAlert', host: {
|
|
91
|
+
'[class]': 'hostClassList',
|
|
92
|
+
'[class.acp-alert-dismissible]': 'dismissible()',
|
|
93
|
+
'[class.acp-alert-hidden]': '!visible()',
|
|
94
|
+
'[attr.role]': 'visible() ? "alert" : null',
|
|
95
|
+
'[attr.aria-live]': 'type() === "danger" ? "assertive" : "polite"',
|
|
96
|
+
'[attr.aria-atomic]': 'true',
|
|
97
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<ng-content></ng-content>\n@if (dismissible()) {\n<div class=\"acp-alert-close\">\n <button matIconButton type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n </button>\n</div>\n}\n", styles: [":root{--acp-alert-outline: var(--mat-sys-outline-variant);--acp-alert-background: var(--mat-sys-surface-container);--acp-alert-text: var(--mat-sys-on-surface);--acp-alert-shape: 8px;--acp-alert-info-outline: #42a5f5;--acp-alert-info-background: #e3f2fd;--acp-alert-info-text: #0d47a1;--acp-alert-success-outline: #66bb6a;--acp-alert-success-background: #f1f8e9;--acp-alert-success-text: #1b5e20;--acp-alert-warning-outline: #ffa726;--acp-alert-warning-background: #fff8e1;--acp-alert-warning-text: #e65100;--acp-alert-danger-outline: #ef5350;--acp-alert-danger-background: #ffebee;--acp-alert-danger-text: #b71c1c}.dark-theme{--acp-alert-outline: var(--mat-sys-outline-variant);--acp-alert-background: var(--mat-sys-surface-container);--acp-alert-text: var(--mat-sys-on-surface);--acp-alert-info-outline: #1976d2;--acp-alert-info-background: #0d47a1;--acp-alert-info-text: #e3f2fd;--acp-alert-success-outline: #388e3c;--acp-alert-success-background: #1b5e20;--acp-alert-success-text: #f1f8e9;--acp-alert-warning-outline: #f57c00;--acp-alert-warning-background: #e65100;--acp-alert-warning-text: #fff8e1;--acp-alert-danger-outline: #d32f2f;--acp-alert-danger-background: #b71c1c;--acp-alert-danger-text: #ffebee}.acp-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--acp-alert-outline);border-radius:var(--acp-alert-shape);background-color:var(--acp-alert-background);color:var(--acp-alert-text)}.acp-alert.acp-alert-info{border-color:var(--acp-alert-info-outline);background-color:var(--acp-alert-info-background);color:var(--acp-alert-info-text)}.acp-alert.acp-alert-success{border-color:var(--acp-alert-success-outline);background-color:var(--acp-alert-success-background);color:var(--acp-alert-success-text)}.acp-alert.acp-alert-warning{border-color:var(--acp-alert-warning-outline);background-color:var(--acp-alert-warning-background);color:var(--acp-alert-warning-text)}.acp-alert.acp-alert-danger{border-color:var(--acp-alert-danger-outline);background-color:var(--acp-alert-danger-background);color:var(--acp-alert-danger-text)}.acp-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .acp-alert-close{right:auto;left:0}.acp-alert-dismissible{padding-right:3rem}[dir=rtl] .acp-alert-dismissible{padding-right:1rem;padding-left:3rem}.acp-alert-hidden{display:none;opacity:0;transition:opacity .2s ease-out}\n"] }]
|
|
98
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
99
|
+
|
|
58
100
|
/**
|
|
59
101
|
* A versatile card component that wraps Angular Material's mat-card with additional functionality
|
|
60
102
|
* and customization options. This component provides a consistent card layout with configurable
|
|
@@ -6381,5 +6423,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
6381
6423
|
* Generated bundle index. Do not edit.
|
|
6382
6424
|
*/
|
|
6383
6425
|
|
|
6384
|
-
export { ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AdvancedDialogService, AlertDialog, AlertDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig, throwAcpPopoverInvalidPositionEnd, throwAcpPopoverInvalidPositionStart, throwAcpPopoverMissingError };
|
|
6426
|
+
export { ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpAlert, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AdvancedDialogService, AlertDialog, AlertDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig, throwAcpPopoverInvalidPositionEnd, throwAcpPopoverInvalidPositionStart, throwAcpPopoverMissingError };
|
|
6385
6427
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|