@libs-ui/components-image-editor 0.2.190 → 0.2.192

package/esm2022/index.mjs

@@ -2,4 +2,5 @@ export * from './image-editor.component';
 export * from './interfaces/image-editor.interface';
 export * from './interfaces/function-control-event.interface';
 export * from './resize/resize.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW1hZ2UtZWRpdG9yL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYywrQ0FBK0MsQ0FBQztBQUM5RCxjQUFjLDJCQUEyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9pbWFnZS1lZGl0b3IuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9pbWFnZS1lZGl0b3IuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9mdW5jdGlvbi1jb250cm9sLWV2ZW50LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL3Jlc2l6ZS9yZXNpemUuY29tcG9uZW50JztcbiJdfQ==
+export * from './demo/image-editor-demo.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW1hZ2UtZWRpdG9yL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYywrQ0FBK0MsQ0FBQztBQUM5RCxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsb0NBQW9DLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2ltYWdlLWVkaXRvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2ltYWdlLWVkaXRvci5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2Z1bmN0aW9uLWNvbnRyb2wtZXZlbnQuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vcmVzaXplL3Jlc2l6ZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9kZW1vL2ltYWdlLWVkaXRvci1kZW1vLmNvbXBvbmVudCc7Il19

package/fesm2022/libs-ui-components-image-editor.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, signal, input, model, viewChild, output, inject, Optional, Inject, ChangeDetectionStrategy } from '@angular/core';
+import { EventEmitter, Output, Input, Component, signal, input, model, viewChild, output, inject, Optional, Inject, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
 import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
@@ -331,7 +331,7 @@ class LibsUiComponentsImageEditorComponent {
     initMouseEvent() {
         const mouseUp = this.initEvent({ nativeElement: document }, 'mouseup', { callStopPropagation: true, callPreventDefault: true }, undefined, () => this.handlerMouseup());
         const mouseMove = this.initEvent({ nativeElement: document }, 'mousemove', { callStopPropagation: true, callPreventDefault: true }).pipe(takeUntil(mouseUp));
-        this.initEvent({ nativeElement: document }, 'wheel', { callStopPropagation: true }, undefined, (e) => this.handlerMousewheel(e)).subscribe();
+        this.initEvent(this.imageEditorContainer(), 'wheel', { callStopPropagation: true }, undefined, (e) => this.handlerMousewheel(e)).subscribe();
         this.initEvent({ nativeElement: window }, 'resize', {}, undefined, () => this.updateModalSize()).subscribe();
         this.initEvent(this.imageContainer(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => this.handlerImageContainerMousedown(e)).subscribe((e) => this.handlerMousemove(e));
         this.initEvent(this.cropTL(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'TL'); }).subscribe((e) => this.handlerMousemove(e));
@@ -649,12 +649,24 @@ class LibsUiComponentsImageEditorComponent {
         const [currWidth, currHeight, currTop, currLeft] = getStylesOfElement(this.imageOrigin().nativeElement, ['offsetWidth', 'offsetHeight', 'style.top', 'style.left']);
         const width = Math.max(currWidth * scale, 50);
         const height = this.imageOrigin().nativeElement.offsetHeight * width / this.imageOrigin().nativeElement.offsetWidth;
-        const top = currTop + (currHeight - height) / 2;
-        const left = currLeft + (currWidth - width) / 2;
+        // Calculate the center point of the current view
+        const centerX = currLeft + currWidth / 2;
+        const centerY = currTop + currHeight / 2;
+        // Calculate new position to maintain center point
+        const top = centerY - height / 2;
+        const left = centerX - width / 2;
+        // Get current crop area dimensions and position
         let [cropWidth, cropHeight] = getStylesOfElement(this.cropArea().nativeElement, ['offsetWidth', 'offsetHeight']);
         const [cropTop, cropLeft] = getStylesOfElement(this.cropArea().nativeElement, ['style.top', 'style.left']);
-        const maxCropWidth = width + left - cropLeft;
-        const maxCropHeight = height + top - cropTop;
+        // Scale crop area dimensions proportionally
+        cropWidth = cropWidth * scale;
+        cropHeight = cropHeight * scale;
+        // Calculate new crop area position relative to the image
+        const cropTopNew = top + (cropTop - currTop) * scale;
+        const cropLeftNew = left + (cropLeft - currLeft) * scale;
+        // Ensure crop area stays within bounds
+        const maxCropWidth = width;
+        const maxCropHeight = height;
         const minWidth = 20;
         const minHeight = 20;
         cropWidth = Math.min(cropWidth, maxCropWidth);
@@ -668,9 +680,10 @@ class LibsUiComponentsImageEditorComponent {
             cropHeight = Math.max(cropHeight, minHeight);
             cropWidth = cropHeight * this.ratioValue();
         }
+        // Update clipping rectangle
         this.rectClip.update(rect => {
-            const rectTop = cropTop - top;
-            const rectLeft = cropLeft - left;
+            const rectTop = cropTopNew - top;
+            const rectLeft = cropLeftNew - left;
             return {
                 ...rect,
                 top: rectTop,
@@ -680,7 +693,8 @@ class LibsUiComponentsImageEditorComponent {
             };
         });
         const clip = `rect(${this.rectClip().top}px, ${this.rectClip().right}px, ${this.rectClip().bottom}px, ${this.rectClip().left}px)`;
-        this.setStylesElements(this.cropArea(), { top: cropTop, left: cropLeft, width: cropWidth, height: cropHeight });
+        // Update all elements with new positions and dimensions
+        this.setStylesElements(this.cropArea(), { top: cropTopNew, left: cropLeftNew, width: cropWidth, height: cropHeight });
         this.setStylesElements(this.imageOrigin(), { top, left, width, height });
         this.setCirclePosition({ top, left, width, height });
         this.setStylesElements(this.imageClip(), { clip, top, left, width, height });
@@ -970,9 +984,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [LINK_IMAGE_ERROR_TOKEN_INJECT]
                 }] }] });
 
+class LibsUiComponentsImageEditorDemoComponent {
+    imageFileInput;
+    imageSource = '';
+    showEditor = false;
+    editedImageUrl = '';
+    selectedFile = null;
+    imageName = '';
+    // Documentation data as regular properties
+    inputsDoc = [
+        { name: 'imgSrc', type: 'string', default: 'Bắt buộc', description: 'Đường dẫn hoặc base64 của hình ảnh cần chỉnh sửa' },
+        { name: 'originUrl', type: 'string', default: '-', description: 'URL gốc của hình ảnh' },
+        { name: 'nameFile', type: 'string', default: '-', description: 'Tên file khi lưu' },
+        { name: 'modeShowButton', type: '\'save-file\' | \'save-api\'', default: '\'save-file\'', description: 'Chế độ nút lưu' },
+        { name: 'mimetype', type: 'string', default: '-', description: 'Định dạng của hình ảnh' },
+        { name: 'zIndex', type: 'number', default: '1200', description: 'z-index của component' },
+        { name: 'hasZoom', type: 'boolean', default: 'false', description: 'Cho phép phóng to/thu nhỏ hình ảnh' },
+        { name: 'aspectRatio', type: 'IAspectRatio', default: '-', description: 'Tỷ lệ khung hình mặc định' },
+        { name: 'requiredCropFollowRatio', type: 'boolean', default: 'false', description: 'Bắt buộc cắt theo tỷ lệ đã chọn' }
+    ];
+    outputsDoc = [
+        { name: 'outClose', type: '{isClickButtonClose: boolean}', description: 'Sự kiện khi đóng trình chỉnh sửa' },
+        { name: 'outSaveFile', type: 'ISaveFile', description: 'Sự kiện khi lưu file' },
+        { name: 'outFunctionsControl', type: 'IImageEditorFunctionControlEvent', description: 'Sự kiện để kiểm soát các chức năng' }
+    ];
+    interfacesDoc = [
+        {
+            name: 'ISaveFile',
+            code: 'export interface ISaveFile {\n  file: Blob;\n  url: string;\n  mode: \'save-file\' | \'save-api\' | \'save-api-as-new-file\';\n}',
+            description: 'Interface định nghĩa dữ liệu khi lưu file.'
+        },
+        {
+            name: 'IImageEditorFunctionControlEvent',
+            code: 'export interface IImageEditorFunctionControlEvent {\n  cropImage: () => Promise<string>;\n  setLoadingState: (loading: boolean) => void;\n}',
+            description: 'Interface định nghĩa các hàm điều khiển có thể được gọi từ bên ngoài component.'
+        },
+        {
+            name: 'IAspectRatio',
+            code: 'export interface IAspectRatio {\n  key: string;\n  value: number;\n}',
+            description: 'Interface định nghĩa tỷ lệ khung hình.'
+        }
+    ];
+    features = [
+        {
+            id: 1,
+            icon: '✂️',
+            title: 'Cắt ảnh',
+            description: 'Cắt hình ảnh theo khu vực tùy chỉnh hoặc dựa trên tỷ lệ định trước (1:1, 4:3, 16:9, v.v.).'
+        },
+        {
+            id: 2,
+            icon: '🔄',
+            title: 'Xoay và lật',
+            description: 'Xoay hình ảnh theo các góc khác nhau hoặc lật theo chiều ngang/dọc.'
+        },
+        {
+            id: 3,
+            icon: '📏',
+            title: 'Thay đổi kích thước',
+            description: 'Thay đổi kích thước hình ảnh theo tỷ lệ phần trăm hoặc kích thước cụ thể.'
+        },
+        {
+            id: 4,
+            icon: '💾',
+            title: 'Nhiều chế độ lưu',
+            description: 'Hỗ trợ nhiều chế độ lưu: tải xuống trực tiếp hoặc gửi đến API.'
+        },
+        {
+            id: 5,
+            icon: '🔍',
+            title: 'Phóng to/thu nhỏ',
+            description: 'Tính năng phóng to/thu nhỏ để xem chi tiết hình ảnh khi cần thiết.'
+        }
+    ];
+    codeExamples = [
+        {
+            id: 1,
+            title: 'Sử dụng cơ bản',
+            code: `import { Component } from '@angular/core';\nimport { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  template: \`\n    <libs_ui-components-image_editor\n      [(imgSrc)]="imageSource"\n      [modeShowButton]="'save-file'"\n      [nameFile]="'image.jpg'"\n      (outSaveFile)="onSaveFile($event)"\n      (outClose)="onClose($event)">\n    </libs_ui-components-image_editor>\n  \`\n})\nexport class ExampleComponent {\n  imageSource = 'https://example.com/path/to/image.jpg';\n\n  onSaveFile(data: {file: Blob, url: string, mode: string}) {\n    console.log('File đã được lưu:', data);\n  }\n\n  onClose(data: {isClickButtonClose: boolean}) {\n    console.log('Đã đóng trình chỉnh sửa ảnh');\n  }\n}`
+        },
+        {
+            id: 2,
+            title: 'Sử dụng với tỷ lệ cố định',
+            code: `import { Component } from '@angular/core';\nimport { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';\nimport { IAspectRatio } from '@libs-ui/interfaces-types';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  template: \`\n    <libs_ui-components-image_editor\n      [(imgSrc)]="imageSource"\n      [aspectRatio]="aspectRatio"\n      [requiredCropFollowRatio]="true"\n      (outSaveFile)="onSaveFile($event)">\n    </libs_ui-components-image_editor>\n  \`\n})\nexport class ExampleComponent {\n  imageSource = 'https://example.com/path/to/image.jpg';\n  aspectRatio: IAspectRatio = {\n    key: '1:1',\n    value: 1\n  };\n\n  onSaveFile(data: any) {\n    console.log('Đã lưu hình ảnh với tỷ lệ 1:1');\n  }\n}`
+        },
+        {
+            id: 3,
+            title: 'Sử dụng với phần điều khiển bên ngoài',
+            code: `import { Component, ViewChild } from '@angular/core';\nimport { LibsUiComponentsImageEditorComponent, IImageEditorFunctionControlEvent } from '@libs-ui/components-image-editor';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  template: \`\n    <button (click)="cropAndSave()">Cắt và lưu ngay</button>\n    <libs_ui-components-image_editor\n      [(imgSrc)]="imageSource"\n      (outFunctionsControl)="onFunctionsControl($event)">\n    </libs_ui-components-image_editor>\n  \`\n})\nexport class ExampleComponent {\n  imageSource = 'https://example.com/path/to/image.jpg';\n  editorFunctions!: IImageEditorFunctionControlEvent;\n\n  onFunctionsControl(event: IImageEditorFunctionControlEvent) {\n    this.editorFunctions = event;\n  }\n\n  async cropAndSave() {\n    if (this.editorFunctions) {\n      this.editorFunctions.setLoadingState(true);\n      try {\n        const dataUrl = await this.editorFunctions.cropImage();\n        console.log('Hình ảnh đã được cắt:', dataUrl);\n      } finally {\n        this.editorFunctions.setLoadingState(false);\n      }\n    }\n  }\n}`
+        }
+    ];
+    copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+            alert('Đã sao chép vào clipboard');
+        }).catch(err => {
+            console.error('Không thể sao chép: ', err);
+        });
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.selectedFile = input.files[0];
+            this.imageName = this.selectedFile.name;
+            console.log('File selected:', this.selectedFile.name);
+        }
+    }
+    uploadAndEdit() {
+        if (!this.selectedFile) {
+            alert('Vui lòng chọn một file hình ảnh trước');
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            if (e.target?.result) {
+                this.imageSource = e.target.result;
+                this.showEditor = true;
+            }
+        };
+        reader.readAsDataURL(this.selectedFile);
+    }
+    onSaveImage(data) {
+        console.log('Image saved:', data);
+        this.editedImageUrl = data.url;
+        this.showEditor = false;
+    }
+    onCloseEditor(data) {
+        console.log('Editor closed:', data);
+        this.showEditor = false;
+    }
+    downloadImage() {
+        if (this.editedImageUrl) {
+            const link = document.createElement('a');
+            link.href = this.editedImageUrl;
+            link.download = this.imageName || 'edited-image.jpg';
+            link.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsImageEditorDemoComponent, isStandalone: true, selector: "lib-image-editor-demo", viewQueries: [{ propertyName: "imageFileInput", first: true, predicate: ["imageFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Tr\u00ECnh Ch\u1EC9nh S\u1EEDa H\u00ECnh \u1EA2nh</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component cho Angular \u0111\u1EC3 ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-image-editor</code> l\u00E0 m\u1ED9t\n        component Angular m\u1EA1nh m\u1EBD cho ph\u00E9p ng\u01B0\u1EDDi d\u00F9ng th\u1EF1c hi\u1EC7n c\u00E1c thao t\u00E1c ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh nh\u01B0 c\u1EAFt, thay \u0111\u1ED5i k\u00EDch\n        th\u01B0\u1EDBc, xoay, l\u1EADt v\u00E0 \u00E1p d\u1EE5ng t\u1EF7 l\u1EC7 c\u1ED1 \u0111\u1ECBnh.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n          <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-image-editor</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-image-editor</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n      <div>\n        <p class=\"mb-4\">T\u1EA3i l\u00EAn h\u00ECnh \u1EA3nh v\u00E0 ch\u1EC9nh s\u1EEDa ngay tr\u00EAn tr\u00ECnh duy\u1EC7t:</p>\n        <div class=\"flex flex-wrap items-center gap-4 mb-8\">\n          <input type=\"file\"\n            #imageFileInput\n            accept=\"image/*\"\n            class=\"border border-gray-300 rounded px-3 py-2\"\n            (change)=\"onFileSelected($event)\" />\n          <libs_ui-components-buttons-button label=\"T\u1EA3i l\u00EAn v\u00E0 ch\u1EC9nh s\u1EEDa\"\n            (click)=\"uploadAndEdit()\">\n          </libs_ui-components-buttons-button>\n        </div>\n\n        @if (editedImageUrl) {\n          <div class=\"mt-8 p-6 bg-gray-50 rounded-lg\">\n            <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">K\u1EBFt qu\u1EA3</h3>\n            <div class=\"max-w-xl mx-auto mb-4 border border-gray-200 rounded-lg overflow-hidden shadow-md\">\n              <img [src]=\"editedImageUrl\"\n                alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\"\n                class=\"w-full h-auto\" />\n            </div>\n            <div class=\"flex justify-center\">\n              <libs_ui-components-buttons-button label=\"T\u1EA3i xu\u1ED1ng h\u00ECnh \u1EA3nh\"\n                (click)=\"downloadImage()\">\n              </libs_ui-components-buttons-button>\n            </div>\n          </div>\n        }\n      </div>\n    </section>\n\n    @if (showEditor) {\n      <div class=\"fixed inset-0 z-50\">\n        <libs_ui-components-image_editor [(imgSrc)]=\"imageSource\"\n          [nameFile]=\"imageName || 'demo-image.jpg'\"\n          [modeShowButton]=\"'save-file'\"\n          [hasZoom]=\"true\"\n          (outSaveFile)=\"onSaveImage($event)\"\n          (outClose)=\"onCloseEditor($event)\" />\n      </div>\n    }\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [nameFile]=\"'image.jpg'\"\n  [modeShowButton]=\"'save-file'\"\n  (outSaveFile)=\"onSaveFile($event)\"\n  (outClose)=\"onClose($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n\n  onSaveFile(data: &#123;file: Blob, url: string, mode: string&#125;) &#123;\n    console.log('File \u0111\u00E3 \u0111\u01B0\u1EE3c l\u01B0u:', data);\n  &#125;\n\n  onClose(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    console.log('\u0110\u00E3 \u0111\u00F3ng tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: V\u1EDBi tr\u00ECnh ch\u1EC9nh s\u1EEDa c\u00F3 th\u1EC3 \u0111\u00F3ng/m\u1EDF</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (toggle-editor.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;button (click)=\"openEditor()\" class=\"px-4 py-2 bg-blue-500 text-white rounded\"&gt;\n  M\u1EDF tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh\n&lt;/button&gt;\n\n&#64;if (showEditor) &#123;\n  &lt;libs_ui-components-image_editor\n    [(imgSrc)]=\"imageSource\"\n    [nameFile]=\"'my-image.jpg'\"\n    (outSaveFile)=\"onSaveFile($event)\"\n    (outClose)=\"onCloseEditor($event)\"&gt;\n  &lt;/libs_ui-components-image_editor&gt;\n&#125;\n\n&#64;if (editedImageUrl) &#123;\n  &lt;div class=\"mt-4\"&gt;\n    &lt;h3 class=\"text-lg font-semibold\"&gt;H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa:&lt;/h3&gt;\n    &lt;img [src]=\"editedImageUrl\" alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\" class=\"mt-2 max-w-full h-auto\" /&gt;\n  &lt;/div&gt;\n&#125;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (toggle-editor.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; ISaveFile &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-toggle-editor',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './toggle-editor.component.html'\n&#125;)\nexport class ToggleEditorComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  showEditor = false;\n  editedImageUrl = '';\n\n  openEditor() &#123;\n    this.showEditor = true;\n  &#125;\n\n  onSaveFile(data: ISaveFile) &#123;\n    this.editedImageUrl = data.url;\n    this.showEditor = false;\n    console.log('\u0110\u00E3 l\u01B0u file:', data.file);\n  &#125;\n\n  onCloseEditor(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    this.showEditor = false;\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 3: V\u1EDBi t\u1EF7 l\u1EC7 khung h\u00ECnh c\u1ED1 \u0111\u1ECBnh</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (fixed-ratio.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [aspectRatio]=\"aspectRatio\"\n  [requiredCropFollowRatio]=\"true\"\n  (outSaveFile)=\"onSaveFile($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (fixed-ratio.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; IAspectRatio &#125; from '&#64;libs-ui/interfaces-types';\n\n&#64;Component(&#123;\n  selector: 'app-fixed-ratio',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './fixed-ratio.component.html'\n&#125;)\nexport class FixedRatioComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  aspectRatio: IAspectRatio = &#123;\n    key: '1:1',\n    value: 1\n  &#125;;\n\n  onSaveFile(data: any) &#123;\n    console.log('\u0110\u00E3 l\u01B0u h\u00ECnh \u1EA3nh v\u1EDBi t\u1EF7 l\u1EC7 1:1');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (input of inputsDoc; track input.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (output of outputsDoc; track output.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n          <div class=\"bg-gray-50 p-6 rounded-lg\">\n            <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n            <pre\n              class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n            <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n          </div>\n        }\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n      <ul class=\"space-y-6\">\n        @for (feature of features; track feature.id) {\n          <li class=\"flex items-start\">\n            <span class=\"text-2xl text-blue-500 mr-4\">{{ feature.icon }}</span>\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n              <p class=\"text-gray-600\">{{ feature.description }}</p>\n            </div>\n          </li>\n        }\n      </ul>\n    </section>\n  </main>\n</div>\n", styles: ["pre code{@apply font-mono;}.hover\\:bg-blue-600{transition:background-color .2s ease-in-out}.overflow-x-auto{-webkit-overflow-scrolling:touch}pre::-webkit-scrollbar{@apply h-1.5 bg-gray-100;}pre::-webkit-scrollbar-thumb{@apply bg-gray-300 rounded;}button:focus,input:focus{@apply outline-none ring-2 ring-blue-400 ring-opacity-50;}input[type=file]{@apply text-sm text-gray-600;}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsImageEditorComponent, selector: "libs_ui-components-image_editor", inputs: ["modeShowButton", "mimetype", "zIndex", "imgSrc", "originUrl", "nameFile", "hasZoom", "aspectRatio", "requiredCropFollowRatio"], outputs: ["imgSrcChange", "outClose", "outSaveFile", "outFunctionsControl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-image-editor-demo', standalone: true, imports: [
+                        LibsUiComponentsButtonsButtonComponent,
+                        LibsUiComponentsImageEditorComponent
+                    ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Tr\u00ECnh Ch\u1EC9nh S\u1EEDa H\u00ECnh \u1EA2nh</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component cho Angular \u0111\u1EC3 ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-image-editor</code> l\u00E0 m\u1ED9t\n        component Angular m\u1EA1nh m\u1EBD cho ph\u00E9p ng\u01B0\u1EDDi d\u00F9ng th\u1EF1c hi\u1EC7n c\u00E1c thao t\u00E1c ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh nh\u01B0 c\u1EAFt, thay \u0111\u1ED5i k\u00EDch\n        th\u01B0\u1EDBc, xoay, l\u1EADt v\u00E0 \u00E1p d\u1EE5ng t\u1EF7 l\u1EC7 c\u1ED1 \u0111\u1ECBnh.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n          <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-image-editor</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-image-editor</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n      <div>\n        <p class=\"mb-4\">T\u1EA3i l\u00EAn h\u00ECnh \u1EA3nh v\u00E0 ch\u1EC9nh s\u1EEDa ngay tr\u00EAn tr\u00ECnh duy\u1EC7t:</p>\n        <div class=\"flex flex-wrap items-center gap-4 mb-8\">\n          <input type=\"file\"\n            #imageFileInput\n            accept=\"image/*\"\n            class=\"border border-gray-300 rounded px-3 py-2\"\n            (change)=\"onFileSelected($event)\" />\n          <libs_ui-components-buttons-button label=\"T\u1EA3i l\u00EAn v\u00E0 ch\u1EC9nh s\u1EEDa\"\n            (click)=\"uploadAndEdit()\">\n          </libs_ui-components-buttons-button>\n        </div>\n\n        @if (editedImageUrl) {\n          <div class=\"mt-8 p-6 bg-gray-50 rounded-lg\">\n            <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">K\u1EBFt qu\u1EA3</h3>\n            <div class=\"max-w-xl mx-auto mb-4 border border-gray-200 rounded-lg overflow-hidden shadow-md\">\n              <img [src]=\"editedImageUrl\"\n                alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\"\n                class=\"w-full h-auto\" />\n            </div>\n            <div class=\"flex justify-center\">\n              <libs_ui-components-buttons-button label=\"T\u1EA3i xu\u1ED1ng h\u00ECnh \u1EA3nh\"\n                (click)=\"downloadImage()\">\n              </libs_ui-components-buttons-button>\n            </div>\n          </div>\n        }\n      </div>\n    </section>\n\n    @if (showEditor) {\n      <div class=\"fixed inset-0 z-50\">\n        <libs_ui-components-image_editor [(imgSrc)]=\"imageSource\"\n          [nameFile]=\"imageName || 'demo-image.jpg'\"\n          [modeShowButton]=\"'save-file'\"\n          [hasZoom]=\"true\"\n          (outSaveFile)=\"onSaveImage($event)\"\n          (outClose)=\"onCloseEditor($event)\" />\n      </div>\n    }\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [nameFile]=\"'image.jpg'\"\n  [modeShowButton]=\"'save-file'\"\n  (outSaveFile)=\"onSaveFile($event)\"\n  (outClose)=\"onClose($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n\n  onSaveFile(data: &#123;file: Blob, url: string, mode: string&#125;) &#123;\n    console.log('File \u0111\u00E3 \u0111\u01B0\u1EE3c l\u01B0u:', data);\n  &#125;\n\n  onClose(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    console.log('\u0110\u00E3 \u0111\u00F3ng tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: V\u1EDBi tr\u00ECnh ch\u1EC9nh s\u1EEDa c\u00F3 th\u1EC3 \u0111\u00F3ng/m\u1EDF</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (toggle-editor.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;button (click)=\"openEditor()\" class=\"px-4 py-2 bg-blue-500 text-white rounded\"&gt;\n  M\u1EDF tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh\n&lt;/button&gt;\n\n&#64;if (showEditor) &#123;\n  &lt;libs_ui-components-image_editor\n    [(imgSrc)]=\"imageSource\"\n    [nameFile]=\"'my-image.jpg'\"\n    (outSaveFile)=\"onSaveFile($event)\"\n    (outClose)=\"onCloseEditor($event)\"&gt;\n  &lt;/libs_ui-components-image_editor&gt;\n&#125;\n\n&#64;if (editedImageUrl) &#123;\n  &lt;div class=\"mt-4\"&gt;\n    &lt;h3 class=\"text-lg font-semibold\"&gt;H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa:&lt;/h3&gt;\n    &lt;img [src]=\"editedImageUrl\" alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\" class=\"mt-2 max-w-full h-auto\" /&gt;\n  &lt;/div&gt;\n&#125;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (toggle-editor.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; ISaveFile &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-toggle-editor',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './toggle-editor.component.html'\n&#125;)\nexport class ToggleEditorComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  showEditor = false;\n  editedImageUrl = '';\n\n  openEditor() &#123;\n    this.showEditor = true;\n  &#125;\n\n  onSaveFile(data: ISaveFile) &#123;\n    this.editedImageUrl = data.url;\n    this.showEditor = false;\n    console.log('\u0110\u00E3 l\u01B0u file:', data.file);\n  &#125;\n\n  onCloseEditor(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    this.showEditor = false;\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 3: V\u1EDBi t\u1EF7 l\u1EC7 khung h\u00ECnh c\u1ED1 \u0111\u1ECBnh</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (fixed-ratio.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [aspectRatio]=\"aspectRatio\"\n  [requiredCropFollowRatio]=\"true\"\n  (outSaveFile)=\"onSaveFile($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (fixed-ratio.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; IAspectRatio &#125; from '&#64;libs-ui/interfaces-types';\n\n&#64;Component(&#123;\n  selector: 'app-fixed-ratio',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './fixed-ratio.component.html'\n&#125;)\nexport class FixedRatioComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  aspectRatio: IAspectRatio = &#123;\n    key: '1:1',\n    value: 1\n  &#125;;\n\n  onSaveFile(data: any) &#123;\n    console.log('\u0110\u00E3 l\u01B0u h\u00ECnh \u1EA3nh v\u1EDBi t\u1EF7 l\u1EC7 1:1');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (input of inputsDoc; track input.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF\n                li\u1EC7u\n              </th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (output of outputsDoc; track output.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\"><code\n                    class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code></td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n          <div class=\"bg-gray-50 p-6 rounded-lg\">\n            <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n            <pre\n              class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n            <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n          </div>\n        }\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n      <ul class=\"space-y-6\">\n        @for (feature of features; track feature.id) {\n          <li class=\"flex items-start\">\n            <span class=\"text-2xl text-blue-500 mr-4\">{{ feature.icon }}</span>\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n              <p class=\"text-gray-600\">{{ feature.description }}</p>\n            </div>\n          </li>\n        }\n      </ul>\n    </section>\n  </main>\n</div>\n", styles: ["pre code{@apply font-mono;}.hover\\:bg-blue-600{transition:background-color .2s ease-in-out}.overflow-x-auto{-webkit-overflow-scrolling:touch}pre::-webkit-scrollbar{@apply h-1.5 bg-gray-100;}pre::-webkit-scrollbar-thumb{@apply bg-gray-300 rounded;}button:focus,input:focus{@apply outline-none ring-2 ring-blue-400 ring-opacity-50;}input[type=file]{@apply text-sm text-gray-600;}\n"] }]
+        }], propDecorators: { imageFileInput: [{
+                type: ViewChild,
+                args: ['imageFileInput']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiComponentsImageEditorComponent, LibsUiComponentsImageEditorResizeComponent };
+export { LibsUiComponentsImageEditorComponent, LibsUiComponentsImageEditorDemoComponent, LibsUiComponentsImageEditorResizeComponent };
 //# sourceMappingURL=libs-ui-components-image-editor.mjs.map