otimus-library 0.0.39 → 0.0.42

package/esm2022/lib/components/oc-menu/oc-menu.component.mjs

@@ -0,0 +1,42 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/cdk/menu";
+export class OcMenuComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.ocMenu = [];
+        this.isMenuShown = false;
+    }
+    open() {
+        this.isMenuShown = !this.isMenuShown;
+    }
+    ngOnInit() {
+        this.closeOnClickOut();
+    }
+    closeOnClickOut() {
+        this.renderer.listen('window', 'click', (e) => {
+            if (!this.menu)
+                return;
+            if (e.target?.tagName.toLowerCase() === 'button')
+                return;
+            if (e.target !== this.menu.nativeElement && this.isMenuShown) {
+                this.isMenuShown = false;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcMenuComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.5", type: OcMenuComponent, isStandalone: true, selector: "oc-menu", inputs: { ocMenu: "ocMenu" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["ocMenuEl"], descendants: true }], ngImport: i0, template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\r\n  <ul>\r\n    @for(option of ocMenu; track $index) {\r\n      <li>\r\n        @if(option.icon) {\r\n          <span class=\"material-symbols-outlined\">\r\n            {{option.icon}}\r\n          </span>\r\n        }  \r\n        @if(option.callback){\r\n          <button (click)=\"option.callback()\">{{option.name}}</button>\r\n        }\r\n        @if(option.url){\r\n          <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\r\n        }\r\n        @if (!option.callback && !option.url) {\r\n          <span>{{option.name}}</span>\r\n        }\r\n    </li>\r\n  }\r\n  </ul>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;transition:.1s ease}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:500;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-menu', standalone: true, imports: [CommonModule, CdkMenuModule], template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\r\n  <ul>\r\n    @for(option of ocMenu; track $index) {\r\n      <li>\r\n        @if(option.icon) {\r\n          <span class=\"material-symbols-outlined\">\r\n            {{option.icon}}\r\n          </span>\r\n        }  \r\n        @if(option.callback){\r\n          <button (click)=\"option.callback()\">{{option.name}}</button>\r\n        }\r\n        @if(option.url){\r\n          <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\r\n        }\r\n        @if (!option.callback && !option.url) {\r\n          <span>{{option.name}}</span>\r\n        }\r\n    </li>\r\n  }\r\n  </ul>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;transition:.1s ease}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:500;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { menu: [{
+                type: ViewChild,
+                args: ['ocMenuEl']
+            }], ocMenu: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2MtbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vdGltdXMtbGlicmFyeS9zcmMvbGliL2NvbXBvbmVudHMvb2MtbWVudS9vYy1tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9saWIvY29tcG9uZW50cy9vYy1tZW51L29jLW1lbnUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFHLFNBQVMsRUFBWSxLQUFLLEVBQXFCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRixPQUFPLEVBQUcsYUFBYSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7O0FBVS9DLE1BQU0sT0FBTyxlQUFlO0lBQzFCLFlBQW9CLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7UUFHOUIsV0FBTSxHQUFpQixFQUFFLENBQUE7UUFDbEMsZ0JBQVcsR0FBWSxLQUFLLENBQUE7SUFKYyxDQUFDO0lBTTNDLElBQUk7UUFDRixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQTtJQUN0QyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQTtJQUN4QixDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUMsQ0FBQyxDQUFLLEVBQUMsRUFBRTtZQUM5QyxJQUFHLENBQUMsSUFBSSxDQUFDLElBQUk7Z0JBQUUsT0FBTTtZQUNyQixJQUFHLENBQUMsQ0FBQyxNQUFNLEVBQUUsT0FBTyxDQUFDLFdBQVcsRUFBRSxLQUFLLFFBQVE7Z0JBQUUsT0FBTTtZQUV2RCxJQUFHLENBQUMsQ0FBQyxNQUFNLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBQztnQkFDMUQsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7YUFDMUI7UUFDSCxDQUFDLENBQUMsQ0FBQTtJQUNKLENBQUM7OEdBeEJVLGVBQWU7a0dBQWYsZUFBZSxtTUNaNUIsb3NCQXNCQSxvOEJEZFksWUFBWSxrSUFBRSxhQUFhOzsyRkFJMUIsZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxTQUFTLGNBQ1AsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGFBQWEsQ0FBQzs4RUFPZixJQUFJO3NCQUExQixTQUFTO3VCQUFDLFVBQVU7Z0JBQ1osTUFBTTtzQkFBZCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgIENvbXBvbmVudCxFbGVtZW50UmVmLElucHV0LCBPbkluaXQsIFJlbmRlcmVyMiwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7ICBDZGtNZW51TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL21lbnUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBPY01lbnVUeXBlIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9vYy1tZW51JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnb2MtbWVudScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDZGtNZW51TW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vb2MtbWVudS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vb2MtbWVudS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBPY01lbnVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge31cclxuXHJcbiAgQFZpZXdDaGlsZCgnb2NNZW51RWwnKSBtZW51ITogRWxlbWVudFJlZjtcclxuICBASW5wdXQoKSBvY01lbnU6IE9jTWVudVR5cGVbXSA9IFtdXHJcbiAgaXNNZW51U2hvd246IGJvb2xlYW4gPSBmYWxzZVxyXG5cclxuICBvcGVuKCkge1xyXG4gICAgdGhpcy5pc01lbnVTaG93biA9ICF0aGlzLmlzTWVudVNob3duXHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuY2xvc2VPbkNsaWNrT3V0KClcclxuICB9XHJcblxyXG4gIGNsb3NlT25DbGlja091dCgpIHtcclxuICAgIHRoaXMucmVuZGVyZXIubGlzdGVuKCd3aW5kb3cnLCAnY2xpY2snLChlOmFueSk9PntcclxuICAgICAgaWYoIXRoaXMubWVudSkgcmV0dXJuXHJcbiAgICAgIGlmKGUudGFyZ2V0Py50YWdOYW1lLnRvTG93ZXJDYXNlKCkgPT09ICdidXR0b24nKSByZXR1cm5cclxuICAgICAgXHJcbiAgICAgIGlmKGUudGFyZ2V0ICE9PSB0aGlzLm1lbnUubmF0aXZlRWxlbWVudCAmJiB0aGlzLmlzTWVudVNob3duKXtcclxuICAgICAgICB0aGlzLmlzTWVudVNob3duID0gZmFsc2U7XHJcbiAgICAgIH1cclxuICAgIH0pXHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJvYy1tZW51XCIgKm5nSWY9XCJpc01lbnVTaG93blwiIGNka01lbnUgI29jTWVudUVsPlxyXG4gIDx1bD5cclxuICAgIEBmb3Iob3B0aW9uIG9mIG9jTWVudTsgdHJhY2sgJGluZGV4KSB7XHJcbiAgICAgIDxsaT5cclxuICAgICAgICBAaWYob3B0aW9uLmljb24pIHtcclxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwibWF0ZXJpYWwtc3ltYm9scy1vdXRsaW5lZFwiPlxyXG4gICAgICAgICAgICB7e29wdGlvbi5pY29ufX1cclxuICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICB9ICBcclxuICAgICAgICBAaWYob3B0aW9uLmNhbGxiYWNrKXtcclxuICAgICAgICAgIDxidXR0b24gKGNsaWNrKT1cIm9wdGlvbi5jYWxsYmFjaygpXCI+e3tvcHRpb24ubmFtZX19PC9idXR0b24+XHJcbiAgICAgICAgfVxyXG4gICAgICAgIEBpZihvcHRpb24udXJsKXtcclxuICAgICAgICAgIDxhIFtocmVmXT1cIm9wdGlvbi51cmxcIiBbdGFyZ2V0XT1cIm9wdGlvbi50YXJnZXRCbGFuayA/ICdfYmxhbmsnIDogJydcIj57e29wdGlvbi5uYW1lfX08L2E+XHJcbiAgICAgICAgfVxyXG4gICAgICAgIEBpZiAoIW9wdGlvbi5jYWxsYmFjayAmJiAhb3B0aW9uLnVybCkge1xyXG4gICAgICAgICAgPHNwYW4+e3tvcHRpb24ubmFtZX19PC9zcGFuPlxyXG4gICAgICAgIH1cclxuICAgIDwvbGk+XHJcbiAgfVxyXG4gIDwvdWw+XHJcbjwvZGl2PlxyXG4iXX0=