otimus-library 0.3.20 → 0.3.21
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 +20 -17
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +5 -4
- package/package.json +1 -1
|
@@ -407,7 +407,7 @@ class OcMenuHorizDirective {
|
|
|
407
407
|
this.renderer = renderer;
|
|
408
408
|
// Inputs you want to pass to the component
|
|
409
409
|
this.ocMenu = [];
|
|
410
|
-
this.
|
|
410
|
+
this.ocMenuShouldCloseOnClickOut = false;
|
|
411
411
|
this.menuRef = null;
|
|
412
412
|
this.ocChangeSub = null;
|
|
413
413
|
}
|
|
@@ -419,13 +419,13 @@ class OcMenuHorizDirective {
|
|
|
419
419
|
this.menuRef.instance.ocMenu = this.ocMenu;
|
|
420
420
|
}
|
|
421
421
|
if (changes['maxWidth']) {
|
|
422
|
-
this.menuRef.instance.maxWidth = this.
|
|
422
|
+
this.menuRef.instance.maxWidth = this.ocMenuMaxWidth;
|
|
423
423
|
}
|
|
424
424
|
if (changes['width']) {
|
|
425
|
-
this.menuRef.instance.width = this.
|
|
425
|
+
this.menuRef.instance.width = this.ocMenuWidth;
|
|
426
426
|
}
|
|
427
427
|
if (changes['shouldCloseOnClickOut']) {
|
|
428
|
-
this.menuRef.instance.shouldCloseOnClickOut = this.
|
|
428
|
+
this.menuRef.instance.shouldCloseOnClickOut = this.ocMenuShouldCloseOnClickOut;
|
|
429
429
|
}
|
|
430
430
|
// ensure component change detection runs
|
|
431
431
|
this.menuRef.changeDetectorRef.detectChanges();
|
|
@@ -442,9 +442,9 @@ class OcMenuHorizDirective {
|
|
|
442
442
|
});
|
|
443
443
|
// set initial inputs
|
|
444
444
|
this.menuRef.instance.ocMenu = this.ocMenu;
|
|
445
|
-
this.menuRef.instance.maxWidth = this.
|
|
446
|
-
this.menuRef.instance.width = this.
|
|
447
|
-
this.menuRef.instance.shouldCloseOnClickOut = this.
|
|
445
|
+
this.menuRef.instance.maxWidth = this.ocMenuMaxWidth;
|
|
446
|
+
this.menuRef.instance.width = this.ocMenuWidth;
|
|
447
|
+
this.menuRef.instance.shouldCloseOnClickOut = this.ocMenuShouldCloseOnClickOut;
|
|
448
448
|
this.menuRef.instance.hostElement = this.elemRef.nativeElement;
|
|
449
449
|
// forward output (example)
|
|
450
450
|
this.ocChangeSub = this.menuRef.instance.ocChange.subscribe((v) => {
|
|
@@ -492,7 +492,7 @@ class OcMenuHorizDirective {
|
|
|
492
492
|
}
|
|
493
493
|
}
|
|
494
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",
|
|
495
|
+
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 }); }
|
|
496
496
|
}
|
|
497
497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizDirective, decorators: [{
|
|
498
498
|
type: Directive,
|
|
@@ -503,11 +503,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
503
503
|
}]
|
|
504
504
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.EnvironmentInjector }, { type: i0.Renderer2 }], propDecorators: { ocMenu: [{
|
|
505
505
|
type: Input
|
|
506
|
-
}],
|
|
506
|
+
}], ocMenuMaxWidth: [{
|
|
507
507
|
type: Input
|
|
508
|
-
}],
|
|
508
|
+
}], ocMenuWidth: [{
|
|
509
509
|
type: Input
|
|
510
|
-
}],
|
|
510
|
+
}], ocMenuShouldCloseOnClickOut: [{
|
|
511
511
|
type: Input
|
|
512
512
|
}] } });
|
|
513
513
|
|
|
@@ -1671,13 +1671,13 @@ class OcMenuHorizComponent {
|
|
|
1671
1671
|
this.calculateVisibleItems();
|
|
1672
1672
|
}
|
|
1673
1673
|
setupResizeObserver() {
|
|
1674
|
-
if (!this.
|
|
1674
|
+
if (!this.menuElementInvisible) {
|
|
1675
1675
|
return;
|
|
1676
1676
|
}
|
|
1677
1677
|
this.resizeObserver = new ResizeObserver(() => {
|
|
1678
1678
|
this.measureItems();
|
|
1679
1679
|
});
|
|
1680
|
-
this.resizeObserver.observe(this.
|
|
1680
|
+
this.resizeObserver.observe(this.menuElementInvisible.nativeElement);
|
|
1681
1681
|
}
|
|
1682
1682
|
initializeMenu() {
|
|
1683
1683
|
this.measureItems();
|
|
@@ -1685,10 +1685,10 @@ class OcMenuHorizComponent {
|
|
|
1685
1685
|
this.isInitialized = true;
|
|
1686
1686
|
}
|
|
1687
1687
|
calculateVisibleItems() {
|
|
1688
|
-
if (!this.
|
|
1688
|
+
if (!this.menuElementInvisible || this.itemWidths.length === 0) {
|
|
1689
1689
|
return;
|
|
1690
1690
|
}
|
|
1691
|
-
const containerWidth = this.
|
|
1691
|
+
const containerWidth = this.menuElementInvisible.nativeElement.offsetWidth;
|
|
1692
1692
|
// Store this width to compare in ResizeObserver
|
|
1693
1693
|
const overflowButtonWidth = 40;
|
|
1694
1694
|
const padding = 15;
|
|
@@ -1730,11 +1730,11 @@ class OcMenuHorizComponent {
|
|
|
1730
1730
|
}
|
|
1731
1731
|
}
|
|
1732
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 }); }
|
|
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 [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n >\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 @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 #
|
|
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: "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 >\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 @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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}.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{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 }] }); }
|
|
1734
1734
|
}
|
|
1735
1735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcMenuHorizComponent, decorators: [{
|
|
1736
1736
|
type: Component,
|
|
1737
|
-
args: [{ selector: 'oc-menu-horiz', imports: [CommonModule, CdkMenuModule], 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 [ngStyle]=\"{\n 'background-color': option.backgroundColor,\n }\"\n >\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 @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 #
|
|
1737
|
+
args: [{ selector: 'oc-menu-horiz', imports: [CommonModule, CdkMenuModule], 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 >\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 @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"option.callback()\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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 >\n @if (option.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >{{ option.icon }}</span\n >\n }\n @if (option.callback) {\n <button\n (click)=\"handleOverflowItemClick(option.callback)\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n >\n {{ option.name }}\n </button>\n }\n @if (option.url) {\n <a\n [href]=\"option.url\"\n [ngStyle]=\"{\n color: option.color,\n }\"\n [target]=\"option.targetBlank ? '_blank' : ''\"\n >{{ option.name }}</a\n >\n }\n @if (!option.callback && !option.url) {\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}.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{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"] }]
|
|
1738
1738
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { ocMenu: [{
|
|
1739
1739
|
type: Input
|
|
1740
1740
|
}], maxWidth: [{
|
|
@@ -1747,6 +1747,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1747
1747
|
type: Input
|
|
1748
1748
|
}], ocChange: [{
|
|
1749
1749
|
type: Output
|
|
1750
|
+
}], menuElementInvisible: [{
|
|
1751
|
+
type: ViewChild,
|
|
1752
|
+
args: ['menuContainerInvis']
|
|
1750
1753
|
}], menuElement: [{
|
|
1751
1754
|
type: ViewChild,
|
|
1752
1755
|
args: ['menuContainer']
|