cerxos-ui 0.0.8 → 0.0.9

package/fesm2022/cerxos-ui.mjs

@@ -27,9 +27,11 @@ const TRIGGER_BASE_CLASSES = 'inline-flex items-center justify-center rounded-[v
     '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)] ' +
+const MENU_BASE_CLASSES = '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_POSITION_CLASSES = 'absolute z-40 mt-2';
+const MENU_FLOATING_CLASSES = 'fixed z-50';
 const MENU_ALIGN_CLASSES = {
     start: 'left-0 origin-top-left',
     end: 'right-0 origin-top-right'
@@ -49,11 +51,14 @@ class CxsActionMenuComponent {
     ariaLabel = 'Open actions menu';
     menuLabel = 'Actions';
     disabled = false;
+    floating = false;
     itemSelected = new EventEmitter();
     trigger;
+    menu;
     menuItems;
     menuId = `cxs-action-menu-${CxsActionMenuComponent.nextId++}`;
     isOpen = false;
+    menuPosition = null;
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
@@ -61,7 +66,13 @@ class CxsActionMenuComponent {
         return [TRIGGER_BASE_CLASSES, this.disabled ? TRIGGER_DISABLED_CLASSES : ''].filter(Boolean).join(' ');
     }
     get menuClass() {
-        return [MENU_BASE_CLASSES, MENU_ALIGN_CLASSES[this.align]].join(' ');
+        return [
+            MENU_BASE_CLASSES,
+            this.floating ? MENU_FLOATING_CLASSES : MENU_POSITION_CLASSES,
+            !this.floating ? MENU_ALIGN_CLASSES[this.align] : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
     }
     get emptyStateClass() {
         return EMPTY_STATE_CLASSES$1;
@@ -91,10 +102,12 @@ class CxsActionMenuComponent {
             return;
         }
         this.isOpen = true;
+        this.updateMenuPosition();
         this.focusFirstItem();
     }
     close() {
         this.isOpen = false;
+        this.menuPosition = null;
     }
     onTriggerKeydown(event) {
         if (this.disabled) {
@@ -162,6 +175,12 @@ class CxsActionMenuComponent {
             this.close();
         }
     }
+    onWindowResize() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.updateMenuPosition();
+    }
     focusFirstItem() {
         if (typeof document === 'undefined') {
             return;
@@ -174,17 +193,57 @@ class CxsActionMenuComponent {
     focusTrigger() {
         this.trigger?.nativeElement.focus();
     }
+    updateMenuPosition() {
+        if (!this.floating) {
+            return;
+        }
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const trigger = this.trigger?.nativeElement;
+        if (!trigger) {
+            return;
+        }
+        const rect = trigger.getBoundingClientRect();
+        const offset = 8;
+        this.menuPosition = {
+            top: rect.bottom + offset,
+            left: rect.left
+        };
+        setTimeout(() => {
+            const menuEl = this.menu?.nativeElement;
+            const menuRect = menuEl?.getBoundingClientRect();
+            if (!menuRect) {
+                return;
+            }
+            let top = rect.bottom + offset;
+            let left = this.align === 'end' ? rect.right - menuRect.width : rect.left;
+            if (top + menuRect.height > window.innerHeight) {
+                top = rect.top - menuRect.height - offset;
+            }
+            if (top < offset) {
+                top = offset;
+            }
+            if (left + menuRect.width > window.innerWidth - offset) {
+                left = Math.max(offset, window.innerWidth - menuRect.width - offset);
+            }
+            if (left < offset) {
+                left = offset;
+            }
+            this.menuPosition = { top, left };
+        }, 0);
+    }
     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 });
+    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", floating: "floating" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menu", first: true, predicate: ["menu"], 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      #menu\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      [style.top.px]=\"menuPosition?.top\"\n      [style.left.px]=\"menuPosition?.left\"\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" }]
+            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      #menu\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      [style.top.px]=\"menuPosition?.top\"\n      [style.left.px]=\"menuPosition?.left\"\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: [{
@@ -195,17 +254,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], floating: [{
+                type: Input
             }], itemSelected: [{
                 type: Output
             }], trigger: [{
                 type: ViewChild,
                 args: ['trigger', { read: ElementRef }]
+            }], menu: [{
+                type: ViewChild,
+                args: ['menu', { read: ElementRef }]
             }], menuItems: [{
                 type: ViewChildren,
                 args: ['menuItem', { read: ElementRef }]
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 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 ' +