@libs-ui/components-inputs-quill2x-preview 0.2.355-9 → 0.2.356-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,3 +1,75 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Quill2x Preview Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@libs-ui/components-inputs-quill2x-preview` là một component chuyên dụng để hiển thị nội dung HTML được tạo ra từ trình soạn thảo Quill2x. Nó đảm bảo nội dung được hiển thị nhất quán với trình soạn thảo, đồng thời hỗ trợ các tính năng như giới hạn chiều cao (view more/collapse) và bảo mật nội dung.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 🔍 **Consistent Rendering**: Hiển thị nội dung HTML với đầy đủ style tương ứng như khi soạn thảo trong Quill2x.
|
|
8
|
+
- 🛡️ **HTML Security**: Sử dụng `LibsUiPipesSecurityTrustPipe` để sanitize nội dung HTML, ngăn chặn các cuộc tấn công XSS.
|
|
9
|
+
- 📉 **View More / Collapse**: Tự động kiểm tra độ cao của nội dung. Nếu vượt quá `maxHeight`, component sẽ hiển thị nút "Xem thêm" và hiệu ứng gradient mờ dần ở đáy.
|
|
10
|
+
- 🎨 **Custom Styling**: Cho phép truyền thêm class tùy biến cho container thông qua input `containerClass`.
|
|
11
|
+
- ⚡ **Performance**: Sử dụng `ChangeDetectionStrategy.OnPush` để tối ưu hiệu năng render.
|
|
12
|
+
|
|
13
|
+
## Cài đặt
|
|
14
|
+
|
|
15
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @libs-ui/components-inputs-quill2x-preview
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Cách sử dụng
|
|
22
|
+
|
|
23
|
+
### Import Module
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import { LibsUiComponentsInputsQuill2xPreviewComponent } from '@libs-ui/components-inputs-quill2x-preview';
|
|
27
|
+
|
|
28
|
+
@Component({
|
|
29
|
+
standalone: true,
|
|
30
|
+
imports: [LibsUiComponentsInputsQuill2xPreviewComponent],
|
|
31
|
+
// ...
|
|
32
|
+
})
|
|
33
|
+
export class YourComponent {}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Ví dụ cơ bản
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<libs_ui-components-inputs-quill2x-preview [data]="htmlContent"></libs_ui-components-inputs-quill2x-preview>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Giới hạn chiều cao với nút Xem thêm
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<libs_ui-components-inputs-quill2x-preview
|
|
46
|
+
[data]="longHtmlContent"
|
|
47
|
+
[maxHeight]="200"
|
|
48
|
+
[hasButtonCollapseExpand]="true"
|
|
49
|
+
[labelButtonViewMore]="'Xem thêm nội dung'"
|
|
50
|
+
[labelButtonCollapse]="'Thu gọn'"></libs_ui-components-inputs-quill2x-preview>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## API Reference
|
|
54
|
+
|
|
55
|
+
### Inputs
|
|
56
|
+
|
|
57
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
58
|
+
| :------------------------ | :----------- | :----------------- | :-------------------------------------------------------- |
|
|
59
|
+
| `data` | `string` | **(Required)** | Nội dung HTML cần hiển thị. |
|
|
60
|
+
| `containerClass` | `string` | `undefined` | Class CSS bổ sung cho container. |
|
|
61
|
+
| `expand` | `boolean` | **(Model)** | Trạng thái mở rộng hoặc thu gọn của component. |
|
|
62
|
+
| `hasButtonCollapseExpand` | `boolean` | `false` | Bật/tắt tính năng giới hạn chiều cao và nút Xem thêm. |
|
|
63
|
+
| `maxHeight` | `number` | `160` | Chiều cao tối đa (pixel) trước khi hiển thị nút Xem thêm. |
|
|
64
|
+
| `labelButtonCollapse` | `string` | `'i18n_collapse'` | Nhãn cho nút thu gọn. |
|
|
65
|
+
| `labelButtonViewMore` | `string` | `'i18n_view_more'` | Nhãn cho nút xem thêm. |
|
|
66
|
+
|
|
67
|
+
## Tech Stack
|
|
68
|
+
|
|
69
|
+
- **Core**: Angular 18+ (Signals)
|
|
70
|
+
- **Styles**: Quill "snow" theme compatible styles
|
|
71
|
+
- **Pipes**: `@libs-ui/pipes-security-trust`
|
|
72
|
+
|
|
73
|
+
## License
|
|
74
|
+
|
|
75
|
+
MIT
|
|
@@ -13,7 +13,12 @@ export class LibsUiComponentsInputsQuill2xPreviewComponent {
|
|
|
13
13
|
}
|
|
14
14
|
return {};
|
|
15
15
|
});
|
|
16
|
-
containerClassComputed = computed(() =>
|
|
16
|
+
containerClassComputed = computed(() => {
|
|
17
|
+
if (this.hasShowMore() && !this.expand()) {
|
|
18
|
+
return `ql-container ${this.containerClass() || ''} overflow-hidden`;
|
|
19
|
+
}
|
|
20
|
+
return `ql-container ${this.containerClass() || ''}`;
|
|
21
|
+
});
|
|
17
22
|
hasShowMore = signal(false);
|
|
18
23
|
//endregion
|
|
19
24
|
//region Private
|
|
@@ -49,4 +54,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
49
54
|
type: Component,
|
|
50
55
|
args: [{ selector: 'libs_ui-components-inputs-quill2x-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiPipesSecurityTrustPipe, AsyncPipe, LibsUiComponentsButtonsButtonComponent], template: "<div\n #preview\n class=\"relative\">\n <div\n [style]=\"containerStyleComputed()\"\n [class]=\"containerClassComputed()\"\n [innerHTML]=\"data() | LibsUiPipesSecurityTrustPipe: 'html' : true | async\"></div>\n @if (hasShowMore() && !expand()) {\n <div class=\"absolute bottom-[28px] w-full h-[40px] opacity-[0.5] bg-[linear-gradient(180deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.95)_51.56%,#fff_100%)]\"></div>\n }\n @if (hasShowMore()) {\n <libs_ui-components-buttons-button\n [sizeButton]=\"'smaller'\"\n [type]=\"'button-link-primary'\"\n [label]=\"expand() ? labelButtonCollapse() || 'i18n_collapse' : labelButtonViewMore() || 'i18n_view_more'\"\n [classInclude]=\"'!p-0 mt-[12px]'\"\n (outClick)=\"handlerExpand()\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host ::ng-deep .ql-container{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400;height:auto}:host ::ng-deep .ql-container ol,:host ::ng-deep .ql-container ul{list-style:none!important;padding-left:0!important;margin-left:0!important}:host ::ng-deep .ql-container ol li,:host ::ng-deep .ql-container ul li{list-style-type:none!important}:host ::ng-deep .ql-container li,:host ::ng-deep .ql-container ol li,:host ::ng-deep .ql-container ul li,:host ::ng-deep .ql-container li[data-list]{counter-reset:none!important;counter-increment:none!important;counter-set:none!important}@supports (counter-set: none){:host ::ng-deep .ql-container li[data-list]{counter-set:none!important}}:host ::ng-deep .ql-container ol li:not(.ql-direction-rtl){counter-increment:none!important}:host ::ng-deep .ql-container ol{counter-reset:my-counter 0!important}:host ::ng-deep .ql-container ol>li[data-list=ordered]{counter-increment:my-counter 1!important;position:relative;padding-left:8px}:host ::ng-deep .ql-container ol>li[data-list=ordered]:before{content:counter(my-counter) \". \"}:host ::ng-deep .ql-container ol li span:before{content:\"\"!important}:host ::ng-deep .ql-container ol li[data-list=bullet]:before{content:\"\\2022 \"!important}:host ::ng-deep .ql-container ol li[data-list=unchecked]:before{content:\"\\2610 \"!important}:host ::ng-deep .ql-container ol li[data-list=checked]:before{content:\"\\2611 \"!important}\n"] }]
|
|
51
56
|
}] });
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3F1aWxsMngtcHJldmlldy9zcmMvaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3F1aWxsMngtcHJldmlldy9zcmMvaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDNUMsT0FBTyxFQUFpQix1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBYyxNQUFNLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdKLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxzQ0FBc0MsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQzVGLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzdFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBVzdCLE1BQU0sT0FBTyw2Q0FBNkM7SUFDeEQsa0JBQWtCO0lBQ1Isc0JBQXNCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtRQUMvQyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLElBQUksRUFBRSxDQUFDO1FBQ25ELENBQUM7UUFFRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUMsQ0FBQyxDQUFDO0lBQ08sc0JBQXNCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtRQUMvQyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE9BQU8sZ0JBQWdCLElBQUksQ0FBQyxjQUFjLEVBQUUsSUFBSSxFQUFFLGtCQUFrQixDQUFDO1FBQ3ZFLENBQUM7UUFFRCxPQUFPLGdCQUFnQixJQUFJLENBQUMsY0FBYyxFQUFFLElBQUksRUFBRSxFQUFFLENBQUM7SUFDdkQsQ0FBQyxDQUFDLENBQUM7SUFDTyxXQUFXLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQy9DLFdBQVc7SUFDWCxnQkFBZ0I7SUFDTixVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQzFDLFdBQVc7SUFDWCxlQUFlO0lBQ04sSUFBSSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQVUsQ0FBQztJQUNoQyxjQUFjLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDakMsTUFBTSxHQUFHLEtBQUssRUFBVyxDQUFDO0lBQzFCLHVCQUF1QixHQUFHLEtBQUssRUFBVyxDQUFDO0lBQzNDLFNBQVMsR0FBRyxLQUFLLENBQTZCLEdBQUcsRUFBRSxFQUFFLFNBQVMsRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsS0FBSyxJQUFJLEdBQUcsRUFBRSxDQUFDLENBQUM7SUFDM0YsbUJBQW1CLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDdEMsbUJBQW1CLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDL0MsV0FBVztJQUNYLG1CQUFtQjtJQUNWLFVBQVUsR0FBRyxTQUFTLENBQUMsUUFBUSxDQUFhLFNBQVMsQ0FBQyxDQUFDO0lBQ2hFLFdBQVc7SUFFWCxlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxFQUFFLENBQUM7WUFDcEMsT0FBTztRQUNULENBQUM7UUFDRCxLQUFLLENBQUMsR0FBRyxDQUFDO2FBQ1AsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUN6QyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDLGFBQWEsQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFNBQVMsRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDakgsQ0FBQztJQUVTLGFBQWE7UUFDckIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEMsQ0FBQzt3R0E3Q1UsNkNBQTZDOzRGQUE3Qyw2Q0FBNkMscXdDQ2hCMUQsc3hCQW1CQSxpL0NETFksNEJBQTRCLGdFQUFFLFNBQVMsOENBQUUsc0NBQXNDOzs0RkFFOUUsNkNBQTZDO2tCQVR6RCxTQUFTOytCQUVFLDJDQUEyQyxjQUN6QyxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyw0QkFBNEIsRUFBRSxTQUFTLEVBQUUsc0NBQXNDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBc3luY1BpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgY29tcHV0ZWQsIERlc3Ryb3lSZWYsIEVsZW1lbnRSZWYsIGluamVjdCwgaW5wdXQsIG1vZGVsLCBzaWduYWwsIHZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdGFrZVVudGlsRGVzdHJveWVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c0J1dHRvbnNCdXR0b25Db21wb25lbnQgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uJztcbmltcG9ydCB7IExpYnNVaVBpcGVzU2VjdXJpdHlUcnVzdFBpcGUgfSBmcm9tICdAbGlicy11aS9waXBlcy1zZWN1cml0eS10cnVzdCc7XG5pbXBvcnQgeyB0aW1lciB9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtaW5wdXRzLXF1aWxsMngtcHJldmlldycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbnB1dHMtcXVpbGwyeC1wcmV2aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2lucHV0cy1xdWlsbDJ4LXByZXZpZXcuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW0xpYnNVaVBpcGVzU2VjdXJpdHlUcnVzdFBpcGUsIEFzeW5jUGlwZSwgTGlic1VpQ29tcG9uZW50c0J1dHRvbnNCdXR0b25Db21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzSW5wdXRzUXVpbGwyeFByZXZpZXdDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgLy9yZWdpb24gUHJvdGVjdGVkXG4gIHByb3RlY3RlZCBjb250YWluZXJTdHlsZUNvbXB1dGVkID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGlmICh0aGlzLmhhc1Nob3dNb3JlKCkgJiYgIXRoaXMuZXhwYW5kKCkpIHtcbiAgICAgIHJldHVybiB7ICdtYXgtaGVpZ2h0JzogYCR7dGhpcy5tYXhIZWlnaHQoKX1weGAgfTtcbiAgICB9XG5cbiAgICByZXR1cm4ge307XG4gIH0pO1xuICBwcm90ZWN0ZWQgY29udGFpbmVyQ2xhc3NDb21wdXRlZCA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBpZiAodGhpcy5oYXNTaG93TW9yZSgpICYmICF0aGlzLmV4cGFuZCgpKSB7XG4gICAgICByZXR1cm4gYHFsLWNvbnRhaW5lciAke3RoaXMuY29udGFpbmVyQ2xhc3MoKSB8fCAnJ30gb3ZlcmZsb3ctaGlkZGVuYDtcbiAgICB9XG5cbiAgICByZXR1cm4gYHFsLWNvbnRhaW5lciAke3RoaXMuY29udGFpbmVyQ2xhc3MoKSB8fCAnJ31gO1xuICB9KTtcbiAgcHJvdGVjdGVkIGhhc1Nob3dNb3JlID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgLy9lbmRyZWdpb25cbiAgLy9yZWdpb24gUHJpdmF0ZVxuICBwcm90ZWN0ZWQgZGVzdHJveVJlZiA9IGluamVjdChEZXN0cm95UmVmKTtcbiAgLy9lbmRyZWdpb25cbiAgLy9yZWdpb24gSW5wdXRzXG4gIHJlYWRvbmx5IGRhdGEgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGNvbnRhaW5lckNsYXNzID0gaW5wdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBleHBhbmQgPSBtb2RlbDxib29sZWFuPigpO1xuICByZWFkb25seSBoYXNCdXR0b25Db2xsYXBzZUV4cGFuZCA9IGlucHV0PGJvb2xlYW4+KCk7XG4gIHJlYWRvbmx5IG1heEhlaWdodCA9IGlucHV0PG51bWJlciwgbnVtYmVyIHwgdW5kZWZpbmVkPigxNjAsIHsgdHJhbnNmb3JtOiAodmFsdWUpID0+IHZhbHVlIHx8IDE2MCB9KTtcbiAgcmVhZG9ubHkgbGFiZWxCdXR0b25Db2xsYXBzZSA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgbGFiZWxCdXR0b25WaWV3TW9yZSA9IGlucHV0PHN0cmluZz4oKTtcbiAgLy9lbmRyZWdpb25cbiAgLy9yZWdpb24gVmlldyBjaGlsZFxuICByZWFkb25seSBwcmV2aWV3UmVmID0gdmlld0NoaWxkLnJlcXVpcmVkPEVsZW1lbnRSZWY+KCdwcmV2aWV3Jyk7XG4gIC8vZW5kcmVnaW9uXG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIGlmICghdGhpcy5oYXNCdXR0b25Db2xsYXBzZUV4cGFuZCgpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRpbWVyKDI1MClcbiAgICAgIC5waXBlKHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpKVxuICAgICAgLnN1YnNjcmliZSgoKSA9PiB0aGlzLmhhc1Nob3dNb3JlLnNldCh0aGlzLnByZXZpZXdSZWYoKS5uYXRpdmVFbGVtZW50Lm9mZnNldEhlaWdodCA+IHRoaXMubWF4SGVpZ2h0KCkgKyAyOCkpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJFeHBhbmQoKSB7XG4gICAgdGhpcy5leHBhbmQudXBkYXRlKCh2YWx1ZSkgPT4gIXZhbHVlKTtcbiAgfVxufVxuIiwiPGRpdlxuICAjcHJldmlld1xuICBjbGFzcz1cInJlbGF0aXZlXCI+XG4gIDxkaXZcbiAgICBbc3R5bGVdPVwiY29udGFpbmVyU3R5bGVDb21wdXRlZCgpXCJcbiAgICBbY2xhc3NdPVwiY29udGFpbmVyQ2xhc3NDb21wdXRlZCgpXCJcbiAgICBbaW5uZXJIVE1MXT1cImRhdGEoKSB8IExpYnNVaVBpcGVzU2VjdXJpdHlUcnVzdFBpcGU6ICdodG1sJyA6IHRydWUgfCBhc3luY1wiPjwvZGl2PlxuICBAaWYgKGhhc1Nob3dNb3JlKCkgJiYgIWV4cGFuZCgpKSB7XG4gICAgPGRpdiBjbGFzcz1cImFic29sdXRlIGJvdHRvbS1bMjhweF0gdy1mdWxsIGgtWzQwcHhdIG9wYWNpdHktWzAuNV0gYmctW2xpbmVhci1ncmFkaWVudCgxODBkZWcscmdiYSgyNTUsMjU1LDI1NSwwKV8wJSxyZ2JhKDI1NSwyNTUsMjU1LDAuOTUpXzUxLjU2JSwjZmZmXzEwMCUpXVwiPjwvZGl2PlxuICB9XG4gIEBpZiAoaGFzU2hvd01vcmUoKSkge1xuICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b25cbiAgICAgIFtzaXplQnV0dG9uXT1cIidzbWFsbGVyJ1wiXG4gICAgICBbdHlwZV09XCInYnV0dG9uLWxpbmstcHJpbWFyeSdcIlxuICAgICAgW2xhYmVsXT1cImV4cGFuZCgpID8gbGFiZWxCdXR0b25Db2xsYXBzZSgpIHx8ICdpMThuX2NvbGxhcHNlJyA6IGxhYmVsQnV0dG9uVmlld01vcmUoKSB8fCAnaTE4bl92aWV3X21vcmUnXCJcbiAgICAgIFtjbGFzc0luY2x1ZGVdPVwiJyFwLTAgbXQtWzEycHhdJ1wiXG4gICAgICAob3V0Q2xpY2spPVwiaGFuZGxlckV4cGFuZCgpXCIgLz5cbiAgfVxuPC9kaXY+XG4iXX0=
|
|
@@ -14,7 +14,12 @@ class LibsUiComponentsInputsQuill2xPreviewComponent {
|
|
|
14
14
|
}
|
|
15
15
|
return {};
|
|
16
16
|
});
|
|
17
|
-
containerClassComputed = computed(() =>
|
|
17
|
+
containerClassComputed = computed(() => {
|
|
18
|
+
if (this.hasShowMore() && !this.expand()) {
|
|
19
|
+
return `ql-container ${this.containerClass() || ''} overflow-hidden`;
|
|
20
|
+
}
|
|
21
|
+
return `ql-container ${this.containerClass() || ''}`;
|
|
22
|
+
});
|
|
18
23
|
hasShowMore = signal(false);
|
|
19
24
|
//endregion
|
|
20
25
|
//region Private
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-inputs-quill2x-preview.mjs","sources":["../../../../../../libs-ui/components/inputs/quill2x-preview/src/inputs-quill2x-preview.component.ts","../../../../../../libs-ui/components/inputs/quill2x-preview/src/inputs-quill2x-preview.component.html","../../../../../../libs-ui/components/inputs/quill2x-preview/src/libs-ui-components-inputs-quill2x-preview.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, input, model, signal, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';\nimport { timer } from 'rxjs';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-inputs-quill2x-preview',\n standalone: true,\n templateUrl: './inputs-quill2x-preview.component.html',\n styleUrl: './inputs-quill2x-preview.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [LibsUiPipesSecurityTrustPipe, AsyncPipe, LibsUiComponentsButtonsButtonComponent],\n})\nexport class LibsUiComponentsInputsQuill2xPreviewComponent implements AfterViewInit {\n //region Protected\n protected containerStyleComputed = computed(() => {\n if (this.hasShowMore() && !this.expand()) {\n return { 'max-height': `${this.maxHeight()}px` };\n }\n\n return {};\n });\n protected containerClassComputed = computed(() => `ql-container ${this.containerClass() || ''} ${this.
|
|
1
|
+
{"version":3,"file":"libs-ui-components-inputs-quill2x-preview.mjs","sources":["../../../../../../libs-ui/components/inputs/quill2x-preview/src/inputs-quill2x-preview.component.ts","../../../../../../libs-ui/components/inputs/quill2x-preview/src/inputs-quill2x-preview.component.html","../../../../../../libs-ui/components/inputs/quill2x-preview/src/libs-ui-components-inputs-quill2x-preview.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, input, model, signal, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';\nimport { timer } from 'rxjs';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-inputs-quill2x-preview',\n standalone: true,\n templateUrl: './inputs-quill2x-preview.component.html',\n styleUrl: './inputs-quill2x-preview.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [LibsUiPipesSecurityTrustPipe, AsyncPipe, LibsUiComponentsButtonsButtonComponent],\n})\nexport class LibsUiComponentsInputsQuill2xPreviewComponent implements AfterViewInit {\n //region Protected\n protected containerStyleComputed = computed(() => {\n if (this.hasShowMore() && !this.expand()) {\n return { 'max-height': `${this.maxHeight()}px` };\n }\n\n return {};\n });\n protected containerClassComputed = computed(() => {\n if (this.hasShowMore() && !this.expand()) {\n return `ql-container ${this.containerClass() || ''} overflow-hidden`;\n }\n\n return `ql-container ${this.containerClass() || ''}`;\n });\n protected hasShowMore = signal<boolean>(false);\n //endregion\n //region Private\n protected destroyRef = inject(DestroyRef);\n //endregion\n //region Inputs\n readonly data = input.required<string>();\n readonly containerClass = input<string>();\n readonly expand = model<boolean>();\n readonly hasButtonCollapseExpand = input<boolean>();\n readonly maxHeight = input<number, number | undefined>(160, { transform: (value) => value || 160 });\n readonly labelButtonCollapse = input<string>();\n readonly labelButtonViewMore = input<string>();\n //endregion\n //region View child\n readonly previewRef = viewChild.required<ElementRef>('preview');\n //endregion\n\n ngAfterViewInit() {\n if (!this.hasButtonCollapseExpand()) {\n return;\n }\n timer(250)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.hasShowMore.set(this.previewRef().nativeElement.offsetHeight > this.maxHeight() + 28));\n }\n\n protected handlerExpand() {\n this.expand.update((value) => !value);\n }\n}\n","<div\n #preview\n class=\"relative\">\n <div\n [style]=\"containerStyleComputed()\"\n [class]=\"containerClassComputed()\"\n [innerHTML]=\"data() | LibsUiPipesSecurityTrustPipe: 'html' : true | async\"></div>\n @if (hasShowMore() && !expand()) {\n <div class=\"absolute bottom-[28px] w-full h-[40px] opacity-[0.5] bg-[linear-gradient(180deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.95)_51.56%,#fff_100%)]\"></div>\n }\n @if (hasShowMore()) {\n <libs_ui-components-buttons-button\n [sizeButton]=\"'smaller'\"\n [type]=\"'button-link-primary'\"\n [label]=\"expand() ? labelButtonCollapse() || 'i18n_collapse' : labelButtonViewMore() || 'i18n_view_more'\"\n [classInclude]=\"'!p-0 mt-[12px]'\"\n (outClick)=\"handlerExpand()\" />\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAgBa,6CAA6C,CAAA;;AAE9C,IAAA,sBAAsB,GAAG,QAAQ,CAAC,MAAK;QAC/C,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;YACxC,OAAO,EAAE,YAAY,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,EAAE,CAAA,EAAA,CAAI,EAAE;QAClD;AAEA,QAAA,OAAO,EAAE;AACX,IAAA,CAAC,CAAC;AACQ,IAAA,sBAAsB,GAAG,QAAQ,CAAC,MAAK;QAC/C,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;YACxC,OAAO,CAAA,aAAA,EAAgB,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,kBAAkB;QACtE;QAEA,OAAO,CAAA,aAAA,EAAgB,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,EAAE;AACtD,IAAA,CAAC,CAAC;AACQ,IAAA,WAAW,GAAG,MAAM,CAAU,KAAK,CAAC;;;AAGpC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;;;AAGhC,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAU;IAC/B,cAAc,GAAG,KAAK,EAAU;IAChC,MAAM,GAAG,KAAK,EAAW;IACzB,uBAAuB,GAAG,KAAK,EAAW;AAC1C,IAAA,SAAS,GAAG,KAAK,CAA6B,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,IAAI,GAAG,EAAE,CAAC;IAC1F,mBAAmB,GAAG,KAAK,EAAU;IACrC,mBAAmB,GAAG,KAAK,EAAU;;;AAGrC,IAAA,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAa,SAAS,CAAC;;IAG/D,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE;YACnC;QACF;QACA,KAAK,CAAC,GAAG;AACN,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC;IAChH;IAEU,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC;IACvC;wGA7CW,6CAA6C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA7C,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,6CAA6C,qwCChB1D,sxBAmBA,EAAA,MAAA,EAAA,CAAA,87CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EDLY,4BAA4B,EAAA,IAAA,EAAA,8BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,SAAS,8CAAE,sCAAsC,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,EAAA,cAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,yBAAA,EAAA,+BAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,mCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,iBAAA,EAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAE9E,6CAA6C,EAAA,UAAA,EAAA,CAAA;kBATzD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2CAA2C,EAAA,UAAA,EACzC,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,4BAA4B,EAAE,SAAS,EAAE,sCAAsC,CAAC,EAAA,QAAA,EAAA,sxBAAA,EAAA,MAAA,EAAA,CAAA,87CAAA,CAAA,EAAA;;;AEd5F;;AAEG;;;;"}
|