@wizishop/angular-components 15.1.76 → 15.1.77

package/fesm2020/wizishop-angular-components.mjs

@@ -1,7 +1,7 @@
 import * as i3 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule, NwbFilterGroup } from '@wizishop/ng-wizi-bulma';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, HostBinding, ContentChildren, NgModule, Inject, Pipe, ChangeDetectionStrategy, Attribute, Optional, ViewChild, ContentChild } from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, HostBinding, ContentChildren, NgModule, Inject, Pipe, TemplateRef, ChangeDetectionStrategy, ContentChild, ViewChild, forwardRef, Attribute, Optional } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, DatePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -17,6 +17,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CdkTableModule } from '@angular/cdk/table';
 import { trigger, transition, style, animate, state, animation, query, stagger } from '@angular/animations';
 import { TagInputModule } from 'ngx-chips';
+import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i3$1 from 'ngx-autosize';
 import { AutosizeModule } from 'ngx-autosize';
 import * as i1$3 from '@angular/router';
@@ -1979,23 +1980,90 @@ class TabComponent {
     get selected() {
         return this._selected;
     }
-    constructor(changeDetectorRef) {
+    get content() {
+        return this.contentPortal;
+    }
+    constructor(changeDetectorRef, viewContainerRef) {
         this.changeDetectorRef = changeDetectorRef;
+        this.viewContainerRef = viewContainerRef;
         this._selected = false;
+        this.contentPortal = null;
+        this._explicitContent = undefined;
+    }
+    ngOnInit() {
+        this.contentPortal = new TemplatePortal(this._explicitContent || this._implicitContent, this.viewContainerRef);
     }
 }
-TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabComponent, isStandalone: true, selector: "wac-tab", inputs: { label: "label", selected: "selected" }, ngImport: i0, template: "<div class=\"wac-tab\">\n  <ng-content *ngIf=\"selected\"></ng-content>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabComponent, isStandalone: true, selector: "wac-tab", inputs: { label: "label", selected: "selected" }, queries: [{ propertyName: "_explicitContent", first: true, predicate: TabComponent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-tab', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tab\">\n  <ng-content *ngIf=\"selected\"></ng-content>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
+            args: [{ selector: 'wac-tab', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template><ng-content></ng-content></ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { label: [{
                 type: Input
             }], selected: [{
                 type: Input
+            }], _explicitContent: [{
+                type: ContentChild,
+                args: [TabComponent, { read: TemplateRef, static: true }]
+            }], _implicitContent: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+class TabBodyDirective extends CdkPortalOutlet {
+    constructor(componentFactoryResolver, viewContainerRef, document, host) {
+        super(componentFactoryResolver, viewContainerRef, document);
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.document = document;
+        this.host = host;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.attach(this.host.content);
+    }
+}
+TabBodyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabBodyDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: forwardRef(() => TabBodyComponent) }], target: i0.ɵɵFactoryTarget.Directive });
+TabBodyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: TabBodyDirective, isStandalone: true, selector: "[wacTabBody]", exportAs: ["wacTabBody"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wacTabBody]',
+                    exportAs: 'wacTabBody',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: TabBodyComponent, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => TabBodyComponent)]
+                }] }]; } });
+
+class TabBodyComponent {
+    get display() {
+        return (this.active ? 'initial' : 'none');
+    }
+}
+TabBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabBodyComponent, isStandalone: true, selector: "wac-tab-body", inputs: { content: "content", active: "active" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0, template: "<div class=\"wac-tab-body\" #content>\n  <ng-template wacTabBody></ng-template>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TabBodyDirective, selector: "[wacTabBody]", exportAs: ["wacTabBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-tab-body', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, TabBodyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tab-body\" #content>\n  <ng-template wacTabBody></ng-template>\n</div>" }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
             }] } });
 
 class TabsComponent {
+    get defaultViewModel() {
+        return { index: 0, tabList: [], listIsOpen: false, selected: null };
+    }
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
         this.disabled = false;
@@ -2062,12 +2130,12 @@ class TabsComponent {
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TabsComponent, isStandalone: true, selector: "wac-tabs", inputs: { underline: "underline", button: "button", right: "right", marginBottom: "marginBottom" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\n *ngIf=\"viewModel$ | async as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\n *ngIf=\"((viewModel$ | async) || defaultViewModel ) as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n  <wac-tab-body\n    *ngFor=\"let tab of tabList; let i = index\"\n    [content]=\"tab.content\"\n    [active]=\"i === viewModel.index\"\n  ></wac-tab-body>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "component", type: TabBodyComponent, selector: "wac-tab-body", inputs: ["content", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-tabs', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, TabComponent, SharedDirectives], providers: [
+            args: [{ selector: 'wac-tabs', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, TabComponent, SharedDirectives, TabBodyComponent], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tabs\"\n *ngIf=\"viewModel$ | async as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tabs\"\n *ngIf=\"((viewModel$ | async) || defaultViewModel ) as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n  <wac-tab-body\n    *ngFor=\"let tab of tabList; let i = index\"\n    [content]=\"tab.content\"\n    [active]=\"i === viewModel.index\"\n  ></wac-tab-body>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabList: [{
                 type: ContentChildren,
                 args: [TabComponent]