@libs-ui/components-inputs-quill2x-preview 0.2.355-1 → 0.2.355-10

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.
@@ -1,19 +1,52 @@
1
1
  import { AsyncPipe } from '@angular/common';
2
- import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
2
+ import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, input, model, signal, viewChild } from '@angular/core';
3
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
4
+ import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
3
5
  import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
6
+ import { timer } from 'rxjs';
4
7
  import * as i0 from "@angular/core";
5
8
  export class LibsUiComponentsInputsQuill2xPreviewComponent {
6
9
  //region Protected
7
- containerClassComputed = computed(() => `ql-container ${this.containerClass() || ''}`);
10
+ containerStyleComputed = computed(() => {
11
+ if (this.hasShowMore() && !this.expand()) {
12
+ return { 'max-height': `${this.maxHeight()}px` };
13
+ }
14
+ return {};
15
+ });
16
+ containerClassComputed = computed(() => `ql-container ${this.containerClass() || ''} ${this.hasShowMore() && !this.expand() ? 'overflow-hidden' : ''}`);
17
+ hasShowMore = signal(false);
18
+ //endregion
19
+ //region Private
20
+ destroyRef = inject(DestroyRef);
8
21
  //endregion
9
22
  //region Inputs
10
23
  data = input.required();
11
24
  containerClass = input();
25
+ expand = model();
26
+ hasButtonCollapseExpand = input();
27
+ maxHeight = input(160, { transform: (value) => value || 160 });
28
+ labelButtonCollapse = input();
29
+ labelButtonViewMore = input();
30
+ //endregion
31
+ //region View child
32
+ previewRef = viewChild.required('preview');
33
+ //endregion
34
+ ngAfterViewInit() {
35
+ if (!this.hasButtonCollapseExpand()) {
36
+ return;
37
+ }
38
+ timer(250)
39
+ .pipe(takeUntilDestroyed(this.destroyRef))
40
+ .subscribe(() => this.hasShowMore.set(this.previewRef().nativeElement.offsetHeight > this.maxHeight() + 28));
41
+ }
42
+ handlerExpand() {
43
+ this.expand.update((value) => !value);
44
+ }
12
45
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsInputsQuill2xPreviewComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill2x-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"containerClassComputed()\"\n [innerHTML]=\"data() | LibsUiPipesSecurityTrustPipe: 'html' : true | async\"></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"], dependencies: [{ kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
46
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsQuill2xPreviewComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill2x-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, hasButtonCollapseExpand: { classPropertyName: "hasButtonCollapseExpand", publicName: "hasButtonCollapseExpand", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, labelButtonCollapse: { classPropertyName: "labelButtonCollapse", publicName: "labelButtonCollapse", isSignal: true, isRequired: false, transformFunction: null }, labelButtonViewMore: { classPropertyName: "labelButtonViewMore", publicName: "labelButtonViewMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expand: "expandChange" }, viewQueries: [{ propertyName: "previewRef", first: true, predicate: ["preview"], descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14
47
  }
15
48
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xPreviewComponent, decorators: [{
16
49
  type: Component,
17
- args: [{ selector: 'libs_ui-components-inputs-quill2x-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiPipesSecurityTrustPipe, AsyncPipe], template: "<div\n [class]=\"containerClassComputed()\"\n [innerHTML]=\"data() | LibsUiPipesSecurityTrustPipe: 'html' : true | async\"></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"] }]
50
+ 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"] }]
18
51
  }] });
19
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3F1aWxsMngtcHJldmlldy9zcmMvaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3F1aWxsMngtcHJldmlldy9zcmMvaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDNUMsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLCtCQUErQixDQUFDOztBQVc3RSxNQUFNLE9BQU8sNkNBQTZDO0lBQ3hELGtCQUFrQjtJQUNSLHNCQUFzQixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxnQkFBZ0IsSUFBSSxDQUFDLGNBQWMsRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDakcsV0FBVztJQUNYLGVBQWU7SUFDTixJQUFJLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO0lBQ2hDLGNBQWMsR0FBRyxLQUFLLEVBQVUsQ0FBQzt3R0FOL0IsNkNBQTZDOzRGQUE3Qyw2Q0FBNkMsd1hDYjFELHVJQUdBLGkvQ0RRWSw0QkFBNEIsZ0VBQUUsU0FBUzs7NEZBRXRDLDZDQUE2QztrQkFUekQsU0FBUzsrQkFFRSwyQ0FBMkMsY0FDekMsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsNEJBQTRCLEVBQUUsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXN5bmNQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGlic1VpUGlwZXNTZWN1cml0eVRydXN0UGlwZSB9IGZyb20gJ0BsaWJzLXVpL3BpcGVzLXNlY3VyaXR5LXRydXN0JztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbGlic191aS1jb21wb25lbnRzLWlucHV0cy1xdWlsbDJ4LXByZXZpZXcnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9pbnB1dHMtcXVpbGwyeC1wcmV2aWV3LmNvbXBvbmVudC5zY3NzJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGltcG9ydHM6IFtMaWJzVWlQaXBlc1NlY3VyaXR5VHJ1c3RQaXBlLCBBc3luY1BpcGVdLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzSW5wdXRzUXVpbGwyeFByZXZpZXdDb21wb25lbnQge1xuICAvL3JlZ2lvbiBQcm90ZWN0ZWRcbiAgcHJvdGVjdGVkIGNvbnRhaW5lckNsYXNzQ29tcHV0ZWQgPSBjb21wdXRlZCgoKSA9PiBgcWwtY29udGFpbmVyICR7dGhpcy5jb250YWluZXJDbGFzcygpIHx8ICcnfWApO1xuICAvL2VuZHJlZ2lvblxuICAvL3JlZ2lvbiBJbnB1dHNcbiAgcmVhZG9ubHkgZGF0YSA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgY29udGFpbmVyQ2xhc3MgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIC8vZW5kcmVnaW9uXG59XG4iLCI8ZGl2XG4gIFtjbGFzc109XCJjb250YWluZXJDbGFzc0NvbXB1dGVkKClcIlxuICBbaW5uZXJIVE1MXT1cImRhdGEoKSB8IExpYnNVaVBpcGVzU2VjdXJpdHlUcnVzdFBpcGU6ICdodG1sJyA6IHRydWUgfCBhc3luY1wiPjwvZGl2PlxuIl19
52
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3F1aWxsMngtcHJldmlldy9zcmMvaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL3F1aWxsMngtcHJldmlldy9zcmMvaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDNUMsT0FBTyxFQUFpQix1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBYyxNQUFNLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdKLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxzQ0FBc0MsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQzVGLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzdFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBVzdCLE1BQU0sT0FBTyw2Q0FBNkM7SUFDeEQsa0JBQWtCO0lBQ1Isc0JBQXNCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtRQUMvQyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLElBQUksRUFBRSxDQUFDO1FBQ25ELENBQUM7UUFFRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUMsQ0FBQyxDQUFDO0lBQ08sc0JBQXNCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGdCQUFnQixJQUFJLENBQUMsY0FBYyxFQUFFLElBQUksRUFBRSxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDeEosV0FBVyxHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUMvQyxXQUFXO0lBQ1gsZ0JBQWdCO0lBQ04sVUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUMxQyxXQUFXO0lBQ1gsZUFBZTtJQUNOLElBQUksR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7SUFDaEMsY0FBYyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ2pDLE1BQU0sR0FBRyxLQUFLLEVBQVcsQ0FBQztJQUMxQix1QkFBdUIsR0FBRyxLQUFLLEVBQVcsQ0FBQztJQUMzQyxTQUFTLEdBQUcsS0FBSyxDQUE2QixHQUFHLEVBQUUsRUFBRSxTQUFTLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEtBQUssSUFBSSxHQUFHLEVBQUUsQ0FBQyxDQUFDO0lBQzNGLG1CQUFtQixHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3RDLG1CQUFtQixHQUFHLEtBQUssRUFBVSxDQUFDO0lBQy9DLFdBQVc7SUFDWCxtQkFBbUI7SUFDVixVQUFVLEdBQUcsU0FBUyxDQUFDLFFBQVEsQ0FBYSxTQUFTLENBQUMsQ0FBQztJQUNoRSxXQUFXO0lBRVgsZUFBZTtRQUNiLElBQUksQ0FBQyxJQUFJLENBQUMsdUJBQXVCLEVBQUUsRUFBRSxDQUFDO1lBQ3BDLE9BQU87UUFDVCxDQUFDO1FBQ0QsS0FBSyxDQUFDLEdBQUcsQ0FBQzthQUNQLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7YUFDekMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxhQUFhLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ2pILENBQUM7SUFFUyxhQUFhO1FBQ3JCLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3hDLENBQUM7d0dBdkNVLDZDQUE2Qzs0RkFBN0MsNkNBQTZDLHF3Q0NoQjFELHN4QkFtQkEsaS9DRExZLDRCQUE0QixnRUFBRSxTQUFTLDhDQUFFLHNDQUFzQzs7NEZBRTlFLDZDQUE2QztrQkFUekQsU0FBUzsrQkFFRSwyQ0FBMkMsY0FDekMsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsNEJBQTRCLEVBQUUsU0FBUyxFQUFFLHNDQUFzQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXN5bmNQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBEZXN0cm95UmVmLCBFbGVtZW50UmVmLCBpbmplY3QsIGlucHV0LCBtb2RlbCwgc2lnbmFsLCB2aWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCdXR0b25zQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbic7XG5pbXBvcnQgeyBMaWJzVWlQaXBlc1NlY3VyaXR5VHJ1c3RQaXBlIH0gZnJvbSAnQGxpYnMtdWkvcGlwZXMtc2VjdXJpdHktdHJ1c3QnO1xuaW1wb3J0IHsgdGltZXIgfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbGlic191aS1jb21wb25lbnRzLWlucHV0cy1xdWlsbDJ4LXByZXZpZXcnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vaW5wdXRzLXF1aWxsMngtcHJldmlldy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9pbnB1dHMtcXVpbGwyeC1wcmV2aWV3LmNvbXBvbmVudC5zY3NzJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGltcG9ydHM6IFtMaWJzVWlQaXBlc1NlY3VyaXR5VHJ1c3RQaXBlLCBBc3luY1BpcGUsIExpYnNVaUNvbXBvbmVudHNCdXR0b25zQnV0dG9uQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0lucHV0c1F1aWxsMnhQcmV2aWV3Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIC8vcmVnaW9uIFByb3RlY3RlZFxuICBwcm90ZWN0ZWQgY29udGFpbmVyU3R5bGVDb21wdXRlZCA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBpZiAodGhpcy5oYXNTaG93TW9yZSgpICYmICF0aGlzLmV4cGFuZCgpKSB7XG4gICAgICByZXR1cm4geyAnbWF4LWhlaWdodCc6IGAke3RoaXMubWF4SGVpZ2h0KCl9cHhgIH07XG4gICAgfVxuXG4gICAgcmV0dXJuIHt9O1xuICB9KTtcbiAgcHJvdGVjdGVkIGNvbnRhaW5lckNsYXNzQ29tcHV0ZWQgPSBjb21wdXRlZCgoKSA9PiBgcWwtY29udGFpbmVyICR7dGhpcy5jb250YWluZXJDbGFzcygpIHx8ICcnfSAke3RoaXMuaGFzU2hvd01vcmUoKSAmJiAhdGhpcy5leHBhbmQoKSA/ICdvdmVyZmxvdy1oaWRkZW4nIDogJyd9YCk7XG4gIHByb3RlY3RlZCBoYXNTaG93TW9yZSA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIC8vZW5kcmVnaW9uXG4gIC8vcmVnaW9uIFByaXZhdGVcbiAgcHJvdGVjdGVkIGRlc3Ryb3lSZWYgPSBpbmplY3QoRGVzdHJveVJlZik7XG4gIC8vZW5kcmVnaW9uXG4gIC8vcmVnaW9uIElucHV0c1xuICByZWFkb25seSBkYXRhID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuICByZWFkb25seSBjb250YWluZXJDbGFzcyA9IGlucHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgZXhwYW5kID0gbW9kZWw8Ym9vbGVhbj4oKTtcbiAgcmVhZG9ubHkgaGFzQnV0dG9uQ29sbGFwc2VFeHBhbmQgPSBpbnB1dDxib29sZWFuPigpO1xuICByZWFkb25seSBtYXhIZWlnaHQgPSBpbnB1dDxudW1iZXIsIG51bWJlciB8IHVuZGVmaW5lZD4oMTYwLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSB8fCAxNjAgfSk7XG4gIHJlYWRvbmx5IGxhYmVsQnV0dG9uQ29sbGFwc2UgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGxhYmVsQnV0dG9uVmlld01vcmUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIC8vZW5kcmVnaW9uXG4gIC8vcmVnaW9uIFZpZXcgY2hpbGRcbiAgcmVhZG9ubHkgcHJldmlld1JlZiA9IHZpZXdDaGlsZC5yZXF1aXJlZDxFbGVtZW50UmVmPigncHJldmlldycpO1xuICAvL2VuZHJlZ2lvblxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBpZiAoIXRoaXMuaGFzQnV0dG9uQ29sbGFwc2VFeHBhbmQoKSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aW1lcigyNTApXG4gICAgICAucGlwZSh0YWtlVW50aWxEZXN0cm95ZWQodGhpcy5kZXN0cm95UmVmKSlcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4gdGhpcy5oYXNTaG93TW9yZS5zZXQodGhpcy5wcmV2aWV3UmVmKCkubmF0aXZlRWxlbWVudC5vZmZzZXRIZWlnaHQgPiB0aGlzLm1heEhlaWdodCgpICsgMjgpKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyRXhwYW5kKCkge1xuICAgIHRoaXMuZXhwYW5kLnVwZGF0ZSgodmFsdWUpID0+ICF2YWx1ZSk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgI3ByZXZpZXdcbiAgY2xhc3M9XCJyZWxhdGl2ZVwiPlxuICA8ZGl2XG4gICAgW3N0eWxlXT1cImNvbnRhaW5lclN0eWxlQ29tcHV0ZWQoKVwiXG4gICAgW2NsYXNzXT1cImNvbnRhaW5lckNsYXNzQ29tcHV0ZWQoKVwiXG4gICAgW2lubmVySFRNTF09XCJkYXRhKCkgfCBMaWJzVWlQaXBlc1NlY3VyaXR5VHJ1c3RQaXBlOiAnaHRtbCcgOiB0cnVlIHwgYXN5bmNcIj48L2Rpdj5cbiAgQGlmIChoYXNTaG93TW9yZSgpICYmICFleHBhbmQoKSkge1xuICAgIDxkaXYgY2xhc3M9XCJhYnNvbHV0ZSBib3R0b20tWzI4cHhdIHctZnVsbCBoLVs0MHB4XSBvcGFjaXR5LVswLjVdIGJnLVtsaW5lYXItZ3JhZGllbnQoMTgwZGVnLHJnYmEoMjU1LDI1NSwyNTUsMClfMCUscmdiYSgyNTUsMjU1LDI1NSwwLjk1KV81MS41NiUsI2ZmZl8xMDAlKV1cIj48L2Rpdj5cbiAgfVxuICBAaWYgKGhhc1Nob3dNb3JlKCkpIHtcbiAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uXG4gICAgICBbc2l6ZUJ1dHRvbl09XCInc21hbGxlcidcIlxuICAgICAgW3R5cGVdPVwiJ2J1dHRvbi1saW5rLXByaW1hcnknXCJcbiAgICAgIFtsYWJlbF09XCJleHBhbmQoKSA/IGxhYmVsQnV0dG9uQ29sbGFwc2UoKSB8fCAnaTE4bl9jb2xsYXBzZScgOiBsYWJlbEJ1dHRvblZpZXdNb3JlKCkgfHwgJ2kxOG5fdmlld19tb3JlJ1wiXG4gICAgICBbY2xhc3NJbmNsdWRlXT1cIichcC0wIG10LVsxMnB4XSdcIlxuICAgICAgKG91dENsaWNrKT1cImhhbmRsZXJFeHBhbmQoKVwiIC8+XG4gIH1cbjwvZGl2PlxuIl19
@@ -1,21 +1,54 @@
1
1
  import { AsyncPipe } from '@angular/common';
2
2
  import * as i0 from '@angular/core';
3
- import { computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
3
+ import { computed, signal, inject, DestroyRef, input, model, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
4
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
5
+ import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
4
6
  import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
7
+ import { timer } from 'rxjs';
5
8
 
6
9
  class LibsUiComponentsInputsQuill2xPreviewComponent {
7
10
  //region Protected
8
- containerClassComputed = computed(() => `ql-container ${this.containerClass() || ''}`);
11
+ containerStyleComputed = computed(() => {
12
+ if (this.hasShowMore() && !this.expand()) {
13
+ return { 'max-height': `${this.maxHeight()}px` };
14
+ }
15
+ return {};
16
+ });
17
+ containerClassComputed = computed(() => `ql-container ${this.containerClass() || ''} ${this.hasShowMore() && !this.expand() ? 'overflow-hidden' : ''}`);
18
+ hasShowMore = signal(false);
19
+ //endregion
20
+ //region Private
21
+ destroyRef = inject(DestroyRef);
9
22
  //endregion
10
23
  //region Inputs
11
24
  data = input.required();
12
25
  containerClass = input();
26
+ expand = model();
27
+ hasButtonCollapseExpand = input();
28
+ maxHeight = input(160, { transform: (value) => value || 160 });
29
+ labelButtonCollapse = input();
30
+ labelButtonViewMore = input();
31
+ //endregion
32
+ //region View child
33
+ previewRef = viewChild.required('preview');
34
+ //endregion
35
+ ngAfterViewInit() {
36
+ if (!this.hasButtonCollapseExpand()) {
37
+ return;
38
+ }
39
+ timer(250)
40
+ .pipe(takeUntilDestroyed(this.destroyRef))
41
+ .subscribe(() => this.hasShowMore.set(this.previewRef().nativeElement.offsetHeight > this.maxHeight() + 28));
42
+ }
43
+ handlerExpand() {
44
+ this.expand.update((value) => !value);
45
+ }
13
46
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsInputsQuill2xPreviewComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill2x-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"containerClassComputed()\"\n [innerHTML]=\"data() | LibsUiPipesSecurityTrustPipe: 'html' : true | async\"></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"], dependencies: [{ kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
47
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsQuill2xPreviewComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill2x-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, hasButtonCollapseExpand: { classPropertyName: "hasButtonCollapseExpand", publicName: "hasButtonCollapseExpand", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, labelButtonCollapse: { classPropertyName: "labelButtonCollapse", publicName: "labelButtonCollapse", isSignal: true, isRequired: false, transformFunction: null }, labelButtonViewMore: { classPropertyName: "labelButtonViewMore", publicName: "labelButtonViewMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expand: "expandChange" }, viewQueries: [{ propertyName: "previewRef", first: true, predicate: ["preview"], descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
15
48
  }
16
49
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xPreviewComponent, decorators: [{
17
50
  type: Component,
18
- args: [{ selector: 'libs_ui-components-inputs-quill2x-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiPipesSecurityTrustPipe, AsyncPipe], template: "<div\n [class]=\"containerClassComputed()\"\n [innerHTML]=\"data() | LibsUiPipesSecurityTrustPipe: 'html' : true | async\"></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
+ 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"] }]
19
52
  }] });
20
53
 
21
54
  /**
@@ -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 { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';\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],\n})\nexport class LibsUiComponentsInputsQuill2xPreviewComponent {\n //region Protected\n protected containerClassComputed = computed(() => `ql-container ${this.containerClass() || ''}`);\n //endregion\n //region Inputs\n readonly data = input.required<string>();\n readonly containerClass = input<string>();\n //endregion\n}\n","<div\n [class]=\"containerClassComputed()\"\n [innerHTML]=\"data() | LibsUiPipesSecurityTrustPipe: 'html' : true | async\"></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAaa,6CAA6C,CAAA;;AAE9C,IAAA,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAA,aAAA,EAAgB,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAA,CAAE,CAAC;;;AAGvF,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAU;IAC/B,cAAc,GAAG,KAAK,EAAU;wGAN9B,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,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb1D,uIAGA,EAAA,MAAA,EAAA,CAAA,87CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EDQY,4BAA4B,gEAAE,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAEtC,6CAA6C,EAAA,UAAA,EAAA,CAAA;kBATzD,SAAS;+BAEE,2CAA2C,EAAA,UAAA,EACzC,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,uIAAA,EAAA,MAAA,EAAA,CAAA,87CAAA,CAAA,EAAA;;;AEXpD;;AAEG;;;;"}
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.hasShowMore() && !this.expand() ? 'overflow-hidden' : ''}`);\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":"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"}
@@ -1,8 +1,24 @@
1
+ import { AfterViewInit, DestroyRef, ElementRef } from '@angular/core';
1
2
  import * as i0 from "@angular/core";
2
- export declare class LibsUiComponentsInputsQuill2xPreviewComponent {
3
+ export declare class LibsUiComponentsInputsQuill2xPreviewComponent implements AfterViewInit {
4
+ protected containerStyleComputed: import("@angular/core").Signal<{
5
+ 'max-height': string;
6
+ } | {
7
+ 'max-height'?: undefined;
8
+ }>;
3
9
  protected containerClassComputed: import("@angular/core").Signal<string>;
10
+ protected hasShowMore: import("@angular/core").WritableSignal<boolean>;
11
+ protected destroyRef: DestroyRef;
4
12
  readonly data: import("@angular/core").InputSignal<string>;
5
13
  readonly containerClass: import("@angular/core").InputSignal<string | undefined>;
14
+ readonly expand: import("@angular/core").ModelSignal<boolean | undefined>;
15
+ readonly hasButtonCollapseExpand: import("@angular/core").InputSignal<boolean | undefined>;
16
+ readonly maxHeight: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
17
+ readonly labelButtonCollapse: import("@angular/core").InputSignal<string | undefined>;
18
+ readonly labelButtonViewMore: import("@angular/core").InputSignal<string | undefined>;
19
+ readonly previewRef: import("@angular/core").Signal<ElementRef<any>>;
20
+ ngAfterViewInit(): void;
21
+ protected handlerExpand(): void;
6
22
  static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsInputsQuill2xPreviewComponent, never>;
7
- static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsQuill2xPreviewComponent, "libs_ui-components-inputs-quill2x-preview", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
23
+ static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsQuill2xPreviewComponent, "libs_ui-components-inputs-quill2x-preview", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "expand": { "alias": "expand"; "required": false; "isSignal": true; }; "hasButtonCollapseExpand": { "alias": "hasButtonCollapseExpand"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "labelButtonCollapse": { "alias": "labelButtonCollapse"; "required": false; "isSignal": true; }; "labelButtonViewMore": { "alias": "labelButtonViewMore"; "required": false; "isSignal": true; }; }, { "expand": "expandChange"; }, never, never, true, never>;
8
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@libs-ui/components-inputs-quill2x-preview",
3
- "version": "0.2.355-1",
3
+ "version": "0.2.355-10",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^18.2.0",
6
6
  "@angular/core": "^18.2.0"