otimus-library 0.3.66 → 0.3.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -147,10 +147,26 @@ class OcMenuHorizDirective {
147
147
  // Inputs you want to pass to the component
148
148
  this.ocMenu = [];
149
149
  this.ocMenuShouldCloseOnClickOut = false;
150
+ this.ocMenuOpenMode = 'manual';
151
+ this.ocMenuCanOpen = () => true;
150
152
  this.menuRef = null;
151
153
  this.ocChangeSub = null;
154
+ this.menuMouseEnterSub = null;
155
+ this.menuMouseLeaveSub = null;
156
+ }
157
+ ngOnInit() {
158
+ if (this.ocMenuOpenMode === 'hover') {
159
+ this.setupHoverListeners();
160
+ }
152
161
  }
153
162
  ngOnChanges(changes) {
163
+ // Handle open mode changes
164
+ if (changes['ocMenuOpenMode'] && !changes['ocMenuOpenMode'].firstChange) {
165
+ this.cleanupHoverListeners();
166
+ if (this.ocMenuOpenMode === 'hover') {
167
+ this.setupHoverListeners();
168
+ }
169
+ }
154
170
  // If the component already exists, propagate input changes immediately
155
171
  if (!this.menuRef)
156
172
  return;
@@ -170,6 +186,7 @@ class OcMenuHorizDirective {
170
186
  this.menuRef.changeDetectorRef.detectChanges();
171
187
  }
172
188
  ngOnDestroy() {
189
+ this.cleanupHoverListeners();
173
190
  this.destroyMenu();
174
191
  }
175
192
  /** create and attach component instance (idempotent) */
@@ -191,6 +208,15 @@ class OcMenuHorizDirective {
191
208
  // you could expose a public Observable or call a callback — adjust to your needs.
192
209
  // For demonstration we'll log:
193
210
  });
211
+ // Subscribe to menu mouse events for hover mode
212
+ if (this.ocMenuOpenMode === 'hover') {
213
+ this.menuMouseEnterSub = this.menuRef.instance.ocMouseEnter.subscribe(() => {
214
+ // Keep menu open when mouse enters menu
215
+ });
216
+ this.menuMouseLeaveSub = this.menuRef.instance.ocMouseLeave.subscribe(() => {
217
+ this.close();
218
+ });
219
+ }
194
220
  // attach to host element
195
221
  const host = this.elemRef.nativeElement;
196
222
  const menuNative = this.menuRef.location.nativeElement;
@@ -218,6 +244,14 @@ class OcMenuHorizDirective {
218
244
  this.ocChangeSub.unsubscribe();
219
245
  this.ocChangeSub = null;
220
246
  }
247
+ if (this.menuMouseEnterSub) {
248
+ this.menuMouseEnterSub.unsubscribe();
249
+ this.menuMouseEnterSub = null;
250
+ }
251
+ if (this.menuMouseLeaveSub) {
252
+ this.menuMouseLeaveSub.unsubscribe();
253
+ this.menuMouseLeaveSub = null;
254
+ }
221
255
  if (this.menuRef) {
222
256
  // remove DOM node (optional — Angular destroy will also remove it)
223
257
  try {
@@ -230,8 +264,31 @@ class OcMenuHorizDirective {
230
264
  this.menuRef = null;
231
265
  }
232
266
  }
267
+ setupHoverListeners() {
268
+ const host = this.elemRef.nativeElement;
269
+ this.mouseEnterListener = this.renderer.listen(host, 'mouseenter', () => {
270
+ if (this.ocMenuCanOpen()) {
271
+ this.open();
272
+ }
273
+ });
274
+ this.mouseLeaveListener = this.renderer.listen(host, 'mouseleave', (event) => {
275
+ // Check if moving to menu element (next sibling)
276
+ const menuElement = host.nextElementSibling;
277
+ const relatedTarget = event.relatedTarget;
278
+ if (menuElement && relatedTarget && menuElement.contains(relatedTarget)) {
279
+ return; // Don't close when moving to menu
280
+ }
281
+ this.close();
282
+ });
283
+ }
284
+ cleanupHoverListeners() {
285
+ this.mouseEnterListener?.();
286
+ this.mouseLeaveListener?.();
287
+ this.mouseEnterListener = undefined;
288
+ this.mouseLeaveListener = undefined;
289
+ }
233
290
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.EnvironmentInjector }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
234
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: OcMenuHorizDirective, isStandalone: true, selector: "[OcMenuHorizontal]", inputs: { ocMenu: "ocMenu", ocMenuMaxWidth: "ocMenuMaxWidth", ocMenuWidth: "ocMenuWidth", ocMenuShouldCloseOnClickOut: "ocMenuShouldCloseOnClickOut" }, exportAs: ["OcMenuHorizontal"], usesOnChanges: true, ngImport: i0 }); }
291
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: OcMenuHorizDirective, isStandalone: true, selector: "[OcMenuHorizontal]", inputs: { ocMenu: "ocMenu", ocMenuMaxWidth: "ocMenuMaxWidth", ocMenuWidth: "ocMenuWidth", ocMenuShouldCloseOnClickOut: "ocMenuShouldCloseOnClickOut", ocMenuOpenMode: "ocMenuOpenMode", ocMenuCanOpen: "ocMenuCanOpen" }, exportAs: ["OcMenuHorizontal"], usesOnChanges: true, ngImport: i0 }); }
235
292
  }
236
293
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizDirective, decorators: [{
237
294
  type: Directive,
@@ -248,6 +305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
248
305
  type: Input
249
306
  }], ocMenuShouldCloseOnClickOut: [{
250
307
  type: Input
308
+ }], ocMenuOpenMode: [{
309
+ type: Input
310
+ }], ocMenuCanOpen: [{
311
+ type: Input
251
312
  }] } });
252
313
 
253
314
  class OcTooltipDirective {
@@ -2217,6 +2278,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
2217
2278
  type: Input
2218
2279
  }] } });
2219
2280
 
2281
+ class OcDrawerFooterComponent {
2282
+ constructor() {
2283
+ this.ocSide = 'right';
2284
+ }
2285
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDrawerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2286
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcDrawerFooterComponent, isStandalone: true, selector: "oc-drawer-footer", inputs: { ocSide: "ocSide", ocBgColor: "ocBgColor" }, ngImport: i0, template: "<footer class=\"oc-drawer-footer\" [ngClass]=\"{\n 'left': ocSide === 'left',\n 'right': ocSide === 'right'\n}\"\n [ngStyle]=\"{\n 'background-color': ocBgColor\n }\"\n>\n <ng-content></ng-content>\n</footer>\n", styles: [".oc-drawer-footer{display:flex;align-items:center;gap:.5rem;width:100%;margin-top:auto;padding-top:1rem}.left{justify-content:flex-start}.right{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
2287
+ }
2288
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcDrawerFooterComponent, decorators: [{
2289
+ type: Component,
2290
+ args: [{ selector: 'oc-drawer-footer', imports: [CommonModule], template: "<footer class=\"oc-drawer-footer\" [ngClass]=\"{\n 'left': ocSide === 'left',\n 'right': ocSide === 'right'\n}\"\n [ngStyle]=\"{\n 'background-color': ocBgColor\n }\"\n>\n <ng-content></ng-content>\n</footer>\n", styles: [".oc-drawer-footer{display:flex;align-items:center;gap:.5rem;width:100%;margin-top:auto;padding-top:1rem}.left{justify-content:flex-start}.right{justify-content:flex-end}\n"] }]
2291
+ }], propDecorators: { ocSide: [{
2292
+ type: Input
2293
+ }], ocBgColor: [{
2294
+ type: Input
2295
+ }] } });
2296
+
2220
2297
  class OcFilterComponent {
2221
2298
  constructor(styleThemeService) {
2222
2299
  this.styleThemeService = styleThemeService;
@@ -2427,6 +2504,8 @@ class OcMenuHorizComponent {
2427
2504
  this.ocMenu = [];
2428
2505
  this.shouldCloseOnClickOut = false;
2429
2506
  this.ocChange = new EventEmitter();
2507
+ this.ocMouseEnter = new EventEmitter();
2508
+ this.ocMouseLeave = new EventEmitter();
2430
2509
  this.isMenuShown = false;
2431
2510
  this.showOverflowMenu = false;
2432
2511
  this.visibleItems = [];
@@ -2557,11 +2636,11 @@ class OcMenuHorizComponent {
2557
2636
  }
2558
2637
  }
2559
2638
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
2560
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcMenuHorizComponent, isStandalone: true, selector: "oc-menu-horiz", inputs: { ocMenu: "ocMenu", maxWidth: "maxWidth", width: "width", shouldCloseOnClickOut: "shouldCloseOnClickOut", hostElement: "hostElement" }, outputs: { ocChange: "ocChange" }, viewQueries: [{ propertyName: "menuElementInvisible", first: true, predicate: ["menuContainerInvis"], descendants: true }, { propertyName: "menuElement", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "itemsListElement", first: true, predicate: ["itemsListInvisible"], descendants: true }], ngImport: i0, template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{color:inherit;width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }] }); }
2639
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcMenuHorizComponent, isStandalone: true, selector: "oc-menu-horiz", inputs: { ocMenu: "ocMenu", maxWidth: "maxWidth", width: "width", shouldCloseOnClickOut: "shouldCloseOnClickOut", hostElement: "hostElement" }, outputs: { ocChange: "ocChange", ocMouseEnter: "ocMouseEnter", ocMouseLeave: "ocMouseLeave" }, viewQueries: [{ propertyName: "menuElementInvisible", first: true, predicate: ["menuContainerInvis"], descendants: true }, { propertyName: "menuElement", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "itemsListElement", first: true, predicate: ["itemsListInvisible"], descendants: true }], ngImport: i0, template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n (mouseenter)=\"ocMouseEnter.emit()\"\n (mouseleave)=\"ocMouseLeave.emit()\"\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{color:inherit;width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }] }); }
2561
2640
  }
2562
2641
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizComponent, decorators: [{
2563
2642
  type: Component,
2564
- args: [{ selector: 'oc-menu-horiz', standalone: true, imports: [CommonModule, CdkMenuModule, OcTooltipDirective], template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{color:inherit;width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
2643
+ args: [{ selector: 'oc-menu-horiz', standalone: true, imports: [CommonModule, CdkMenuModule, OcTooltipDirective], template: "@if (isMenuShown && ocMenu.length > 0) {\n <div\n class=\"oc-menu-horiz\"\n [style.width]=\"'fit-content'\"\n #menuContainer\n (mouseenter)=\"ocMouseEnter.emit()\"\n (mouseleave)=\"ocMouseLeave.emit()\"\n >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\n @for (option of ocMenu; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n\n @if (overflowItems.length > 0) {\n <li class=\"overflow-menu-item\">\n <button\n (click)=\"toggleOverflowMenu($event)\"\n class=\"overflow-button\"\n >\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n\n @if (showOverflowMenu) {\n <div class=\"overflow-dropdown\">\n <ul>\n @for (option of overflowItems; track $index) {\n <li\n [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n ocTooltip\n [content]=\"option.tooltip || ''\"\n >\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </button>\n } @else if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n {{ option.name }}\n </a>\n } @else {\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.icon }}\n </span>\n }\n <span\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</span\n >\n }\n </li>\n }\n </ul>\n </div>\n }\n </li>\n }\n </ul>\n </div>\n\n <!-- Invisible Element used to calculate the size of elements -->\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainerInvis\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n >\n <ul\n #itemsListInvisible\n [ngStyle]=\"{ visibility: 'hidden', 'z-index': '-1', opacity: 0 }\"\n >\n @for (option of ocMenu; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">\n {{ option.icon }}\n </span>\n }\n @if (option.callback) {\n <button>{{ option.name }}</button>\n }\n @if (option.url) {\n <a>{{ option.name }}</a>\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n </ul>\n </div>\n}\n", styles: ["*{box-sizing:border-box}.oc-menu-horiz{display:flex;flex-direction:row;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid transparent;position:absolute;z-index:10;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;max-width:100%}.oc-menu-horiz ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0;width:100%}.oc-menu-horiz ul li{text-align:left;text-decoration:none;width:auto;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;flex-shrink:0}.oc-menu-horiz ul li.measuring{visibility:hidden;position:absolute}.oc-menu-horiz ul li .checkbox-opt{min-width:1.3rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.2rem}.oc-menu-horiz ul li a,.oc-menu-horiz ul li button,.oc-menu-horiz ul li span,.oc-menu-horiz ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{color:inherit;width:1rem;padding:0;margin:0;font-size:1.1rem;pointer-events:none}.oc-menu-horiz ul li:hover{background-color:#fff}.oc-menu-horiz ul li.overflow-menu-item{position:relative;width:auto;margin-left:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-button{display:flex;align-items:center;justify-content:center;min-width:40px;width:100%;padding:.6rem .8rem}.oc-menu-horiz ul li.overflow-menu-item .overflow-button .material-symbols-outlined{width:auto}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown{position:absolute;top:calc(100% + 4px);right:0;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:8px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease;z-index:1001;min-width:150px}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul{flex-direction:column}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li{width:100%;max-height:none}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:first-child{border-radius:6px 6px 0 0}.oc-menu-horiz ul li.overflow-menu-item .overflow-dropdown ul li:last-child{border-radius:0 0 6px 6px}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
2565
2644
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { ocMenu: [{
2566
2645
  type: Input
2567
2646
  }], maxWidth: [{
@@ -2574,6 +2653,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
2574
2653
  type: Input
2575
2654
  }], ocChange: [{
2576
2655
  type: Output
2656
+ }], ocMouseEnter: [{
2657
+ type: Output
2658
+ }], ocMouseLeave: [{
2659
+ type: Output
2577
2660
  }], menuElementInvisible: [{
2578
2661
  type: ViewChild,
2579
2662
  args: ['menuContainerInvis']
@@ -3329,5 +3412,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
3329
3412
  * Generated bundle index. Do not edit.
3330
3413
  */
3331
3414
 
3332
- export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDrawerComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
3415
+ export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDrawerComponent, OcDrawerFooterComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
3333
3416
  //# sourceMappingURL=otimus-library.mjs.map