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/fesm2022/cerxos-ui.mjs +1917 -238
- package/fesm2022/cerxos-ui.mjs.map +1 -1
- package/index.d.ts +439 -4
- package/package.json +1 -1
- package/styles/tailwind.css +3 -3
- package/tokens/theme-dark.css +16 -16
- package/tokens/theme-default.css +15 -15
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
package/styles/tailwind.css
CHANGED
|
@@ -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";
|
package/tokens/theme-dark.css
CHANGED
|
@@ -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
|
+
}
|
package/tokens/theme-default.css
CHANGED
|
@@ -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
|
+
}
|