cerxos-ui 0.0.13 → 0.0.15

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "cerxos-ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
+    "@angular/common": "^21.2.10",
+    "@angular/core": "^21.2.10"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -24,4 +24,4 @@
   "module": "fesm2022/cerxos-ui.mjs",
   "typings": "types/cerxos-ui.d.ts",
   "type": "module"
-}
+}

package/tokens/theme-dark.css

@@ -4,12 +4,18 @@
   --cxs-color-primary-hover: #16a34a;
   --cxs-color-primary-ghost: rgba(34, 197, 94, 0.16);
   --cxs-color-on-primary: #0b0f0e;
+  --cxs-color-danger-surface: rgba(248, 113, 113, 0.16);
+  --cxs-color-danger-surface-hover: rgba(248, 113, 113, 0.24);
+  --cxs-color-danger-hover: #ef4444;
+  --cxs-color-on-danger: #0b0f0e;
   --cxs-color-surface: #0b0f0e;
   --cxs-color-surface-hover: #111827;
   --cxs-color-on-surface: #e2e8f0;
   --cxs-color-on-surface-muted: #94a3b8;
   --cxs-color-border: #1f2937;
   --cxs-color-danger: #f87171;
+  --cxs-color-skeleton-base: #1f2937;
+  --cxs-color-skeleton-highlight: rgba(148, 163, 184, 0.22);
   --cxs-color-focus: #f59e0b;
   --cxs-radius-md: 8px;
   --cxs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);

package/tokens/theme-default.css

@@ -3,12 +3,18 @@
   --cxs-color-primary-hover: #17613a;
   --cxs-color-primary-ghost: rgba(31, 122, 74, 0.12);
   --cxs-color-on-primary: #ffffff;
+  --cxs-color-danger-surface: #fee2e2;
+  --cxs-color-danger-surface-hover: #fecaca;
+  --cxs-color-danger-hover: #b91c1c;
+  --cxs-color-on-danger: #ffffff;
   --cxs-color-surface: #ffffff;
   --cxs-color-surface-hover: #f6f8fa;
   --cxs-color-on-surface: #0f172a;
   --cxs-color-on-surface-muted: #64748b;
   --cxs-color-border: #d0d7de;
   --cxs-color-danger: #dc2626;
+  --cxs-color-skeleton-base: #e2e8f0;
+  --cxs-color-skeleton-highlight: rgba(255, 255, 255, 0.7);
   --cxs-color-focus: #f59e0b;
   --cxs-radius-md: 8px;
   --cxs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.16);

package/types/cerxos-ui.d.ts

@@ -161,8 +161,30 @@ declare class CxsBreadcrumbComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<CxsBreadcrumbComponent, "cxs-breadcrumb", never, { "items": { "alias": "items"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-type CxsButtonVariant = 'primary' | 'secondary' | 'ghost';
+type CxsIconName = 'bell' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'plus' | 'search' | 'user' | 'x';
+type CxsIconSize = 'sm' | 'md' | 'lg';
+type CxsIconDefinition = {
+    readonly paths: readonly string[];
+    readonly viewBox: string;
+};
+declare class CxsIconComponent {
+    private readonly hostClass;
+    private static nextId;
+    name: CxsIconName;
+    size: CxsIconSize;
+    label?: string;
+    readonly instanceId: number;
+    constructor(hostClass: string | null);
+    get icon(): CxsIconDefinition;
+    get iconClass(): string;
+    get titleId(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CxsIconComponent, [{ attribute: "class"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CxsIconComponent, "cxs-icon", never, { "name": { "alias": "name"; "required": true; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type CxsButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
 type CxsButtonSize = 'sm' | 'md' | 'lg';
+type CxsButtonIconPosition = 'start' | 'end';
 declare class CxsButtonComponent {
     private readonly hostClass;
     variant: CxsButtonVariant;
@@ -170,11 +192,18 @@ declare class CxsButtonComponent {
     disabled: boolean;
     loading: boolean;
     type: 'button' | 'submit' | 'reset';
+    icon?: CxsIconName;
+    iconPosition: CxsButtonIconPosition;
+    iconOnly: boolean;
+    ariaLabel?: string;
     constructor(hostClass: string | null);
     get isDisabled(): boolean;
+    get leadingIconName(): CxsIconName | null;
+    get trailingIconName(): CxsIconName | null;
+    get ariaLabelValue(): string | null;
     get buttonClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CxsButtonComponent, [{ attribute: "class"; }]>;
-    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>;
+    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; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, ["[cxsButtonIcon]", "*"], true, never>;
 }
 
 type CxsCardVariant = 'surface' | 'muted' | 'outline';
@@ -709,6 +738,38 @@ declare class CxsMultiSelectComponent implements ControlValueAccessor {
     static ɵcmp: i0.ɵɵComponentDeclaration<CxsMultiSelectComponent, "cxs-multi-select", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "maxSelections": { "alias": "maxSelections"; "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, never, true, never>;
 }
 
+type CxsProgressBarVariant = 'primary' | 'neutral' | 'danger';
+type CxsProgressBarSize = 'sm' | 'md' | 'lg';
+declare class CxsProgressBarComponent {
+    private static nextId;
+    value: number;
+    max: number;
+    variant: CxsProgressBarVariant;
+    size: CxsProgressBarSize;
+    label?: string;
+    showValue: boolean;
+    indeterminate: boolean;
+    ariaLabel: string;
+    readonly labelId: string;
+    get wrapperClass(): string;
+    get headerClass(): string;
+    get labelClass(): string;
+    get valueClass(): string;
+    get trackClass(): string;
+    get fillClass(): string;
+    get indeterminateFillClass(): string;
+    get normalizedMax(): number;
+    get clampedValue(): number;
+    get progressPercent(): number;
+    get progressText(): string;
+    get statusText(): string;
+    get ariaLabelValue(): string | null;
+    get ariaValueNow(): number | null;
+    get ariaValueText(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CxsProgressBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CxsProgressBarComponent, "cxs-progress-bar", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "showValue": { "alias": "showValue"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class CxsTabLabelDirective {
     readonly templateRef: TemplateRef<unknown>;
     constructor(templateRef: TemplateRef<unknown>);
@@ -831,6 +892,76 @@ declare class CxsSelectComponent implements ControlValueAccessor {
     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; }; "label": { "alias": "label"; "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>;
 }
 
+type CxsSkeletonVariant = 'line' | 'block' | 'circle';
+type CxsSkeletonSize = 'sm' | 'md' | 'lg';
+declare class CxsSkeletonComponent {
+    private readonly hostClass;
+    variant: CxsSkeletonVariant;
+    size: CxsSkeletonSize;
+    animated: boolean;
+    width?: string;
+    height?: string;
+    ariaLabel?: string;
+    constructor(hostClass: string | null);
+    get skeletonClass(): string;
+    get resolvedWidth(): string;
+    get resolvedHeight(): string;
+    get role(): 'status' | null;
+    get ariaLabelValue(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CxsSkeletonComponent, [{ attribute: "class"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CxsSkeletonComponent, "cxs-skeleton", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type CxsSliderVariant = 'primary' | 'danger';
+type CxsSliderSize = 'sm' | 'md' | 'lg';
+declare class CxsSliderComponent implements ControlValueAccessor {
+    private static nextId;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    variant: CxsSliderVariant;
+    size: CxsSliderSize;
+    disabled: boolean;
+    required: boolean;
+    showValue: boolean;
+    label?: string;
+    id?: string;
+    name?: string;
+    ariaLabel: string;
+    ariaDescribedby?: string;
+    valueChange: EventEmitter<number>;
+    readonly instanceId: string;
+    private disabledFromControl;
+    private onChange;
+    private onTouched;
+    get isDisabled(): boolean;
+    get normalizedMin(): number;
+    get normalizedMax(): number;
+    get normalizedStep(): number;
+    get clampedValue(): number;
+    get progressPercent(): number;
+    get sliderClass(): string;
+    get wrapperClass(): string;
+    get headerClass(): string;
+    get labelClass(): string;
+    get valueClass(): string;
+    get inputId(): string;
+    get labelId(): string | null;
+    get ariaLabelValue(): string | null;
+    get ariaDescribedbyValue(): string | null;
+    get valueText(): string;
+    get fillColor(): string;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onInput(event: Event): void;
+    onBlur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CxsSliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CxsSliderComponent, "cxs-slider", never, { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "showValue": { "alias": "showValue"; "required": false; }; "label": { "alias": "label"; "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, never, true, never>;
+}
+
 type CxsTableAlign = 'left' | 'center' | 'right';
 interface CxsTableColumn {
     key: string;
@@ -972,5 +1103,5 @@ declare class CxsThemeDirective implements OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CxsThemeDirective, "[cxsTheme]", never, { "cxsTheme": { "alias": "cxsTheme"; "required": false; }; "cxsThemeDarkClass": { "alias": "cxsThemeDarkClass"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatepickerComponent, CxsDialogComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsRadioComponent, CxsSelectComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
-export type { CxsAccordionItemSize, CxsAccordionSpacing, CxsActionMenuAlign, CxsActionMenuItem, CxsActionMenuItemTone, CxsAlertVariant, CxsAvatarShape, CxsAvatarSize, CxsBadgeSize, CxsBadgeVariant, CxsBreadcrumbItem, CxsBreadcrumbSize, CxsBreadcrumbVariant, CxsButtonSize, CxsButtonVariant, CxsCardSize, CxsCardVariant, CxsCarouselItem, CxsCheckboxSize, CxsDataTableAlign, CxsDataTableCellContext, CxsDataTableColumn, CxsDataTableFilterType, CxsDataTablePin, CxsDataTableSort, CxsDataTableSortDirection, CxsDatepickerSize, CxsDatepickerVariant, CxsDialogCloseReason, CxsDialogSize, CxsInputSize, CxsInputType, CxsInputVariant, CxsMenubarItem, CxsMenubarSize, CxsMenubarVariant, CxsMultiSelectOption, CxsMultiSelectSize, CxsMultiSelectVariant, CxsRadioSize, CxsRadioVariant, CxsSelectSize, CxsSelectVariant, CxsTableAlign, CxsTableColumn, CxsThemeMode, CxsToastCloseReason, CxsToastMaxWidth, CxsToastPosition, CxsToastVariant, CxsToggleSize, CxsTooltipPosition };
+export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatepickerComponent, CxsDialogComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsProgressBarComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
+export type { CxsAccordionItemSize, CxsAccordionSpacing, CxsActionMenuAlign, CxsActionMenuItem, CxsActionMenuItemTone, CxsAlertVariant, CxsAvatarShape, CxsAvatarSize, CxsBadgeSize, CxsBadgeVariant, CxsBreadcrumbItem, CxsBreadcrumbSize, CxsBreadcrumbVariant, CxsButtonIconPosition, CxsButtonSize, CxsButtonVariant, CxsCardSize, CxsCardVariant, CxsCarouselItem, CxsCheckboxSize, CxsDataTableAlign, CxsDataTableCellContext, CxsDataTableColumn, CxsDataTableFilterType, CxsDataTablePin, CxsDataTableSort, CxsDataTableSortDirection, CxsDatepickerSize, CxsDatepickerVariant, CxsDialogCloseReason, CxsDialogSize, CxsIconName, CxsIconSize, CxsInputSize, CxsInputType, CxsInputVariant, CxsMenubarItem, CxsMenubarSize, CxsMenubarVariant, CxsMultiSelectOption, CxsMultiSelectSize, CxsMultiSelectVariant, CxsProgressBarSize, CxsProgressBarVariant, CxsRadioSize, CxsRadioVariant, CxsSelectSize, CxsSelectVariant, CxsSkeletonSize, CxsSkeletonVariant, CxsSliderSize, CxsSliderVariant, CxsTableAlign, CxsTableColumn, CxsThemeMode, CxsToastCloseReason, CxsToastMaxWidth, CxsToastPosition, CxsToastVariant, CxsToggleSize, CxsTooltipPosition };