ngx-tiptap-editor/esm2020/lib/components/side-by-side/side-by-side.component.mjs

[](https://github.com/HuiiBuh/ngx-tiptap-editor/actions/workflows/publish.yml) [![Deploy to Github Pages](https://github.com/HuiiBuh/ngx-tiptap-edito

import { ChangeDetectionStrategy, Component, ContentChild } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { EditorPreviewComponent } from '../editor-preview/editor-preview.component';
import { EditorComponent } from '../editor/editor.component';
import * as i0 from "@angular/core";
export class SideBySideComponent {
    constructor() {
        this.destroy$ = new Subject();
    }
    ngAfterViewInit() {
        this.editor.jsonChange
            .pipe(takeUntil(this.destroy$))
            .subscribe((content) => {
            this.preview.renderOutput(content);
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.complete();
    }
}
SideBySideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SideBySideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SideBySideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SideBySideComponent, selector: "tip-side-by-side", queries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "preview", first: true, predicate: EditorPreviewComponent, descendants: true }], ngImport: i0, template: `
    <ng-content select="tip-editor"></ng-content>
    <div class="preview-wrapper">
      <div class="preview-heading v-center h-center">
        <h2 class="no-margin">Preview</h2>
      </div>
      <ng-content select="tip-editor-preview"></ng-content>
    </div>
  `, isInline: true, styles: [":host-context{display:flex;width:100%}.preview-heading{border-bottom:solid 1px var(--tip-border-color);padding:var(--tip-header-padding);height:var(--tip-header-height);box-sizing:border-box}.preview-wrapper{border:solid 1px var(--tip-border-color);border-left:none;width:50%}::ng-deep tip-side-by-side>tip-editor{width:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SideBySideComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'tip-side-by-side',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    template: `
    <ng-content select="tip-editor"></ng-content>
    <div class="preview-wrapper">
      <div class="preview-heading v-center h-center">
        <h2 class="no-margin">Preview</h2>
      </div>
      <ng-content select="tip-editor-preview"></ng-content>
    </div>
  `,
                    styles: [`
    :host-context {
      display: flex;
      width: 100%;
    }

    .preview-heading {
      border-bottom: solid 1px var(--tip-border-color);
      padding: var(--tip-header-padding);
      height: var(--tip-header-height);
      box-sizing: border-box;
    }

    .preview-wrapper {
      border: solid 1px var(--tip-border-color);
      border-left: none;
      width: 50%;
    }

    ::ng-deep tip-side-by-side > tip-editor {
      width: 50%;
    }
  `]
                }]
        }], propDecorators: { editor: [{
                type: ContentChild,
                args: [EditorComponent]
            }], preview: [{
                type: ContentChild,
                args: [EditorPreviewComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1ieS1zaWRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aXB0YXAtZWRpdG9yL3NyYy9saWIvY29tcG9uZW50cy9zaWRlLWJ5LXNpZGUvc2lkZS1ieS1zaWRlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFDM0csT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDcEYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQXNDN0QsTUFBTSxPQUFPLG1CQUFtQjtJQXBDaEM7UUF3Q1UsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFXLENBQUM7S0FjM0M7SUFaUSxlQUFlO1FBQ3BCLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVTthQUNuQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUNyQixJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDM0IsQ0FBQzs7Z0hBakJVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLDRGQUNoQixlQUFlLDBFQUNmLHNCQUFzQixnREFuQzFCOzs7Ozs7OztHQVFUOzJGQXlCVSxtQkFBbUI7a0JBcEMvQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxRQUFRLEVBQUU7Ozs7Ozs7O0dBUVQ7b0JBQ0QsTUFBTSxFQUFFLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQlIsQ0FBQztpQkFDSDs4QkFFd0MsTUFBTTtzQkFBNUMsWUFBWTt1QkFBQyxlQUFlO2dCQUNpQixPQUFPO3NCQUFwRCxZQUFZO3VCQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBFZGl0b3JQcmV2aWV3Q29tcG9uZW50IH0gZnJvbSAnLi4vZWRpdG9yLXByZXZpZXcvZWRpdG9yLXByZXZpZXcuY29tcG9uZW50JztcbmltcG9ydCB7IEVkaXRvckNvbXBvbmVudCB9IGZyb20gJy4uL2VkaXRvci9lZGl0b3IuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGlwLXNpZGUtYnktc2lkZScsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInRpcC1lZGl0b3JcIj48L25nLWNvbnRlbnQ+XG4gICAgPGRpdiBjbGFzcz1cInByZXZpZXctd3JhcHBlclwiPlxuICAgICAgPGRpdiBjbGFzcz1cInByZXZpZXctaGVhZGluZyB2LWNlbnRlciBoLWNlbnRlclwiPlxuICAgICAgICA8aDIgY2xhc3M9XCJuby1tYXJnaW5cIj5QcmV2aWV3PC9oMj5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwidGlwLWVkaXRvci1wcmV2aWV3XCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtgXG4gICAgOmhvc3QtY29udGV4dCB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgfVxuXG4gICAgLnByZXZpZXctaGVhZGluZyB7XG4gICAgICBib3JkZXItYm90dG9tOiBzb2xpZCAxcHggdmFyKC0tdGlwLWJvcmRlci1jb2xvcik7XG4gICAgICBwYWRkaW5nOiB2YXIoLS10aXAtaGVhZGVyLXBhZGRpbmcpO1xuICAgICAgaGVpZ2h0OiB2YXIoLS10aXAtaGVhZGVyLWhlaWdodCk7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIH1cblxuICAgIC5wcmV2aWV3LXdyYXBwZXIge1xuICAgICAgYm9yZGVyOiBzb2xpZCAxcHggdmFyKC0tdGlwLWJvcmRlci1jb2xvcik7XG4gICAgICBib3JkZXItbGVmdDogbm9uZTtcbiAgICAgIHdpZHRoOiA1MCU7XG4gICAgfVxuXG4gICAgOjpuZy1kZWVwIHRpcC1zaWRlLWJ5LXNpZGUgPiB0aXAtZWRpdG9yIHtcbiAgICAgIHdpZHRoOiA1MCU7XG4gICAgfVxuICBgXVxufSlcbmV4cG9ydCBjbGFzcyBTaWRlQnlTaWRlQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgQENvbnRlbnRDaGlsZChFZGl0b3JDb21wb25lbnQpIHByaXZhdGUgZWRpdG9yITogRWRpdG9yQ29tcG9uZW50O1xuICBAQ29udGVudENoaWxkKEVkaXRvclByZXZpZXdDb21wb25lbnQpIHByaXZhdGUgcHJldmlldyE6IEVkaXRvclByZXZpZXdDb21wb25lbnQ7XG5cbiAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PGJvb2xlYW4+KCk7XG5cbiAgcHVibGljIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvci5qc29uQ2hhbmdlXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXG4gICAgICAuc3Vic2NyaWJlKChjb250ZW50KSA9PiB7XG4gICAgICAgIHRoaXMucHJldmlldy5yZW5kZXJPdXRwdXQoY29udGVudCk7XG4gICAgICB9KTtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQodHJ1ZSk7XG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xuICB9XG59XG4iXX0=