@wizishop/angular-components 14.2.4 → 14.3.2

package/fesm2020/wizishop-angular-components.mjs

@@ -3530,45 +3530,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }] } });
 
+class BlockSeparatorComponent {
+    constructor() { }
+}
+BlockSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BlockSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: BlockSeparatorComponent, selector: "wac-block-separator", ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wac-block-separator',
+                    template: ``,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return []; } });
+
 class BlockComponent {
-    constructor() {
-        this.titleBlock = ''; // Titre interne au block
-        this.titleExternalBlock = false; // Titre externe au block
-        this.sticky = false; // add sticky to block
-        this.simple = false;
-        this.noFullHeight = false; // not full height
-        this.icon = '';
-        this.titleUppercase = true;
-        this.borderRadius = false;
-        this.removePadding = false;
-        this.stretchHeight = false;
+    constructor(renderer2, wacBlockElementRef) {
+        this.renderer2 = renderer2;
+        this.wacBlockElementRef = wacBlockElementRef;
+        this.config = {
+            borderRadius: '3px'
+        };
+        this.destroy$ = new Subject();
+    }
+    get borderRadius() {
+        return `--wac-block-border-radius: ${this.config.borderRadius ? this.config.borderRadius : '3px'};`;
+    }
+    ngAfterViewInit() {
+        const groupedNodesList = this.getSeparatedGroupedOfNodes(this.wacBlockElementRef.nativeElement.childNodes);
+        this.attachSeparatedBlocksToTheDom(groupedNodesList, this.wacBlockElementRef.nativeElement);
+        this.blockSeparators
+            .changes.pipe(takeUntil$1(this.destroy$))
+            .subscribe(() => {
+            this.handleAddedSeparator();
+            setTimeout(() => {
+                this.handleRemovedSeparator();
+            }, 0);
+        });
+    }
+    handleRemovedSeparator() {
+        const wacBlockComponentChildNodes = this.wacBlockElementRef.nativeElement.childNodes;
+        for (let i = 0; i < wacBlockComponentChildNodes.length; i++) {
+            const childNode = wacBlockComponentChildNodes[i];
+            const nextChild = wacBlockComponentChildNodes[i + 1];
+            const areWacBlockSideBySide = nextChild && childNode.classList.contains('wac-block') && nextChild.classList.contains('wac-block');
+            if (!areWacBlockSideBySide) {
+                continue;
+            }
+            const parentElement = this.wacBlockElementRef.nativeElement;
+            this.fusionNextBlockWithCurrentBlock(parentElement, nextChild, childNode);
+            i--; // we remove a child, so we need to go back to the previous index
+        }
+    }
+    fusionNextBlockWithCurrentBlock(parentElement, nextChild, childNode) {
+        parentElement.removeChild(nextChild); // not working with renderer2, it just freeze the app
+        childNode.append(...nextChild.childNodes);
+    }
+    handleAddedSeparator() {
+        const wacBlockComponentChildNodes = [...this.wacBlockElementRef.nativeElement.childNodes];
+        for (let i = 0; i < wacBlockComponentChildNodes.length; i++) {
+            const childNode = wacBlockComponentChildNodes[i];
+            if (childNode.nodeName === 'WAC-BLOCK-SEPARATOR') {
+                continue;
+            }
+            if (!this.hasBlockSeparator(childNode.childNodes)) {
+                continue;
+            }
+            const groupedNodesList = this.getSeparatedGroupedOfNodes(childNode.childNodes);
+            groupedNodesList.shift(); // remove first group, it's the current block
+            this.attachSeparatedBlocksToTheDom(groupedNodesList, this.wacBlockElementRef.nativeElement, wacBlockComponentChildNodes[i + 1]);
+        }
+    }
+    hasBlockSeparator(childNodes) {
+        return [...childNodes].some(groupedNodes => groupedNodes?.nodeName === 'WAC-BLOCK-SEPARATOR');
+    }
+    attachSeparatedBlocksToTheDom(groupedNodesList, parentElement, nextElement) {
+        for (let index = 0; index < groupedNodesList.length; index++) {
+            const groupedNodes = groupedNodesList[index];
+            if (groupedNodes[0]?.nodeName === 'WAC-BLOCK-SEPARATOR') {
+                this.attachToTheDom(groupedNodes[0], parentElement, nextElement);
+                continue;
+            }
+            const separatedWacBlock = document.createElement('div');
+            separatedWacBlock.classList.add('wac-block');
+            groupedNodes.forEach(node => {
+                separatedWacBlock.appendChild(node);
+            });
+            this.attachToTheDom(separatedWacBlock, parentElement, nextElement);
+        }
+    }
+    attachToTheDom(child, parentElement, nextElement) {
+        if (nextElement) {
+            this.renderer2.insertBefore(parentElement, child, nextElement, true);
+        }
+        else {
+            this.renderer2.appendChild(parentElement, child);
+        }
+    }
+    getSeparatedGroupedOfNodes(childNodes) {
+        const groupedNodesList = [];
+        let followingNodes = [];
+        for (const node of childNodes) {
+            if (node.nodeName === 'WAC-BLOCK-SEPARATOR') {
+                groupedNodesList.push(followingNodes, [node]); // close a group and start a new one
+                followingNodes = [];
+                continue;
+            }
+            followingNodes.push(node);
+        }
+        if (followingNodes.length) {
+            groupedNodesList.push(followingNodes);
+        }
+        return groupedNodesList;
+    }
+    ngOnDesTroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
 }
-BlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: BlockComponent, selector: "wac-block", inputs: { titleBlock: "titleBlock", titleExternalBlock: "titleExternalBlock", sticky: "sticky", simple: "simple", noFullHeight: "noFullHeight", icon: "icon", titleUppercase: "titleUppercase", borderRadius: "borderRadius", removePadding: "removePadding", stretchHeight: "stretchHeight" }, ngImport: i0, template: "<div\n  class=\"wac-block\"\n  [ngClass]=\"{ 'wac-block__external': titleExternalBlock, sticky: sticky, noFullHeight: noFullHeight, 'stretch': stretchHeight, 'border-radius': borderRadius, 'no-padding' : removePadding }\"\n>\n  <h2 *ngIf=\"titleBlock.length\" class=\"wac-block__title\" [ngClass]=\"{ 'is-simple': simple, 'no-uppercase': !titleUppercase }\">\n    {{ titleBlock }} <i *ngIf=\"icon\" [ngClass]=\"icon\"></i>\n  </h2>\n  <div class=\"wac-block__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: BlockComponent, selector: "wac-block", inputs: { config: "config" }, host: { properties: { "style": "this.borderRadius" } }, queries: [{ propertyName: "blockSeparators", predicate: BlockSeparatorComponent }], ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-block', template: "<div\n  class=\"wac-block\"\n  [ngClass]=\"{ 'wac-block__external': titleExternalBlock, sticky: sticky, noFullHeight: noFullHeight, 'stretch': stretchHeight, 'border-radius': borderRadius, 'no-padding' : removePadding }\"\n>\n  <h2 *ngIf=\"titleBlock.length\" class=\"wac-block__title\" [ngClass]=\"{ 'is-simple': simple, 'no-uppercase': !titleUppercase }\">\n    {{ titleBlock }} <i *ngIf=\"icon\" [ngClass]=\"icon\"></i>\n  </h2>\n  <div class=\"wac-block__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { titleBlock: [{
-                type: Input
-            }], titleExternalBlock: [{
-                type: Input
-            }], sticky: [{
-                type: Input
-            }], simple: [{
-                type: Input
-            }], noFullHeight: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], titleUppercase: [{
+            args: [{ selector: 'wac-block', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { blockSeparators: [{
+                type: ContentChildren,
+                args: [BlockSeparatorComponent]
+            }], config: [{
                 type: Input
             }], borderRadius: [{
-                type: Input
-            }], removePadding: [{
-                type: Input
-            }], stretchHeight: [{
-                type: Input
+                type: HostBinding,
+                args: ['style']
             }] } });
 
 class WrapperComponent {
@@ -5327,6 +5419,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 }]
         }] });
 
+class BlockTitleLegacyComponent {
+    constructor() {
+        this.simple = false;
+        this.icon = '';
+    }
+}
+BlockTitleLegacyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockTitleLegacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BlockTitleLegacyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: BlockTitleLegacyComponent, selector: "wac-block-title-legacy", inputs: { simple: "simple", icon: "icon" }, ngImport: i0, template: "<h2 class=\"wac-block__title\" [ngClass]=\"{ 'is-simple': simple }\">\n    <ng-content></ng-content> <i *ngIf=\"icon\" [ngClass]=\"icon\"></i>\n</h2>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockTitleLegacyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-block-title-legacy', encapsulation: ViewEncapsulation.None, template: "<h2 class=\"wac-block__title\" [ngClass]=\"{ 'is-simple': simple }\">\n    <ng-content></ng-content> <i *ngIf=\"icon\" [ngClass]=\"icon\"></i>\n</h2>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { simple: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
 ;
 class SummaryComponent {
     constructor() {
@@ -5401,6 +5510,7 @@ const components = [
     PopinComponent,
     FreePopinComponent,
     BlockComponent,
+    BlockTitleLegacyComponent,
     WrapperComponent,
     FiltersComponent,
     WrapperBlocsComponent,
@@ -5424,6 +5534,7 @@ const components = [
     ContentWithButtonsComponent,
     WrapperMultipleBlockComponent,
     DraganddropListComponent,
+    BlockSeparatorComponent,
     SummaryComponent
 ];
 const exportsFromModule = [
@@ -5480,6 +5591,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         PopinComponent,
         FreePopinComponent,
         BlockComponent,
+        BlockTitleLegacyComponent,
         WrapperComponent,
         FiltersComponent,
         WrapperBlocsComponent,
@@ -5503,6 +5615,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ContentWithButtonsComponent,
         WrapperMultipleBlockComponent,
         DraganddropListComponent,
+        BlockSeparatorComponent,
         SummaryComponent], imports: [CommonModule,
         FormsModule,
         NwbAllModule, i1$3.TranslateModule, ReactiveFormsModule,
@@ -5561,6 +5674,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         PopinComponent,
         FreePopinComponent,
         BlockComponent,
+        BlockTitleLegacyComponent,
         WrapperComponent,
         FiltersComponent,
         WrapperBlocsComponent,
@@ -5584,6 +5698,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ContentWithButtonsComponent,
         WrapperMultipleBlockComponent,
         DraganddropListComponent,
+        BlockSeparatorComponent,
         SummaryComponent, PaginationComponent,
         TableComponent,
         TableColumn,
@@ -5703,5 +5818,5 @@ class TableFiltersGroup extends NwbFilterGroup {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
+export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
 //# sourceMappingURL=wizishop-angular-components.mjs.map