osl-base-extended 2.0.28 → 2.0.29

package/fesm2022/osl-base-extended.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, inject, Injector, Injectable, InjectionToken, PLATFORM_ID, Input, Optional, Directive, EventEmitter, Output, HostListener, ViewChild, NgModule, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Inject, inject, Injector, Injectable, InjectionToken, PLATFORM_ID, Input, Optional, Directive, EventEmitter, Output, HostListener, ViewChild, NgModule, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -29,6 +29,9 @@ import { MatMenuModule } from '@angular/material/menu';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import * as i1$3 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 class OslBaseExtended {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslBaseExtended, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -5204,6 +5207,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class OslMenu {
+    position = 'auto';
+    templateRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslMenu, isStandalone: false, selector: "osl-menu", inputs: { position: "position" }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["panel"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #panel>\n  <div class=\"osl-menu-panel\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".osl-menu-panel{min-width:180px;background:#fff;border:1px solid #eaecf0;border-radius:12px;box-shadow:0 12px 32px #10182824,0 4px 12px #1018280f;overflow:hidden;animation:osl-menu-in .16s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-menu-label{padding:10px 14px 7px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f2f4f7;-webkit-user-select:none;user-select:none}.osl-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-menu-item:last-child{border-bottom:none}.osl-menu-item:hover{background:var(--osl-menu-accent-bg, #f5f3ff);color:var(--osl-menu-accent, var(--osl-primary, #6366f1));border-left-color:var(--osl-menu-accent, var(--osl-primary, #6366f1))}.osl-menu-item:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.osl-menu-divider{height:1px;background:#f2f4f7;margin:4px 0;border:none}.osl-menu-backdrop{background:transparent}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'osl-menu', standalone: false, encapsulation: ViewEncapsulation.None, host: { style: 'display: none' }, template: "<ng-template #panel>\n  <div class=\"osl-menu-panel\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".osl-menu-panel{min-width:180px;background:#fff;border:1px solid #eaecf0;border-radius:12px;box-shadow:0 12px 32px #10182824,0 4px 12px #1018280f;overflow:hidden;animation:osl-menu-in .16s cubic-bezier(.16,1,.3,1)}@keyframes osl-menu-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.osl-menu-label{padding:10px 14px 7px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f2f4f7;-webkit-user-select:none;user-select:none}.osl-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;border-left:3px solid transparent;border-bottom:1px solid #f9fafb;text-align:left;font-size:13px;font-weight:500;font-family:inherit;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-left-color .12s}.osl-menu-item:last-child{border-bottom:none}.osl-menu-item:hover{background:var(--osl-menu-accent-bg, #f5f3ff);color:var(--osl-menu-accent, var(--osl-primary, #6366f1));border-left-color:var(--osl-menu-accent, var(--osl-primary, #6366f1))}.osl-menu-item:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.osl-menu-divider{height:1px;background:#f2f4f7;margin:4px 0;border:none}.osl-menu-backdrop{background:transparent}\n"] }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], templateRef: [{
+                type: ViewChild,
+                args: ['panel', { static: true }]
+            }] } });
+class OslMenuTriggerFor {
+    _el;
+    _overlay;
+    _vcr;
+    menu;
+    _ref = null;
+    _subs = [];
+    constructor(_el, _overlay, _vcr) {
+        this._el = _el;
+        this._overlay = _overlay;
+        this._vcr = _vcr;
+    }
+    _onClick(event) {
+        event.stopPropagation();
+        this._ref ? this._close() : this._open();
+    }
+    _open() {
+        if (!this.menu)
+            return;
+        this._ref = this._overlay.create({
+            positionStrategy: this._overlay
+                .position()
+                .flexibleConnectedTo(this._el)
+                .withPositions(this._positions())
+                .withFlexibleDimensions(false)
+                .withPush(true),
+            scrollStrategy: this._overlay.scrollStrategies.close(),
+            hasBackdrop: true,
+            backdropClass: 'osl-menu-backdrop',
+        });
+        this._ref.attach(new TemplatePortal(this.menu.templateRef, this._vcr));
+        this._subs = [
+            this._ref.backdropClick().subscribe(() => this._close()),
+            this._ref.keydownEvents().subscribe(e => { if (e.key === 'Escape')
+                this._close(); }),
+        ];
+        this._ref.overlayElement.addEventListener('click', () => this._close());
+    }
+    _close() {
+        this._subs.forEach(s => s.unsubscribe());
+        this._subs = [];
+        const ref = this._ref;
+        this._ref = null;
+        ref?.dispose();
+    }
+    ngOnDestroy() {
+        this._close();
+    }
+    _positions() {
+        const pos = this.menu?.position ?? 'auto';
+        const below = { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 };
+        const above = { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 };
+        const belowE = { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 };
+        const aboveE = { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 };
+        const after = { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 4 };
+        const before = { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -4 };
+        switch (pos) {
+            case 'below': return [below, above];
+            case 'above': return [above, below];
+            case 'after': return [after, before];
+            case 'before': return [before, after];
+            default: return [below, belowE, above, aboveE];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslMenuTriggerFor, deps: [{ token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: OslMenuTriggerFor, isStandalone: false, selector: "[oslMenuTriggerFor]", inputs: { menu: ["oslMenuTriggerFor", "menu"] }, host: { listeners: { "click": "_onClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslMenuTriggerFor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[oslMenuTriggerFor]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { menu: [{
+                type: Input,
+                args: ['oslMenuTriggerFor']
+            }], _onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class FormStructureModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, declarations: [DynamicForm,
@@ -5225,7 +5324,9 @@ class FormStructureModule {
             OslAutocompleteLister,
             OslReportGrid,
             OslReportForm,
-            OslUserLog], imports: [NgTemplateOutlet,
+            OslUserLog,
+            OslMenu,
+            OslMenuTriggerFor], imports: [NgTemplateOutlet,
             NgStyle,
             NgClass,
             DatePipe,
@@ -5245,6 +5346,8 @@ class FormStructureModule {
             ScrollingModule,
             DragDropModule,
             MatTooltipModule,
+            OverlayModule,
+            PortalModule,
             NgxMatDatetimepicker,
             NgxMatDatepickerInput], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput, OslUserLog,
             Osltextarea,
@@ -5258,7 +5361,8 @@ class FormStructureModule {
             OslCheckbox,
             OslButton,
             OslSetup,
-            OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm] });
+            OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm,
+            OslMenu, OslMenuTriggerFor] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, providers: [
             { provide: AUTOCOMPLETE_LISTER_COMPONENT, useValue: OslAutocompleteLister },
         ], imports: [FormsModule,
@@ -5274,6 +5378,8 @@ class FormStructureModule {
             ScrollingModule,
             DragDropModule,
             MatTooltipModule,
+            OverlayModule,
+            PortalModule,
             NgxMatDatetimepicker] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, decorators: [{
@@ -5300,6 +5406,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         OslReportGrid,
                         OslReportForm,
                         OslUserLog,
+                        OslMenu,
+                        OslMenuTriggerFor,
                     ],
                     imports: [
                         NgTemplateOutlet,
@@ -5322,6 +5430,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ScrollingModule,
                         DragDropModule,
                         MatTooltipModule,
+                        OverlayModule,
+                        PortalModule,
                         NgxMatDatetimepicker,
                         NgxMatDatepickerInput,
                     ],
@@ -5337,7 +5447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         OslCheckbox,
                         OslButton,
                         OslSetup,
-                        OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm],
+                        OslSearchbar, OslAutocompleteLister, OslReportGrid, OslReportForm,
+                        OslMenu, OslMenuTriggerFor],
                     providers: [
                         { provide: AUTOCOMPLETE_LISTER_COMPONENT, useValue: OslAutocompleteLister },
                     ],
@@ -6602,5 +6713,5 @@ var validation_util = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, OslUserLog, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, validation_util as ValidationUtil, baseComponent };
+export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslFileUpload, OslFormGrid, OslGrid, OslMenu, OslMenuTriggerFor, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, OslUserLog, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, validation_util as ValidationUtil, baseComponent };
 //# sourceMappingURL=osl-base-extended.mjs.map