cocori-ng/fesm2015/cocori-ng-src-feature-cms.mjs.map

Cocori-ng is an Angular full of great components & utilites based on Material

{"version":3,"file":"cocori-ng-src-feature-cms.mjs","sources":["../../../projects/cocori-ng/src/feature-cms/core/service/adapter-page-cms.service.ts","../../../projects/cocori-ng/src/feature-cms/core/service/cms.service.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-section/cocoring-cms-section.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-section/cocoring-cms-section.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-blocks-catalog/cocoring-cms-blocks-catalog.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-blocks-catalog/cocoring-cms-blocks-catalog.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-preview-options/cocoring-preview-options.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-preview-options/cocoring-preview-options.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-toolbar-cms/cocoring-toolbar-cms.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-toolbar-cms/cocoring-toolbar-cms.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms/cocoring-cms.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms/cocoring-cms.component.html","../../../projects/cocori-ng/src/feature-cms/shared/extend-preview-actions.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/section-tpl/section-tpl.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/section-tpl/section-tpl.component.html","../../../projects/cocori-ng/src/feature-cms/shared/shared-cms.module.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-image-upload/cocoring-cms-image-upload.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-image-upload/cocoring-cms-image-upload.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-section-actions/cocoring-cms-section-actions.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-section-actions/cocoring-cms-section-actions.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms.module.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-readonly/cocoring-cms-readonly-section/cocoring-cms-readonly-section.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-readonly/cocoring-cms-readonly-section/cocoring-cms-readonly-section.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-readonly/cocoring-cms-readonly/cocoring-cms-readonly.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-readonly/cocoring-cms-readonly/cocoring-cms-readonly.component.html","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-readonly/cocoring-cms-readonly.module.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-editor/cocoring-cms-section/extend-section-tpl.component.ts","../../../projects/cocori-ng/src/feature-cms/shared/component-cms-readonly/cocoring-cms-readonly-section/extend-section-readonly-tpl.component.ts","../../../projects/cocori-ng/src/feature-cms/cocori-ng-src-feature-cms.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\nimport { SectionModel, SectionModelCommand } from '../model/cms.model';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class AdapterPageCmsService {\r\n\r\n  /** Adapteur en écriture \r\n   *  on retourne au back les sections sans les propriétés component et componentReadonly (deconstruct) non utiles pour le back\r\n  */\r\n  public adapterCommand(sections: SectionModel[]): SectionModelCommand[] {\r\n    return sections.map(({ component, componentReadonly, ...attributes }) => attributes)\r\n  }\r\n}","import { Injectable } from '@angular/core';\r\nimport { HelperService } from 'cocori-ng/src/feature-core';\r\nimport { BehaviorSubject, Subject } from 'rxjs';\r\n\r\nimport {\r\n  InsertSectionAt,\r\n  MoveOrientationSectionActions,\r\n  SectionModel,\r\n  SectionModelCommand,\r\n  SectionMoveIndexes,\r\n} from '../model/cms.model';\r\nimport { AdapterPageCmsService } from './adapter-page-cms.service';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class CmsService {\r\n  public sectionAdded$: Subject<InsertSectionAt> = new Subject<InsertSectionAt>();\r\n  public catalogBlocksOpened$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\r\n  public backgroundColor$: Subject<string> = new Subject<string>();\r\n  public moveSection$: Subject<SectionMoveIndexes> = new Subject<SectionMoveIndexes>();\r\n  public onSaveCmsContent$: Subject<SectionModelCommand[]> = new Subject<SectionModelCommand[]>();\r\n  private sectionRemoved$: Subject<InsertSectionAt> = new Subject<InsertSectionAt>();\r\n\r\n  public sections: SectionModel[] = []\r\n\r\n  constructor(\r\n    private helperService: HelperService,\r\n    private adapterPageCmsService: AdapterPageCmsService) {\r\n    this.init()\r\n  }\r\n\r\n  public init() {\r\n    this.sections.splice(0, this.sections.length)\r\n  }\r\n\r\n  public onSectionRemoved(): Subject<InsertSectionAt> {\r\n    return this.sectionRemoved$\r\n  }\r\n\r\n  public sectionsPageDatas(): SectionModelCommand[] {\r\n    return this.adapterPageCmsService.adapterCommand(this.sections)\r\n  }\r\n\r\n  public addSection(newSection: SectionModel) {\r\n    this.sections.push(newSection)\r\n\r\n    this.sectionAdded$.next({ section: newSection })\r\n  }\r\n\r\n  public getIndexCurrentSection(sectionId: string): number {\r\n    return this.sections.findIndex((section: SectionModel) => section.id === sectionId)\r\n  }\r\n\r\n  public removeSection(sectionId: string) {\r\n    const index: number = this.sections.findIndex((section: SectionModel) => section.id === sectionId)\r\n\r\n    const sectionRemoved: SectionModel[] = this.sections.splice(index, 1)\r\n\r\n    this.sectionRemoved$.next(<InsertSectionAt>{ index: index, section: sectionRemoved[0] })\r\n  }\r\n\r\n  public duplicateSection(section: SectionModel) {\r\n    const index: number = this.sections.findIndex((s: SectionModel) => s.id === section.id)\r\n\r\n    const newIndex: number = index + 1\r\n\r\n    const sectionToDuplicate: SectionModel = this.sections[index]\r\n\r\n    const sectionDuplicated: SectionModel = JSON.parse(JSON.stringify(sectionToDuplicate));\r\n\r\n    sectionDuplicated.key = sectionToDuplicate.key\r\n    sectionDuplicated.id = this.helperService.generateGuid()\r\n\r\n    this.sections.splice(newIndex, 0, sectionDuplicated)\r\n\r\n    this.sectionAdded$.next({ section: sectionDuplicated, index: newIndex })\r\n  }\r\n\r\n  public changeBackgroundColorSection(idSection: string, value: string) {\r\n    const section: SectionModel = this.sections.find((s: SectionModel) => s.id === idSection)\r\n\r\n    section.backgroundColor = value\r\n\r\n    this.backgroundColor$.next(idSection)\r\n  }\r\n\r\n  public moveSection(idSection: string, orientation: MoveOrientationSectionActions) {\r\n    const previousIndex: number = this.sections.findIndex((s: SectionModel) => s.id === idSection)\r\n    let currentIndex: number = previousIndex\r\n\r\n    if (orientation === 'move-up' && previousIndex > 0) {\r\n      currentIndex = previousIndex - 1\r\n    } else if (orientation === 'move-down' && previousIndex < this.sections.length - 1) {\r\n      currentIndex = previousIndex + 1\r\n    }\r\n\r\n    this.moveSection$.next({ previousIndex: previousIndex, currentIndex: currentIndex })\r\n  }\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  OnDestroy,\r\n  OnInit,\r\n  Output,\r\n  ViewChild,\r\n  ViewContainerRef,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { MatBottomSheet } from '@angular/material/bottom-sheet';\r\nimport { InjectComponentService } from 'cocori-ng/src/feature-core';\r\nimport { Subject } from 'rxjs';\r\nimport { filter, takeUntil, tap } from 'rxjs/operators';\r\n\r\nimport { ApisConfigCmsModel, InsertSectionAt as SectionIndex, SectionModel } from '../../../core/model/cms.model';\r\nimport { CmsService } from '../../../core/service/cms.service';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  selector: 'cocoring-cms-section',\r\n  templateUrl: './cocoring-cms-section.component.html',\r\n  styleUrls: ['../../section-styles/section-styles.component.scss', './cocoring-cms-section.component.scss'],\r\n  providers: [MatBottomSheet]\r\n})\r\nexport class CocoringCmsSectionComponent implements OnInit, OnDestroy {\r\n  @ViewChild('ContainerRef', { static: true, read: ViewContainerRef }) containerRef: ViewContainerRef;\r\n\r\n  @Input() section: SectionModel\r\n  @Input() apisConfig: ApisConfigCmsModel\r\n  @Output() afterRemoveAnimation = new EventEmitter();\r\n\r\n  readOnly: boolean = true;\r\n  indexSectionRemoved: number;\r\n\r\n  private readonly destroy$ = new Subject();\r\n\r\n  animationDone(event: AnimationEvent) {\r\n    if (event.animationName === 'sectionOut') {\r\n      this.afterRemoveAnimation.emit(this.indexSectionRemoved);\r\n    }\r\n  }\r\n\r\n  constructor(\r\n    private host: ElementRef<HTMLElement>,\r\n    private cdr: ChangeDetectorRef,\r\n    private cmsService: CmsService,\r\n    private injectComponentService: InjectComponentService,\r\n  ) { }\r\n\r\n  ngOnInit(): void {\r\n    this.addTemplateSectionComponent()\r\n\r\n    this.catalogBlocksOpenedEvent()\r\n\r\n    this.onSectionRemoved()\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.destroy$.next(undefined);\r\n    this.destroy$.complete();\r\n  }\r\n\r\n  get container(): HTMLElement {\r\n    return this.host.nativeElement.querySelector('.cms-section') as HTMLElement;\r\n  }\r\n\r\n  removeSection() {\r\n    this.container.style.animation = 'sectionOut 0.3s';\r\n  }\r\n\r\n  private onSectionRemoved() {\r\n    this.cmsService.onSectionRemoved().pipe(\r\n      takeUntil(this.destroy$),\r\n      filter((sectionRemoved: SectionIndex) => sectionRemoved.section.id === this.section.id),\r\n      tap((sectionRemoved: SectionIndex) => this.indexSectionRemoved = sectionRemoved.index),\r\n      tap(_ => this.removeSection()),\r\n    ).subscribe()\r\n  }\r\n\r\n  private catalogBlocksOpenedEvent() {\r\n    this.cmsService.catalogBlocksOpened$.pipe(\r\n      takeUntil(this.destroy$),\r\n      tap((isOpened: boolean) => {\r\n        this.readOnly = isOpened\r\n      }),\r\n      tap(_ => this.cdr.detectChanges())\r\n    ).subscribe()\r\n  }\r\n\r\n  private addTemplateSectionComponent() {\r\n    this.injectComponentService.loadAndAddComponentToContainer(this.section.component, this.containerRef,\r\n      { section: this.section, apisConfig: this.apisConfig }, null)\r\n  }\r\n}\r\n","<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>","import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\r\nimport { HelperService } from 'cocori-ng/src/feature-core';\r\n\r\nimport { SectionModel } from '../../../core/model/cms.model';\r\nimport { Block } from '../../../core/service/block';\r\nimport { CmsService } from '../../../core/service/cms.service';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'cocoring-cms-blocks-catalog',\r\n  templateUrl: './cocoring-cms-blocks-catalog.component.html',\r\n  styleUrls: ['./cocoring-cms-blocks-catalog.component.scss'],\r\n})\r\nexport class CocoringCmsBlocksCatalogComponent implements OnInit {\r\n\r\n  @Input() catalog: Block[] = []\r\n\r\n  constructor(\r\n    public cmsService: CmsService,\r\n    private helperService: HelperService\r\n  ) { }\r\n\r\n  ngOnInit(): void { }\r\n\r\n  selectBlock(block: Block) {\r\n    const newSection: SectionModel = {\r\n      id: this.helperService.generateGuid(),\r\n      key: block.key,\r\n      component: block.data.component,\r\n      componentReadonly: null,\r\n      backgroundColor: block.data.backgroundColor,\r\n      values: block.data.content\r\n    }\r\n\r\n    this.cmsService.addSection(newSection)\r\n  }\r\n\r\n  trackBy(index: number) {\r\n    return index;\r\n  }\r\n}\r\n","<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>","import { Component, OnInit } from '@angular/core';\r\nimport { BroadcastEventService } from 'cocori-ng/src/feature-core';\r\nimport { ConfigEvents } from 'cocori-ng/src/feature-form';\r\n\r\nimport { ResponsiveOrientation } from '../../../core/model/cms.model';\r\n\r\n@Component({\r\n  selector: 'cocoring-preview-options',\r\n  templateUrl: './cocoring-preview-options.component.html',\r\n  styleUrls: ['./cocoring-preview-options.component.scss']\r\n})\r\nexport class CocoringPreviewOptionsComponent implements OnInit {\r\n\r\n  responsive: string = 'computer'\r\n\r\n  orientationComputer: ResponsiveOrientation = 'computer'\r\n  orientationTabletLand: ResponsiveOrientation = 'tablet-land'\r\n  orientationTabletPort: ResponsiveOrientation = 'tablet-port'\r\n  orientationMobile: ResponsiveOrientation = 'mobile'\r\n\r\n  constructor(\r\n    private broadcastEventService: BroadcastEventService,\r\n  ) { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  reset() {\r\n    this.responsive = this.orientationComputer\r\n\r\n    this.broadcastEventService.broadcast({ eventKeys: [ConfigEvents.CMS_RESPONSIVE_ORIENTATION_CHANGED], eventData: this.responsive })\r\n  }\r\n\r\n  onResponsiveChange($event) {\r\n    this.broadcastEventService.broadcast({ eventKeys: [ConfigEvents.CMS_RESPONSIVE_ORIENTATION_CHANGED], eventData: $event })\r\n  }\r\n}\r\n","<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éléphone\" aria-label=\"Téléphone\">\r\n        <mat-icon>phone_iphone</mat-icon>\r\n    </mat-button-toggle>\r\n</mat-button-toggle-group>","import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\n\r\nimport { CmsService } from '../../../core/service/cms.service';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'cocoring-toolbar-cms',\r\n  templateUrl: './cocoring-toolbar-cms.component.html',\r\n  styleUrls: ['./cocoring-toolbar-cms.component.scss']\r\n})\r\nexport class CocoringToolbarCmsComponent implements OnInit {\r\n  @Input() showSaveBtn: boolean = false;\r\n  @Output() toggleSidenav: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n  constructor(\r\n    private cmsService: CmsService) { }\r\n\r\n  ngOnInit(): void { }\r\n\r\n  saveContentPage() {\r\n    this.cmsService.onSaveCmsContent$.next(this.cmsService.sectionsPageDatas())\r\n  }\r\n}\r\n","<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>","import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  EventEmitter,\r\n  Input,\r\n  OnDestroy,\r\n  OnInit,\r\n  Output,\r\n  ViewChild,\r\n  ViewContainerRef,\r\n} from '@angular/core';\r\nimport { MediaObserver } from '@angular/flex-layout';\r\nimport { MatSidenav } from '@angular/material/sidenav';\r\nimport { InjectComponentService } from 'cocori-ng/src/feature-core';\r\nimport { Subject } from 'rxjs';\r\nimport { takeUntil, tap } from 'rxjs/operators';\r\n\r\nimport {\r\n  ConfigCmsModel,\r\n  InsertSectionAt,\r\n  SectionModel,\r\n  SectionModelCommand,\r\n  SectionMoveIndexes,\r\n} from '../../../core/model/cms.model';\r\nimport { Block } from '../../../core/service/block';\r\nimport { CmsService } from '../../../core/service/cms.service';\r\nimport { CocoringCmsSectionComponent } from '../cocoring-cms-section/cocoring-cms-section.component';\r\n\r\n// import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\r\n// import { MediaChange, MediaObserver } from '@angular/flex-layout';\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'cocoring-cms',\r\n  templateUrl: './cocoring-cms.component.html',\r\n  styleUrls: ['./cocoring-cms.component.scss'],\r\n  providers: [InjectComponentService]\r\n})\r\nexport class CocoringCmsComponent implements OnInit, OnDestroy {\r\n  @ViewChild('sidenav') sidenav: MatSidenav;\r\n  @ViewChild('ContainerRef', { static: false, read: ViewContainerRef }) containerRef: ViewContainerRef;\r\n\r\n  configCms: ConfigCmsModel;\r\n  catalog: Block[] = []\r\n  orientation = 'column'\r\n  _showSaveBtn: boolean = false;\r\n  importSections: SectionModel[] = [];\r\n\r\n  private readonly destroy$ = new Subject();\r\n\r\n  @Input()\r\n  set config(config: ConfigCmsModel) {\r\n    if (!config) {\r\n      throw new Error(`La config du composant CMS n'est pas correcte... config: ${config}`);\r\n    }\r\n\r\n    this.configCms = config\r\n\r\n    this.catalog = config.catalog\r\n\r\n    this.cmsService.init()\r\n  }\r\n\r\n  @Input()\r\n  set datas(sectionDatas: SectionModel[]) {\r\n    this.importSections = sectionDatas\r\n  }\r\n\r\n  @Input()\r\n  set showSaveBtn(data: boolean) {\r\n    this._showSaveBtn = data\r\n\r\n    if (data) {\r\n      this.onPageSaved()\r\n    }\r\n  }\r\n\r\n  @Output() onSaveBtn: EventEmitter<SectionModel[]> = new EventEmitter<SectionModel[]>();\r\n\r\n  responsive: string = 'computer'\r\n  activeMediaQuery = '';\r\n  sidenavMode: string = 'side'\r\n  isSidenavOpen: boolean = false;\r\n  totalSections: number = 0;\r\n\r\n  constructor(\r\n    private mediaObserver: MediaObserver,\r\n    private cdr: ChangeDetectorRef,\r\n    private cmsService: CmsService,\r\n    private injectComponentService: InjectComponentService,\r\n  ) {\r\n    this.eventSizeScreen();\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.addSectionEvent()\r\n\r\n    this.onSectionMoved()\r\n\r\n    /** on dessine les sections chargées ! */\r\n    if (this.importSections.length) {\r\n      this.importSections.forEach((section: SectionModel) => {\r\n        this.cmsService.addSection(section)\r\n      })\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.destroy$.next(undefined);\r\n    this.destroy$.complete();\r\n  }\r\n\r\n  private onPageSaved() {\r\n    this.cmsService.onSaveCmsContent$.pipe(\r\n      takeUntil(this.destroy$)\r\n    ).subscribe((contentPage: SectionModel[]) => {\r\n      this.onSaveBtn.emit(contentPage)\r\n    })\r\n  }\r\n\r\n  private eventSizeScreen() {\r\n    this.mediaObserver\r\n      .asObservable()\r\n      .pipe(\r\n        takeUntil(this.destroy$)\r\n      ).subscribe((change) => {\r\n        change.forEach((item) => {\r\n          this.activeMediaQuery = item ? `'${item.mqAlias}' = (${item.mediaQuery})` : '';\r\n\r\n          if (item.mqAlias === 'xs') {\r\n            this.sidenavMode = 'over';\r\n          } else {\r\n            this.sidenavMode = 'side';\r\n          }\r\n        })\r\n      })\r\n  }\r\n\r\n  toggleSidenavBlocks() {\r\n    this.sidenav.toggle()\r\n\r\n    this.isSidenavOpen = this.sidenav.opened\r\n\r\n    this.cmsService.catalogBlocksOpened$.next(this.isSidenavOpen)\r\n  }\r\n\r\n  public getPageCMSDatas(): SectionModelCommand[] {\r\n    return this.cmsService.sectionsPageDatas()\r\n  }\r\n\r\n  private addSectionEvent() {\r\n    this.cmsService.sectionAdded$.pipe(\r\n      takeUntil(this.destroy$),\r\n      tap(_ => this.refreshNumberSection()),\r\n      tap((datas: InsertSectionAt) => {\r\n        this.injectComponentService.loadAndAddComponentToContainer(CocoringCmsSectionComponent, this.containerRef,\r\n          { section: datas.section, apisConfig: this.configCms.wysiwygOptions },\r\n          { afterRemoveAnimation: (sectionIndexRemoved: number) => this.onSectionRemovedAfterAnimation(sectionIndexRemoved) }, datas.index\r\n        )\r\n      }),\r\n    ).subscribe()\r\n  }\r\n\r\n  private onSectionRemovedAfterAnimation(indexSectionRemoved: number) {\r\n    this.injectComponentService.removeComponentFromViewContainer(indexSectionRemoved, this.containerRef)\r\n\r\n    this.refreshNumberSection()\r\n  }\r\n\r\n  private onSectionMoved() {\r\n    this.cmsService.moveSection$.pipe(\r\n      takeUntil(this.destroy$),\r\n      tap((values: any) => {\r\n        this.moveSectionContainer({ previousIndex: values.previousIndex, currentIndex: values.currentIndex })\r\n      }),\r\n    ).subscribe()\r\n  }\r\n\r\n  private refreshNumberSection() {\r\n    this.totalSections = this.cmsService.sections.length\r\n\r\n    this.cdr.detectChanges()\r\n  }\r\n\r\n  public dropSection(event: CdkDragDrop<any[]>) {\r\n    this.moveSectionContainer({ previousIndex: event.previousIndex, currentIndex: event.currentIndex })\r\n  }\r\n\r\n  private moveSectionContainer(moveIndexes: SectionMoveIndexes) {\r\n    moveItemInArray(this.cmsService.sections, moveIndexes.previousIndex, moveIndexes.currentIndex);\r\n\r\n    this.injectComponentService.moveComponentFromViewContainer(moveIndexes.currentIndex, moveIndexes.previousIndex, this.containerRef)\r\n  }\r\n}\r\n","<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 👌 </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çu 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>","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnDestroy } from '@angular/core';\r\nimport { BroadcastEventService } from 'cocori-ng/src/feature-core';\r\nimport { ConfigEvents } from 'cocori-ng/src/feature-form';\r\nimport { Subject, takeUntil } from 'rxjs';\r\n\r\nimport { OrientationParamsTpl, ResponsiveOrientation } from '../core/model/cms.model';\r\n\r\n\r\n@Component({\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    selector: 'extend-preview-tpl',\r\n    template: ''\r\n})\r\n\r\nexport abstract class ExtendPreviewActionsComponent implements OnDestroy {\r\n\r\n    broadcastEventService: BroadcastEventService;\r\n    orientation: string = 'row'\r\n    orientationWidth: string = '100%';\r\n    flexWidth: string;\r\n    cdr: any;\r\n    readonly destroy$ = new Subject();\r\n\r\n    constructor(injector: Injector) {\r\n        this.cdr = injector.get(ChangeDetectorRef);\r\n        this.broadcastEventService = injector.get(BroadcastEventService);\r\n\r\n        this.onOrientationChanged()\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        this.destroy$.next(undefined);\r\n        this.destroy$.complete();\r\n    }\r\n\r\n    private onOrientationChanged() {\r\n        this.broadcastEventService.listen([ConfigEvents.CMS_RESPONSIVE_ORIENTATION_CHANGED]).pipe(\r\n            takeUntil(this.destroy$)\r\n        ).subscribe((orientation: ResponsiveOrientation) => {\r\n            this.getOrientationParams(orientation)\r\n\r\n            this.cdr.detectChanges()\r\n        })\r\n    }\r\n\r\n    getOrientationParams(type: ResponsiveOrientation) {\r\n        this.flexWidth = null\r\n\r\n        var orientations: OrientationParamsTpl = {\r\n            'mobile': () => {\r\n                this.orientation = 'column'\r\n                this.orientationWidth = '375px'\r\n                this.flexWidth = '100%'\r\n            },\r\n            'tablet-port': () => {\r\n                this.orientation = 'column'\r\n                this.orientationWidth = '768px'\r\n            },\r\n            'tablet-land': () => {\r\n                this.orientation = 'row'\r\n                this.orientationWidth = '1024px'\r\n            },\r\n            'computer': () => {\r\n                this.orientation = 'row'\r\n                this.orientationWidth = '100%'\r\n            }\r\n        };\r\n\r\n        (orientations[type] || orientations['default'])();\r\n    }\r\n}\r\n","import { ChangeDetectionStrategy, Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';\r\n\r\nimport { ExtendPreviewActionsComponent } from '../extend-preview-actions.component';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'section-tpl',\r\n  templateUrl: './section-tpl.component.html',\r\n  styleUrls: []\r\n})\r\nexport class SectionTplComponent extends ExtendPreviewActionsComponent implements OnInit {\r\n\r\n  @Input() backgroundColor: string\r\n  @Input() readOnly: boolean = false\r\n\r\n  @Output() openBottomSheet: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n  constructor(injector: Injector) {\r\n    super(injector);\r\n  }\r\n\r\n  ngOnInit(): void { }\r\n}\r\n","<section class=\"cms-block\" [style.background-color]=\"backgroundColor\" [style.max-width]=\"orientationWidth\"\r\n    [ngClass]=\"{'sidenav-openned': readOnly, 'orientation-column': orientation === 'column'}\"\r\n    (click)=\"openBottomSheet.emit()\">\r\n    <div class=\"container\" fxFlex=\"100%\" [fxLayout]=\"orientation\" [fxFlex.gt-lg]=\"flexWidth || '75%'\"\r\n        [fxFlex.gt-md]=\"flexWidth || '80%'\" [fxFlex.gt-sm]=\"flexWidth || '90%'\" fxFlex.gt-xs=\"100%\">\r\n        <div class=\"row justify-content-center\" [fxLayout]=\"orientation\" fxFlex=\"100%\" [ngClass.lt-md]=\"'row-mobile'\" [ngClass]=\"{'row-mobile': orientation === 'column'}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</section>","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FlexLayoutModule } from '@angular/flex-layout';\r\n\r\nimport { SectionTplComponent } from './section-tpl/section-tpl.component';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SectionTplComponent,\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FlexLayoutModule\r\n  ],\r\n  exports: [SectionTplComponent]\r\n})\r\nexport class SharedCMSModule { }\r\n","import {\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  HostListener,\r\n  Input,\r\n  OnDestroy,\r\n  OnInit,\r\n  Output,\r\n  ViewChild,\r\n} from '@angular/core';\r\nimport { FileModel } from 'cocori-ng/src/feature-core';\r\nimport { UploaderService } from 'cocori-ng/src/feature-form';\r\nimport { Subject } from 'rxjs';\r\nimport { filter, takeUntil, tap } from 'rxjs/operators';\r\n\r\nimport { ApisConfigCmsModel, SectionModel } from '../../../core/model/cms.model';\r\n\r\n@Component({\r\n  selector: 'cocoring-cms-image-upload',\r\n  templateUrl: './cocoring-cms-image-upload.component.html',\r\n  styleUrls: ['./cocoring-cms-image-upload.component.scss'],\r\n  providers: [UploaderService]\r\n})\r\nexport class CocoringCmsImageUploadComponent implements OnInit, OnDestroy {\r\n  @ViewChild('uploader') uploaderInputRef: ElementRef;\r\n  @ViewChild('progressCircle') progressCircleRef: ElementRef;\r\n\r\n  @Input() section: SectionModel\r\n  @Input() nameBackgroundImage: string\r\n  @Input() apisConfig: ApisConfigCmsModel\r\n\r\n  @Output() apiFileUploaded: EventEmitter<string> = new EventEmitter<string>();\r\n  @Output() removeBackgroundImage: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n  isUploading: boolean = false;\r\n  uploadProgress: number;\r\n  backgroundImageUpload: FileModel\r\n  fileUploaded: File;\r\n  onError: boolean = false;\r\n\r\n  private readonly destroy$ = new Subject();\r\n\r\n  constructor(\r\n    private cdr: ChangeDetectorRef,\r\n    public uploaderService: UploaderService,\r\n  ) { }\r\n\r\n  ngOnInit(): void {\r\n    this.uploaderService.apisFile = this.apisConfig\r\n\r\n    this.eventsFileUpload()\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.destroy$.next(undefined);\r\n    this.destroy$.complete();\r\n  }\r\n\r\n  @HostListener('change', ['$event.target.files']) emitFiles(event: FileList) {\r\n    const file = event && event.item(0);\r\n\r\n    if (!file) return;\r\n\r\n    this.isUploading = true\r\n    this.onError = false\r\n\r\n    this.backgroundImageUpload = { description: null }\r\n\r\n    this.fileUploaded = file;\r\n\r\n    this.backgroundImageUpload.size = this.fileUploaded.size\r\n\r\n    this.uploaderService.uploadFile(this.fileUploaded)\r\n  }\r\n\r\n  browseFile() {\r\n    let el: HTMLElement = this.uploaderInputRef.nativeElement;\r\n    el.click();\r\n  }\r\n\r\n  private eventsFileUpload() {\r\n    this.uploaderService.fileUploaded$.pipe(\r\n      takeUntil(this.destroy$),\r\n      tap((id: string) => this.getFileId(id)),\r\n      tap(_ => this.isUploading = false),\r\n      tap(_ => this.setFileApi()),\r\n      tap(_ => this.cdr.detectChanges())\r\n    ).subscribe()\r\n\r\n    this.uploaderService.fileOnError$.pipe(\r\n      takeUntil(this.destroy$),\r\n      tap(_ => this.errorFile()),\r\n    ).subscribe()\r\n\r\n    this.uploaderService.progressSource.pipe(\r\n      takeUntil(this.destroy$),\r\n      filter(_ => !!this.fileUploaded),\r\n      tap((progress: number) => {\r\n        this.uploadProgress = progress\r\n\r\n        const circumference = this.progressCircleRef.nativeElement.getTotalLength()\r\n\r\n        this.progressCircleRef.nativeElement.style.strokeDashoffset = circumference - (progress / 100) * circumference;\r\n\r\n        this.cdr.detectChanges()\r\n      })\r\n    ).subscribe()\r\n  }\r\n\r\n  private getFileId(id: string) {\r\n    this.backgroundImageUpload.id = id\r\n  }\r\n\r\n  /** on récupère l'api du fichier pour la transmettre au composant parent */\r\n  private setFileApi() {\r\n    const apiFile = this.apisConfig.apiFile(this.backgroundImageUpload.id);\r\n\r\n    this.apiFileUploaded.emit(apiFile)\r\n  }\r\n\r\n  onBackgroundImageRemoved(event) {\r\n    event.stopPropagation()\r\n\r\n    this.removeBackgroundImage.emit()\r\n  }\r\n\r\n  private errorFile() {\r\n    this.isUploading = false\r\n\r\n    this.deleteFile()\r\n\r\n    this.onError = true\r\n  }\r\n\r\n  private deleteFile() {\r\n    this.fileUploaded = null\r\n    this.backgroundImageUpload.id = null\r\n\r\n    this.uploaderInputRef.nativeElement.value = ''\r\n  }\r\n}\r\n","<div class=\"background-image-full\" (click)=\"browseFile()\"\r\n    [ngStyle]=\"{'background-image': 'url(' + (section.values[nameBackgroundImage] ?  section.values[nameBackgroundImage] : '') + ')'}\">\r\n</div>\r\n<div class=\"addNewFile\">\r\n    <div class=\"badges-actions\" *ngIf=\"!isUploading\">\r\n        <div class=\"badge\" (click)=\"browseFile()\">\r\n            <mat-icon>wallpaper</mat-icon>\r\n        </div>\r\n        <div class=\"badge badge-delete\" (click)=\"onBackgroundImageRemoved($event)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n        </div>\r\n    </div>\r\n    <svg *ngIf=\"isUploading\" class=\"progress\" width=\"59\" height=\"59\">\r\n        <circle #progressCircle class=\"progress-circle\" cx=\"30\" cy=\"30\" r=\"28\" fill=\"white\" />\r\n        <text class=\"text-progress\" x=\"30\" y=\"30\" alignment-baseline=\"middle\" text-anchor=\"middle\">\r\n            {{uploadProgress}} %\r\n        </text>\r\n    </svg>\r\n</div>\r\n<div *ngIf=\"onError\" class=\"error-upload\">\r\n    <div class=\"badge badge-delete error\" title=\"Une erreur est survenue, veuillez réessayer\">\r\n        <mat-icon>error</mat-icon>\r\n    </div>\r\n</div>\r\n<input #uploader hidden class=\"browse-file\" type=\"file\" name=\"fileUpload\" accept=\"image/*\" />","import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';\r\nimport { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\n\r\nimport { BottomSheetSectionReturnAction, SectionModel } from '../../../core/model/cms.model';\r\nimport { CmsService } from '../../../core/service/cms.service';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'cocoring-cms-section-actions',\r\n  templateUrl: './cocoring-cms-section-actions.component.html',\r\n  styleUrls: ['./cocoring-cms-section-actions.component.scss']\r\n})\r\nexport class CocoringCmsSectionActionsComponent implements OnInit {\r\n  color: string;\r\n  section: SectionModel;\r\n\r\n  constructor(\r\n    private cmsService: CmsService,\r\n    private _bottomSheetRef: MatBottomSheetRef<CocoringCmsSectionActionsComponent>,\r\n    @Inject(MAT_BOTTOM_SHEET_DATA) public data: { section: SectionModel }) {\r\n    this.section = data.section\r\n\r\n    this.color = this.section.backgroundColor\r\n  }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  close(event) {\r\n    this._bottomSheetRef.dismiss();\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  removeSection(event) {\r\n    this._bottomSheetRef.dismiss(<BottomSheetSectionReturnAction>{ action: 'remove' });\r\n\r\n    event.preventDefault();\r\n  }\r\n  \r\n  moveUpSection(event) {\r\n    this.cmsService.moveSection(this.section.id, 'move-up');\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  moveDownSection(event) {\r\n    this.cmsService.moveSection(this.section.id, 'move-down');\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  duplicateSection(event) {\r\n    this._bottomSheetRef.dismiss(<BottomSheetSectionReturnAction>{ action: 'duplicate' });\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  selectColor(event) {\r\n    this._bottomSheetRef.dismiss(<BottomSheetSectionReturnAction>{ action: 'backgroundColor', value: this.color });\r\n  }\r\n\r\n  onColorChange(color: any) {\r\n    this.color = color.hexa\r\n\r\n    this.cmsService.changeBackgroundColorSection(this.section.id, color.hexa)\r\n  }\r\n}\r\n","<div class=\"bottom-sheet-header\">\r\n    <button class=\"actions-header-modal\" mat-icon-button aria-label=\"Fermer la fenêtre\" (click)=\"close($event)\">\r\n        <mat-icon>keyboard_arrow_down</mat-icon>\r\n    </button>\r\n    <div class=\"header-part-right\">\r\n        <div class=\"description-file\">Section</div>\r\n    </div>\r\n</div>\r\n<mat-nav-list class=\"bottom-sheet-list\">\r\n    <a mat-list-item (click)=\"selectColor($event)\">\r\n        <mat-icon mat-list-icon>format_color_fill</mat-icon>\r\n        <div class=\"circle-color\" [cocoring-colorpicker]=\"color\" (onColorChange)=\"onColorChange($event)\"></div>\r\n        <span mat-line>Changer la couleur de fond</span>\r\n    </a>\r\n    \r\n    <a href=\"#\" mat-list-item (click)=\"moveUpSection($event)\">\r\n        <mat-icon mat-list-icon>keyboard_arrow_up</mat-icon>\r\n        <span mat-line>Déplacer vers le haut</span>\r\n    </a>\r\n    \r\n    <a href=\"#\" mat-list-item (click)=\"moveDownSection($event)\">\r\n        <mat-icon mat-list-icon>keyboard_arrow_down</mat-icon>\r\n        <span mat-line>Déplacer vers le bas</span>\r\n    </a>\r\n\r\n    <a href=\"#\" mat-list-item (click)=\"duplicateSection($event)\">\r\n        <mat-icon mat-list-icon>content_copy</mat-icon>\r\n        <span mat-line>Dupliquer</span>\r\n    </a>\r\n\r\n    <a href=\"#\" target=\"_blank\" mat-list-item (click)=\"removeSection($event)\">\r\n        <mat-icon mat-list-icon>delete_outline</mat-icon>\r\n        <span mat-line>Supprimer</span>\r\n    </a>\r\n\r\n</mat-nav-list>\r\n","import { DragDropModule } from '@angular/cdk/drag-drop';\r\nimport { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FlexLayoutModule } from '@angular/flex-layout';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatBottomSheetModule } from '@angular/material/bottom-sheet';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatListModule } from '@angular/material/list';\r\nimport { MatSidenavModule } from '@angular/material/sidenav';\r\nimport { CocoringColorpickerModule, CocoringVariableHtmlModule, CocoringWysiwygModule } from 'cocori-ng/src/feature-form';\r\n\r\nimport { SharedCMSModule } from '../shared-cms.module';\r\nimport { CocoringCmsBlocksCatalogComponent } from './cocoring-cms-blocks-catalog/cocoring-cms-blocks-catalog.component';\r\nimport { CocoringCmsImageUploadComponent } from './cocoring-cms-image-upload/cocoring-cms-image-upload.component';\r\nimport { CocoringCmsSectionActionsComponent } from './cocoring-cms-section-actions/cocoring-cms-section-actions.component';\r\nimport { CocoringCmsSectionComponent } from './cocoring-cms-section/cocoring-cms-section.component';\r\nimport { CocoringCmsComponent } from './cocoring-cms/cocoring-cms.component';\r\nimport { CocoringPreviewOptionsComponent } from './cocoring-preview-options/cocoring-preview-options.component';\r\nimport { CocoringToolbarCmsComponent } from './cocoring-toolbar-cms/cocoring-toolbar-cms.component';\r\n\r\n@NgModule({\r\n    declarations: [\r\n        CocoringCmsComponent,\r\n        CocoringCmsBlocksCatalogComponent,\r\n        CocoringCmsSectionComponent,\r\n        CocoringCmsSectionActionsComponent,\r\n        CocoringToolbarCmsComponent,\r\n        CocoringPreviewOptionsComponent,\r\n        CocoringCmsImageUploadComponent,\r\n    ],\r\n    imports: [\r\n        CommonModule,\r\n        FormsModule,\r\n        SharedCMSModule,\r\n        DragDropModule,\r\n        MatSidenavModule,\r\n        MatBottomSheetModule,\r\n        MatButtonToggleModule,\r\n        MatListModule,\r\n        MatButtonModule,\r\n        MatIconModule,\r\n        FlexLayoutModule,\r\n        CocoringVariableHtmlModule,\r\n        CocoringWysiwygModule,\r\n        CocoringColorpickerModule\r\n    ],\r\n    exports: [\r\n        CocoringCmsComponent,\r\n        CocoringPreviewOptionsComponent\r\n    ]\r\n})\r\nexport class CocoringCMSModule { }","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Input,\r\n  OnInit,\r\n  ViewChild,\r\n  ViewContainerRef,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { InjectComponentService } from 'cocori-ng/src/feature-core';\r\n\r\nimport { SectionModel } from '../../../core/model/cms.model';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  selector: 'cocoring-cms-readonly-section',\r\n  templateUrl: './cocoring-cms-readonly-section.component.html',\r\n  styleUrls: ['../../section-styles/section-styles.component.scss', './cocoring-cms-readonly-section.component.scss']\r\n})\r\nexport class CocoringCmsReadonlySectionComponent implements OnInit {\r\n  @ViewChild('ContainerRef', { static: true, read: ViewContainerRef }) containerRef: ViewContainerRef;\r\n  private section: SectionModel;\r\n\r\n  @Input()\r\n  set config(datas: SectionModel) {\r\n\r\n    this.section = datas\r\n\r\n    this.containerRef.clear()\r\n\r\n    this.addTemplateSectionComponent()\r\n  }\r\n\r\n  constructor(\r\n    private injectComponentService: InjectComponentService,\r\n  ) { }\r\n\r\n  ngOnInit(): void { }\r\n\r\n  private addTemplateSectionComponent() {\r\n    this.injectComponentService.loadAndAddComponentToContainer(this.section.componentReadonly, this.containerRef,\r\n      { section: this.section }, null)\r\n  }\r\n}\r\n","<ng-template #ContainerRef></ng-template>","import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\r\n\r\nimport { SectionModel } from '../../../core/model/cms.model';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'cocoring-cms-readonly',\r\n  templateUrl: './cocoring-cms-readonly.component.html',\r\n  styleUrls: ['./cocoring-cms-readonly.component.scss']\r\n})\r\nexport class CocoringCmsReadonlyComponent implements OnInit {\r\n  sectionPageDatas: SectionModel[];\r\n\r\n  @Input()\r\n  set config(datas: SectionModel[]) {\r\n    if (!datas) {\r\n      throw new Error(`La config du composant uploader n'est pas correcte... config: ${datas}`);\r\n    }\r\n\r\n    this.sectionPageDatas = datas\r\n\r\n\r\n    console.log(\"sectionPageDatas>>>\", this.sectionPageDatas)\r\n  }\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  trackBy(index: number) {\r\n    return index;\r\n  }\r\n}\r\n","<ng-container *ngFor=\"let section of sectionPageDatas; let i = index; trackBy: trackBy\">\r\n    <cocoring-cms-readonly-section [config]=\"section\"></cocoring-cms-readonly-section>\r\n</ng-container>","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FlexLayoutModule } from '@angular/flex-layout';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { CocoringVariableHtmlModule } from 'cocori-ng/src/feature-form';\r\n\r\nimport { SharedCMSModule } from '../shared-cms.module';\r\nimport {\r\n    CocoringCmsReadonlySectionComponent,\r\n} from './cocoring-cms-readonly-section/cocoring-cms-readonly-section.component';\r\nimport { CocoringCmsReadonlyComponent } from './cocoring-cms-readonly/cocoring-cms-readonly.component';\r\n\r\n@NgModule({\r\n    declarations: [\r\n        CocoringCmsReadonlyComponent,\r\n        CocoringCmsReadonlySectionComponent,\r\n    ],\r\n    imports: [\r\n        CommonModule,\r\n        FormsModule,\r\n        CocoringVariableHtmlModule,\r\n        SharedCMSModule,\r\n        FlexLayoutModule,\r\n        MatIconModule\r\n    ],\r\n    exports: [\r\n        CocoringCmsReadonlyComponent,\r\n    ]\r\n})\r\nexport class CocoringCmsReadonlyModule { }","import {\r\n    ChangeDetectionStrategy,\r\n    ChangeDetectorRef,\r\n    Component,\r\n    Injector,\r\n    Input,\r\n    OnDestroy,\r\n    ViewContainerRef,\r\n} from '@angular/core';\r\nimport { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';\r\nimport { MatBottomSheet } from '@angular/material/bottom-sheet';\r\nimport {\r\n    FileModel,\r\n    FormHelperService,\r\n    InitWysiwyg,\r\n    InjectComponentService,\r\n    WysiwygConfigSection,\r\n} from 'cocori-ng/src/feature-core';\r\nimport { CocoringWysiwygComponent } from 'cocori-ng/src/feature-form';\r\nimport { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';\r\n\r\nimport {\r\n    ApisConfigCmsModel,\r\n    BottomSheetSectionReturnAction,\r\n    EditorValues,\r\n    SectionModel,\r\n} from '../../../core/model/cms.model';\r\nimport { CmsService } from '../../../core/service/cms.service';\r\nimport { ExtendPreviewActionsComponent } from '../../extend-preview-actions.component';\r\nimport { CocoringCmsImageUploadComponent } from '../cocoring-cms-image-upload/cocoring-cms-image-upload.component';\r\nimport { CocoringCmsSectionActionsComponent } from '../cocoring-cms-section-actions/cocoring-cms-section-actions.component';\r\n\r\n@Component({\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    selector: 'extend-section-tpl',\r\n    template: '',\r\n    host: { 'class': 'input-form' },\r\n})\r\n\r\nexport abstract class ExtendSectionTplComponent extends ExtendPreviewActionsComponent implements OnDestroy {\r\n    @Input() section: SectionModel\r\n    @Input() apisConfig: ApisConfigCmsModel\r\n\r\n    private fb: UntypedFormBuilder;\r\n    private _bottomSheet: MatBottomSheet;\r\n    public cdr: any;\r\n    public cmsService: CmsService;\r\n\r\n    formulaire: UntypedFormGroup\r\n    nbEditorView: number\r\n    nbBackgroundImage: number;\r\n\r\n    nameControl: string = 'editor'\r\n    backgroundImageControl: string = 'backgroundImage'\r\n    backgroundImageUpload: FileModel\r\n    uploadProgress: number;\r\n    isUploading: boolean = false;\r\n\r\n    configsWysiwyg: WysiwygConfigSection[];\r\n    readOnly: boolean = false;\r\n    value: any;\r\n    formHelper: FormHelperService;\r\n    injectComponentService: InjectComponentService;\r\n\r\n    constructor(injector: Injector) {\r\n        super(injector);\r\n\r\n        this.injectComponentService = injector.get(InjectComponentService);\r\n        this.fb = injector.get(UntypedFormBuilder);\r\n        this._bottomSheet = injector.get(MatBottomSheet);\r\n        this.cdr = injector.get(ChangeDetectorRef);\r\n        this.cmsService = injector.get(CmsService);\r\n        this.formHelper = injector.get(FormHelperService);\r\n    }\r\n\r\n    init(nbEditorView: number, nbBackgroundImage: number = 0) {\r\n        this.nbEditorView = nbEditorView\r\n        this.nbBackgroundImage = nbBackgroundImage\r\n\r\n        this.buildForm();\r\n\r\n        this.catalogBlocksOpenedEvent()\r\n\r\n        this.onBackgroundColorEvent()\r\n    }\r\n\r\n    private buildForm() {\r\n        this.formulaire = this.fb.group({});\r\n        this.configsWysiwyg = []\r\n\r\n        for (let i = 1; i <= this.nbEditorView; i++) {\r\n            const nameControl: string = `${this.nameControl}${i}`\r\n\r\n            this.formulaire.addControl(nameControl, new UntypedFormControl(this.initSectionValue(nameControl)))\r\n\r\n            this.configsWysiwyg[nameControl] = this.configComponent(nameControl)\r\n        }\r\n\r\n        for (let i = 1; i <= this.nbBackgroundImage; i++) {\r\n            const nameControl: string = `${this.backgroundImageControl}${i}`\r\n\r\n            this.formulaire.addControl(nameControl, new UntypedFormControl(this.initSectionValue(nameControl)))\r\n        }\r\n\r\n        this.saveSectionValues()\r\n\r\n        this.onSectionValuesChanged()\r\n    }\r\n\r\n    onBackgroundFileUploadedCallback(nameControl: string, apiFileUploaded: string,) {\r\n        this.formulaire.get(nameControl).setValue(apiFileUploaded)\r\n    }\r\n\r\n    removeBackgroundFileCallback(nameControl: string) {\r\n        this.formulaire.get(nameControl).reset()\r\n\r\n        this.saveSectionValues()\r\n\r\n        this.cdr.detectChanges()\r\n    }\r\n\r\n    /** ex valeur du formulaire : {editor1: \"<h1>coucou</h1>\", editor2: \"<h1>hello</h1>\"} */\r\n    private onSectionValuesChanged() {\r\n        this.formulaire.valueChanges.pipe(\r\n            takeUntil(this.destroy$),\r\n            debounceTime(500),\r\n            tap((values: any) => {\r\n                this.section.values = values\r\n\r\n                this.cdr.detectChanges()\r\n            })\r\n        ).subscribe()\r\n    }\r\n\r\n    private saveSectionValues() {\r\n        this.section.values = this.formulaire.value\r\n    }\r\n\r\n    private initSect