cocori-ng
Version:
Cocori-ng is an Angular full of great components & utilites based on Material
463 lines (455 loc) • 548 kB
JavaScript
import * as i3 from '@angular/cdk/drag-drop';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, ChangeDetectorRef, NgModule, HostListener, Inject, Pipe, Directive, HostBinding, LOCALE_ID } from '@angular/core';
import * as i1 from 'cocori-ng/src/feature-core';
import { InjectComponentService as InjectComponentService$1, BroadcastEventService as BroadcastEventService$1, FormHelperService as FormHelperService$1, TypeButtonEnum as TypeButtonEnum$1, HttpService as HttpService$1, DatasourceService as DatasourceService$1, ValidatorsService as ValidatorsService$1, HelperService as HelperService$1, FormInputComponents as FormInputComponents$1, ButtonIconPositon as ButtonIconPositon$1, QueryBuilder as QueryBuilder$1, WysiwygService as WysiwygService$1, MappingBuilderService as MappingBuilderService$1, HelperUploaderService as HelperUploaderService$1, OdataClass as OdataClass$1, DataSourceType as DataSourceType$1 } from 'cocori-ng/src/feature-core';
import { Subject, BehaviorSubject, takeUntil as takeUntil$1, merge, of, Observable, filter as filter$1, fromEvent } from 'rxjs';
import { takeUntil, filter, tap, debounceTime, map, last, catchError, take, switchMap, finalize } from 'rxjs/operators';
import * as i2$1 from '@angular/material/bottom-sheet';
import { MatBottomSheet, MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { __rest, __awaiter } from 'tslib';
import * as i1$3 from '@angular/flex-layout';
import { FlexLayoutModule } from '@angular/flex-layout';
import * as i1$1 from '@angular/common';
import { CommonModule, formatDate, DOCUMENT } from '@angular/common';
import * as i6 from '@angular/material/sidenav';
import { MatSidenavModule } from '@angular/material/sidenav';
import * as i7 from '@angular/flex-layout/extended';
import * as i3$2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1$4 from 'cocori-ng/src/feature-form';
import { ConfigEvents as ConfigEvents$1, UploaderService as UploaderService$1, CocoringVariableHtmlModule as CocoringVariableHtmlModule$1, CocoringWysiwygModule as CocoringWysiwygModule$1, CocoringColorpickerModule as CocoringColorpickerModule$1, CocoringWysiwygComponent as CocoringWysiwygComponent$1 } from 'cocori-ng/src/feature-form';
import * as i1$2 from '@angular/forms';
import { FormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormArray, ReactiveFormsModule } from '@angular/forms';
import * as i3$1 from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import * as i5$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i3$3 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
import * as i2 from '@angular/flex-layout/flex';
import * as i5 from '@angular/material/core';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import * as i1$5 from '@angular/router';
import { NavigationStart, RouterModule, Router } from '@angular/router';
import * as i3$5 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i3$4 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i1$6 from '@angular/platform-browser';
import { DateTime } from 'luxon';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i5$2 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import * as i8 from 'ngx-mask';
import { NgxMaskModule } from 'ngx-mask';
import * as i4$1 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i3$6 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i1$8 from '@angular/common/http';
import { HttpEventType, HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import SparkMD5 from 'spark-md5';
import * as i1$7 from '@angular/material/snack-bar';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import * as i2$2 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import * as i6$1 from '@tinymce/tinymce-angular';
import { EditorModule } from '@tinymce/tinymce-angular';
import { MatMenuModule } from '@angular/material/menu';
import * as i7$1 from '@angular/material/progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
class AdapterPageCmsService {
/** Adapteur en écriture
* on retourne au back les sections sans les propriétés component et componentReadonly (deconstruct) non utiles pour le back
*/
adapterCommand(sections) {
return sections.map((_a) => {
var { component, componentReadonly } = _a, attributes = __rest(_a, ["component", "componentReadonly"]);
return attributes;
});
}
}
AdapterPageCmsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: AdapterPageCmsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
AdapterPageCmsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: AdapterPageCmsService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: AdapterPageCmsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class CmsService {
constructor(helperService, adapterPageCmsService) {
this.helperService = helperService;
this.adapterPageCmsService = adapterPageCmsService;
this.sectionAdded$ = new Subject();
this.catalogBlocksOpened$ = new BehaviorSubject(false);
this.backgroundColor$ = new Subject();
this.moveSection$ = new Subject();
this.onSaveCmsContent$ = new Subject();
this.sectionRemoved$ = new Subject();
this.sections = [];
this.init();
}
init() {
this.sections.splice(0, this.sections.length);
}
onSectionRemoved() {
return this.sectionRemoved$;
}
sectionsPageDatas() {
return this.adapterPageCmsService.adapterCommand(this.sections);
}
addSection(newSection) {
this.sections.push(newSection);
this.sectionAdded$.next({ section: newSection });
}
getIndexCurrentSection(sectionId) {
return this.sections.findIndex((section) => section.id === sectionId);
}
removeSection(sectionId) {
const index = this.sections.findIndex((section) => section.id === sectionId);
const sectionRemoved = this.sections.splice(index, 1);
this.sectionRemoved$.next({ index: index, section: sectionRemoved[0] });
}
duplicateSection(section) {
const index = this.sections.findIndex((s) => s.id === section.id);
const newIndex = index + 1;
const sectionToDuplicate = this.sections[index];
const sectionDuplicated = JSON.parse(JSON.stringify(sectionToDuplicate));
sectionDuplicated.key = sectionToDuplicate.key;
sectionDuplicated.id = this.helperService.generateGuid();
this.sections.splice(newIndex, 0, sectionDuplicated);
this.sectionAdded$.next({ section: sectionDuplicated, index: newIndex });
}
changeBackgroundColorSection(idSection, value) {
const section = this.sections.find((s) => s.id === idSection);
section.backgroundColor = value;
this.backgroundColor$.next(idSection);
}
moveSection(idSection, orientation) {
const previousIndex = this.sections.findIndex((s) => s.id === idSection);
let currentIndex = previousIndex;
if (orientation === 'move-up' && previousIndex > 0) {
currentIndex = previousIndex - 1;
}
else if (orientation === 'move-down' && previousIndex < this.sections.length - 1) {
currentIndex = previousIndex + 1;
}
this.moveSection$.next({ previousIndex: previousIndex, currentIndex: currentIndex });
}
}
CmsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CmsService, deps: [{ token: i1.HelperService }, { token: AdapterPageCmsService }], target: i0.ɵɵFactoryTarget.Injectable });
CmsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CmsService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CmsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.HelperService }, { type: AdapterPageCmsService }]; } });
class CocoringCmsSectionComponent {
constructor(host, cdr, cmsService, injectComponentService) {
this.host = host;
this.cdr = cdr;
this.cmsService = cmsService;
this.injectComponentService = injectComponentService;
this.afterRemoveAnimation = new EventEmitter();
this.readOnly = true;
this.destroy$ = new Subject();
}
animationDone(event) {
if (event.animationName === 'sectionOut') {
this.afterRemoveAnimation.emit(this.indexSectionRemoved);
}
}
ngOnInit() {
this.addTemplateSectionComponent();
this.catalogBlocksOpenedEvent();
this.onSectionRemoved();
}
ngOnDestroy() {
this.destroy$.next(undefined);
this.destroy$.complete();
}
get container() {
return this.host.nativeElement.querySelector('.cms-section');
}
removeSection() {
this.container.style.animation = 'sectionOut 0.3s';
}
onSectionRemoved() {
this.cmsService.onSectionRemoved().pipe(takeUntil(this.destroy$), filter((sectionRemoved) => sectionRemoved.section.id === this.section.id), tap((sectionRemoved) => this.indexSectionRemoved = sectionRemoved.index), tap(_ => this.removeSection())).subscribe();
}
catalogBlocksOpenedEvent() {
this.cmsService.catalogBlocksOpened$.pipe(takeUntil(this.destroy$), tap((isOpened) => {
this.readOnly = isOpened;
}), tap(_ => this.cdr.detectChanges())).subscribe();
}
addTemplateSectionComponent() {
this.injectComponentService.loadAndAddComponentToContainer(this.section.component, this.containerRef, { section: this.section, apisConfig: this.apisConfig }, null);
}
}
CocoringCmsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringCmsSectionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CmsService }, { token: i1.InjectComponentService }], target: i0.ɵɵFactoryTarget.Component });
CocoringCmsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CocoringCmsSectionComponent, selector: "cocoring-cms-section", inputs: { section: "section", apisConfig: "apisConfig" }, outputs: { afterRemoveAnimation: "afterRemoveAnimation" }, providers: [MatBottomSheet], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["ContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"cms-section\" (animationend)=\"animationDone($event)\">\r\n <div cdkDrag [cdkDragDisabled]=\"!readOnly\" cdkDragLockAxis=\"y\" cdkDragBoundary=\".blocks\">\r\n <ng-template #ContainerRef></ng-template>\r\n <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\r\n <div *cdkDragPreview></div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}.orientation-column .zone-left{margin-bottom:1.5rem}.orientation-column .row-zones{flex-wrap:nowrap!important}.zone-left-mobile{margin-bottom:1.5rem;max-height:100%!important}.cms-section{position:relative}section.cms-block{width:100%;padding:7.5rem 0;margin:0 auto;background-color:#fff}section.cms-block .container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}section.cms-block .container .row{width:100%;display:flex;align-items:flex-start;flex-wrap:wrap}section.cms-block .container .row.row-mobile img{display:block;margin-left:auto!important;margin-right:auto!important;max-width:100%;height:auto;float:none!important}section.cms-block .container .row .zone-editor{padding-left:15px;padding-right:15px;width:100%}section.cms-block .container .row .row-zones{flex-wrap:wrap}section .justify-content-center{justify-content:center}section .container-image-full{min-height:300px;width:100%;height:100%;position:relative}section .background-image-full{background-repeat:no-repeat;background-size:cover;background-position:center;position:relative;height:100%;width:100%}\n", ":host{display:block}.placeholder{background-color:#fff;min-height:200px;border:4px solid rgb(98,98,247)}.cdk-drop-list-dragging section.cms-block:hover{border:8px solid blue!important}.cms-section{animation:sectionIn .5s}cocoring-cms-section section.cms-block{transition:opacity .3s ease-out;transition:box-shadow .3s ease-out;box-shadow:0 0 30px #00000024,0 0 12px #00000029}cocoring-cms-section section.cms-block:hover{opacity:.95}cocoring-cms-section section.cms-block.sidenav-openned{margin-bottom:10px;cursor:pointer}cocoring-cms-section section.cms-block .mce-content-body img{max-width:100%;height:auto}cocoring-cms-section section.cms-block .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks):before{font-size:2.5em;text-align:center;line-height:1em;width:100%}cocoring-cms-section section.cms-block.cms-block{margin:0 auto}cocoring-cms-section section.cms-block.cms-block.orientation-column .zone-editor{max-height:none!important}cocoring-cms-section section.cms-block.cms-block .container .row .zone-editor{border:1px dashed transparent}cocoring-cms-section section.cms-block.cms-block .container .row .zone-editor:hover{border:1px dashed #909090}.sidenav-openned section.cms-block:hover{opacity:.5!important}@keyframes sectionIn{0%{transform:translate(200px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes sectionOut{to{transform:translate(-50%) translateY(-100px);opacity:0}}\n"], dependencies: [{ kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringCmsSectionComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'cocoring-cms-section', providers: [MatBottomSheet], template: "<div class=\"cms-section\" (animationend)=\"animationDone($event)\">\r\n <div cdkDrag [cdkDragDisabled]=\"!readOnly\" cdkDragLockAxis=\"y\" cdkDragBoundary=\".blocks\">\r\n <ng-template #ContainerRef></ng-template>\r\n <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\r\n <div *cdkDragPreview></div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}.orientation-column .zone-left{margin-bottom:1.5rem}.orientation-column .row-zones{flex-wrap:nowrap!important}.zone-left-mobile{margin-bottom:1.5rem;max-height:100%!important}.cms-section{position:relative}section.cms-block{width:100%;padding:7.5rem 0;margin:0 auto;background-color:#fff}section.cms-block .container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}section.cms-block .container .row{width:100%;display:flex;align-items:flex-start;flex-wrap:wrap}section.cms-block .container .row.row-mobile img{display:block;margin-left:auto!important;margin-right:auto!important;max-width:100%;height:auto;float:none!important}section.cms-block .container .row .zone-editor{padding-left:15px;padding-right:15px;width:100%}section.cms-block .container .row .row-zones{flex-wrap:wrap}section .justify-content-center{justify-content:center}section .container-image-full{min-height:300px;width:100%;height:100%;position:relative}section .background-image-full{background-repeat:no-repeat;background-size:cover;background-position:center;position:relative;height:100%;width:100%}\n", ":host{display:block}.placeholder{background-color:#fff;min-height:200px;border:4px solid rgb(98,98,247)}.cdk-drop-list-dragging section.cms-block:hover{border:8px solid blue!important}.cms-section{animation:sectionIn .5s}cocoring-cms-section section.cms-block{transition:opacity .3s ease-out;transition:box-shadow .3s ease-out;box-shadow:0 0 30px #00000024,0 0 12px #00000029}cocoring-cms-section section.cms-block:hover{opacity:.95}cocoring-cms-section section.cms-block.sidenav-openned{margin-bottom:10px;cursor:pointer}cocoring-cms-section section.cms-block .mce-content-body img{max-width:100%;height:auto}cocoring-cms-section section.cms-block .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks):before{font-size:2.5em;text-align:center;line-height:1em;width:100%}cocoring-cms-section section.cms-block.cms-block{margin:0 auto}cocoring-cms-section section.cms-block.cms-block.orientation-column .zone-editor{max-height:none!important}cocoring-cms-section section.cms-block.cms-block .container .row .zone-editor{border:1px dashed transparent}cocoring-cms-section section.cms-block.cms-block .container .row .zone-editor:hover{border:1px dashed #909090}.sidenav-openned section.cms-block:hover{opacity:.5!important}@keyframes sectionIn{0%{transform:translate(200px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes sectionOut{to{transform:translate(-50%) translateY(-100px);opacity:0}}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CmsService }, { type: i1.InjectComponentService }]; }, propDecorators: { containerRef: [{
type: ViewChild,
args: ['ContainerRef', { static: true, read: ViewContainerRef }]
}], section: [{
type: Input
}], apisConfig: [{
type: Input
}], afterRemoveAnimation: [{
type: Output
}] } });
class CocoringCmsBlocksCatalogComponent {
constructor(cmsService, helperService) {
this.cmsService = cmsService;
this.helperService = helperService;
this.catalog = [];
}
ngOnInit() { }
selectBlock(block) {
const newSection = {
id: this.helperService.generateGuid(),
key: block.key,
component: block.data.component,
componentReadonly: null,
backgroundColor: block.data.backgroundColor,
values: block.data.content
};
this.cmsService.addSection(newSection);
}
trackBy(index) {
return index;
}
}
CocoringCmsBlocksCatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringCmsBlocksCatalogComponent, deps: [{ token: CmsService }, { token: i1.HelperService }], target: i0.ɵɵFactoryTarget.Component });
CocoringCmsBlocksCatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CocoringCmsBlocksCatalogComponent, selector: "cocoring-cms-blocks-catalog", inputs: { catalog: "catalog" }, ngImport: i0, template: "<div class=\"catalogue-sections\">\r\n <div class=\"c1\">Catalogue de templates</div>\r\n <div class=\"c2\">cliquez & composez votre page</div>\r\n\r\n</div>\r\n<div class=\"blocks-container\">\r\n <ng-container *ngFor=\"let block of catalog; let i = index; trackBy: trackBy\">\r\n <img src=\"assets/images/cms/design-blocks/{{block.data.filename}}\" (click)=\"selectBlock(block)\" />\r\n </ng-container>\r\n</div>", styles: [":host{display:block}.catalogue-sections{text-align:center;padding:20px;background-color:#f1f1f1;letter-spacing:1px;margin-bottom:5px}.catalogue-sections .c1{text-transform:uppercase;font-size:18px}.catalogue-sections .c1:after{content:\"\";display:block;margin:0 auto;width:20%;padding-top:13px;border-bottom:1px solid black}.catalogue-sections .c2{font-size:13px;padding-top:10px}.blocks-container{column-count:2;column-gap:10px;width:100%;text-align:center}.blocks-container img{width:99%;border:solid 1px #efefef;margin:5px 0;cursor:pointer;transition:box-shadow .1s linear,border .1s linear}.blocks-container img:hover{border:solid 1px #fff;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringCmsBlocksCatalogComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cocoring-cms-blocks-catalog', template: "<div class=\"catalogue-sections\">\r\n <div class=\"c1\">Catalogue de templates</div>\r\n <div class=\"c2\">cliquez & composez votre page</div>\r\n\r\n</div>\r\n<div class=\"blocks-container\">\r\n <ng-container *ngFor=\"let block of catalog; let i = index; trackBy: trackBy\">\r\n <img src=\"assets/images/cms/design-blocks/{{block.data.filename}}\" (click)=\"selectBlock(block)\" />\r\n </ng-container>\r\n</div>", styles: [":host{display:block}.catalogue-sections{text-align:center;padding:20px;background-color:#f1f1f1;letter-spacing:1px;margin-bottom:5px}.catalogue-sections .c1{text-transform:uppercase;font-size:18px}.catalogue-sections .c1:after{content:\"\";display:block;margin:0 auto;width:20%;padding-top:13px;border-bottom:1px solid black}.catalogue-sections .c2{font-size:13px;padding-top:10px}.blocks-container{column-count:2;column-gap:10px;width:100%;text-align:center}.blocks-container img{width:99%;border:solid 1px #efefef;margin:5px 0;cursor:pointer;transition:box-shadow .1s linear,border .1s linear}.blocks-container img:hover{border:solid 1px #fff;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;opacity:.5}\n"] }]
}], ctorParameters: function () { return [{ type: CmsService }, { type: i1.HelperService }]; }, propDecorators: { catalog: [{
type: Input
}] } });
class CocoringPreviewOptionsComponent {
constructor(broadcastEventService) {
this.broadcastEventService = broadcastEventService;
this.responsive = 'computer';
this.orientationComputer = 'computer';
this.orientationTabletLand = 'tablet-land';
this.orientationTabletPort = 'tablet-port';
this.orientationMobile = 'mobile';
}
ngOnInit() {
}
reset() {
this.responsive = this.orientationComputer;
this.broadcastEventService.broadcast({ eventKeys: [ConfigEvents$1.CMS_RESPONSIVE_ORIENTATION_CHANGED], eventData: this.responsive });
}
onResponsiveChange($event) {
this.broadcastEventService.broadcast({ eventKeys: [ConfigEvents$1.CMS_RESPONSIVE_ORIENTATION_CHANGED], eventData: $event });
}
}
CocoringPreviewOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringPreviewOptionsComponent, deps: [{ token: i1.BroadcastEventService }], target: i0.ɵɵFactoryTarget.Component });
CocoringPreviewOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CocoringPreviewOptionsComponent, selector: "cocoring-preview-options", ngImport: i0, template: "<mat-button-toggle-group [(ngModel)]=\"responsive\" (ngModelChange)=\"onResponsiveChange($event)\" class=\"resolutions-group\"\r\n #group=\"matButtonToggleGroup\">\r\n <mat-button-toggle [value]=\"orientationComputer\" title=\"Vision ordinateur\" aria-label=\"Ordinateur\">\r\n <mat-icon>computer</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle [value]=\"orientationTabletLand\" title=\"Vision tablette en mode paysage\"\r\n aria-label=\"Tablette paysage\">\r\n <mat-icon>tablet</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle [value]=\"orientationTabletPort\" title=\"Vision tablette en mode portrait\"\r\n aria-label=\"Tablette portrait\">\r\n <mat-icon>tablet_mac</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle [value]=\"orientationMobile\" title=\"Vision t\u00E9l\u00E9phone\" aria-label=\"T\u00E9l\u00E9phone\">\r\n <mat-icon>phone_iphone</mat-icon>\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringPreviewOptionsComponent, decorators: [{
type: Component,
args: [{ selector: 'cocoring-preview-options', template: "<mat-button-toggle-group [(ngModel)]=\"responsive\" (ngModelChange)=\"onResponsiveChange($event)\" class=\"resolutions-group\"\r\n #group=\"matButtonToggleGroup\">\r\n <mat-button-toggle [value]=\"orientationComputer\" title=\"Vision ordinateur\" aria-label=\"Ordinateur\">\r\n <mat-icon>computer</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle [value]=\"orientationTabletLand\" title=\"Vision tablette en mode paysage\"\r\n aria-label=\"Tablette paysage\">\r\n <mat-icon>tablet</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle [value]=\"orientationTabletPort\" title=\"Vision tablette en mode portrait\"\r\n aria-label=\"Tablette portrait\">\r\n <mat-icon>tablet_mac</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle [value]=\"orientationMobile\" title=\"Vision t\u00E9l\u00E9phone\" aria-label=\"T\u00E9l\u00E9phone\">\r\n <mat-icon>phone_iphone</mat-icon>\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>", styles: [":host{display:block}\n"] }]
}], ctorParameters: function () { return [{ type: i1.BroadcastEventService }]; } });
class CocoringToolbarCmsComponent {
constructor(cmsService) {
this.cmsService = cmsService;
this.showSaveBtn = false;
this.toggleSidenav = new EventEmitter();
}
ngOnInit() { }
saveContentPage() {
this.cmsService.onSaveCmsContent$.next(this.cmsService.sectionsPageDatas());
}
}
CocoringToolbarCmsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringToolbarCmsComponent, deps: [{ token: CmsService }], target: i0.ɵɵFactoryTarget.Component });
CocoringToolbarCmsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CocoringToolbarCmsComponent, selector: "cocoring-toolbar-cms", inputs: { showSaveBtn: "showSaveBtn" }, outputs: { toggleSidenav: "toggleSidenav" }, ngImport: i0, template: "<div class=\"sidenav-header\" style=\"z-index: 9;\">\r\n <div class=\"group-left\">\r\n <cocoring-preview-options></cocoring-preview-options>\r\n </div>\r\n <div class=\"group-right\">\r\n <div *ngIf=\"showSaveBtn\" class=\"toggle-sidenav\" (click)=\"saveContentPage()\">\r\n <mat-icon>save_alt</mat-icon>\r\n </div>\r\n <div class=\"toggle-sidenav\" (click)=\"toggleSidenav.emit()\">\r\n <mat-icon>widgets</mat-icon>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block}.sidenav-header{position:absolute;top:0;left:0;width:-webkit-fill-available;display:flex;justify-content:space-between;background-color:#fff;padding:10px;align-items:center;box-shadow:0 .5rem 1rem #2c33491a}.sidenav-header .group-left,.sidenav-header .group-right{display:flex}.sidenav-header .group-left .mat-icon,.sidenav-header .group-right .mat-icon{padding:0 5px}.sidenav-header .toggle-sidenav{font-size:20px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CocoringPreviewOptionsComponent, selector: "cocoring-preview-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringToolbarCmsComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cocoring-toolbar-cms', template: "<div class=\"sidenav-header\" style=\"z-index: 9;\">\r\n <div class=\"group-left\">\r\n <cocoring-preview-options></cocoring-preview-options>\r\n </div>\r\n <div class=\"group-right\">\r\n <div *ngIf=\"showSaveBtn\" class=\"toggle-sidenav\" (click)=\"saveContentPage()\">\r\n <mat-icon>save_alt</mat-icon>\r\n </div>\r\n <div class=\"toggle-sidenav\" (click)=\"toggleSidenav.emit()\">\r\n <mat-icon>widgets</mat-icon>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block}.sidenav-header{position:absolute;top:0;left:0;width:-webkit-fill-available;display:flex;justify-content:space-between;background-color:#fff;padding:10px;align-items:center;box-shadow:0 .5rem 1rem #2c33491a}.sidenav-header .group-left,.sidenav-header .group-right{display:flex}.sidenav-header .group-left .mat-icon,.sidenav-header .group-right .mat-icon{padding:0 5px}.sidenav-header .toggle-sidenav{font-size:20px;cursor:pointer}\n"] }]
}], ctorParameters: function () { return [{ type: CmsService }]; }, propDecorators: { showSaveBtn: [{
type: Input
}], toggleSidenav: [{
type: Output
}] } });
// import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
// import { MediaChange, MediaObserver } from '@angular/flex-layout';
class CocoringCmsComponent {
constructor(mediaObserver, cdr, cmsService, injectComponentService) {
this.mediaObserver = mediaObserver;
this.cdr = cdr;
this.cmsService = cmsService;
this.injectComponentService = injectComponentService;
this.catalog = [];
this.orientation = 'column';
this._showSaveBtn = false;
this.importSections = [];
this.destroy$ = new Subject();
this.onSaveBtn = new EventEmitter();
this.responsive = 'computer';
this.activeMediaQuery = '';
this.sidenavMode = 'side';
this.isSidenavOpen = false;
this.totalSections = 0;
this.eventSizeScreen();
}
set config(config) {
if (!config) {
throw new Error(`La config du composant CMS n'est pas correcte... config: ${config}`);
}
this.configCms = config;
this.catalog = config.catalog;
this.cmsService.init();
}
set datas(sectionDatas) {
this.importSections = sectionDatas;
}
set showSaveBtn(data) {
this._showSaveBtn = data;
if (data) {
this.onPageSaved();
}
}
ngOnInit() {
this.addSectionEvent();
this.onSectionMoved();
/** on dessine les sections chargées ! */
if (this.importSections.length) {
this.importSections.forEach((section) => {
this.cmsService.addSection(section);
});
}
}
ngOnDestroy() {
this.destroy$.next(undefined);
this.destroy$.complete();
}
onPageSaved() {
this.cmsService.onSaveCmsContent$.pipe(takeUntil(this.destroy$)).subscribe((contentPage) => {
this.onSaveBtn.emit(contentPage);
});
}
eventSizeScreen() {
this.mediaObserver
.asObservable()
.pipe(takeUntil(this.destroy$)).subscribe((change) => {
change.forEach((item) => {
this.activeMediaQuery = item ? `'${item.mqAlias}' = (${item.mediaQuery})` : '';
if (item.mqAlias === 'xs') {
this.sidenavMode = 'over';
}
else {
this.sidenavMode = 'side';
}
});
});
}
toggleSidenavBlocks() {
this.sidenav.toggle();
this.isSidenavOpen = this.sidenav.opened;
this.cmsService.catalogBlocksOpened$.next(this.isSidenavOpen);
}
getPageCMSDatas() {
return this.cmsService.sectionsPageDatas();
}
addSectionEvent() {
this.cmsService.sectionAdded$.pipe(takeUntil(this.destroy$), tap(_ => this.refreshNumberSection()), tap((datas) => {
this.injectComponentService.loadAndAddComponentToContainer(CocoringCmsSectionComponent, this.containerRef, { section: datas.section, apisConfig: this.configCms.wysiwygOptions }, { afterRemoveAnimation: (sectionIndexRemoved) => this.onSectionRemovedAfterAnimation(sectionIndexRemoved) }, datas.index);
})).subscribe();
}
onSectionRemovedAfterAnimation(indexSectionRemoved) {
this.injectComponentService.removeComponentFromViewContainer(indexSectionRemoved, this.containerRef);
this.refreshNumberSection();
}
onSectionMoved() {
this.cmsService.moveSection$.pipe(takeUntil(this.destroy$), tap((values) => {
this.moveSectionContainer({ previousIndex: values.previousIndex, currentIndex: values.currentIndex });
})).subscribe();
}
refreshNumberSection() {
this.totalSections = this.cmsService.sections.length;
this.cdr.detectChanges();
}
dropSection(event) {
this.moveSectionContainer({ previousIndex: event.previousIndex, currentIndex: event.currentIndex });
}
moveSectionContainer(moveIndexes) {
moveItemInArray(this.cmsService.sections, moveIndexes.previousIndex, moveIndexes.currentIndex);
this.injectComponentService.moveComponentFromViewContainer(moveIndexes.currentIndex, moveIndexes.previousIndex, this.containerRef);
}
}
CocoringCmsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringCmsComponent, deps: [{ token: i1$3.MediaObserver }, { token: i0.ChangeDetectorRef }, { token: CmsService }, { token: i1.InjectComponentService }], target: i0.ɵɵFactoryTarget.Component });
CocoringCmsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CocoringCmsComponent, selector: "cocoring-cms", inputs: { config: "config", datas: "datas", showSaveBtn: "showSaveBtn" }, outputs: { onSaveBtn: "onSaveBtn" }, providers: [InjectComponentService$1], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["ContainerRef"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"page\">\r\n <cocoring-toolbar-cms [showSaveBtn]=\"_showSaveBtn\" (toggleSidenav)=\"toggleSidenavBlocks()\"></cocoring-toolbar-cms>\r\n\r\n <div class=\"sidenav-container\">\r\n <mat-sidenav-container class=\"layout-container\" [hasBackdrop]=\"false\" fullscreen>\r\n <mat-sidenav class=\"sidenav-blocks-catalog\" #sidenav [mode]=\"sidenavMode\" position=\"end\" opened=\"false\">\r\n <cocoring-cms-blocks-catalog [catalog]=\"catalog\"></cocoring-cms-blocks-catalog>\r\n </mat-sidenav>\r\n <mat-sidenav-content [ngClass]=\"{'no-margin-right': isSidenavOpen && totalSections}\">\r\n <div class=\"sidenav-content\" [ngClass]=\"{'sidenav-openned': isSidenavOpen}\">\r\n <div *ngIf=\"!totalSections && !isSidenavOpen\" class=\"no-section\" (click)=\"toggleSidenavBlocks()\">\r\n <div>\r\n <h1>Customisez votre page facilement \uD83D\uDC4C </h1>\r\n <p>(cliquez ici pour composer votre page)</p>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isSidenavOpen && !totalSections\" class=\"col-elements\">\r\n <div class=\"texte-preview\">\r\n Aper\u00E7u de votre page\r\n </div>\r\n <div class=\"new-block\">\r\n <h1>Aucune section</h1>\r\n <p>cliquez sur un template pour l'ajouter</p>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"totalSections\" class=\"container-sections\" [ngClass]=\"{'col-elements': isSidenavOpen}\">\r\n <div class=\"blocks\" cdkDropList (cdkDropListDropped)=\"dropSection($event)\">\r\n <ng-template #ContainerRef></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n </div>\r\n</div>", styles: [":host{display:block;height:100%}.page{display:flex;flex-direction:column;height:100%}.page .sidenav-container{flex:1}.page .sidenav-container .layout-container{top:50px}.resolutions-group{border:0}.resolutions-group .mat-button-toggle-appearance-standard{background-color:transparent;color:#fff;border-left:0}.resolutions-group .mat-button-toggle-appearance-standard.mat-button-toggle-checked{color:#2196f3}.resolutions-group ::ng-deep .mat-button-toggle-label-content{line-height:35px;padding:0 10px}.resolutions-group .material-icons{font-size:20px}.mat-drawer-content{background-color:#ecebeb;transition-property:none!important}.sidenav-content{display:flex;flex-direction:column;height:100%;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.sidenav-blocks-catalog{width:calc(75% - 25px);padding:20px 20px 0}.no-section{align-items:center;display:flex;justify-content:center;height:100%;cursor:pointer;text-align:center}.no-margin-right{margin-right:0!important}.container-sections{height:100%;padding-top:20px}.col-elements{overflow:hidden;background-color:#ecebeb}.col-elements .blocks{height:380%;overflow-y:auto;-webkit-transform:scale(.25);-moz-transform:scale(.25);-ms-transform:scale(.25);-o-transform:scale(.25);transform-origin:25px 25px;transition:transform .25s linear}.col-elements .new-block{display:flex;flex-direction:column;margin:20px;padding:0 5px;height:150px;background:#fff;border:solid 3px #f5f5f5;text-align:center;justify-content:center;position:relative}.col-elements .new-block h1{text-transform:uppercase;font-size:15px;margin-bottom:5px}.col-elements .new-block h1:after{content:\"\";display:block;margin:0 auto;width:20%;border-bottom:1px solid black}.texte-preview{text-transform:uppercase;font-size:18px;text-align:center;padding:10px 5px;margin:30px 22px 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: i6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CocoringCmsBlocksCatalogComponent, selector: "cocoring-cms-blocks-catalog", inputs: ["catalog"] }, { kind: "component", type: CocoringToolbarCmsComponent, selector: "cocoring-toolbar-cms", inputs: ["showSaveBtn"], outputs: ["toggleSidenav"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CocoringCmsComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cocoring-cms', providers: [InjectComponentService$1], template: "<div class=\"page\">\r\n <cocoring-toolbar-cms [showSaveBtn]=\"_showSaveBtn\" (toggleSidenav)=\"toggleSidenavBlocks()\"></cocoring-toolbar-cms>\r\n\r\n <div class=\"sidenav-container\">\r\n <mat-sidenav-container class=\"layout-container\" [hasBackdrop]=\"false\" fullscreen>\r\n <mat-sidenav class=\"sidenav-blocks-catalog\" #sidenav [mode]=\"sidenavMode\" position=\"end\" opened=\"false\">\r\n <cocoring-cms-blocks-catalog [catalog]=\"catalog\"></cocoring-cms-blocks-catalog>\r\n </mat-sidenav>\r\n <mat-sidenav-content [ngClass]=\"{'no-margin-right': isSidenavOpen && totalSections}\">\r\n <div class=\"sidenav-content\" [ngClass]=\"{'sidenav-openned': isSidenavOpen}\">\r\n <div *ngIf=\"!totalSections && !isSidenavOpen\" class=\"no-section\" (click)=\"toggleSidenavBlocks()\">\r\n <div>\r\n <h1>Customisez votre page facilement \uD83D\uDC4C </h1>\r\n <p>(cliquez ici pour composer votre page)</p>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isSidenavOpen && !totalSections\" class=\"col-elements\">\r\n <div class=\"texte-preview\">\r\n Aper\u00E7u de votre page\r\n </div>\r\n <div class=\"new-block\">\r\n <h1>Aucune section</h1>\r\n <p>cliquez sur un template pour l'ajouter</p>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"totalSections\" class=\"container-sections\" [ngClass]=\"{'col-elements': isSidenavOpen}\">\r\n <div class=\"blocks\" cdkDropList (cdkDropListDropped)=\"dropSection($event)\">\r\n <ng-template #ContainerRef></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n </div>\r\n</div>", styles: [":host{display:block;height:100%}.page{display:flex;flex-direction:column;height:100%}.page .sidenav-container{flex:1}.page .sidenav-container .layout-container{top:50px}.resolutions-group{border:0}.resolutions-group .mat-button-toggle-appearance-standard{background-color:transparent;color:#fff;border-left:0}.resolutions-group .mat-button-toggle-appearance-standard.mat-button-toggle-checked{color:#2196f3}.resolutions-group ::ng-deep .mat-button-toggle-label-content{line-height:35px;padding:0 10px}.resolutions-group .material-icons{font-size:20px}.mat-drawer-content{background-color:#ecebeb;transition-property:none!important}.sidenav-content{display:flex;flex-direction:column;height:100%;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.sidenav-blocks-catalog{width:calc(75% - 25px);padding:20px 20px 0}.no-section{align-items:center;display:flex;justify-content:center;height:100%;cursor:pointer;text-align:center}.no-margin-right{margin-right:0!important}.container-sections{height:100%;padding-top:20px}.col-elements{overflow:hidden;background-color:#ecebeb}.col-elements .blocks{height:380%;overflow-y:auto;-webkit-transform:scale(.25);-moz-transform:scale(.25);-ms-transform:scale(.25);-o-transform:scale(.25);transform-origin:25px 25px;transition:transform .25s linear}.col-elements .new-block{display:flex;flex-direction:column;margin:20px;padding:0 5px;height:150px;background:#fff;border:solid 3px #f5f5f5;text-align:center;justify-content:center;position:relative}.col-elements .new-block h1{text-transform:uppercase;font-size:15px;margin-bottom:5px}.col-elements .new-block h1:after{content:\"\";display:block;margin:0 auto;width:20%;border-bottom:1px solid black}.texte-preview{text-transform:uppercase;font-size:18px;text-align:center;padding:10px 5px;margin:30px 22px 0}\n"] }]
}], ctorParameters: function () { return [{ type: i1$3.MediaObserver }, { type: i0.ChangeDetectorRef }, { type: CmsService }, { type: i1.InjectComponentService }]; }, propDecorators: { sidenav: [{
type: ViewChild,
args: ['sidenav']
}], containerRef: [{
type: ViewChild,
args: ['ContainerRef', { static: false, read: ViewContainerRef }]
}], config: [{
type: Input
}], datas: [{
type: Input
}], showSaveBtn: [{
type: Input
}], onSaveBtn: [{
type: Output
}] } });
class ExtendPreviewActionsComponent {
constructor(injector) {
this.orientation = 'row';
this.orientationWidth = '100%';
this.destroy$ = new Subject();
this.cdr = injector.get(ChangeDetectorRef);
this.broadcastEventService = injector.get(BroadcastEventService$1);
this.onOrientationChanged();
}
ngOnDestroy() {
this.destroy$.next(undefined);
this.destroy$.complete();
}
onOrientationChanged() {
this.broadcastEventService.listen([ConfigEvents$1.CMS_RESPONSIVE_ORIENTATION_CHANGED]).pipe(takeUntil$1(this.destroy$)).subscribe((orientation) => {
this.getOrientationParams(orientation);
this.cdr.detectChanges();
});
}
getOrientationParams(type) {
this.flexWidth = null;
var orientations = {
'mobile': () => {
this.orientation = 'column';
this.orientationWidth = '375px';
this.flexWidth = '100%';
},
'tablet-port': () => {
this.orientation = 'column';
this.orientationWidth = '768px';
},
'tablet-land': () => {
this.orientation = 'row';
this.orientationWidth = '1024px';
},
'computer': () => {
this.orientation = 'row';
this.orientationWidth = '100%';
}
};
(orientations[type] || orientations['default'])();
}
}
ExtendPreviewActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ExtendPreviewActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
ExtendPreview