otimus-library 0.3.12 → 0.3.15
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 +121 -37
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +39 -17
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, Component, Input, Directive, HostBinding, ContentChild, ViewEncapsulation, EventEmitter, Output, ViewChildren, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren } from '@angular/core';
|
|
3
|
+
import * as i2$1 from '@angular/cdk/menu';
|
|
4
|
+
import { CdkMenuModule } from '@angular/cdk/menu';
|
|
3
5
|
import * as i1 from '@angular/common';
|
|
4
6
|
import { CommonModule } from '@angular/common';
|
|
5
7
|
import * as i2 from '@angular/platform-browser';
|
|
6
8
|
import * as i4 from '@angular/forms';
|
|
7
9
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
8
10
|
import * as i1$1 from '@angular/common/http';
|
|
9
|
-
import * as i2$1 from '@angular/cdk/menu';
|
|
10
|
-
import { CdkMenuModule } from '@angular/cdk/menu';
|
|
11
11
|
|
|
12
12
|
class OtimusLibraryService {
|
|
13
13
|
constructor() { }
|
|
@@ -399,6 +399,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
399
399
|
type: Input
|
|
400
400
|
}] } });
|
|
401
401
|
|
|
402
|
+
class OcMenuHorizDirective {
|
|
403
|
+
constructor(elemRef, viewContainerRef, injector, renderer) {
|
|
404
|
+
this.elemRef = elemRef;
|
|
405
|
+
this.viewContainerRef = viewContainerRef;
|
|
406
|
+
this.injector = injector;
|
|
407
|
+
this.renderer = renderer;
|
|
408
|
+
// Inputs you want to pass to the component
|
|
409
|
+
this.ocMenu = [];
|
|
410
|
+
this.shouldCloseOnClickOut = false;
|
|
411
|
+
this.menuRef = null;
|
|
412
|
+
this.ocChangeSub = null;
|
|
413
|
+
}
|
|
414
|
+
ngOnChanges(changes) {
|
|
415
|
+
// If the component already exists, propagate input changes immediately
|
|
416
|
+
if (!this.menuRef)
|
|
417
|
+
return;
|
|
418
|
+
if (changes['ocMenu']) {
|
|
419
|
+
this.menuRef.instance.ocMenu = this.ocMenu;
|
|
420
|
+
}
|
|
421
|
+
if (changes['maxWidth']) {
|
|
422
|
+
this.menuRef.instance.maxWidth = this.maxWidth;
|
|
423
|
+
}
|
|
424
|
+
if (changes['width']) {
|
|
425
|
+
this.menuRef.instance.width = this.width;
|
|
426
|
+
}
|
|
427
|
+
if (changes['shouldCloseOnClickOut']) {
|
|
428
|
+
this.menuRef.instance.shouldCloseOnClickOut = this.shouldCloseOnClickOut;
|
|
429
|
+
}
|
|
430
|
+
// ensure component change detection runs
|
|
431
|
+
this.menuRef.changeDetectorRef.detectChanges();
|
|
432
|
+
}
|
|
433
|
+
ngOnDestroy() {
|
|
434
|
+
this.destroyMenu();
|
|
435
|
+
}
|
|
436
|
+
/** create and attach component instance (idempotent) */
|
|
437
|
+
createOcMenu() {
|
|
438
|
+
if (this.menuRef)
|
|
439
|
+
return;
|
|
440
|
+
this.menuRef = this.viewContainerRef.createComponent(OcMenuHorizComponent, {
|
|
441
|
+
environmentInjector: this.injector,
|
|
442
|
+
});
|
|
443
|
+
// set initial inputs
|
|
444
|
+
this.menuRef.instance.ocMenu = this.ocMenu;
|
|
445
|
+
this.menuRef.instance.maxWidth = this.maxWidth;
|
|
446
|
+
this.menuRef.instance.width = this.width;
|
|
447
|
+
this.menuRef.instance.shouldCloseOnClickOut = this.shouldCloseOnClickOut;
|
|
448
|
+
this.menuRef.instance.hostElement = this.elemRef.nativeElement;
|
|
449
|
+
// forward output (example)
|
|
450
|
+
this.ocChangeSub = this.menuRef.instance.ocChange.subscribe((v) => {
|
|
451
|
+
// re-emit or handle here. Because directive is not a component,
|
|
452
|
+
// you could expose a public Observable or call a callback — adjust to your needs.
|
|
453
|
+
// For demonstration we'll log:
|
|
454
|
+
});
|
|
455
|
+
// attach to host element
|
|
456
|
+
const host = this.elemRef.nativeElement;
|
|
457
|
+
const menuNative = this.menuRef.location.nativeElement;
|
|
458
|
+
const parent = host.parentNode;
|
|
459
|
+
if (parent) {
|
|
460
|
+
// insertBefore with nextSibling effectively inserts *after* the host
|
|
461
|
+
parent.insertBefore(menuNative, host.nextSibling);
|
|
462
|
+
}
|
|
463
|
+
else {
|
|
464
|
+
// fallback: append to body if the host isn't attached to a parent yet
|
|
465
|
+
document.body.appendChild(menuNative);
|
|
466
|
+
}
|
|
467
|
+
// run change detection so the menu renders with proper inputs
|
|
468
|
+
this.menuRef.changeDetectorRef.detectChanges();
|
|
469
|
+
}
|
|
470
|
+
open() {
|
|
471
|
+
this.createOcMenu();
|
|
472
|
+
this.menuRef?.instance.open();
|
|
473
|
+
}
|
|
474
|
+
close() {
|
|
475
|
+
this.menuRef?.instance.close();
|
|
476
|
+
}
|
|
477
|
+
destroyMenu() {
|
|
478
|
+
if (this.ocChangeSub) {
|
|
479
|
+
this.ocChangeSub.unsubscribe();
|
|
480
|
+
this.ocChangeSub = null;
|
|
481
|
+
}
|
|
482
|
+
if (this.menuRef) {
|
|
483
|
+
// remove DOM node (optional — Angular destroy will also remove it)
|
|
484
|
+
try {
|
|
485
|
+
const native = this.menuRef.location.nativeElement;
|
|
486
|
+
if (native && native.parentNode)
|
|
487
|
+
native.parentNode.removeChild(native);
|
|
488
|
+
}
|
|
489
|
+
catch { }
|
|
490
|
+
this.menuRef.destroy();
|
|
491
|
+
this.menuRef = null;
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
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 }); }
|
|
495
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: OcMenuHorizDirective, isStandalone: true, selector: "[OcMenuHorizontal]", inputs: { ocMenu: "ocMenu", maxWidth: "maxWidth", width: "width", shouldCloseOnClickOut: "shouldCloseOnClickOut" }, exportAs: ["OcMenuHorizontal"], usesOnChanges: true, ngImport: i0 }); }
|
|
496
|
+
}
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizDirective, decorators: [{
|
|
498
|
+
type: Directive,
|
|
499
|
+
args: [{
|
|
500
|
+
selector: '[OcMenuHorizontal]',
|
|
501
|
+
standalone: true,
|
|
502
|
+
exportAs: 'OcMenuHorizontal',
|
|
503
|
+
}]
|
|
504
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.EnvironmentInjector }, { type: i0.Renderer2 }], propDecorators: { ocMenu: [{
|
|
505
|
+
type: Input
|
|
506
|
+
}], maxWidth: [{
|
|
507
|
+
type: Input
|
|
508
|
+
}], width: [{
|
|
509
|
+
type: Input
|
|
510
|
+
}], shouldCloseOnClickOut: [{
|
|
511
|
+
type: Input
|
|
512
|
+
}] } });
|
|
513
|
+
|
|
402
514
|
class OcBadgeComponent {
|
|
403
515
|
constructor() {
|
|
404
516
|
this.ocSize = 'small';
|
|
@@ -1486,11 +1598,10 @@ class OcMenuHorizComponent {
|
|
|
1486
1598
|
this.renderer = renderer;
|
|
1487
1599
|
this.cdr = cdr;
|
|
1488
1600
|
this.ocMenu = [];
|
|
1489
|
-
this.shouldCloseOnClickOut =
|
|
1601
|
+
this.shouldCloseOnClickOut = false;
|
|
1490
1602
|
this.ocChange = new EventEmitter();
|
|
1491
1603
|
this.isMenuShown = false;
|
|
1492
1604
|
this.showOverflowMenu = false;
|
|
1493
|
-
this.justOpened = false;
|
|
1494
1605
|
this.visibleItems = [];
|
|
1495
1606
|
this.overflowItems = [];
|
|
1496
1607
|
this.itemWidths = [];
|
|
@@ -1498,22 +1609,11 @@ class OcMenuHorizComponent {
|
|
|
1498
1609
|
}
|
|
1499
1610
|
open() {
|
|
1500
1611
|
this.isMenuShown = true;
|
|
1501
|
-
this.justOpened = true;
|
|
1502
1612
|
// reset on next tick so the opening click is ignored by the window listener
|
|
1503
|
-
setTimeout(() => (this.justOpened = false), 0);
|
|
1504
1613
|
this.cdr.detectChanges();
|
|
1505
1614
|
if (!this.isInitialized) {
|
|
1506
1615
|
this.initializeMenu();
|
|
1507
1616
|
}
|
|
1508
|
-
setTimeout(() => {
|
|
1509
|
-
if (this.menuElement) {
|
|
1510
|
-
const parentButton = this.findParentButton(this.menuElement.nativeElement);
|
|
1511
|
-
if (parentButton) {
|
|
1512
|
-
this.buttonId = `oc-${Math.random()}`;
|
|
1513
|
-
this.renderer.setAttribute(parentButton, 'id', this.buttonId);
|
|
1514
|
-
}
|
|
1515
|
-
}
|
|
1516
|
-
}, 100);
|
|
1517
1617
|
}
|
|
1518
1618
|
close() {
|
|
1519
1619
|
this.isMenuShown = false;
|
|
@@ -1528,16 +1628,6 @@ class OcMenuHorizComponent {
|
|
|
1528
1628
|
this.windowClickUnlisten();
|
|
1529
1629
|
this.resizeObserver?.disconnect();
|
|
1530
1630
|
}
|
|
1531
|
-
findParentButton(element) {
|
|
1532
|
-
let parent = element.parentElement;
|
|
1533
|
-
while (parent) {
|
|
1534
|
-
if (parent.tagName.toLowerCase() === 'button') {
|
|
1535
|
-
return parent;
|
|
1536
|
-
}
|
|
1537
|
-
parent = parent.parentElement;
|
|
1538
|
-
}
|
|
1539
|
-
return null;
|
|
1540
|
-
}
|
|
1541
1631
|
closeOnClickOut() {
|
|
1542
1632
|
// If already listening, don't register again
|
|
1543
1633
|
if (this.windowClickUnlisten)
|
|
@@ -1546,10 +1636,6 @@ class OcMenuHorizComponent {
|
|
|
1546
1636
|
// Only act if user wants this behavior
|
|
1547
1637
|
if (!this.shouldCloseOnClickOut)
|
|
1548
1638
|
return;
|
|
1549
|
-
if (this.justOpened) {
|
|
1550
|
-
this.justOpened = false;
|
|
1551
|
-
return;
|
|
1552
|
-
}
|
|
1553
1639
|
// Only act when menu is open
|
|
1554
1640
|
if (!this.isMenuShown)
|
|
1555
1641
|
return;
|
|
@@ -1560,12 +1646,8 @@ class OcMenuHorizComponent {
|
|
|
1560
1646
|
if (this.menuElement && this.menuElement.nativeElement.contains(target)) {
|
|
1561
1647
|
return;
|
|
1562
1648
|
}
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
const parentButton = this.findParentButton(this.menuElement.nativeElement);
|
|
1566
|
-
if (parentButton && parentButton.contains(target)) {
|
|
1567
|
-
return;
|
|
1568
|
-
}
|
|
1649
|
+
if (this.hostElement && this.hostElement.contains(target)) {
|
|
1650
|
+
return;
|
|
1569
1651
|
}
|
|
1570
1652
|
// Otherwise it's an outside click -> close (respect shouldCloseOnClick)
|
|
1571
1653
|
this.showOverflowMenu = false;
|
|
@@ -1648,7 +1730,7 @@ class OcMenuHorizComponent {
|
|
|
1648
1730
|
}
|
|
1649
1731
|
}
|
|
1650
1732
|
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 }); }
|
|
1651
|
-
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" }, outputs: { ocChange: "ocChange" }, viewQueries: [{ 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 >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\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 (click)=\"option.callback()\">{{ option.name }}</button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n @if (option.callback) {\n <button (click)=\"option.callback()\">{{ option.name }}</button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\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 @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n @if (option.callback) {\n <button (click)=\"handleOverflowItemClick(option.callback)\">\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\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\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainer\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 #ffffff;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}.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%;height:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{width:.3rem;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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkMenuModule }] }); }
|
|
1733
|
+
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: "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 >\n <ul>\n @if (visibleItems.length === 0 && overflowItems.length === 0) {\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 (click)=\"option.callback()\">{{ option.name }}</button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\n }\n </li>\n }\n }\n\n @for (option of visibleItems; track $index) {\n <li>\n @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n @if (option.callback) {\n <button (click)=\"option.callback()\">{{ option.name }}</button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\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 @if (option.icon) {\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\n }\n @if (option.callback) {\n <button (click)=\"handleOverflowItemClick(option.callback)\">\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\n <span>{{ option.name }}</span>\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\n <div\n class=\"oc-menu-horiz\"\n [style.max-width]=\"maxWidth\"\n [style.width]=\"width\"\n #menuContainer\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 #ffffff;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}.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%;height:100%;cursor:pointer}.oc-menu-horiz ul li .material-symbols-outlined{width:.3rem;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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkMenuModule }] }); }
|
|
1652
1734
|
}
|
|
1653
1735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizComponent, decorators: [{
|
|
1654
1736
|
type: Component,
|
|
@@ -1661,6 +1743,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1661
1743
|
type: Input
|
|
1662
1744
|
}], shouldCloseOnClickOut: [{
|
|
1663
1745
|
type: Input
|
|
1746
|
+
}], hostElement: [{
|
|
1747
|
+
type: Input
|
|
1664
1748
|
}], ocChange: [{
|
|
1665
1749
|
type: Output
|
|
1666
1750
|
}], menuElement: [{
|
|
@@ -2321,5 +2405,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
2321
2405
|
* Generated bundle index. Do not edit.
|
|
2322
2406
|
*/
|
|
2323
2407
|
|
|
2324
|
-
export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
|
|
2408
|
+
export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
|
|
2325
2409
|
//# sourceMappingURL=otimus-library.mjs.map
|