cerxos-ui 0.0.21 → 0.0.23

package/README.md

@@ -28,17 +28,9 @@ This command will compile your project, and the build artifacts will be placed i
 
 ### Publishing the Library
 
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/cerxos-ui
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+Publishing is triggered by a maintainer-pushed version tag. Follow the
+[workspace release instructions](https://github.com/nurakmaljalil91/cerxos-ui-workspace#publishing-cerxos-ui) for the
+version, tag, npm trusted publisher setup, and verification steps.
 
 ## Running unit tests
 

package/fesm2022/cerxos-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, inject, ContentChild, HostBinding, signal, Injectable, Pipe } from '@angular/core';
+import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, inject, ChangeDetectorRef, forwardRef, Directive, ContentChildren, ContentChild, HostBinding, signal, Injectable, Pipe } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -975,6 +975,7 @@ const MARK_SIZE_CLASSES = {
     lg: 'after:h-3 after:w-2 before:h-0.5 before:w-4'
 };
 class CxsCheckboxComponent {
+    changeDetector = inject(ChangeDetectorRef);
     checked = false;
     indeterminate = false;
     disabled = false;
@@ -1020,6 +1021,7 @@ class CxsCheckboxComponent {
     }
     writeValue(value) {
         this.checked = value ?? false;
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1029,6 +1031,7 @@ class CxsCheckboxComponent {
     }
     setDisabledState(isDisabled) {
         this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
     }
     onCheckboxChange(event) {
         const target = event.target;
@@ -1269,7 +1272,7 @@ const BODY_ROW_BASE_CLASSES$1 = 'border-b border-[var(--cxs-color-border)] last:
 const BODY_ROW_STRIPED_CLASSES$1 = 'odd:bg-[var(--cxs-color-surface)] even:bg-[var(--cxs-color-surface-hover)]';
 const BODY_CELL_BASE_CLASSES$1 = 'px-3 py-2 align-top';
 const BODY_CELL_COMPACT_CLASSES$1 = 'px-2 py-1.5';
-const ALIGN_CLASSES$1 = {
+const ALIGN_CLASSES$2 = {
     left: 'text-left',
     center: 'text-center',
     right: 'text-right'
@@ -1498,7 +1501,7 @@ class CxsDataTableComponent {
         return [
             HEADER_CELL_BASE_CLASSES$1,
             this.columnBorders ? COLUMN_BORDER_CLASSES : '',
-            ALIGN_CLASSES$1[column.align ?? 'left'],
+            ALIGN_CLASSES$2[column.align ?? 'left'],
             column.headerClass ?? ''
         ]
             .filter(Boolean)
@@ -1515,7 +1518,7 @@ class CxsDataTableComponent {
             BODY_CELL_BASE_CLASSES$1,
             this.compact ? BODY_CELL_COMPACT_CLASSES$1 : '',
             this.columnBorders ? COLUMN_BORDER_CLASSES : '',
-            ALIGN_CLASSES$1[column.align ?? 'left'],
+            ALIGN_CLASSES$2[column.align ?? 'left'],
             column.cellClass ?? ''
         ]
             .filter(Boolean)
@@ -2075,6 +2078,7 @@ const DAY_TODAY = 'border border-[var(--cxs-color-primary)]';
 const DAY_SELECTED = 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)]';
 const DAY_HOVER = 'hover:bg-[var(--cxs-color-surface-hover)]';
 class CxsDatepickerComponent {
+    changeDetector = inject(ChangeDetectorRef);
     static nextId = 0;
     value = '';
     variant = 'outline';
@@ -2175,6 +2179,7 @@ class CxsDatepickerComponent {
     writeValue(value) {
         this.value = value ?? '';
         this.syncDisplayMonthWithValue();
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2184,6 +2189,7 @@ class CxsDatepickerComponent {
     }
     setDisabledState(isDisabled) {
         this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
     }
     onInput(event) {
         const target = event.target;
@@ -2633,6 +2639,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
+const CONTENT_BASE_CLASSES = 'absolute z-50 w-80 max-w-[calc(100vw-2rem)] rounded-[var(--cxs-radius-md)] ' +
+    'border border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] p-4 ' +
+    'text-sm text-[var(--cxs-color-on-surface)] shadow-[var(--cxs-shadow-sm)]';
+const SIDE_CLASSES = {
+    top: 'bottom-full mb-2',
+    right: 'left-full ml-2',
+    bottom: 'top-full mt-2',
+    left: 'right-full mr-2'
+};
+const ALIGN_CLASSES$1 = {
+    top: { start: 'left-0', center: 'left-1/2 -translate-x-1/2', end: 'right-0' },
+    bottom: { start: 'left-0', center: 'left-1/2 -translate-x-1/2', end: 'right-0' },
+    left: { start: 'top-0', center: 'top-1/2 -translate-y-1/2', end: 'bottom-0' },
+    right: { start: 'top-0', center: 'top-1/2 -translate-y-1/2', end: 'bottom-0' }
+};
+class CxsHoverCardComponent {
+    static nextId = 0;
+    openDelay = 200;
+    closeDelay = 200;
+    trigger;
+    contentId = `cxs-hover-card-${CxsHoverCardComponent.nextId++}`;
+    open = false;
+    host = inject((ElementRef));
+    changeDetector = inject(ChangeDetectorRef);
+    openTimer;
+    closeTimer;
+    pointerInside = false;
+    focusInside = false;
+    suppressFocusOpen = false;
+    onMouseEnter() {
+        this.pointerInside = true;
+        this.scheduleOpen();
+    }
+    onMouseLeave() {
+        this.pointerInside = false;
+        if (!this.focusInside) {
+            this.scheduleClose();
+        }
+    }
+    onFocusIn() {
+        this.focusInside = true;
+        if (this.suppressFocusOpen) {
+            this.suppressFocusOpen = false;
+            return;
+        }
+        this.cancelOpen();
+        this.cancelClose();
+        this.setOpen(true);
+    }
+    onFocusOut(event) {
+        if (event.relatedTarget && this.host.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.focusInside = false;
+        this.suppressFocusOpen = false;
+        if (!this.pointerInside) {
+            this.scheduleClose();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.open) {
+            event.preventDefault();
+            this.cancelOpen();
+            this.cancelClose();
+            this.setOpen(false);
+            const trigger = this.trigger?.element.nativeElement;
+            if (trigger && !trigger.contains(event.target)) {
+                this.suppressFocusOpen = true;
+                trigger.focus();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.cancelOpen();
+        this.cancelClose();
+    }
+    scheduleOpen() {
+        this.cancelClose();
+        if (this.open || this.openTimer) {
+            return;
+        }
+        this.openTimer = setTimeout(() => {
+            this.openTimer = undefined;
+            this.setOpen(true);
+        }, Math.max(0, this.openDelay));
+    }
+    scheduleClose() {
+        this.cancelOpen();
+        if (!this.open || this.closeTimer) {
+            return;
+        }
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = undefined;
+            this.setOpen(false);
+        }, Math.max(0, this.closeDelay));
+    }
+    cancelOpen() {
+        clearTimeout(this.openTimer);
+        this.openTimer = undefined;
+    }
+    cancelClose() {
+        clearTimeout(this.closeTimer);
+        this.closeTimer = undefined;
+    }
+    setOpen(open) {
+        this.open = open;
+        this.changeDetector.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsHoverCardComponent, isStandalone: true, selector: "cxs-hover-card", inputs: { openDelay: "openDelay", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut($event)", "keydown": "onKeydown($event)" }, classAttribute: "relative inline-flex" }, queries: [{ propertyName: "trigger", first: true, predicate: i0.forwardRef(() => CxsHoverCardTriggerDirective), descendants: true }], ngImport: i0, template: "<ng-content select=\"[cxsHoverCardTrigger]\"></ng-content>\n<ng-content select=\"[cxsHoverCardContent]\"></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-hover-card', standalone: true, host: { class: 'relative inline-flex' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[cxsHoverCardTrigger]\"></ng-content>\n<ng-content select=\"[cxsHoverCardContent]\"></ng-content>\n" }]
+        }], propDecorators: { openDelay: [{
+                type: Input
+            }], closeDelay: [{
+                type: Input
+            }], trigger: [{
+                type: ContentChild,
+                args: [forwardRef(() => CxsHoverCardTriggerDirective)]
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+class CxsHoverCardTriggerDirective {
+    card = inject(CxsHoverCardComponent);
+    element = inject((ElementRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CxsHoverCardTriggerDirective, isStandalone: true, selector: "[cxsHoverCardTrigger]", host: { properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "card.open", "attr.aria-controls": "card.contentId" }, classAttribute: "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cxsHoverCardTrigger]',
+                    standalone: true,
+                    host: {
+                        class: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+                            'focus-visible:outline-[var(--cxs-color-focus)]',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'card.open',
+                        '[attr.aria-controls]': 'card.contentId'
+                    }
+                }]
+        }] });
+class CxsHoverCardContentDirective {
+    side = 'bottom';
+    align = 'center';
+    ariaLabel = 'Preview';
+    card = inject(CxsHoverCardComponent);
+    get contentClass() {
+        return [
+            CONTENT_BASE_CLASSES,
+            SIDE_CLASSES[this.side],
+            ALIGN_CLASSES$1[this.side][this.align],
+            this.card.open ? '' : 'hidden'
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CxsHoverCardContentDirective, isStandalone: true, selector: "[cxsHoverCardContent]", inputs: { side: "side", align: "align", ariaLabel: "ariaLabel" }, host: { properties: { "class": "contentClass", "attr.id": "card.contentId", "attr.role": "\"dialog\"", "attr.aria-label": "ariaLabel", "attr.aria-hidden": "card.open ? null : \"true\"", "attr.hidden": "card.open ? null : \"\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cxsHoverCardContent]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'contentClass',
+                        '[attr.id]': 'card.contentId',
+                        '[attr.role]': '"dialog"',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[attr.aria-hidden]': 'card.open ? null : "true"',
+                        '[attr.hidden]': 'card.open ? null : ""'
+                    }
+                }]
+        }], propDecorators: { side: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
 const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
@@ -2665,6 +2868,7 @@ const ERROR_SIZE_CLASSES = {
 const INVALID_CLASSES$3 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
     'focus-visible:outline-[var(--cxs-color-danger)]';
 class CxsInputComponent {
+    changeDetector = inject(ChangeDetectorRef);
     static nextId = 0;
     value = '';
     type = 'text';
@@ -2747,6 +2951,7 @@ class CxsInputComponent {
     }
     writeValue(value) {
         this.value = value ?? '';
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2756,6 +2961,7 @@ class CxsInputComponent {
     }
     setDisabledState(isDisabled) {
         this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
     }
     onInput(event) {
         const target = event.target;
@@ -3008,6 +3214,7 @@ const INVALID_CLASSES$2 = 'border-[var(--cxs-color-danger)] focus-within:border-
     'focus-within:outline-[var(--cxs-color-danger)]';
 class CxsMultiSelectComponent {
     elementRef;
+    changeDetector = inject(ChangeDetectorRef);
     static nextId = 0;
     options = [];
     value = [];
@@ -3124,6 +3331,7 @@ class CxsMultiSelectComponent {
     }
     writeValue(value) {
         this.value = value ? [...value] : [];
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3133,6 +3341,7 @@ class CxsMultiSelectComponent {
     }
     setDisabledState(isDisabled) {
         this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
     }
     focusInput() {
         if (this.isDisabled || this.readonly) {
@@ -3554,6 +3763,7 @@ const DOT_SIZE_CLASSES = {
 const INVALID_CLASSES$1 = 'border-[var(--cxs-color-danger)] peer-checked:border-[var(--cxs-color-danger)] ' +
     'after:bg-[var(--cxs-color-danger)]';
 class CxsRadioComponent {
+    changeDetector = inject(ChangeDetectorRef);
     value = '';
     name;
     variant = 'primary';
@@ -3604,6 +3814,7 @@ class CxsRadioComponent {
     }
     writeValue(value) {
         this.selectedValue = value ?? null;
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3613,6 +3824,7 @@ class CxsRadioComponent {
     }
     setDisabledState(isDisabled) {
         this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
     }
     onRadioChange(event) {
         const target = event.target;
@@ -3805,6 +4017,7 @@ const LABEL_SIZE_CLASSES$1 = {
 const INVALID_CLASSES = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
     'focus-visible:outline-[var(--cxs-color-danger)]';
 class CxsSelectComponent {
+    changeDetector = inject(ChangeDetectorRef);
     static nextId = 0;
     value = '';
     variant = 'outline';
@@ -3875,6 +4088,7 @@ class CxsSelectComponent {
     }
     writeValue(value) {
         this.value = value ?? '';
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3884,6 +4098,7 @@ class CxsSelectComponent {
     }
     setDisabledState(isDisabled) {
         this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
     }
     onSelectChange(event) {
         const target = event.target;
@@ -4044,6 +4259,7 @@ const INPUT_VARIANT_CLASSES = {
     danger: 'cxs-slider--danger'
 };
 class CxsSliderComponent {
+    changeDetector = inject(ChangeDetectorRef);
     static nextId = 0;
     value = 0;
     min = 0;
@@ -4140,6 +4356,7 @@ class CxsSliderComponent {
     }
     writeValue(value) {
         this.value = value ?? this.normalizedMin;
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -4149,6 +4366,7 @@ class CxsSliderComponent {
     }
     setDisabledState(isDisabled) {
         this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
     }
     onInput(event) {
         const target = event.target;
@@ -4982,5 +5200,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsHabitGridComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioChipGroupComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
+export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsHabitGridComponent, CxsHoverCardComponent, CxsHoverCardContentDirective, CxsHoverCardTriggerDirective, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioChipGroupComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
 //# sourceMappingURL=cerxos-ui.mjs.map