@wizishop/angular-components 15.1.86 → 15.1.88

package/fesm2020/wizishop-angular-components.mjs

@@ -923,6 +923,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
                 args: ['style.cursor']
             }] } });
 
+// watch dom change and fire (dom-changed) event
+class DomChangedDirective {
+    constructor(elRef) {
+        this.elRef = elRef;
+    }
+    ngOnInit() {
+        this.registerDomChangedEvent(this.elRef.nativeElement);
+    }
+    registerDomChangedEvent(el) {
+        const observer = new MutationObserver(list => {
+            const evt = new CustomEvent('dom-changed', { detail: list, bubbles: true });
+            el.dispatchEvent(evt);
+        });
+        const attributes = false;
+        const childList = true;
+        const subtree = true;
+        observer.observe(el, { attributes, childList, subtree });
+    }
+}
+DomChangedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: DomChangedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DomChangedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: DomChangedDirective, selector: "[watchDomTree]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: DomChangedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[watchDomTree]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 const directives$2 = [
     DebounceKeyupDirective,
     AbstractDebounceDirective,
@@ -936,6 +964,7 @@ const directives$2 = [
     TwoDigitDecimalNumberDirective,
     RadioDirective,
     RadioGroupDirective,
+    DomChangedDirective
 ];
 class SharedDirectives {
 }
@@ -951,7 +980,8 @@ SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         OnlyNumberDirective,
         TwoDigitDecimalNumberDirective,
         RadioDirective,
-        RadioGroupDirective], imports: [CommonModule, FormsModule, CopyToClipBoardDirective, ScrollToDirective], exports: [DebounceKeyupDirective,
+        RadioGroupDirective,
+        DomChangedDirective], imports: [CommonModule, FormsModule, CopyToClipBoardDirective, ScrollToDirective], exports: [DebounceKeyupDirective,
         AbstractDebounceDirective,
         AutoHideDirective,
         ZindexToggleDirective,
@@ -962,7 +992,8 @@ SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         OnlyNumberDirective,
         TwoDigitDecimalNumberDirective,
         RadioDirective,
-        RadioGroupDirective, CopyToClipBoardDirective, ScrollToDirective] });
+        RadioGroupDirective,
+        DomChangedDirective, CopyToClipBoardDirective, ScrollToDirective] });
 SharedDirectives.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SharedDirectives, imports: [CommonModule, FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SharedDirectives, decorators: [{
             type: NgModule,
@@ -6128,41 +6159,47 @@ class RowComponent {
             this.handleResponsiveAuto(size);
         }
     }
-    ngAfterContentInit() {
-        setTimeout(() => {
-            this.childs = this.container.nativeElement.childElementCount;
-            if (this.width) {
-                document.getElementById(this.id).parentElement.style.maxWidth = this.width;
-            }
-            if (this.height) {
-                document.getElementById(this.id).parentElement.style.maxHeight = this.height;
-            }
-            if ((this.childs > 1 && this.marginChild) || this.multipleLine) {
-                for (let i = 0; i < this.childs; i++) {
-                    const child = document.getElementById(this.id).children[i];
-                    child.style.marginLeft = this.halfMarginChild;
-                    child.style.marginRight = this.halfMarginChild;
-                    if (this.multipleLine) {
-                        child.style.width = 'calc(' + (100 / this.childrenByLine) + '% - ' + this.marginChild + ')';
-                    }
+    actionsDom() {
+        this.childs = this.container.nativeElement.childElementCount;
+        if (this.width) {
+            document.getElementById(this.id).parentElement.style.maxWidth = this.width;
+        }
+        if (this.height) {
+            document.getElementById(this.id).parentElement.style.maxHeight = this.height;
+        }
+        if ((this.childs > 1 && this.marginChild) || this.multipleLine) {
+            for (let i = 0; i < this.childs; i++) {
+                const child = document.getElementById(this.id).children[i];
+                child.style.marginLeft = this.halfMarginChild;
+                child.style.marginRight = this.halfMarginChild;
+                if (this.multipleLine) {
+                    child.style.width = 'calc(' + (100 / this.childrenByLine) + '% - ' + this.marginChild + ')';
                 }
             }
-            if (this.childs > 1 && this.marginBottomChild) {
-                for (let i = 0; i < this.childs; i++) {
-                    const child = document.getElementById(this.id).children[i];
-                    child.style.marginBottom = this.marginBottomChild;
-                }
+        }
+        if (this.childs > 1 && this.marginBottomChild) {
+            for (let i = 0; i < this.childs; i++) {
+                const child = document.getElementById(this.id).children[i];
+                child.style.marginBottom = this.marginBottomChild;
             }
-            this.nbChildsClass = 'nb-child-' + this.childs;
-            this.onResize();
+        }
+        this.nbChildsClass = 'nb-child-' + this.childs;
+        this.onResize();
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            this.actionsDom();
         }, 1);
     }
+    handleDomChange(event) {
+        this.actionsDom();
+    }
 }
 RowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: RowComponent, selector: "wac-row", inputs: { position: "position", width: "width", height: "height", responsiveAuto: "responsiveAuto", childrensWidthAuto: "childrensWidthAuto", visibility: "visibility", marginChild: "marginChild", marginBottom: "marginBottom", marginBottomChild: "marginBottomChild", addWacBlock: "addWacBlock", lineDisplayContent: "lineDisplayContent", border: "border", multipleLine: "multipleLine", childrenByLine: "childrenByLine", padding: "padding", lastChildIsDown: "lastChildIsDown", addClass: "addClass" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{addClass}} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+RowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: RowComponent, selector: "wac-row", inputs: { position: "position", width: "width", height: "height", responsiveAuto: "responsiveAuto", childrensWidthAuto: "childrensWidthAuto", visibility: "visibility", marginChild: "marginChild", marginBottom: "marginBottom", marginBottomChild: "marginBottomChild", addWacBlock: "addWacBlock", lineDisplayContent: "lineDisplayContent", border: "border", multipleLine: "multipleLine", childrenByLine: "childrenByLine", padding: "padding", lastChildIsDown: "lastChildIsDown", addClass: "addClass" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div watchDomTree (dom-changed)=\"handleDomChange($event)\" [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{addClass}} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DomChangedDirective, selector: "[watchDomTree]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-row', encapsulation: ViewEncapsulation.None, template: "<div [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{addClass}} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'wac-row', encapsulation: ViewEncapsulation.None, template: "<div watchDomTree (dom-changed)=\"handleDomChange($event)\" [ngStyle]=\"{'padding': padding,'margin-bottom': marginBottom,'transform': (childs > 1 || multipleLine ? 'translateX(-' + halfMarginChild + ')' : 'wrong'), 'width': ((childs > 1 && !addWacBlock) || multipleLine ? 'calc(100% + ' + marginChild  + ')' : 'wrong')}\" class=\"wac-row {{ addWacBlock ? 'white-block' : '' }} {{ multipleLine ? 'multiple-line' : '' }} {{ lineDisplayContent ? 'direction-column' : '' }} {{ border ? 'with-border' : '' }} {{ lastChildIsDown ? 'last-child-down' : '' }} {{ childrensWidthAuto ? 'childrens-width-auto' : '' }} {{ position ? position : '' }} {{ visibility ? visibility : '' }} {{ responsiveClass ? responsiveClass : '' }} {{addClass}} {{nbChildsClass}} {{classWidth}}\" #container [ngClass]=\"{\n  'multiple-child': childs > 3,\n  'five-or-more-child': childs > 4,\n  'alone': childs === 1\n}\" [id]=\"id\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { position: [{
                 type: Input
             }], width: [{
@@ -6801,5 +6838,5 @@ const switchInOut = trigger('switchInOut', [
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AiExpressComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CallComponentFunctionPipe, CardPriceComponent, ChargingBarComponent, CheckBoxRow, CheckboxComponent, ColumnComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, CopyToClipBoardDirective, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpandedPanelComponent, ExpansionExport, ExpansionModule, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FindOptionSelectedPipe, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HistoryService, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OnlyNumberDirective, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, RadioDirective, RadioGroupDirective, RowComponent, ScrollToDirective, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TabsComponent, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, TwoDigitDecimalNumberDirective, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, animateListFromBottom, animateListFromLeft, animateListFromRight, animateListFromTop, distinctUntilTableFiltersChanged, inOutX, inOutY, opacityAnimation, showFromBottom, showFromLeft, showFromRight, showFromTop, switchInOut, updateTableFiltersTotalItems, uuid };
+export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AiExpressComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CallComponentFunctionPipe, CardPriceComponent, ChargingBarComponent, CheckBoxRow, CheckboxComponent, ColumnComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, CopyToClipBoardDirective, DebounceKeyupDirective, DeleteComponent, DomChangedDirective, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpandedPanelComponent, ExpansionExport, ExpansionModule, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FindOptionSelectedPipe, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HistoryService, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OnlyNumberDirective, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, RadioDirective, RadioGroupDirective, RowComponent, ScrollToDirective, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TabsComponent, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, TwoDigitDecimalNumberDirective, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, animateListFromBottom, animateListFromLeft, animateListFromRight, animateListFromTop, distinctUntilTableFiltersChanged, inOutX, inOutY, opacityAnimation, showFromBottom, showFromLeft, showFromRight, showFromTop, switchInOut, updateTableFiltersTotalItems, uuid };
 //# sourceMappingURL=wizishop-angular-components.mjs.map