otimus-library 0.3.67 → 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.
Files changed (4) hide show
  1. package/fesm2022/otimus-library.mjs +70 -3
  2. package/fesm2022/otimus-library.mjs.map +1 -1
  3. package/index.d.ts +18 -5
  4. package/package.json +1 -1
package/fesm2022/otimus-library.mjs CHANGED
@@ -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 {
@@ -2443,6 +2504,8 @@ class OcMenuHorizComponent {
2443
2504
  this.ocMenu = [];
2444
2505
  this.shouldCloseOnClickOut = false;
2445
2506
  this.ocChange = new EventEmitter();
2507
+ this.ocMouseEnter = new EventEmitter();
2508
+ this.ocMouseLeave = new EventEmitter();
2446
2509
  this.isMenuShown = false;
2447
2510
  this.showOverflowMenu = false;
2448
2511
  this.visibleItems = [];
@@ -2573,11 +2636,11 @@ class OcMenuHorizComponent {
2573
2636
  }
2574
2637
  }
2575
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 }); }
2576
- 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"] }] }); }
2577
2640
  }
2578
2641
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizComponent, decorators: [{
2579
2642
  type: Component,
2580
- 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"] }]
2581
2644
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { ocMenu: [{
2582
2645
  type: Input
2583
2646
  }], maxWidth: [{
@@ -2590,6 +2653,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
2590
2653
  type: Input
2591
2654
  }], ocChange: [{
2592
2655
  type: Output
2656
+ }], ocMouseEnter: [{
2657
+ type: Output
2658
+ }], ocMouseLeave: [{
2659
+ type: Output
2593
2660
  }], menuElementInvisible: [{
2594
2661
  type: ViewChild,
2595
2662
  args: ['menuContainerInvis']