@pecb-ui/components 1.1.2 → 1.1.3

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 (57) hide show
  1. package/README.md +556 -556
  2. package/fesm2022/pecb-ui-components.mjs +8041 -1942
  3. package/fesm2022/pecb-ui-components.mjs.map +1 -1
  4. package/index.d.ts +5653 -3
  5. package/package.json +6 -8
  6. package/src/lib/components/general/assets/banner-bg.png +0 -0
  7. package/esm2022/lib/components/button/button.component.mjs +0 -171
  8. package/esm2022/lib/components/card/card.component.mjs +0 -182
  9. package/esm2022/lib/components/checkbox/checkbox.component.mjs +0 -126
  10. package/esm2022/lib/components/datepicker/datepicker.component.mjs +0 -349
  11. package/esm2022/lib/components/dropdown/dropdown.component.mjs +0 -329
  12. package/esm2022/lib/components/input/input.component.mjs +0 -321
  13. package/esm2022/lib/components/pagination/pagination.component.mjs +0 -197
  14. package/esm2022/lib/components/radio/radio.component.mjs +0 -147
  15. package/esm2022/lib/components/right-modal/right-modal.component.mjs +0 -234
  16. package/esm2022/lib/components/sidebar/sidebar.component.mjs +0 -155
  17. package/esm2022/lib/components/status/status.component.mjs +0 -50
  18. package/esm2022/lib/components/tab/tab.component.mjs +0 -151
  19. package/esm2022/lib/components/table/table.component.mjs +0 -503
  20. package/esm2022/lib/components/toggle/toggle.component.mjs +0 -126
  21. package/esm2022/lib/pecb-components.module.mjs +0 -118
  22. package/esm2022/lib/services/loading.service.mjs +0 -182
  23. package/esm2022/lib/services/notification.service.mjs +0 -144
  24. package/esm2022/lib/services/theme.service.mjs +0 -232
  25. package/esm2022/lib/shared/interfaces/component.interfaces.mjs +0 -2
  26. package/esm2022/lib/shared/types/common.types.mjs +0 -6
  27. package/esm2022/lib/shared/utils/accessibility.utils.mjs +0 -223
  28. package/esm2022/lib/shared/utils/dom.utils.mjs +0 -240
  29. package/esm2022/lib/shared/utils/error.utils.mjs +0 -277
  30. package/esm2022/lib/shared/utils/string.utils.mjs +0 -204
  31. package/esm2022/pecb-ui-components.mjs +0 -5
  32. package/esm2022/public-api.mjs +0 -53
  33. package/lib/components/button/button.component.d.ts +0 -130
  34. package/lib/components/card/card.component.d.ts +0 -140
  35. package/lib/components/checkbox/checkbox.component.d.ts +0 -74
  36. package/lib/components/datepicker/datepicker.component.d.ts +0 -155
  37. package/lib/components/dropdown/dropdown.component.d.ts +0 -144
  38. package/lib/components/input/input.component.d.ts +0 -215
  39. package/lib/components/pagination/pagination.component.d.ts +0 -53
  40. package/lib/components/radio/radio.component.d.ts +0 -93
  41. package/lib/components/right-modal/right-modal.component.d.ts +0 -137
  42. package/lib/components/sidebar/sidebar.component.d.ts +0 -97
  43. package/lib/components/status/status.component.d.ts +0 -19
  44. package/lib/components/tab/tab.component.d.ts +0 -102
  45. package/lib/components/table/table.component.d.ts +0 -403
  46. package/lib/components/toggle/toggle.component.d.ts +0 -74
  47. package/lib/pecb-components.module.d.ts +0 -37
  48. package/lib/services/loading.service.d.ts +0 -129
  49. package/lib/services/notification.service.d.ts +0 -136
  50. package/lib/services/theme.service.d.ts +0 -142
  51. package/lib/shared/interfaces/component.interfaces.d.ts +0 -283
  52. package/lib/shared/types/common.types.d.ts +0 -86
  53. package/lib/shared/utils/accessibility.utils.d.ts +0 -167
  54. package/lib/shared/utils/dom.utils.d.ts +0 -108
  55. package/lib/shared/utils/error.utils.d.ts +0 -191
  56. package/lib/shared/utils/string.utils.d.ts +0 -144
  57. package/public-api.d.ts +0 -24
@@ -1,137 +0,0 @@
1
- import { EventEmitter, OnInit, OnDestroy, ElementRef, AfterViewInit } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export type RightModalSize = 'sm' | 'md' | 'lg';
4
- /**
5
- * A right-side sliding modal/drawer component.
6
- * Slides in from the right edge of the screen with backdrop overlay.
7
- * Fully accessible with WCAG 2.1 AA compliance.
8
- *
9
- * @example
10
- * ```html
11
- * <pecb-right-modal
12
- * [isOpen]="isModalOpen"
13
- * (closed)="onModalClose()"
14
- * ariaLabel="Exam Details"
15
- * >
16
- * <div pecbRightModalHeader>
17
- * <h2>Exam Details</h2>
18
- * </div>
19
- * <div pecbRightModalContent>
20
- * <p>Modal content goes here</p>
21
- * </div>
22
- * <div pecbRightModalFooter>
23
- * <button>Action</button>
24
- * </div>
25
- * </pecb-right-modal>
26
- * ```
27
- *
28
- * @publicApi
29
- */
30
- export declare class RightModalComponent implements OnInit, OnDestroy, AfterViewInit {
31
- /**
32
- * Unique ID for the modal element
33
- */
34
- id: string;
35
- /**
36
- * Whether the modal is open
37
- */
38
- isOpen: boolean;
39
- /**
40
- * Size of the modal panel
41
- */
42
- size: RightModalSize;
43
- /**
44
- * Whether clicking the backdrop closes the modal
45
- */
46
- closeOnBackdropClick: boolean;
47
- /**
48
- * Whether pressing Escape closes the modal
49
- */
50
- closeOnEscape: boolean;
51
- /**
52
- * Whether to show the close button
53
- */
54
- showCloseButton: boolean;
55
- /**
56
- * Accessible label for the modal
57
- */
58
- ariaLabel?: string;
59
- /**
60
- * ID of element that labels this modal
61
- */
62
- ariaLabelledBy?: string;
63
- /**
64
- * ID of element that describes this modal
65
- */
66
- ariaDescribedBy?: string;
67
- /**
68
- * Emitted when the modal is closed
69
- */
70
- closed: EventEmitter<void>;
71
- /**
72
- * Emitted when the modal is opened
73
- */
74
- opened: EventEmitter<void>;
75
- modalPanel: ElementRef<HTMLElement>;
76
- private cleanupFocusTrap;
77
- private cleanupBodyScroll;
78
- private previousActiveElement;
79
- ngOnInit(): void;
80
- ngAfterViewInit(): void;
81
- ngOnDestroy(): void;
82
- /**
83
- * Get CSS classes for the modal container
84
- */
85
- get modalClasses(): string[];
86
- /**
87
- * Get CSS classes for the modal panel
88
- */
89
- get panelClasses(): string[];
90
- /**
91
- * Handle backdrop click
92
- */
93
- onBackdropClick(event: MouseEvent): void;
94
- /**
95
- * Handle keyboard events
96
- */
97
- onKeydown(event: KeyboardEvent): void;
98
- /**
99
- * Close the modal
100
- */
101
- close(): void;
102
- /**
103
- * Called when modal opens
104
- */
105
- private onOpen;
106
- /**
107
- * Setup focus trap after view is ready
108
- */
109
- private setupFocusTrap;
110
- /**
111
- * Cleanup resources
112
- */
113
- private cleanup;
114
- static ɵfac: i0.ɵɵFactoryDeclaration<RightModalComponent, never>;
115
- static ɵcmp: i0.ɵɵComponentDeclaration<RightModalComponent, "pecb-right-modal", never, { "id": { "alias": "id"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "size": { "alias": "size"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[pecbRightModalHeader]", "[pecbRightModalContent]", "*", "[pecbRightModalFooter]"], true, never>;
116
- }
117
- /**
118
- * Header directive for right modal
119
- */
120
- export declare class RightModalHeaderDirective {
121
- static ɵfac: i0.ɵɵFactoryDeclaration<RightModalHeaderDirective, never>;
122
- static ɵdir: i0.ɵɵDirectiveDeclaration<RightModalHeaderDirective, "[pecbRightModalHeader]", never, {}, {}, never, never, true, never>;
123
- }
124
- /**
125
- * Content directive for right modal
126
- */
127
- export declare class RightModalContentDirective {
128
- static ɵfac: i0.ɵɵFactoryDeclaration<RightModalContentDirective, never>;
129
- static ɵdir: i0.ɵɵDirectiveDeclaration<RightModalContentDirective, "[pecbRightModalContent]", never, {}, {}, never, never, true, never>;
130
- }
131
- /**
132
- * Footer directive for right modal
133
- */
134
- export declare class RightModalFooterDirective {
135
- static ɵfac: i0.ɵɵFactoryDeclaration<RightModalFooterDirective, never>;
136
- static ɵdir: i0.ɵɵDirectiveDeclaration<RightModalFooterDirective, "[pecbRightModalFooter]", never, {}, {}, never, never, true, never>;
137
- }
@@ -1,97 +0,0 @@
1
- import { EventEmitter } from '@angular/core';
2
- import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
3
- import * as i0 from "@angular/core";
4
- export interface SidebarMenuItem {
5
- id: string;
6
- label: string;
7
- icon?: string;
8
- route?: string;
9
- active?: boolean;
10
- children?: SidebarMenuItem[];
11
- expanded?: boolean;
12
- }
13
- export interface SidebarSection {
14
- id: string;
15
- title?: string;
16
- items: SidebarMenuItem[];
17
- }
18
- /**
19
- * A professional sidebar navigation component with collapsible sections and nested items.
20
- * Perfect for application navigation with hierarchical menu structures.
21
- *
22
- * @example
23
- * ```html
24
- * <!-- Basic sidebar -->
25
- * <pecb-sidebar
26
- * [sections]="menuSections"
27
- * (itemClick)="onMenuItemClick($event)"
28
- * ></pecb-sidebar>
29
- *
30
- * <!-- With logo header -->
31
- * <pecb-sidebar
32
- * [sections]="menuSections"
33
- * [showHeader]="true"
34
- * [sidebarLogo]="logoSvg"
35
- * ></pecb-sidebar>
36
- * ```
37
- *
38
- * @publicApi
39
- */
40
- export declare class SidebarComponent {
41
- private sanitizer;
42
- constructor(sanitizer: DomSanitizer);
43
- /**
44
- * Array of sidebar sections with menu items
45
- */
46
- sections: SidebarSection[];
47
- /**
48
- * Whether to show the header section
49
- */
50
- showHeader: boolean;
51
- /**
52
- * Sidebar logo as an SVG string. Rendered in the header area.
53
- */
54
- sidebarLogo?: string;
55
- /**
56
- * Whether to show the footer section
57
- */
58
- showFooter: boolean;
59
- /**
60
- * Whether the sidebar is collapsed
61
- */
62
- collapsed: boolean;
63
- /**
64
- * Event emitted when a menu item is clicked
65
- */
66
- itemClick: EventEmitter<SidebarMenuItem>;
67
- /**
68
- * Event emitted when the sidebar collapse state changes
69
- */
70
- collapseChange: EventEmitter<boolean>;
71
- /**
72
- * Handle menu item click
73
- */
74
- onItemClick(item: SidebarMenuItem, event: Event): void;
75
- /**
76
- * Toggle sidebar collapse state
77
- */
78
- toggleCollapse(): void;
79
- /**
80
- * Sanitize icon SVG HTML to prevent Angular from stripping SVG elements
81
- */
82
- getSafeIcon(icon: string): SafeHtml;
83
- /**
84
- * TrackBy for sections
85
- */
86
- trackBySection(_index: number, section: SidebarSection): string;
87
- /**
88
- * TrackBy for menu items
89
- */
90
- trackByItem(_index: number, item: SidebarMenuItem): string;
91
- /**
92
- * Get CSS classes for a menu item
93
- */
94
- getItemClasses(item: SidebarMenuItem, isChild?: boolean, isNested?: boolean): string[];
95
- static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
96
- static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "pecb-sidebar", never, { "sections": { "alias": "sections"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "sidebarLogo": { "alias": "sidebarLogo"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "itemClick": "itemClick"; "collapseChange": "collapseChange"; }, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
97
- }
@@ -1,19 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- export type StatusType = 'warning' | 'action' | 'success' | 'error' | 'different' | 'disabled' | 'neutral';
3
- export type StatusVariant = 'accent' | 'filled' | 'outline' | 'custom';
4
- export type StatusSize = 'sm' | 'md' | 'lg';
5
- export declare class StatusComponent {
6
- private _id;
7
- type: StatusType;
8
- variant: StatusVariant;
9
- size: StatusSize;
10
- ariaLabel?: string;
11
- /** Text content to display (alternative to ng-content, useful for dynamic components) */
12
- text?: string;
13
- /** Custom CSS class(es) to add to the status element */
14
- customClass?: string;
15
- get id(): string;
16
- get statusClasses(): string[];
17
- static ɵfac: i0.ɵɵFactoryDeclaration<StatusComponent, never>;
18
- static ɵcmp: i0.ɵɵComponentDeclaration<StatusComponent, "pecb-status", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "text": { "alias": "text"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, {}, never, ["*"], true, never>;
19
- }
@@ -1,102 +0,0 @@
1
- import { EventEmitter } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export type TabStyle = 'rounded' | 'line';
4
- export type TabSize = 'sm' | 'md';
5
- /**
6
- * A professional tab component with multiple styles and sizes.
7
- * Fully accessible with WCAG 2.1 AA compliance.
8
- *
9
- * @example
10
- * ```html
11
- * <pecb-tab
12
- * label="Tab Name"
13
- * [active]="true"
14
- * style="rounded"
15
- * size="md"
16
- * (clicked)="handleClick()"
17
- * ></pecb-tab>
18
- *
19
- * <!-- With badge number and close button -->
20
- * <pecb-tab
21
- * label="Tab Name"
22
- * [icon]="10"
23
- * [closable]="true"
24
- * [active]="true"
25
- * (closed)="handleClose()"
26
- * ></pecb-tab>
27
- * ```
28
- *
29
- * @publicApi
30
- */
31
- export declare class TabComponent {
32
- /**
33
- * Unique ID for the tab element
34
- */
35
- id: string;
36
- /**
37
- * The visual style of the tab
38
- */
39
- style: TabStyle;
40
- /**
41
- * The size of the tab
42
- */
43
- size: TabSize;
44
- /**
45
- * Label text to display
46
- */
47
- label: string;
48
- /**
49
- * Optional badge number to display after the label
50
- */
51
- icon?: number;
52
- /**
53
- * Whether the tab is in active state
54
- */
55
- active: boolean;
56
- /**
57
- * Whether the tab is disabled
58
- */
59
- disabled: boolean;
60
- /**
61
- * Whether to show close button
62
- */
63
- closable: boolean;
64
- /**
65
- * Accessible label for the tab
66
- */
67
- ariaLabel?: string;
68
- /**
69
- * ID of the tab panel this tab controls
70
- */
71
- ariaControls?: string;
72
- /**
73
- * Indicates if the tab panel is selected
74
- */
75
- ariaSelected?: boolean;
76
- /**
77
- * Event emitted when the tab is clicked
78
- */
79
- clicked: EventEmitter<string>;
80
- /**
81
- * Event emitted when the close button is clicked
82
- */
83
- closed: EventEmitter<string>;
84
- /**
85
- * Get CSS classes for the tab
86
- */
87
- get tabClasses(): string[];
88
- /**
89
- * Handle tab click
90
- */
91
- onClick(event: MouseEvent): void;
92
- /**
93
- * Handle close button click
94
- */
95
- onClose(event: MouseEvent): void;
96
- /**
97
- * Handle keyboard events for accessibility
98
- */
99
- onKeyDown(event: KeyboardEvent): void;
100
- static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
101
- static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "pecb-tab", never, { "id": { "alias": "id"; "required": false; }; "style": { "alias": "style"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaControls": { "alias": "ariaControls"; "required": false; }; "ariaSelected": { "alias": "ariaSelected"; "required": false; }; }, { "clicked": "clicked"; "closed": "closed"; }, never, never, true, never>;
102
- }