c3-components 0.10.2 → 0.11.1

package/fesm2022/c3-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, viewChild, inject, Injector, effect, Injectable, input, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, output, computed, HostBinding, model, ElementRef, contentChild, contentChildren } from '@angular/core';
+import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, viewChild, inject, Injector, effect, Injectable, input, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, output, computed, HostBinding, model, ElementRef, contentChild, contentChildren, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
@@ -8,7 +8,7 @@ import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, mergeMap, tap, of, map } from 'rxjs';
+import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, mergeMap, tap, of, map, startWith } from 'rxjs';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/material/button';
@@ -38,6 +38,9 @@ import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$5 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
+import * as i1$6 from '@angular/router';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class C3DropdownComponent {
     constructor(_changeDetectorRef) {
@@ -2173,6 +2176,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 }]
         }] });
 
+class C3MenuService {
+    constructor() {
+        this.selectedElement = null;
+        this.currentRoute = signal('');
+        this.isHeadless = signal(false);
+        this._router = inject(Router);
+        this._ar = inject(ActivatedRoute);
+        this.currentRoute.set(this._router.routerState.snapshot.url);
+        this.currentRouteChange = this._router.events.pipe(filter((status) => status.urlAfterRedirects !== undefined && status.state === undefined), map((status) => {
+            this.currentRoute.set(status.urlAfterRedirects);
+            return status.urlAfterRedirects;
+        }));
+        this.isHeadless.set(this._ar.snapshot.queryParams['headless'] === 'true');
+    }
+    clickItem(event, route) {
+        if (this.selectedElement !== event.target.parentElement.parentElement &&
+            event.target.parentElement.parentElement.tagName === "LI")
+            this.setSelectedItem(event.target.parentElement.parentElement);
+    }
+    setSelectedItem(element) {
+        if (this.selectedElement)
+            this.selectedElement.classList.remove("active-item");
+        this.selectedElement = element;
+        this.selectedElement.classList.add("active-item");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class C3MenuComponent {
+    constructor() {
+        this._c3Menu = inject(C3MenuService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: C3MenuComponent, isStandalone: false, selector: "c3-menu", ngImport: i0, template: "@if(!_c3Menu.isHeadless()) {\n  <div id=\"app-menu\">\n    <div class=\"ui-scroll\">\n      <ul>\n        <ng-content></ng-content>\n      </ul>\n    </div>\n  </div>\n}\n<div class=\"layout-main\" [class.headless]=\"_c3Menu.isHeadless()\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-menu', standalone: false, template: "@if(!_c3Menu.isHeadless()) {\n  <div id=\"app-menu\">\n    <div class=\"ui-scroll\">\n      <ul>\n        <ng-content></ng-content>\n      </ul>\n    </div>\n  </div>\n}\n<div class=\"layout-main\" [class.headless]=\"_c3Menu.isHeadless()\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class C3NavItemComponent {
+    constructor() {
+        this.route = input.required();
+        this.itemTitle = input.required();
+        this.check = input(null);
+        this.isExternal = input(false);
+        this.element = viewChild('button', {
+            read: (ElementRef),
+        });
+        this._menu = inject(C3MenuService);
+        this.destroyRef = inject(DestroyRef);
+        this.currentRouteChangeSubscription = signal(null);
+        effect(() => {
+            if (!this.currentRouteChangeSubscription() && this.element()) {
+                const subscribtion = this._menu.currentRouteChange
+                    .pipe(startWith(this._menu.currentRoute()), map((url) => url), takeUntilDestroyed(this.destroyRef))
+                    .subscribe((url) => {
+                    const _regex = new RegExp(this.check() || this.route());
+                    console.log(_regex, url);
+                    if (_regex.exec(url) && this.element())
+                        this._menu.setSelectedItem(this.element().nativeElement);
+                });
+                this.currentRouteChangeSubscription.set(subscribtion);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: C3NavItemComponent, isStandalone: false, selector: "c3-nav-item", inputs: { route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: true, transformFunction: null }, itemTitle: { classPropertyName: "itemTitle", publicName: "itemTitle", isSignal: true, isRequired: true, transformFunction: null }, check: { classPropertyName: "check", publicName: "check", isSignal: true, isRequired: false, transformFunction: null }, isExternal: { classPropertyName: "isExternal", publicName: "isExternal", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "element", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<li #button>\n  <a matRipple matRippleColor=\"#ffffff66\" [routerLink]=\"isExternal() ? null : route()\" [href]=\"isExternal() ? route() : null\">\n    <ng-content></ng-content>\n    <span> {{ itemTitle() }} </span>\n  </a>\n</li>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3NavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-nav-item', standalone: false, template: "<li #button>\n  <a matRipple matRippleColor=\"#ffffff66\" [routerLink]=\"isExternal() ? null : route()\" [href]=\"isExternal() ? route() : null\">\n    <ng-content></ng-content>\n    <span> {{ itemTitle() }} </span>\n  </a>\n</li>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [] });
+
+class C3MenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3MenuModule, declarations: [C3MenuComponent, C3NavItemComponent], imports: [CommonModule, RouterModule, MatRippleModule], exports: [C3MenuComponent, C3NavItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuModule, imports: [CommonModule, RouterModule, MatRippleModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3MenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RouterModule, MatRippleModule],
+                    declarations: [C3MenuComponent, C3NavItemComponent],
+                    exports: [C3MenuComponent, C3NavItemComponent],
+                    providers: [],
+                }]
+        }] });
+
 /*
  * Public API Surface of c3-components
  */
@@ -2181,5 +2280,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { C3AlertDialogComponent, C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DialogTemplateComponent, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3OpenDialogDirective, C3PreventClickDirective, C3PreventKeyboardEventDirective, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3StopPropagationDirective, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
+export { C3AlertDialogComponent, C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DialogTemplateComponent, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3MenuComponent, C3MenuModule, C3NavItemComponent, C3OpenDialogDirective, C3PreventClickDirective, C3PreventKeyboardEventDirective, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3StopPropagationDirective, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
 //# sourceMappingURL=c3-components.mjs.map