Preview KIT

    
      
    

      
        Copy
      
      
    
  

    
      <div class="tui-space_bottom-2">With all features</div>

<button
    size="m"
    tuiButton
    type="button"
    class="tui-space_bottom-4"
    (click)="show()"
>
    Show preview
</button>

<ng-template
    #preview
    let-preview
>
    <tui-preview
        [initialScale]="1.0"
        [rotatable]="true"
        (tuiSwipe)="onSwipe($event)"
    >
        <tui-preview-title>{{ titles[index] }}</tui-preview-title>
        <tui-preview-pagination
            [length]="length"
            [(index)]="index"
        />

        <button
            iconStart="@tui.trash"
            tuiIconButton
            tuiPreviewAction
            type="button"
            (click)="delete()"
        >
            Delete
        </button>
        <button
            iconStart="@tui.download"
            tuiIconButton
            tuiPreviewAction
            type="button"
            (click)="download()"
        >
            Download
        </button>
        <button
            iconStart="@tui.x"
            tuiIconButton
            tuiPreviewAction
            type="button"
            (click)="preview.complete()"
        >
            Close
        </button>

        <img
            *polymorpheusOutlet="previewContent as src"
            alt="preview"
            [src]="src"
        />
    </tui-preview>
</ng-template>

<ng-template #contentSample>
    <div class="content">
        <h1>Important document</h1>

        <p>Hello everyone! This is some important document in A4 format, although it is made using html</p>

        <p>
            This shows that the component preview can work with absolutely any content: this way you can show any
            template, image, pdf or even iframe with your favorite site. We will put this content in the center of the
            portal and provide the user with control over it, and we will provide you with convenient levers to change
            it and process actions.
        </p>

        <img
            alt="logo"
            src="https://raw.githubusercontent.com/taiga-family/ng-polymorpheus/main/projects/demo/assets/logo.svg"
            class="polymorpheus"
        />
    </div>
</ng-template>

    

      
        Copy
      
      
    
  

    
      @import '@taiga-ui/styles/utils.less';

.content {
    font: var(--tui-typography-body-l);
    background-color: var(--tui-background-base);
    inline-size: 50rem;
    block-size: 68.75rem;
    padding: 3.75rem;
    box-sizing: border-box;
    border-radius: 0.75rem;
}

.polymorpheus {
    padding: 2.5rem 10.375rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    size="m"
    tuiButton
    type="button"
    class="tui-space_bottom-4"
    (click)="open = !open"
>
    Show preview
</button>

<ng-template [(tuiPreviewDialog)]="open">
    <tui-preview>
        <tui-preview-title>{{ titles[index] }}</tui-preview-title>
        <tui-preview-pagination
            [length]="length"
            [(index)]="index"
        />

        <button
            iconStart="@tui.x"
            tuiIconButton
            tuiPreviewAction
            type="button"
            (click)="open = false"
        >
            Close
        </button>

        <img
            *polymorpheusOutlet="content[index] as src"
            alt="preview"
            [src]="src"
        />
    </tui-preview>
</ng-template>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    size="m"
    tuiButton
    type="button"
    class="tui-space_bottom-4"
    (click)="show()"
>
    Show simple preview
</button>

<ng-template
    #preview
    let-preview
>
    <tui-preview
        [rotatable]="false"
        [zoomable]="false"
    >
        <iframe
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
            title="Youtube"
            class="content"
        ></iframe>

        <button
            iconStart="@tui.x"
            tuiIconButton
            tuiPreviewAction
            type="button"
            (click)="preview.complete()"
        >
            Close
        </button>
    </tui-preview>
</ng-template>

    

      
        Copy
      
      
    
  

    
      .content {
    inline-size: 80%;
    block-size: 80%;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    size="m"
    tuiButton
    type="button"
    class="tui-space_bottom-4"
    (click)="show()"
>
    Show preview
</button>

<ng-template
    #preview
    let-preview
>
    <tui-preview
        [rotatable]="!(contentUnavailable$ | async)"
        [zoomable]="!(contentUnavailable$ | async) && !(loading$ | async)"
    >
        <tui-preview-title>{{ title$ | async }}</tui-preview-title>
        <tui-preview-pagination
            [index]="index$$.value"
            [length]="items.length"
            (indexChange)="index$$.next($event)"
        />

        <button
            iconStart="@tui.download"
            tuiIconButton
            tuiPreviewAction
            type="button"
            (click)="download()"
        >
            Download
        </button>

        <button
            iconStart="@tui.x"
            tuiIconButton
            tuiPreviewAction
            type="button"
            (click)="preview.complete()"
        >
            Close
        </button>

        @if (contentUnavailable$ | async) {
            <div
                tuiTheme="dark"
                class="t-container"
            >
                <tui-icon
                    icon="@tui.file"
                    class="t-icon"
                />
                <div>Preview unavailable</div>
            </div>
        }

        @if (imageSrc$ | async; as src) {
            <img
                alt="img source"
                height="512"
                width="512"
                [src]="src"
            />
        }

        @if (loading$ | async) {
            <tui-loader
                size="xl"
                class="t-loader"
            />
        }
    </tui-preview>
</ng-template>

    

      
        Copy
      
      
    
  

    
      .content {
    background-color: rgb(245, 241, 241);
    inline-size: 25rem;
    block-size: 37.5rem;
    padding: 2.5rem;
    border-radius: 0.75rem;
}

.t-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--tui-text-secondary);
}

.t-icon {
    margin-block-end: 0.75rem;
    font-size: 5rem;
}

.t-loader {
    inline-size: 4rem;
}

    

      
        Copy