cocori-ng/fesm2020/cocori-ng.mjs.map

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

{"version":3,"file":"cocori-ng.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-form/core/config/config.components.ts","../../../projects/cocori-ng/src/feature-form/core/config/config.events.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button/cocoring-button.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button/cocoring-button.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/button-link/cocoring-button-link.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button-link/cocoring-button-link.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/extend-inputs/extend-inputs.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/error-handler/input-error-handler/cocoring-input-error.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox-indeterminate/checkbox-indeterminate.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox-indeterminate/checkbox-indeterminate.component.html","../../../projects/cocori-ng/src/feature-form/shared/pipe/variable-html/cocoring-variable-html.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox/cocoring-checkbox.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox/cocoring-checkbox.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-icon/input-icon.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-icon/input-icon.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-date/cocoring-date.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-date/cocoring-date.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-email/cocoring-email.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-email/cocoring-email.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-number/cocoring-number.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-number/cocoring-number.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-password/cocoring-password.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-password/cocoring-password.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-select/cocoring-select.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-select/cocoring-select.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-slide-toggle/cocoring-slide-toggle.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-slide-toggle/cocoring-slide-toggle.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-text/cocoring-text.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-text/cocoring-text.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-textarea/cocoring-textarea.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-textarea/cocoring-textarea.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-viewer/cocoring-viewer.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-viewer/cocoring-viewer.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/index.ts","../../../projects/cocori-ng/src/feature-form/core/service/form-builder/form-builder.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/uploader/uploader.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/toast-message.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/datagrid/datagrid.service.ts","../../../projects/cocori-ng/src/feature-form/shared/component/modal/confirm-modal/cocoring-confirm-modal.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/modal/confirm-modal/cocoring-confirm-modal.component.html","../../../projects/cocori-ng/src/feature-form/core/service/confirm-modal.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/flex-layout/flex-layout.service.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/color-picker/cocoring-colorpicker.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/color-picker/cocoring-colorpicker.module.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/default-image/cocoring-default-image.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/default-image/cocoring-default-image.module.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/previous-page/cocoring-previous-page.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/previous-page/cocoring-previous-page.module.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/datagrid/cocoring-datagrid-group.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/variable-html/cocoring-variable-html.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/file-size/cocoring-file-size.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/file-size/cocoring-file-size.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/pretty-print/cocoring-pretty-print.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/pretty-print/cocoring-pretty-print.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/sanitize-url/cocoring-sanitize-url.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/sanitize-url/cocoring-sanitize-url.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/truncate/cocoring-truncate.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/truncate/cocoring-truncate.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/error-handler/input-error-handler/cocoring-input-error.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/wysiwyg/cocoring-wysiwyg.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/wysiwyg/cocoring-wysiwyg.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/wysiwyg/cocoring-wysiwyg.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/toast-error-stacktrace/toast-error-stacktrace.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/toast-error-stacktrace/toast-error-stacktrace.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/toast-error-stacktrace/toast-error-stacktrace.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/modal/confirm-modal/cocoring-confirm-modal.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-buttons/cocoring-buttons-group.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-buttons/cocoring-buttons-group.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-buttons/cocoring-buttons-group.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-icon/input-icon.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox/cocoring-checkbox.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox-indeterminate/checkbox-indeterminate.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-date/cocoring-date.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-slide-toggle/cocoring-slide-toggle.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-email/cocoring-email.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-number/cocoring-number.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-password/cocoring-password.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-select/cocoring-select.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-text/cocoring-text.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-textarea/cocoring-textarea.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-viewer/cocoring-viewer.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-container/cocoring-form-container.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-container/cocoring-form-container.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-container/cocoring-form-container.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button/cocoring-button.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button-link/cocoring-button-link.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-bottom-sheet/cocoring-uploader-bottom-sheet.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-bottom-sheet/cocoring-uploader-bottom-sheet.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-file-actions/cocoring-uploader-file-actions.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-file-actions/cocoring-uploader-file-actions.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-list-file/cocoring-uploader-list-file.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-list-file/cocoring-uploader-list-file.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-cell/cocoring-datagrid-cell.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-cell/cocoring-datagrid-cell.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-row/cocoring-datagrid-row.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-row/cocoring-datagrid-row.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/common-datagrid/sort-column-extend.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-head/cocoring-datagrid-head.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-head/cocoring-datagrid-head.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-column/cocoring-datagrid-filter-column.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-column/cocoring-datagrid-filter-column.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-modal.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-modal.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-searchbar/cocoring-datagrid-searchbar.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-searchbar/cocoring-datagrid-searchbar.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-toolbar.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-toolbar.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid.module.ts","../../../projects/cocori-ng/src/feature-form/shared/index.ts","../../../projects/cocori-ng/src/feature-core/service/http.service.ts","../../../projects/cocori-ng/src/feature-core/service/storage.service.ts","../../../projects/cocori-ng/src/feature-core/service/token.service.ts","../../../projects/cocori-ng/src/feature-core/service/broadcast-event.service.ts","../../../projects/cocori-ng/src/feature-core/service/interceptors/global-error-interceptor.service.ts","../../../projects/cocori-ng/src/feature-core/service/interceptors/loading-interceptor.service.ts","../../../projects/cocori-ng/src/feature-core/service/interceptors/request-interceptor.service.ts","../../../projects/cocori-ng/src/feature-core/service/sort/sort.service.ts","../../../projects/cocori-ng/src/feature-core/service/scroll.service.ts","../../../projects/cocori-ng/src/feature-core/service/inject-component.service.ts","../../../projects/cocori-ng/src/feature-core/service/helper/helper.service.ts","../../../projects/cocori-ng/src/feature-core/service/validators.service.ts","../../../projects/cocori-ng/src/feature-core/service/current-url-routing.service.ts","../../../projects/cocori-ng/src/feature-core/service/odata-query-builder/enums.ts","../../../projects/cocori-ng/src/feature-core/service/odata-query-builder/queryFragment.ts","../../../projects/cocori-ng/src/feature-core/service/odata-query-builder/queryBuilder.ts","../../../projects/cocori-ng/src/feature-core/service/file/file.service.ts","../../../projects/cocori-ng/src/feature-core/service/form-map-value/mapping.service.ts","../../../projects/cocori-ng/src/feature-core/service/helper/helper-form.service.ts","../../../projects/cocori-ng/src/feature-core/service/helper/url-helper.ts","../../../projects/cocori-ng/src/feature-core/service/helper/helper-uploader.service.ts","../../../projects/cocori-ng/src/feature-core/service/wysiwyg.service.ts","../../../projects/cocori-ng/src/feature-core/model/data-source.model.ts","../../../projects/cocori-ng/src/feature-core/service/datasource.service.ts","../../../projects/cocori-ng/src/feature-core/service/string.service.ts","../../../projects/cocori-ng/src/feature-core/model/odata.model.ts","../../../projects/cocori-ng/src/feature-core/model/form-input-components.model.ts","../../../projects/cocori-ng/src/feature-core/model/schema-datas.model.ts","../../../projects/cocori-ng/src/feature-core/model/component-inputs.model.ts","../../../projects/cocori-ng/src/feature-gallery/core/service/image-fullscreen-view.service.ts","../../../projects/cocori-ng/src/feature-gallery/shared/fullscreen-viewer/slider-custom-image/slider-custom-image.component.ts","../../../projects/cocori-ng/src/feature-gallery/shared/fullscreen-viewer/slider-custom-image/slider-custom-image.component.html","../../../projects/cocori-ng/src/feature-gallery/shared/fullscreen-viewer/image-fullscreen-view/image-fullscreen-view.component.ts","../../../projects/cocori-ng/src/feature-gallery/shared/fullscreen-viewer/image-fullscreen-view/image-fullscreen-view.html","../../../projects/cocori-ng/src/feature-gallery/shared/fullscreen-viewer/image-fullscreen-view/image-fullscreen-view.module.ts","../../../projects/cocori-ng/src/feature-gallery/public-api.ts","../../../projects/cocori-ng/src/public-api.ts","../../../projects/cocori-ng/src/cocori-ng.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(api