cerxos-ui 0.0.3 → 0.0.4

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/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
2
+ import { EventEmitter, OnChanges, AfterViewInit, OnDestroy, SimpleChanges, ElementRef, Renderer2 } from '@angular/core';
3
3
  import { ControlValueAccessor } from '@angular/forms';
4
4
 
5
5
  declare class CerxosUi {
@@ -22,6 +22,33 @@ declare class CxsAlertComponent {
22
22
  static ɵcmp: i0.ɵɵComponentDeclaration<CxsAlertComponent, "cxs-alert", never, { "variant": { "alias": "variant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
23
23
  }
24
24
 
25
+ type CxsAccordionSpacing = 'sm' | 'md' | 'lg';
26
+ declare class CxsAccordionComponent {
27
+ spacing: CxsAccordionSpacing;
28
+ get accordionClass(): string;
29
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsAccordionComponent, never>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsAccordionComponent, "cxs-accordion", never, { "spacing": { "alias": "spacing"; "required": false; }; }, {}, never, ["*"], true, never>;
31
+ }
32
+
33
+ type CxsAccordionItemSize = 'sm' | 'md' | 'lg';
34
+ declare class CxsAccordionItemComponent {
35
+ private static nextId;
36
+ title?: string;
37
+ expanded: boolean;
38
+ disabled: boolean;
39
+ size: CxsAccordionItemSize;
40
+ expandedChange: EventEmitter<boolean>;
41
+ readonly buttonId: string;
42
+ readonly contentId: string;
43
+ get itemClass(): string;
44
+ get headerClass(): string;
45
+ get contentClass(): string;
46
+ get iconClass(): string;
47
+ toggle(): void;
48
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsAccordionItemComponent, never>;
49
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsAccordionItemComponent, "cxs-accordion-item", never, { "title": { "alias": "title"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "expandedChange": "expandedChange"; }, never, ["[cxsAccordionTitle]", "*"], true, never>;
50
+ }
51
+
25
52
  type CxsBadgeVariant = 'primary' | 'neutral' | 'danger';
26
53
  type CxsBadgeSize = 'sm' | 'md';
27
54
  declare class CxsBadgeComponent {
@@ -32,6 +59,31 @@ declare class CxsBadgeComponent {
32
59
  static ɵcmp: i0.ɵɵComponentDeclaration<CxsBadgeComponent, "cxs-badge", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
33
60
  }
34
61
 
62
+ type CxsAvatarSize = 'sm' | 'md' | 'lg';
63
+ type CxsAvatarShape = 'circle' | 'square';
64
+ declare class CxsAvatarComponent {
65
+ private readonly hostClass;
66
+ private _src?;
67
+ set src(value: string | undefined);
68
+ get src(): string | undefined;
69
+ name?: string;
70
+ alt?: string;
71
+ size: CxsAvatarSize;
72
+ shape: CxsAvatarShape;
73
+ imageError: boolean;
74
+ constructor(hostClass: string | null);
75
+ get avatarClass(): string;
76
+ get fallbackClass(): string;
77
+ get altText(): string;
78
+ get fallbackLabel(): string;
79
+ get fallbackText(): string;
80
+ get showImage(): boolean;
81
+ onImageError(): void;
82
+ private getInitials;
83
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsAvatarComponent, [{ attribute: "class"; }]>;
84
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsAvatarComponent, "cxs-avatar", never, { "src": { "alias": "src"; "required": false; }; "name": { "alias": "name"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "size": { "alias": "size"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; }, {}, never, never, true, never>;
85
+ }
86
+
35
87
  type CxsBreadcrumbSize = 'sm' | 'md' | 'lg';
36
88
  type CxsBreadcrumbVariant = 'default' | 'muted';
37
89
  interface CxsBreadcrumbItem {
@@ -73,7 +125,7 @@ declare class CxsButtonComponent {
73
125
  get isDisabled(): boolean;
74
126
  get buttonClass(): string;
75
127
  static ɵfac: i0.ɵɵFactoryDeclaration<CxsButtonComponent, [{ attribute: "class"; }]>;
76
- static ɵcmp: i0.ɵɵComponentDeclaration<CxsButtonComponent, "cxs-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], true, never>;
128
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsButtonComponent, "cxs-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["[cxsButtonIcon]", "*"], true, never>;
77
129
  }
78
130
 
79
131
  type CxsCardVariant = 'surface' | 'muted' | 'outline';
@@ -121,6 +173,235 @@ declare class CxsCheckboxComponent implements ControlValueAccessor {
121
173
  static ɵcmp: i0.ɵɵComponentDeclaration<CxsCheckboxComponent, "cxs-checkbox", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "size": { "alias": "size"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
122
174
  }
123
175
 
176
+ interface CxsCarouselItem {
177
+ title?: string;
178
+ description?: string;
179
+ image?: string;
180
+ alt?: string;
181
+ }
182
+ declare class CxsCarouselComponent implements OnChanges, AfterViewInit, OnDestroy {
183
+ private readonly hostClass;
184
+ items: CxsCarouselItem[];
185
+ activeIndex: number;
186
+ autoplay: boolean;
187
+ interval: number;
188
+ loop: boolean;
189
+ showControls: boolean;
190
+ showIndicators: boolean;
191
+ ariaLabel: string;
192
+ activeIndexChange: EventEmitter<number>;
193
+ private timerId;
194
+ constructor(hostClass: string | null);
195
+ ngOnChanges(changes: SimpleChanges): void;
196
+ ngAfterViewInit(): void;
197
+ ngOnDestroy(): void;
198
+ get wrapperClass(): string;
199
+ get trackStyle(): string;
200
+ get trackClass(): string;
201
+ get slideClass(): string;
202
+ get imageClass(): string;
203
+ get contentClass(): string;
204
+ get controlClass(): string;
205
+ get indicatorContainerClass(): string;
206
+ indicatorClass(isActive: boolean): string;
207
+ previous(): void;
208
+ next(): void;
209
+ goTo(index: number): void;
210
+ private normalizeIndex;
211
+ private clampIndex;
212
+ private resetAutoplay;
213
+ private clearAutoplay;
214
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsCarouselComponent, [{ attribute: "class"; }]>;
215
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsCarouselComponent, "cxs-carousel", never, { "items": { "alias": "items"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; "autoplay": { "alias": "autoplay"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "showControls": { "alias": "showControls"; "required": false; }; "showIndicators": { "alias": "showIndicators"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; }, never, never, true, never>;
216
+ }
217
+
218
+ type CxsDataTableAlign = 'left' | 'center' | 'right';
219
+ type CxsDataTableSortDirection = 'asc' | 'desc';
220
+ type CxsDataTableFilterType = 'text' | 'select' | 'number';
221
+ type CxsDataTablePin = 'left' | 'right';
222
+ interface CxsDataTableColumn {
223
+ key: string;
224
+ label: string;
225
+ align?: CxsDataTableAlign;
226
+ width?: string;
227
+ sortable?: boolean;
228
+ filterable?: boolean;
229
+ filterType?: CxsDataTableFilterType;
230
+ filterOptions?: Array<{
231
+ label: string;
232
+ value: string;
233
+ }>;
234
+ resizable?: boolean;
235
+ pinned?: CxsDataTablePin;
236
+ visible?: boolean;
237
+ minWidth?: number;
238
+ headerClass?: string;
239
+ cellClass?: string;
240
+ formatter?: (value: unknown, row: Record<string, unknown>) => string;
241
+ }
242
+ interface CxsDataTableSort {
243
+ key: string;
244
+ direction: CxsDataTableSortDirection;
245
+ }
246
+ declare class CxsDataTableComponent implements OnChanges {
247
+ private readonly hostClass;
248
+ columns: CxsDataTableColumn[];
249
+ data: Array<Record<string, unknown>>;
250
+ caption?: string;
251
+ ariaLabel: string;
252
+ striped: boolean;
253
+ bordered: boolean;
254
+ compact: boolean;
255
+ loading: boolean;
256
+ emptyMessage: string;
257
+ emptyCell: string;
258
+ pageSize: number;
259
+ pageIndex: number;
260
+ pageSizeOptions: number[];
261
+ showPagination: boolean;
262
+ showPageSize: boolean;
263
+ manualPagination: boolean;
264
+ total?: number;
265
+ sortKey?: string;
266
+ sortDirection: CxsDataTableSortDirection;
267
+ manualSort: boolean;
268
+ showToolbar: boolean;
269
+ showFilters: boolean;
270
+ showColumnVisibility: boolean;
271
+ showGlobalSearch: boolean;
272
+ manualFilter: boolean;
273
+ selectable: boolean;
274
+ rowKey: string;
275
+ selectedKeys: Array<string | number>;
276
+ bulkActions: Array<{
277
+ id: string;
278
+ label: string;
279
+ }>;
280
+ pageChange: EventEmitter<number>;
281
+ pageSizeChange: EventEmitter<number>;
282
+ sortChange: EventEmitter<CxsDataTableSort>;
283
+ filterChange: EventEmitter<{
284
+ global: string;
285
+ columns: Record<string, string>;
286
+ }>;
287
+ selectionChange: EventEmitter<(string | number)[]>;
288
+ bulkAction: EventEmitter<{
289
+ id: string;
290
+ selected: Array<Record<string, unknown>>;
291
+ }>;
292
+ protected currentPage: number;
293
+ protected currentPageSize: number;
294
+ protected globalFilter: string;
295
+ protected columnFilters: Record<string, string>;
296
+ protected columnVisibility: Record<string, boolean>;
297
+ protected columnWidths: Record<string, string>;
298
+ protected isResizing: boolean;
299
+ protected resizingColumn?: string;
300
+ protected pinnedOffsetsLeft: Record<string, number>;
301
+ protected pinnedOffsetsRight: Record<string, number>;
302
+ protected filtersOpen: boolean;
303
+ private resizeStartX;
304
+ private resizeStartWidth;
305
+ constructor(hostClass: string | null);
306
+ ngOnChanges(changes: SimpleChanges): void;
307
+ get wrapperClass(): string;
308
+ get tableClass(): string;
309
+ get headerRowClass(): string;
310
+ get bodyRowClass(): string;
311
+ get emptyRowClass(): string;
312
+ get paginationClass(): string;
313
+ get pageButtonClass(): string;
314
+ get pageSelectClass(): string;
315
+ get toolbarClass(): string;
316
+ get toolbarGroupClass(): string;
317
+ get toolbarInputClass(): string;
318
+ get toolbarButtonClass(): string;
319
+ get bulkBarClass(): string;
320
+ get resizeHandleClass(): string;
321
+ get colSpan(): number;
322
+ get totalItems(): number;
323
+ get totalPages(): number;
324
+ get pageLabel(): string;
325
+ get displayRows(): Array<Record<string, unknown>>;
326
+ get visibleColumns(): CxsDataTableColumn[];
327
+ get selectedCount(): number;
328
+ get allVisibleSelected(): boolean;
329
+ get someVisibleSelected(): boolean;
330
+ headerCellClass(column: CxsDataTableColumn): string;
331
+ headerButtonClass(): string;
332
+ headerFilterInputClass(): string;
333
+ bodyCellClass(column: CxsDataTableColumn): string;
334
+ cellValue(row: Record<string, unknown>, column: CxsDataTableColumn): string;
335
+ columnWidth(column: CxsDataTableColumn): string | null;
336
+ columnMinWidth(column: CxsDataTableColumn): string | null;
337
+ pinnedStyle(column: CxsDataTableColumn): Record<string, string> | null;
338
+ pinnedLeft(column: CxsDataTableColumn): string | null;
339
+ pinnedRight(column: CxsDataTableColumn): string | null;
340
+ pinnedClass(column: CxsDataTableColumn): string;
341
+ ariaSort(column: CxsDataTableColumn): 'ascending' | 'descending' | 'none' | null;
342
+ onSort(column: CxsDataTableColumn): void;
343
+ goToPage(page: number): void;
344
+ nextPage(): void;
345
+ previousPage(): void;
346
+ onPageSizeChange(value: string): void;
347
+ onGlobalFilterChange(value: string): void;
348
+ onColumnFilterChange(columnKey: string, value: string): void;
349
+ columnFilterValue(columnKey: string): string;
350
+ toggleColumnVisibility(columnKey: string): void;
351
+ toggleSelectAll(): void;
352
+ toggleRowSelection(row: Record<string, unknown>): void;
353
+ isSelected(row: Record<string, unknown>): boolean;
354
+ runBulkAction(actionId: string): void;
355
+ onResizeStart(event: MouseEvent, column: CxsDataTableColumn): void;
356
+ private getSortedData;
357
+ private getFilteredData;
358
+ private emitFilterChange;
359
+ private initializeVisibility;
360
+ private initializeWidths;
361
+ private updatePinnedOffsets;
362
+ private getWidthValue;
363
+ private rowIdentifier;
364
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsDataTableComponent, [{ attribute: "class"; }]>;
365
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsDataTableComponent, "cxs-data-table", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "emptyCell": { "alias": "emptyCell"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageIndex": { "alias": "pageIndex"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "showPagination": { "alias": "showPagination"; "required": false; }; "showPageSize": { "alias": "showPageSize"; "required": false; }; "manualPagination": { "alias": "manualPagination"; "required": false; }; "total": { "alias": "total"; "required": false; }; "sortKey": { "alias": "sortKey"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "manualSort": { "alias": "manualSort"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "showFilters": { "alias": "showFilters"; "required": false; }; "showColumnVisibility": { "alias": "showColumnVisibility"; "required": false; }; "showGlobalSearch": { "alias": "showGlobalSearch"; "required": false; }; "manualFilter": { "alias": "manualFilter"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "rowKey": { "alias": "rowKey"; "required": false; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; }; "bulkActions": { "alias": "bulkActions"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "filterChange": "filterChange"; "selectionChange": "selectionChange"; "bulkAction": "bulkAction"; }, never, never, true, never>;
366
+ }
367
+
368
+ type CxsDialogSize = 'sm' | 'md' | 'lg';
369
+ type CxsDialogCloseReason = 'dismiss' | 'backdrop' | 'escape';
370
+ declare class CxsDialogComponent implements OnChanges, AfterViewInit {
371
+ private readonly hostClass;
372
+ private static nextId;
373
+ open: boolean;
374
+ title?: string;
375
+ description?: string;
376
+ ariaLabel: string;
377
+ size: CxsDialogSize;
378
+ dismissible: boolean;
379
+ closeOnBackdrop: boolean;
380
+ closeOnEscape: boolean;
381
+ openChange: EventEmitter<boolean>;
382
+ closed: EventEmitter<CxsDialogCloseReason>;
383
+ private readonly dialogPanel?;
384
+ readonly titleId: string;
385
+ readonly descriptionId: string;
386
+ constructor(hostClass: string | null);
387
+ ngOnChanges(changes: SimpleChanges): void;
388
+ ngAfterViewInit(): void;
389
+ get overlayClass(): string;
390
+ get panelClass(): string;
391
+ get titleClass(): string;
392
+ get descriptionClass(): string;
393
+ get bodyClass(): string;
394
+ get actionsClass(): string;
395
+ get closeButtonClass(): string;
396
+ get ariaLabelValue(): string | null;
397
+ requestClose(reason: CxsDialogCloseReason): void;
398
+ onBackdropClick(event: MouseEvent): void;
399
+ onKeydown(event: KeyboardEvent): void;
400
+ private focusPanelSoon;
401
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsDialogComponent, [{ attribute: "class"; }]>;
402
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsDialogComponent, "cxs-dialog", never, { "open": { "alias": "open"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; }, { "openChange": "openChange"; "closed": "closed"; }, never, ["*", "[cxsDialogActions]"], true, never>;
403
+ }
404
+
124
405
  type CxsDatepickerVariant = 'outline' | 'filled';
125
406
  type CxsDatepickerSize = 'sm' | 'md' | 'lg';
126
407
  type CxsCalendarDay = {
@@ -158,12 +439,18 @@ declare class CxsDatepickerComponent implements ControlValueAccessor {
158
439
  displayMonth: Date;
159
440
  calendarDays: CxsCalendarDay[];
160
441
  readonly weekDayLabels: string[];
442
+ readonly monthOptions: {
443
+ value: number;
444
+ label: string;
445
+ }[];
161
446
  get isDisabled(): boolean;
162
447
  get panelId(): string;
163
448
  get inputClass(): string;
164
449
  get popoverClass(): string;
165
450
  get navButtonClass(): string;
451
+ get selectClass(): string;
166
452
  get displayMonthLabel(): string;
453
+ get yearOptions(): number[];
167
454
  writeValue(value: string | null): void;
168
455
  registerOnChange(fn: (value: string) => void): void;
169
456
  registerOnTouched(fn: () => void): void;
@@ -175,6 +462,8 @@ declare class CxsDatepickerComponent implements ControlValueAccessor {
175
462
  toggle(): void;
176
463
  prevMonth(): void;
177
464
  nextMonth(): void;
465
+ onMonthChange(event: Event): void;
466
+ onYearChange(event: Event): void;
178
467
  dayButtonClass(day: CxsCalendarDay): string;
179
468
  onDocumentClick(event: MouseEvent): void;
180
469
  onEscape(): void;
@@ -225,6 +514,39 @@ declare class CxsInputComponent implements ControlValueAccessor {
225
514
  static ɵcmp: i0.ɵɵComponentDeclaration<CxsInputComponent, "cxs-input", never, { "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
226
515
  }
227
516
 
517
+ type CxsMenubarSize = 'sm' | 'md' | 'lg';
518
+ type CxsMenubarVariant = 'default' | 'surface';
519
+ interface CxsMenubarItem {
520
+ label: string;
521
+ href?: string;
522
+ target?: string;
523
+ rel?: string;
524
+ ariaLabel?: string;
525
+ disabled?: boolean;
526
+ active?: boolean;
527
+ }
528
+ declare class CxsMenubarComponent {
529
+ private readonly hostClass;
530
+ items: CxsMenubarItem[];
531
+ ariaLabel: string;
532
+ size: CxsMenubarSize;
533
+ variant: CxsMenubarVariant;
534
+ disabled: boolean;
535
+ itemSelected: EventEmitter<CxsMenubarItem>;
536
+ private readonly menuItems?;
537
+ constructor(hostClass: string | null);
538
+ get menubarClass(): string;
539
+ isItemDisabled(item: CxsMenubarItem): boolean;
540
+ getItemClass(item: CxsMenubarItem): string;
541
+ getItemHref(item: CxsMenubarItem): string | null;
542
+ getItemRel(item: CxsMenubarItem): string | null;
543
+ onItemClick(item: CxsMenubarItem, event: Event): void;
544
+ onKeydown(event: KeyboardEvent): void;
545
+ private getFocusableItems;
546
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsMenubarComponent, [{ attribute: "class"; }]>;
547
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsMenubarComponent, "cxs-menubar", never, { "items": { "alias": "items"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "itemSelected": "itemSelected"; }, never, never, true, never>;
548
+ }
549
+
228
550
  type CxsRadioSize = 'sm' | 'md' | 'lg';
229
551
  type CxsRadioVariant = 'primary' | 'secondary';
230
552
  declare class CxsRadioComponent implements ControlValueAccessor {
@@ -291,6 +613,119 @@ declare class CxsSelectComponent implements ControlValueAccessor {
291
613
  static ɵcmp: i0.ɵɵComponentDeclaration<CxsSelectComponent, "cxs-select", never, { "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placeholderValue": { "alias": "placeholderValue"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
292
614
  }
293
615
 
616
+ type CxsTableAlign = 'left' | 'center' | 'right';
617
+ interface CxsTableColumn {
618
+ key: string;
619
+ label: string;
620
+ align?: CxsTableAlign;
621
+ width?: string;
622
+ headerClass?: string;
623
+ cellClass?: string;
624
+ }
625
+ declare class CxsTableComponent {
626
+ private readonly hostClass;
627
+ columns: CxsTableColumn[];
628
+ data: Array<Record<string, unknown>>;
629
+ caption?: string;
630
+ ariaLabel: string;
631
+ striped: boolean;
632
+ bordered: boolean;
633
+ compact: boolean;
634
+ emptyMessage: string;
635
+ emptyCell: string;
636
+ constructor(hostClass: string | null);
637
+ get wrapperClass(): string;
638
+ get tableClass(): string;
639
+ get headerRowClass(): string;
640
+ get bodyRowClass(): string;
641
+ get emptyRowClass(): string;
642
+ get colSpan(): number;
643
+ headerCellClass(column: CxsTableColumn): string;
644
+ bodyCellClass(column: CxsTableColumn): string;
645
+ cellValue(row: Record<string, unknown>, column: CxsTableColumn): string;
646
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsTableComponent, [{ attribute: "class"; }]>;
647
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsTableComponent, "cxs-table", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "emptyCell": { "alias": "emptyCell"; "required": false; }; }, {}, never, never, true, never>;
648
+ }
649
+
650
+ type CxsToggleSize = 'sm' | 'md' | 'lg';
651
+ declare class CxsToggleComponent {
652
+ private static nextId;
653
+ checked: boolean;
654
+ disabled: boolean;
655
+ size: CxsToggleSize;
656
+ label?: string;
657
+ ariaLabel: string;
658
+ checkedChange: EventEmitter<boolean>;
659
+ readonly labelId: string;
660
+ get wrapperClass(): string;
661
+ get labelClass(): string;
662
+ get trackClass(): string;
663
+ get thumbClass(): string;
664
+ get ariaLabelValue(): string | null;
665
+ toggle(): void;
666
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsToggleComponent, never>;
667
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsToggleComponent, "cxs-toggle", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
668
+ }
669
+
670
+ type CxsToastVariant = 'info' | 'neutral' | 'danger';
671
+ type CxsToastCloseReason = 'dismiss' | 'timeout';
672
+ type CxsToastPosition = 'bottom-right' | 'bottom' | 'bottom-left' | 'top-right' | 'top' | 'top-left' | 'right' | 'left' | 'center';
673
+ type CxsToastMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'none';
674
+ declare class CxsToastComponent implements OnChanges, OnDestroy {
675
+ private readonly hostClass;
676
+ open: boolean;
677
+ title?: string;
678
+ message?: string;
679
+ ariaLabel: string;
680
+ variant: CxsToastVariant;
681
+ dismissible: boolean;
682
+ duration: number;
683
+ position: CxsToastPosition;
684
+ maxWidth: CxsToastMaxWidth;
685
+ openChange: EventEmitter<boolean>;
686
+ dismissed: EventEmitter<CxsToastCloseReason>;
687
+ private timeoutId;
688
+ constructor(hostClass: string | null);
689
+ ngOnChanges(changes: SimpleChanges): void;
690
+ ngOnDestroy(): void;
691
+ get hostClassName(): string;
692
+ get toastClass(): string;
693
+ get titleClass(): string;
694
+ get messageClass(): string;
695
+ get actionsClass(): string;
696
+ get closeButtonClass(): string;
697
+ get role(): 'status' | 'alert';
698
+ get ariaLive(): 'polite' | 'assertive';
699
+ get ariaLabelValue(): string | null;
700
+ requestClose(reason: CxsToastCloseReason): void;
701
+ private resetTimer;
702
+ private clearTimer;
703
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsToastComponent, [{ attribute: "class"; }]>;
704
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsToastComponent, "cxs-toast", never, { "open": { "alias": "open"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "position": { "alias": "position"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; }, { "openChange": "openChange"; "dismissed": "dismissed"; }, never, ["*", "[cxsToastAction]"], true, never>;
705
+ }
706
+
707
+ type CxsTooltipPosition = 'top' | 'right' | 'bottom' | 'left';
708
+ declare class CxsTooltipComponent {
709
+ private static nextId;
710
+ text: string;
711
+ position: CxsTooltipPosition;
712
+ disabled: boolean;
713
+ open: boolean;
714
+ readonly tooltipId: string;
715
+ get wrapperClass(): string;
716
+ get tooltipClass(): string;
717
+ get describedBy(): string | null;
718
+ show(): void;
719
+ hide(): void;
720
+ onMouseEnter(): void;
721
+ onMouseLeave(): void;
722
+ onFocusIn(): void;
723
+ onFocusOut(): void;
724
+ onKeydown(event: KeyboardEvent): void;
725
+ static ɵfac: i0.ɵɵFactoryDeclaration<CxsTooltipComponent, never>;
726
+ static ɵcmp: i0.ɵɵComponentDeclaration<CxsTooltipComponent, "cxs-tooltip", never, { "text": { "alias": "text"; "required": false; }; "position": { "alias": "position"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
727
+ }
728
+
294
729
  type CxsThemeMode = 'light' | 'dark' | 'system';
295
730
  declare class CxsThemeDirective implements OnDestroy {
296
731
  private readonly host;
@@ -311,5 +746,5 @@ declare class CxsThemeDirective implements OnDestroy {
311
746
  static ɵdir: i0.ɵɵDirectiveDeclaration<CxsThemeDirective, "[cxsTheme]", never, { "cxsTheme": { "alias": "cxsTheme"; "required": false; }; "cxsThemeDarkClass": { "alias": "cxsThemeDarkClass"; "required": false; }; }, {}, never, never, true, never>;
312
747
  }
313
748
 
314
- export { CerxosUi, CxsAlertComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCheckboxComponent, CxsDatepickerComponent, CxsInputComponent, CxsRadioComponent, CxsSelectComponent, CxsThemeDirective };
315
- export type { CxsAlertVariant, CxsBadgeSize, CxsBadgeVariant, CxsBreadcrumbItem, CxsBreadcrumbSize, CxsBreadcrumbVariant, CxsButtonSize, CxsButtonVariant, CxsCardSize, CxsCardVariant, CxsCheckboxSize, CxsDatepickerSize, CxsDatepickerVariant, CxsInputSize, CxsInputType, CxsInputVariant, CxsRadioSize, CxsRadioVariant, CxsSelectSize, CxsSelectVariant, CxsThemeMode };
749
+ export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsDataTableComponent, CxsDatepickerComponent, CxsDialogComponent, CxsInputComponent, CxsMenubarComponent, CxsRadioComponent, CxsSelectComponent, CxsTableComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
750
+ export type { CxsAccordionItemSize, CxsAccordionSpacing, CxsAlertVariant, CxsAvatarShape, CxsAvatarSize, CxsBadgeSize, CxsBadgeVariant, CxsBreadcrumbItem, CxsBreadcrumbSize, CxsBreadcrumbVariant, CxsButtonSize, CxsButtonVariant, CxsCardSize, CxsCardVariant, CxsCarouselItem, CxsCheckboxSize, CxsDataTableAlign, CxsDataTableColumn, CxsDataTableFilterType, CxsDataTablePin, CxsDataTableSort, CxsDataTableSortDirection, CxsDatepickerSize, CxsDatepickerVariant, CxsDialogCloseReason, CxsDialogSize, CxsInputSize, CxsInputType, CxsInputVariant, CxsMenubarItem, CxsMenubarSize, CxsMenubarVariant, CxsRadioSize, CxsRadioVariant, CxsSelectSize, CxsSelectVariant, CxsTableAlign, CxsTableColumn, CxsThemeMode, CxsToastCloseReason, CxsToastMaxWidth, CxsToastPosition, CxsToastVariant, CxsToggleSize, CxsTooltipPosition };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cerxos-ui",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.3.0",
6
6
  "@angular/core": "^20.3.0"
@@ -1,3 +1,3 @@
1
- @import "../tokens/theme-default.css";
2
- @import "../tokens/theme-dark.css";
3
- @import "tailwindcss";
1
+ @import "../tokens/theme-default.css";
2
+ @import "../tokens/theme-dark.css";
3
+ @import "tailwindcss";
@@ -1,16 +1,16 @@
1
- .cxs-theme-dark {
2
- color-scheme: dark;
3
- --cxs-color-primary: #22c55e;
4
- --cxs-color-primary-hover: #16a34a;
5
- --cxs-color-primary-ghost: rgba(34, 197, 94, 0.16);
6
- --cxs-color-on-primary: #0b0f0e;
7
- --cxs-color-surface: #0b0f0e;
8
- --cxs-color-surface-hover: #111827;
9
- --cxs-color-on-surface: #e2e8f0;
10
- --cxs-color-on-surface-muted: #94a3b8;
11
- --cxs-color-border: #1f2937;
12
- --cxs-color-danger: #f87171;
13
- --cxs-color-focus: #f59e0b;
14
- --cxs-radius-md: 8px;
15
- --cxs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
16
- }
1
+ .cxs-theme-dark {
2
+ color-scheme: dark;
3
+ --cxs-color-primary: #22c55e;
4
+ --cxs-color-primary-hover: #16a34a;
5
+ --cxs-color-primary-ghost: rgba(34, 197, 94, 0.16);
6
+ --cxs-color-on-primary: #0b0f0e;
7
+ --cxs-color-surface: #0b0f0e;
8
+ --cxs-color-surface-hover: #111827;
9
+ --cxs-color-on-surface: #e2e8f0;
10
+ --cxs-color-on-surface-muted: #94a3b8;
11
+ --cxs-color-border: #1f2937;
12
+ --cxs-color-danger: #f87171;
13
+ --cxs-color-focus: #f59e0b;
14
+ --cxs-radius-md: 8px;
15
+ --cxs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
16
+ }
@@ -1,15 +1,15 @@
1
- :root {
2
- --cxs-color-primary: #1f7a4a;
3
- --cxs-color-primary-hover: #17613a;
4
- --cxs-color-primary-ghost: rgba(31, 122, 74, 0.12);
5
- --cxs-color-on-primary: #ffffff;
6
- --cxs-color-surface: #ffffff;
7
- --cxs-color-surface-hover: #f6f8fa;
8
- --cxs-color-on-surface: #0f172a;
9
- --cxs-color-on-surface-muted: #64748b;
10
- --cxs-color-border: #d0d7de;
11
- --cxs-color-danger: #dc2626;
12
- --cxs-color-focus: #f59e0b;
13
- --cxs-radius-md: 8px;
14
- --cxs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.16);
15
- }
1
+ :root {
2
+ --cxs-color-primary: #1f7a4a;
3
+ --cxs-color-primary-hover: #17613a;
4
+ --cxs-color-primary-ghost: rgba(31, 122, 74, 0.12);
5
+ --cxs-color-on-primary: #ffffff;
6
+ --cxs-color-surface: #ffffff;
7
+ --cxs-color-surface-hover: #f6f8fa;
8
+ --cxs-color-on-surface: #0f172a;
9
+ --cxs-color-on-surface-muted: #64748b;
10
+ --cxs-color-border: #d0d7de;
11
+ --cxs-color-danger: #dc2626;
12
+ --cxs-color-focus: #f59e0b;
13
+ --cxs-radius-md: 8px;
14
+ --cxs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.16);
15
+ }