cerxos-ui 0.0.6 → 0.0.7

package/fesm2022/cerxos-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ViewChild, HostListener, ElementRef, ViewChildren, ContentChild } from '@angular/core';
+import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ContentChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule, NgIf } from '@angular/common';
@@ -21,6 +21,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   ` }]
         }] });
 
+const TRIGGER_BASE_CLASSES = 'inline-flex items-center justify-center rounded-[var(--cxs-radius-md)] p-1.5 ' +
+    'text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
+    'hover:bg-[var(--cxs-color-surface-hover)] hover:text-[var(--cxs-color-on-surface)] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const TRIGGER_DISABLED_CLASSES = 'pointer-events-none opacity-60';
+const MENU_BASE_CLASSES = 'absolute z-40 mt-2 min-w-[10rem] rounded-[var(--cxs-radius-md)] ' +
+    'border border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] py-1 ' +
+    'shadow-[var(--cxs-shadow-sm)]';
+const MENU_ALIGN_CLASSES = {
+    start: 'left-0 origin-top-left',
+    end: 'right-0 origin-top-right'
+};
+const ITEM_BASE_CLASSES$1 = 'flex w-full items-center gap-2 rounded-[var(--cxs-radius-sm)] px-3 py-2 text-left text-sm ' +
+    'transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const ITEM_DEFAULT_CLASSES = 'text-[var(--cxs-color-on-surface)] hover:bg-[var(--cxs-color-surface-hover)]';
+const ITEM_DANGER_CLASSES = 'text-[var(--cxs-color-danger)] hover:bg-[var(--cxs-color-surface-hover)]';
+const ITEM_DISABLED_CLASSES$1 = 'pointer-events-none opacity-60';
+const EMPTY_STATE_CLASSES$1 = 'block px-3 py-2 text-sm text-[var(--cxs-color-on-surface-muted)]';
+class CxsActionMenuComponent {
+    elementRef;
+    static nextId = 0;
+    items = [];
+    align = 'end';
+    ariaLabel = 'Open actions menu';
+    menuLabel = 'Actions';
+    disabled = false;
+    itemSelected = new EventEmitter();
+    trigger;
+    menuItems;
+    menuId = `cxs-action-menu-${CxsActionMenuComponent.nextId++}`;
+    isOpen = false;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    get triggerClass() {
+        return [TRIGGER_BASE_CLASSES, this.disabled ? TRIGGER_DISABLED_CLASSES : ''].filter(Boolean).join(' ');
+    }
+    get menuClass() {
+        return [MENU_BASE_CLASSES, MENU_ALIGN_CLASSES[this.align]].join(' ');
+    }
+    get emptyStateClass() {
+        return EMPTY_STATE_CLASSES$1;
+    }
+    isItemDisabled(item) {
+        return this.disabled || !!item.disabled;
+    }
+    getItemClass(item) {
+        return [
+            ITEM_BASE_CLASSES$1,
+            item.tone === 'danger' ? ITEM_DANGER_CLASSES : ITEM_DEFAULT_CLASSES,
+            this.isItemDisabled(item) ? ITEM_DISABLED_CLASSES$1 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.disabled) {
+            return;
+        }
+        this.isOpen = true;
+        this.focusFirstItem();
+    }
+    close() {
+        this.isOpen = false;
+    }
+    onTriggerKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    onMenuKeydown(event) {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            this.focusTrigger();
+            return;
+        }
+        const items = this.getFocusableItems();
+        if (!items.length) {
+            return;
+        }
+        const currentIndex = items.findIndex((item) => item === document.activeElement);
+        let nextIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowDown':
+                nextIndex = currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;
+                break;
+            case 'ArrowUp':
+                nextIndex = currentIndex >= 0 ? (currentIndex - 1 + items.length) % items.length : items.length - 1;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = items.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        items[nextIndex]?.focus();
+    }
+    onItemClick(item) {
+        if (this.isItemDisabled(item)) {
+            return;
+        }
+        this.itemSelected.emit(item);
+        this.close();
+        this.focusTrigger();
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.elementRef.nativeElement.contains(target)) {
+            this.close();
+        }
+    }
+    focusFirstItem() {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        setTimeout(() => {
+            const items = this.getFocusableItems();
+            items[0]?.focus();
+        }, 0);
+    }
+    focusTrigger() {
+        this.trigger?.nativeElement.focus();
+    }
+    getFocusableItems() {
+        return (this.menuItems?.toArray() ?? [])
+            .map((item) => item.nativeElement)
+            .filter((item) => !item.hasAttribute('disabled') && !item.hasAttribute('data-disabled'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsActionMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsActionMenuComponent, isStandalone: true, selector: "cxs-action-menu", inputs: { items: "items", align: "align", ariaLabel: "ariaLabel", menuLabel: "menuLabel", disabled: "disabled" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["menuItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsActionMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-action-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], menuLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { read: ElementRef }]
+            }], menuItems: [{
+                type: ViewChildren,
+                args: ['menuItem', { read: ElementRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 const BASE_CLASSES$a = 'relative flex w-full gap-3 rounded-[var(--cxs-radius-md)] border border-l-4 px-4 py-3 text-sm ' +
     'text-[var(--cxs-color-on-surface)]';
 const VARIANT_CLASSES$8 = {
@@ -3562,5 +3749,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, 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 { 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 };
 //# sourceMappingURL=cerxos-ui.mjs.map