@acontplus/ng-components 1.0.13 → 1.1.0
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.
- package/README.md +7 -0
- package/fesm2022/acontplus-ng-components.mjs +100 -91
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/index.d.ts +35 -28
- package/package.json +1 -1
- package/src/styles/_variables.scss +0 -23
- package/src/styles/index.scss +0 -2
- package/src/styles/_custom-buttons.scss +0 -469
package/index.d.ts
CHANGED
|
@@ -4,7 +4,6 @@ import { MatDialogRef } from '@angular/material/dialog';
|
|
|
4
4
|
import { ScrollStrategy } from '@angular/cdk/overlay';
|
|
5
5
|
import { MatChipInputEvent, MatChipEditedEvent } from '@angular/material/chips';
|
|
6
6
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
7
|
-
import { ThemePalette } from '@angular/material/core';
|
|
8
7
|
import { Tabulator } from 'tabulator-tables';
|
|
9
8
|
import * as _angular_material_paginator from '@angular/material/paginator';
|
|
10
9
|
import { PageEvent } from '@angular/material/paginator';
|
|
@@ -22,16 +21,16 @@ import { ComponentType } from '@angular/cdk/portal';
|
|
|
22
21
|
* header, content, and action areas.
|
|
23
22
|
*
|
|
24
23
|
* @example
|
|
25
|
-
* <acp-
|
|
24
|
+
* <acp-dynamic-card
|
|
26
25
|
* [cardTitle]="'Card Title'"
|
|
27
26
|
* [cardSubtitle]="'Card Subtitle'"
|
|
28
27
|
* [isHeaderVisible]="true"
|
|
29
28
|
* [areActionsVisible]="true"
|
|
30
29
|
* (primaryButtonClicked)="onPrimaryAction()">
|
|
31
30
|
* Card content goes here
|
|
32
|
-
* </acp-
|
|
31
|
+
* </acp-dynamic-card>
|
|
33
32
|
*/
|
|
34
|
-
declare class
|
|
33
|
+
declare class DynamicCardComponent {
|
|
35
34
|
/**
|
|
36
35
|
* The title text to display in the card header.
|
|
37
36
|
* @default null
|
|
@@ -91,7 +90,7 @@ declare class MatDynamicCardComponent {
|
|
|
91
90
|
* Alignment of the action buttons.
|
|
92
91
|
* @default 'end'
|
|
93
92
|
*/
|
|
94
|
-
buttonsPosition: _angular_core.InputSignal<"
|
|
93
|
+
buttonsPosition: _angular_core.InputSignal<"start" | "end">;
|
|
95
94
|
/**
|
|
96
95
|
* Event emitted when the primary button is clicked.
|
|
97
96
|
*/
|
|
@@ -122,8 +121,8 @@ declare class MatDynamicCardComponent {
|
|
|
122
121
|
* @param event The click event
|
|
123
122
|
*/
|
|
124
123
|
handleCardClick(event: Event): void;
|
|
125
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
126
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
124
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicCardComponent, never>;
|
|
125
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicCardComponent, "acp-dynamic-card", never, { "cardTitle": { "alias": "cardTitle"; "required": false; "isSignal": true; }; "cardSubtitle": { "alias": "cardSubtitle"; "required": false; "isSignal": true; }; "avatarImageUrl": { "alias": "avatarImageUrl"; "required": false; "isSignal": true; }; "isHeaderVisible": { "alias": "isHeaderVisible"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "hasDivider": { "alias": "hasDivider"; "required": false; "isSignal": true; }; "areActionsVisible": { "alias": "areActionsVisible"; "required": false; "isSignal": true; }; "primaryButtonText": { "alias": "primaryButtonText"; "required": false; "isSignal": true; }; "secondaryButtonText": { "alias": "secondaryButtonText"; "required": false; "isSignal": true; }; "primaryButtonIcon": { "alias": "primaryButtonIcon"; "required": false; "isSignal": true; }; "secondaryButtonIcon": { "alias": "secondaryButtonIcon"; "required": false; "isSignal": true; }; "buttonsPosition": { "alias": "buttonsPosition"; "required": false; "isSignal": true; }; }, { "primaryButtonClicked": "primaryButtonClicked"; "secondaryButtonClicked": "secondaryButtonClicked"; "cardClicked": "cardClicked"; }, never, ["*"], true, never>;
|
|
127
126
|
}
|
|
128
127
|
|
|
129
128
|
type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full';
|
|
@@ -204,6 +203,12 @@ interface DialogWrapperConfig<T = unknown> {
|
|
|
204
203
|
* @default false
|
|
205
204
|
*/
|
|
206
205
|
hideHeader?: boolean;
|
|
206
|
+
/**
|
|
207
|
+
* Whether to show the close button in the dialog header.
|
|
208
|
+
* If false, follows Angular Material's default behavior (no close button).
|
|
209
|
+
* @default true
|
|
210
|
+
*/
|
|
211
|
+
showCloseButton?: boolean;
|
|
207
212
|
}
|
|
208
213
|
|
|
209
214
|
declare class AdvancedDialogService {
|
|
@@ -255,7 +260,9 @@ declare class OverlayService {
|
|
|
255
260
|
|
|
256
261
|
declare class ThemeService {
|
|
257
262
|
private readonly _darkMode;
|
|
263
|
+
private readonly platformId;
|
|
258
264
|
isDarkMode$: rxjs.Observable<boolean>;
|
|
265
|
+
constructor();
|
|
259
266
|
loadMode(): void;
|
|
260
267
|
toggleDarkMode(): void;
|
|
261
268
|
private applyTheme;
|
|
@@ -504,10 +511,10 @@ declare class DialogWrapperComponent implements AfterViewInit, OnDestroy {
|
|
|
504
511
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogWrapperComponent, "acp-dialog-wrapper", never, {}, {}, never, never, true, never>;
|
|
505
512
|
}
|
|
506
513
|
|
|
507
|
-
declare class
|
|
514
|
+
declare class UserIconComponent {
|
|
508
515
|
size: _angular_core.InputSignal<string>;
|
|
509
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
510
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
516
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UserIconComponent, never>;
|
|
517
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UserIconComponent, "acp-user-icon", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
511
518
|
}
|
|
512
519
|
|
|
513
520
|
declare class SvgIconComponent {
|
|
@@ -519,7 +526,7 @@ declare class SvgIconComponent {
|
|
|
519
526
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvgIconComponent, "acp-svg-icon", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
520
527
|
}
|
|
521
528
|
|
|
522
|
-
declare class
|
|
529
|
+
declare class InputChipComponent {
|
|
523
530
|
chips: _angular_core.InputSignal<string[]>;
|
|
524
531
|
labelText: _angular_core.InputSignal<string>;
|
|
525
532
|
placelholder: _angular_core.InputSignal<string>;
|
|
@@ -529,22 +536,22 @@ declare class MatInputChipComponent {
|
|
|
529
536
|
add(event: MatChipInputEvent): void;
|
|
530
537
|
remove(value: string): void;
|
|
531
538
|
edit(inputRaw: string, event: MatChipEditedEvent): void;
|
|
532
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
533
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
539
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputChipComponent, never>;
|
|
540
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputChipComponent, "acp-input-chip", never, { "chips": { "alias": "chips"; "required": true; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": true; "isSignal": true; }; "placelholder": { "alias": "placelholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
534
541
|
}
|
|
535
542
|
|
|
536
|
-
type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | '
|
|
543
|
+
type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark';
|
|
537
544
|
type ButtonType = 'button' | 'submit' | 'reset';
|
|
538
|
-
type MaterialButtonStyle = '
|
|
539
|
-
declare class
|
|
545
|
+
type MaterialButtonStyle = 'text' | 'elevated' | 'outlined' | 'filled' | 'tonal' | 'icon' | 'fab' | 'mini-fab' | 'extended-fab';
|
|
546
|
+
declare class ButtonComponent {
|
|
540
547
|
variant: _angular_core.InputSignal<ButtonVariant>;
|
|
541
548
|
text: _angular_core.InputSignal<string>;
|
|
542
549
|
icon: _angular_core.InputSignal<string>;
|
|
543
|
-
outlined: _angular_core.InputSignal<boolean>;
|
|
544
550
|
disabled: _angular_core.InputSignal<boolean>;
|
|
545
|
-
useThemeColor: _angular_core.InputSignal<boolean>;
|
|
546
551
|
type: _angular_core.InputSignal<ButtonType>;
|
|
547
552
|
matStyle: _angular_core.InputSignal<MaterialButtonStyle>;
|
|
553
|
+
customClass: _angular_core.InputSignal<string | undefined>;
|
|
554
|
+
extended: _angular_core.InputSignal<boolean>;
|
|
548
555
|
title: _angular_core.InputSignal<string>;
|
|
549
556
|
ariaLabel: _angular_core.InputSignal<string>;
|
|
550
557
|
name: _angular_core.InputSignal<string>;
|
|
@@ -554,9 +561,9 @@ declare class MatThemeButtonComponent {
|
|
|
554
561
|
testId: _angular_core.InputSignal<string>;
|
|
555
562
|
handleClick: _angular_core.OutputEmitterRef<unknown>;
|
|
556
563
|
getButtonClasses(): Record<string, boolean>;
|
|
557
|
-
|
|
558
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
559
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
564
|
+
getDisplayText(): string;
|
|
565
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
566
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "acp-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "matStyle": { "alias": "matStyle"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; "extended": { "alias": "extended"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "handleClick": "handleClick"; }, never, ["*"], true, never>;
|
|
560
567
|
}
|
|
561
568
|
|
|
562
569
|
declare class SpinnerComponent {
|
|
@@ -651,7 +658,7 @@ interface TabulatorEventHandlers {
|
|
|
651
658
|
onTableReady?: (tabulator: any) => void;
|
|
652
659
|
}
|
|
653
660
|
|
|
654
|
-
declare class
|
|
661
|
+
declare class TabulatorTableComponent implements OnChanges, AfterViewInit, OnDestroy {
|
|
655
662
|
readonly data: _angular_core.InputSignal<any[]>;
|
|
656
663
|
readonly columns: _angular_core.InputSignal<any[]>;
|
|
657
664
|
readonly height: _angular_core.InputSignal<string | number | false>;
|
|
@@ -685,8 +692,8 @@ declare class CustomTabulatorComponent implements OnChanges, AfterViewInit, OnDe
|
|
|
685
692
|
private destroyTable;
|
|
686
693
|
getInstance(): Tabulator;
|
|
687
694
|
redraw(): void;
|
|
688
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
689
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
695
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabulatorTableComponent, never>;
|
|
696
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabulatorTableComponent, "acp-tabulator", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "dataTree": { "alias": "dataTree"; "required": false; "isSignal": true; }; "dataTreeChildField": { "alias": "dataTreeChildField"; "required": false; "isSignal": true; }; "dataTreeStartExpanded": { "alias": "dataTreeStartExpanded"; "required": false; "isSignal": true; }; "dataTreeSelectPropagate": { "alias": "dataTreeSelectPropagate"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "reactiveData": { "alias": "reactiveData"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "cellEdited": "cellEdited"; "rowClick": "rowClick"; "rowSelected": "rowSelected"; "tableReady": "tableReady"; }, never, never, true, never>;
|
|
690
697
|
}
|
|
691
698
|
|
|
692
699
|
interface DateRangeConfig<T = any> {
|
|
@@ -790,7 +797,7 @@ declare class Pagination {
|
|
|
790
797
|
updateFromPaginatorEvent(event: any): void;
|
|
791
798
|
}
|
|
792
799
|
|
|
793
|
-
declare class
|
|
800
|
+
declare class DynamicTableComponent<T extends TableRow> implements AfterContentInit, OnChanges, OnInit, OnDestroy {
|
|
794
801
|
private componentRefs;
|
|
795
802
|
private embeddedViews;
|
|
796
803
|
private cdr;
|
|
@@ -841,8 +848,8 @@ declare class MatDynamicTableComponent<T extends TableRow> implements AfterConte
|
|
|
841
848
|
onExpand(event: Event, element: T): void;
|
|
842
849
|
getRowColor(element: T): Record<string, string>;
|
|
843
850
|
handlePageEvent(e: PageEvent): void;
|
|
844
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
845
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
851
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicTableComponent<any>, never>;
|
|
852
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicTableComponent<any>, "acp-dynamic-table", never, { "showExpand": { "alias": "showExpand"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "highlightRowIndex": { "alias": "highlightRowIndex"; "required": false; "isSignal": true; }; "visibleColumns": { "alias": "visibleColumns"; "required": false; }; "columnDefinitions": { "alias": "columnDefinitions"; "required": false; }; "showSelectBox": { "alias": "showSelectBox"; "required": false; "isSignal": true; }; "tableData": { "alias": "tableData"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; "isSignal": true; }; "expandedDetail": { "alias": "expandedDetail"; "required": false; }; "enablePagination": { "alias": "enablePagination"; "required": false; "isSignal": true; }; "paginationConfig": { "alias": "paginationConfig"; "required": false; }; "isLoadingData": { "alias": "isLoadingData"; "required": false; "isSignal": true; }; }, { "rowSelected": "rowSelected"; "copyRow": "copyRow"; "showExpanded": "showExpanded"; "hideExpanded": "hideExpanded"; "pageEvent": "pageEvent"; }, ["headerRowDefs", "rowDefs", "footerRowDefs", "columnDefs", "rows"], never, true, never>;
|
|
846
853
|
}
|
|
847
854
|
|
|
848
855
|
declare class ThemeToggleComponent {
|
|
@@ -978,5 +985,5 @@ declare class StatusDisplayPipe implements PipeTransform {
|
|
|
978
985
|
static ɵpipe: _angular_core.ɵɵPipeDeclaration<StatusDisplayPipe, "statusDisplay", true>;
|
|
979
986
|
}
|
|
980
987
|
|
|
981
|
-
export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService,
|
|
988
|
+
export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, ButtonComponent, ColumnDefinition, DYNAMIC_INPUT, DialogWrapperComponent, DynamicCardComponent, DynamicTableComponent, FieldDefinition, GetTotalPipe, InputChipComponent, OverlayService, Pagination, ReusableAutocompleteComponent, SpinnerComponent, StatusDisplayPipe, SvgIconComponent, TableCellIndex, TabulatorTableComponent, ThemeService, ThemeToggleComponent, ToUpperCaseDirective, UserIconComponent, createAutocompleteWrapperConfig };
|
|
982
989
|
export type { AutocompleteWrapperActions, AutocompleteWrapperConfig, AutocompleteWrapperEventHandler, AutocompleteWrapperEvents, AutocompleteWrapperFilters, AutocompleteWrapperItem, AutocompleteWrapperItemProperty, AutocompleteWrapperPaginationInfo, AutocompleteWrapperSearchField, AutocompleteWrapperSearchFunction, AutocompleteWrapperSearchMode, AutocompleteWrapperSearchResult, AutocompleteWrapperState, AutocompleteWrapperStockOption, ButtonType, ButtonVariant, ColumnType, ControlType, DateRangeConfig, DialogSize, DialogWrapperConfig, FieldType, MatCustomDialogConfig, MaterialButtonStyle, OptionSearchConfig, ReusableAutocompleteWrapperComponent, TableContext, TableRow, TabulatorColumn, TabulatorConfig, TabulatorEventHandlers, TabulatorTheme };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acontplus/ng-components",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Angular Material UI component library with dynamic tables, theming support, dialog wrappers, and comprehensive styling utilities",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/cdk": "^20.2.5",
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
// Bootstrap 5.3+ Color Palette
|
|
2
|
-
$bootstrap-colors: (
|
|
3
|
-
primary: #0d6efd,
|
|
4
|
-
secondary: #6c757d,
|
|
5
|
-
success: #198754,
|
|
6
|
-
danger: #dc3545,
|
|
7
|
-
warning: #ffc107,
|
|
8
|
-
info: #0dcaf0,
|
|
9
|
-
light: #f8f9fa,
|
|
10
|
-
dark: #212529,
|
|
11
|
-
);
|
|
12
|
-
|
|
13
|
-
// Contrast colors
|
|
14
|
-
$bootstrap-contrast: (
|
|
15
|
-
primary: #ffffff,
|
|
16
|
-
secondary: #ffffff,
|
|
17
|
-
success: #ffffff,
|
|
18
|
-
danger: #ffffff,
|
|
19
|
-
warning: #000000,
|
|
20
|
-
info: #000000,
|
|
21
|
-
light: #000000,
|
|
22
|
-
dark: #ffffff,
|
|
23
|
-
);
|