@libs-ui/components-image-editor 0.2.30-6.1

package/README.md

@@ -0,0 +1,254 @@
+# Image Editor
+
+## Giới thiệu
+
+`image-editor` là một component mạnh mẽ dùng để chỉnh sửa hình ảnh trong ứng dụng Angular. Component này cho phép người dùng thực hiện nhiều thao tác chỉnh sửa hình ảnh như cắt, thay đổi kích thước, xoay, lật và áp dụng các tỷ lệ cố định.
+
+## Tính năng
+
+- Cắt hình ảnh với nhiều lựa chọn tỷ lệ khác nhau
+- Thay đổi kích thước hình ảnh
+- Xoay và lật hình ảnh
+- Phóng to/thu nhỏ hình ảnh
+- Khôi phục hình ảnh gốc
+- Lưu hình ảnh dưới dạng file hoặc gửi qua API
+
+## Cài đặt
+
+### Yêu cầu
+
+- Angular 18.0.0 trở lên
+- Tailwind CSS 3.3.0 trở lên
+
+### Hướng dẫn
+
+Để cài đặt component `image-editor`, sử dụng npm hoặc yarn:
+
+```bash
+npm install @libs-ui/components-image-editor
+```
+
+hoặc
+
+```bash
+yarn add @libs-ui/components-image-editor
+```
+
+## Sử dụng
+
+### Import component
+
+```typescript
+// example.component.ts
+import { Component } from '@angular/core';
+import { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsImageEditorComponent],
+  template: `
+    <libs_ui-components-image_editor
+      [(imgSrc)]="imageSource"
+      [modeShowButton]="'save-file'"
+      [nameFile]="'image.jpg'"
+      (outSaveFile)="onSaveFile($event)"
+      (outClose)="onClose($event)">
+    </libs_ui-components-image_editor>
+  `
+})
+export class ExampleComponent {
+  imageSource = 'https://example.com/path/to/image.jpg';
+
+  onSaveFile(data: {file: Blob, url: string, mode: string}) {
+    console.log('File đã được lưu:', data);
+  }
+
+  onClose(data: {isClickButtonClose: boolean}) {
+    console.log('Đã đóng trình chỉnh sửa ảnh');
+  }
+}
+```
+
+#### Cách 2: Sử dụng file HTML riêng biệt
+
+```typescript
+// example.component.ts
+import { Component } from '@angular/core';
+import { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsImageEditorComponent],
+  templateUrl: './example.component.html'
+})
+export class ExampleComponent {
+  imageSource = 'https://example.com/path/to/image.jpg';
+
+  onSaveFile(data: {file: Blob, url: string, mode: string}) {
+    console.log('File đã được lưu:', data);
+  }
+
+  onClose(data: {isClickButtonClose: boolean}) {
+    console.log('Đã đóng trình chỉnh sửa ảnh');
+  }
+}
+```
+
+```html
+<!-- example.component.html -->
+<libs_ui-components-image_editor
+  [(imgSrc)]="imageSource"
+  [modeShowButton]="'save-file'"
+  [nameFile]="'image.jpg'"
+  (outSaveFile)="onSaveFile($event)"
+  (outClose)="onClose($event)">
+</libs_ui-components-image_editor>
+```
+
+## Công nghệ sử dụng
+
+- **Angular 18**: Sử dụng các tính năng mới nhất của Angular 18 như control flow (@if, @for), standalone components, và signals
+- **Tailwind CSS**: Component được xây dựng với Tailwind CSS 3.3+ để quản lý style
+- **File Structure**: HTML, CSS và TypeScript được tách riêng để dễ dàng bảo trì và cập nhật
+
+## API Reference
+
+### Inputs
+
+| Tên | Kiểu dữ liệu | Mặc định | Mô tả |
+|-----|--------------|----------|-------|
+| imgSrc | `string` | Bắt buộc | Đường dẫn hoặc base64 của hình ảnh cần chỉnh sửa |
+| originUrl | `string` | - | URL gốc của hình ảnh |
+| nameFile | `string` | - | Tên file khi lưu |
+| modeShowButton | `'save-file' \| 'save-api'` | `'save-file'` | Chế độ nút lưu |
+| mimetype | `string` | - | Định dạng của hình ảnh |
+| zIndex | `number` | 1200 | z-index của component |
+| hasZoom | `boolean` | false | Cho phép phóng to/thu nhỏ hình ảnh |
+| aspectRatio | `IAspectRatio` | - | Tỷ lệ khung hình mặc định |
+| requiredCropFollowRatio | `boolean` | false | Bắt buộc cắt theo tỷ lệ đã chọn |
+
+### Outputs
+
+| Tên | Kiểu dữ liệu | Mô tả |
+|-----|--------------|-------|
+| outClose | `{isClickButtonClose: boolean}` | Sự kiện khi đóng trình chỉnh sửa |
+| outSaveFile | `ISaveFile` | Sự kiện khi lưu file |
+| outFunctionsControl | `IImageEditorFunctionControlEvent` | Sự kiện để kiểm soát các chức năng |
+
+### Interfaces
+
+#### ISaveFile
+```typescript
+export interface ISaveFile {
+  file: Blob;
+  url: string;
+  mode: 'save-file' | 'save-api' | 'save-api-as-new-file';
+}
+```
+
+#### IImageEditorFunctionControlEvent
+```typescript
+export interface IImageEditorFunctionControlEvent {
+  cropImage: () => Promise<string>;
+  setLoadingState: (loading: boolean) => void;
+}
+```
+
+## Ví dụ
+
+### Chỉnh sửa và lưu hình ảnh
+
+**TypeScript (edit-image.component.ts):**
+```typescript
+import { Component } from '@angular/core';
+import { ISaveFile, LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';
+
+@Component({
+  selector: 'app-edit-image',
+  standalone: true,
+  imports: [LibsUiComponentsImageEditorComponent],
+  templateUrl: './edit-image.component.html'
+})
+export class EditImageComponent {
+  imageSource = 'https://example.com/path/to/image.jpg';
+  showEditor = false;
+  editedImageUrl = '';
+
+  openEditor() {
+    this.showEditor = true;
+  }
+
+  onSaveFile(data: ISaveFile) {
+    this.editedImageUrl = data.url;
+    this.showEditor = false;
+    // Xử lý file đã lưu
+    console.log('Đã lưu file:', data.file);
+  }
+
+  onCloseEditor(data: {isClickButtonClose: boolean}) {
+    this.showEditor = false;
+  }
+}
+```
+
+**HTML (edit-image.component.html):**
+```html
+<button (click)="openEditor()" class="px-4 py-2 bg-blue-500 text-white rounded">
+  Mở trình chỉnh sửa ảnh
+</button>
+
+@if (showEditor) {
+  <libs_ui-components-image_editor
+    [(imgSrc)]="imageSource"
+    [nameFile]="'my-image.jpg'"
+    (outSaveFile)="onSaveFile($event)"
+    (outClose)="onCloseEditor($event)">
+  </libs_ui-components-image_editor>
+}
+
+@if (editedImageUrl) {
+  <div class="mt-4">
+    <h3 class="text-lg font-semibold">Hình ảnh đã chỉnh sửa:</h3>
+    <img [src]="editedImageUrl" alt="Hình ảnh đã chỉnh sửa" class="mt-2 max-w-full h-auto border rounded" />
+  </div>
+}
+```
+
+### Sử dụng với tỷ lệ cố định
+
+**TypeScript (fixed-ratio.component.ts):**
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';
+import { IAspectRatio } from '@libs-ui/interfaces-types';
+
+@Component({
+  selector: 'app-fixed-ratio',
+  standalone: true,
+  imports: [LibsUiComponentsImageEditorComponent],
+  templateUrl: './fixed-ratio.component.html'
+})
+export class FixedRatioComponent {
+  imageSource = 'https://example.com/path/to/image.jpg';
+  aspectRatio: IAspectRatio = {
+    key: '1:1',
+    value: 1
+  };
+
+  onSaveFile(data: any) {
+    console.log('Đã lưu hình ảnh với tỷ lệ 1:1');
+  }
+}
+```
+
+**HTML (fixed-ratio.component.html):**
+```html
+<libs_ui-components-image_editor
+  [(imgSrc)]="imageSource"
+  [aspectRatio]="aspectRatio"
+  [requiredCropFollowRatio]="true"
+  (outSaveFile)="onSaveFile($event)">
+</libs_ui-components-image_editor>
+```

package/defines/image-editor.define.d.ts

@@ -0,0 +1,16 @@
+import { ICropRatioItem } from "../interfaces/image-editor.interface";
+export declare const cropRationItems: () => Array<ICropRatioItem>;
+export declare const getDataUrl: (canvas: any, mimetype?: string, src?: string) => any;
+export declare const getWidthHeightResizeCropFollow: (ratioValue: number | undefined, width: number, height: number, maxWidth: number, maxHeight: number, minWidth: number, minHeight: number) => number[];
+export declare const getCropRectImage: (rectClip: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, imgWidth: number, imgHeight: number, scale: number) => {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export declare const getStylesOfElement: <T>(element: HTMLElement, fields: Array<string>) => Array<T>;

package/demo/image-editor-demo.component.d.ts

@@ -0,0 +1,48 @@
+import { ElementRef } from '@angular/core';
+import { ISaveFile } from '../interfaces/image-editor.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsImageEditorDemoComponent {
+    imageFileInput: ElementRef<HTMLInputElement>;
+    imageSource: string;
+    showEditor: boolean;
+    editedImageUrl: string;
+    selectedFile: File | null;
+    imageName: string;
+    inputsDoc: {
+        name: string;
+        type: string;
+        default: string;
+        description: string;
+    }[];
+    outputsDoc: {
+        name: string;
+        type: string;
+        description: string;
+    }[];
+    interfacesDoc: {
+        name: string;
+        code: string;
+        description: string;
+    }[];
+    features: {
+        id: number;
+        icon: string;
+        title: string;
+        description: string;
+    }[];
+    codeExamples: {
+        id: number;
+        title: string;
+        code: string;
+    }[];
+    copyToClipboard(text: string): void;
+    onFileSelected(event: Event): void;
+    uploadAndEdit(): void;
+    onSaveImage(data: ISaveFile): void;
+    onCloseEditor(data: {
+        isClickButtonClose: boolean;
+    }): void;
+    downloadImage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsImageEditorDemoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsImageEditorDemoComponent, "lib-image-editor-demo", never, {}, {}, never, never, true, never>;
+}

package/esm2022/defines/image-editor.define.mjs

@@ -0,0 +1,89 @@
+import { get } from "@libs-ui/utils";
+export const cropRationItems = () => {
+    return [
+        {
+            key: 'free',
+            icon: 'libs-ui-icon-customize-image-outline'
+        },
+        {
+            key: '1:1',
+            value: 1,
+            icon: 'libs-ui-icon-ratio-1-1'
+        },
+        {
+            key: '2:3',
+            value: 2 / 3,
+            icon: 'libs-ui-icon-ratio-2-3'
+        },
+        {
+            key: '3:2',
+            value: 3 / 2,
+            icon: 'libs-ui-icon-ratio-3-2'
+        },
+        {
+            key: '3:4',
+            value: 3 / 4,
+            icon: 'libs-ui-icon-ratio-3-4'
+        },
+        {
+            key: '4:3',
+            value: 4 / 3,
+            icon: 'libs-ui-icon-ratio-4-3'
+        },
+        {
+            key: '9:16',
+            value: 9 / 16,
+            icon: 'libs-ui-icon-ratio-9-16'
+        },
+        {
+            key: '16:9',
+            value: 16 / 9,
+            icon: 'libs-ui-icon-ratio-16-9'
+        }
+    ];
+};
+const getMimeTypeFromSrc = (src) => {
+    if (!src) {
+        return undefined;
+    }
+    const match = /^data:(.*?);/.exec(src);
+    if (match) {
+        return match[1];
+    }
+    const srcSplit = src.split('.');
+    const mineType = srcSplit[srcSplit.length - 1];
+    return `image/${(mineType.toLowerCase()) === 'jpg' ? 'jpeg' : mineType}`;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getDataUrl = (canvas, mimetype, src) => {
+    const mimeTypeBySrc = getMimeTypeFromSrc(src);
+    if (mimetype || mimeTypeBySrc) {
+        return canvas.toDataURL(mimetype || mimeTypeBySrc);
+    }
+    return canvas.toDataURL();
+};
+export const getWidthHeightResizeCropFollow = (ratioValue, width, height, maxWidth, maxHeight, minWidth, minHeight) => {
+    height = Math.min(height, maxHeight);
+    height = Math.max(minHeight, height);
+    if (ratioValue) {
+        width = height * ratioValue;
+        width = Math.min(maxWidth, width);
+        width = Math.max(minWidth, width);
+        height = width / ratioValue;
+    }
+    width = Math.min(maxWidth, width);
+    width = Math.max(minWidth, width);
+    return [width, height];
+};
+export const getCropRectImage = (rectClip, imgWidth, imgHeight, scale) => {
+    return {
+        left: Math.max(rectClip.left * scale, 0),
+        top: Math.max(rectClip.top * scale, 0),
+        width: rectClip.width * scale,
+        height: rectClip.height * scale
+    };
+};
+export const getStylesOfElement = (element, fields) => {
+    return fields?.map(field => parseFloat(get(element, field) || '0'));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtZWRpdG9yLmRlZmluZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbWFnZS1lZGl0b3Ivc3JjL2RlZmluZXMvaW1hZ2UtZWRpdG9yLmRlZmluZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFHckMsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLEdBQTBCLEVBQUU7SUFDekQsT0FBTztRQUNMO1lBQ0UsR0FBRyxFQUFFLE1BQU07WUFDWCxJQUFJLEVBQUUsc0NBQXNDO1NBQzdDO1FBQ0Q7WUFDRSxHQUFHLEVBQUUsS0FBSztZQUNWLEtBQUssRUFBRSxDQUFDO1lBQ1IsSUFBSSxFQUFFLHdCQUF3QjtTQUMvQjtRQUNEO1lBQ0UsR0FBRyxFQUFFLEtBQUs7WUFDVixLQUFLLEVBQUUsQ0FBQyxHQUFHLENBQUM7WUFDWixJQUFJLEVBQUUsd0JBQXdCO1NBQy9CO1FBQ0Q7WUFDRSxHQUFHLEVBQUUsS0FBSztZQUNWLEtBQUssRUFBRSxDQUFDLEdBQUcsQ0FBQztZQUNaLElBQUksRUFBRSx3QkFBd0I7U0FDL0I7UUFDRDtZQUNFLEdBQUcsRUFBRSxLQUFLO1lBQ1YsS0FBSyxFQUFFLENBQUMsR0FBRyxDQUFDO1lBQ1osSUFBSSxFQUFFLHdCQUF3QjtTQUMvQjtRQUNEO1lBQ0UsR0FBRyxFQUFFLEtBQUs7WUFDVixLQUFLLEVBQUUsQ0FBQyxHQUFHLENBQUM7WUFDWixJQUFJLEVBQUUsd0JBQXdCO1NBQy9CO1FBQ0Q7WUFDRSxHQUFHLEVBQUUsTUFBTTtZQUNYLEtBQUssRUFBRSxDQUFDLEdBQUcsRUFBRTtZQUNiLElBQUksRUFBRSx5QkFBeUI7U0FDaEM7UUFDRDtZQUNFLEdBQUcsRUFBRSxNQUFNO1lBQ1gsS0FBSyxFQUFFLEVBQUUsR0FBRyxDQUFDO1lBQ2IsSUFBSSxFQUFFLHlCQUF5QjtTQUNo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QUFDLE1BQU0sa0JBQWtCLEdBQUcsQ0FBSSxPQUFvQixFQUFFLE1BQXFCLEVBQVksRUFBRTtJQUM3RixPQUFPLE1BQU0sRUFBRSxHQUFHLENBQUksS0FBSyxDQUFDLEVBQUUsQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsSUFBSSxHQUFHLENBQU0sQ0FBQyxDQUFDO0FBQzlFLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldCB9IGZyb20gXCJAbGlicy11aS91dGlsc1wiO1xuaW1wb3J0IHsgSUNyb3BSYXRpb0l0ZW0gfSBmcm9tIFwiLi4vaW50ZXJmYWNlcy9pbWFnZS1lZGl0b3IuaW50ZXJmYWNlXCI7XG5cbmV4cG9ydCBjb25zdCBjcm9wUmF0aW9uSXRlbXMgPSAoKTogQXJyYXk8SUNyb3BSYXRpb0l0ZW0+ID0+IHtcbiAgcmV0dXJuIFtcbiAgICB7XG4gICAgICBrZXk6ICdmcmVlJyxcbiAgICAgIGljb246ICdsaWJzLXVpLWljb24tY3VzdG9taXplLWltYWdlLW91dGxpbmUnXG4gICAgfSxcbiAgICB7XG4gICAgICBrZXk6ICcxOjEnLFxuICAgICAgdmFsdWU6IDEsXG4gICAgICBpY29uOiAnbGlicy11aS1pY29uLXJhdGlvLTEtMSdcbiAgICB9LFxuICAgIHtcbiAgICAgIGtleTogJzI6MycsXG4gICAgICB2YWx1ZTogMiAvIDMsXG4gICAgICBpY29uOiAnbGlicy11aS1pY29uLXJhdGlvLTItMydcbiAgICB9LFxuICAgIHtcbiAgICAgIGtleTogJzM6MicsXG4gICAgICB2YWx1ZTogMyAvIDIsXG4gICAgICBpY29uOiAnbGlicy11aS1pY29uLXJhdGlvLTMtMidcbiAgICB9LFxuICAgIHtcbiAgICAgIGtleTogJzM6NCcsXG4gICAgICB2YWx1ZTogMyAvIDQsXG4gICAgICBpY29uOiAnbGlicy11aS1pY29uLXJhdGlvLTMtNCdcbiAgICB9LFxuICAgIHtcbiAgICAgIGtleTogJzQ6MycsXG4gICAgICB2YWx1ZTogNCAvIDMsXG4gICAgICBpY29uOiAnbGlicy11aS1pY29uLXJhdGlvLTQtMydcbiAgICB9LFxuICAgIHtcbiAgICAgIGtleTogJzk6MTYnLFxuICAgICAgdmFsdWU6IDkgLyAxNixcbiAgICAgIGljb246ICdsaWJzLXVpLWljb24tcmF0aW8tOS0xNidcbiAgICB9LFxuICAgIHtcbiAgICAgIGtleTogJzE2OjknLFxuICAgICAgdmFsdWU6IDE2IC8gOSxcbiAgICAgIGljb246ICdsaWJzLXVpLWljb24tcmF0aW8tMTYtOSdcbiAgICB9XG4gIF07XG59O1xuXG5jb25zdCBnZXRNaW1lVHlwZUZyb21TcmMgPSAoc3JjPzogc3RyaW5nKSA9PiB7XG4gIGlmICghc3JjKSB7XG4gICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgfVxuICBjb25zdCBtYXRjaCA9IC9eZGF0YTooLio/KTsvLmV4ZWMoc3JjKTtcblxuICBpZiAobWF0Y2gpIHtcbiAgICByZXR1cm4gbWF0Y2hbMV07XG4gIH1cbiAgY29uc3Qgc3JjU3BsaXQgPSBzcmMuc3BsaXQoJy4nKTtcbiAgY29uc3QgbWluZVR5cGUgPSBzcmNTcGxpdFtzcmNTcGxpdC5sZW5ndGggLSAxXTtcblxuICByZXR1cm4gYGltYWdlLyR7KG1pbmVUeXBlLnRvTG93ZXJDYXNlKCkpID09PSAnanBnJyA/ICdqcGVnJyA6IG1pbmVUeXBlfWA7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuZXhwb3J0IGNvbnN0IGdldERhdGFVcmwgPSAoY2FudmFzOiBhbnksIG1pbWV0eXBlPzogc3RyaW5nLCBzcmM/OiBzdHJpbmcpID0+IHtcbiAgY29uc3QgbWltZVR5cGVCeVNyYyA9IGdldE1pbWVUeXBlRnJvbVNyYyhzcmMpO1xuXG4gIGlmIChtaW1ldHlwZSB8fCBtaW1lVHlwZUJ5U3JjKSB7XG4gICAgcmV0dXJuIGNhbnZhcy50b0RhdGFVUkwobWltZXR5cGUgfHwgbWltZVR5cGVCeVNyYyk7XG4gIH1cblxuICByZXR1cm4gY2FudmFzLnRvRGF0YVVSTCgpO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldFdpZHRoSGVpZ2h0UmVzaXplQ3JvcEZvbGxvdyA9IChyYXRpb1ZhbHVlOiBudW1iZXIgfCB1bmRlZmluZWQsIHdpZHRoOiBudW1iZXIsIGhlaWdodDogbnVtYmVyLCBtYXhXaWR0aDogbnVtYmVyLCBtYXhIZWlnaHQ6IG51bWJlciwgbWluV2lkdGg6IG51bWJlciwgbWluSGVpZ2h0OiBudW1iZXIpID0+IHtcbiAgaGVpZ2h0ID0gTWF0aC5taW4oaGVpZ2h0LCBtYXhIZWlnaHQpO1xuICBoZWlnaHQgPSBNYXRoLm1heChtaW5IZWlnaHQsIGhlaWdodCk7XG4gIGlmIChyYXRpb1ZhbHVlKSB7XG4gICAgd2lkdGggPSBoZWlnaHQgKiByYXRpb1ZhbHVlO1xuICAgIHdpZHRoID0gTWF0aC5taW4obWF4V2lkdGgsIHdpZHRoKTtcbiAgICB3aWR0aCA9IE1hdGgubWF4KG1pbldpZHRoLCB3aWR0aCk7XG4gICAgaGVpZ2h0ID0gd2lkdGggLyByYXRpb1ZhbHVlO1xuICB9XG4gIHdpZHRoID0gTWF0aC5taW4obWF4V2lkdGgsIHdpZHRoKTtcbiAgd2lkdGggPSBNYXRoLm1heChtaW5XaWR0aCwgd2lkdGgpO1xuXG4gIHJldHVybiBbd2lkdGgsIGhlaWdodF07XG59O1xuXG5leHBvcnQgY29uc3QgZ2V0Q3JvcFJlY3RJbWFnZSA9IChyZWN0Q2xpcDogeyBsZWZ0OiBudW1iZXI7IHRvcDogbnVtYmVyOyB3aWR0aDogbnVtYmVyOyBoZWlnaHQ6IG51bWJlcjsgfSwgaW1nV2lkdGg6IG51bWJlciwgaW1nSGVpZ2h0OiBudW1iZXIsIHNjYWxlOiBudW1iZXIpID0+IHtcbiAgcmV0dXJuIHtcbiAgICBsZWZ0OiBNYXRoLm1heChyZWN0Q2xpcC5sZWZ0ICogc2NhbGUsIDApLFxuICAgIHRvcDogTWF0aC5tYXgocmVjdENsaXAudG9wICogc2NhbGUsIDApLFxuICAgIHdpZHRoOiByZWN0Q2xpcC53aWR0aCAqIHNjYWxlLFxuICAgIGhlaWdodDogcmVjdENsaXAuaGVpZ2h0ICogc2NhbGVcbiAgfTtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRTdHlsZXNPZkVsZW1lbnQgPSA8VD4oZWxlbWVudDogSFRNTEVsZW1lbnQsIGZpZWxkczogQXJyYXk8c3RyaW5nPik6IEFycmF5PFQ+ID0+IHtcbiAgcmV0dXJuIGZpZWxkcz8ubWFwPFQ+KGZpZWxkID0+IHBhcnNlRmxvYXQoZ2V0KGVsZW1lbnQsIGZpZWxkKSB8fCAnMCcpIGFzIFQpO1xufTsiXX0=