otimus-library 0.4.82 → 0.4.83

package/fesm2022/otimus-library.mjs

@@ -1,14 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding, input } from '@angular/core';
+import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding, input, inject, PLATFORM_ID, RendererFactory2, signal, ElementRef, ViewContainerRef, computed, viewChild, booleanAttribute } from '@angular/core';
 import * as i2$1 from '@angular/cdk/menu';
 import { CdkMenuModule } from '@angular/cdk/menu';
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule, DatePipe, isPlatformBrowser } from '@angular/common';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import * as i3 from '@angular/cdk/overlay';
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { filter } from 'rxjs';
 import * as i2$2 from '@angular/platform-browser';
 import * as i2$3 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -1699,6 +1703,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
+class OcBreadcrumbComponent {
+    constructor() {
+        this.ocItems = [];
+        this.ocCrumbClick = new EventEmitter();
+    }
+    isLast(index) {
+        return index === this.ocItems.length - 1;
+    }
+    onCrumbClick(event, item, last) {
+        if (last) {
+            event.preventDefault();
+            return;
+        }
+        this.ocCrumbClick.emit(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcBreadcrumbComponent, isStandalone: true, selector: "oc-breadcrumb", inputs: { ocItems: "ocItems" }, outputs: { ocCrumbClick: "ocCrumbClick" }, ngImport: i0, template: "<nav\n  class=\"oc-breadcrumb\"\n  aria-label=\"breadcrumb\"\n>\n  <ol class=\"oc-breadcrumb-list\">\n    @for (item of ocItems; track $index; let i = $index) {\n      @let last = isLast(i);\n      <li\n        class=\"oc-breadcrumb-item\"\n        [class.is-last]=\"last\"\n      >\n        @if (last || !item.route) {\n          <span\n            class=\"oc-breadcrumb-crumb\"\n            [class.is-last]=\"last\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n          >\n            @if (item.icon) {\n              <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n            }\n            <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n          </span>\n        } @else {\n          <a\n            class=\"oc-breadcrumb-crumb\"\n            [routerLink]=\"item.route\"\n            [queryParams]=\"item.queryParams\"\n            (click)=\"onCrumbClick($event, item, last)\"\n          >\n            @if (item.icon) {\n              <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n            }\n            <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n          </a>\n        }\n\n        @if (!last) {\n          <span\n            class=\"material-symbols-outlined oc-breadcrumb-separator\"\n            aria-hidden=\"true\"\n            >keyboard_arrow_right</span\n          >\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb{cursor:pointer}a.oc-breadcrumb-crumb:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-breadcrumb', standalone: true, imports: [CommonModule, RouterModule], template: "<nav\n  class=\"oc-breadcrumb\"\n  aria-label=\"breadcrumb\"\n>\n  <ol class=\"oc-breadcrumb-list\">\n    @for (item of ocItems; track $index; let i = $index) {\n      @let last = isLast(i);\n      <li\n        class=\"oc-breadcrumb-item\"\n        [class.is-last]=\"last\"\n      >\n        @if (last || !item.route) {\n          <span\n            class=\"oc-breadcrumb-crumb\"\n            [class.is-last]=\"last\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n          >\n            @if (item.icon) {\n              <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n            }\n            <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n          </span>\n        } @else {\n          <a\n            class=\"oc-breadcrumb-crumb\"\n            [routerLink]=\"item.route\"\n            [queryParams]=\"item.queryParams\"\n            (click)=\"onCrumbClick($event, item, last)\"\n          >\n            @if (item.icon) {\n              <span class=\"material-symbols-outlined oc-breadcrumb-icon\">{{ item.icon }}</span>\n            }\n            <span class=\"oc-breadcrumb-label\">{{ item.label }}</span>\n          </a>\n        }\n\n        @if (!last) {\n          <span\n            class=\"material-symbols-outlined oc-breadcrumb-separator\"\n            aria-hidden=\"true\"\n            >keyboard_arrow_right</span\n          >\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}.oc-breadcrumb{display:block;width:100%}.oc-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.oc-breadcrumb-item{display:inline-flex;align-items:center;gap:2px;min-width:0}.oc-breadcrumb-crumb{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;color:#8f9596;font-size:.875rem;font-weight:400;line-height:1.2;text-decoration:none;transition:background-color .18s ease,color .18s ease}a.oc-breadcrumb-crumb{cursor:pointer}a.oc-breadcrumb-crumb:hover{background-color:#f7f7f7;color:#353535}a.oc-breadcrumb-crumb:focus-visible{outline:2px solid #8850be;outline-offset:2px}.oc-breadcrumb-crumb.is-last{color:#353535;font-weight:500;cursor:default;pointer-events:none}.oc-breadcrumb-icon{font-size:1rem;line-height:1;flex-shrink:0}.oc-breadcrumb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oc-breadcrumb-separator{font-size:1.125rem;line-height:1;color:#d1d5db;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"] }]
+        }], propDecorators: { ocItems: [{
+                type: Input
+            }], ocCrumbClick: [{
+                type: Output
+            }] } });
+
+/**
+ * @deprecated
+ * `OcMenuComponent` está depreciado e não deve ser usado em código novo.
+ *
+ * Motivo: o componente não implementa o principal comportamento esperado de um
+ * "menu" (abertura por contexto / botão direito, navegação por teclado
+ * compatível com WAI-ARIA, ancoragem via CDK overlay, gestão de foco).
+ *
+ * Substituto atual: **use `OcDropdownImports`** (`oc-dropdown` + `oc-dropdown-menu-content` +
+ * `oc-dropdown-menu-item`) para menus acionados por botão/hover. Veja
+ * `Components/OcDropdown` no Storybook.
+ *
+ * Um novo `oc-menu` será introduzido no futuro com suporte real a context menu, com estilo e usabilidade aprimorada.
+ * Quando chegar, este componente sera removido
+ *
+ * Os usos atuais continuam funcionando — este aviso serve apenas para guiar
+ * novos desenvolvimentos.
+ */
 class OcMenuComponent {
     constructor(renderer) {
         this.renderer = renderer;
@@ -1746,7 +1795,7 @@ class OcMenuComponent {
     }
     changeCheckbox(name, checked) {
         let foundItem;
-        this.ocMenu.forEach(item => {
+        this.ocMenu.forEach((item) => {
             if (item.name === name && typeof checked === 'boolean') {
                 item.checked = checked;
                 foundItem = item;
@@ -2289,6 +2338,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Output
             }] } });
 
+class OcDividerComponent {
+    constructor() {
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: OcDividerComponent, isStandalone: true, selector: "oc-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true, styles: ["oc-divider{display:block;background-color:#d1d5db}oc-divider[data-orientation=horizontal]{width:100%;height:1px;margin:4px 0}oc-divider[data-orientation=vertical]{display:inline-block;width:1px;height:100%;margin:0 4px;align-self:stretch}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-divider', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        role: 'separator',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.data-orientation]': 'orientation()',
+                    }, styles: ["oc-divider{display:block;background-color:#d1d5db}oc-divider[data-orientation=horizontal]{width:100%;height:1px;margin:4px 0}oc-divider[data-orientation=vertical]{display:inline-block;width:1px;height:100%;margin:0 4px;align-self:stretch}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
 class OcDrawerComponent {
     constructor(elRef, styleThemeService, cdr) {
         this.elRef = elRef;
@@ -2379,6 +2444,393 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
+class OcDropdownService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.overlayPositionBuilder = inject(OverlayPositionBuilder);
+        this.platformId = inject(PLATFORM_ID);
+        this.rendererFactory = inject(RendererFactory2);
+        this.focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+        this.unlisten = () => { };
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    toggle(triggerElement, template, viewContainerRef) {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open(triggerElement, template, viewContainerRef);
+        }
+    }
+    open(triggerElement, template, viewContainerRef) {
+        if (this.isOpen()) {
+            this.close();
+        }
+        this.triggerElement = triggerElement;
+        this.createOverlay(triggerElement);
+        if (!this.overlayRef) {
+            return;
+        }
+        this.portal = new TemplatePortal(template, viewContainerRef);
+        this.overlayRef.attach(this.portal);
+        setTimeout(() => {
+            this.setupKeyboardNavigation();
+        }, 0);
+        this.outsideClickSubscription = this.overlayRef
+            .outsidePointerEvents()
+            .pipe(filter(event => !triggerElement.nativeElement.contains(event.target)))
+            .subscribe(() => {
+            this.close();
+        });
+        this.isOpen.set(true);
+    }
+    getTriggerElement() {
+        return this.triggerElement;
+    }
+    close() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+        this.focusedIndex.set(-1);
+        this.unlisten();
+        this.destroyOverlay();
+        this.isOpen.set(false);
+        this.triggerElement = undefined;
+    }
+    closeAndReturnTrigger() {
+        const trigger = this.triggerElement;
+        this.close();
+        return trigger;
+    }
+    createOverlay(triggerElement) {
+        if (this.overlayRef) {
+            this.destroyOverlay();
+        }
+        const positionStrategy = this.overlayPositionBuilder
+            .flexibleConnectedTo(triggerElement)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 4,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -4,
+            },
+        ])
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            minWidth: 200,
+            maxHeight: 400,
+        });
+    }
+    destroyOverlay() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+        this.outsideClickSubscription?.unsubscribe();
+    }
+    setupKeyboardNavigation() {
+        if (!this.overlayRef?.hasAttached() || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const dropdownElement = this.overlayRef.overlayElement.querySelector('[role="menu"]');
+        if (!dropdownElement) {
+            return;
+        }
+        this.unlisten = this.renderer.listen(dropdownElement, 'keydown', (event) => {
+            const items = this.getDropdownItems();
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.navigateItems(1, items);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.navigateItems(-1, items);
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.selectFocusedItem(items);
+                    break;
+                case 'Escape': {
+                    event.preventDefault();
+                    const triggerToFocus = this.closeAndReturnTrigger();
+                    triggerToFocus?.nativeElement.focus();
+                    break;
+                }
+                case 'Home':
+                    event.preventDefault();
+                    this.focusItemAtIndex(items, 0);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusItemAtIndex(items, items.length - 1);
+                    break;
+            }
+        });
+        dropdownElement.focus();
+    }
+    getDropdownItems() {
+        if (!this.overlayRef?.hasAttached()) {
+            return [];
+        }
+        const dropdownElement = this.overlayRef.overlayElement;
+        return Array.from(dropdownElement.querySelectorAll('oc-dropdown-menu-item, [oc-dropdown-menu-item]')).filter(item => item.dataset['disabled'] === undefined);
+    }
+    navigateItems(direction, items) {
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = this.focusedIndex();
+        let nextIndex;
+        if (currentIndex === -1) {
+            nextIndex = direction > 0 ? 0 : items.length - 1;
+        }
+        else {
+            nextIndex = currentIndex + direction;
+            if (nextIndex < 0) {
+                nextIndex = items.length - 1;
+            }
+            else if (nextIndex >= items.length) {
+                nextIndex = 0;
+            }
+        }
+        this.focusItemAtIndex(items, nextIndex);
+    }
+    focusItemAtIndex(items, index) {
+        if (index >= 0 && index < items.length) {
+            this.focusedIndex.set(index);
+            this.updateItemFocus(items, index);
+        }
+    }
+    selectFocusedItem(items) {
+        const currentIndex = this.focusedIndex();
+        if (currentIndex >= 0 && currentIndex < items.length) {
+            const item = items[currentIndex];
+            item.click();
+        }
+    }
+    updateItemFocus(items, focusedIndex) {
+        for (let index = 0; index < items.length; index++) {
+            const item = items[index];
+            if (index === focusedIndex) {
+                item.focus();
+                item.dataset['highlighted'] = '';
+            }
+            else {
+                delete item.dataset['highlighted'];
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class OcDropdownDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.dropdownService = inject(OcDropdownService);
+        this.isThisDropdownOpen = computed(() => this.dropdownService.isOpen() && this.dropdownService.getTriggerElement() === this.elementRef, ...(ngDevMode ? [{ debugName: "isThisDropdownOpen" }] : []));
+        this.ocDropdownMenu = input(...(ngDevMode ? [undefined, { debugName: "ocDropdownMenu" }] : []));
+        this.ocTrigger = input('click', ...(ngDevMode ? [{ debugName: "ocTrigger" }] : []));
+        this.ocDisabled = input(false, ...(ngDevMode ? [{ debugName: "ocDisabled" }] : []));
+    }
+    ngOnInit() {
+        const element = this.elementRef.nativeElement;
+        if (!element.hasAttribute('aria-label') && !element.hasAttribute('aria-labelledby')) {
+            const label = element.textContent?.trim();
+            element.setAttribute('aria-label', label?.length ? label : 'Open menu');
+        }
+    }
+    onClick(event) {
+        if (this.ocTrigger() !== 'click') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggleDropdown();
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.toggleDropdown();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.openDropdown();
+        }
+    }
+    onHoverToggle(event) {
+        if (this.ocTrigger() !== 'hover' || this.ocDisabled()) {
+            return;
+        }
+        if (event.type === 'mouseenter') {
+            this.openDropdown();
+        }
+        else if (event.type === 'mouseleave') {
+            this.closeDropdown();
+        }
+    }
+    toggleDropdown() {
+        if (this.ocDisabled()) {
+            return;
+        }
+        const menuContent = this.ocDropdownMenu();
+        if (menuContent) {
+            this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef);
+        }
+    }
+    openDropdown() {
+        if (this.ocDisabled()) {
+            return;
+        }
+        const menuContent = this.ocDropdownMenu();
+        if (menuContent && !this.dropdownService.isOpen()) {
+            this.dropdownService.toggle(this.elementRef, menuContent.contentTemplate(), this.viewContainerRef);
+        }
+    }
+    closeDropdown() {
+        this.dropdownService.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: OcDropdownDirective, isStandalone: true, selector: "[oc-dropdown], [ocDropdown]", inputs: { ocDropdownMenu: { classPropertyName: "ocDropdownMenu", publicName: "ocDropdownMenu", isSignal: true, isRequired: false, transformFunction: null }, ocTrigger: { classPropertyName: "ocTrigger", publicName: "ocTrigger", isSignal: true, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onHoverToggle($event)", "mouseleave": "onHoverToggle($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "0", "attr.role": "\"button\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isThisDropdownOpen()", "attr.aria-disabled": "ocDisabled()" } }, exportAs: ["ocDropdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[oc-dropdown], [ocDropdown]',
+                    host: {
+                        '[attr.tabindex]': '0',
+                        '[attr.role]': '"button"',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'isThisDropdownOpen()',
+                        '[attr.aria-disabled]': 'ocDisabled()',
+                        '(click)': 'onClick($event)',
+                        '(mouseenter)': 'onHoverToggle($event)',
+                        '(mouseleave)': 'onHoverToggle($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    exportAs: 'ocDropdown',
+                }]
+        }], propDecorators: { ocDropdownMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDropdownMenu", required: false }] }], ocTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocTrigger", required: false }] }], ocDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDisabled", required: false }] }] } });
+
+class OcDropdownMenuContentComponent {
+    constructor() {
+        this.contentTemplate = viewChild.required('contentTemplate');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownMenuContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: OcDropdownMenuContentComponent, isStandalone: true, selector: "oc-dropdown-menu-content", host: { properties: { "style.display": "\"none\"" } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, isSignal: true }], exportAs: ["ocDropdownMenuContent"], ngImport: i0, template: `
+    <ng-template #contentTemplate>
+      <div
+        class="oc-dropdown-menu"
+        role="menu"
+        tabindex="-1"
+        aria-orientation="vertical"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [".oc-dropdown-menu{box-sizing:border-box;min-width:200px;max-height:400px;padding:4px;overflow-y:auto;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px #1e08321f;outline:none}.oc-dropdown-menu:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownMenuContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-dropdown-menu-content', template: `
+    <ng-template #contentTemplate>
+      <div
+        class="oc-dropdown-menu"
+        role="menu"
+        tabindex="-1"
+        aria-orientation="vertical"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[style.display]': '"none"',
+                    }, exportAs: 'ocDropdownMenuContent', styles: [".oc-dropdown-menu{box-sizing:border-box;min-width:200px;max-height:400px;padding:4px;overflow-y:auto;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px #1e08321f;outline:none}.oc-dropdown-menu:focus{outline:none}\n"] }]
+        }], propDecorators: { contentTemplate: [{ type: i0.ViewChild, args: ['contentTemplate', { isSignal: true }] }] } });
+
+class OcDropdownMenuItemComponent {
+    constructor() {
+        this.dropdownService = inject(OcDropdownService);
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.inset = input(false, ...(ngDevMode ? [{ debugName: "inset", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    }
+    onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        setTimeout(() => {
+            this.dropdownService.close();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: OcDropdownMenuItemComponent, isStandalone: true, selector: "oc-dropdown-menu-item, [oc-dropdown-menu-item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-disabled": "disabled() || null", "attr.data-variant": "variant()", "attr.data-inset": "inset() || null", "attr.aria-disabled": "disabled()" } }, exportAs: ["ocDropdownMenuItem"], ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: ["oc-dropdown-menu-item,[oc-dropdown-menu-item]{display:flex;align-items:center;gap:8px;padding:6px 8px;color:#353535;font-size:.875rem;line-height:1.2;background-color:transparent;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .15s ease,color .15s ease}oc-dropdown-menu-item:hover,oc-dropdown-menu-item:focus-visible,oc-dropdown-menu-item[data-highlighted],[oc-dropdown-menu-item]:hover,[oc-dropdown-menu-item]:focus-visible,[oc-dropdown-menu-item][data-highlighted]{background-color:#f8f9ff;color:#5505a2}oc-dropdown-menu-item[data-inset],[oc-dropdown-menu-item][data-inset]{padding-left:32px}oc-dropdown-menu-item[data-variant=destructive],[oc-dropdown-menu-item][data-variant=destructive]{color:#ed3a3a}oc-dropdown-menu-item[data-variant=destructive]:hover,oc-dropdown-menu-item[data-variant=destructive]:focus-visible,oc-dropdown-menu-item[data-variant=destructive][data-highlighted],[oc-dropdown-menu-item][data-variant=destructive]:hover,[oc-dropdown-menu-item][data-variant=destructive]:focus-visible,[oc-dropdown-menu-item][data-variant=destructive][data-highlighted]{background-color:#ed3a3a14;color:#ed3a3a}oc-dropdown-menu-item[data-disabled],oc-dropdown-menu-item[aria-disabled=true],[oc-dropdown-menu-item][data-disabled],[oc-dropdown-menu-item][aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-dropdown-menu-item, [oc-dropdown-menu-item]', template: `
+    <ng-content />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[attr.data-disabled]': 'disabled() || null',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-inset]': 'inset() || null',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '(click)': 'onClick($event)',
+                        role: 'menuitem',
+                        tabindex: '-1',
+                    }, exportAs: 'ocDropdownMenuItem', styles: ["oc-dropdown-menu-item,[oc-dropdown-menu-item]{display:flex;align-items:center;gap:8px;padding:6px 8px;color:#353535;font-size:.875rem;line-height:1.2;background-color:transparent;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .15s ease,color .15s ease}oc-dropdown-menu-item:hover,oc-dropdown-menu-item:focus-visible,oc-dropdown-menu-item[data-highlighted],[oc-dropdown-menu-item]:hover,[oc-dropdown-menu-item]:focus-visible,[oc-dropdown-menu-item][data-highlighted]{background-color:#f8f9ff;color:#5505a2}oc-dropdown-menu-item[data-inset],[oc-dropdown-menu-item][data-inset]{padding-left:32px}oc-dropdown-menu-item[data-variant=destructive],[oc-dropdown-menu-item][data-variant=destructive]{color:#ed3a3a}oc-dropdown-menu-item[data-variant=destructive]:hover,oc-dropdown-menu-item[data-variant=destructive]:focus-visible,oc-dropdown-menu-item[data-variant=destructive][data-highlighted],[oc-dropdown-menu-item][data-variant=destructive]:hover,[oc-dropdown-menu-item][data-variant=destructive]:focus-visible,[oc-dropdown-menu-item][data-variant=destructive][data-highlighted]{background-color:#ed3a3a14;color:#ed3a3a}oc-dropdown-menu-item[data-disabled],oc-dropdown-menu-item[aria-disabled=true],[oc-dropdown-menu-item][data-disabled],[oc-dropdown-menu-item][aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class OcDropdownMenuLabelComponent {
+    constructor() {
+        this.inset = input(false, ...(ngDevMode ? [{ debugName: "inset", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownMenuLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: OcDropdownMenuLabelComponent, isStandalone: true, selector: "oc-dropdown-menu-label", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset() || null" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: ["oc-dropdown-menu-label{display:block;padding:6px 8px 4px;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8f9596}oc-dropdown-menu-label[data-inset]{padding-left:32px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDropdownMenuLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-dropdown-menu-label', template: `
+    <ng-content />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[attr.data-inset]': 'inset() || null',
+                    }, styles: ["oc-dropdown-menu-label{display:block;padding:6px 8px 4px;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8f9596}oc-dropdown-menu-label[data-inset]{padding-left:32px}\n"] }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
+
+const OcDropdownImports = [
+    OcDropdownDirective,
+    OcDropdownMenuContentComponent,
+    OcDropdownMenuItemComponent,
+    OcDropdownMenuLabelComponent,
+];
+
 class OcFilterComponent {
     constructor(styleThemeService) {
         this.styleThemeService = styleThemeService;
@@ -2826,6 +3278,7 @@ class OcModalComponent {
         this.elRef = elRef;
         this.styleThemeService = styleThemeService;
         this.cdr = cdr;
+        this.closeTimeout = null;
         this.ocClose = true;
         this.ocTitle = '';
         this.ocSize = 'medium';
@@ -2846,11 +3299,20 @@ class OcModalComponent {
         this.elRef.nativeElement.ownerDocument.body.classList.add('disabled-scroll');
         this.ocOnOpen.emit(this.isOpen);
     }
+    ngOnDestroy() {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+        }
+        if (this.isOpen || this.closing) {
+            this.elRef.nativeElement.ownerDocument.body.classList.remove('disabled-scroll');
+        }
+    }
     close() {
         this.closing = true;
-        setTimeout(() => {
+        this.closeTimeout = setTimeout(() => {
             this.isOpen = false;
             this.closing = false;
+            this.closeTimeout = null;
             if (this.ocOnClose) {
                 this.ocOnClose.emit(this.isOpen);
             }
@@ -4116,5 +4578,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDrawerComponent, OcDrawerFooterComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTableComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
+export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcBreadcrumbComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDividerComponent, OcDrawerComponent, OcDrawerFooterComponent, OcDropdownDirective, OcDropdownImports, OcDropdownMenuContentComponent, OcDropdownMenuItemComponent, OcDropdownMenuLabelComponent, OcDropdownService, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTableComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
 //# sourceMappingURL=otimus-library.mjs.map