otimus-library 0.3.67 → 0.3.69
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.
- package/fesm2022/otimus-library.mjs +72 -5
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +19 -6
- package/package.json +1 -1
|
@@ -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 {
|
|
@@ -532,11 +593,11 @@ class OcAccordionItemComponent {
|
|
|
532
593
|
this.ocToggle.emit(this.ocIsOpen);
|
|
533
594
|
}
|
|
534
595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
535
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAccordionItemComponent, isStandalone: true, selector: "oc-accordion-item", inputs: { ocIsOpen: "ocIsOpen", ocTitle: "ocTitle", ocStyle: "ocStyle" }, outputs: { ocToggle: "ocToggle", closeAllItems: "closeAllItems" }, ngImport: i0, template: "<div
|
|
596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAccordionItemComponent, isStandalone: true, selector: "oc-accordion-item", inputs: { ocIsOpen: "ocIsOpen", ocTitle: "ocTitle", ocStyle: "ocStyle" }, outputs: { ocToggle: "ocToggle", closeAllItems: "closeAllItems" }, ngImport: i0, template: "<div\n class=\"oc-accordion-item\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n>\n <div\n class=\"item-header\"\n [ngClass]=\"{ open: ocIsOpen }\"\n (click)=\"toggle()\"\n >\n @if (ocTitle) {\n <h3>{{ ocTitle }}</h3>\n } @else {\n <ng-content select=\"[ocHeader]\"></ng-content>\n }\n <div class=\"header-extra\">\n <ng-content select=\"[ocHeaderExtra]\"></ng-content>\n </div>\n <span\n class=\"material-symbols-outlined\"\n style=\"user-select: none\"\n >\n keyboard_control_key\n </span>\n </div>\n @if (ocIsOpen) {\n <div\n class=\"oc-content\"\n [ngClass]=\"{\n open: ocIsOpen,\n }\"\n >\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [".oc-accordion-item{width:100%}.oc-accordion-item .item-header{cursor:pointer;transition:.1s ease;display:flex;align-items:center;padding:1.5rem;border-radius:1rem}.oc-accordion-item .item-header h3{flex-grow:1;color:#353535;padding:0;margin:0}.oc-accordion-item .item-header .header-extra{display:flex;align-items:center;margin-right:1rem}.oc-accordion-item .item-header .header-extra:empty{display:none}.oc-accordion-item .item-header span{transition:.3s ease;color:#7e8485}.oc-accordion-item .item-header:hover{background-color:#f8f9ff}.oc-accordion-item .item-header:active{transform:scale(.99)}.oc-accordion-item .item-header.open{background-color:#f8f9ff;border-bottom-left-radius:0;border-bottom-right-radius:0}.oc-accordion-item .item-header.open h3{color:#5505a2}.oc-accordion-item .item-header.open span{color:#00dda3;transform:rotate(180deg)}.oc-accordion-item .closed,.oc-accordion-item closed *{display:none}.oc-accordion-item .oc-content{animation:show-up .15s ease;padding:2rem 1.5rem 2.5rem;border-radius:0 0 16px 16px}.oc-accordion-item .oc-content.open{background-color:#f8f9ff}@keyframes show-up{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.oc-accordion-item.shui{width:100%}.oc-accordion-item.shui .item-header{border-radius:0;border-bottom:1px solid #f5f5f5}.oc-accordion-item.shui .item-header h3{color:#00000080}.oc-accordion-item.shui .item-header span{color:#7d7d7d}.oc-accordion-item.shui .item-header:hover{background-color:#f5f5f5}.oc-accordion-item.shui .item-header.open{background-color:transparent;border-bottom:1px solid #ebebeb}.oc-accordion-item.shui .item-header.open h3{color:#000}.oc-accordion-item.shui .item-header.open span{color:#099}.oc-accordion-item.shui .oc-content{border-radius:0}.oc-accordion-item.shui .oc-content.open{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
536
597
|
}
|
|
537
598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAccordionItemComponent, decorators: [{
|
|
538
599
|
type: Component,
|
|
539
|
-
args: [{ selector: 'oc-accordion-item', imports: [CommonModule], template: "<div
|
|
600
|
+
args: [{ selector: 'oc-accordion-item', imports: [CommonModule], template: "<div\n class=\"oc-accordion-item\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n>\n <div\n class=\"item-header\"\n [ngClass]=\"{ open: ocIsOpen }\"\n (click)=\"toggle()\"\n >\n @if (ocTitle) {\n <h3>{{ ocTitle }}</h3>\n } @else {\n <ng-content select=\"[ocHeader]\"></ng-content>\n }\n <div class=\"header-extra\">\n <ng-content select=\"[ocHeaderExtra]\"></ng-content>\n </div>\n <span\n class=\"material-symbols-outlined\"\n style=\"user-select: none\"\n >\n keyboard_control_key\n </span>\n </div>\n @if (ocIsOpen) {\n <div\n class=\"oc-content\"\n [ngClass]=\"{\n open: ocIsOpen,\n }\"\n >\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [".oc-accordion-item{width:100%}.oc-accordion-item .item-header{cursor:pointer;transition:.1s ease;display:flex;align-items:center;padding:1.5rem;border-radius:1rem}.oc-accordion-item .item-header h3{flex-grow:1;color:#353535;padding:0;margin:0}.oc-accordion-item .item-header .header-extra{display:flex;align-items:center;margin-right:1rem}.oc-accordion-item .item-header .header-extra:empty{display:none}.oc-accordion-item .item-header span{transition:.3s ease;color:#7e8485}.oc-accordion-item .item-header:hover{background-color:#f8f9ff}.oc-accordion-item .item-header:active{transform:scale(.99)}.oc-accordion-item .item-header.open{background-color:#f8f9ff;border-bottom-left-radius:0;border-bottom-right-radius:0}.oc-accordion-item .item-header.open h3{color:#5505a2}.oc-accordion-item .item-header.open span{color:#00dda3;transform:rotate(180deg)}.oc-accordion-item .closed,.oc-accordion-item closed *{display:none}.oc-accordion-item .oc-content{animation:show-up .15s ease;padding:2rem 1.5rem 2.5rem;border-radius:0 0 16px 16px}.oc-accordion-item .oc-content.open{background-color:#f8f9ff}@keyframes show-up{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.oc-accordion-item.shui{width:100%}.oc-accordion-item.shui .item-header{border-radius:0;border-bottom:1px solid #f5f5f5}.oc-accordion-item.shui .item-header h3{color:#00000080}.oc-accordion-item.shui .item-header span{color:#7d7d7d}.oc-accordion-item.shui .item-header:hover{background-color:#f5f5f5}.oc-accordion-item.shui .item-header.open{background-color:transparent;border-bottom:1px solid #ebebeb}.oc-accordion-item.shui .item-header.open h3{color:#000}.oc-accordion-item.shui .item-header.open span{color:#099}.oc-accordion-item.shui .oc-content{border-radius:0}.oc-accordion-item.shui .oc-content.open{background-color:transparent}\n"] }]
|
|
540
601
|
}], propDecorators: { ocIsOpen: [{
|
|
541
602
|
type: Input
|
|
542
603
|
}], ocTitle: [{
|
|
@@ -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']
|